• 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の使い方合計1680種類を作成可能!?いろいろな見た目のリストを作る方法
  • Muromachiの使い方

合計1680種類を作成可能!?いろいろな見た目のリストを作る方法

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

今回はショートコードを使って、いろいろな見た目のリストを作る方法をご紹介します。

リストは使う機会が多いと思うので、オプションを使っていろいろな組み合わせに対応できるようにしました。単純計算すると、1680種類!

※ リストスタイル6種類 × Boxスタイル10種類 × 7色 × 配色を設定可能な場所4箇所 = 1,680!

また、CSSの分量が増えすぎないように、スタイルはパターンとして用意しているのではなく、ひとつひとつのオプションとして用意しました。

目次

  • 1 リスト用ショートコードの基本的な使い方
  • 2 いろいろなスタイル

リスト用ショートコードの基本的な使い方

Muromachiでリストを作るときには、listのショートコードを使うと便利です。

リストスタイルを変更する

まずはリストスタイルの設定方法について見ていきましょう。

Muromachiで利用可能なリストスタイルは現在6種類。次のリストスタイルを使うことができます。

利用可能なリストスタイル

  1. (指定なし)
  2. check
  3. arrow
  4. chevron
  5. batsu
  6. none

リストスタイルを変更するにはlist_style="○○"のように書いていきます。

リストスタイルを指定しないとき

リストスタイルを指定しないときは、list_style=""のように書いても大丈夫ですし、list_style=””自体書かなくても大丈夫です。

リストスタイルを指定しないと次のような表示になります。通常のリストと同じ状態ですね。

リストのタイトル

  • リスト1
  • リスト2

[list list_style=""...]...[/list]
リストスタイルをcheckにしてみる

では、リストスタイルをcheckに指定してみましょう。listのショートコードでlist_style="check"と指定します。

リストのタイトル

  • リスト1
  • リスト2

[list list_style="check" ...]...[/list]

Boxスタイルを変更する

リストのショートコードでは、info-boxのショートコードと同じようにbox_style="○○"の形でBoxスタイルを指定することができます。

利用可能なBoxスタイル

  1. なし(default)
  2. round
  3. tab
  4. balloon
  5. paper
  6. dashed_1
  7. dashed_2
  8. header_full
  9. header_no_bg
  10. header_no_bg_center

たとえばバルーン型のBoxスタイルならbox_style="balloon"となります。

リストのタイトル

  • リスト1
  • リスト2

[list box_style="balloon" ...]...[/list]

Boxスタイルについてはinfo-boxのショートコードの使い方でも説明しているので、もう少し詳しい説明はこちらをご覧ください。

2020年8月17日参考ショートコードでBoxデザインを作る方法

ヘッダーの文字を変更する

Boxのヘッダー(上でいえば「リストのタイトル」と書かれていた部分)の文字を変更するには、header="○○"のオプションを使います。

この部分はheaderで変更

  • リスト1
  • リスト2

[list header="この部分はheaderで変更" ...]...[/list]

配色を変更する

リストのショートコードでは、次のようにBoxデザインの背景色やヘッダーの背景色、アイコンや境界線の色を変えることができます。

色を変更できる要素

  1. Boxデザインの背景
  2. ヘッダーの背景
  3. リストの色(チェックマークや矢印など)
  4. 境界線

ほとんどの色が変えられるんだね。

表にすると次のようになります。

要素オプションの名前
Boxデザインの背景bg
ヘッダーの背景header_bg
リストの色color
境界線border

たとえば背景をグレー、ヘッダーとリストの色を青、境界線を無しにするときには、次のようになります。
※ 見やすさのために改行しています。

リストのタイトル

  • リスト1
  • リスト2

[list bg="gray" header_bg="blue" color="blue" border="none" ...]
...
[/list]

選択可能な色は現在次のような7色があります。

配色指定
グレーgray
赤red
青blue
オレンジorange
緑green
ピンクpink
紫purple

境界線の設定をする

リストのショートコードでは境界線をborderオプションで指定することができます。

上で見てきた背景やリストの色と同じように、境界線に色をつけるにはborder="red"のように指定します。

反対に、境界線を表示しないようにするにはborder=”none”と指定指定してもらえば大丈夫です。

リストのタイトル

  • リスト1
  • リスト2

[list bg="white" header_bg="" color="blue" border="blue" ...]
...
[/list]

いろいろなスタイル

では、ここまで紹介した方法を使って、いろいろなスタイルを表示してみたいと思います。ぜひお好みのスタイルを見つけてください。

リストスタイル

リストスタイルを指定しないとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストスタイルがcheckのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストスタイルがarrowのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストスタイルがbatsuのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストスタイルがnoneのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

Boxスタイル

Boxスタイルがroundのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

Boxスタイルがtabのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

Boxスタイルがballoonのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

Boxスタイルがpaperのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

Boxスタイルがheader_fullのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

Boxスタイルがheader_no_bgのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

Boxスタイルがheader_no_bg_centerのとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

Boxスタイルがdashed_1のとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

Boxスタイルがdashed_2のとき

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

リストのタイトル

  • リスト1
  • リスト2

スポンサードリンク

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月8日

    ショートコードでいろいろな境界線を作る方法

  • 2020年8月9日

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

  • 2020年8月8日

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

  • 2020年3月7日

    記事の下に関連記事を表示させる方法

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

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







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

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

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

ダウンロードする
← 前の記事
合計1680種類を作成可能!?いろいろな見た目のリストを作る方法
ショートコードでいろいろな境界線を作る方法
次の記事 →
合計1680種類を作成可能!?いろいろな見た目のリストを作る方法
ショートコードで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日

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

目次

  • 1 リスト用ショートコードの基本的な使い方
  • 2 いろいろなスタイル
ページトップへ

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.