空に向かって走る

ときどき英会話、ときどきTOEIC、ときどき便利なこと。思いついたことを書きためます。

続きを読むボタンをカスタマイズ!デザインと位置調整

いろいろなブログを見ていると「続きを読む」ボタンを設置して、記事をコンパクトにしているのを見かけます。

トップ画面に記事がつらつら続くと見にくいので私も設置することにしました。

 

私はHTMLやCSSについては薄っぺらい知識しかないので、今回もいろいろなブログからお力をお借りし、基本コピペです!

色等の細かい部分だけは自分で調整しました。

完成はこんな感じで、私の好きな緑色に変更!とボタンの位置を右側へ変更しました。

f:id:upasan:20160402230107j:plain

 私のブログで使用しているテーマは「Innocent」ですので、初期設定では黒い四角に白抜き文字です。

また、右側に設置した理由は「Z型の視線の動き」を考慮しています。

skan.in

なんとなく見やすくなる効果があると思っていますがいかがでしょう。

デザインの変更

デザインの変更のコードは、テーマ作者の半月さんのサイトにたくさんありますので是非ご確認を。

moonnote.hateblo.jp

私の使用しているコードです。

記入場所は【デザイン設定】→【デザインCSS】の中です。

 赤と青がボタンの色になるので、好きな色に変更してください。

青字はマウスオーバー時の色です。 

hover」はマウスオーバー時のクラスで、cssをいじる際によく登場するので覚えておくと便利ですよ。

.entry-content .entry-see-more{
background-color: #48D1CC;
box-shadow: 0 -3px 0 rgba(0,0,0,0.36) inset;
margin-top:20px;
}
.entry-content .entry-see-more:hover {
background-color: #20B2AA;
}

位置の調整

私は「続きを読む」ボタンを右側に設置したいので、

.entry-content .entry-see-more{
float:right;
.entry-content .entry-see-more:hover {
float:right;

「float : right;」を先程のコード内に追記すると、右側に移動できます。

左側にしたい場合は「float : left;」です。

右側と左側に設置は簡単ですが、中央に設置したい場合は、ちょっとややこしいです。

グローバルメニューを中央に設置する際、悪戦苦闘しました・・・。

 emuramemoさんの記事で詳しく紹介されているので、参考にして下さい。

www.emuramemo.com