wordpressの見出しタグが味気なかったのでcssをちょっとだけいじってみた

はてなブログから移転してきた勢なのですが、WordPressのデフォルトcssが微妙に味気ない気がしませんか?もちろん利用しているテーマによるのでしょうが私はwordpress謹製のやつを利用しているので、少しだけCSSをいじって遊んでみることにしました。

注意

こちらはTwenty Sixteenをベースにしたものとなります。

弄り方

外観 - カスタマイズ - 追加CSSをクリックして、直接追記していきます。

イメージ

私はこんな感じにしてみました。

だいたいこんな感じの用途を想定しています。

  • h1タグ
    • 基本的にブログタイトル用。でっかく見やすくね。
  • h2タグ
    • 各セクションを分けるのに使う。こっから違う話題だよ~っていうのが分かりやすいようにborder-bottomのみ入れてます。
  • h3タグ
    • 主張したいワード強調用。緑だと煩くない気がします。
  • h4タグ
    • 警告!!!みたいな感じ?汎用的に使えます。
  • h5タグ
    • 汎用。

iosColorを上手く活用しよう

developer.apple.comにて、Human Interface Guidelines iOSというものが公開されています。

例えばノートでは、インタラクティブな要素は黄色です。カレンダーでは、インタラクティブな要素は赤です。インタラクティブ性を表すキーカラーを定義する場合は、他の色と競合しないようにしてください。

上記のように色は人間の行動を決定づける様な要素も含んでいるのです。高級品が黒い化粧箱に入っているのもそうだし、オタクがやたらと黒っぽい服着てるのも(?)、そういうことなのです。

キーカラー

一覧 R G B
255 59 48
オレンジ 255 149 0
255 204 0
76 217 100
水色 90 200 250
0 122 255
88 86 214
ピンク 255 45 85

とりあえずこの色使っておけば間違いないだろリストです。

ソースコード

はてなブログ時代と違って、htmlタグ直接貼り付けると大変なことになるのでGistを使って見るテスト。色々参考にしてみて下さい。

margin 10px

とか入れてみると大分印象変わりますよ。

コメントを残す

メールアドレスが公開されることはありません。