6/6(土)まで! Kindle Unlimited 読み放題キャンペーン 

【WordPress】記事を見やすくしよう!使える装飾方法まとめ [SANGO+PORIPU]

eyecatch-wordpress-decoration
すいみん

すいみん

こちらのCGメソッドの記事ではブログ(SANGO+PRIPU)で使える装飾を紹介します!装飾を利用することで、読みやすくきれいな記事を作成できるようになります!

フキダシ

よく冒頭の掛け合いなどでつかいます。

[say name="ねむいねこ" img="https://www.cg-method.com/wp-content/uploads/2020/03/nemuineko_fukidashi.png"]このサイトの名前ってなんだっけ?[/say]
[say name="すいみん" img="https://secure.gravatar.com/avatar/077a21e2303f1efa3d3a5ecbf5e5193d?s=200&d=mm&r=g" from="right"]CGメソッドだよ[/say]

単体ではこのフキダシ(PORIPU)

[prpsay img="https://secure.gravatar.com/avatar/077a21e2303f1efa3d3a5ecbf5e5193d?s=200&d=mm&r=g" name="すいみん"]このブログの名前はCGメソッドです。[/prpsay]

文字の装飾

ルールを決めておくと書きやすいです。

太字

CGメソッド

<B>CGメソッド</B>

蛍光ペン

<span class="keiko_green">CGメソッド</span>

※blue、yellow、orange、silverもあります。

文字色

<span class="red"><b>CGメソッド</b></span>
<span class="main-c"><b>CGメソッド</b></span>
<span class="accent-c"><b>CGメソッド</b></span>

※blue、yellowもあります。
※main-c、accent-cの色はカスタマイズ>色から設定できます。

文字サイズ

<span class="sobig">CGメソッド</span>

※small、bigもあります。

文字背景色

<span class="haiiro">CGメソッド</span><br><br>
<span class="labeltext accent-bc">CGメソッド</span>
すいみん

すいみん

main-c、accent-cを使いこなせると色を変えたい時に楽になります。

ボックス装飾

文字を見やすくします。結果的に記事も見やすくなります!

メモ

[memo title="MEMO"]CGメソッド[/memo]

注意

[alert title="注意"]CGメソッド[/alert]

情報

[note title="Info"]CGメソッド[/note]

枠線

[box class="box2"]CGメソッド[/box]

色付き背景

[box class="box3"]CGメソッド[/box]

メモ

[box class="box26" title="メモ"]CGメソッド[/box]

注意点

[box class="box27" title="注意点"]CGメソッド[/box]

関連記事

[box class="box28" title="関連記事"]CGメソッド[/box]

箇条書き

ポイントを絞っての箇条書きの方が理解しやすかったりします。

通常

[list class="li-mainbdr strong"]
[/list]

リストの中身は

<ul>
   <li>アメリカ</li>
   <li>ブラジル</li>
   <li>日本</li>
</ul>

シェンプロンマーク

[list class="li-chevron"]
[/list]

チェック

[list class="li-check li-mainbdr main-c-before"]
[/list]

フキダシ付き

<div class="p-box p-custom">
<span class="p-box-title">タイトル</span>
<p><ul>
       <li>CGメソッド</li>
       <li>CGメソッド</li>
</ul></p>
</div>

フキダシ付き(単体)

<div class="p-box"><span class="p-box-title">タイトル</span>CGメソッド</div>

コード表示

テーブル

コンテンツ比較やスペックなどで使います。

見出し(上) 1列見出し(上) 2列見出し(上) 3列見出し(上) 4列見出し(上) 5列見出し(上) 6列見出し(上)
1行見出し(左) 1行1列 1行2列 1行3列 1行4列 1行5列 1行6列
2行見出し(左) 2行1列 2行2列 2行3列 2行4列 2行5列 2行6列
3行見出し(左) 3行1列 3行2列 3行3列 3行4列 3行5列 3行6列
4行見出し(左) 4行1列 4行2列 4行3列 4行4列 4行5列 4行6列
5行見出し(左) 5行1列 5行2列 5行3列 5行4列 5行5列 5行6列

タイムライン

手順を説明する時に使います。

[timeline]
[tl label='STEP.1' title='おはよう']
Good morning
[/tl]
[tl label='STEP.2' title='こんにちは']
Hello
[/tl]
[tl label='STEP.3' title='こんばんわ']
Good evening 
[/tl]
[/timeline]

記事を見やすくしよう!使える装飾方法まとめ

普段、記事を書く時は記述が早いマークダウン記法で書いています。

ただどうしても装飾が少ないのが気になりまして、今回改めて装飾機能を見直してみたのですが、
公式テーマのヘルプは定期的に見ておくべきですね!

関連記事