カラム分け


  1. 「Shortcodes Ultimate」プラグインをインストール
  2. プラグインの有効化
  3. タグの挿入 (必ずテキストモードで入力)
    [su_row]
    [su_column size=”1/2″]
    ★ここに左側★
    [/su_column]
    [su_column size=”1/2″]
    ★ここに右側★
    [/su_column]
    [/su_row]

    同じように、★ここに右側★と書いてある所を★ごと消して、代わりに2カラムの右側に表示させたい文字や画像を入れます。そうすると、2カラムの右側に出ます。
    【su_column size=”1/2″】★ここに右側★【/su_column】
    黄色く網掛けした部分に挟まれた部分が右側に出るようになります。
  4. 応用編1)2カラムを『左を狭め、右を広め』で分割する方法
    先ほどのコードに(size )部分の割合を変えます。
    [su_row]
    [su_column size=”2/5″]
    ★ここに左側★
    [/su_column]
    [su_column size=”3/5″]
    ★ここに右側★
    [/su_column]
    [/su_row]
  5. 応用編3)3カラムにする方法
    縦に3分割する方法、以下のコードをコピーして本文に貼る。
    [su_row]
    [su_column size=”1/3″]
    ★ここに左側★
    [/su_column]
    [su_column size=”1/3″]
    ★ここに中央★
    [/su_column]
    [su_column size=”1/3″]
    ★ここに右側★
    [/su_column]
    [/su_row]
  6. まとめ
    先ず、カラムを作りたい部分を[su_row] と[/su_row]の間はさむ
    次に写真や文章等のカラムに入れるタグ[su_column size=”1/3″] と[/su_column]で挟む
    カラムの配置は(size=”1/2″ )部分で(”1/2″)部分は比率例えば2カラムで半分半分であれば
    [su_column size=”1/2″]
    ★ここに左側★
    [/su_column]
    [su_column size=”1/2″]
    ★ここに右側★
    [/su_column]
    カラムの数はHTMLの表と同じ考えかたで
    [su_column size=”1/3″]
    ★ここに左側★
    [/su_column]の数分がカラム数になります。

コメントを残す