WordPressの投稿画面にはビジュアルエディタにて多くの記事作成補助に役立つツールバーがありますが、テーマではさらに記事をサクサク書けるように多くのスタイルやクイックタグを用意しております。
スタイルやクイックタグとはボタンをクリックするだけで「全体を黄色背景のボックス」で囲ったり「左右均等並びのボックス」を挿入するなどなど、あらかじめ用意されたスタイルを挿入できる機能です。これらを利用することで効率的に様々なデザインやレイアウトの記事が書けるようになるのでぜひチェックしてください。
当ページでは大きく分けて
- 最初の準備からクイックタグの使い方
- タグの基本説明
- テーマ独自のスタイル
の3つの順に説明致します。
既にこれらのツールバーの使用に関して精通している方は「テーマ独自のスタイル・クイックタグの説明」まで飛ばしてください。
※キャプチャ画像はWordPress及びテーマのバージョンなどにより異なる場合がございます（一部、次回verの内容も含みます）。
※ショートカットキーはWindowを想定しています。
[toc]
便利に使うための最初の準備
TinyMCE Advancedプラグインの併用
プラグインの「TinyMCE Advanced」も併用するとテーブルタグなどさらに拡張性が増すのでお勧めです。
※TinyMCE Advancedを有効化するとクイックタグの「スタイル」が隠れてしまうので設定でボタンを再登録して下さい。
同時に「段落タグの保持」にチェックを入れておくと<p>タグ、<br/>タグが削除されないのでタグが扱いやすくなります。
ツールバーの使い方
スタイルは適応したいテキストや画像を①選択状態にしてから②「スタイル」をクリックして③「適応したいスタイル」をクリックすれば反映されます。
クイックタグは挿入したい箇所をクリック（場合により適応したいテキストや画像を選択状態に）してから任意のクイックタグをクリックすると挿入されます。
複数のスタイルなどの上手な設定方法
同じテキストに連続で複数のスタイルを設定したい場合は
外側のスタイルから内側へ
と適応していくと上手くいきます。
例として「テキストをリスト表示にして、黄色のボックスで包む」スタイルを適応してみます。
①まずは適応したいテキストを選択して全体を包みたい②「黄色ボックス」を選択
次にそのまま（テキストを選択したまま）で次のスタイル（番号付きリスト）をクリック
うまくいきました。
これをリストにしてから黄色ボックスを適応（内側のスタイルから外側のスタイル）しても上手くいかない場合が多いです。
テキストエディタ
ビジュアルエディタは便利な反面、時に自動整形など思わぬタグの挿入や改行による欠損や書式設定の承継などが起こり、思うようなデザインが反映されない場合があります。
そのような場合はテキストエディターモードでタグが正常な形になっているか確認できるとトラブル解決が早く出来ます。また、ある程度の知識が必要となりますが直接テキストエディターモードでタグを挿入すると反映箇所が間違いが起こりにくいでしょう。
記事を編集する前に「テキストモード」の内容をメモ帳やEverNoteなどにコピーして保存しておく（バックアップ）と編集で見た目が崩れた時もコピペで戻せるので安心です。
覚えておくと便利なHTMLとCSSの基本
生成されているHTML言語やCSSをほんの少しでも理解しておくと問題解決に役立ちます。
ほとんどのHTMLタグには開始タグと閉じタグが存在します。
閉じタグの位置が変わったり欠損すると正常なデザイン及びレイアウトになりませんので注意して下さい。
段落と改行
＜p＞タグは文章と文章の段落を意味します。<br/＞タグは改行となり、反映のスタイルは似ていますが異なりますので注意して下さい。
エディタではテキストの途中で「Enterキー」で段落、「Shift+Enter」で改行となります。
divタグ
レイアウトや比較的広い範囲などのコンテンツを囲むスタイルは＜div＞タグが使用されることが多く、特に＜div＞タグの閉じタグが欠損するとレイアウトは大きく崩れるので注意しましょう。
クラスとID
HTMLタグにクラスやIDを指定することで様々なスタイルを反映させます。
興味のある方はぜひ、勉強してみて下さい、
[amazonjs asin="4774176508" locale="JP" title="今すぐ使えるかんたんmini 図解 HTML5&CSS3最新版"]
覚えると便利なショートカット
WordPressにもショートカットが多数あります。その中でも覚えておくと便利なのをいくつか紹介します。
| 挿入タグ | ショートカット |
| 画像挿入 | 「Shift」+「Alt」+「m」※数字変更でh3～可能 |
| リンク挿入 | 「Shift」+「Alt」+「a」※数字変更でh3～可能 |
| リンク削除 | 「Shift」+「Alt」+「s」※数字変更でh3～可能 |
| hタグ（見出し） | 「Shift」+「Alt」+「2」※数字変更でh3～可能 |
| 改行 | 「Shift」+「Enter」 |
| コピー | 「Ctr」+「C」 |
| ペースト | 「Ctr」+「P」 |
スタイル・クイックボタンの基本説明
WordPress独自のクイックタグ、TinyMCE Advancedとテーマ独自のクイックタグボタンから使用頻度が高いと思われるボタンを簡単に説明します。
テーマ独自のスタイル及びクイックタグは次項で詳しく説明します。
※TinyMCE Advancedプラグインのスタイルには一部対応していないものもございます。
WP:WordPressデフォルト
TinyMCE：TinyMCE Advanced有効化で表示されるもの
①テキストを太字にします（WP）
②テキストに＜em＞タグを挿入します（WP）
③文章を「引用」にします（WP）
これはダミーの例です
④テキストをリストにします（WP）
- これはダミーの例です
- これはダミーの例です
- これはダミーの例です
⑤テキストを数字の連番のリストにします（WP）
- これはダミーの例です
- これはダミーの例です
- これはダミーの例です
⑥画像やテキストの配置を変更します（WP）
①リンクを設置、解除します（WP）
②テーブルタグを挿入します（TinyMCE）
| これはダミーの例 | これはダミーの例 | これはダミーの例 |
| これはダミーの例 | これはダミーの例 | これはダミーの例 |
③操作を「進む」「戻る」を行います（TinyMCE）
④テキストに背景色を付けます（TinyMCE）
①＜p＞タグからh2タグ～6までの見出しタグを設定します
②テキストを両端揃え（TinyMCE）
③テキストに打消し線を加えます（WP）
④インデントを変更します（TinyMCE）
⑤テキストの付加する書式設定などの情報などを取り除いたプレーンな状態で貼り付けます（TinyMCE）
⑥書式設定をクリアにします（TinyMCE）
⑦特殊文字を入力します（TinyMCE）
①「続きを読む」を挿入します（WP）
②顔文字を挿入します（TinyMCE）
③テキストの色を変更します（TinyMCE）
④テーマに用意されている様々なスタイルを適応します
⑤テーマに用意されている便利なタグを挿入します
⑥アドセンスのショートコードを挿入します
①ウィジェットで作成したオリジナルのショートコードを挿入します
②サイト内の他ページをブログカード風に挿入します
③YouTube動画をリンク画像で貼り付けます
④タグ管理プラグインで登録したアフィリエイトタグをIDで呼び出します
⑤タグ管理プラグインで登録したアフィリエイトタグをスラッグで呼び出します
※ボタン名はver20170505より「タグID」「タグSlug」に変更になりました。
テーマ独自のスタイル・クイックタグの説明
スタイル
太字
テキストを太字にします
太字（赤）
テキストを太い赤字にします
大文字
テキストを大文字にします
小文字
テキストを小文字にします
ドット線
テキストにドット線を追加します
黄マーカー
テキストに黄色のマーカーを入れます
赤マーカー
テキストに赤色のマーカーを入れます
写真に枠線
写真などの画像に枠線を入れます。境界のわかりにくい画像に便利です。
記事タイトルデザイン
記事タイトル（h1）と同じデザインを適応します
これはダミーの見出しです
code
コードをハイライトします。例＜p class="hoge"＞
吹き出し
吹き出しのようなデザインを入れます
これはダミーの文章です
はてな
はてなマークをテキストの頭に入れます
注意
注意マークをテキストの頭に入れます
人物マーク
人物マークをテキストの頭に入れます
チェックマーク
チェックマークをテキストの頭に入れます
メモマーク
メモマークをテキストの頭に入れます
※各マークはビジュアルエディタ上では反映されません（青い背景色が付きます）。各マークはカスタマイザーでカラーを変更できます
回り込み解除
floatを解除します
センター寄せ
囲んだコンテンツをセンターに寄せます
下に余白
囲んだコンテンツの下に10pxの余白を入れます
黄色ボックス
黄色のボックスエリアで囲みます
薄赤ボックス
薄赤のボックスエリアで囲みます
グレーボックス
グレーのボックスエリアで囲みます
引用風ボックス
引用（blockquote）と同じデザインを適応します
olタグを囲む数字ボックス
olタグをデザインします（カスタマイザーでカラー変更可能）
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
※設定方法は以下「ulタグを囲む数字ボックス」を参照
ulタグを囲む数字ボックス
ulタグをデザインします（カスタマイザーでカラー変更可能）
- これはダミーのテキストです
- これはダミーのテキストです
- これはダミーのテキストです
設定方法はテキストエディタにて以下のように＜ul＞～＜/ul＞全体を選択してから「ulタグを囲む数字ボックス」をクリックします
ランキングボックス
ランキングボックスと同じ背景色を反映します
table横スクロールボックス
tableタグを囲むことでoverflow-x: autoを指定してスマホ閲覧時などに横スクロールするように指定します。（テキストモードで設定した方が上手くいきます）
| 123456789 | 123456789 | 123456789 | 123456789 | 123456789 | 123456789 | 123456789 | 123456789 |
| 123456789 | 123456789 | 123456789 | 123456789 | 123456789 | 123456789 | 123456789 | 123456789 |
imgインラインボックス
要素にdisplay:inlineを付与します。
装飾なしテーブル
tableタグを囲むことでデフォルトのtableのスタイルを削除します。
タグ
※次回公開verの内容を含みます
スマホに表示しないボックス
ショートコード[ pc ]と[ /pc ]に囲まれたコンテンツはスマホに表示しません。
※[ pc ]の※全角空白は削除
PCに表示しないボックス
ショートコード[ nopc ]と[ /nopc ]に囲まれたコンテンツはスマホ以外に表示しません。
※[ nopc ]の※全角空白は削除
PCとTab左右40：60%
PC（パソコン）とTab（タブレット）の場合のみ左40%右60%の横並びで表示します。スマートフォン閲覧時は縦並びとなります
※%指定のボックスの「スマートフォン閲覧時」とは599px以下のWidthの端末を指しています。
全サイズ左右50%
全てのサイズで左右50％横並びで表示します
全サイズ左右free%
widthをstyleで指定しているので左右の%をテキストエディタで変更できます
見出し付フリーボックス
ウィジェットと同じ「フリーボックス」のデザインを挿入します（カスタマイザーで変色可能）
タイトル（全角15文字）
目次（TOC+)
プラグイン「Table of Contents Plus」で用意されたショートコード[ toc ]を挿入します※全角空白は削除
均等横並び
ver20161201より搭載したスタイル「均等横並び」について説明します
任意の位置で「均等横並び」をクリックすると上記の様な3列のボックスが表示されます。
テキストの「横並びのコンテンツ」を任意の内容に変更して下さい。
タグの中身は＜li＞タグです。
＜li＞タグを増やす事で横並びのコンテンツを増やす事が出来ます。
テキストエディタのクイックタグにて＜ul＞を直接囲むタグを設定できます。
オリジナルショートコード
アドセンス
記事内に広告ウィジェットを挿入します（PCの場合は336px、スマホは300px）
例↓
スポンサーリンク
オリジナルSC
ウィジェットで作成した「オリジナルウィジェット」の内容を挿入します
ブログ風カード
別ページを以下のようにブログカード風に読み込みます
設定方法
➀表示したい記事IDを記入して選択
②「ブログカード風」をクリック
自動でショートコードの形になります。
YouTubeID
YouTube動画を画像リンクにします。
設定やプラグインを併用することで多数の動画を貼っても重くなりにくくなります（例のYouTube画像は「EasyFancyBox」プラグインも併用しています。やり方は下記URL参照）。
普通にYouTube動画を20個貼り付けた例
表示に18秒、ページサイズは1.52MB
このページのように張り付けた例
表示に4.6秒、ページサイズは602KB
なんと約5倍も速くなりました。
アフィリエイトタグID/アフィリエイトタグSlug
「アフィリエイトタグ管理プラグイン」にて登録したアフィリエイトコードをショートコードで呼び出します。
例↓
その他のショートコード
投稿で使用できるショートコードです。（クイックボタンはありません）
[ frontonly ] トップページだけに表示 [ /frontonly ]
[ postonly ] 投稿ページだけに表示[ /postonly ]
[ pageonly ] 固定ページだけに表示[ /pageonly ]
[ catonly cat="1,5" ] カテゴリIDが1と5の時のみ表示 [ /catonly ]
※全角空白は削除して下さい
ボタンの作成
ボタンを投稿内の任意のリンクで作成できます。
AFFINGERの場合、ボタンはランキングCSS管理と連動しているので好きなカラーに変更も可能です。
ボタンの設定方法
①＜a href="～"＞で囲まれたリンクテキストを選択した状態で②の「公式ボタン」又は「詳細ボタン」をクリックします。
上図のようになれば完成です。
見た目の感じ。
※まれにプラグイン利用の影響で以下のように＜p＞タグが重複すると上手くデザインが反映されませんので注意してください。
