本お問い合わせホームブログカスタマイズはてなブログのデザインを手軽にお洒落に設定する方法【初心者ブロガー向け】2019年12月2日ツイートシェアはてブLINEPocket今回の記事では、はてなブログのデザイン設定を自分好みにする方法をまとめたいと思います。デザインのカスタマイズを自力で行っている方には、とても初歩的な内容かもしれませんので、対象ははてなブログを始めようと思っている人はてなブログを始めたばかりの人デザイン設定がさっぱり不明なはてなブロガーと予め記しておきますね。宜しければ、ブログ運営の参考にしてください。くじ1、デザインテンプレートを使用するおすすめはテーマストアのテンプレートテーマストアでおすすめのデザインテーマインストールの方法2、スマホのデザインをレスポンシブに設定3、はてなブログPROに登録するはてなPROに変えるベストタイミングは?さっさとPROに登録してアドセンス審査を受けるのが◎4、自分好みにHTMLとCSSでゴリゴリ改造する好みのカスタマイズをしているはてなブロガーを探すサルワカを賢く活用5、HTMLとCSSの基本を学べる本6、テーマカラーを決めておくと◎7、スマホとPCのデザインを分ける方法まとめ|はてなブログのデザインの変更方法ブログに関する他の記事1、デザインテンプレートを使用するまずお勧めするのはデザインテンプレートを使用する方法です。はてなブログに登録されている無料のテンプレートを利用して、ブログのデザインをお洒落にすることができます。設定方法も超簡単です。ブログ管理画面を開く「デザイン」をクリックそうすると左横にテンプレートの選択肢がたくさん出てくるので、好きなものを選びます。おすすめはテーマストアのテンプレート個人的にお勧めのテンプレートは公式テーマ以外のテーマです。公式テーマは、少し野暮ったく、デザインも癖があるものが多いです。好みのテーマが見つからない人も多いと思います。下まで、公式テーマをスクロールします。すると「テーマストアでテーマを探す」という選択肢が出てきます。これをクリックし、はてなブログのブロガーさんが独自に作成したオリジナルのテーマをインストールするのが一番おすすめです。テーマストアでおすすめのデザインもしかするとはてなブログは少しデザインがダサイというイメージを持っている方も多いかもしれません。実は、綺麗でスタイリッシュなテンプレートは多くあります。個人的に、おすすめなのはHaruni(可愛い系)Minimalism(ほのぼのシンプル系)Innocent(シンプルカッコいい系)ですね。以下のリンクからデモサイトが見れますので、宜しければ参考にしてください。「はてなブログお洒落じゃん!」ってなりますよ。blog.hatena.ne.jpminimalism-theme.hatenablog.commoonnote.hateblo.jpテーマインストールの方法テーマのインストール方法も簡単です。「プレビューしてインストール」ブログを選ぶ「このテーマをインストール」で実装完了になります。テーマは無料で利用できますので、心配しなくても大丈夫です。続いて、スマホから見たときのデザインをお洒落にする方法です。デザイン設定の管理画面のスマホのマークをクリック一番下にある「詳細設定」をクリック「レスポンシブ設定」にチェックを付けるこれで保存するとPCとスマホのデザインが一緒になります。先ほど紹介したテーマをきちんと設定していればスマホから見てもPCと同じお洒落なデザインになるということです。数分で出来る作業ですのではてなブログ初心者であれば最初に設定してしまうのが◎だと思います。3、はてなブログPROに登録する次に紹介するのははてなブログPROに登録した後のブログカスタマイズの話です。具体的にPROに登録すると変な広告を消せる配置できるアドセンスの数が増える独自ドメインが使える記事一覧形式にできる他いろいろと利点があります。自分好みの細かなカスタマイズなども可能になります。※当ブログも「はてなブログPRO」で運営しています。円/月(税込)1ヶ月コース:1,008円(税込)1か月10008円から使えますので、気になる方はお試ししてみると良いと思います。はてなブログPROをチェックはてなPROに変えるベストタイミングは?ちなみに、はてなブログPROに変更するタイミングで悩んでいる方も多いと思います。個人的におすすめなのは最初からPROでやる不安な場合はPV200~500/日くらいのタイミングがおすすめです。PROに登録後、独自ドメインを取得して設定すればGoogleアドセンスの審査を受けられます。参考までにGoogleアドセンスの収益は1万PV:~3,000円5万PV:3,000~15,000円10万PV:15,000~30,000円が目安となります。200PV/日のアクセスがあれば、途中でブログを止めない限り1年間で確実に費用は回収できるはずです。PROに登録してアドセンス審査を受けるのが◎Googleアドセンスといえば、ブロガーなら誰もが利用したい定番サービス。アドセンスの審査は簡単ではありません。記事数が増えれば増えるほど、不合格の原因がわからず訂正ができなくなり、非常に苦労します。ちなみに当ブログの場合は、PV50000/月を超えてから1年半審査に受からず、軽く10万円以上のブログ収入を逃してしまいました。1度は完全に諦めた...Googleアドセンス審査合格!苦節1年半の改善点まとめPROにしようか悩む気持ち、すごくわかります。個人的な意見ではありますが赤字になっても大した金額ではないブログが伸びる前に独自ドメインに切り替えた方がダメージが少ない(ドメインを変えると一時的にPVは下がる)アドセンスの審査は早く受ければ受けるほど受かりやすいです。思い切って最初からPROでやるのも◎だと思います。それくらい私は、はてなブログを利用するならPRO一択だと考えています。※補足(2019.5)現在では「PRO」に登録しなくてもアドセンスの審査を受けられるようになりました。はてな運営側の貼っている広告を外せない無料だと「独自ドメイン」を使えないというのは、非常に大きな欠点です。PVが少ない場合は、1つの広告から発生する収益は少ないです。ブログが成長したら1つの広告から年1万以上の収益が発生するという可能性もあります。独自ドメインを利用していないと、ワードプレス移行もできません。仮に、はてな運営側が勝手にブログを消去するというハプニングが起きた場合、独自ドメインにしていないと八方ふさがりの状況になります。この点に関しては、また別記事にまとめたいと思いますので初心者ブロガーさんの参考になれば幸いです。「はてなブログPRO」に登録を行ったうえで、さらに自分好みに細かい調整をしたい人は、自分でコードをデザイン設定に貼り付けていきます。ここから上級者篇ですね。好みのカスタマイズをしているはてなブロガーを探すまずおすすめしたいのは好みのカスタマイズを行っているはてなブロガーを探すという方法です。訪れて「この人のデザイン素敵だ」と思ったら、はてなブロガーかどうかをチェックします。はてなブロガーであれば原理的にカスタマイズは可能なはずです。その方のブログの記事の中にブログのカスタマイズに関する記事がないかチェックしてみてください。参考になる情報があるかもしれません。ちなみに私はLITERALLYというはてなブログのデザインに憧れてます。内容の濃さもさることながら、シンプルで美しく使い勝手の良いデザインが光るはてなブログです。「こんなブログがはてなブログで作れるんだ」という気づきがあります。憧れのはてなブログですね。tsukuruiroiro.hatenablog.comサルワカを賢く活用はてなブログだけでなく、あらゆるブログのカスタマイズ(サイトデザイン)において非常に参考になるサイトも1つ紹介したいと思います。サルでも分かる図解説明マガジンです。有名なサイトですので、既にご存知の方も多いと思います。saruwakakun.comこのサイトでは、初心者にもわかりやすくHTMLやCSSのデザインコードを公開・説明しています。(コピペも自由にできます)自分の気になるパーツのデザインにとても役立ちますので、一度チェックしてみてください。ちなみにこのサイトの運営者さん。実は先ほど紹介したLITERALLYの管理人と同一人物です。両方参考になりますので(笑)合わせてご参照ください。次におすすめなのが本を1冊買ってサイトデザインの基本を知るという正攻法です。最初はよくわからずGoogleで変えたい部分のコード(HTMLやCSS)を検索コピーして、適当に貼るなんかデザイン変わった!➡嬉しいで終わります。ブログのカスタマイズが進むにつれてコピペして貼ったコードでごちゃごちゃ失敗してデザインが崩れても直せない何が必要で何がいらないのかさっぱりとなる方も少なくないでしょう。(実際、私はそうでした)そこでおすすめするのが「HTML5&CSS3レッスンブック」という本です。RinkerKindleAmazon楽天市場Yahooショッピング私はこの本を1冊やっただけですが、その後適当にコピペしていたデザインのためのコードの見え方が劇的に変わりました。なにもわからな初心者でもOKカラーでわかりやすい短時間でさくっと学べる必要最低限の知識が身につく非常におすすめの本です。ちなみにこの本も、先ほど紹介したLITERALLYでおすすめされている1冊です。本当に役に立ったので、個人的には変にネットで情報を探して、楽をしようとするとかえって遠回りになるという気付きにもなりました。サイトデザインに興味がある方は、最初の1冊としても大変おすすめです。▶HTML5&CSS3レッスンブック※ただし、今から自分が学ぶなら「Progate」を利用すると思います。無料で使えて、基本をおさえるのには最適です。次にサイトデザインを行う上で、知っておくと良い色の話です。自分のブログテーマカラー(色調)を決めるのがおすすめです。ちなみにこのブログは、青緑を基調にしています。自分の好きな色ということもありますが、Googleアナリティクスで分析したところ、当ブログの訪問者が男女比5:5ですので、あまり性別を感じさせない色にしようと心がけています。同じように、自分のブログの訪問者の傾向(性別・年齢など)を確認して、テーマカラーを決めるのもおすすめです。色のコードはカラーチャート[HTMLカラーコード・カラーネームの一覧]のようなチャートから随時好きな色を選んでも良いと思います。下のサイトの記事も、非常に役に立ちます。tsukuruiroiro.hatenablog.comデザイン本を買って、気分をあげるのもお勧めです。デザイン〈目で見て楽しむ新しいデザインの本。最後に、スマホのデザインとPCのデザインを分ける方法を紹介します。先ほど紹介したレスポンシブ設定をクリックしないとPCとスマホのデザインが完全に分離されます。するとスマホのデザインは、下のようなはてなデフォルトのものになります。(こういうタイプのブログに見覚えがある方も多いと思います)この場合の注意点ははてなデフォルトのスマホデザインから、すべて自分でコードを入れてカスタマイズしないと綺麗なデザインにならないという点です。逆に言えば長所は或る程度CSSとHTMLが判れば、他のブログと被らないオリジナルのデザインにカスタマイズできるということです。アドセンスの配置をPCとスマホで変えることができるという利点もあります。はてなブログのアドセンス配置に関しては「はてなブログでアドセンス収益UP*自動的に2つ記事内設置する方法【まとめ】」という記事を参照ください。細かなカスタマイズは「はてなブログをスマホで見たときのトップページ*簡単カスタマイズ方法【コピペOK】」という記事を参考にしてください。(ただし情報が古いので、またリライトしたいと考えています)はてなブログをスマホで見たときのトップページ*簡単カスタマイズ方法【コピペOK】デフォルトからのカスタマイズは、時間もかかりますし、なかなか苦労も多いので、特に拘りがなければ、一番最初に紹介したはてなストアのテーマを利用するのが一番だと思います。ブログへの愛着は強くなるかもしれません!まとめ|はてなブログのデザインの変更方法ということで今回の記事では、はてなブログのデザイン設定についてまとめてみました。「はてなPRO」は早めに入った方がいいサルワカさんのサイトがおすすめHTML5&CSS3レッスンブックで基礎を学ぶと劇的にコード内容がわかるPCとスマホのデザインを分けたかったら、レスポンシブ設定をクリックしないというものでした。自分自身が以前わからなかった点も含めて、まとめたつもりです。ちなみにAmazonアソシエイトのリンクは、ID登録すれば編集ページからボタン1つで貼れます。気づかずにAmazonアソシエイトからわざわざリンクをコピーして貼っている人もいるかもしれませんのでお気を付けください。ちなみにはてなブログとWordpressどっちにすべき?という問題に関しては個人的には今から始めるならWordpressにするとお答えしておきます。ブログを始めるなら「はてなブログ」と「ワードプレス」の2択!その理由は?理由はお洒落なテンプレートが多い細かなデザイン設定ができる(自由度高め)はてなブログにしても、どのみち有料プランに入ることになるからです。PROの値段を考えると、Wordpressと変わらない(むしろ安い?)かと思います。ちなみに、ワードプレスに関しても無料ではなくきちんと初期費用は払った方が結果、遠回りにならないと個人的には思います。サーバーに関してはエックスサーバーの人気が高いようですね。ドメインに関しては、私の場合お名前.comをずっと使用しています。個人的にはてなブログは手軽に始めやすい設定が楽フォーマットが書きやすいという利点もありますので、初心者ブロガーさんにはおすすめです。以上はてなブログのデザイン設定について悩んでいる方の参考になれば、幸いです。現在、当ブログは「ワードプレス」で運営しています。はてなからワードプレスへの引っ越しに悩んでいる方は、下記事を参考にしてくださいね。引っ越し直後は、設定やカスタマイズで大変でした。慣れてしまうとワードプレスは使いやすく、収益も上がり、ブログのデザインは格段に洗練されました。宜しければ参考にしてください。WINGテーマ:SANGOドメイン:お名前.comを使用しています。ASPで一番愛用しているのは、旅行案件が多い「バリューコマース」さんです。無料登録はこちらから利用しているASP一覧はこちらになります。当ブログのデータが、ブログ初心者さんの参考になれば幸いです。WING」を選んだ理由この記事を書いた人ぱじゃねこwriter平成生まれのマイペースな旅好き。現在まで20か国、1人旅バックパッカー経験あり。国内・海外の旅行情報を含め、これから旅行に出かける人がわくわくするブログを目指しています。2019年11月5日はじめまして。ねこさんは、はてなブログに大変おくわしい印象を受けました。はてなブログ用にPotekoとPochiっていうテーマを作ったのですが、普段はてなブログを使っていないので有識者の方に評価いただきたくご連絡差し上げました。お忙しいとは思いますがお手すきのさいなどにちらっと見ていただければ幸いです。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。トラベルグッズ旅のノウハウバイク資格・語学レビューブログ恋愛コラムプロフィールぱじゃねこ平成生まれのマイペースな旅好き。旅行、ツーリング、読書、映画鑑賞など自分の好きなものを集めた雑記ブログ(月間最高22万PV)を気ままに運営中。愛用カメラはGRIIです。