The following two tabs change content below.
ブログを効率よく運営して、集客や収益化(マネタイズ)を全自動化させることが最も得意。たった1つのブログで、年間1億2,000万円を動かすまでになりました。かわいい愛娘が2人いて、現在子育てに奮闘中! ⇒詳しいプロフィールはここをクリック

サイトのトップページやカテゴリーページなど、メニューページを作成する際は「見やすさ」と「使いやすさ」を追求する必要があります。

ただ、通常の記事のように、文章や画像が縦に配置されている縦長のページでは、無駄に長くなり、使い勝手が悪くなります。

そこで、当サイトも使用しているワードプレステーマ「ストーク」であれば、簡単に2・3カラム表示が使えます。たとえば2カラム表示とは、以下のような見え方を指します。

コンテンツSEOのイメージ

ご覧の通り、左右に2分割になるということです。

補足
スマホやタブレットで見た場合、横並びではなく、縦並び表示になります。小さな画面で横に二分割なってしまうと、逆に見づらくなるからです。

2・3カラム表示は、パソコンで見られたときだけであると覚えておきましょう。

サイトのトップページやカテゴリーページなど、メニューページで活用すれば、見栄え良く、使い勝手の良いページを作成できます。

このページでは、ストークに用意されたショートコードを用いて、2・3カラム表示にする方法を紹介します。ページごとに作り方を変えることで、使い勝手が向上するため、ぜひ、参考にしてください。

2カラム表示のショートコード

冒頭でも解説した通り、2カラム表示とは、以下のような見え方を指します。

コンテンツSEOのイメージ

2カラムにするショートコードは、以下の通りです。

2カラム表示のショートコード

使い方は、2分割にしたい場所に以下のショートコードをコピー&ペーストします。そして、「1カラム目」などの文字を消して、任意のテキストや画像にするだけでOKです。

記事内を3カラム表示にするショートコード

3カラム表示も、ショートコードが用意されています。3カラムのイメージは、以下の通りです。

コンテンツSEOのイメージ

3カラムにするショートコードは、以下になります。

3カラム表示のショートコード

使い方は2カラムのときと同じように、分割にしたい場所に以下のショートコードをコピー&ペーストします。そして、「1カラム目」などの文字を消して、任意のテキストや画像にするだけでOKです。

「AddQuicktag」を活用して、2・3カラム表示ショートコードをワンクリックで呼び出す方法

ショートコードといえど、毎回2・3カラムのショートコードをコピー&ペーストをしていては効率が悪すぎます。

そこで、「AddQuicktag」というプラグインを活用すれば、毎回、コピー&ペーストを行う必要はありません。「AddQuicktag」にショートコードを登録しておけば、記事投稿画面にてワンクリックで2・3カラムのショートコードを呼び出せます。

AddQuicktagを使用して2・3カラムのショートコードを呼び出したときのイメージ

詳しいやり方や「AddQuicktag」の詳細に関しては、以下の記事を参考にしてください。

AddQuicktagの使い方:ストークのショートコードを登録する方法

2017.12.14

まとめ

2カラムや3カラム表示は、通常の記事というよりは、トップページやメニュー画面などに使用するのがおススメです。参考までに、「イノバース」のトップページでは、3カラムを採用しています。

ストークは、あなた次第で見栄えを大きく変えられます。

ちょっとしたアクセントを入れて、ユーザーにとって見やすく、そして操作しやすいブログ作成をしましょう。

>>以下でストークで使用できるショートコード一覧が確認できます

イノバース
イノバースでは、LINE@でブログには書けない最新のアクセスアップ(SEO)方法やブログの収益化方法を無料で配信させていただきます。

ぜひ、以下よりご登録ください。

友だち追加

無料メールマガジンにて、「ブログで稼ぐための全手順」を公開中

以下にいつも使っているメールアドレスを
正しくゆっくり入力し『登録ボタン』をクリックしてください。

メールアドレス
※必須※