ストーク(STORK)導入後に絶対やっておきたい8つの画像設定

ストーク(STORK)導入後に絶対やっておきたい8つの画像設定

ストーク(STORK)をインストールしたら、まず真っ先にやっておきたいことが様々な画像の設定です。

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

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

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

2017.12.13
 
 


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

WordPressの管理画面を開きます。
サイドメニューから『外観カスタマイズ』という順にクリックして進みましょう。

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

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

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

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

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

 
 
リンゴ
ここでサイト内の色んな画像を設定できます。
 
 

サイトアイコンの設定

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

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

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

 
 
以下のような画面に切り替わります。
ここでは、ブラウザのタブやブックマークバーで表示される「サイトアイコン」を設定できます。

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

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

 
 
このブログ(RiNG OF LIFE)でいうと、ブラウザのタブで表示されているサイトアイコンがこちら。

タブ上のサイトアイコン

タブ上のサイトアイコン

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

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

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

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

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

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

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

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

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

今回は画像を新しくアップロードしたいと思います。
ファイルをアップロード』をクリックしましょう。

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

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

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

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

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

 
 

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

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

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

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

 
 
画像がメディアライブラリにアップロードされます。
ウィンドウ右下の『選択』ボタンをクリックしましょう。

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

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

 
 

ファイルを選択する場合

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

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

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

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

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

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

 
 
画像がメディアライブラリにアップロードされます。
ウィンドウ右下の『選択』ボタンをクリックしましょう。

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

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

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

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

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

 
 
ブラウザのタブもチェックしておきましょう。

タブ上のサイトアイコン

タブ上のサイトアイコン

 
 
リンゴ
きちんと反映されていますね。
 
 

スポンサーリンク

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

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

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

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

 
 
画面が切り替わります。

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

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

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

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

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

ロゴ画像

サイトのロゴ画像を設定できます。
デフォルトでは以下のようにサイト名がテキストで表示されていますが…

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

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

 
 
ロゴ画像を設定すると、以下のようにオリジナルのロゴを表示することができます。

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

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

 
 
リンゴ
サイトの顔になるので、ぜひ設定しておきましょう。
縦幅の最大サイズは43ピクセルです。
「サイトアイコン」のときと同様の方法で画像を設定しましょう。
 
 
スマホ表示の場合、画像の縦幅は最大45ピクセルに縮小されます。

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

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

 
 

ファビコン

ブラウザのタブに表示されるアイコン(ファビコン)を設定できます。
サイトアイコンとの違いはよく分かりませんが一応設定しておきましょう。

タブ上のサイトアイコン

タブ上のサイトアイコン

推奨サイズは、32×32ピクセルです。
「サイトアイコン」のときと同様の方法で画像を設定しましょう。
 
 

IE用ファビコン

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

タブ上のサイトアイコン

タブ上のサイトアイコン

推奨サイズは、16×16ピクセルです。
「サイトアイコン」のときと同様の方法で画像を設定しましょう。
 
 

アップルタッチアイコン

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

アップルタッチアイコン

アップルタッチアイコン

推奨サイズは、144×144ピクセルです。
こちらはAndroid端末では表示されません。
「サイトアイコン」のときと同様の方法で画像を設定しましょう。
 
 

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

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

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

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

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

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

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

 
 
メニューを下にスクロールすると、「[ヘッダー]ロゴレイアウト」という項目が出てきます。
こちらでロゴの位置を「左側」にするか「中央」にするか選択することができます。

ロゴレイアウト設定画面

ロゴレイアウト設定画面

左側に配置

左側に配置したロゴ

左側に配置したロゴ

中央に配置

中央に配置したロゴ

中央に配置したロゴ

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

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

スポンサーリンク

ヘッダー画像の設定

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

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

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

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

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

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

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

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

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

こちらのテキストはヘッダー画像を表示するなら必須の項目です。
日本語でも表示できますが、フォントの見た目が変わります。
 
 
次に、「日本語表示テキスト(小テキスト)」の入力欄に、先ほどの英語テキストの下に表示される補足テキストを入力します。

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

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

こちらのテキストもヘッダー画像を表示するなら必須の項目です。
 
 
2つのテキストを設定したら、ヘッダー画像を設定しましょう。
 
 

ヘッダー背景画像

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

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

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

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

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

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

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

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

設定をしなかった場合は、PC用の画像が表示されます。
「サイトアイコン」のときと同様の方法で画像を設定しましょう。
 
 

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

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

  • 縦横AUTO
  • 横100%
  • 縦100%
  • サイズ調整しない

 

縦横AUTO

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

ヘッダー背景画像 縦横AUTO

ヘッダー背景画像 縦横AUTO

 
 

横100%

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

横100%

ヘッダー背景画像 横100%

 
 

縦100%

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

ヘッダー背景画像 縦100%

ヘッダー背景画像 縦100%

 
 

サイズ調整しない

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

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

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

 
 

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

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

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

 
 

背景画像の設定

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

ストーク 背景画像

ストーク 背景画像

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

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

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

 
 
こちらの画面で背景画像を設定します。

背景画像の設定画面

背景画像の設定画面

「サイトアイコン」のときと同様の方法で画像を設定しましょう。
 
 
画像の設定は以上となります。

リンゴ
おつかれさまでした!
 
 

スポンサーリンク

まとめ

今回は、ストーク(STORK)導入後にやっておきたい8つの画像設定について解説しました。

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

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

ストーク完全マニュアル

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

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

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

スポンサーリンク








ストーク(STORK)導入後に絶対やっておきたい8つの画像設定