nuidarabakeru no nikki

自分用です。一応人が読めるようには書いています。

はてなブログ、カスタマイズしてみた①

はてなブログはカスタマイズできる。

テンプレがあったんですが、それじゃあ自分のブログという感じがしないので、こんなのがいいなあというのをカスタマイズしてみました。 とりあえず今回は、全体の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回ほどぽしゃしました。

変更後の見た目

記事の角を丸めて、影をつけました。英字フォントも変えたりしています。オリジナティが出ていい感じ。 次回はヘッダ部分のジャンルボタンの作成を解説します。