テーマCONTENTSをカスタマイズしてみた。
ずっと自分で作ったグローバルメニューを使っていたので気分転換にテーマを変えました。
dreamark様提供のCONTENTSです、ありがとうございます。
数あるテーマの中でこちらを選んだ理由はグローバルメニューが最初からあるところと、蛍光マーカーを簡単に引けるところと、記事の幅ですね。
そして親切なことにこのテーマの使い方やカスタマイズの方法も記事でまとめてくださっています。
↓の記事を参考にしてください。
www.dreamark.tokyo
さて、デフォルトのままでも十分かっこいいのですが個人的にはもう少し色を抑えたいなと思いカスタマイズしてみました。
グローバルメニューの変更
上記dreamark様の記事2-1にグローバルメニューについての記載があったのでそこを参考にしました。
<div class="navi"> <ul> <li><a href="リンクURL">表示名</a></li> <li> <a href="リンクURL">表示名</a> </li> <li> <a href="リンクURL">表示名</a> </li> <li> <a href="リンクURL">表示名</a> </li> <li> <div class="navi-search"> <form class="search-form" role="search" action="ブログのURL/search" method="get"> <input type="text" name="q" class="search-module-input" value="" placeholder="検索" required> <input type="submit" value="検索" class="search-module-button" /> </form> </div> </li> </ul> </div>
もともとメニューは4つと検索バーが1つの構成でしたが、検索バーを消してその分メニューを追加しました。
div class="navi-search"から一つ目の/divを消すだけです。
あとはa href～でリンクを追加するだけで完成です。
しかしこのままだとメニューの数によっては形が崩れてしまうためCSSで手直しが必要になるかもしれません。
ちなみに僕はこんな感じにしました。
.navi ul li { width:150px; /*横幅を150pxに*/ margin:0px; /*余白を0pxに*/ }
グローバルメニューの色の変更
バー自体はネイビーでマウスオーバー（カーソルを乗せる）するとリンクが赤？っぽく色が変わるようになっています。
これをネイビーからなんかよくわかならい薄いネイビーに変えます。
classがnaviということはわかっているので簡単です。
.navi { background-color:#625772; }
次にマウスオーバーしたときの色を赤からクリーム色に変えます。
これはhoverという疑似クラスを用います。
.navi li :hover { background-color:#FEFAEC; /*背景色をクリーム色に*/ color:#283C63; /*文字色をネイビーに*/ }
マウスオーバーしたときにクリーム色になるため文字色を逆にネイビーに変更しました。
もともとの文字色は白だったかと思います。
ブログタイトルにマーカーを引き色も変更
ブログタイトルも同様に色を薄いネイビーに変えます。
ついでに目立つようにマーカーを引いてみました。
#title a{ /*記事タイトル*/ background: linear-gradient(transparent 60%, #9DDCDC 60%); /*マーカー*/ color:#625772; }
ブログタイトルはtitleというidがつけられていました。
マーカーはこちらのテーマについていたものではなく通常のcss、linear-gradientでいじります。
transparentは透明な、透き通るという意味です。
60%はマーカーを引く範囲です。
この数値が透明部分を表しているのかと思いましたがどうやら逆のようです。
記事タイトルの色を変更
記事タイトルはentry-titleというクラスがつけられていましたがまあできないできない。
entry-title a { でやっても色は変わらないし困っていたんですが、dreamark様の記事にさりげなく乗っていたので変更したい方は下記記事をご覧ください。
www.dreamark.tokyo
.entry-header .entry-title a, .entry-header .entry-title a:visited { /*訪問済みリンク*/ color: #625772; }
aのリンクとa:visitedの訪問済みも指定しなければいけなかったようです。
それとheaderも指定するようですね。
ついでに記事タイトルを囲う上下のラインも色を変更します。
.entry-header .entry-title { border-top:double 5px #625772; border-bottom: double 5px #625772; }
borderも5pxのdoubleに変更しました。
見出しの色を変更
見出しはデフォルトだとこんな感じになっています。
border-leftに5pxくらいでしょうか、ラインがあるだけなのでここは目立たせようかと思います。
.entry-content h4 { background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/h/htmllifehack/20161020/20161020024716.jpg?1476899272) no-repeat left center; /*はてなフォトライフにアップロードした画像を指定するよ*/ border-left:none; /*左にある線を消すよ*/ padding-left:40px; /*画像と文字の間隔を広げるよ*/ border-bottom:solid 5px #F38181; color:#625772; }
まだ試行錯誤中ですがいったんこれで行こうかと思います。
entry-content h4 にしているのは記事の中のH4だけを変更したかったからです。
backgroundには画像を表示させるためurlを指定します。
これだけでは画像が横並びに何個も表示されてしまうためno-repeatを追記し、centerでセンタリングします。
これで見出しの最初にチェック画像が表示されるようになりました。
border-leftはまだ健在なのでnoneにして非表示にします。
padding-leftで画像と文字の位置を調整し、border-bottomで線を引き終わりです。
画像の表示はまたあとで備忘録として残します。
サイドバーの色などを変更
プロフィールやら最新記事やらカテゴリーやらも同様に変更していきます。
.hatena-module-title { background:url("http://cdn-ak.f.st-hatena.com/images/fotolife/h/htmllifehack/20161020/20161020024715.jpg?1476899248") no-repeat left center; padding-left:25px; border:none; background-color:#FFF4E1; }
見出しの時と同じようにbackground:urlで画像を指定し、paddingで位置調整、border:noneで線を消して、background-colorで背景色をクリーム色に変えました。
まだ全部の色の変更はできていませんが、どうしようかなと考え中なので変更できたらまた書き足していこうかなと思います。
あと今まで見たまま記法で記事を書いていましたが今回からはてな記法に変えました。
コードをそのままブログ記事に表示する方法とか、コードに色を付けるとか、ブログ初心者だとこれがなんという技術なのかわからなくてやりようがなかったんですが、やっと見つけました。
シンタックスハイライトというようです。
これもおいおい記事にできたらなあと思います。
