はてな無料｜おしゃれなヘッダー画像の作り方｜設置も簡単
数ある中から当ブログを訪問していただきありがとうございます
この記事では
はてなブログのヘッダー画像の作り方から設置の仕方まで
画像を使い分かり易く解説しています
こんな方におすすめ
- ヘッダー画像を作りたい
- ヘッダー画像を設置したい
- はてなブログの設置方法をしりたい
- CSSでヘッダー画像を適正に表示させたい
ヘッダー画像はサイトの顔であり看板ですよね
おしゃれにデザインしたいと思われる方が多いのではないでしょうか
しかし
ヘッダー画像を設置した際、ブロガーさんに様々な試練が訪れる場合があります
- 無駄な余白が出来る
- ヘッダー画像が見切れている
- タイトルとデザインが被って見にくくなる
など
いくつかのトラブルを回避できるように今回まとめてみました
まとめていく中で参考にさせていただいた記事はこちら
参考にさせていただいた記事
この記事がヘッダー画像トラブルに時間をとられる被害が少なくなれば幸いです
ヘッダー画像の作成
まずはヘッダー画像を用意しましょう
今回は『Canva』を使ってヘッダー画像を作成します
短時間でプロ並みのデザインで作成できる使いやすいデザイン作成ツールになります
Canvaについて詳しい解説はこちらの記事から
あわせて読みたい記事
ヘッダー画像の作り方
- デザインを作成をクリックします
- +カスタムサイズをクリックします
ヘッダー画像の作り方
- はてなブログの適正サイズは【横1000px 縦200px】となります
- ①1000
- ②200
- pxを選択します
- 新しいデザインを作成をクリックします
ヘッダー画像の作り方
- 背景から画像を選択します
ヘッダー画像の作り方
- 気に入った画像をクリックします
ヘッダー画像の作り方
- ダウンロードします
はてなブログの設置方法
ヘッダー画像をはてなブログに設置します
ヘッダー画像の設置方法
- 【デザイン】⇒①【カスタマイズ】⇒②【ヘッダ】
- ③ファイルを選択から画像をアップロードします
- ④画像とテキストを表示に☑チェックを入れます
- 変更を保存するをクリックします
ヘッダー画像の設置方法
- ヘッダー画像が変わりました
- 左右に余計な余白がありブログデザインとは合いませんので解決します
設置した画像の左右に余白ができた場合の解決法
ブログデザインによっては気持ち悪い余白ですよね
早速解決していきましょう
※CSSコードを使いますので予めバックアップを取ることをお勧めします
ヘッダー画像をデザイン⇒カスタマイズ⇒ヘッダーから設置している場合
先ずは解除しましょう
余白の解決方法
- 【デザイン】⇒【カスタマイズ】⇒【ヘッダ】
- ①画像を外すをクリックします
- ②変更を保存するをクリックします
- 次は画像のURLを調べます
画像のURLの調べ方
先ほどアップロードしたヘッダー画像のURLを調べます
画像URLの調べ方
- 記事を書くをクリックします
画像URLの調べ方
- 編集見たままの画面で
- 写真を投稿を選んで先ほどのヘッダー画像を貼り付けます
- HTML編集をクリックします
画像URLの調べ方
- URLをコピーします
【”https://～.jpg”】青色の部分をコピー
余白の解決方法
下記のCSSコードに
先ほどコピーしたURLを挿入して
はてなブログのデザインCSSに追加します
余白の解決方法
- ①【デザイン】⇒【カスタマイズ】
- ②｛｝デザインCSSをクリックします
- ③先ほどのCSSコードを追加します
※最初から書いてあるコードは消さずに下に追記してください - 変更を保存するをクリックします
- ブログを確認してみましょう
ブログタイトル文字の色を変更する方法
次はブログタイトルの文字色を変える方法です
※CSSコードを使いますので予めバックアップを取ることをお勧めします
こちらからカラーコードを取得できます
下記のCSSコードをコピーして
はてなブログのデザインCSSに追加します
- タイトルと説明文それぞれ色指定ができます
- 指定方法は『#〇〇〇〇〇〇』を変えるだけです
タイトル文字色変更
- 【デザイン】⇒【カスタマイズ】
- ｛｝デザインCSSをクリックします
- CSSコードを追加します
- 変更を保存するをクリックします
- ブログを確認してみましょう
ブログタイトルを非表示にする方法
次はタイトルまでデザインした画像を用意した場合、元のタイトルを表示しないようにする方法です
※間違ってもブログ設定のタイトルや説明文を消さないようにしてください
※タイトルや説明文を消すとアクセス数に関わってきます
※CSSコードを使いますので予めバックアップを取ることをお勧めします
下記のCSSコードをコピーして
はてなブログのデザインCSSに追加します
タイトルの非表示
- 【デザイン】⇒【カスタマイズ】
- ｛｝デザインCSSをクリックします
- CSSコードを追加します
- 変更を保存するをクリックします
- ブログを確認してみましょう
ヘッダー画像が見切れた場合の解決法
せっかくのヘッダー画像が見切れてしまいました
横の余白部分を補うため画像を拡大させたことによるものです
先ほどの余白を無くすCSSコードに１コード追加します
下記のCSSコードをコピーして
はてなブログのデザインCSSに追加します
見切れた場合の解決方法
- 【デザイン】⇒【カスタマイズ】
- ｛｝デザインCSSをクリックします
- CSSコードを追加します
- 変更を保存するをクリックします
- ブログを確認してみましょう
まとめ
いかがでしょうか
意外と思い通りにならないものですね
0からスタートの方にとってはヘッダー画像だけで数時間取られるのではないでしょうか
ヘッダー画像は大事な要素ですが、あまり時間はかけたくありませんよね
この記事が少しでも時間短縮のお手伝いが出来れば幸いです
おすすめ書籍
ゼロから学べるブログ運営×集客×マネタイズ人気ブロガー養成講座 [ 菅家伸 ]
Canvaデザインブック 無料で使える「クラウド型」のグラフィックツール [ タナカヒロシ ]
当ブログでは
アフィリエイトで収入を目指したい！
しかし
ブログ運営は未経験で初心者である
そんな方に向けて
ブログ運営の仕方からアフィリエイトの始め方までを
初心者アフィリエイターにおすすめなブログサービス
はてなブログ
を使用して分かり易く解説していく
ブログを目指しています
最後まで読んでいただきありがとうございました
PR
