THORで左へ流れる「ヘッダーお知らせ」のスピードや文字サイズを変更する方法

※当サイトにはプロモーションが含まれています。

クライアント

THORのヘッダー部分に表示される「ヘッダーお知らせ」のスピードを遅くしてくれ！

にゃテック

おけまるだにゃ。

ワードプレステーマのTHE THOR（ザ・トール）には、ヘッダー部分にはテキストによる“お知らせ”をアニメーション表示させることができます。

ヘッダーお知らせ

しかし、THORの設定からは、文章が流れるスピードや、文字の大きさを変更することはできません。

そこで今回は、THOR（トール）の「ヘッダーお知らせ」の文字の流れるスピードや、文字の大きさを変更するカスタマイズ方法をまとめてみました。

この記事の目次

左に流れる「ヘッダーお知らせ」の設定について
- ①「ヘッダーお知らせ」の設定箇所
- ②ヘッダーお知らせの表示設定
「ヘッダーお知らせ」のカスタマイズ方法
- .infoHead__textの各スタイル解説
- カスタマイズするコードの実際例

左に流れる「ヘッダーお知らせ」の設定について

THOR（トール）の機能にある、ヘッダー部分にテキストを左に流れるようにする「ヘッダーお知らせ」の設定箇所についてです。

①「ヘッダーお知らせ」の設定箇所

左メニューにある

カスタマイズ > 共通エリア設定[THE] > ヘッダーボトムエリア設定[検索窓・お知らせ]

を選択。

②ヘッダーお知らせの表示設定

THORに用意されている「ヘッダーお知らせの表示設定」では、以下が設定可能です。

お知らせとして表示する文章を入力
リンク先URLを入力
背景色を指定

にゃのらいと

テキストを表示するには、“ヘッダーお知らせを表示するか選択”の設定を「表示」にする必要があるにゃ。

「ヘッダーお知らせ」のカスタマイズ方法

THORで、左側へ流れる「ヘッダーお知らせ」のカスタマイズ方法についてです。

.infoHead__textの各スタイル解説

THORの「ヘッダーお知らせ」のテキストに関する初期設定のCSSは下記のようになっています。

.infoHead__text {
padding-left: 100%;
white-space: nowrap;
display: inline-block;
animation: marquee 10s linear 0s infinite;
font-weight: 700;
color: #fff;
height: 3rem;
line-height: 3rem;
}

このCSSについて、それぞれのプロパティが何をしているのかを説明します。

プロパティ名	説明
padding-left: 100%;	要素の左側に100%分の余白を追加しています。これにより、テキストの表示開始位置が親要素の外（右端）にずれ、アニメーションで左から流れてくるような効果を作れます。
white-space: nowrap;	テキストの折り返しを無効にします。1行で表示し続けることで、スクロールが可能になります。
display: inline-block;	white-space: nowrap; と合わせて、テキストがインラインボックスとして機能し、横長に展開されるようにします。
animation: marquee 10s linear 0s infinite;	@keyframes marquee という名前のアニメーションを適用します。10秒かけて動き、linear（等速）、0s（遅延なし）、infinite（無限ループ）で動作します。
font-weight: 700;	テキストを太字（bold）にします。
color: #fff;	テキストの色を白に設定します。
height: 3rem;	要素の高さを3remに設定します（remはルートフォントサイズ基準）。
line-height: 3rem;	テキストの行の高さを3remにして、垂直中央揃えの効果を持たせています。

これらのプロパティの数値や設定を変更することで、色々な装飾をすることができます。

カスタマイズするコードの実際例

たとえば、文字のスピードを遅くしたい場合は、追加CSSに次のように記述します。

にゃテック

追加CSSへの記述方法はこちらで説明しているにゃ

.infoHead__text {
animation: marquee 20s linear 0s infinite;
}

文字のサイズを大きくしたい場合は、次のように記述します。

.infoHead__text {
font-size: 1.8rem;
}

次のように記述すると、電光掲示板のように、テキストが光って見えるようにすることもできます。

.infoHead__text {
color: #ffd700;
text-shadow:
0 0 5px #ffd700,
0 0 10px #ffd700,
0 0 15px #ffa500;
}

適用すると次のようになります。

ヘッダーお知らせの表示

背景色（黒）は、THORに用意されている「ヘッダーお知らせの表示設定」から変更します。

クライアント

流れてくるテキストを、画面の真ん中で止めてくれ！

にゃテック

それは難しいにゃ

流れてくるテキストを真ん中で止めるには、要素の幅を計算しなければいけないので、CSSのみで実現するのは難しいと思います。

そのため、JavaScriptを使う必要がありますが、ちょっと大変そうなので今回は割愛します。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

	Windows	Mac
Google Chrome	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Microsoft Edge	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Mozilla Firefox	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Safari(Mac)	‐	【Command＋Option＋R】