WordPressTHE THOR

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

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

WordPressテーマ THE THOR

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

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

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
パズルガールズ
イース6オンライン
幻獣レジェンド -百妖志-
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
ロードモバイル

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

MASAa.net

コメント