読者です 読者をやめる 読者になる 読者になる

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

勝手にお役立ち情報 はてなブログ

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

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

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

 

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

 

f:id:sumaho-design:20151124130749j:plain

 

クリックすると、

f:id:sumaho-design:20151124130828j:plain

 

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

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

 

f:id:sumaho-design:20151124130929j:plain

 

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

なので、

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

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

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

 

f:id:sumaho-design:20151124131517j:plain

 

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

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

 

f:id:sumaho-design:20151124131727j:plain

 

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

 

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

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