あるとたたん

写真好きの前向き日誌〜只今、母になる準備中〜

よくわからないけど続きを読むボタンをおしゃれにしてみた

f:id:masami11662277:20160818231458j:plain

 

そろそろブログのデザインを自分好みにしようと思い、まずは「続きを読む」ボタンを変えました。
CSS?HTML?なんのことやら…の私がコピーアンドペースト!!で簡単にデザインを変えられたのです。大丈夫です。あなたにもできます!!

 

 

見本は3種類


①丸バージョン
あるとたたんで使ってるボタンです。矢印が乗ると背景が白くなります。


f:id:masami11662277:20160818221653j:image

 

f:id:masami11662277:20160818221701j:image

 

②角丸バージョン
オーソドックスで使いやすいと思います。
同じく、矢印が乗ると背景が白く変わります。

 

f:id:masami11662277:20160818231707j:image

f:id:masami11662277:20160818231709j:image

 

③四角バージョン

同じく、矢印が乗ると背景が白く変わります。

f:id:masami11662277:20160818222526j:image

f:id:masami11662277:20160818222532j:image

 

よくわからない英語をコピーする!

設定したいアイコンのCSSを選択してコピー!

右クリックで選択が解除されてイライラするときは、ショートカットキー(Winsowsの方Ctrl+C/Macの方command+C)だとスムーズです。

 

①丸バージョンCSS

f:id:masami11662277:20160818221653j:image

 

/*続きを読むボタン*/
.entry-content .entry-see-more {
display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  background-color: #222;
    border: 2px solid #222;
    line-height: 40px;
    color: #fff;
    -webkit-border-radius: 30px;/
 border-radius: 30px; }
 

 

②角丸バージョン

f:id:masami11662277:20160818231707j:image

/*続きを読むボタン*/
.entry-content .entry-see-more {
display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  background-color: #222;
    border: 2px solid #222;
    line-height: 40px;
    color: #fff;
    -webkit-border-radius: 10px;/
 border-radius: 10px; }
 

 

③四角バージョン

f:id:masami11662277:20160818222526j:image

/*続きを読むボタン*/
.entry-content .entry-see-more {
display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight:bold;
  background-color: #222;
    border: 2px solid #222;
    line-height: 40px;
    color: #fff;
    -webkit-border-radius: 0px;/
 border-radius: 0px; }
 

よくわからない英語を貼る場所

よくわからない英語は「CSS」と呼ばれるコードらしいです。なので、よくわからないけど「CSS」と書いてあるところに貼ればいいのか、と思ってください。

 

▼貼る場所までの経路(クリックしていくだけ)
「ダッシュボード」⇒「デザイン」⇒「工具マーク」⇒「デザインCSS

 

f:id:masami11662277:20160821164908p:plain

 

 

 

f:id:masami11662277:20160821164925p:plain

 

 

 

f:id:masami11662277:20160821164932p:plain

 

 

 

f:id:masami11662277:20160821164935p:plain

 

 

 

f:id:masami11662277:20160821164940p:plain

 

 ※分からない方はコメントで質問受付ます!いつでもどうぞ!

もっと知りたい人への参考記事

私がカスタムするときに、参考にした3記事です。

 ▼背景色変更や影付き基本的なデザインを紹介してます!

moonnote.hateblo.jp

 

▼背景や枠線が変化するデザインのボタンを紹介してます!

www.ituore.com

 

▼動きのあるボタンをたくさん紹介してます!

georges.hatenablog.jp

広告を非表示にする