はてなブログ「続きを読む」のCSSカスタマイズ

自分のブログの最初の画面がすごく見づらいなーと思いました。記事の全部が表示されてるので、最新記事の1個前の記事を確認する時、いちいち下までスクロールすんのめんどくせーなとも思いました。

なので、今まで全然使ってなかった「続きを読む」機能を使って、ひとまず見やすくなればと思いましたが、「続きを読む」というテキストリンクが表示されるだけで、逆にこれはこれでこのテキスト見逃されてしまう可能性高いと感じ、CSSカスタマイズして、一応見やすいボタンにしてみました。

という感じで今回は、はてなブログ「続きを読む」のCSSカスタマイズ方法についての紹介となります。

こんな感じの「続きを読む」ボタンにしました。

クリックすると、

記事URLに移動し、記事内容全部が表示される感じです。

で、この「続きを読む」で設定されてる「id」または「class」ですが、各ブラウザの右クリックした時にあるメニュー「要素を調査」で調べてみると、

「a」タグの中に、「class="entry-see-more"」が設定されてる感じでした。

なので、

・「続きを読む」ボタン
a.entry-see-more{ 修正内容 }

・「続きを読む」ボタンにカーソル乗った時
a.entry-see-more:hover{ 修正内容 }

を管理画面内のデザインCSSのところに追加すれば「続きを読む」のデザインをカスタマイズできます。

管理画面の「デザイン→カスタマイズのアイコン→{}デザインCSS」をクリック。

そこの一番下の行に追加します。

これは自分が追加した内容です。一応参考にどうぞ。

勝手にスマホサイトまとめ｜スマホサイトとjQueryMobileのまとめ

勝手にリスティング広告まとめ｜テキスト・イメージ広告、ランディングページまとめ