ブログ

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

投稿日: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

関連記事

私が使っているブログ設定、テンプレート選び、デザイン、プラグイン等を公開します!

ブログの設定、デザイン、会社選びなどについて質問されることが多くなってきたのでここでまとめておきます。 ブログを初めて間もない方、初めようと思っている方、分からないことが多いと思うのでなるべく丁寧に解 …

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

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

超簡単!Facebookページをwordpressに表示するには

wordpressはてなブログと違い、孤立しがち。TwitterやFacebookなどのSMSと連携していことで、閲覧数を増やすことが可能です。 ということで、以下のようなFacebookをページをサ …

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

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

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

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

  • 2008年から2年間オーストラリアに留学。卒業後、シドニーでIT関連の仕事につく。留学中に出会った彼女と結婚しオーストラリアで生息中。ブログは「オーストラリア生活の予備知識」として、オーストラリア生活に役立つ情報を中心にブログを書いてます。 詳しいプロフィールはこちら!!