Amazonブラックフライデー&サイバーマンデー開催中!

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

eyecatch-wordpress-decoration

すいみん

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

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

フキダシ

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

すいみん

このサイトの名前ってなんだっけ?
CGメソッドですよ

ねむいねこ

[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)

Author すいみん
このブログの名前はCGメソッドです。
[prpsay img="https://www.cg-method.com/wp-content/uploads/2020/03/fukidashi_l.png" name="すいみん"]このブログの名前はCGメソッドです。[/prpsay]
参考 SANGOのショートコード一覧 | SANGOカスタマイズガイドSANGOカスタマイズガイド 参考 下に出る吹き出しの名前の位置とかを変更する(PORIPUtearsユーザー限定) | for menfor men

文字の装飾

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

文字の装飾のルール

  • 基本の強調は太字
  • さらに強調したい時は蛍光ペン
  • 注意させたい時は赤文字
  • リンクは青文字
参考 テキストの装飾とサイズ・色の変更方法 | SANGOカスタマイズガイドSANGOカスタマイズガイド 参考 追加タグのコード一覧 | PORIPU-SANGO公認の子テーマPORIPU-SANGO公認の子テーマ

太字

CGメソッド

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

蛍光ペン

CGメソッド

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

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

文字色

CGメソッド

CGメソッド

CGメソッド

<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の色はカスタマイズ>色から設定できます。

文字サイズ

CGメソッド

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

※small、bigもあります。

文字背景色

CGメソッド
CGメソッド

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

すいみん

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

ボックス装飾

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

参考 SANGOで約30種類のボックスを挿入しよう | SANGOSANGO 参考 追加タグのコード一覧 | PORIPU-SANGO公認の子テーマPORIPU-SANGO公認の子テーマ

メモ

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

注意

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

情報

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

枠線

box1~box33まで用意されています。

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

色付き背景

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

メモ

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

注意点

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

関連記事

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

箇条書き

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

参考 記事に様々なスタイルの箇条書きを挿入する | SANGOカスタマイズガイドSANGOカスタマイズガイド

通常

  • アメリカ
  • ブラジル
  • 日本
[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]

フキダシ付き

タイトル

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

フキダシ付き(単体)

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

コード表示

■コードボックス

HTML
CGメソッド

テーブル

コンテンツ比較やスペックなどで使います。
参考 【コピペ簡単】ヘッダー固定、スクロールヒントを表示させるテーブル【WordPress】 | ぽんひろ.comぽんひろ.com

見出し(上) 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列

タイムライン

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

STEP.1
おはよう
Good morning
STEP.2
こんにちは
Hello
STEP.3
こんばんわ
Good evening
[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]

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

普段、記事を書く時は記述が早いマークダウン記法で書いています。
ただどうしても装飾が少ないのが気になりまして、今回改めて装飾機能を見直してみたのですが、
公式テーマのヘルプは定期的に見ておくべきですね!

以上、すいみん(@cg_method)でした!