見た目のいい見出しが欲しい！
見出しで文字サイズは大きくなる。けど、周りのサイトは見出しが装飾されていてキレイでかっこいい！
でも、方法が分からない・・・お教えします！そんな見出しに便利なプラグイン「AddQuicktag」と共にご紹介いたします！
※今回紹介するプラグインは以前紹介したプラグイン「TinyMCE Advanced 」を入れている必要があります。
「AddQuicktag」のインストールと設定
インストール方法はまずプラグインから新規追加を選択します。
次にプラグインの検索をします。検索欄に「AddQuicktag」と入力しましょう。
今すぐインストールを選択し、有効化しましょう。
インストールされたことを確認しましょう。
次に設定を行います。
設定を押すと以下のような設定一覧が表示されます。
エディタで表示されるボタン名称やタグなどの設定が行えます。
とりあえず、今はボタンとラベル名を「h2」、開始タグを<h2 id=”midasi2″>、終了タグを</h2>、順番を0とします。
また、記事ごとに適用するか設定も出来ます。すべて場合は一番左のチェックマークを選択します。
設定すると下記のようになります。
変更を保存して完了です。
「AddQuicktag」の設定については以上です。
見出しのデザインの選定
次に肝心な見出しのデザインを設定する必要があります。
自作することも可能ですがまたの機会に紹介します。今回は様々なサイトで公開されているものをいくつか例を挙げていきます。
気に入った見出しを見つけたらコード(css)をメモ帳などにコピーしましょう！
シンプル系からグラデーションを使ったもの、文字と同じように扱えるアイコンフォントを使用した凝った見出しもあります。全体的にデザインが統一されているので複数使用しても違和感なく配置することが出来そうです。
こちらはシンプルなものが多くあまりタグで主張せず読者に見せるには良いかもしれません。また、アニメーションを使用した見出しもあります。
こちらは自分で見出しを作成できるツールです。見出しの種類はシンプルなもので5種類ですが、背景、文字色や影など細かい設定が可能です。
見出しの種類とボックス、文字関係を設定したらジェネレートを押します。するとコードが表示されます。
次の実際に見出しを出力する例として見出し生成ツールを使用したいと思います。
見出しの実装
見出しを実装するにはまずサイトに組み込む必要があります。
まず、外観のカスタマイズを設定します。
次に追加CSSを選択します。
開くと下に空白のテキストボックスがあると思いますので、コピーしたコードを貼り付けます。
このままでは、まだ動作しません。タグを変更する必要があります。
この例に挙げているコードでは”.sample2″を変更する必要があります。
“.sample2”を“h2#midasi2”に変更します。
これで公開を選択して設定を保存します。
次は実際に見出しを使用するため投稿の編集を行います。
見出しの装飾をする
新規記事を開いたらまず文字を入力します。
次に装飾した見出しを適用したい文字を選択して、新たに追加された「Quicktags」を選択し「h2」を選びます。
aaaaaaaは比較用として通常の”h2″となっています。
では、実際に反映されるかプレビューを表示します。
これで見出しに装飾が反映されているのが確認できました。
設定までが少し労力が必要ですが、一度設定してしまえば後は使い続けられますので是非導入をしてみてください！
