ストーク(STORK)導入後に絶対やっておきたい8つの画像設定
ストーク(STORK)導入後に絶対やっておきたい8つの画像設定
WordPressテーマ「ストーク」 をインストールしたら、まず真っ先にやっておきたいことが様々な画像の設定です。

いくらデザイン性に優れたテーマだといっても、なにもカスタマイズしていないデフォルトの状態では見た目が寂しいので、ロゴやヘッダー画像を設定しておしゃれなサイトに仕上げましょう。

特に今回は

  • サイトアイコン
  • サイトロゴ画像
  • ファビコン
  • IE用ファビコン
  • アップルタッチアイコン
  • ヘッダー背景画像
  • ヘッダー背景画像(SP用)
  • サイト背景画像

の8つの設定について説明します。

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

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

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

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

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

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

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

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

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

サイトアイコンの設定

サイドメニューの『サイト基本情報』をクリックします。

サイドメニューの『サイト基本情報』をクリック

サイドメニューの『サイト基本情報』をクリック

次のような画面に切り替わります。

ストーク サイトアイコン設定画面

ストーク サイトアイコン設定画面

ここでは、ブラウザのタブやブックマークバーで表示される「サイトアイコン」を設定できます。

当ブログ(WPテーマニア)でいうと、ブラウザのタブで表示されているサイトアイコンがこちら。

タブ上のサイトアイコン

タブ上のサイトアイコン

ブックマークバーではこんな感じで表示されています。

ブックマークバーのサイトアイコン

ブックマークバーのサイトアイコン

 

これを設定することにより、複数のタブを開いている時などに識別しやすくなる利点があります。
ユーザビリティに優れたサイトは、それだけでお気に入りに追加してもらいやすくなるので、設定することをオススメします。

 「ファビコン」とも言ったりしますが、ストークではファビコンの設定は別にあるようなので、どちらも設定しておきましょう。

サイトアイコンに設定する画像は、背景付きでも透過pngでもどちらでもOKです。

『画像を選択』をクリック

「サイトアイコン」の項目の『画像を選択』ボタンをクリックします。

「サイトアイコン」の項目の『画像を選択』ボタンをクリック

「サイトアイコン」の項目の『画像を選択』ボタンをクリック

 「画像を選択」のウィンドウが開きます。

サイトアイコンにする画像をメディアライブラリから選ぶか、新しくアップロードします。

今回は画像を新しくアップロードしたいと思います。

ファイルをアップロード』をクリックしましょう。

『ファイルをアップロード』をクリック

『ファイルをアップロード』をクリック

 次のような画面に切り替わります。

画像をドラッグしてウィンドウの上にドロップするか、『ファイルを選択』ボタンを押して画像を選択しましょう。 

「画像を選択」のウィンドウ

「画像を選択」のウィンドウ

画像をドラッグ&ドロップする場合

画像をドラッグしてウィンドウの上にドロップします。

画像をドラッグしてウィンドウの上にドロップ

画像をドラッグしてウィンドウの上にドロップ

 画像がメディアライブラリにアップロードされます。

ウィンドウ右下の『選択』ボタンをクリックしましょう。

ウィンドウ右下の『選択』ボタンをクリック

ウィンドウ右下の『選択』ボタンをクリック

ファイルを選択する場合

ウィンドウ中央の『ファイルを選択』ボタンをクリックします。

ウィンドウ中央の『ファイルを選択』ボタンをクリック

ウィンドウ中央の『ファイルを選択』ボタンをクリック

 サイトアイコンにする画像を選択しましょう。

サイトアイコンにする画像を選択

サイトアイコンにする画像を選択

 画像がメディアライブラリにアップロードされます。

ウィンドウ右下の『選択』ボタンをクリックしましょう。

ウィンドウ右下の『選択』ボタンをクリック

ウィンドウ右下の『選択』ボタンをクリック

 次の画面に切り替わればサイトアイコンの設定は完了です。

サイトアイコンの設定完了画面

サイトアイコンの設定完了画面

 一応、ブラウザのタブも確認しておきましょう。

タブ上のサイトアイコン

タブ上のサイトアイコン

きちんと反映されています。

サイトロゴ・アイコンの設定

サイドメニューの『サイトロゴ・アイコン』をクリックします。

サイドメニューの『サイトロゴ・アイコン』をクリック

サイドメニューの『サイトロゴ・アイコン』をクリック

 画面が切り替わります。

サイトロゴ・アイコン設定画面

サイトロゴ・アイコン設定画面

 ここでは下記の4つの画像を設定できます。

  • ロゴ画像
  • ファビコン
  • IE用ファビコン
  • アップルタッチアイコン

それでは、それぞれの画像について解説します。

全て「サイトアイコン」の時と同様の方法で設定できます。

ロゴ画像

サイトのロゴ画像を設定できます。

デフォルトでは次のようにサイト名がテキストで表示されていますが…

ストーク デフォルトデザインのサイト

ストーク デフォルトデザインのサイト

 ロゴ画像を設定すると

ストーク ロゴ画像設定後のサイト

ストーク ロゴ画像設定後のサイト

このようにオリジナルのロゴを表示することができます。

 サイトの顔になる大事な箇所なので、ぜひ設定しておきましょう!

ちなみに、縦幅の最大サイズは43ピクセルです。

スマホ表示の場合、画像の縦幅は最大45ピクセルに縮小されます。

ストーク スマホ表示の際のロゴ

ストーク スマホ表示の際のロゴ

ロゴ画像を大きいサイズで表示したい場合は、下記の記事を参考にしてみてください。

ファビコン

ブラウザのタブに表示されるアイコン(ファビコン)を設定できます。

上記で説明した「サイトアイコン」と設定が分かれており、推奨サイズも異なるので、もしかしたら反映箇所が違うのかな?と思いながら、一応設定します。

タブ上のサイトアイコン

タブ上のサイトアイコン

推奨サイズは、32×32ピクセルです。  

IE用ファビコン

IE(インターネットエクスプローラー)用のファビコンを設定できます。

ご存知のように、インターネットの中でもIEは独自の環境なので、SafariやGooglechromeと同じ表示が反映されないことが多いです。

もちろんIEのユーザーも多いので、ここも忘れずに設定しましょう。

推奨サイズは、16×16ピクセルです。  

アップルタッチアイコン

iPhoneやiPadのホーム画面上で表示されるアイコン(アップルタッチアイコン)を設定できます。

 これを設定しておくのとしないのでは、ユーザーの印象も大きく変わるので、スマホやタブレットが主流の現代では重要なポイントです。
アップルタッチアイコン

アップルタッチアイコン

推奨サイズは、144×144ピクセルです。

こちらはAndroid端末では表示されません。 

ロゴ画像のレイアウトを変更する

上記で設定したロゴ画像は、デフォルトではヘッダーの左側に配置されていますが、ヘッダーの中央に配置することもできます。

ヘッダーの中央に配置したロゴ

ヘッダーの中央に配置したロゴ

位置については、サイトタイトルの長さやロゴの形、ヘッダー背景の画像、ユーザーに与える印象を意識して選びましょう。

カスタマイズページ左メニューの『グローバル設定』をクリックしましょう。

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

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

 メニューを下にスクロールすると、「[ヘッダー]ロゴレイアウト」という項目が出てきます。

こちらでロゴの位置を「左側」にするか「中央」にするか選択することができます。

ロゴレイアウト設定画面

ロゴレイアウト設定画面

左側に配置

左側に配置したロゴ

左側に配置したロゴ

中央に配置

中央に配置したロゴ

中央に配置したロゴ

 PC表示でロゴレイアウトを中央に設定した場合は、ロゴ画像が大きく表示されます。

横幅は最大1100ピクセル、縦幅は最大90ピクセルです。

ヘッダー画像の設定

トップページのヘッダー部分に表示される背景画像を設定できます。

ストーク トップページのヘッダー背景画像

ストーク トップページのヘッダー背景画像

 カスタマイズページ左メニューの『トップページ設定』をクリックしましょう。

左メニューの『トップページ設定』をクリック

サイドメニューの『トップページ設定』をクリック

 まず、「英語表示テキスト(大テキスト)」の入力欄に、ヘッダーに表示させる英語テキストを入力します。

ヘッダーに表示させる英語テキストを入力

ヘッダーに表示させる英語テキストを入力

こちらのテキストはヘッダー画像を表示するなら必須の項目です。

日本語でも表示できますが、フォントの見た目が変わります。

次に、「日本語表示テキスト(小テキスト)」の入力欄に、先ほどの英語テキストの下に表示される補足テキストを入力します。

英語テキストの下に表示される補足テキストを入力

英語テキストの下に表示される補足テキストを入力

こちらのテキストもヘッダー画像を表示するなら必須の項目です。

2つのテキストを設定したら、ヘッダー画像を設定しましょう。

ヘッダー背景画像

PCで表示されるヘッダー背景画像を設定できます。

PCで表示されるヘッダー背景画像

PCで表示されるヘッダー背景画像

全て「サイトアイコン」の時と同様の方法で設定できます。

ヘッダー背景画像(SP用)

スマートフォンで表示されるヘッダー背景画像を設定できます。

スマートフォンで表示されるヘッダー背景画像

スマートフォンで表示されるヘッダー背景画像

設定をしなかった場合は、PC用の画像が表示されます。

スマホとPCの画面の大きさは全然違うので、きちんと別々にデザインしたものを設定すると、サイトの‟きちんと感”が出てもっと良くなります。

これも「サイトアイコン」のときと同様の方法で画像を設定しましょう。 

ヘッダー背景画像のサイズ調整

設定したヘッダー画像は、次の4パターンでサイズを調整することができます。

縦横AUTO

選択した画像の縦横比を自動で調整します。

ヘッダー背景画像 縦横AUTO

ヘッダー背景画像 縦横AUTO

横100%

選択した画像を横の表示範囲に合わせて表示します。

横100%

ヘッダー背景画像 横100%

縦100%

選択した画像を縦の表示範囲に合わせて表示します。

ヘッダー背景画像 縦100%

ヘッダー背景画像 縦100%

サイズ調整しない

選択した画像をそのままのサイズで表示します。

ヘッダー背景画像 サイズ調整しない

ヘッダー背景画像 サイズ調整しない

ヘッダー背景画像の繰り返し設定

設定したヘッダー画像は、次の4パターンで繰り返し設定をすることができます。

  • 繰り返し表示
    選択した画像を縦・横方向に繰り返し表示します。
  • 横方向に繰り返し
    選択した画像を横方向に繰り返し表示します。
  • 縦方向に繰り返し
    選択した画像を縦方向に繰り返し表示します。
  • 繰り返ししない
    画像を繰り返さずそのまま表示させます。

背景画像の設定

サイトの背景画像を設定することができます。

ストーク 背景画像

ストーク 背景画像

 カスタマイズページ左メニューの『背景画像』をクリックしましょう。

サイドメニューの『背景画像』をクリック

サイドメニューの『背景画像』をクリック

 次の画面で背景画像を設定します。

背景画像の設定画面

背景画像の設定画面 

画像の設定は以上となります。

まとめ

今回は、WordPressテーマ「ストーク」 導入後にやっておきたい8つの画像設定について解説しました。

ストークのカスタマイズ機能を使えば、HTML・CSSなどの専門的な知識がなくても、簡単に本格的なサイトを作ることができます。

「すぐにブログを書き始めたい!」「ブログを書くことに集中したい!」という方は、早めにサイトの画像設定を済ませておきましょう。

次はサイトカラーの変更方法と、変更箇所について解説します。

スポンサーリンク

スポンサーリンク

おすすめの記事