ウェブサイトやブログのメインエリアを２つとか３つにちょっとうまいこと分けたいとき、最近は簡単にできるようになったものです。
WordPressプラグインの「Shortcodes Ultimate」を使います。
このプラグイン、最近のお気に入りなのです。
メインエリアを3つに分ける（1/3 + 1/3 + 1/3）
このようになります。
ソースコードはこのようになっています。
あいうえおかきくけこさしすせそたちつてと、なにぬねのはひふへほまみむめもやゆよわをん。あいうえおかきくけこさしすせそたちつてと、なにぬねのはひふへほまみむめもやゆよわをん。あいうえおかきくけこさしすせそたちつてと、なにぬねのはひふへほまみむめもやゆよわをん。
では、実際にどのようにするかをご紹介しまっす。
「Shortcodes Ultimate」はインストールした？
インストール済みということで話を進めたいと思います(ﾟ∀ﾟ)
プラグインの「新規追加」でプラグインを検索、インストール、有効化しておいてね。
投稿画面に、このようなボタンができます。ここが新しい世界への扉ですよ。カラムを作りたい場所にカーソルを置いたらぽちっと押しましょう。
右列の「カラム」をぽちっと押しましょう。
ここで、カラムの数や配置を設定していきます。上の例のように3カラムにしたいときは、「サイズ」のところで1/3を選択します。
その他の設定
「中央」は「はい」にすると中央に1個だけ配置されるので、普通は「いいえ」のままで。
「クラス」はcssで見た目など変えたい時に使用します。次やるよ。
「コンテンツ」には、カラムの中に入れたい内容を入れますが、投稿画面で入れるほうが簡単なので、とりあえずダミーとしてデフォルトのままにしておきます。
「プレビュー」もできますので、確認したいときはボタンを押してね。
オッケーなら、「ショートコードを挿入」ボタンを押しましょう。
クラスを追加してアレンジしてみる
さて、デフォルトのままでも普通に使えますが、ちょっとデザインを変えたいな。ってときはカスタマイズ用のCSSを追加しましょ。
さっきのショートコードの設定画面の「クラス」ですね。ここに、ここに、su-column-custom と入れて、カスタマイズ用のクラスを追加します。自分でカスタマイズ用のクラスをキメておくと便利です。わたしは本体のクラスのおしりに「-custom」をつけることにしとります。
そして、ダッシュボードの「ショートコード」＞「カスタムCSS」をクリックして、先ほど追加したクラスの設定をしていきます。
今回設定したのは下記です。
.su-column-custom{
border: 3px double #3E5A99;
padding: 5px;
color: #3E5A99;
font-size:0.8em;
}
ちなみに、カラムの中には画像を入れたりもできます。このように。
列のコンテンツ列のコンテンツ列のコンテンツ列のコンテンツ
列のコンテンツ列のコンテンツ1番左のだけ、CSSを追加しています。
まとめ
ショートコードの中に「行」ってのもあるんですけど、これと「カラム」の違いがいまいちわからないです。どっちを使ってもよさげです。
「行」の設定画面
最終的には、「カラム」も「行」と同じように入れ子にして使うことが多いと思うので、「行」で入れ子の大枠を入れて、sizeをなおすほうが楽かもしれません。。。
あと、注意点がひとつあります。なんとなく作ると、このように段がずれてしまうことがあります。↓
1番右の段が一段下がってませんか？
ショートコードのタグの間にスペースが入ったりすると、このようになる場合があります。
カラムが崩れたら、コードの間の余計なスペースの有無を確認してみましょう。
「Shortcodes Ultimate」についての記事は他にもアルヨ。
