きれいにまとめる! カラム機能とフロート解除

ct_caramu

カラム機能ってね、簡単に言うと「回り込み」を制御する機能なんですよ。

なにそれ、ショボそう。使わないわ…って、思ってる人は、すごくもったいないです!

説明よりも、まずは見てください。1/2カラムを2つ並べた例。

img_karamuyouso
img_karamuyouso

つぎが1/3カラムを3つ並べた例。

img_karamuyouso
img_karamuyouso
img_karamuyouso

こんなこともできます。1/3カラムと2/3カラムを並べた例。ちなみに、このページで使っている「カラム要素」の画像は全て同一です。

画像の大きさがカラム幅を超える場合は、自動的に縮小されます。

img_karamuyouso
img_karamuyouso

やりすぎ?6カラムを横に並べてみた!

img_karamuyouso
img_karamuyouso
img_karamuyouso
img_karamuyouso
img_karamuyouso
img_karamuyouso

使い方

実際に使ってみましょうか。

「新規投稿」などで、ビジュアルエディタを開いてください。

ビジュアルエディタ上部の「IP5Shortcodes」から、レイアウト→カラムを選択

img_col1

こんな感じに入力して、OKをクリック。

img_col3

サイズっていうのは、カラムの大きさ。この場合だと、最大幅の1/4の大きさです。場所は「最初」と「最後」と「中間」の中から選びます。カラム3つ以上使う場合、最初と最後以外は全部「中間」を指定すればOK

次も、同じ手順で、こんな感じに入力して、OKをクリック。

img_col3-3

 

つぎもこんな感じで。

img_col3-2

 

これで、1/4,1/4、1/2という、ちょっと変わったレイアウトが出来てます。
ビジュアルエディタ上はこんなふうになってるはず。

img_col4

これだけだとつまらないので、各ショートタグの間に、画像やら、長いテキストやらを入れましょうか。

 

img_gazou

これは超レア食材ですねえ。マニアにはたまりませんよ。最初すこーしクセがあるんですが、慣れてくると、このクセのある味がやみつきになるんですよね。売り切れ続出のため、お早めにどうぞ。

という感じ。これを3つ並べると、ランキングが出来ますね。

あ、並べる場合は、1セット(?)ごとに、「フロート解除」を挿入してください。

img_col5

じゃないと、「くっついた」状態になっちゃいますからね。

という感じ。アイデア次第で、使い方広がりそうでしょ?

念のため、今回作った1/4,1/4,1/2カラムのコードを載せておきます。

クリックで全選択、Ctrl+Cでコピー

コメントは停止中です。