コピペで一発!「Simplicity」カスタマイズ11項目

※当ブログは現在、このカスタマイズを修正しているのでここで紹介しているCSSでは、若干見た目が異なってしまっています。改訂版記事は以下をクリック

WordPressテーマ「Simplicity」をカスタマイズする17のポイント

このブログではWordpressテーマの「Simplicity」を使用しています。はてなブログから、Wordpressに移行するときに一番悩んだのが、「テーマ」を何にするかという問題でした。無料のカッコイイデザインテーマが無数にあり、それぞれ使い勝手も違うため、けっこう「Wordpressのテーマどうしよう?」問題はブログを始める人にとってあるあるじゃないかと思います。

その中で「Simplicity」は

  1. カスタマイズのしやすさ
  2. 使い勝手のよさ
  3. 日本語の解説サイトがある

などの理由で、決めさせてもらいました。実際に使用して、カスタマイズしてみてこのテーマで正解だったなと思います。これで無料ってのはかなりスゴイっすね。

さて、ブログを移行するにあたって色々なサイトを見て「Simplicity」をカスタマイズしました。今回は、どこをどうやってカスタマイズしたのかを紹介したいと思います。

▼目次

  1. グローバルメニューのカスタマイズ
  2. 「記事を読む」ボタンのカスタマイズ
  3. サイドバーメニューのカスタマイズ
  4. パンくずリストをカスタマイズ
  5. 人気記事ランキングの順位をカスタマイズ
  6. 「上へ戻る」ボタンのカスタマイズ
  7. 見出しのカスタマイズ
  8. 記事間に線を引く
  9. スマホメニューのカスタマイズ
  10. 追従SNSボタンを左に寄せる
  11. 記事幅とリスト幅を狭める

1.グローバルナビのカスタマイズ

まずはグローバルメニューのカスタマイズです。

と、その前にSimplicityはけっこうアップデートが多く、直接テーマのCSSを変更していると、その度にCSSをカスタマイズするの手間が出てしまいます。なのでカスタマイズ前に子テーマを追加しておくことをオススメします。やり方は以下。

グローバルナビの変更の前に、このブログはカスタマイザー設定で

  • スキンを「オレンジメニュー」に設定
  • 色の「グローバルナビ色」を#ffffffに設定
  • 「グローバルナビの画面幅いっぱいにする」にチェック

をしています。

カスタマイズ masalog.dme(まさろぐ) メガネ男子の雑多ブログ-min

それに加えて、以下を子テーマのsytle.cssに以下を記入しましょう。

/*グローバルナビの修飾 */
#navi {
 border-top:2px solid #D4D4D4;
 border-bottom:2px solid #D4D4D4;
}

【結果】

これで、グローバルナビの上下に線を引いたようなデザインになりました。

「Simplicity」をカスタマイズした1-min

2.「記事を読む」ボタンのカスタマイズ

次に「記事を読む」ボタンのカスタマイズです。これは以下のブログを参考にさせてもらいました。

PC

まずPCの場合、Gizomodeの記事を読むボタンっぽくしています。

手順としては、カスタマイザー設定でまず色の「リンクホバー色」を#3697b3に変更。Simplicityはすでにリンクホバーがすでに設定されているため:hover擬似クラスの記述をする必要はありません。

子テーマのstyle.cssに以下を記述します。

/* 記事を読むボタンの装飾 */
.entry-read a,.related-entry-read a{
 color:#D4D4D4;
 font-size:15px;
 font-weight:bold;
 padding:3px 8px 3px 8px;
 text-decoration:none;
 transition: .4s;
 }

【結果】

Gizomodeっぽくなりましたね!

masalog.me(まさろぐ) メガネ男子の雑多ブログ-min

モバイル

ぼくの場合、モバイルで「記事を読むボタン」が別にいらないと判断して、消しています。そのため子テーマのmobile.cssに以下を記述しています。別に消す必要ないな〜って思う人はやらなくてもいいでしょう。

/*記事を読むボタンを消す*/
.entry-read a,.related-entry-read a{
  display:none;
 }

3.サイドバーメニューをカスタマイズ

① 見出しの背景をつける

まずは見出しの背景を変えましょう。背景は以下の記述します。

/* サイドバーの見出し背景を修正 */
#sidebar h4{
   height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-radius: 5px;
  background: #f3f3f3;
  font-weight: bold;
  color: #000;
}

② 擬似クラスでFont awesomeを読み込む

次に見出しの前にアイコンをつけます。これに関しては以下の記事がとても参考になるので、これを参考にしてください。

「カテゴリー」「人気記事」「新着記事」のスタイルを変えるコードだけ以下に貼っておきます。

/* サイドバーカテゴリーを修正 */
.widget_categories h4:before{
 margin-right:5px;
 font-family:"FontAwesome";
 content:"\f115";
}

/* サイドバー人気記事ランキングを修正 */
#popular-entries h4:before{
 margin-right:5px;
 font-family:"FontAwesome";
 content:"\f219";
}

/* サイドバー新着記事ランキングを修正 */
#new-entries h4:before{
 margin-right:5px;
 font-family:"FontAwesome";
 content:"\f0ca";
}

【結果】

いい感じのカテゴリーに!!

【映画】『マッドマックス 怒りのデス・ロード』行って帰ってるだけでもメッチャ面白い

4.パンくずリストをカスタマイズ

このパンくずリストのカスタマイズは正直、自分の知識では書いているコードが理解不能だったため、以下のサイトを参考にただコピペしただけです。やりたい人はとにかく黙ってコピペしましょう。

【結果】

ぱんくず-min

5.人気記事ランキングの順位をカスタマイズ

人気記事ランキングの順位のところのデザインを変更します。詳しいやりかたは以下の記事を参照。

/* 人気記事ランキングの順位をカスタマイズ */
.widget_popular_ranking ul li:before, .widget_new_popular ul li:before {
  background: none repeat scroll 0 0 #FFF !important;
  color:#000 !important;
  top: -3px !important;
  border-radius: 50px !important;
  border:solid 2px #000 !important;
}
#new-entries ul li img, #popular-entries ul li img {
  margin: 3px 5px 10px 3px;
}

【結果】

人気記事ランキングの順位がオシャレになりました!

コピペで一発!「Simplicity」カスタマイズ11項目

6.「上へ戻る」ボタンのカスタマイズ

上へ戻るボタンはカスタマイザー設定で簡単にできます。「上へ戻る」ボタンに使用したいアイコンを探して、それを「レイアウト(全体・リスト)>トップへ戻るボタンに画像を指定」で、画像をアップロードするだけです。

画像は以下のアイコンファインダーで探すといいでしょう。

【結果】

これを押すとロケットが上昇しているっぽくなります!

上へ戻る-min

7.見出しのカスタマイズ

見出しをカスタマイズしました!h2、h3、h4を修正します。

/* 見出しを変更 */
.article h2 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #000;
  line-height: 1.3;
  padding: 20px 0px;
  border-top: 2px solid #888888;
  border-bottom: 2px solid #888888;
  margin:35px 0px 30px;
}

.article h3{
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.3;
  padding: 5px 20px;
  border-left: 3px solid #888888;
  color: #000;
  margin:35px 0px 30px;
}
.article h4{
  font-size: 1.1rem;
  line-height: 1.3;
  padding: 0px 20px;
  border-left: 1px dotted #888888;
  color: #000;
  margin:35px 5px 25px;
}

【結果】

h2(見出し2)

h3(見出し3)

h4(見出し4)

実際の文章にした感じは以下を参照。

映画業界に行くため大学休学したらホリエモンにdisられ、会社クビになった話
photo by mdalmuld 「オレ大学休学するわ!!」 そう言って、早1年半くらいが経った。 近年、大学を休学して、海外留学をしたり、企業...

8.記事間に線を引くカスタマイズ

記事の間に線を引きます。style.cssに以下を記述しましょう。

/* 記事間に線を引く */
#main .entry {
    border-bottom: 2px solid #D4D4D4;
    padding-bottom: 10px;
}

ちなみに記事ページの下にある関連記事間にも線を引きたい場合、以下も追加します。

/* 関連記事間に線を引く */
#main .related-entry {
    border-bottom: 2px solid #D4D4D4;
    padding-bottom: 10px;
}

9.スマホメニューのカスタマイズ

スマートフォン画面でのメニューの表示デザインをカスタマイズします。

これに関しても以下の記事にお世話になりました。男は黙ってコピペ!

【結果】

IMG_1201-min

10.追従SNSボタンを左に寄せる

「カスタマイザー設定>SNS>サイドに追従シェアボタンを表示にチェック」を行うと、左側にスクロールしてもついてくるSNSボタンを表示することができます。ただ、この追従ボタンの位置がちょっと記事のほうに寄りすぎていて記事がみづらくなってしまいます。そこで、追従ボタンを左のほうに寄せました。

/* 追従SNSシェアボタンの位置を変更 */
#sharebar {
  margin-left: -160px  !important;
}

【結果】

これで記事がスッキリ見れます。

【映画】『マッドマックス 怒りのデス・ロード』行って帰ってるだけでもメッチャ面白い

11.記事幅とリスト幅を狭める

Simplicityは公式ページを見てもらえればわかりますが、ちょっと記事幅が広めに感じます。ぼくは文が横に広がりすぎると、読みにくさを感じてしまうため、この記事幅を狭めています。

「Simplicity」をカスタマイズした1-min (1)

この幅は、人それぞれ好みがあると思うので、パーセンテージ(%)の中の数値を変えながら調整してみてください。

/* 記事幅とリスト幅を狭める */
.article
,#related-entries {
  width:93%;
  margin: 0 auto;
}
#list {
  width:95%;
  margin: 0 auto;
}

今回はWordpressを利用していて、かつテーマが「Simiplicity」に人っていうかなりコアの人向けの記事になっちゃいました。WEBデザインの勉強のアウトプットということで、ちょこちょこWeb系の記事もこれから更新していこうと思います。それでは。

※当ブログは現在、このカスタマイズを修正しているのでここで紹介しているCSSでは、若干見た目が異なってしまっています。改訂版記事は以下をクリック

WordPressテーマ「Simplicity」をカスタマイズする17のポイント

[amazonjs asin=”4844337092″ locale=”JP” title=”いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)”]