はてなブログ、カスタマイズしてみた①
はてなブログはカスタマイズできる。
テンプレがあったんですが、それじゃあ自分のブログという感じがしないので、こんなのがいいなあというのをカスタマイズしてみました。 とりあえず今回は、全体のcssを変更する方法を。
かるーく手順を載せておきます。
【手順1】カスタムCSSの記述
はてなブログでは、自分で書いたCSSを適応させることができます。
しかし、そのためにはCSSセレクタ、つまりはてなブログのhtml構造を取得する必要があります。
そこで公開されてるのが、boilerplate.css。
詳細は、下のリンクですが、まあ土台となっているcssがあるわけです。これを変更してカスタマイズします。これは便利。
help.hatenablog.com github.com
しかし、
実際に中身を見るとどこがどこなんだ、、(entry?date?)
.entry-header { padding-bottom: 1em; margin-bottom: 2em; border-bottom: 1px solid #ddd; position: relative; } .date { margin-bottom: .5em; font-size: 1.2rem; } .date a { color: #999; text-decoration: none; }
ということで、対応付けるためブラウザの「開発」「デベロッパツール」を使いましょう。 safariであれば(右クリック)>「要素の詳細を表示」 chromeだと(右クリック)>「検証」
するとこのように要素のclass名をgetすることができます。
また、「command+S(保存)」でブラウザからwebサイトのソースをダウンロードすれば、ローカル環境で、編集したcssをhtmlに適応して何度も試すことができるのでおすすめ。
この調子であとはcssを自分好みに編集していきます。
【手順2】カスタムcssの適応
「ダッシュボード」>「デザイン」>「設定マーク(レンチのマーク)」>「デザインCSS」に進むと、そこにcssを書き込める。
他の方法として、詳細設定からhtmlの
タグを編集できる機能があるんですが、そこに、GoogleドライブやらDropboxにアップロードしたcssファイルの公開リンクをタグから読み込む、というのがあるんですが、ロードにも(若干)時間がかかるんで、別にそんなことしなくても先ほどのところに作ったcssコピペすればいいと思います。コピペが嫌だ、という人は上記の方法でやりましょう。 「ダッシュボード」>「設定」>「詳細設定」>「head内タグ」>「
要素にメタデータを追加」からできます。変更後は「変更を保存する」をお忘れなく。ワイは3回ほどぽしゃしました。
変更後の見た目
記事の角を丸めて、影をつけました。英字フォントも変えたりしています。オリジナティが出ていい感じ。 次回はヘッダ部分のジャンルボタンの作成を解説します。