ブログ

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

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

関連記事

簡単!横長アイキャッチ画像をStinger / wordpressの記事一覧に埋め込んで見やすくしよう!

Stinger6を愛用させてもらっています。無料とは思えない本当に使いやすいブログテンプレートなんです。 でも、たくさんの人に使われすぎているために、インストールしただけだと他の人と同じデザインになり …

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

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

簡単にはてなブログにナビゲーションバー【カテゴリー】を追加する。

ナビゲーションバーとは、ウェブサイトのトップにあり、カテゴリーに素早くアクセスさせることが可能です。ある特的の記事に興味がある人が見に来てくれた時でも、このナビゲーションバーで気になる記事だけチェック …

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

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

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

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


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