與五澤 憲一（よごさわ けんいち）
最新記事 by 與五澤 憲一（よごさわ けんいち） (全て見る)
- たった1記事で10万円収入を得る主婦ライターのブログの書き方とは - 2018年9月30日
- ブログにアクセスがあるのに儲からない人は記事の書き方を直そう - 2018年9月30日
- 正しいブログ記事の書き方のコツを記した実際の添削ファイルの詳細 - 2018年9月30日
サイトのトップページやカテゴリーページなど、メニューページを作成する際は「見やすさ」と「使いやすさ」を追求する必要があります。
ただ、通常の記事のように、文章や画像が縦に配置されている縦長のページでは、無駄に長くなり、使い勝手が悪くなります。
そこで、当サイトも使用しているワードプレステーマ「ストーク
」であれば、簡単に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カラムを採用しています。
ストークは、あなた次第で見栄えを大きく変えられます。
ちょっとしたアクセントを入れて、ユーザーにとって見やすく、そして操作しやすいブログ作成をしましょう。
＞＞以下でストークで使用できるショートコード一覧が確認できます
ぜひ、以下よりご登録ください。