はてなブログのデザインCSS対応セレクタまとめ

スポンサーリンク
BLOG

はてなブログのデザイン>スパナマーク>デザインCSSで、このセレクタ(.◯◯{ 〜)を編集するとここのデザインが変わる、というのを上から順にまとめていきます。

このブログでは、レスポンシブデザインを設定しています。

カテゴリのラベル色

.categories a でカテゴリのラベルのデザインを変更できます。

f:id:ymm_520:20200107212541p:plain

記事タイトルと見出し

記事タイトル ⇒ .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

ボタンのホバーアニメーション

カテゴリのラベルやコメントボタンなどのボタンは、hoverafterを使ってホバーアニメーションを作成することができます。
例えば

上のCSSを使うとこのようなデザインになります。

通常時

f:id:ymm_520:20200108222305p:plain

ホバー時

f:id:ymm_520:20200108222424p:plain

どんなアニメーションなのかはこのブログ記事のコメントボタンをさわってみてください。

関連記事

見出し ⇒ .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 

コメント