ブログのデザインを整える【初心者】はてなブログ

ブログのデザインを整える【初心者】はてなブログ ブログ

前記事で、ブログを投稿するところまでいきましたね。

今回は、ブログの印象をガラリと変える背景画像ヘッダー部(タイトルのある所)の画像、プロフィール画像を設定します。

ブログのデザインを整える

ブログのデザインを整える
ブログのデザインを整える

前回までのブログをブラウザ(グーグル・クロームまたはマイクロソフト・エッジ)で開くと、こんなブログ画面になります。

ブログ初心者のデザイン

アイキャッチ画像の「フリー素材ぱくたそ」からダウンロードした茜さやさんは目立つのですが、そのほかは真っ白で寂しいですね。

【ブログの書き方③【初心者でも簡単】外観の変更・ブログタイトル】の記事で選んだブログテーマが地味なのでこうなってしまっています。

ブログの書き方③【初心者でも簡単】外観の変更・ブログタイトル

もうちょっと派手なテーマを選んでおけば、もうちょっと派手になりますが、これは好みです。

そして、ヘッダー部(ブログ上側のブログタイトルの部分)やサイドバー(記事右側にごちゃごちゃあるところ)の設定はしておかねばなりません。

はてなブログを例にとりますが、アメブロもライブドアブログなどでも基本的な操作は同じです。

スポンサーリンク

ブログのデザイン、色、背景を決める

すでに色がついているブログテーマもありますが、筆者が選んだ「Minimal Green」というテーマには背景に色がついていません。

左上のメニュー(赤丸)をクリックし、赤四角の「デザイン」をクリックします。

ブログのデザイン、ヘッダー部を設定する

デザイン設定の画面に切り替わります。

左上の赤丸のレンチ(カスタマイズ)クリック > 「背景画像」 > お好きな背景画像を選んでください。

ファイル選択」でお好みの画像をアップロードもできます。

ブログのデザイン、背景部分の設定をする

ブログのデザイン、ヘッダー画像を決める

ヘッダー画像は別になくてもいいのですが、画像があったほうがブログのイメージが出て覚えられやすいです。

それに、見た目読みやすい方がGoogle検索エンジンのUX(ユーザーエクスペリエンス、ユーザ体験)が上がるのでSEOにもよいです。

例えば、「ブログサイトのデザイン(UI)を改善すれば、ユーザビリティ(使い勝手[使いやすさ])が良くなるので、ユーザー体験(UX)の向上[ユーザー満足度の向上]につながる。」といった関係です。

モバイル端末(スマホ)でのユーザビリティを良くすれば、直接的なSEO効果が見込め、デスクトップのユーザビリティを良くすれば、間接的なSEO効果が期待できます 。

SEOラボ ユーザビリティとSEOの関係性について  より引用

要はカッコ良くて使いやすいサイトには、人がまた訪れやすい、という事です。

とりあえず画像は、

【ブログにフリー画像を貼る方法【初心者】ぱくたそ・写真AC・いらすとや】

ブログにフリー画像を貼る方法【初心者】ぱくたそ・写真AC・いらすとや

などでダウンロードし、ペイントブラシなどの画像加工ソフトであらかじめ1200px×300pxくらいに加工した画像を用意しておきます。

左メニュー「ヘッダ」 > 画像をアップロード「ファイルを選択」をクリックすると、画像を選択する枠がでてくるので、準備しておいた画像を選択します。

無料画像をダウンロードし、準備しておく

位置を指定する」画面に変わるので、微調整し、「適用」をクリック。

スポンサーリンク

例は星空のため位置なんかどうでもいいのでそのままいきます。

ブログのヘッダー部画像

見た目が変わります。

これでよければ左上の「変更を保存する」、よくなければどこかからやり直してください。

ヘッダー部、背景画像設定

真ん中あたりに出てくる「ブログを確認する」をクリック

ブログのヘッダー部と背景画像の確認

それらしくなったでしょうか。

スポンサーリンク

プロフィールを設定する

まだ右サイドバーのプロフィール画像がありませんね。

いつもの左上メニューを出して、「設定」をクリックします。

ブログのプロフィール画像を設定する

画面が切り替わるので、一番下の「アカウント設定」をクリックします。

ブログのアカウント設定

プロフィール入力画面に変わります。

プロフィール画像の設定

プロフィール設定画面で、「ファイルを選択」で任意の画像を選び、「設定する」をクリックします。

自分の顔写真でもいいですし、猫や犬でも、マンガでもいいです。 (著作権があるものはダメです

プロフィール画像を設定する
スポンサーリンク

自分で書いた適当な画像を選んでみました。

プロフィール編集で画像を設定

ニックネーム、紹介文などを入力、プロフィール画像を「変更する」をクリックします。

ブログのプロフィールを設定

画面を下にずーっとスクロールすると「保存する」ボタンがあるのでクリックします。

管理画面に戻ります。

また下に下にずーっとスクロールすると「変更する」ボタンがあるのでクリックします。

また左上のいつものメニューから「ブログを表示」をクリックします。

デザインを整えたブログの表示

ブログのヘッダー部・背景画像・プロフィール完成!

ブログのデザイン完成

背景プロフィール画像も変わりましたね。簡単ですね。

温泉の美女と夜景はあまり合わないような気がしますが、記事はどんどん更新されていくため、自分のブログのイメージと合っていればよしとします。このあたりはいつでも変更できます。

スポンサーリンク

ブログのデザインを整える まとめ

ブログの背景画像・色、ヘッダー部の画像は、ブログのイメージになるため納得いくまで何回もやりなおしてください。

ただ、ブログを書き始めても変更できるため、見切り発車でも結構です。

プロフィール画像やニックネームは後記事ででてきますが、人に見て覚えてもらう必要があるため、後で変更しない方が良いです。よく考えて決めてください。

他の無料ブログ、アメブロ、ライブドアブログ、gooブログなどもどれも似たような感じです。問い合わせいただければ記事にします。

【あわせてよみたい】

ブログのアクセスアップ【初心者】ブログ村の利用

ドコモ光はなぜ評判が悪いの?速度や料金、口コミや割引を徹底調査

【チェック】

【文賢】Webライターがライティングを時短するためのおすすめツール

スポンサーリンク


コメント