【THE THOR】続きを読むボタンのカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

WordPressテーマ THE THOR(ザ・トール)の「続きを読むボタン」に関するカスタマイズについてまとめてみました。

WordPressテーマ THE THORの続きを読むボタン

WordPressテーマ THE THOR(ザ・トール)で使われている「続きを読むボタン」は次の様になっています。

【THE THOR】続きを読むボタンのカスタマイズ

「続きを読むボタン」にホバーするとこの様になります。

【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】に変更しています。

【THE THOR】続きを読むボタンのカスタマイズ

「続きを読むボタン」にホバーするとこの様になります。

【THE THOR】続きを読むボタンのカスタマイズ

最後に

表示位置とサイズの修正も行って、サイトのデザインに合った「続きを読むボタン」となりました。

また、スマホで表示した場合は、別途位置調整を行っております。

コメント