【カスタマイズ入門②】ヘッダーはサイトの顔!『ヘッダー編集』であなたのブログの魅力を発信しよう!

シェアする

  • このエントリーをはてなブックマークに追加
SNSフォローボタン

フォローする

ブログのカスタマイズで重要なのは『検索者目線』でサイトが構築できているかです。

初心者のブログカスタマイズは、

  1. 目次の設定
  2. グローバルナビの設定
  3. ヘッダーの編集

の3点がポイントだというお話をさせていただきました。

【カスタマイズ入門①】ブログ初心者が抑えるべきポイントは『グローバルナビ』『目次』『ヘッダー』!
ブログ開設初期の初心者ブロガーに立ちはだかる壁といえば『ブログデザイン』です。 たくさんのブログを見て勉強していると、 ...

今回は『ヘッダー編集』の手順を細かく紹介します。

ブログのヘッダーは一番初めに検索者の目に飛び込んでくるデザインです。

ヘッダーのデザインを構築することで、あなたのブログの魅力を最大限に発信することができるようになります。

アバター画像
今回紹介している『ヘッダーカスタマイズ』の手順は「CSSとかスタイルシートって何?」という初心者の人でも安心のカスタマイズ手順です!

※WordPressの無料テーマ『Simplicity』を利用しています

WordPress(ワードプレス)のおすすめテーマは『Simplicity』!!
WordPressでブログを始めたばかりのみなさん。ブログのテーマって何使ってますか?? デフォルトのままで使ってます?それと...

WordPressでブログを開設!おすすめのレンタルサーバー《mixhost(ミックスホスト)》の公式サイトはこちら→月額480円からの高性能クラウドレンタルサーバー

独自ドメインでブログ運営するなら…ムームードメインの公式サイトはこちら!→年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン─

【はじめに】ヘッダーの編集手順は『らすさん』監修のもとでデザインしています。

※2017年7月に行われた『WordPressブロガー飲み会』にて。一番右の方が『らすさん』です。

アバター画像
ぼくのブログデザインは『らすさん』の監修のもと作られているデザインがほとんどです。実は複数運営している特化型サイト(公開していません)も『らすさん監修』のデザインを利用しています。

ブログ初心者も含め、パソコンに詳しくない人にとって、コードの記述とかデザインの変更ってものすごくハードルが高い分野です。

CSSの本を読んで独学で勉強したり、TechAcademy [テックアカデミー]などのオンラインスクールでスキルを身につけることも可能ですが、ブログ開設当初の初心者ブロガーの人は、まずは記事を書くことを優先してほしい。

初心者ブロガーのあなたは、多くを知る必要はありません。

まずは手順に沿ってヘッダーの編集方法を身につけてみましょう。

アバター画像
ぼくが4時間かけて変更したヘッダー編集までの軌跡に沿ってカスタマイズ手順を紹介します!

らすさんの運営するサイト『Tips 4 Life 〜毎日の暮らしをより便利に〜』はこちらから!

毎日使うiPhoneやPCをより快適に使えるよう便利だと感じたものをご紹介!PCのカスタマイズソフト、HTML、CSS、JavaScriptなどをメインに、デザインや生活全般のTipsも書いています。

【ヘッダー編集】初心者でも安心!CSSやスタイルシートがわからなくてもできる『ヘッダー編集の6つの手順』!

ヘッダーの編集をするための手順は

  1. サイトのロゴ・画像の準備
  2. サイトのロゴ・画像の設定
  3. ヘッダー表示の調整(パソコン・スマホ)

3つ分類での6手順です。

アバター画像
準備から設定、調整まで手順に沿って紹介します。

《ヘッダー画像作成》ヘッダーに設定するための『画像の選定』と『サイト名ロゴの作成』手順。

アバター画像
あなたのブログのヘッダーで使用する『画像の選定』と『サイト名ロゴの作成』を行います。
手順①『画像の選定』あなたのブログの趣旨に沿った画像を準備する

画像の選定(背景画像)は、あなたのブログの主テーマに沿ったものを探しましょう。

  • フリー素材
  • あなたが撮影した画像
  • あなたが作成したイラスト

ブログの趣旨に合っていれば基本はどんな画像でも大丈夫です。色調もあなたおサイトに合わせましょう。

手順②『サイト名ロゴ画像作成』白い背景の画像にテキストを入力する

テキスト形式の『サイト名ロゴの作成』手順です。サイト名ロゴは画像に変換します。

背景の白い画像を準備します。背景の白い画面を出してスクリーンショットするだけで大丈夫です。WordやGoogleドキュメントなどのテキストエディタを立ち上げてスクショすれば準備完了です。

  1. バナー工房』にアクセス
  2. バナー工房』に画像ファイルをアップして加工開始
  3. 『文字入れ』を選択し、フォント・色・形式で文字入れ
  4. 作成できたらダウンロード

手順③『背景を透明にする』テキスト入力した画像の白い背景を抜く

ロゴ画像の背景は白いままになっています。

このまま使用すると背景画像を表示できないので『背景を透明にする』作業を行います。

  1. PEKO STEP』にアクセス
  2. 『背景白のテキストロゴ画像』をアップ
  3. 『白い背景』の部分を透明にする
  4. すべて透明にしてからダウンロード

上の画像のように『背景がギザギザ』になっていれば透明な『サイト名ロゴ画像』の完成です。

《ヘッダー画像設定》『背景画像』と『サイト名ロゴ画像』をヘッダーに設定する手順。

アバター画像
作成した画像をヘッダーに設定しましょう。
手順④ヘッダー編集画面で『サイト名ロゴ画像』を挿入する

『サイト名ロゴ画像』タイトルロゴ(背景透明)の画像をアップします。

『外観→ヘッダー』の編集画面で

  • サイト名ロゴ画像のアップロード
  • 『ロゴを画像にする』にチェックを入れる

の作業を行って終了です。

手順⑤ヘッダー編集画面で『背景画像』を挿入

『背景画像』を設定します。

  • 『ヘッダー外側背景画像』に背景画像をアップロード
  • ヘッダーサイズに合わせて切り抜き

で作業完了です。

『サイト名ロゴ画像』からホーム(トップページ)へのリンクも完了です。

※サブタイトルを設定している場合、サブタイトルのみテキストで表示されてしまうのでサブタイトルは消去してください

《ヘッダー表示調整》最後のスパイス。スマホ・パソコンでヘッダーでの表示を整える手順。

アバター画像
設定が完了したらスマホ・パソコンの表示調整を行いましょう。

ブログ初心者の人にとって一番難しい作業です。

手順⑥ヘッダーとグローバルナビの間の空白を調整

ヘッダーとグローバルナビの間の空白を調整します。

以下のコードを

@media screen and (max-width:414px){#header{background-size:auto100%;border-bottom:2px solid #ed7b8c;}#h-top{min-height:auto;}}

スタイルシートの一番下に貼り付けるだけで空白部分の調整が完了します。

アバター画像
作業は全部で6手順。文章で追いかけると簡単に見えますが、初心者だと難しい部分も多いです。参考にしながらヘッダーの編集をしてみてください!

【終わりに】ヘッダーの編集は『検索者』が情報を手に入れやすい内容で作成しよう

ヘッダーはあなたのブログの顔です。

あなたのブログの魅力を最大限に発信するための重要なポイントです。

ただ忘れてはいけなこと。ブログカスタマイズは『検索者』が情報を手に入れやすいように構築することが原則です。

アバター画像
すべてのカスタマイズは『検索者』のユーザビリティを考慮して構築!検索者が使いやすいブログデザインはアクセスも高まります!『検索者』の目線で最高のブログの顔を構築しましょう!

次回は記事の中でAmazonの商品を紹介している人向けに【カスタマイズ入門③】ではカエレバの商品ブログパーツの表示カスタマイズ方法を紹介します。

【カスタマイズ入門③】スマホも対応!商品紹介ブログパーツ『カエレバ』のボタン実装カスタマイズ紹介!
ブログのカスタマイズは何のためにするのか? 間違いなく『検索者』の利便性のためです。 カスタマイズをサイトに施してオリジ...

WordPressでブログを開設!おすすめのレンタルサーバー《mixhost(ミックスホスト)》の公式サイトはこちら→月額480円からの高性能クラウドレンタルサーバー

独自ドメインでブログ運営するなら…ムームードメインの公式サイトはこちら!→年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン─

スポンサーリンク
太もも

シェアする

  • このエントリーをはてなブックマークに追加

フォローする