THE THOR ザ・トール 【 お知らせ 】機能のカスタマイズ

当サイトは WPテーマ THE THOR を使用しています。

THE THOR はヘッダーまわりの設定が多くあります。本記事はヘッダーボトムエリアの「お知らせ」機能をカスタマイズします。

THE THOR お知らせ のスクロールを停止

通常の設定では「お知らせ」に登録した文章が右から左へ流れて電光掲示板のような表現になります。

トップページに動きが出来て良いのですが、果たして流れる文字を読むユーザーがどれほどいるのか？トップページ上部という一等地を有効活用するためスクロールを停めることにしました。

THE THOR のヘッダーボトムエリアの流れるお知らせをストップさせる方法

お知らせが流れる動きはcssを使って表現されています。そのcssを無効にします。内容的にはスクロールのアニメーションを停止して画面中央に固定表示させるものとなります。

追加cssに下記コードをコピー＆ペースト。

/*お知らせの流れストップ*/
.infoHead__text {
	animation: initial;
	padding-left: 0;
	display: block;
	text-align: center;
}

以上で完了です。

文章が固定表示になるので長い文章だと画面に表示しきれない場合があります。必ず表示を確認しましょう。

※カスタマイズは自己責任でお願いします。

流れるお知らせをストップ&装飾を追加する方法

上記の追加cssは単純にお知らせの流れをストップするものでした。

リンクがあるということがわかりづらいので装飾を足したモノが下記cssとなります。適時、必要なパーツを使用してください。

追加cssに下記コードをコピー＆ペースト。

/*お知らせの流れストップ*/
.infoHead {
	text-align: center;/*中央配置*/
}
.infoHead__text {
	display: inline;
	padding: 8px 16px; /*ボタンの余白上下、余白左右*/
	border: solid 2px rgb(255, 192, 115); /*囲み罫設定*/
	border-radius: 3px; /*囲み罫角丸*/
	background-color: #FF9514; /*ボタン部分の背景色*/
	box-shadow: 0 0 4px #A95D00; /*ボタン部分の影*/
	color: #fff; /*文字色*/
	line-height: 5rem; /*お知らせエリアの縦幅*/
}

お知らせエリアの背景色は基本設定で行っています。

囲み罫を適用すると縦幅が狭くなるのでお知らせエリアの縦幅を大きくしています。

影や囲み罫が必要ない場合は、コードを削除してください。

※カスタマイズは自己責任でお願いします。

お知らせ の基本設定

お知らせの設定は以下の場所より行います。

設定できる項目は以下の通りです・

• 表示/非表示
• 表示する文章
• 文章をクリックしたときのリンク先URL
• 文章の背景色

あとがき

お知らせ機能に関してはもっともっとやりたいことがあります。やりたいことの内容はヒ・ミ・ツ♥

お知らせ機能のカスタマイズについては実験しつつこの記事に追記をしていきたいと思います。