【初心者向け】はてなブログのおしゃれな設定方法を解説！

はてなブログは、はてなが提供しているブログサービスで、無料ブログと有料のはてなブログPROのようなサービスがあるのでおしゃれなデザインのブログを始めることができます。

はてなブログやはてなブログPROは、株式会社はてなが運営しているサービスで、他にもはてなダイアリーなどの様々なサービスを提供しています。

有名なのははてなブックマークやはてなブログPROのサービスですが、はてなブログPROはオワコンといわれていますが、オワコン感は感じません。いつでもおしゃれなデザインのブログサービスは他のサービスに切り替えることもできるので問題ないでしょう。

はてなブログは無料で始めることができるブログサービスなのですが、真剣にブログを恥じようと思っている人でもはてなブログPROという月額1,000円程度の有料プランが用意されています。

とりあえず無料でブログを始めることがで切るのですが、途中から有料のはてなブログPROに切り替えることができます。ブログで収入を得たいなら、始めからはてなブログPROに登録して始めることをおすすめします。

はてなブログのWEBサイトにアクセスして、ユーザー登録用の画面を表示して「はてなブログとは」をクリックしてください。

はてなブログの機能説明ページがあるのでチェックしてから「無料でブログをはじめる」をクリックしましょう。

次に出てくる画面で「はてなID登録」をクリックしましょう。

「はてなユーザー登録」用の画面が表示されるので、希望するIDを入力しましょう。パスワードは自分で決めることができるので、5文字以上の記号と半角英数字で入力しましょう。はてなから登録したメールアドレスに返信が来ます。

「週刊はてな」の受け取りは任意なので、不要ならチェックを外しておきます。「私はロボットではありません」にチェックをつけ、確認するための画像が表示されるので、画面に指示に従ってチェックをつけていきましょう。

すべての項目を入力したら、一番下にある「入力内容を確認」をクリックしてください。確認用の画面が表示されたら、画面の指示に従って「登録する」ボタンをクリックしましょう。

はてなブログPROのデザインは、おすすめの人気テーマからテンプレートを選択することができて、テンプレートのカスタマイズ情報が見つけやすくなります。

人気テーマのテンプレートであれば、Google検索でカスタマイズ情報もたくさん出ているので、コピー＆ペーストでおしゃれなデザインにカスタマイズすることができます。

自分ではてなブログPROのHTMLやCSSをいじることができれば問題ありませんが、人気テーマのテンプレートからデザインを選んだ方が簡単に設定できます。

はてなブログに登録されている無料テンプレートを利用することでおしゃれなデザインのブログにすることができます。はてなブログでのテンプレート設定方法は初心者でも簡単に行うことができる方法があるのでので紹介していきます。

はてなブログの管理画面を開いてください。メニュー欄にある「デザイン」をクリックします。テンプレートの選択肢がたくさん出るので、自分好みのものを選択しましょう。

はてなブログの公式テーマは、デザインに少し癖のあるものが多くてやぼったい感じがします。好みのテーマが見つからない時には、一番下までスクロールして出てくるテーマストアでテンプレートを探してください。

はてなブログのテーマは、テーマストアでテンプレートを探すという選択もできます。これをクリックするとはてなブログのブロガーさんが独自に作成したオリジナルのテーマをインストールする方法となっているので初心者でも簡単に行えます。

はてなブログのデザインに、いいイメージを持っていない人が多いかもしれませんが、綺麗でおしゃれなデザインのテンプレートが多くあります。

かわいい系のものであったり、ほのぼのしているシンプルなものだけでなくシンプルでかっこいいデザインものもあります。

はてなブログPROのテーマをインストールする方法は初心者でも簡単で、プレビューしてからインストールするブログを選択して、「このテーマをインストール」を選択するだけで、はてなブログのテンプレートをインストールが完了します。

はてなブログのテーマは無料で利用できるので、テンプレートの選択は初心者でも気軽にデザインの選択をすることができます。

はてなブログのおしゃれなデザインは、レスポンシブ対応しているテンプレートを選択することをおすすめします。

レスポンシブ対応を選択することで、はてなブログのアクセス数をあげることができたり、スマホデザインのカスタマイズが必要ありません。

はてなブログのレスポンシブデザインは、パソコンから見たときのレイアウト表示を自動的にスマホ用のデザインにも合わせてくれるものです。

はてなブログをレスポンシブ対応のデザインにするだけでアクセス数が大幅に上がる理由として、トップページのデザインが綺麗になって、表示される記事の数が多くなることでアクセス数は大きく変わるのです。

はてなブログのレスポンシブ対応のデザインにするときには注意点があります。ブログは文章が大事なので、デザインにこだわりすぎてはいけません。

デザインのカスタマイズに時間をかけすぎないことが重要で、初心者がデザインこだわりすぎると時間はすぐにたってしまいます。

いくらはてなブログでデザインをこだわっても、文章のないブログでは意味ありません。読者は情報を求めているので、読みやすい文章を書くことに集中しましょう。

はてなブログのデザインをカスタマイズすることに時間をかけるなら、読者が読みやすい文章にする方が重要です。

はてなブログにある対応デザインの中でも、文字リンクが青以外のデザインを選ばないように注意してください。

読者はリンクがわからなくなってしまうため、クリックして貰えません。リンクは青い文字という認識があるので、デザインの中でもリンクの文字が青のものを選択して登録しましょう。

はてなブログのデザインは、「管理画面」から「デザイン」「カスタマイズ」を操作していきます。はてなブログでテーマの画像に、「レスポンシブデザイン対応」と表示されているデザインを選択してください。

レスポンシブデザインで登録しても、コードをコピーしなければ変更できないテンプレートもいあるので、それぞれのテーマにある注意書きを見てください。レスポンシブ対応に変更したら、スマホからもデザインの確認をしてください。

はてなブログの設定から、「トップページの表示形式を一覧にする」を設定してください。トップページに表示される記事数を10に登録しておくと良いでしょう。

はてなブログPROの記事がクリックされる可能性も高くなるので、アクセス数をあげられる可能性も上がります。

はてなブログPROの初期デザインでは、ブログの見栄えがあまりよくありません。ブログ初心者でも十分にカスタマイズすることはできます。

初心者がはてなブログのカスタマイズをすることがめんどくさそうと感じてしまいがちですが、初心者でも簡単に行うことができるので無料でデザインのカスタマイズする方法について紹介していきます。

はてなブログに手を加える作業は初心者でも全く難しくありません。基本的にはてなブログの「デザインCSS」をコピーして貼り付けるだけです。その「デザインCSS」のコピペの作業も、極力少なくする方法があるので紹介します。

デザインCSSの時間短縮は無料で初心者も簡単に行うことができます。ブログのデザインに手を加える作業で時間をかけるよりも、初心者は文章を書くことに時間を使いましょう。

パソコンからのカスタマイズを1度してしまえば、あとはスマホからブログを書くこともできます。スマホアプリからでもカスタマイズは反映されます。

背景画像も「デザインCSS」で変えていくことで、いろいろ変更することもできます。「デザインCSS」で背景画像を変更したときは、必ずプレビューで確認して自分のイメージ通り変更されているかを確認してください。

ブログ全体の背景色を変更してWordPressで作ったブログデザインのように作ることもできます。デザインCSSのカラーコードを変更して設定することで、ちょっとした模様替えをすることもできます。

ヘッダーに画像を設定するときには、はてなブログの管理画面にある「デザイン」から「カスタマイズ」にいってから「ヘッダー」にある「タイトル画像」で設定できます。

ヘッダー画像を設定することが難しく感じるなら、画像の設定を無しにしてトップにメインタイトルだけをシンプルに表示させることもできます。

「設定」から「詳細設定」にある「トップページの表示形式を全文形式へ変更」することで、ブログトップの記事がカード風に変わります。

「続きを読む」を記事の中に入れておかなくてはブログトップがカード風から記事に飛ばなくなってしまうので、すべてんお記事に「続きを読む」を入れておきましょう。

見落としてしまいがちですが、すべての記事に続きを読むを挿入ことで、トップページから記事に飛ぶことができるようになります。

ブログ初心者は記事数が少ないので、続きを読むを挿入する作業が少なくて済むので早めに変更しておきましょう。

はてなブログのサイドバーをカスタマイズせずに、初期状態のまま利用している人も多くいます。サイドバーの変更を何もしていなければ、はてなブログの宣伝が表示されています。

サイドバーのカスタマイズをすると、はてなブログの宣伝を消すこともできますし、注目記事やプロフィールのような項目を表示させることができます。注目記事にはサムネイル画像を入れてクリック率を高める仕組みにすることもできます。

はてなブログでカテゴリー整理したものをグローバルメニューに入れることができます。

カテゴリーに悩んでいるとあとからカテゴリ名を変更しなければいけませんし、ブログカテゴリーを決めると何について書いていくかもわかりやすくなるので、ネタが尽きることがありません。

ソーシャルボタンの設置もTwitter以外にもSNSを入れることができます。SNSを入れて組み込むことが可能です。

ヘッダー画像のサイズは横幅400×縦幅200くらいに設定しておきましょう。スマホとパソコンから見たときにちょうどいいサイズになります。

ブログのデザインとしてアクセスアップにも役立つ機能としてサムネイル画像があります。過去に作成したはてなブログを使って設定します。

そのほかのブログサービスでもサムネイル画像機能がありますが、はてなブログではほぼ自動的に登録できることが多くあります。

サムネイル画像は、ブログの記事を表す画像です。SNSで記事を紹介した場合にもサムネイル画像が表示されてます。

はてなブログの管理画面で、「記事の管理」をクリックして「アイキャッチ画像」を変更したい記事の横の「編集」をクリックしてください。写真のアイコンをクリックして、サムネイル画像に使いたい画像をブログに貼りつけます。

記事画面の右側にある歯車アイコンをクリックして、編集オプションの画面が開くのでその中の「アイキャッチ画像」を確認してください。利用中のサムネイル画像が表示され、その下にサムネイル画像として使用できる画像の候補が出てきます。

記事の編集画面の一番下にある「更新する」をクリックすると設定は完了です。

サムネイル画像を使うメリットは、人の目を惹くデザインにすることができます。はてなブログの記事一覧やSNSでシェアしたときに、文字だけの場合と写真やイラストがあるのでは目立ち方が違います。

この目立たせるデザインの画像がサムネイル画像で、インパクトのある画像は目を止めるチャンスになるので、アクセスしてもらえるチャンスを増やすことができる意識することで効果が発揮されます。

はてなブログでは、ブログ上に表示される「最新記事」や「関連記事」の一覧にもサムネイル画像が表示されるので、ブログデザインの見やすさもアップさせる役割があります。

はてなブログでテーマ全体のHTMLを好きなように編集することはできませんが、記事上下のカスタマイズをすることはできます。

HTMLはWEBページを作成すると為に開発された言語で、インターネット上に公開されているWEBページはほとんどHTMLで作成されています。

「カスタマイズ」タブにある「記事」をクリックします。アコーディオンで非表示になっていた部分が表示されるので、「ソーシャルパーツ」の下にある「記事上下のカスタマイズ」の項目でHTMLやJavaScriptの挿入をすることができます。

はてなブログの編集画面にあるHTML編集タブをクリックすると、現在作成されているページのHTMLを見ることができます。

はてなブログで使用することができる要素は、ほんの数種類しかないので少し勉強するだけではてなブログで必要なHTMLは覚えることができます。

<h2>～</h2>のような要素は、その範囲が見出しであることを示す要素です、文章を見やすくするために、やはり見出しははっきり表示させることが大切です。

ブログの雰囲気も大きく変わるので、カスタマイズすることでサイト自体mおしっくりとなるような配色にすることができるので注目される見出しにすることができます。

文字の大きさは、font-sizeを変更することで変えることができます。本文がだいたい14pxくらいになっています。

リンクや画像にリンクを指定すると、その前後を<a>～</a>で囲んだHTMLが出力されます。

a要素はリンクを指定する要素なので、リンク先のURLをhref属性で指定します。画像にリンクを指定したときにもimg要素が、<a>～</a>でかこまれてHTML出力されます。

文字の色を変えるときには、colorでカラーコードを変更することで色の変更をすることができます。

ほとんどのWEBページはHTMLとCSSという言語で見た目が作られています。CSSは、HTMLのタグで囲んだ範囲の文字色や大きさ、背景の色や配置などを指定するための言語です。

ダッシュボードにあるサイドバーから「デザイン」をクリックします。サイドバーが切り替わり「カスタマイズ」タブをクリックしてください。

「｛｝デザインCSS」があるのでクリックしましょう。修正が可能であるCSSが入ったテキストボックスが表示されるので、テキストボックス内でクリックします。大きなテキストボックスが表示されるので、CSSの修正・追加・削除をすることができます。

CSSのカスタム後にテキストボックス以外をクリックすると、その段階でCSS変更点が右側に自動でプレビューされます。管理画面に戻るには、文字通り「管理画面に戻る」をクリックしてください。

コードが長くて、選択するためにカーソルを動かして選択範囲を広げるのは面倒です。「Cntrl＋A」で全選択すると、ソースコード以外も選択されてしまうので不便です。

元使い勝手をよくするために、ソースコード中のコードだけをダブルクリックすると全選択されるので、コピペしたものを貼りつけすることができます。

デザインCSSを自作して作成した場合、せっかく作成したデザインCSSが消えてしまう可能性があるので、バックアップを取っておくように注意してください。

詳細設定を開いてから、エクスポートの項目にある「記事のバックアップと製本サービス」をクリックしてバックアップを取ります。

テスト用ブログを非公開にしておき、テスト用ブログにアップロードしてデザインが崩れていないか確認してからメインブログで利用しましょう。

はてなブログのデザインテーマを変更するときにブログのレイアウトが崩れてしまうリスクがあります。レイアウトが崩れてしまわないように、リスク回避するための注意点があるので紹介していきます。

はてなブログは無料版で3つ、有料版なら10個のブログを作ることができるので、事前にテスト用のブログを1つ作って、カスタマイズを試すようにしてください。

間違っているカスタマイズをブログに反映させないためにも、テスト用ブログでチェックすることでエラーを回避することができます。

テスト用ブログは、非公開に設定しておき「自分のみ閲覧」にしておき、テスト用ブログで試してから、メインのはてなブログにカスタマイズをあてはめることで、失敗が少なくなります。

はてなブログのデザインCSS設定の部分にコードを入れて、設定するときはブログ全体に影響します。

記事が多くなってくるとダメージが大きくなってしまうので、テスト用ブログを使って慎重に設定を変更する作業をしてください。

カスタマイズしたテーマが初期化されてしまう危険性があるので、カスタマイズしたテーマやデザインCSSはバックアップしておきましょう。

はてなブログのバックアップは簡単で、ダッシュボードにある設定から詳細設定を開きます。下の方にスクロールすると「エクスポート」という項目があるので、「記事のバックアップと製本サービス」があるのでクリックします。

「エクスポートが完了しました」と表示されたら、ダウンロードをクリックしてください。

カスタマイズしたテーマをエクスポートしておくことで、いつでもカスタマイズしたテーマを元に戻すことができます。

カスタマイズしたテーマをダウンロードしておくことで、元に戻すことも簡単に行うことができます。

ブログでカスタマイズしたバックアップを取っておくことで、ブログが消えてしまってもインポートして復元することができます。

設定にある詳細設定を開くと、記事のバックアップと製本サービスがあるのでクリックしてから、エクスポートをクリックします。エクスポートが完了するとダウンロードをクリックすることでダウンロードが完了します。

ブログを運営するときに悩むのが色の選定で、色でブログの印象は全く変わってきます。

たくさんの色見本から自分の好みのものを選ぶことができ、色の変更はすぐにデザインに反映させることができるので、自分のブログテーマにあった色に微調整することもできます。

カラーコードを検索して色見本を見ながら、コードを変更することで自分好みの色に変えることができます。