• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Muromachi

日本人のためのGenesis子テーマ『Muromachi』

  • ホームHome
  • Muromachiの特徴About
  • Muromachiの使い方Manual
  • ダウンロードDownload
  • Genesisとは
  • Genesis子テーマ一覧
  • Genesisの使い方
  • Genesisカスタマイズ
  • Genesisプラグイン
  • Genesis WP Fan
HomeMuromachiの使い方ショートコードで横並びのレイアウトを作る方法
  • Muromachiの使い方

ショートコードで横並びのレイアウトを作る方法

Genesis WP Fan
2020年8月8日2020年8月9日

Muromachiで横並びのレイアウトを作るときは、splitとsplit_itemというショートコードを使うと便利です。

言葉で説明すると分かりにくいもしれないので、まずはこちらをご覧ください。


ショートコードを使ってこんな感じのレイアウトを作ることができます。


次のように画像や吹き出しの周りをsplit_itemで囲み、全体をsplitで囲むことで上のようなレイアウトを作ることができます。

[split]
[split_item]
画像
[/split_item]

[split_item]
[fukidashi border="gray" bg="white"]...[/fukidashi]
[/split_item]
[/split]
2020年8月9日ショートコードで画像の横に吹き出しを追加する方法

アイテム数を変更するとき

先ほどは横に2つ並べたレイアウトを作りましたが、itemというオプションを使って、もっと多くのアイテムを横に並べることもできます。

itemが3のとき

まずは横に3つ並べたいとき(アイテム数が3のとき)について見ていきましょう。

splitのショートコードでitem="3"と指定します。




先ほどと同じように、それぞれをsplit_itemで囲み、全体をsplitのショートコードで囲んでいます。

[split item="3"]
[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]
[/split]

itemが4のとき

横に4つのアイテムを並べたいときも、ここまでと同じ方法で並べることができます。





[split item="4"]
[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]
[/split]

itemが5のとき

横に5つのアイテムを並べたいときも、これまでと同じですね。
※ 現在は最大5つのアイテムに対応しています。






[split item="5"]
[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]

[split_item]
画像
[/split_item]
[/split]

itemが2のときは指定しなくてOK

デフォルトの状態ではアイテム数が2に設定されています。
横にアイテムを2つ並べたレイアウトを作りたいときには、itemオプションは何も指定しなくて大丈夫です。



[split]
[split_item]
画像
[/split_item]

[split_item]
[fukidashi border="gray" bg="white"]...[/fukidashi]
[/split_item]
[/split]

スポンサードリンク

demo
demo

PVランキング

  • 1
    2020年8月9日

    ショートコードで文字を左寄せ(中央寄せ・右寄せ)する方法

  • 2
    2013年1月11日

    マークアップ: HTML タグとフォーマット

  • 3
    No Image
    2012年1月8日

    テンプレート: ページ分け

  • 4
    2020年4月25日

    メニューの下に小さい文字で説明文を表示させる方法

  • 5
    2020年11月3日

    フッターのコピーライトを編集する方法

関連記事

  • 2020年8月9日

    参考リンクの紹介に便利なアクセント用ショートコードの使い方

  • 2020年8月9日

    サイトタイトルと説明文を中央寄せ(左寄せ)にする方法

  • 2020年8月9日

    シンタックスハイライトの設定方法

  • 2020年8月9日

    サイドバーのプロフィールをウィジェットで設定する方法

  • 2020年8月8日

    ショートコードでカードデザインのサイト内リンクを作る方法

  • Muromachiの使い方
この記事を書いた人
Genesis WP Fan

WordPressテーマ『Muromachi』はGenesis WP Fanの中の人がGenesisフレームワークの子テーマとして制作しました。
※ この説明文は非表示にしたり、通常の投稿と同じようにHTMLを使用できます。







日本人のためのGenesisフレームワーク専用WordPressテーマ 『Muromachi』

SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。

Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。

ダウンロードする
← 前の記事
ショートコードで横並びのレイアウトを作る方法
ショートコードでいろいろな境界線を作る方法
次の記事 →
ショートコードで横並びのレイアウトを作る方法
ショートコードでBoxデザインを作る方法

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


最初のサイドバー

Genesis WP Fan

Genesis WP Fan

たいやき伝道師

WordPressテーマ『Muromachi』はGenesis WP Fanの中の人がGenesisフレームワークの子テーマとして制作しました。

Follow

サイト内検索

タグ

aside (1) Codex (2) css (5) html (3) jetpack (2) twitter (2) videopress (1) wordpress.tv (1) アライメント (2) カテゴリー (1) ギャラリー (2) コメント (3) コンテンツ (11) ショートコード (5) タイトル (3) タイル状 (1) タグ (1) チャット (1) テンプレート (11) トラックバック (1) パスワード (1) ピンバック (1) マークアップ (6) メディア (1) リンク (1) レイアウト (3) 一覧 (1) 動画 (2) 埋め込み (3) 字幕 (1) 引用 (1) 投稿 (1) 投稿フォーマット (15) 抜粋 (2) 改ページ (1) 書式化 (1) 極端な例 (8) 標準 (2) 母船 (1) 注目の画像 (3) 状態 (1) 画像 (7) 続きを読む (1) 読みやすさ (1)

アーカイブ

カテゴリー

  • Muromachiの使い方33
  • テンプレート10
  • マークアップ4
  • メディア1
  • 投稿フォーマット14
  • 極端な例5
  • 親カテゴリー1
    • 子カテゴリー 011
    • 子カテゴリー 031
      • 孫カテゴリー1

PVランキング

  • 1
    2020年8月9日

    ショートコードで文字を左寄せ(中央寄せ・右寄せ)する方法

  • 2
    2013年1月11日

    マークアップ: HTML タグとフォーマット

  • 3
    No Image
    2012年1月8日

    テンプレート: ページ分け

  • 4
    2020年4月25日

    メニューの下に小さい文字で説明文を表示させる方法

  • 5
    2020年11月3日

    フッターのコピーライトを編集する方法

最近の投稿

  • 2020年11月3日

    フッターのコピーライトを編集する方法

  • 2020年8月9日

    サイドバーのプロフィールをウィジェットで設定する方法

  • 2020年8月9日

    ショートコードで画像の横に吹き出しを追加する方法

  • 2020年8月9日

    ショートコードで文字を左寄せ(中央寄せ・右寄せ)する方法

  • 2020年8月9日

    参考リンクの紹介に便利なアクセント用ショートコードの使い方

  • 2020年8月9日

    記事編集時にショートカットキーでプレビューする方法

  • 2020年8月9日

    シンタックスハイライトの設定方法

  • 2020年8月9日

    サイトタイトルと説明文を中央寄せ(左寄せ)にする方法

  • 2020年8月8日

    ショートコードでBoxデザインを作る方法

  • 2020年8月8日

    ショートコードでボタンを作る方法

ページトップへ

Footer

Muromachi

日本人のためのGenesis Framework子テーマ - Muromachi

Genesis FrameworkのSEOの強さをそのままに、日本人にとっての使いやすさにこだわりました。

タグ一覧

Muromachiの使い方 テンプレート マークアップ メディア 子カテゴリー 01 子カテゴリー 03 孫カテゴリー 投稿フォーマット 極端な例 親カテゴリー

フッターメニュー

  • ホーム
  • Muromachiの特徴
  • Muromachiの使い方
  • ダウンロード

メタ情報

  • ログイン
  • 投稿フィード
  • コメントフィード
  • WordPress.org

カテゴリー

  • Muromachiの使い方33
  • テンプレート10
  • マークアップ4
  • メディア1
  • 投稿フォーマット14
  • 極端な例5
  • 親カテゴリー1
    • 子カテゴリー 011
    • 子カテゴリー 031
      • 孫カテゴリー1

Copyright © 2022
Muromachi
All Rights Reserved.