ショートコードの紹介:文字の装飾

引用

引用は通常のblockquoteタグも使えるのですが、ショートコードを使うともっと便利に使えます。
bqタグにurlとtitleを追加することによって、右下に参照リンクが表示されます。

[bq url="https://tan-taka.com/diver" title="Wordpressテーマ「Diver」"]ここに引用文を書きます。
ここに引用文を書きます。ここに引用文を書きます。ここに引用文を書きます。 ここに引用文を書きます。ここに引用文を書きます。[/bq]
ここに引用文を書きます。
ここに引用文を書きます。ここに引用文を書きます。ここに引用文を書きます。
ここに引用文を書きます。ここに引用文を書きます。

ハイライト

コードを紹介するときにハイライトさせるタグです。

<pre><code><?php 
    $test = 'ハイライト';
    echo 'ここが'.$test.'です。';
 ?></pre></code>
スポンサーリンク

マーカー

蛍光ペンで線を引いたような装飾が出来ます。

文章の途中で[marker]重要なポイント[/marker]があればマーカーを引きます。

文章の途中で重要なポイントがあればマーカーを引きます。

打ち消し線

良くセール時の値段に使われていたりします。

<s>これを訂正します</s>

これを訂正します

文字サイズ

目立たせたい単語や文の文字サイズを大きくすることが可能です。

文章の途中で[fontsize]目立たせたいポイント[/fontsize]があれば文字サイズを大きくします。

文章の途中で目立たせたいポイントがあれば文字サイズを大きくします。

文字サイズの調整

文字サイズは9段階から調整する事が可能です。1~2は、通常より小さくなります。そして、3~9は、数字が大きくなるにつれてサイズも大きくなります。

[fontsize size="1"]目立たせたいポイント[/fontsize]
[fontsize size="2"]目立たせたいポイント[/fontsize]
[fontsize size="3"]目立たせたいポイント[/fontsize]
[fontsize size="4"]目立たせたいポイント[/fontsize]
[fontsize size="5"]目立たせたいポイント[/fontsize]
[fontsize size="6"]目立たせたいポイント[/fontsize]
[fontsize size="7"]目立たせたいポイント[/fontsize]
[fontsize size="8"]目立たせたいポイント[/fontsize]
[fontsize size="9"]目立たせたいポイント[/fontsize]
目立たせたいポイント 目立たせたいポイント 目立たせたいポイント 目立たせたいポイント 目立たせたいポイント 目立たせたいポイント 目立たせたいポイント 目立たせたいポイント 目立たせたいポイント

文字太さ

文字の太さでさり気なく強調させることが出来ます。

文章の途中で<b>強調したいポイント</b>で使います。

文章の途中で強調したいポイントで使います。

文字色

文字の色を変えます。通常は赤色になります。

文章の途中で[color]文字の色[/color]を変えます。

文章の途中で文字の色を変えます。

文字色の調整

colorに色を設定するだけで、好きな色に変えることが出来ます。

[color color="red"]文字の色[/color]
[color color="blue"]文字の色[/color]
[color color="yellow"]文字の色[/color]
[color color="gray"]文字の色[/color]
[color color="#33ff55"]文字の色[/color]
文字の色 文字の色 文字の色 文字の色 文字の色

文字背景

[bgcolor]文字背景色[/bgcolor]

文章中の文字背景色を変えます。

背景色の調整

colorに色を設定するだけで、好きな色に変えることが出来ます。

[bgcolor color="red"]文字の色[/bgcolor]
[bgcolor color="blue"]背景色[/bgcolor]
[bgcolor color="yellow"]背景色[/bgcolor]
[bgcolor color="gray"]背景色[/bgcolor]
[bgcolor color="#33ff55"]背景色[/bgcolor]
背景色 背景色 背景色 背景色 背景色

文字の装飾まとめ

紹介してきたカスタマイズは、一緒に使うことでさらにデザインの幅が広がります。
たとえば、文字サイズと文字色、マーカー等を一緒に使ったりも出来ます。

[fontsize size="9"][color color="#33ff33"][marker]<b>文字サイズと文字色、マーカー等</b>[/marker][/color][/fontsize]
スポンサーリンク
あなたはそのサイトで満足していますか?

サイトはただ作るだけで満足ですか?あなたのコンテンツはとっても有益なものがたくさんあります。よいコンテンツも埋もれてしまっては全く意味がありません。
Diverを使えば、SEO対策はもちろん、ユーザビリティーを考えられたデザインで、サイト回遊率、直帰率、再訪問がアップします。アフィリエイターだってブロガーだって関係無しです!!しかし、スケールの小さいサイトを量産するような方法には向いていません。サイトを育てて、長い間愛されることの出来るコンテンツを作成出来るのは、このDiverだけです。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事