與五澤 憲一（よごさわ けんいち）
最新記事 by 與五澤 憲一（よごさわ けんいち） (全て見る)
- 普段の生活をブログで発信してお金に変える具体的な方法：広告収入の仕組み - 2019年3月20日
- ブログで月5万円を確実に稼ぐために避けられない○○とは - 2019年3月19日
- 最短の時間で知識量を最大化させる方法：アウトプットが知識を習慣化しよう - 2019年3月18日
サイトのトップページやカテゴリーページなど、メニューページを作成する際は「見やすさ」と「使いやすさ」を追求する必要があります。
ただ、通常の記事のように、文章や画像が縦に配置されている縦長のページでは、無駄に長くなり、使い勝手が悪くなります。
そこで、当サイトも使用しているワードプレステーマ「ストーク
」であれば、簡単に2・3カラム表示が使えます。たとえば2カラム表示とは、以下のような見え方を指します。
ご覧の通り、左右に2分割になるということです。
スマホやタブレットで見た場合、横並びではなく、縦並び表示になります。小さな画面で横に二分割なってしまうと、逆に見づらくなるからです。
2・３カラム表示は、パソコンで見られたときだけであると覚えておきましょう。
サイトのトップページやカテゴリーページなど、メニューページで活用すれば、見栄え良く、使い勝手の良いページを作成できます。
このページでは、ストークに用意されたショートコードを用いて、2・3カラム表示にする方法を紹介します。ページごとに作り方を変えることで、使い勝手が向上するため、ぜひ、参考にしてください。
2カラム表示のショートコード
冒頭でも解説した通り、2カラム表示とは、以下のような見え方を指します。
2カラムにするショートコードは、以下の通りです。
|
1 2 3 4 |
[colwrap] [col2]１カラム目[/col2] [col2]２カラム目[/col2] [/colwrap] |
使い方は、2分割にしたい場所に以下のショートコードをコピー＆ペーストします。そして、「1カラム目」などの文字を消して、任意のテキストや画像にするだけでOKです。
記事内を３カラム表示にするショートコード
3カラム表示も、ショートコードが用意されています。3カラムのイメージは、以下の通りです。
３カラムにするショートコードは、以下になります。
|
1 2 3 4 5 |
[colwrap] [col3]１カラム目[/col3] [col3]２カラム目[/col3] [col3]３カラム目[/col3] [/colwrap] |
使い方は２カラムのときと同じように、分割にしたい場所に以下のショートコードをコピー＆ペーストします。そして、「1カラム目」などの文字を消して、任意のテキストや画像にするだけでOKです。
「AddQuicktag」を活用して、２・３カラム表示ショートコードをワンクリックで呼び出す方法
ショートコードといえど、毎回２・３カラムのショートコードをコピー＆ペーストをしていては効率が悪すぎます。
そこで、「AddQuicktag」というプラグインを活用すれば、毎回、コピー＆ペーストを行う必要はありません。「AddQuicktag」にショートコードを登録しておけば、記事投稿画面にてワンクリックで２・３カラムのショートコードを呼び出せます。
詳しいやり方や「AddQuicktag」の詳細に関しては、以下の記事を参考にしてください。
まとめ
２カラムや3カラム表示は、通常の記事というよりは、トップページやメニュー画面などに使用するのがおススメです。参考までに、「イノバース」のトップページでは、3カラムを採用しています。
ストークは、あなた次第で見栄えを大きく変えられます。
ちょっとしたアクセントを入れて、ユーザーにとって見やすく、そして操作しやすいブログ作成をしましょう。
＞＞以下でストークで使用できるショートコード一覧が確認できます
ぜひ、以下よりご登録ください。