ストーク(STORK)のヘッダーや記事レイアウトのカスタマイズ方法|初心者向けマニュアル
ストーク(STORK)のヘッダーや記事レイアウトのカスタマイズ方法|初心者向けマニュアル
WordPressテーマ「ストーク」 の設定、今回は主にヘッダー部分や記事一覧のレイアウトに関わる「グローバル設定」について解説します。

ストークのインストールがお済みでない方は、下記の記事を参考にしてみてください。

ストーク カスタマイズページにアクセス

WordPressの管理画面を開きます。

サイドメニューから『外観カスタマイズ』という順にクリックして進みましょう。

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

 ストークのカスタマイズページが開きます。

ストークのカスタマイズページ

ストークのカスタマイズページ

 サイドメニューの『グローバル設定』をクリックし、設定画面を開きましょう。

サイドメニューの『グローバル設定』をクリック

サイドメニューの『グローバル設定』をクリック

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

ヘッダー下にお知らせテキスト(テキストリンク)を表示することができます。

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

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

 まず、「ヘッダー下お知らせテキスト」の入力欄に表示させたいテキストを入力しましょう。

表示させたいテキストを入力

表示させたいテキストを入力

 次に、「ヘッダー下お知らせリンク」の入力欄にリンク先のURLを入力します。

リンク先のURLを入力

リンク先のURLを入力

 これで、ヘッダー下にテキストリンクが表示されます。

リンクを別タブで開く

リンクを別タブで開く(_target設定)』のチェックボックスにチェックを入れると、上記で設定したテキストリンクが別タブで開かれるようになります。

『リンクを別タブで開く(_target設定)』のチェックボックスにチェック

『リンクを別タブで開く(_target設定)』のチェックボックスにチェック

サイト内検索ボタンを非表示

ヘッダーにあるサイト内検索ボタンを非表示したい場合は、『[ヘッダー]サイト内検索ボタンを非表示にする』のチェックボックスにチェックを入れます。

『[ヘッダー]サイト内検索ボタンを非表示にする』のチェックボックスにチェック

『[ヘッダー]サイト内検索ボタンを非表示にする』のチェックボックスにチェック

検索ボタンが非表示になる

検索ボタンが非表示になる

サイトディスクリプションを表示

[ヘッダー]サイトディスクリプションを表示する』のチェックボックスにチェックを入れると、ヘッダー上部に「サイトの簡単な説明(サイトディスクリプション)」が表示されます。

『[ヘッダー]サイトディスクリプションを表示する』のチェックボックスにチェック

『[ヘッダー]サイトディスクリプションを表示する』のチェックボックスにチェック

サイトディスクリプションが表示される

サイトディスクリプションが表示される

テキストロゴサイズの変更

サイトのロゴをテキストにしている場合、フォントサイズを変更することができます。

フォントサイズは下記の3パターンから選べます。

小さめ

テキストロゴサイズ 小さめ

テキストロゴサイズ 小さめ

標準

テキストロゴサイズ 標準

テキストロゴサイズ 標準

大きめ

テキストロゴサイズ 大きめ

テキストロゴサイズ 大きめ

ロゴレイアウトの変更

PC表示の場合のロゴの位置を変更できます。

下記の2箇所いずれかに設定可能です。

左側に配置

ロゴレイアウト 左側に配置

ロゴレイアウト 左側に配置

中央に配置

ロゴレイアウト 中央に配置

ロゴレイアウト 中央に配置

  スマホでは設定に関わらず、「中央に配置」で表示されます。

ヘッダー背景の設定

ヘッダー背景の横幅を変更できます。

横幅は下記の2パターンから選べます。

コンテンツ幅

コンテンツ幅

コンテンツ幅

フルサイズ(横幅いっぱい)

フルサイズ(横幅いっぱい)

フルサイズ(横幅いっぱい)

メインカラム表示位置の変更

メインカラムの表示位置を変更できます。

下記の2パターンから選べます。 

メインカラム左側(デフォルト)

メインカラム左側(デフォルト)

メインカラム左側(デフォルト)

メインカラム右側

メインカラム右側

メインカラム右側

アニメーション機能

サイト全体のアニメーション機能を切り替えることができます。

  • アニメーションON
  • アニメーションOFF

ONにすると、ヘッダー画像で設定したテキストやフッター部分がゆっくりと表示されるようになります。

パンくずナビを非表示

[全体]パンくずナビを表示しない』のチェックボックスにチェックを入れると、パンくずナビが非表示になります。

『[全体]パンくずナビを表示しない』のチェックボックスにチェック

『[全体]パンくずナビを表示しない』のチェックボックスにチェック

パンくずナビが非表示になる

パンくずナビが非表示になる

[PC]トップページ記事レイアウトの変更

PCで見た場合の、トップページに表示される記事一覧のレイアウトを変更できます。

レイアウトは下記の4パターンから選べます。

シンプル

[PC]記事レイアウト シンプル

[PC]記事レイアウト シンプル

カード型

[PC]記事レイアウト カード型

[PC]記事レイアウト カード型

マガジン型

[PC]記事レイアウト マガジン型

[PC]記事レイアウト マガジン型

ビッグ

[PC]記事レイアウト ビッグ

[PC]記事レイアウト ビッグ

[SP]トップページ記事レイアウトの変更

スマホで見た場合の、トップページに表示される記事一覧のレイアウトを変更できます。

こちらも下記の4パターンから選べます。

シンプル

[SP]記事レイアウト シンプル

[SP]記事レイアウト シンプル

カード型

[SP]記事レイアウト カード型

[SP]記事レイアウト カード型

マガジン型

[SP]記事レイアウト マガジン型

[SP]記事レイアウト マガジン型

ビッグ

[SP]記事レイアウト ビッグ

[SP]記事レイアウト ビッグ

[PC]その他一覧ページ記事レイアウト

PCで見た場合の、トップページ以外で表示される記事一覧のレイアウトを変更できます。

  • シンプル
  • カード型
  • マガジン型
  • ビッグ

表示のされ方は「[PC]トップページ記事レイアウトの変更」と一緒です。

[SP]その他一覧ページ記事レイアウト

スマホで見た場合の、トップページ以外で表示される記事一覧のレイアウトを変更できます。

  • シンプル
  • カード型
  • マガジン型
  • ビッグ

表示のされ方は「[SP]トップページ記事レイアウトの変更」と一緒です。

まとめ

今回は、WordPressテーマ「ストーク」 のグローバル設定について詳しく解説しました。

「ヘッダー下お知らせテキスト」を設定すれば、ユーザーに見てもらいたいページへのリンクを目立たせて表示することができますし、ロゴや記事一覧のレイアウトを変えればサイトの印象もガラッと変わります。

グローバル設定には重要な設定項目がたくさんありますので、面倒臭がらず隅々までチェックしておきましょう。

スポンサーリンク

スポンサーリンク

おすすめの記事