Cocoonでシンプルな1カラムサイトを作成する方法【サイドバー削除】

旅行と食べ歩きでサブディレクトリーにて新たに設けたサイトと美容サイトは、サイドバーなしの1カラムにしてみました。

1カラムの設定方法

Cocoon設定

1. 全体
2. サイドバーの表示状態
3. 「全てのページで非表示」にチェック
4. 1番下にある「変更をまとめて保存」をクリック

コンテンツ幅

サイドバーをなくしただけでは横にだだっ広いサイトになるので、「カラム→コンテンツ幅」でコンテンツ幅を800→600に変更しました。

文章や見出し

PCだけ文章や見出しが横に長い感じがするのでCSSで調整しました。

@media screen and (min-width:1024px){
.article{
width:800px;margin:0 auto;}
}

ページ送りナビ幅

コンテンツ幅からはみ出るのでCSSで調整。768の数値は1024でも良いかと。

@media screen and (min-width:768px){
.pager-post-navi a.prev-post{
width:80%;
margin-left:auto;margin-right:auto;}
}
@media screen and (min-width:768px){
.pager-post-navi a.next-post{
width:80%;
margin-left:auto;margin-right:auto;}
}

カテゴリーと検索ボックス幅

このままだとPCで見た時に横長いボックスになるのでCSSで調整。

/*1カラムカテゴリーと検索ボックス幅*/
@media screen and (min-width:1024px){
.search-box{width:70%;
margin-left:auto;margin-right:auto;}
}
@media screen and (min-width:1024px){
.widget_categories{width:70%;
margin-left:auto;margin-right:auto;}
}
@media screen and (min-width:1024px){
.widget{width:70%;
margin-left:auto;margin-right:auto;}
}

関連記事

ウィジェットで表示させています。そのままだと左寄りになるので中央に寄せました。

/*関連記事*/
@media screen and (min-width:1024px){
.widget-entry-card-link.a-wrap{
width:60%;margin-left:auto;margin-right:auto;}
}

よりシンプルに

スキン

「なし」を選択すると、よりシンプルなサイトになるかと。

背景色

境目のところがグレーになるので、「全体→サイト背景色」でホワイト（#ffffff）にして「変更をまとめて保存」

抜粋文字数と投稿日

「設定→インデックス」から非表示にしました。

パンくずリスト

非表示にしましたが、SEOが気になる場合は表示させておいた方が良いかも。
その場合はこのようなコードを書いておけば良いかと（もしくは margin-left:***px;）

@media screen and (min-width:768px){
.breadcrumb{width:70%;}
}

もしくは、カテゴリ一覧だけ非表示にしたい場合はこのように書きます。

.archive #breadcrumb {
display:none;
}

固定ページ

パンくずリストは非表示。これは無い方が良いかと。

目次

「あり」にしました。

SNSシェア

全てのサイトで非表示にしてあります。良く考えたらモバイルでも共有機能でシェアできるし。
同じ理由でフォローも非表示。

コメントやカルーセル

なし。

フッター

クレジット表記を「独自表記」を選択して、このように記載し、

複写・転載禁止
<br>
<a href="URL">プロフィール</a> 
<a href="URL">お問い合わせ</a>
<br>
Copyright © <a href="URL">ドメイン</a>

CSSでリンクの色と下線を調整し、カーソルした時に背景色が付くようにしました。

/*footerリンク*/
#footer a{
color:#313131;
text-decoration:none;
}
#footer a:hover{
background-color:#f2f2f2;
}

AMP

なし！

AMPやめた Cocoon
AMPやめたらPV増えた＆301リダイレクトの話

仕上げにアドセンス

最後にたった1つ広告を追加しただけでモバイルでの速度が 91→62 に落ちました。
シンプルサイトさようなら。

サイドバー要らなくない？

サイドバーに設置するものは意外と気を使います。
空白だとオカシイしプロフィールの設置はやる気ないし。
ということでアドセンスなどの広告をペタペタ貼っていたのですが、これが全くクリックされないんですよね。

サイドバーを撤去したらモバイルの速度も上がり（50→70）PCは91と良い感じになりました。