ブログ

簡単に、”続きを読む”ボタンの見栄えを良くする

投稿日:7月 19, 2015 更新日:

はてなブログのトップページにある記事をすばやく閲覧してもらうために、”続きを読む”ボタンを配置しておく方は結構多いと思います。このボタンを追加するのは簡単で、以下の画像のように、文章中のどの箇所でもよいのでこのボタンを押せば、自動的にボタンは作成されます。 ただこのボタンはとてもシンプルで見た目がつまらないので、手っ取り早く、見栄えを良くします。

スポンサーリンク

f:id:Daiki2013:20150719083105p:plain

まず以下のサイトに行って、自分の好きなボタンを作成してください。他のサイトよりすごく使いやすいです。もちろん、無料です。

CSS Button Generator

左側の操作部分からフォントや、背景の色、マウスがボタンの上に来た時の色など指定できます。右側のプレビュー画面で確認しながら作業をしてください。

f:id:Daiki2013:20150719083712p:plain

きにいったボタンができたら、画面をスクロールしてCopy the codeと書いてある部分を見ます。このcssはボタンに関する情報を記述しています。

f:id:Daiki2013:20150719084004p:plain

そのすべてのテキストをコピーし、デザイン>カスタマイズ>デザインCSSに貼り付けします。そして、.btnを.entry-see-moreに書き換えます。

f:id:Daiki2013:20150719084348p:plain

これだけの手順で、ボタンのデザインが変更されているはずです。”変更を保存”ボタンをクリックし、画面をリフレッシュしてみてください。

f:id:Daiki2013:20150719084701p:plain

参考にしたサイト

emija.hatenablog.com

wedges.hatenablog.com

関連記事

はてなブログからwordpressへの移行の仕方【2015】

以前、はてなブログからwordpressに移行した理由を書いたので、移行の仕方についても書きます。自動化できたので、以外に簡単でした。 スポンサーリンク はてなブログエクスポート まず、はてなブログか …

ソースコード【html, css】をはてな記法で記事中に表示がどうしてもできない時の解決法

ソースコードを記事の中表示させるっていうのは、結構いろんな方が説明してくれているんですが、どのページを見て、その通りにやってみてもできなかったので、もう諦めかけていたんですが、できました! たぶん、こ …

トラッキングがインストールされていません / Tracking Not Installed (Google Analytics)

グーグルアナリティクスをはてなブログに導入しようとしてみたけれど、データがうまく反映されていないことがありました。同じ経験する人が必ずいると思ったので、シェアしておきます。 スポンサーリンク

超簡単!記事中の見出し【サブタイトル】を自動的にもっと見やすくする!

はてなブログはフォントの大きさなどもちょうどよくて気に入っているんですが、他の人のブログを読んでいると、あーこんなんいいなぁと思うことがありまして、、 そのうちの一つがこれ!サブタイトル、見出しという …

はてなブログからwordpressに移行した5つの理由。

はてなブログ、livedoorブログ、アメーバブログってブログを始める方に最適ですよね。私も以前、はてなブログを使っていたのですが、今回、wordpressに移行し、このブログをwordpressで始 …


2008年から2年間オーストラリアにワーホリ、留学。卒業後、シドニーでIT関連の仕事につく。結婚し子供が生まれたばかり。オーストラリア旅行、生活に役立つ情報を中心にシドニーからブログを書いてます。詳しいプロフィールを見る。