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

ワードプレス
この記事は約5分で読めます。
スポンサーリンク

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

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

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

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

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

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

お調子者

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

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

ヘッダーに画像を表示

書類とペン

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

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

Attention Required! | Cloudflare

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

画像の編集

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

忍野八海の写真とクリップ

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

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

画像の設定

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

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

見出しのデザインを変更

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

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

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

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

  1. サイドメニュー > 外観 > CSS編集 とクリック
  2. CSS の記述を追加
  3. 「公開」ボタンをクリック
/* 見出し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」を使ってしまったことが、心残りです。

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

追記(2018.11.14)

クリック可能な要素同士がちかすぎます

Google Search Console(グーグルサーチコンソール)のモバイルユーザビリティのところで「クリック可能な要素同士が近すぎます」と指摘を受けました。

ボタンの間隔を広げて、文字を大きくしたところエラーが無くなりました。

何だか童話「ねずみの嫁入り」のよう

ねずみ

さて結局、最初に使っていたテーマに戻ってきてしまいました。
まるで、童話「ねずみの嫁入り」のようです。

童話「ねずみの嫁入り」とは、父親ねずみが、自慢の娘ねずみの嫁入り先として、太陽、雲、風、壁と回ったが、体(てい)よく断られて、結局ねずみに嫁がせる話です。

ボクもまだまだしばらくは、テーマ「Simplicity2」にお世話になりそうです。

あとがき

他にも変更した点はありますが、あまりに細かいでの省きます。

蚕とまゆ

なお将来的には、さらに進化しているはずのテーマ「Cocoon」に移行するつもりです。
そのときは、よろしくお願いします。

コメント

タイトルとURLをコピーしました