【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;
}

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

追加CSS

これで準備は完了です。

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

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

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

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

最初にコピペしたコードの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を変更すると色が変わります。

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

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

黒色#000000
灰色#808080
赤色#ff0000
オレンジ#ffa500
黄色#ffff00
青色#0000ff
緑色#008000

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

ユニークな応用

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

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

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

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

┗(∀`*)┫=330

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

カワイィ━━d(ゝω・´★)━━ッ!

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

コン━━(✿◕∀◕)ノ゙━━チャ♪

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

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

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

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

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

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

Web解析士。Web業界歴9年。GAIQ保有。元・インフラ系SEで元・外資系社畜リーマンです。

趣味が高じてブログ飯に挑戦中です。

今日もブログを書きながら自己満足的にフカボリしていきます。

コメント

コメントする

CAPTCHA