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

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

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

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

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

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

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

枠の色を変更する

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

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

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

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

枠の中の文字を変更する

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

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

実行すると

[accent label="関連"]https://gwpfan.info[/accent]

サイズを変更する

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

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

small

[accent size="small"]https://gwpfan.info[/accent]

medium

[accent size="medium"]https://gwpfan.info[/accent]

large

[accent size="large"]https://gwpfan.info[/accent]

向きを変更する

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

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

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

いろいろなスタイル

sizeの指定をしないとき（mediumサイズ）

[accent bg="gray"]https://gwpfan.info[/accent]

[accent bg="red"]https://gwpfan.info[/accent]

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

[accent bg="green"]https://gwpfan.info[/accent]

[accent bg="orange"]https://gwpfan.info[/accent]

[accent bg="pink"]https://gwpfan.info[/accent]

[accent bg="purple"]https://gwpfan.info[/accent]

size=”small”のとき

[accent bg="gray" size="small"]https://gwpfan.info[/accent]

[accent bg="red" size="small"]https://gwpfan.info[/accent]

[accent bg="blue" size="small"]https://gwpfan.info[/accent]

[accent bg="green" size="small"]https://gwpfan.info[/accent]

[accent bg="orange" size="small"]https://gwpfan.info[/accent]

[accent bg="pink" size="small"]https://gwpfan.info[/accent]

[accent bg="purple" size="small"]https://gwpfan.info[/accent]

size=”large”のとき

[accent bg="gray" size="large"]https://gwpfan.info[/accent]

[accent bg="red" size="large"]https://gwpfan.info[/accent]

[accent bg="blue" size="large"]https://gwpfan.info[/accent]

[accent bg="green" size="large"]https://gwpfan.info[/accent]

[accent bg="orange" size="large"]https://gwpfan.info[/accent]

[accent bg="pink" size="large"]https://gwpfan.info[/accent]

[accent bg="purple" size="large"]https://gwpfan.info[/accent]

縦に並べると…

sizeの指定をしないとき（mediumサイズ）

[accent direction="column" bg="gray"]https://gwpfan.info[/accent]

[accent direction="column" bg="red"]https://gwpfan.info[/accent]

[accent direction="column" bg="blue"]https://gwpfan.info[/accent]

[accent direction="column" bg="green"]https://gwpfan.info[/accent]

[accent direction="column" bg="orange"]https://gwpfan.info[/accent]

[accent direction="column" bg="pink"]https://gwpfan.info[/accent]

[accent direction="column" bg="purple"]https://gwpfan.info[/accent]

size=”small”のとき

[accent direction="column" bg="gray" size="small"]https://gwpfan.info[/accent]

[accent direction="column" bg="red" size="small"]https://gwpfan.info[/accent]

[accent direction="column" bg="blue" size="small"]https://gwpfan.info[/accent]

[accent direction="column" bg="green" size="small"]https://gwpfan.info[/accent]

[accent direction="column" bg="orange" size="small"]https://gwpfan.info[/accent]

[accent direction="column" bg="pink" size="small"]https://gwpfan.info[/accent]

[accent direction="column" bg="purple" size="small"]https://gwpfan.info[/accent]

size=”large”のとき

[accent direction="column" bg="gray" size="large"]https://gwpfan.info[/accent]

[accent direction="column" bg="red" size="large"]https://gwpfan.info[/accent]

[accent direction="column" bg="blue" size="large"]https://gwpfan.info[/accent]

[accent direction="column" bg="green" size="large"]https://gwpfan.info[/accent]

[accent direction="column" bg="orange" size="large"]https://gwpfan.info[/accent]

[accent direction="column" bg="pink" size="large"]https://gwpfan.info[/accent]

[accent direction="column" bg="purple" size="large"]https://gwpfan.info[/accent]