• 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月9日2020年8月9日

ここでは参考リンクや外部リンクの紹介に便利な、アクセント用ショートコードの使い方について紹介したいと思います。

文字やリンクをaccentで囲むと、次のようなデザインを作ることができます。

参考https://gwpfan.info

それでは使い方から見ていきましょう。

目次

  • 1 アクセント用ショートコードの使い方
  • 2 いろいろなスタイル
  • 3 縦に並べると…

アクセント用ショートコードの使い方

アクセント用ショートコードでは、次のようなオプションを使うことができます。

オプション説明
bg枠の色の設定(デフォルトは赤)
label枠の中の文字(デフォルトは「参考」)
direction向き(デフォルトは横向き)
sizeサイズ(デフォルトはmedium)

枠の色を変更する

枠の色を変更するにはbgオプションを使います。

設定可能な色は次の7種類。この中からbg="red"のように枠の色を指定することができます。

色bg=”○○”の指定
グレーgray
赤ーred
青blue
オレンジorange
緑green
ピンクpink
紫purple

ここでは枠の色を青にしてみましょう。青の枠を作るには次のようなコードになります。

参考https://gwpfan.info
[accent bg="blue"]https://gwpfan.info[/accent]

枠の中の文字を変更する

枠の中の文字を変更するにはlabelオプションを使います。

試しに枠の中に「関連」と表示させてみるよ。


labelオプションを何も指定しないと「参考」と表示されますが、label="関連"と指定すると、関連という文字が表示されます。

実行すると
関連https://gwpfan.info
[accent label="関連"]https://gwpfan.info[/accent]

サイズを変更する

サイズについても見ていきましょう。

サイズを変更する場合はsize="○○"のオプションを次の3つの中から選びます。もし何もsizeを指定しなかったらmediumサイズになります。

shoutで使えるサイズ

  • small
  • medium
  • large

small
参考https://gwpfan.info
[accent size="small"]https://gwpfan.info[/accent]
medium
参考https://gwpfan.info
[accent size="medium"]https://gwpfan.info[/accent]
large
参考https://gwpfan.info
[accent size="large"]https://gwpfan.info[/accent]

向きを変更する

向きを横から縦に変更するにはdirection="column"オプションを使います。

何も指定しなければ横向きになるので、このオプションは縦向きにするためのものと考えてもらって大丈夫です。文字が長い場合に使うといいかもしれないですね。

あわせて読みたいhttps://gwpfan.info
[accent label="あわせて読みたい" direction="column"]https://gwpfan.info[/accent]

いろいろなスタイル

sizeの指定をしないとき(mediumサイズ)

参考https://gwpfan.info
[accent bg="gray"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="red"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="blue"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="green"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="orange"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="pink"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="purple"]https://gwpfan.info[/accent]

size=”small”のとき

参考https://gwpfan.info
[accent bg="gray" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="red" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="blue" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="green" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="orange" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="pink" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="purple" size="small"]https://gwpfan.info[/accent]

size=”large”のとき

参考https://gwpfan.info
[accent bg="gray" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="red" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="blue" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="green" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="orange" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="pink" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent bg="purple" size="large"]https://gwpfan.info[/accent]

縦に並べると…

sizeの指定をしないとき(mediumサイズ)

参考https://gwpfan.info
[accent direction="column" bg="gray"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="red"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="blue"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="green"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="orange"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="pink"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="purple"]https://gwpfan.info[/accent]

size=”small”のとき

参考https://gwpfan.info
[accent direction="column" bg="gray" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="red" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="blue" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="green" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="orange" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="pink" size="small"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="purple" size="small"]https://gwpfan.info[/accent]

size=”large”のとき

参考https://gwpfan.info
[accent direction="column" bg="gray" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="red" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="blue" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="green" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="orange" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="pink" size="large"]https://gwpfan.info[/accent]
参考https://gwpfan.info
[accent direction="column" bg="purple" size="large"]https://gwpfan.info[/accent]

スポンサードリンク

demo
demo

PVランキング

  • 1
    2020年8月9日

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

  • 2
    2020年8月9日

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

  • 3
    2020年11月3日

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

  • 4
    2013年1月11日

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

  • 5
    No Image
    2012年1月8日

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

関連記事

  • 2020年3月6日

    広告を表示する方法

  • 2020年8月8日

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

  • 2020年7月13日

    ショートコードで蛍光ペンを引いたようなデザインを作る方法

  • 2020年8月7日

    shoutショートコードで文字を強調する方法

  • 2019年8月18日

    吹き出しを作る方法

  • 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
    2020年8月9日

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

  • 3
    2020年11月3日

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

  • 4
    2013年1月11日

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

  • 5
    No Image
    2012年1月8日

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

最近の投稿

  • 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 いろいろなスタイル
  • 3 縦に並べると…
ページトップへ

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 © 2023
Muromachi
All Rights Reserved.