【WordPress】有料テーマ「ハミングバード」への変更とカスタマイズした点

こんにちは！MIYALOG編集部です。本サイトはWordPressを利用して記事を更新しています。最近では有料の日本語WordPressテーマも素敵なデザインのものが増えてきましたね。

今回は気分転換がてら、割と定番で有名どころの「ハミングバード」に変更してみました。スマホデザインが整っていて良い感じですね。この記事には自分への備忘録も含めて、ハミングバードでカスタマイズを加えている部分を残しておきたいと思います。

カスタマイズした点
おわりに

カスタマイズした点

実際にこのサイトでデザインをカスタマイズしているポイントを羅列していきたいと思います。なお、現在の執筆現在の編集点であり、閲覧いただいている状態と異なる場合があります。

ヘッダーの余白を調整

ヘッダー部分の上下の余白バランスがしっくりこなかったので、paddingを追記しています。

#inner-header{  padding-top:13px;  }

メインコンテンツの幅を調整

個人的に本文には左右の余白があった方が見やすいと感じるタイプなので、メインコンテンツ部分にpaddingを追記しました。

.single #main article, .page #main article{  background-color:#fff;  padding:20px;  }

hタグ（見出し）のデザインを調整

h2見出しはデフォルトのまま使用、h3見出しとh4見出しのcssを追記しています。

/* h3見出し */  .entry-content h3{  border-left: 5px solid #f89174;  background-color:#fffbf4;  padding-right:10px;  font-size:1.1em;  }    /* h4見出し */  .entry-content h4{  border-left: 5px solid #ff9900;  padding-left:10px;  font-size:1em;  }

ページネーションのカラーを調整

記事一覧ページで活躍するページネーションのカラー設定を編集しています。デフォルトの状態だとリンクカラーと連動するため青色系になります。今回はサイトのメインカラーに合わせたかったためcssで調整。

.pagination .current, .pagination .current:hover{  background-color: #f89174;  border-color: #f89174;  }  .pagination a, .pagination span, .page-links a{  background-color: #f4f4f4;  border-color: #f4f4f4;  color:#f89174;  }

TOPに戻るボタンの調整

ページ右下に設置されているTOPへ戻るボタンの見た目を丸く編集し、下部に余白を追記しています。

#page-top a{  border-radius: 27.5px;  background:#f89174;  margin-bottom:20px;  }

スマホ時のフッター調整

フッターのテキストがスマホの場合だと画面の左端ギリギリから始まるのがしっくりこず余白が欲しかったため、画面幅768px以下でフッターテキスト左側に余白を設定しました。

@media only screen and (max-width: 768px) {  #inner-footer{  padding-left:14px;  }  }

マーカー装飾cssの追加

本文テキストにこのような黄色いマーカー装飾を施すcssを追記しました。なお、プラグイン「AddQuicktag」と合わせて使うと便利です。

/* html */  ここにテキスト    /* css */  #marker{  background: linear-gradient(transparent 0%, lightyellow 0%);  }

おわりに

ひとまず「ハミングバード」のカスタマイズした点については以上とさせていただきます。今後も随時編集した点を追記していきたいと思っています。

現在このサイトでは設定しておりませんが、ハミングバードはレスポンシブ対応のヘッダー画像設定や、注釈css、ボタンcssなど、記事作成に便利な機能が備わっており割りかしお得な有料WordPressテーマだなというのが移行してみた感想です。

今回もここまでお読みいただきありがとうございました。それではまたよろしくどうぞ。こちらの記事もよければ合わせてチェックしてみてください♪

＜スポンサードリンク＞