WordPressプラグイン「Shortcodes Ultimate」自由自在にカラムを使う

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

ウェブサイトやブログのメインエリアを2つとか3つにちょっとうまいこと分けたいとき、最近は簡単にできるようになったものです。

WordPressプラグインの「Shortcodes Ultimate」を使います。

このプラグイン、最近のお気に入りなのです。

メインエリアを3つに分ける(1/3 + 1/3 + 1/3)

このようになります。

あいうえおかきくけこさしすせそたちつてと、なにぬねのはひふへほまみむめもやゆよわをん。
あいうえおかきくけこさしすせそたちつてと、なにぬねのはひふへほまみむめもやゆよわをん。
あいうえおかきくけこさしすせそたちつてと、なにぬねのはひふへほまみむめもやゆよわをん。

ソースコードはこのようになっています。

では、実際にどのようにするかをご紹介しまっす。

「Shortcodes Ultimate」はインストールした?

インストール済みということで話を進めたいと思います(゚∀゚)

プラグインの「新規追加」でプラグインを検索、インストール、有効化しておいてね。

投稿画面に、このようなボタンができます。ここが新しい世界への扉ですよ。カラムを作りたい場所にカーソルを置いたらぽちっと押しましょう。

blog04

右列の「カラム」をぽちっと押しましょう。

blog05

ここで、カラムの数や配置を設定していきます。上の例のように3カラムにしたいときは、「サイズ」のところで1/3を選択します。

blog06

その他の設定

「中央」は「はい」にすると中央に1個だけ配置されるので、普通は「いいえ」のままで。

「クラス」はcssで見た目など変えたい時に使用します。次やるよ。

「コンテンツ」には、カラムの中に入れたい内容を入れますが、投稿画面で入れるほうが簡単なので、とりあえずダミーとしてデフォルトのままにしておきます。

「プレビュー」もできますので、確認したいときはボタンを押してね。

オッケーなら、「ショートコードを挿入」ボタンを押しましょう。

クラスを追加してアレンジしてみる

さて、デフォルトのままでも普通に使えますが、ちょっとデザインを変えたいな。ってときはカスタマイズ用のCSSを追加しましょ。

さっきのショートコードの設定画面の「クラス」ですね。ここに、ここに、su-column-custom と入れて、カスタマイズ用のクラスを追加します。自分でカスタマイズ用のクラスをキメておくと便利です。わたしは本体のクラスのおしりに「-custom」をつけることにしとります。

blog07

本体のクラスの調べ方はココ参照↓

WordPressプラグイン「Shortcodes Ultimate」のカスタマイズ方法
カスタマイズしなくてもけっこう使えるのですが、サイトに合わせて、もうちょっと色をこうしたいとか、フォントを変えたいとか、もう少しデザイン...

そして、ダッシュボードの「ショートコード」>「カスタムCSS」をクリックして、先ほど追加したクラスの設定をしていきます。

blog08

今回設定したのは下記です。

ちなみに、カラムの中には画像を入れたりもできます。このように。

blog01-min

列のコンテンツ列のコンテンツ列のコンテンツ列のコンテンツ

blog02-min列のコンテンツ
blog03-min列のコンテンツ

1番左のだけ、CSSを追加しています。

まとめ

ショートコードの中に「行」ってのもあるんですけど、これと「カラム」の違いがいまいちわからないです。どっちを使ってもよさげです。

「行」の設定画面

blog09

最終的には、「カラム」も「行」と同じように入れ子にして使うことが多いと思うので、「行」で入れ子の大枠を入れて、sizeをなおすほうが楽かもしれません。。。

あと、注意点がひとつあります。なんとなく作ると、このように段がずれてしまうことがあります。↓

あいうえおかきくけこさしすせそたちつてと、なにぬねのはひふへほまみむめもやゆよわをん。
あいうえおかきくけこさしすせそたちつてと、なにぬねのはひふへほまみむめもやゆよわをん。
 
あいうえおかきくけこさしすせそたちつてと、なにぬねのはひふへほまみむめもやゆよわをん。

1番右の段が一段下がってませんか?

ショートコードのタグの間にスペースが入ったりすると、このようになる場合があります。

カラムが崩れたら、コードの間の余計なスペースの有無を確認してみましょう。

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

スポンサーリンク