【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連THE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ THE THOR

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
ガジェット好きのmasaaが情報発信する2nd 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】続きを読むボタンのカスタマイズ

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
暁ノ天刃録
恋下統一
レジェンド オブ ハーン~蒼き狼の覇業
ザ・グランドマフィア
イース6 オンライン〜ナピシュテムの匣〜
リネージュ2M
魔剣伝説
ライフアフター
黒い砂漠 MOBILE
グランドサマナーズ
ロードモバイル
ゴールデンホイヤースロット
駅メモ!-ステーションメモリーズ!

MASAa.net

コメント