はてなブログのデザイン＞スパナマーク＞デザインCSSで、このセレクタ（.◯◯｛ 〜）を編集するとここのデザインが変わる、というのを上から順にまとめていきます。
※このブログでは、レスポンシブデザインを設定しています。
カテゴリのラベル色
.categories a でカテゴリのラベルのデザインを変更できます。
記事タイトルと見出し
★記事タイトル ⇒ .entry-title
★大見出し ⇒ .entry-content h3
★中見出し ⇒ .entry-content h4
★小見出し ⇒ .entry-content h5
編集ツール
引用
引用符全体 ⇒ .entry-content blockquote
引用アイコン ⇒ .entry-content blockquote:before
Fontawesomeの引用アイコンを入れる場合は、この中にコードを書いていきます。
引用符の文字 ⇒ .entry-content blockquote p
引用元を示す ⇒ .entry-content blockquote cite
目次
目次全体 ⇒ .entry-content .table-of-contents
目次の文字色 ⇒ .entry-content .table-of-contents li a
サイドバー
タイトルバーにFontawesomeアイコンを入れる
プロフィール ⇒ .hatena-module-profile .hatena-module-title:before
検索 ⇒ .hatena-module-search-box .hatena-module-title:before
最新記事 ⇒ .hatena-module-recent-entries .hatena-module-title:before
注目記事 ⇒ .hatena-module-entries-access-ranking .hatena-module-title:before
月別アーカイブ ⇒ .hatena-module-archive .hatena-module-title:before
タイトルバーにFontawesomeのアイコンを入れる時は、下のようなコードを書きます。
不要なものを非表示にする
過去記事を張り付けた際に下に付いてくるリンクと、記事下に表示される はてなID、投稿日（◯日前とか◯年前）を見えないようにします。
コメントを書く
★コメントボタン全体 ⇒ .leave-comment-title
ボタンのホバーアニメーション
カテゴリのラベルやコメントボタンなどのボタンは、hoverやafterを使ってホバーアニメーションを作成することができます。
例えば
上のCSSを使うとこのようなデザインになります。
通常時
ホバー時
どんなアニメーションなのかはこのブログ記事のコメントボタンをさわってみてください。
関連記事
★見出し ⇒ .hatena-module-related-entries .hatena-module-title
★関連記事ボックス ⇒ li.urllist-item.related-entries-item
★画像の大きさ ⇒ img.urllist-image.related-entries-image
★タイトル ⇒a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title
★説明文 ⇒ .urllist-entry-body.related-entries-entry-body
★日付 ⇒ .hatena-urllist .urllist-date-link a
コメント