【THE THOR】見出しデザインの内側ボーダー(ワイド)のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）

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

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

wp.masaa.net

MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト

wp.masaa.me

今回は、WordPressテーマ THE THOR（ザ・トール）での「見出しデザインの内側ボーダー(ワイド)」のカスタマイズ についてまとめてみました。

見出しデザインの内側ボーダー(ワイド)

WordPressテーマ THE THOR（ザ・トール）の「見出しデザインの内側ボーダー(ワイド)」のスタイルは、次の様になっています。

ワイドに広がる見出しで、存在感の有る見出しとなっています。

この「見出しデザインの内側ボーダー(ワイド)」を見て、左端の中央にある長方形部分を点滅させたいと思ってしまいました。

と言うことで、「見出しデザインの内側ボーダー(ワイド)」の左端の中央にある長方形部分を点滅させるカスタマイズを行いたいと思います。

見出しデザインの内側ボーダー(ワイド)のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）での「見出しデザインの内側ボーダー(ワイド)」のカスタマイズを行います。

カスタマイズ内容

「コントローラー」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を追記する形でOKです。

.heading-widgetwide::after { /*見出しデザインの内側ボーダー(ワイド)*/
	animation:blinking 1.2s ease-in infinite alternate!important; /*アニメーション点滅間隔1.2秒設定*/
}
@keyframes blinking {
	0% {
		opacity: 0.1;
	}
	81% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

カスタマイズ後の見出しデザインの内側ボーダー(ワイド)

今回のカスタマイズによって「見出しデザインの内側ボーダー(ワイド)」のスタイルは、次の様になりました。

見た目変わってないように見えるのですが、左端の中央にある長方形部分が点滅しています。

実際の動作は、ZMASAa.blogまたはMASAa.blogのフッターの「見出しデザインの内側ボーダー(ワイド)」でご確認下さい。

最後に

「見出しデザインの内側ボーダー(ワイド)」の左端の中央にある長方形部分を点滅させるだけのカスタマイズで特に変化ないのですが、自己満足には十分です。