ストークの全ての投稿記事を一括でワンカラム表示にした方法

こんにちは、アキです。

最近ブログのワンカラム化ブーム到来中です。このブログで使っている「STORK（ストーク）」で全投稿記事を一括でワンカラム表示に変更したので、その方法や流れを記録しておきます。

今回は「投稿記事ページ」のワンカラム化の話になります。一応僕はこの手の作業はド素人ですのでご了承下さい。

テーマ内機能の記事レイアウトの話

このアキスタイルフォトで使用しているのはストークというブログテーマですが、テーマ内機能としてデフォルトの2カラム表示の他にフルサイズ（1カラム）とバイラル風（1カラム）という記事レイアウトが用意されています。

この中から選択するだけで簡単に記事レイアウトを変更することができる親切設計です。（他のテーマのレイアウト機能の事情はよく知りません。）なのでストークの投稿記事ページをただ1カラムにするだけなら簡単な話です。

しかし僕はこのテーマ内機能のワンカラム表示には納得いきませんでした。

フルサイズ（1カラム）の使用例

記事レイアウトを「フルサイズ（1カラム）」にするとワンカラム表示にはなりますがメインコンテンツの幅が横いっぱいのフルサイズになります。これが広すぎてちょっと見辛いんですよ。

じゃあ、もう一つの「バイラル風（1カラム）」を使用してみると…

バイラル風のアイキャッチ表示

コンテンツ幅は2カラム表示の時と同じ幅になって理想通りなのですが、バイラル風はアイキャッチの表示が少し変化します。

僕はこのタイトルと画像が重なってしまうアイキャッチ表示が好きじゃありません。せっかくコンテンツ幅に合わせた推奨サイズ（720×370）でアイキャッチを作っているので、これだと台無しになってしまいます。

以上の理由でテーマ内機能では理想のワンカラム化ができませんでした。僕としてはアイキャッチ表示は通常のままでコンテンツ幅だけバイラル風が丁度いいのです。

全ての投稿記事をワンカラム化する流れ

僕のやった方法を軽くまとめると「サイドバーを消す」「2カラム表示のコンテンツ幅のまま中央に持ってくる」という感じです。アイキャッチ表示もそのままなのでまさに理想通りになりました。

ググってもそれっぽい方法が出てこなかったので、OPENCAGEさんのトップページのカスタム記事を参考にさせて頂きました。ド素人でもなんとかなりました。

ワンカラム化の流れ

「投稿記事ページ」だけのワンカラム化なのでsingle.phpに変更を加えていきます。

僕はCyberduckというソフトでFTPSという通信方式で作業しています。作業にはSFTPやSCPなどのより安全な方法を推奨します。

親テーマ

まずは親テーマの中からsingle.phpをダウンロードして、テキストエディタ等を使用して中身に変更を加えていきます。

まずは144行目にある下記コードを削除します。

<?php get_sidebar(); ?>

このコードを消してしまえばサイドバーが無くなってしまいます。

この変更だけで投稿記事ページを表示させた場合はこうなります。

サイドバー削除後

サイドメニューに設定しているウィジェット類も全て消えて、サイドバーのあった場所が空欄になっています。

あとはメインコンテンツをそのまま中央に表示させられればワンカラム化になります。

次は12行目にある下記コードに変更を加えます。

<div id="inner-content" class="wrap cf">

このコードの中の「wrap」と「cf」の間に「page-full」を付け加えます。

付け加えると下記コードになります。

<div id="inner-content" class="wrap page-full cf">

これで2カラム表示のメインコンテンツ幅のままフルサイズ領域で表示されるようになります。

ちなみに参考にした記事の方法だと付け加えるコードが「page-full wide」になっていますが、「wide」を付け加えてしまうとメインコンテンツ幅がフルサイズになってしまいます。テーマ内機能のフルサイズ（1カラム）と同じ状態なので注意して下さい。

「wide」でフルサイズを切り替えるのだと思います。

変更を保存したsingle.phpファイルは子テーマへと放り込むだけで完了です。何も問題が無ければこれで全ての投稿記事ページがワンカラム化されていると思います。

アイキャッチも無事にワンカラム化

以上がコンテンツ幅もアイキャッチ表示も2カラムサイズのままワンカラム化した方法です。

注意点としてはスマホ用に設定しているサイドバーメニューも非表示になります。消えた分のコンテンツを表示させたい場合は記事下などに移動させて下さい。

応用すれば記事一覧ページや固定ページでも同じワンカラム化が出来ると思うけど、今のところ投稿記事ページとトップページだけワンカラムにしておく予定です。

簡単な戻し方

変更を加えたsingle.phpファイルを反映させて、もしもブログが真っ白になったり異常が発生した場合は子テーマ内からsingle.phpファイルを削除するだけで元に戻ります。

ワンカラム表示に飽きて元に戻したくなった場合も同じことです。子テーマ内からsingle.phpを削除するだけです。

ブログのワンカラム化の目的について

ブログのPC表示をワンカラム表示にする目的としては「コンテンツが見やすくなる」という効果があります。

今の時代スマホからネットを見る機会が多いと思いますが、スマホ表示はすべてワンカラムですよね。なのでスマホ表示で見ているようなシンプルさがワンカラム表示のメリットになります。

サイドバーにごちゃごちゃと余計な情報が詰め込まれていると、本来の目的であるコンテンツに集中できなくなるものです。

もちろんワンカラム表示にすることのデメリットなどもあります。

このブログテーマ「STORK（ストーク）」を監修したブログマーケッタージュンイチさんがワンカラムについて綴っています。少し前までジュンイチさんのブログもストークでした。

ブログを1カラムにすることのメリットとデメリット【まとめ】 | ジュンイチのブログ

まとめ：簡単に元に戻せるから安心

サイドバーが無くなることでPV数や収益にも多少の変化があると思いますが、もともとアクセスの大半がスマホからのアクセスだったのでPC表示を弄ってもそこまでの影響は出ないものとして考えています。

少しでも減少化を感じたら元に戻してしまうと思います。ただの気分転換だったということで。

元に戻すのも簡単なので、ストークでワンカラム化を考えている方はよかったら参考にでもどうぞ。（正解の方法とは限らないのでご了承下さい。）

以上がストークの投稿記事ページを一括でワンカラム化した方法のメモでした。