WordPressテーマ THE THOR
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
wp.masaa.net
WordPressテーマ THE THOR（ザ・トール）の「続きを読むボタン」に関するカスタマイズについてまとめてみました。
WordPressテーマ THE THORの続きを読むボタン
WordPressテーマ THE THOR（ザ・トール）で使われている「続きを読むボタン」は次の様になっています。
「続きを読むボタン」にホバーするとこの様になります。
続きを読むボタンのカスタマイズ
「続きを読むボタン」のカスタマイズを行います。
カスタマイズ内容
「続きを読むボタン」のカスタマイズは、下記の通りです。
このカスタマイズ内容を「スタイルシート(style-user.css)」に追記します。
/************************************
** ■続きを読むボタン設定
************************************/
.btn__link.btn__link-normal {
border: 1px solid #fe619a !important; /*枠線*/
color: #fe619a; /*文字色*/
font-weight:700; /*フォント太さ*/
padding: 10px 24px 10px 16px; /*上下左右余白*/
margin-right: 15px; /*右間隔*/
}
@media only screen and (max-width: 768px) { /*スマホ表示*/
.btn__link.btn__link-normal {
padding: 8px 20px 8px 12px; /*上下左右余白*/
margin-right: 2px; /*右間隔*/
}
}
.btn a:hover{ /*ホバー時*/
background-color: #fe619a !important; /*背景色*/
color: #ffffff !important; /*文字色*/
text-decoration:none !important; /*文字装飾無し*/
font-weight:700 !important; /*フォント太さ*/
}
カスタマイズ後の続きを読むボタン
今回のカスタマイズによって、WordPressテーマ THE THOR（ザ・トール）の「続きを読むボタン」は次の様になりました。
※自分のWordPressテーマ THE THOR（ザ・トール）の設定で【続きを読む】を【Read More】に変更しています。
「続きを読むボタン」にホバーするとこの様になります。
最後に
表示位置とサイズの修正も行って、サイトのデザインに合った「続きを読むボタン」となりました。
また、スマホで表示した場合は、別途位置調整を行っております。
コメント