新サイトに移行中です。移行済みの記事は kireigo.com に遷移します

SANGOのカスタマイズ(画像編)最初に行う設定

SANGOのカスタマイス(画像編)

WordPressのインストール後に最低限の初期設定をしても、自分の望むホームページのデザインになっていません。一つ一つ設定して、理想のデザインを作りましょう。
長くなるので、2回に分けて説明します。今回は画像に関わることを中心に説明します。そのあとレイアウトやデザインなどを中心に説明します。

画像について

WordPressのブログで外観を整えるには、サイトのロゴや、アイキャッチと呼ばれるサイトや記事のイメージ画像などの設定が必要になります。必要な画像の一覧です。

  1. ロゴ画像
  2. サイトアイコン
    512×512px以上の正方形
  3. デフォルトのサムネイル画像
    600ⅹ310px以上
  4. トップページのOGP画像
    1200x630px
  5. ヘッダーアイキャッチ
  6. 記事のアイキャッチ
  7. プロフィール

画像のサイズが指定されてないものについての説明です。

  • ロゴ画像
    62×62pxで表示されます。このブログは150×150pxにしました。サイトアイコンと同じ画像を使っても大丈夫と思われます。設定により、長方形のロゴ画像にして横いっぱいに表示することもできます。
  • ヘッダーアイキャッチ
    このブログでは1600×900pxにしています。PCの場合、設定により上下がカットされます。モバイルの場合は左右がカットされます。
  • 記事のアイキャッチ
    このブログでは1200x630pxにしています。トップページのOGP画像と同じです。一般的に推奨されているサイズです。
  • プロフィール
    このブログでは400×400pxにしています。SNSのプロフィールと共用できます。
MEMO
画像サイズは、設定や利用環境によって最適値が変わるようです。上記の値は、このブログの設定に合わせて決めました。

続いて、設定方法を見ながら、それぞれの使われ方も合わせて説明します。

カスタマイズ

メニュー

まず、カスタマイズのメニューを確認します。WordPressのダッシュボードの外観です。

カスタマイズメニュー1

1.1カスタマイズ を選ぶとカスタマイズメニューが表示されます。

カスタマイズメニュー2

基本設定

1.1外観のカスタマイズ、(1)サイトの基本設定、①基本情報とロゴの設定 を選びます。ここでは次のものを設定します。

  1. サイトのタイトル
  2. キャッチフレーズ
  3. サイトの詳しい説明
  4. ロゴ画像
  5. サイトアイコン
基本情報とロゴの設定

サイトのタイトルとキャッチフレーズは、インストール後の最低限の設定をした情報がプレ表示されます。設定していない場合は入力しましょう。サイトの詳しい説明を含めて入力した内容は、Googleの検索で次のように表示されます。

Google検索結果

ロゴ画像は、ヘッダーに表示されます。

ヘッダーロゴ

サイトアイコンは、ブラウザのタブや、タブレットやモバイル端末のブックマークなどで表示されます。

サイトアイコン

トップページのOGP画像

(1)サイトの基本設定、⑤トップページのOGP画像 を選びます。

トップページのOGP画像

SNSでトップページをシェアされた際にOGP画像として使用されます。

SNSのシェア画像
twitterの例
MEMO
ここにも、「タイトル、キャッチフレーズ、サイトの詳しい説明」が表示されます。

パブリッシャー

(1)サイトの基本設定、⑥パブリッシャー を選びます。ここでは次のものを設定します。

  1. 発行組織名
  2. 発行組織を表す画像
  3. 著作権者名
パブリッシャー

このサイトは、アイシースピン(icSPEng) にしていますが、発行組織名がない場合は、サイト名を使うと良いでしょう。ロゴには、サイトのロゴ画像を使っています。

使われてるのが分かるのは著作権者名です。

コピーライト画像

ひと休み ショコラをどうぞ

アイキャッチ

ヘッダーアイキャッチ

(5)ヘッダーアイキャッチ を選びます。

ヘッダーアイキャッチ

ヘッダーアイキャッチ画像の表示と横幅制限にチェックを入れています。このブログでは、文字を入れた画像を使っていますが、設定により、文字なし画像に文字やボタンの表示をさせることもできます。
ブログのトップページに次のように表示されます。

トップページ

記事のアイキャッチ

外観ではありませんが、関連する記事のアイキャッチについて説明します。

記事アイキャッチ

記事の「しばらくお待ちください。」がアイキャッチありで、「はじまり」がアイキャッチなしです。サイドバーの人気記事や新着記事を見ると分かりますが、アイキャッチの有無でこんなにイメージが変わります。一つ上のヘッダーアイキャッチの画像を見ると、アイキャッチがない場合、記事一覧でコーヒーカップの画像になっています。

MEMO
(1)サイトの基本設定の②デフォルトのサムネイル画像 を設定すると、アイキャッチなしの記事にそれが使われます。
MEMO
最初はアイキャッチという言葉がピンとこなかったのですが、これを見るとしっくりします。

プロフィール

プロフィール画像の設定は、2.ユーザーのプロフィールから行います。

プロフィール設定1
プロフィール設定2

ウイジェットにプロフィールが用意されているので、サイドバーなどに設定するとプロフィールが表示されます。

プロフィール画像
MEMO
写真の設定前なので、設定すれば正しく表示されます。なお、このブログはウイジェットができる前だったので、このプロフィールは使っていません。

画像編はこれで終わりです。引き続き、デザイン編をご覧ください。

SANGOのカスタマイズ(デザイン編)SANGOのカスタマイズ(デザイン編)最初に行う設定2
SANGOのカスタマイズ
阿蘇山遊覧飛行 熊本