【THE THOR】ヘッダーお知らせ欄が便利になるカスタマイズ【コピペOK】

本記事の内容：
ヘッダーお知らせ欄カスタマイズ方法（文字の色やスピードなど）

皆さん、[The THOR]のヘッダーお知らせ欄を活用してますか？

ヘッダーお知らせ欄とは、文字列が右から左へ流れている↓のことです。

THORを使っていて、このお知らせ欄のスピードや表示をカスタマイズしてみたいと思ったことありませんか？

そこで本記事では、ヘッダーお知らせ欄の色々なカスタマイズについてお伝えします。

ヘッダーお知らせ欄の便利なカスタマイズ

実際のカスタマイズ内容は次のとおりです。方法は追加CSSにコピペだけ！

※コピペは個人責任となりますが、もし不具合が起きたら、コピペした部分を削除すれば元に戻るはずです。

まずはこのコードを下準備

まずは以下のコードを追加CSSにコピペして下さい。カスタマイズしたい内容に応じて、コピペしたコードを調整していきます。

追加CSSはダッシュボードの外観＞CSS編集で利用することができます。

/*お知らせ欄カスタマイズ*/
.infoHead__text {
	animation: initial;
	padding-left: 0;
	display: block;
	text-align: center;
	animation-duration: 33.5s;
	font-weight:normal;
	color: #ffd700;
}

コピペしたら、こんな感じになるはずです。

これで準備は完了です。

希望するカスタマイズに合わせて、この状態に手を加えていきます。

カスタマイズ内容に応じてコードを修正

文字が流れるスピードを変更する

まず、文字の流れるスピードを変更する場合のカスタマイズです。

最初にコピペしたコードの2行目animation: initial;から5行目のtext-align: center;までを/**/で囲みます。

/*お知らせ欄カスタマイズ*/
.infoHead__text {
	/*animation: initial;
	padding-left: 0;
	display: block;
	text-align: center;*/
	animation-duration:33.5s;
	font-weight:normal;
	color: #ffd700;
}

そして、6行目のanimation-duration:の数字で文字スピードを調整します。個人的な感覚では33.5sが最も見やすかったです。1sにするとシュールで面白いですよ（笑）。

また、7行目のfont-weight:normal;や8行目のcolor: #ffd700;は削除しても構いません。

文字を中央に固定

次は、お知らせ欄の中央部に文字を固定する場合のカスタマイズです。

最初にコピペしたコードの6行目に、/*や*/を追記して下さい。

/*お知らせ欄カスタマイズ*/
.infoHead__text {
	animation: initial;
	padding-left: 0;
	display: block;
	text-align: center;
	/*animation-duration:33.5s;*/
	font-weight:normal;
	color: #ffd700;
}

また、7行目のfont-weight:normal;や8行目のcolor: #ffd700;は削除しても構いません。

上記のカスタマイズがうまくいけば、文字列が中央に固定されてこんな感じになります。

文字の色

このカスタマイズでは、文字が流れている状態を想定しています。

中央部分に文字列を固定した状態で文字色を変更したい場合は、『文字を中央に固定』のカスタマイズと合わせて以下の変更を行ってください。

/*お知らせ欄カスタマイズ*/
.infoHead__text {
	/*animation: initial;
	padding-left: 0;
	display: block;
	text-align: center;*/
	animation-duration:33.5s;
	font-weight:normal;
	color: #ffd700;
}

8行目のcolor:の後ろの#ffd700を変更すると色が変わります。

つまり、#○○○○○○の部分が文字色を設定している部分で『カラーコード』と呼ばれています。

主なカラーコードはこんな感じです。

色の指定は、上記以外にもかなり細かく設定できますので、インターネットで『カラーコード』を検索してみてください。

ユニークな応用

さて、ここからはコードは使いません。小ネタ的なカスタマイズですのでリラックスしてご覧ください。

具体的なカスタマイズ内容は、お知らせ欄の流れる文字列を顔文字にするというものです。

気に入っった物があればコピペして使ってください。この顔文字が流れます。

まあ、完全なネタです、はい…。

┗(∀｀*)┫=３３0

o(=・ェ・=o)=3=3=3=3=3

ｶﾜｲｨ━━d(ゝω・´★)━━ｯ!

✿(。◕‿-。).:*:☆ ありがとう

ｺﾝ━━(✿◕∀◕)ﾉﾞ━━ﾁｬ♪

【THE THOR】ヘッダーお知らせ欄が便利になるカスタマイズ：まとめ

以上、ヘッダーお知らせ欄のカスタマイズでした。

ちょっとしたコードの追加で表現力がグッと上がりますね。

また、他のサイトとの区別化もできそうです。ぜひ、試してみて下さい！

当サイトではこの他にもTHE THORの色んな問題点やカスタマイズについて記事にしています。よければ、こちらの記事もご覧ください。

あわせて読みたい

【THE THOR】カスタマイズまとめ｜吹き出しなどマニアックな方法『THE THOR』のカスタマイズをまとめました。吹き出しについてのカスタマイズは好評です。若干マニアックですが、地味に便利なものばかりですので、参考がてらご覧ください。

それではまた次の記事でお会いしましょう！