そろそろブログのデザインを自分好みにしようと思い、まずは「続きを読む」ボタンを変えました。
CSS？HTML？なんのことやら…の私がコピーアンドペースト！！で簡単にデザインを変えられたのです。大丈夫です。あなたにもできます！！
見本は3種類
①丸バージョン
あるとたたんで使ってるボタンです。矢印が乗ると背景が白くなります。
②角丸バージョン
オーソドックスで使いやすいと思います。
同じく、矢印が乗ると背景が白く変わります。
③四角バージョン
同じく、矢印が乗ると背景が白く変わります。
よくわからない英語をコピーする！
設定したいアイコンのCSSを選択してコピー！
右クリックで選択が解除されてイライラするときは、ショートカットキー（Winsowsの方Ctrl+C／Macの方command+C）だとスムーズです。
①丸バージョンCSS
/*続きを読むボタン*/
.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; }
②角丸バージョン
/*続きを読むボタン*/
.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; }
③四角バージョン
/*続きを読むボタン*/
.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」
※分からない方はコメントで質問受付ます！いつでもどうぞ！
もっと知りたい人への参考記事
私がカスタムするときに、参考にした3記事です。
▼背景色変更や影付き基本的なデザインを紹介してます！
▼背景や枠線が変化するデザインのボタンを紹介してます！
▼動きのあるボタンをたくさん紹介してます！