ブログ記事を1カラム表示にしてスッキリさせたい時におすすめです。（PC表示時）
固定ページなどは除き、全ての投稿ページを1カラムにしてサイドバーを消さずに下に配置する方法を解説しています。
ブログを1カラムにしてスッキリさせたい
PCでブログを見ていると、サイドバーがあると少しごちゃついたイメージになります。
少し前まではそれが普通でしたが、スマホサイトの影響もあり最近のWebサイトって1カラムで作られていることが多いですよね。
と言うことで私も当ブログの記事、投稿ページを1カラム構成にしてみようとやってみました。
CSSを書くだけなので大きな手間はかかりませんでした。
Cocoonの機能で、記事ごとにカラム数・表示を選べますが、一つひとつ設定するのも面倒なので全ての投稿ページに、毎回設定せずに1カラム構成にできるようにしています。
また、今回は投稿ページのみに対応しているので固定ページには影響が出ないようにしています。（もちろん固定ページにも対応させることはできます。）
投稿ページを1カラムにするCSS
投稿ページを1カラムにしてサイドバーを消さずに下に配置するために書いたCSSはこちらです。
@media (min-width: 500px) {
.single-post .content-in {
flex-flow: column wrap;
}
.single-post .main, .single-post .sidebar {
margin: auto;
width: 100%;
}
}
@media (min-width: 1000px) {
.single-post .main, .single-post .sidebar {
width: 70%;
}
}CSSの解説
メディアクエリ
@media (min-width: 500px) { }まずはメディアクエリで画面幅の指定をします。
PC表示に対応させるためにスマホサイズより大きい500pxからという指示を書いています。
投稿ページのコンテンツ
.single-post .content-in {
flex-flow: column wrap;
}
}.single-post というのが投稿ページに対するクラス名です。
（これを書かなければ全ページに対応させることができます。）
.single-post .content-in が記事内容（main）とサイドバー（sidebar）が入っている要素です。
元々この要素に対してflex-boxが指示されているので、
flex-flow: column wrap;と書いて、記事内容（main）とサイドバー（sidebar）を上下に分けるように指示します。
.single-post .main, .single-post .sidebar {
margin: auto;
width: 100%;
}
}これで要素を中央に持ってきます。
要素の幅はとりあえず100%にしておきましょう。
大きい画面用に
@media (min-width: 1000px) {
.single-post .main, .single-post .sidebar {
width: 70%;
}
}さらにメディアクエリを追加して大きいモニター用にCSSを書きます。
これで要素の幅を70%ぐらいにしておくと大きいモニターで表示されても間延びせずに中央で綺麗に見れるサイズになると思います。
ここはお好みのサイズで良いと思います。
これでブログ記事（投稿ページ）が1カラムに
このようにCSSを書けば、1記事ずつ設定をしなくても自動で1カラムで投稿ページが表示されるようになりました。
サイドバーの情報も記事の下に配置しているので消えていません。
余計な情報が見えなくなることで、記事の内容が見やすくなりますね。
サイドバーの必要性
サイドバーがあるとより多くの情報を画面内に収めることができるので、もちろんその方が良いという場合もあると思います。
ですが、私の当ブログの場合は閲覧者の8割はスマホユーザーで1カラムで見ている人が多いです。
それならばPCで1カラム表示になっても不便になることはないはずですし、1カラムでスッキリさせることによって記事に集中してもらえ、記事内のコンテンツやリンクも注目してもらいやすくなるのではないかと思います。
特に、アフィリエイトなどでCVを狙う場合は、余計なリンク・導線は見えない方がCVに導けますよね。（LPのように）
当ブログの場合はまだそもそもPV数が少ないのでなんとも比較はしにくいのですが、是非色々試してみてください。
コメント