本記事の内容:
ヘッダーお知らせ欄カスタマイズ方法(文字の色やスピードなど)
皆さん、[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
を変更すると色が変わります。
つまり、#○○○○○○の部分が文字色を設定している部分で『カラーコード』と呼ばれています。
主なカラーコードはこんな感じです。
黒色 | #000000 |
灰色 | #808080 |
赤色 | #ff0000 |
オレンジ | #ffa500 |
黄色 | #ffff00 |
青色 | #0000ff |
緑色 | #008000 |
色の指定は、上記以外にもかなり細かく設定できますので、インターネットで『カラーコード』を検索してみてください。
ユニークな応用
さて、ここからはコードは使いません。小ネタ的なカスタマイズですのでリラックスしてご覧ください。
具体的なカスタマイズ内容は、お知らせ欄の流れる文字列を顔文字にするというものです。
気に入っった物があればコピペして使ってください。この顔文字が流れます。
まあ、完全なネタです、はい…。
┗(∀`*)┫=330
o(=・ェ・=o)=3=3=3=3=3
カワイィ━━d(ゝω・´★)━━ッ!
✿(。◕‿-。).:*:☆ ありがとう
コン━━(✿◕∀◕)ノ゙━━チャ♪
【THE THOR】ヘッダーお知らせ欄が便利になるカスタマイズ:まとめ
以上、ヘッダーお知らせ欄のカスタマイズでした。
ちょっとしたコードの追加で表現力がグッと上がりますね。
また、他のサイトとの区別化もできそうです。ぜひ、試してみて下さい!
当サイトではこの他にもTHE THORの色んな問題点やカスタマイズについて記事にしています。よければ、こちらの記事もご覧ください。
それではまた次の記事でお会いしましょう!
コメント