與五澤 憲一(よごさわ けんいち)
最新記事 by 與五澤 憲一(よごさわ けんいち) (全て見る)
- イノバース ブロガー養成講座 受講生の声 - 2019年10月28日
- 視聴者維持率の伸ばし方|YouTubeの再生数と広告収入を稼ぐ方法とコツ - 2019年9月25日
- YouTubeに今参入しないと手遅れになってしまう理由:時代の波の乗ろう - 2019年9月24日
サイトのトップページやカテゴリーページなど、メニューページを作成する際は「見やすさ」と「使いやすさ」を追求する必要があります。
ただ、通常の記事のように、文章や画像が縦に配置されている縦長のページでは、無駄に長くなり、使い勝手が悪くなります。
そこで、当サイトも使用しているワードプレステーマ「ストーク」であれば、簡単に2・3カラム表示が使えます。たとえば2カラム表示とは、以下のような見え方を指します。


ご覧の通り、左右に2分割になるということです。
スマホやタブレットで見た場合、横並びではなく、縦並び表示になります。小さな画面で横に二分割なってしまうと、逆に見づらくなるからです。
2・3カラム表示は、パソコンで見られたときだけであると覚えておきましょう。
サイトのトップページやカテゴリーページなど、メニューページで活用すれば、見栄え良く、使い勝手の良いページを作成できます。
このページでは、ストークに用意されたショートコードを用いて、2・3カラム表示にする方法を紹介します。ページごとに作り方を変えることで、使い勝手が向上するため、ぜひ、参考にしてください。
2カラム表示のショートコード
冒頭でも解説した通り、2カラム表示とは、以下のような見え方を指します。


2カラムにするショートコードは、以下の通りです。
1 2 3 4 |
[colwrap] [col2]1カラム目[/col2] [col2]2カラム目[/col2] [/colwrap] |
使い方は、2分割にしたい場所に以下のショートコードをコピー&ペーストします。そして、「1カラム目」などの文字を消して、任意のテキストや画像にするだけでOKです。
記事内を3カラム表示にするショートコード
3カラム表示も、ショートコードが用意されています。3カラムのイメージは、以下の通りです。



3カラムにするショートコードは、以下になります。
1 2 3 4 5 |
[colwrap] [col3]1カラム目[/col3] [col3]2カラム目[/col3] [col3]3カラム目[/col3] [/colwrap] |
使い方は2カラムのときと同じように、分割にしたい場所に以下のショートコードをコピー&ペーストします。そして、「1カラム目」などの文字を消して、任意のテキストや画像にするだけでOKです。
「AddQuicktag」を活用して、2・3カラム表示ショートコードをワンクリックで呼び出す方法
ショートコードといえど、毎回2・3カラムのショートコードをコピー&ペーストをしていては効率が悪すぎます。
そこで、「AddQuicktag」というプラグインを活用すれば、毎回、コピー&ペーストを行う必要はありません。「AddQuicktag」にショートコードを登録しておけば、記事投稿画面にてワンクリックで2・3カラムのショートコードを呼び出せます。

詳しいやり方や「AddQuicktag」の詳細に関しては、以下の記事を参考にしてください。
まとめ
2カラムや3カラム表示は、通常の記事というよりは、トップページやメニュー画面などに使用するのがおススメです。参考までに、「イノバース」のトップページでは、3カラムを採用しています。
ストークは、あなた次第で見栄えを大きく変えられます。
ちょっとしたアクセントを入れて、ユーザーにとって見やすく、そして操作しやすいブログ作成をしましょう。
>>以下でストークで使用できるショートコード一覧が確認できます