明日の風を探して

所詮ゲームは人生の余暇を過ごすためのものでしかないんだからな。by ロキシ

*

SIMPLESTER h3のちょっとしたカスタマイズ 

      2015/03/29

465465このように見出し3(h3)が少し見た目にもわかりにくかったのでもう少し見やすいようにカスタマイズしてみようと思います。

h3見出しはどこにあるの? SIMPLESTER

WordPressメニューの 外観 > テーマの編集 にあります。
「タイポグラフィ 周り」っていう欄。

SIMPLESTER h3 デフォルト

.postが記事を指してるのかな?
「border-bottom」は下線、「1px」は線の太さ、「dotted」は点線、「#780116」は色を表しているようです。「記事内のh3は下線を1pxの太さの点線で色は#780116にしてください」ってことでしょう。

46521↑ ちなみに親(STINGER5)での設定はこうなっています。

「1pxでは細いのでちょっと太くしたい!」
5pxぐらいにしたらきれいに色が表示されるかな?
でもSIMPLESTERの1pxをいじっても何も変わらないんですよね~;;
(。-`ω-)ンー
どこかで何かが邪魔している?
こういう時は優先順位を上げればいいんですね!

「!important;」 魔法の言葉

654border-bottomの行の最後に半角スペースを空けて「!important;」を付け加えます。
このおまじないをすることで優先順位が上がります

「はい、ここ重要~」って教えてあげる感じです。

465お~。変わりました。やったね!
少し華やかになりました。

ここにさらに4564631チェックマークでも入れたくなったのでFont Awesomeを使って

78963

と付け加えました。

400

チェックマークが入りました!
Font AwesomeのUnicodeを変えるだけで他にもいろんなマークに変更できますよ。

たったこれだけですが見栄えがよくなったと思います。満足。

 - WORDPRESS ,

ad01

ad01

コメントを残す

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  関連記事

wplogo
ブログの見た目をカスタマイズ中 Twitter

いろいろ勉強しているのですが、 記事にしていけてません。(´・ω・`) そして眠 …

wplogo
WordPressのコメント欄の表示、非表示

「あれ?そういやコメント欄がないぞ?あれれ?」 と気づいたのはブログを始めてもう …

124
WORDPRESS コメント欄をすっきりと見やすくしてみた 

コメント欄の編集について STINGER5を導入した当初はコメント欄は以下の画像 …

466254-546x131
SIMPLESTERで記事をマウスホバー(マウスオーバー)時に表示されるハートのアイコンを変更する方法

記事の上にマウスを載せた時にハートのアイコンが左上で明滅するんですけど、このハー …

wplogo
新ドメイン取得などでWORDPRESSにログインできない時の対処法

前回のドメイン設定の時に失敗したので忘れないように書き記しておきます。 新しいド …

server-24915_640
Google AdSense(グーグルアドセンス)を申請してみた。

世の中にはGoogle AdSense(グーグルアドセンス)というものがあるらし …

wplogo
STINGER5 子テーマ導入

WordPress、ちょこちょこいじってます。 ゲームのことも書きたいのに、時間 …

wplogo
ファビコン?え?ファミコン?ん?

ファビコンってなんだろ? favicon(ファビコン)は、ウェブサイトのシンボル …