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

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

WordPressテーマ THE THOR

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

The main blog of masaa powered by WordPress.
スマホ、ガジェット、食玩などの記事を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】続きを読むボタンのカスタマイズ

最後に

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

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

コメント