本記事の内容：
ヘッダーお知らせ欄カスタマイズ方法（文字の色やスピードなど）
皆さん、[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 |
色の指定は、上記以外にもかなり細かく設定できますので、インターネットで『カラーコード』を検索してみてください。
ユニークな応用
さて、ここからはコードは使いません。小ネタ的なカスタマイズですのでリラックスしてご覧ください。
具体的なカスタマイズ内容は、お知らせ欄の流れる文字列を顔文字にするというものです。
気に入っった物があればコピペして使ってください。この顔文字が流れます。
まあ、完全なネタです、はい…。
┗(∀｀*)┫=３３0
o(=・ェ・=o)=3=3=3=3=3
ｶﾜｲｨ━━d(ゝω・´★)━━ｯ!
✿(。◕‿-。).:*:☆ ありがとう
ｺﾝ━━(✿◕∀◕)ﾉﾞ━━ﾁｬ♪
【THE THOR】ヘッダーお知らせ欄が便利になるカスタマイズ：まとめ
以上、ヘッダーお知らせ欄のカスタマイズでした。
ちょっとしたコードの追加で表現力がグッと上がりますね。
また、他のサイトとの区別化もできそうです。ぜひ、試してみて下さい！
当サイトではこの他にもTHE THORの色んな問題点やカスタマイズについて記事にしています。よければ、こちらの記事もご覧ください。
それではまた次の記事でお会いしましょう！
コメント