【ワードプレス】お気に入りのテーマはシンプリシティーその4 （デザイン変更篇）

最近ちょっと、WordPress のテーマとして、派手なテーマを使ってみたくなり、一時的にテーマを替えてみました。

しかし結局は、便利なテーマ「Simplicity2」に戻って来てしまったという話です。

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

今回は、シンプルなテーマ「Simplicity2」の見た目をカスタマイズする話です。

シンプルな見た目をカスタマイズ
ヘッダーに画像を表示
1. 画像の編集
2. 画像の設定
見出しのデザインを変更
カレンダーのデザインを変更
タグクラウドのデザインの変更
1. 追記（2018.11.14）
何だか童話「ねずみの嫁入り」のよう
あとがき

シンプルな見た目をカスタマイズ

では、シンプルな見た目を変更します。
目立つ場所に手を加えていけば、見た目がよくなるはずです。

ただ、やり過ぎると、記事が目立たなくなったり、記事が読みにくくなってしまうので、そこはほどほどに。

あとは、投稿の編集画面と実際の投稿の見た目が、あまりかけ離れないようにしました。

ヘッダーに画像を表示

ボクのサイトでは、ヘッダーいっぱいに画像を表示しています。

これは、自分で撮影した画像ではなく、インターネット上で無料配布されている画像を使用しています。

Just a moment...

なお、この無料画像配布サイトの画像は、アイキャッチ画像でもよく使用しています。

画像の編集

この無料画像配布サイトの画像をそのまま使用しても、十分に素晴らしい仕上がりになります。

ただ、画像のサイズや見た目のイメージを変更したい場合には、Windows10 に標準で入っているアプリ「フォト」が役に立ちます。

画像を右クリック > プログラムから開く(H) > フォトとクリック
編集と作成 > 編集をクリック
画像の切り抜きや、サイズを変更するには、「クロップと回転」を使用
見た目を変更するには、フィルターのいずれかを選択
「コピーを保存」をクリック

画像の設定

画像をヘッダーに設定する場合は、

サイドメニュー > 外観 > カスタマイズとクリック
ヘッダー > ヘッダー外側背景画像に画像を設定

見出しのデザインを変更

見出しは、初期のままでは寂しいので、初期のデザインを尊重しつつ、微妙に変えました。
デザインは、つぎのサイトを参考にしております。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

なお、見出しのデザインを変更したい方のために、以下にセレクタだけ書いておきます。
参考になさってください。

ちなみにボクが、CSS を記述するときは基本的に、つぎのようにしています。

サイドメニュー > 外観 > CSS編集とクリック
CSS の記述を追加
「公開」ボタンをクリック

/* 見出し2 */
.article h2 {}

/* 見出し3 */
.article h3 {}

/* 見出し4 */
.article h4 {}

/* ウィジェットタイトル */
.widget_title {}

なお、見出し2（.article h2）は初期設定で、左マージン（margin-left）にマイナスの値が入っていますので、注意が必要です。

カレンダーのデザインを変更

カレンダーは、そのままではかなり寂しいので、シンプルさは残しつつ、デザインを変えてみました。

/* カレンダー */
.widget_calendar table {
  position: relative;
  padding: 30px 0 0;
/*   border: 1px solid #ccc; */
}

.widget_calendar caption {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.widget_calendar a {
  display: block;
  border: 1px solid;
  border-radius: 4px;
  text-decoration: none;
}

.widget_calendar thead th,
.widget_calendar tbody td {
  width: 35px;
  text-align: center;
}

.widget_calendar tfoot {
  text-align: center;
}

なお、周囲をボーダーで囲みたい場合は、コメントになっている border の記述を、もとに戻してください。

ただし、それなりに見せるには、padding や top などの調整が必要です。

タグクラウドのデザインの変更

タグクラウドは、テーマ「Cocoon」のタグクラウドが見やすかったので、真似てみました。
他のテーマでも見た気がするので、最近のタグクラウドの流行りなのかも知れません。

/* タグクラウド */
.widget_tag_cloud .tag-cloud-link {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 12px 0;
  border: 1px solid;
  border-radius: 4px;
  text-decoration: none;
  font-size: medium !important;
}

ただ、フォントのサイズの指定で、推奨されていない「!important」を使ってしまったことが、心残りです。

なお、カレンダーのデザインは、このタグクラウドに寄せています。