ホームのメリハリを求めた駆け出しブロガーのSimplicityカスタマイズ

ども、駆け出しブロガーの親父です。

数日前からWordprssのテーマ『Simplicity』を利用しています。超ウェブ素人である親父が恐れ多くもカスタマイズに挑戦しました。ちょびっとですよ。でもね、これを例えるならばまったくの未経験者が手ぶら普段着のままで富士山頂を目指しますと登山口で言い放ち、周りにいる経験者たちからあきれられるを通りこして怒られてしまう。そんな愚か者の行動と同じといってもいいでしょう。。それくらい親父はウェブのこと分かりません...(〃ω〃)

photo credit: zilverbat. via photopin cc

しかしこの世にはインターネットという偉大な道具があります。色々調べながら手探りでやりましたよ。

Simplicityのフォント・文字サイズにメリハリをつけた

導入時の記事にも書きましたが、このSimplicity、とても記事が読みやすいです。記事幅、文字サイズ、行間等、どれをとってもお気に入りなんですが、1点だけ、PCでのホーム表示の際に違和感がありました。うーん、なんだこの違和感。。しばらく眺めて気づきました。Simplicityのホームでは、どの文字も自己主張しすぎちゃってるんです。見やすいの裏返しで、メリハリがない。。俺が俺が！と、どの文字も目に飛び込んでくる印象。

今回はフォントの表示を中心に編集しました。すげー時間かかったのでやったこと残します。

でその前に直接テーマを編集するんではなくて、子テーマなるものを初めて使いました。子テーマを利用することで、本体？のバージョンアップ時でも、カスタマイズした部分はそのまま子テーマとして活かせるとのこと。

子テーマはSimplicityサイトからダウンロードできます。

サイドバーの自己主張を抑え気味に

サイドバーの文字サイズを全体的に小さくしました。ウィジェット内の文字も同様です。

ウィジェットの見出しを14px、ウィジェット内文字を14pxに各々変更です。※ちなみにさきほどダウンロードした子テーマに以下の記述を追加するだけらしいです、子テーマとはそういうものらしい。。

#sidebar h4{
  margin-bottom: 10px;
  font-size:14px;
}

.widget{
  margin-bottom: 45px;
  font-size:14px;
}

記事一覧の自己主張を抑え気味に

記事一覧のタイトルとメタ情報も少しだけサイズを変更しました。

.entry h2 a{
  color:#333;
  font-size:20px;
  text-decoration:none;
  font-weight:bold;
}

.post-meta{
  margin-bottom: 1.7em;
  text-align:right;
  background-color:#F7F7F7;
  color:#555;
  font-size:13px;
}

.entry-read{
  margin:0;
  font-size:13px
}

.footer-post-meta{
  text-align: right;
  color:#555;
  font-size:13px;
}

スポンサーリンク

テキストリンクの色にアクセント

親父はSTINGER3と同じようにSimplicity素のままの真っ白がお気に入りです。ただもう少しだけアクセントが欲しい。。それでリンクの色をもう少し鮮やかな色に変更しました。グーグルのテキストリンクと同じ色にします。グーグルの色 #1111cc　です。

1.全体のアンカー

a {
  color: #1111cc;
}

2.ホームに表示される記事一覧のメタ情報

.entry .post-meta a{
  color:#1111cc;
}

3.パンくずリスト

#breadcrumb{
  margin-bottom: 20px;
  color:#1111cc;
  font-size:13px;
}

#breadcrumb a{
  text-decoration:none;
  color:#1111cc;
}

 

はい、やったこと以上です。

ダメですか？これだけでも精一杯やったんですよ！！いいの、素人なんだから。

親父のまとめ

ただフォントサイズと色変えただけじゃんと言われそうですが、素人親父が頑張って調べてやったのでそういうこと言われると悲しくなりますから。。(ﾟДﾟ;)

これだけでもパッと見て、非常に落ち着いた気がします。もう自己満足の世界なので、いいんです。

親父のブログの話に付き合ってくれて感謝です♪

 - Wordpress Simplicity