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

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

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

WordPressテーマ THE THOR

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト(THE THOR採用)
ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト(THE THOR採用)

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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
雄才三国
金銭遊戯~一発逆転の復讐劇~
ナナリズムダッシュ
イース6オンライン
ミナシゴノシゴト
リネージュ2M
魔剣伝説
龍が如く ONLINE
グランドサマナーズ

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

MASAa.net

コメント