Simplicityでウィジェット内の見出しをカスタマイズする方法

bs

SimplicityはWordPressの無料テーマの1つです。

デフォルトでの機能も素晴らしく、外観も整っているテーマとしても有名ですね。

WordPressの管理画面から簡単に設定ができるので初心者の方にも推奨しているテーマです。

今回のレポ部が紹介するSimplicityのカスタマイズは「見出し部分」の外観の変更方法です。

ソースコードの編集は「Simplicityで提供している小テーマ」を編集してくださいね。

そこで、レポ部では・・・
Simplicityでウィジェット内の見出しをカスタマイズする方法
について紹介していきます。
スポンサードリンク

今回のSimplicityのカスタマイズは?

今回は「見出し部分のカスタマイズ」をしていきます。

デフォルトの状態では「文字だけ」というシンプルな作りになっています。

これに、背景色、文字色、外枠等の設定をしてスタイルに変更していくことにします。

とは言っても、デフォルトの状態でも目立つので、私の運営している違うサイトは見出しをカスタマイズをしていません。

やはり、「背景色が白色」で「文字色が黒」というのは訪問者から見てわかりやすく、あらゆるウィジェットタイトル文字との誤解性を招かない素晴らしいスタイルでもあるからです。

トップページに「記事全体の人気記事」を表示していて、記事ページ毎には「カテゴリー別の人気記事」を表示していた場合に「同じ見出しのタイトルを使用していた場合」などには「トップページから来た訪問者に誤解性を与える作り」になってしまっている場合があります。

そういった場合は「カテゴリー別の人気記事」などといった見出しを判別できるタイトルにすることで訪問者の誤解性を少しは軽減させることができます。

おっと、話題が逸れてしまいましたね。

見出しをカスタマイズする前に少し、クラス名について知っておきましょう。

これらのクラス名を後々のサンプルソースコードに当てはめてカスタマイズしていきます。

クラス名を知ってカスタマイズサンプルに当てはめよう!

Simplicityには見出しに各クラス名が割り振られています。

これらを後ほど解説しているカスタマイズサンプルに当てはめることで簡単に見出しのカスタマイズを行うことができます。

それぞれの見出しのクラス名は次の通りです。

  • カテゴリーの見出し(.widget_categories h4)
  • タグクラウドの見出し(.widget_tag_cloud h4)
  • 新着記事の見出し(#new-entries h4)
  • 人気記事の見出し(#popular-entries h4)
  • テキストエリアの見出し(.widget_text h4)
  • アーカイブの見出し(.widget_archive h4)
  • メタ情報の見出し(.widget_meta h4)
  • 固定ページの見出し(.widget_pages h4)
  • 最近のコメントの見出し(.widget_recent_comments h4)
  • サイト内検索の見出し(.widget_search h4)
  • Akismetウィジェットの見出し(.widget_akismet_widget h4)
  • Facebook Like ボックスの見出し(.widget_facebook_likebox h4)
  • ブログ購読(jetpack)の見出し(.jetpack_subscription_widget h4)
  • 人気の投稿とページ(jetpack)の見出し(.widget_top-posts h4)
  • Goodreads(jetpack)の見出し(.widget_goodreads h4)

Simplicityの見出しのクラス名は沢山ありますね。

新しいウィジェットに表示される機能が増えていけばクラス名も増えていくことは間違いありません。

開発者の方も大変な思いで運営なさっているんだな、と認識したレポート部長でした。

さて、これらの各クラス名を後ほど解説しているカスタマイズサンプル(ソースコード)に当てはめることで、簡単にカスタマイズをすることができます。

さっそく、始めていきましょう。

Wanted!!
今回のカスタマイズでは「カテゴリーの見出し」を視点に置いてカスタマイズしていきます。

それぞれの見出しをカスタマイズしてみよう!

例として「カテゴリーの見出し部分」をカスタマイズしていきましょう。

カテゴリーの全体を指定するクラス名は<widget_categories>です。

この中に<h4>というタイトル部分を指定する見出しが指定されているので、タイトル部分を指定するには<.widget_categories h4>と表記します。

簡単に解説すると<widget_categories>がカテゴリーの全体(カテゴリー列を含んだ)を表しており<h4>がタイトル(文字部分)の要素となります。

項目1[今回のSimplicityのカスタマイズは?]に記している「それぞれの見出しのクラス名」を以下ソースコード内の「ここに各クラス名を表記する」に当てはめて変更したい見出しを指定してください。

Wanted!!
ソースコードのカスタマイズはSimplicityで提供されている小テーマを使ってカスタマイズしてください。本体に直接ソースコードを書いてしまうとサイトが動かなくなったりと問題が発生した場合に取り返しがつかなくなります。

カスタマイズサンプル No.1

灰色をベースに、ボックスの右上と左下を丸めて、文字色を白色にしたスタイルです。

カラーリングを自分のサイトにあった形に変更することで愛着が湧いてくると思います。

以下にタイトル部分のカスタマイズサンプル:

ソースコード
.ここにクラス名を表記する { /* 例:.widget_categories h4 (それぞれの見出しのクラス名:参考)*/
color:white; /* フォント色を指定 */
padding: 5px 0px 5px 15px; /* 文字周りのスペースを指定(上 右 下 左) */
background:#696969; /* 背景色を指定 */
border-top-right-radius:15px; /* 右上を丸める */
border-bottom-left-radius:15px; /* 左下を丸める */
}

as01

カスタマイズサンプル No.2

光沢のある緑色をベースに、ボックスの角を丸めて、文字色を白色にしたバージョンです。

<:before>を使用して文字の前に要素を追加しています。

逆に<:after>を使用すれば文字の後に要素を追加することになります。

ファイルの記号を変更したい場合の「コンテンツの種類」は以下のリンクを参考にしてください。

ASTAONAUT Web Co.(ソースコード内の<content:”○○○”>の中の文字をリンク先に表記されている気に入った記号の文字に変更してください。)

ソースコード
.ここにクラス名を表記する { /* 例:.widget_categories h4 (それぞれの見出しのクラス名:参考)*/
color:white; /* フォント色を指定 */
padding: 5px 0px 5px 15px; /* 文字周りのスペースを指定(上 右 下 左) */
background:#32cd32; /* 背景色を指定 */
border-radius:15px; /* 角を丸める */
}
.ここに上と同じクラス名を表記する h4:before{
margin-right:7px; /* コンテンツの右のスペース調整 */
font-family:”FontAwesome”; /* フォントを変更 */
content:”\f115″; /* コンテンツの種類 */
}

ca

カスタマイズサンプル No.3

先ほどに少し解説した<:after>を取り入れたバージョンです。

<float>によって各コンテンツの位置を決定して<position>によって相対位置を決めています。

「レイアウト崩れ防止」のためにボックス内に各コンテンツの配置位置を固定しています。

必要ないと感じる方は<position>を削除してください。

濃い青色をベースに、ボックスの角を丸めて、文字色は白色に設定しているスタイルとなります。

コンテンツの種類は以下のリンクを参考にしてください。

ASTAONAUT Web Co.(ソースコード内の<content:”○○○”>の中の文字をリンク先に表記されている気に入った記号の文字に変更してください。)

ソースコード
.ここにクラス名を表記する h4:before{
float: left; /* コンテンツを左寄りに指定する */
position: relative; /* 相対位置を指定する(レイアウト崩れ防止) */
margin-right:7px; /* コンテンツの右にスペース調整 */
font-family:”FontAwesome”; /* フォントを指定 */
content:”\f115″; /* コンテンツの種類 */
}.ここに上記と同じクラス名を表記する h4 {
color:white; /* フォント色を指定 */
padding: 5px 0px 5px 15px; /* 文字周りのスペースを指定(上 右 下 左) */
background:#4169e1; /* 背景色を指定 */
border-radius:15px; /* 角を丸める */
}

.ここに上記と同じクラス名を表記する h4:after{
float: right; /* コンテンツを右寄りに指定する */
position: relative; /* 相対位置を指定する(レイアウト崩れ防止) */
margin-right:10px; /* コンテンツの右にスペース調整 */
font-family:”FontAwesome”; /* フォントを指定 */
content:”\f137″; /* コンテンツの種類 */
}

ca01

まとめ

いかがでしたか?

Simplicityには元からカスタマイズ用のタグが設置されているのでカスタマイズしやすいですよね。

カスタマイズする側の気持ちになってテーマのソースコードが書かれていることがわかります。

WordPressのツールが新しくなればなるほどSimplicityのクラス名が増えていくことは間違いないので、それに合わせて調整することは本当に大変なことだと感じています。

Simplicityをお使いの方は見出しのカスタマイズにチャレンジしてみてくださいね。