Symplicityでは引用などのスタイルを呼び出して簡単に記事内に反映させることができます。
引用だけではなく「注意書き」「ワンポイントアドバイス」のように別途スタイルを作成する場合にはCSS(スタイルシート)の知識が必要です。
しかし、これらの「要素」を簡単に呼び出せるようにしておけば、記事を書いているブロガーにとっては非常に楽になることは間違いありません。
もくじ
どんなことをしたいの？
Simplicityでは引用部分のスタイルが１クリックで表示されるようになっています。
このようなスタイルを別に作成することができるようにしたいと感じました。
例えば「注意書き」や「ワンポイントアドバイス」のようなスタイルを作成して、ページを見ている訪問者の方に見やすいようにカスタマイズできればと思ったのです。
もちろん、記事を書く側としては、スタイルシートをいちいち記述するのは面倒くさいので、１クリックでスタイルを読み込んで表示できるように、AddQuicktagを使って工夫をしたいと思います。
スタイルシートの記述
まずはスタイルシート(CSS)を記述していきましょう。
background-color: #FF6347;
border-color: #FF6347;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}
- hosoku_boxクラスを作成する。
- background-colorで背景を#FF6347色に設定する。
- barder-colorで枠線の色を#FF6347色に設定する。
- paddingで外枠から内容にかけての間隔を15pxあける。
- margin-bottomで要素の下の間隔を20pxあける。
- border-radiusで要素の角に丸みを5px付ける。
このスタイルシートをSimplicityのstyle.cssに記述してください。
Simplicity本体でスタイルシートを変更してしまうとバージョンを変更した場合に不具合が起こる可能性があります。
HTMLの記述
次にスタイルシートの内容を表示するHTMLを記述していきましょう。
<div>ここに内容を記述する</div>
</div>
- div classでクラス(hosoku_box)の内容を表示させる。
- ２段目にdivを指定して内容を囲むことでビジュアル表示での改行をスムーズに行うことができる。
このHTMLをAddQuicktagに記述していきます。
AddQuicktagのインストール
AddQuicktagをインストールして有効化をクリックしてましょう。
インストールの手順としては以下のとおりです。
- Word Press左メニューより「プラグイン」の「新規追加」をクリックする。
- 検索バーより「AddQuicktag」と入力し検索する。
- AddQuicktagの「今すぐインストール」をクリックしてインストールする。
- AddQuicktagの「有効化」をクリックして有効化する。
インストールから有効化までを解説しました。
次はAddQuicktagに先ほどのHTMLを設定して「ビジュアル表示」や「テキスト表示」で１クリックで呼び出せるようにしていきます。
AddQuicktagにHTMLを設定して簡略化する
Word Press左メニューより「設定」から「AddQuicktag」をクリックするとAddQuicktagの設定画面に移動することができます。
- ラベル名には分かりやすい名前を設定する（補足、ポイントなど）
- 開始タグに以下の内容を設定する（終了タグは記入しなくても良い）
HTML<div class=”hosoku_box”>
<div>ここに内容を記述する</div>
</div> - 上記画像の赤枠の部分にチェックを入れて、全項目にチェックを入れる。
- 変更を保存して完了する。
AddQuicktagの使い方をマスターすることができれば、自分で作成したスタイル(要素)を、瞬時に記事内に反映することができるのです。
これまでの設定が上手くできているか確認する
Word Pressで記事を書いてみましょう。
メニューバーのダウンメニュー(Quicktags)から設定した要素を選択することができます。
まとめ
いかがでしょうか？
デフォルトのSimplicityでも使いやすいですが、自分のオリジナリティも大切ですよね。
何より訪問者の方に分かりやすい文面、外観を作ることでサイト自体の向上にも繋がります。
初心者にも簡単で使いやすいプラグインなので使ってみてはいかがでしょうか？
