ストーク(STORK)の「ヘッダー下お知らせテキスト」のカスタマイズ方法

ストーク(STORK)の「ヘッダー下お知らせテキスト」のカスタマイズ方法

今回は、WordPressテーマ「ストーク」「ヘッダー下お知らせテキスト」のカスタマイズ方法を解説したいと思います。
 
 


「ヘッダー下お知らせテキスト」とは?

「ヘッダー下お知らせテキスト」とは、ヘッダー下に表示される以下のようなテキスト(リンク)のことです。

ヘッダー下お知らせテキスト

ヘッダー下お知らせテキスト

 
 
サイト訪問時に必ず目に入るところに表示されるので、ユーザーにおすすめのページを紹介するときなどに使うと便利な機能です。

「ヘッダー下お知らせテキスト」を表示する方法は、以下の記事を参考にしてみてください。

ストーク(STORK)|ヘッダーや記事レイアウトのカスタマイズ方法

2018.04.04
 
 

スポンサーリンク

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

子テーマを準備する

「ヘッダー下お知らせテキスト」のカスタマイズは、この記事で紹介するコードをstyle.cssにコピペするだけで簡単にできます。

カスタマイズする際は万が一に備え、必ず子テーマのstyle.cssに追記するようにしましょう。

ストークの子テーマについては、以下の記事を参考にしてみてください。

ストーク(STORK)をWordPressにインストールし子テーマを有効化する方法

2017.12.13
 
 

style.cssにコードを追記する

WordPressダッシュボードのサイドメニューにある『外観』にマウスを合わせ、さらに表示された『テーマの編集』をクリックします。

『外観』にマウスを合わせ、表示された『テーマの編集』をクリック

『外観』にマウスを合わせ、表示された『テーマの編集』をクリック

 
 
テーマの編集画面が開きます。
画面右上の「編集するテーマを選択」「stork_custom」になっていることを確認します。

「編集するテーマを選択」が「stork_custom」になっていることを確認

「編集するテーマを選択」が「stork_custom」になっていることを確認

 
 
なっていれば、style.cssにこの記事で紹介するコードを追記しましょう。

コードを追記したら『ファイルを更新』ボタンをクリックします。

『ファイルを更新』ボタンをクリック

『ファイルを更新』ボタンをクリック

 
 
これで、「ヘッダー下お知らせテキスト」にカスタマイズが反映されます。
 
 

「ヘッダー下お知らせテキスト」カスタマイズ一覧

コードを追記する準備が整ったところで、早速「ヘッダー下お知らせテキスト」のカスタマイズ例をご紹介したいと思います。

これから紹介するカスタマイズで気になったものがあれば、コードをstyle.cssにコピペしてみてください。

リンゴ
コードは自分好みにカスタマイズして使ってください。
 
 

背景色を変える

背景色を変える  
 

背景をグラデーションにする

背景をグラデーションにする  
 

背景をストライプにする

背景をストライプにする  
 

背景を画像にする

背景を画像にする  
 

テキストの色を変える

テキストの色を変える  
 

テキストのサイズを変える

テキストのサイズを変える  
 

テキスト前のアイコンを変える

テキスト前のアイコンを変える  
 

アイコンのユニコードの確認方法

アイコンの種類を示すユニコードは、FontAwesomeの各アイコンのページで確認することができます。
FontAwesomeのサイトにアクセスし、任意のアイコンのページを開きましょう。

以下のような画面が開きます。
この「Unicode:」の右に記載されているコードをコピペして使いましょう。

「Unicode:」の右に記載されているコードをコピペ

「Unicode:」の右に記載されているコードをコピペ

 
 

テキスト前のアイコンの色を変える

テキスト前のアイコンの色を変える  
 

テキストの前後にアイコンを表示する

テキストの前後にアイコンを表示する  
 

テキスト前も任意のテキストに変える

テキスト前も任意のテキストに変える  
 

テキストの前後に任意のテキストを表示する

テキストの前後に任意のテキストを表示する  
 

テキストを太字にする

テキストを太字にする  
 

テキスト前のアイコンや文字を太字にする

テキスト前のアイコンや文字を太字にする  
 

上にボーダーを引く

上にボーダーを引く

solidを変更すると線の種類を変更できます。

  • solid → 実線
  • double → 二重線(3px以上必要)
  • dashed → 破線
  • dotted → ドット
 
 

下にボーダーを引く

下にボーダーを引く  
 

下に影を付ける

下に影を付ける  
 

テキスト周りの余白を調整する

テキスト周りの余白を調整する  
 

スポンサーリンク

一括でカスタマイズする

今回ご紹介したカスタマイズ方法は、以下のように一括で設定することができます。

一括でカスタマイズしたお知らせテキスト

一括でカスタマイズしたお知らせテキスト

 
 
リンゴ
自由に組み合わせて、オリジナルのお知らせテキストを作りましょう。
 
 

まとめ

今回は、ストーク(STORK)の「ヘッダー下お知らせテキスト」のカスタマイズ方法を解説しました。

ストークユーザーも増えてきている中で、他のブログとの見た目の差別化は必須になってきています。

今回ご紹介したカスタマイズ方法を使って、あなただけのオリジナリティ溢れるブログを作りましょう。
 
 

ストーク完全マニュアル

ストークの魅力・使い方・カスタマイズ方法を余すことなく詰め込んだ完全マニュアルです。

ストーク完全マニュアルへ

 
STORK(ストーク)の魅力・使い方・カスタマイズ完全マニュアル

スポンサーリンク








ストーク(STORK)の「ヘッダー下お知らせテキスト」のカスタマイズ方法