WordPress

記事を書く前にやっておきたい3つのヘッダー設定

記事を書く前にやっておきたい3つのヘッダー設定

こんにちは!Webデザイナーのアズサ(@azusascom)です。

 

WordPressってテーマをインストールしたら、基本デザインはいじらなくても問題ありません。デフォルト設定で十分きれいなデザインですからね。

でも、ブログのタイトルやキャッチコピーは自分で設定する必要があるんです。

ヘッダーはブログの顔

ヘッダーとは、ブログやサイトの上部に表示される部分のことを言います。このブログでは、以下がヘッダー部分になりますね。

「おいでよ!ブログはじめてさん」のヘッダー

ブログやサイトで設定されてるのは基本以下3つです。

  • タイトル
  • キャッチフレーズ(サブタイトル)
  • ヘッダー画像

サイトタイトルとキャッチフレーズはすべてのページに表示されます。

タイトルやキャッチフレーズはブログの顔ともいえる部分。ヘッダーを見ただけでどんなブログなのか理解してもらえることが大切です。

また、 ヘッダーの画像部分はトップページのみに表示させることが多いですね。

画像は文字以上にインパクトを与えられます。華やかさも出るので画像も設置しておくといいですよ。

ヘッダーの設定方法

このブログではWordPressテーマ「JIN」を使ってるので、JINのカスタマイズ画面を使って説明します。

タイトル/ キャッチフレーズ(サブタイトル)

管理画面の左サイドバー

左サイドバー「外観」の「カスタマイズ」を選択します。

外観カスタマイズ画面のサイト基本設定

カスタマイズメニューが表示されるので、「サイト基本設定」をクリックします。

サイト基本設定画面

上記赤枠2つの項目に入力します。

SEO用タイトル:ブログのタイトルを入力します(必須)。

SEO用サブタイトル:ブログのキャッチフレーズやサブタイトルを入力します。

カスタマイズ画面のプレビュー

「SEO用タイトル」を入力すると、レビュー画面にタイトルが自動で挿入されます。

サイト基本設定画面

「サイト基本設定」の左矢印をクリックして、元のカスタマイズメニュー画面に戻ります。

ヘッダー画像

次に、ヘッダー画像を設定します。

サイト基本設定画面

「ヘッダー画像設定」をクリックします。

ヘッダー画像設定画面

記載されてるヘッダー画像の推奨サイズに合わせて画像を用意するといいですね。JINの場合、推奨サイズは幅2400px以上(高さは自由)。

ヘッダー画像設定画面

「画像の変更」ボタンを押します。

画像アップロード画面

「ファイルをアップロード」タブをクリックします。

ドラッグアンドドロップで画像アップロード

設定したい画像をドラッグ&ドロップします。

添付ファイルの詳細

画面右側「添付ファイルの詳細」の「代替えテキスト」欄にブログタイトルを入力します。

添付ファイルの詳細

「画像を選択」ボタンをクリックします。

プレビュー画面に画像が挿入されました。

画像にテキストを入力することもできます。ブログのキャッチコピーを画像に挿入するのもありです。

ヘッダー画像設定画面

「ヘッダー画像のキャッチフレーズ」にブログのキャッチコピーを入れてみましょう。

ヘッダー画像設定画面

画像に合わせて文字の色を変えたり、白フチ・影などを設定します。

設定を公開する

プレビュー画像を確認して、「公開」ボタンをクリックます。

ヘッダー設定は記事を書く前にやっておこう

今回はヘッダー設定についてお伝えしました。

  • タイトル・キャッチコピー・ヘッダー画像はブログの顔。
  • ヘッダーは「外観」の「カスタマイズ」で設定できる。
  • タイトルは必須。
  • ヘッダー画像にテキストを入れることもできる。

ヘッダーを決めると自分のブログに愛着がわくので、早めに設定しておくのがおすすめですよ。

ウィジェットを編集してサイドバーをカスタマイズしよう
ウィジェットを編集してサイドバーをカスタマイズしようウィジェットとは、ブログ上に設置したサイドバーやフッターを簡単に編集できる機能のことです。 例えば、簡易プロフィール・カテゴリー一覧・最近投稿した記事・Twitter投稿などを表示できます。...

 

 

ではでは。

ABOUT ME
アズサ
アズサ
逃げまくりフリーターからWebデザイナーになり、3年間Web制作会社に勤務。 現在はブログ運営とハンドメイド販売をしてます。 ブログ開設のお手伝いや、おしゃれなブログにする方法のご提供など、無料で全力サポートします。

当ブログでは、無料でWebデザインのお悩み相談を受け付けてます。

  • Webデザイン関連:画像作成・配色など
  • WordPress関連:テーマ・プラグイン・操作方法など
  • HTML・CSS関連
  • ブログを始める方法

どんな些細なことでも構いませんので、お気軽にご連絡くださいね。

お悩み受付ページはこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です