自作 WordPress テーマ(制作中)の細部の色や形を整理・統一してみた

昨日作ったトップページを全体的に統一感のあるようにしました。まだ途中です。

自作WordPressテーマ05

昨日のカラフルな印象から白系に、色を統一してみました。

背景を白にして、カテゴリーや記事の上部に1pxのグレイの線を引いています。

文字はハッキリとした強い黒(#000;)から、やや淡めの黒(#454545;)にしています。また見出しに太字(font-weight:bold;)は使わないようにしました。というか、太字にしなくても、見やすいように余白やサイズ、文字の間隔などを調整しています(まだ途中ですが)。

左右の余白もセクションごとに均一なものにし、上下の余白も同じ間隔にしました。

同時に、記事を影付きの線で囲むこともやめにしました。線なしのほうが開放感がありますから、そうしてみました。

はじめに大きく表示されている最新記事の画像左上に三角の「NEW」のマークをつけましてみました。こうやって注目してもらう工夫をいろいろ試しています。今は分かりやすく強い目の色や形にしています。こちらも他の方法を検討中です。

気づきにくいですが、画面上部に固定されたメニューの右端に検索フォームも設置しました。

 

なんか昨日のと比べて微妙な差しかないように思えますが、管理人としては、だんだん使い勝手がよくなってきています。やっぱり細部の調整は大事ですね。

問題点を挙げると、カテゴリーの分け方は昨日のように色別のほうが目立つかな?という点です。

これにはカテゴリー分類用のワンポイント画像や背景色で代用してもいいですし、説明文を加えるのでもいいかな、と思っています。これはどうにもならないなあ、と諦めたらもとに戻すかもしれません。

というわけで、今日はこんな感じでした。

関連記事

Google Developers の PageSpeed Insights で計測したら瞬間的にモバイル・PC共に99点になったので記念にキャプチャしておきました【追記あり】

ひさしぶりにプラグインや画像処理、jQueryなどの修正をしてみたら、瞬間的にPageSpeed Insightsで99点になりました。わたしはあまりこの数値にこだわりすぎないようにしているのですが、これだけの高得点はなかなか無いと思うので…

WordPress のテーマを自作してみる

レスポンシブWebデザインを勉強して自作のWordPressテーマを作っています。 1月に『作りながら学ぶHTML/CSSデザインの教科書』を読んで、なんとなくHTML5とCSS3の初歩を理解しました。次に『WordPress レッスンブッ…

Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方 HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。 興味を持ったサイトのデザイン…