CG・映像デザイナー技術ブログ

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

0

eyecatch-wordpress-decoration

Authorすいみん
こちらの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://secure.gravatar.com/avatar/077a21e2303f1efa3d3a5ecbf5e5193d?s=200&d=mm&r=g" 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>
Authorすいみん
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)でした!

0