インストールしたら、まず真っ先にやっておきたいことが様々な画像の設定です。いくらデザイン性に優れたテーマだといっても、なにもカスタマイズしていないデフォルトの状態では見た目が寂しいので、ロゴやヘッダー画像を設定しておしゃれなサイトに仕上げましょう。今回はサイトアイコンサイトロゴ画像ファビコンIE用ファビコンアップルタッチアイコンヘッダー背景画像ヘッダー背景画像(SP用)サイト背景画像の8つの設定について説明します。ストークのインストールがお済みでない方は、下記の記事を参考にしてみてください。ストーク(STORK)をWordPressにインストールし子テーマを有効化する方法|初心者向けマニュアル2019.9.24「ストーク(STORK)」をWordPressにインストールする方法を解説しています。子テーマを有効化するので、親テーマのアップデート時に起こるカスタマイズの初期化を回避することができます。カスタマイズページにアクセスWordPressの管理画面を開きます。サイドメニューから『外観→カスタマイズ』という順にクリックして進みましょう。サイドメニューから『外観→カスタマイズ』という順にクリックして進むストークのカスタマイズページが開きます。ストークのカスタマイズページサイトアイコンの設定サイドメニューの『サイト基本情報』をクリックします。サイドメニューの『サイト基本情報』をクリック次のような画面に切り替わります。サイトアイコン設定画面ここでは、ブラウザのタブやブックマークバーで表示される「サイトアイコン」を設定できます。当ブログ(WPテーマニア)でいうと、ブラウザのタブで表示されているサイトアイコンがこちら。タブ上のサイトアイコンブックマークバーではこんな感じで表示されています。ブックマークバーのサイトアイコンこれを設定することにより、複数のタブを開いている時などに識別しやすくなる利点があります。ユーザビリティに優れたサイトは、それだけでお気に入りに追加してもらいやすくなるので、設定することをオススメします。「ファビコン」とも言ったりしますが、ストークではファビコンの設定は別にあるようなので、どちらも設定しておきましょう。サイトアイコンに設定する画像は、背景付きでも透過pngでもどちらでもOKです。『画像を選択』をクリック「サイトアイコン」の項目の『画像を選択』ボタンをクリックします。「サイトアイコン」の項目の『画像を選択』ボタンをクリック「画像を選択」のウィンドウが開きます。サイトアイコンにする画像をメディアライブラリから選ぶか、新しくアップロードします。今回は画像を新しくアップロードしたいと思います。『ファイルをアップロード』をクリックしましょう。『ファイルをアップロード』をクリック次のような画面に切り替わります。画像をドラッグしてウィンドウの上にドロップするか、『ファイルを選択』ボタンを押して画像を選択しましょう。画像をドラッグしてウィンドウの上にドロップします。画像をドラッグしてウィンドウの上にドロップ画像がメディアライブラリにアップロードされます。ウィンドウ右下の『選択』ボタンをクリックしましょう。ウィンドウ右下の『選択』ボタンをクリックファイルを選択する場合ウィンドウ中央の『ファイルを選択』ボタンをクリックします。ウィンドウ中央の『ファイルを選択』ボタンをクリックサイトアイコンにする画像を選択しましょう。画像がメディアライブラリにアップロードされます。ウィンドウ右下の『選択』ボタンをクリックしましょう。ウィンドウ右下の『選択』ボタンをクリック次の画面に切り替わればサイトアイコンの設定は完了です。ブラウザのタブも確認しておきましょう。タブ上のサイトアイコンきちんと反映されています。サイトロゴ・アイコンの設定サイドメニューの『サイトロゴ・アイコン』をクリックします。サイドメニューの『サイトロゴ・アイコン』をクリック画面が切り替わります。サイトロゴ・アイコン設定画面ここでは下記の4つの画像を設定できます。ロゴ画像ファビコンIE用ファビコンアップルタッチアイコンそれでは、それぞれの画像について解説します。全て「サイトアイコン」の時と同様の方法で設定できます。ロゴ画像サイトのロゴ画像を設定できます。ロゴ画像設定後のサイトこのようにオリジナルのロゴを表示することができます。サイトの顔になる大事な箇所なので、ぜひ設定しておきましょう!ちなみに、縦幅の最大サイズは43ピクセルです。スマホ表示の場合、画像の縦幅は最大45ピクセルに縮小されます。スマホ表示の際のロゴロゴ画像を大きいサイズで表示したい場合は、下記の記事を参考にしてみてください。ストーク(STORK)ロゴ画像を大きいサイズで表示|中級者向けカスタマイズ2019.10.3WordPressテーマ「ストーク(STORK)」のロゴ画像の大きさを調整する方法を解説しています。style.cssにコードを追記するという簡単な方法で出来ますので、ストークのロゴ画像のサイズでお悩みの方は、ぜひ参考にしてみてください。...ファビコンブラウザのタブに表示されるアイコン(ファビコン)を設定できます。上記で説明した「サイトアイコン」と設定が分かれており、推奨サイズも異なるので、もしかしたら反映箇所が違うのかな?と思いながら、一応設定します。タブ上のサイトアイコン推奨サイズは、32×32ピクセルです。IE用ファビコンIE(インターネットエクスプローラー)用のファビコンを設定できます。ご存知のように、インターネットの中でもIEは独自の環境なので、SafariやGooglechromeと同じ表示が反映されないことが多いです。IEのユーザーも多いので、ここも忘れずに設定しましょう。推奨サイズは、16×16ピクセルです。アップルタッチアイコンiPhoneやiPadのホーム画面上で表示されるアイコン(アップルタッチアイコン)を設定できます。これを設定しておくのとしないのでは、ユーザーの印象も大きく変わるので、スマホやタブレットが主流の現代では重要なポイントです。アップルタッチアイコン推奨サイズは、144×144ピクセルです。こちらはAndroid端末では表示されません。ロゴ画像のレイアウトを変更する上記で設定したロゴ画像は、デフォルトではヘッダーの左側に配置されていますが、ヘッダーの中央に配置することもできます。ヘッダーの中央に配置したロゴ位置については、サイトタイトルの長さやロゴの形、ヘッダー背景の画像、ユーザーに与える印象を意識して選びましょう。カスタマイズページ左メニューの『グローバル設定』をクリックしましょう。サイドメニューの『グローバル設定』をクリックメニューを下にスクロールすると、「[ヘッダー]ロゴレイアウト」という項目が出てきます。こちらでロゴの位置を「左側」にするか「中央」にするか選択することができます。中央に配置したロゴPC表示でロゴレイアウトを中央に設定した場合は、ロゴ画像が大きく表示されます。横幅は最大1100ピクセル、縦幅は最大90ピクセルです。ヘッダー画像の設定トップページのヘッダー部分に表示される背景画像を設定できます。トップページのヘッダー背景画像カスタマイズページ左メニューの『トップページ設定』をクリックしましょう。サイドメニューの『トップページ設定』をクリックまず、「英語表示テキスト(大テキスト)」の入力欄に、ヘッダーに表示させる英語テキストを入力します。ヘッダーに表示させる英語テキストを入力こちらのテキストはヘッダー画像を表示するなら必須の項目です。日本語でも表示できますが、フォントの見た目が変わります。次に、「日本語表示テキスト(小テキスト)」の入力欄に、先ほどの英語テキストの下に表示される補足テキストを入力します。英語テキストの下に表示される補足テキストを入力こちらのテキストもヘッダー画像を表示するなら必須の項目です。2つのテキストを設定したら、ヘッダー画像を設定しましょう。ヘッダー背景画像PCで表示されるヘッダー背景画像を設定できます。全て「サイトアイコン」の時と同様の方法で設定できます。ヘッダー背景画像(SP用)スマートフォンで表示されるヘッダー背景画像を設定できます。設定をしなかった場合は、PC用の画像が表示されます。スマホとPCの画面の大きさは全然違うので、きちんと別々にデザインしたものを設定すると、サイトの‟きちんと感”が出てもっと良くなります。これも「サイトアイコン」のときと同様の方法で画像を設定しましょう。設定したヘッダー画像は、次の4パターンでサイズを調整することができます。縦横AUTO横100%縦100%サイズ調整しない縦横AUTO選択した画像の縦横比を自動で調整します。縦横AUTO横100%選択した画像を横の表示範囲に合わせて表示します。横100%縦100%選択した画像を縦の表示範囲に合わせて表示します。縦100%サイズ調整しない選択した画像をそのままのサイズで表示します。設定したヘッダー画像は、次の4パターンで繰り返し設定をすることができます。選択した画像を縦・横方向に繰り返し表示します。横方向に繰り返し選択した画像を横方向に繰り返し表示します。縦方向に繰り返し選択した画像を縦方向に繰り返し表示します。繰り返ししない画像を繰り返さずそのまま表示させます。背景画像の設定サイトの背景画像を設定することができます。背景画像カスタマイズページ左メニューの『背景画像』をクリックしましょう。サイドメニューの『背景画像』をクリック次の画面で背景画像を設定します。画像の設定は以上となります。導入後にやっておきたい8つの画像設定について解説しました。ストークのカスタマイズ機能を使えば、HTML・CSSなどの専門的な知識がなくても、簡単に本格的なサイトを作ることができます。「すぐにブログを書き始めたい!」「ブログを書くことに集中したい!」という方は、早めにサイトの画像設定を済ませておきましょう。次はサイトカラーの変更方法と、変更箇所について解説します。ストーク(STORK)サイトカラーの変更方法と変更箇所を徹底解説|初心者向けマニュアル2019.9.29ストーク(STORK)でサイトカラーを変更する方法と、全てのカラー変更箇所を解説しています。ストークでは、サイトの背景色、ヘッダー色、サイドバー色、フッター色など様々な項目の色を簡単に変更することができます。HTML・CSSの知識も必要ないので、納得いくまで色々なカラーを試してみましょう。賢威8でファビコンを表示する方法|初心者向けマニュアルDiverでピックアップスライダーを表示する|初心者向けマニュアルおすすめの記事ストークストーク(STORK)ロゴ画像を大きいサイズで表示|中級者向けカスタマイズWordPressテーマ「ストーク(STORK)」のロゴ画像の大きさを調整する方法を解説しています。style.cssにコードを追記するとい...SANGOSANGOのタイトルテキスト・ロゴ画像の大きさを変更する|中級者向けカスタマイズ今回は、SANGOのタイトルテキストとロゴ画像の大きさを変更する方法を解説します。THOR(ザ・トール)でサイトロゴを設定する方法を解説しています。THORでは、サイトロゴの高さ調整やサイトロゴ周りのカスタ...賢威8賢威8でグローバルメニューを表示する方法|初心者向けマニュアル賢威8でグローバルメニューを表示する方法を解説しています。グローバルメニューを表示すれば、サイトの見栄えが良くなるだけでなく、訪れたユーザー...SANGOSANGOのロゴ画像とサイトアイコンの設定方法|初心者向けマニュアルSANGOのロゴ画像とサイトアイコンの設定方法を解説しています。Analyticsのアクセス解析コードを設置する方法を解説しています。簡単にできるので、...ストークストーク(STORK)の「ヘッダー下お知らせテキスト」のカスタマイズ方法|中級者向けカスタマイズ今回は、の「ヘッダー下お知らせテキスト」のカスタマイズ方法を解説したいと思います。「ヘッダー下お知ら...SANGOSANGOでサイトの基本情報を設定する方法|初心者向けマニュアルSANGOでサイトの基本情報を設定する方法を解説しています。THORストーク賢威8SEARCH。