Simplicityをカスタマイズしてスタイル(要素)を追加する方法

2015/9/30 その他

simlicity

Symplicityでは引用などのスタイルを呼び出して簡単に記事内に反映させることができます。

引用だけではなく「注意書き」「ワンポイントアドバイス」のように別途スタイルを作成する場合にはCSS(スタイルシート)の知識が必要です。

しかし、これらの「要素」を簡単に呼び出せるようにしておけば、記事を書いているブロガーにとっては非常に楽になることは間違いありません。

そこで、レポ部は・・・
Simplicityをカスタマイズしてスタイル(要素)を追加する方法
をレポートしたいと思います

どんなことをしたいの？

Simplicityでは引用部分のスタイルが１クリックで表示されるようになっています。

style_01

このようなスタイルを別に作成することができるようにしたいと感じました。

例えば「注意書き」や「ワンポイントアドバイス」のようなスタイルを作成して、ページを見ている訪問者の方に見やすいようにカスタマイズできればと思ったのです。

もちろん、記事を書く側としては、スタイルシートをいちいち記述するのは面倒くさいので、１クリックでスタイルを読み込んで表示できるように、AddQuicktagを使って工夫をしたいと思います。

こんな感じで注意書きを別に用意することができる。

スタイルシートの記述

まずはスタイルシート(CSS)を記述していきましょう。

CSS
.hosoku_box{
background-color: #FF6347;
border-color: #FF6347;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}
スタイルシートの解説
  1. hosoku_boxクラスを作成する。
  2. background-colorで背景を#FF6347色に設定する。
  3. barder-colorで枠線の色を#FF6347色に設定する。
  4. paddingで外枠から内容にかけての間隔を15pxあける。
  5. margin-bottomで要素の下の間隔を20pxあける。
  6. border-radiusで要素の角に丸みを5px付ける。

このスタイルシートをSimplicityのstyle.cssに記述してください。

Simplicityで提供されている小テーマ上でスタイルシートをカスタマイズしてください。
Simplicity本体でスタイルシートを変更してしまうとバージョンを変更した場合に不具合が起こる可能性があります。

HTMLの記述

次にスタイルシートの内容を表示するHTMLを記述していきましょう。

HTML
<div class=”hosoku_box”>
<div>ここに内容を記述する</div>
</div>
HTMLの解説
  1. div classでクラス(hosoku_box)の内容を表示させる。
  2. ２段目にdivを指定して内容を囲むことでビジュアル表示での改行をスムーズに行うことができる。

このHTMLをAddQuicktagに記述していきます。

AddQuicktagはソースコードを１クリックで表示できるようにしてくれるツールです。簡単に設定することができるので、初心者の方にもオススメなプラグインです。

AddQuicktagのインストール

AddQuicktagをインストールして有効化をクリックしてましょう。

インストールの手順としては以下のとおりです。

  1. Word Press左メニューより「プラグイン」の「新規追加」をクリックする。
  2. 検索バーより「AddQuicktag」と入力し検索する。
  3. AddQuicktagの「今すぐインストール」をクリックしてインストールする。
  4. AddQuicktagの「有効化」をクリックして有効化する。

インストールから有効化までを解説しました。

次はAddQuicktagに先ほどのHTMLを設定して「ビジュアル表示」や「テキスト表示」で１クリックで呼び出せるようにしていきます。

AddQuicktagにHTMLを設定して簡略化する

Word Press左メニューより「設定」から「AddQuicktag」をクリックするとAddQuicktagの設定画面に移動することができます。

addquicktag01

AddQuicktagの設定の書き方
  • ラベル名には分かりやすい名前を設定する（補足、ポイントなど）
  • 開始タグに以下の内容を設定する（終了タグは記入しなくても良い）
    HTML
    <div class=”hosoku_box”>
    <div>ここに内容を記述する</div>
    </div>
  • 上記画像の赤枠の部分にチェックを入れて、全項目にチェックを入れる。
  • 変更を保存して完了する。

AddQuicktagの使い方をマスターすることができれば、自分で作成したスタイル(要素)を、瞬時に記事内に反映することができるのです。

これまでの設定が上手くできているか確認する

Word Pressで記事を書いてみましょう。

メニューバーのダウンメニュー(Quicktags)から設定した要素を選択することができます。

addquicktag02

サイトの固定化を目指す方は、決まったスタイルを使うのが好ましいと言えるでしょう。
コロコロと注意書きの色が変わるサイトはリピーターが迷ってしまう可能性があります。
できるだけ、自分のサイトに合った訪問者(リピーター)から好まれるサイト作りを心掛けることをオススメします。

まとめ

いかがでしょうか？

デフォルトのSimplicityでも使いやすいですが、自分のオリジナリティも大切ですよね。

何より訪問者の方に分かりやすい文面、外観を作ることでサイト自体の向上にも繋がります。

初心者にも簡単で使いやすいプラグインなので使ってみてはいかがでしょうか？

スポンサードリンク

      レポート部長