【はてなブログ】デザイン変更の仕方【注意点もバッチリ解説】

こんなお悩みにお答えします。

この記事でわかること

こんにちわ、Jouji(@jouji0720)です。

はてなブログで書いていて、デザインテーマの変更をしたいなって思うことありますよね。

そんなあなたに今回は、デザイン変更の仕方についてですね。

この記事を読むとはてなブログのデザインの変更法から注意点までまるっとバッチリわかっちゃいます。

この記事を書く僕ははてなブログ歴は3年目。

今ではアフィリエイトからの収益が月に3000円くらいになりました。

そんな僕も、デザイン変更には痛い思い出が…。

そんな経験から、デザイン変更の仕方をご紹介します。

ぜひ最後までお読みくださいね。

では行ってみましょう。

Here We Go!!

はてなブログのデザインテーマの変更方法

はてなブログのデザインテーマの変更方法についてお話していきましょう。

デザインの変更の手順は、以下の通り。

では、詳しく見ていきましょう。

手順①「デザイン」⇒「デザインテーマ」に移動する

まず管理画面から、「デザイン」⇒「デザインテーマ」と移動します。

手順②一番下のテーマストアでテーマを探すをクリック

次に一番下までスクロールして、「テーマストアでテーマを探す」をクリックします。

公式テーマの場合には、そのままそこから選んでもOKです。

ただ人気別のものが知りたい場合には、テーマストアに1回行くのがおすすめですね。

手順③上部のタブをクリック

次に上部に以下のようなタブが出てきます。

その中から好きなものを選びます。

今回は公式テーマにしますね。

手順④好きなデザインをクリック

すると上記のような画面になります。

好きなデザインを選び、ダブルクリックします。

おススメのテーマに関しては、はてなブログのテーマの選び方を解説【おすすめテーマもあり】 にて詳しく解説していますので、是非どうぞ。

手順⑤右端のプレニューしてインストールをクリック

するとテーマのページに行きます。

右側に「プレビューしてインストールする」という青いボタンがあります。

そこをクリックします。

手順⑥ブログ名をクリック

すると複数ブログを作っている人は、ブログを選ぶ形になりますね。ブログのテーマ変更をしたいブログ名を選びましょう。

ひとつだけの人はクリックするとインストール画面に行きます。

手順⑦左上の「このテーマをインストールをクリック」

するとインストール画面に行ったら、左上のところにこのテーマをインストールと書かれた青いボタンが出てきます。

その青いボタンをクリックしましょう。

手順⑧確認画面が出てくるので「OK」をクリック

すると上部から、確認画面が出てきます。

内容を読んで「OK」をクリックします。

内容に関しては、以下の通りです。

手順⑨デザインテーマがインストールされて適用される

するとデザインテーマがインストールされて、適用されます。

おめでとうございます。

はてなブログのデザインテーマの変更時に気を付けること

ここでは、はてなブログのデザインテーマの変更時に気を付けるべきことをご紹介していきます。

【悲報】デザインを変更すると、いままで自分でデザインCSSはリセットされる

実は悲しいかなデザインテーマを変更すると、今まで自分でデザインしていたCSSはリセットされてしまうんですね。

先ほど、デザインテーマを変更する最終段階で確認画面が出てきましたよね。

以下の画像ですね。

内容

これはどういう意味かというと、「新しいデザインにしたら今デザインCSSで使っているコードがなくなりますよ。なくなっちゃってもいいですか？」って意味なんですね。

というのもはてなブログの場合、デザインテーマの中にデザインCSSの場所があります。

そのためデザインテーマ自体を変えると、今までカスタマイズしていたデザインCSSが消えてしまうんですね。

デザインテーマを変更時にカスタマイズが消えない対処法

「それじゃあ困る」ってあなたのために、デザインテーマ変更時にカスタマイズが消えないようにする対処法をご紹介します。

対処法は、以下の通り。

では見ていきましょう。

対処法①CSSやJavascriptのバックアップを取る

デザインテーマ変更時にカスタマイズが消えないようにする対処法の1つ目は、CSSやJavascriptなどのバックアップを取っておくことですね。

この方法は、メモ帳などのエディタアプリにバックアップを取っておくことでデザインCSSを残す方法です。

もし何かあった時にもバックアップがあると、最悪元の形には戻せるから安心ですね。

ちなみに僕はカスタマイズをゴリゴリにしていますが、全部バックアップを取っています。

バックアップに使うエディタアプリは、ブラウザに自動で保存してくれるGoogleドキュメントがおすすめです。

→Google ドキュメント – オンラインでドキュメントを作成、編集できる無料サービス

メモ帳もいいですが、横に長くなるので読みにくくなることがあります。またパソコンのメモリに保存しないといけないので、あまりよくないですね。

てなわけで、必ずバックアップは取っておきましょう。

対処法②CSSはheadの要素に入れる

デザインテーマ変更時にカスタマイズが消えないようにする対処法の2つ目は、CSSは個々の方法は、ブログのheadに要素を追加することによってカスタマイズコードを残す方法ですね。

簡単に言うと、CSSのインライン化です。

この方法を使うと、デザインを変更しても、今まで使っていたカスタマイズコードは消えることがありません。

またheadに要素を追加することで、ページ速度の改善にもなるので非常におすすめです。

ぜひやってみましょうね。

やり方に関しては、CSSインライン化でブログの表示速度を上げる方法【はてなブログ】 にて詳しく解説していますので是非どうぞ。

対処法③テストブログを作る

デザインテーマ変更時にカスタマイズが消えないようにする対処法の3つ目は、テストブログで確認することですね。

この方法はテスト用のブログを作って、そのデザインを同じにすることにより、今までのカスタマイズコードを残す方法ですね。

テストブログを作っておくと、そのブログで試してからCSSコードを使うことができるのでより使いやすくなりますね。

ぜひテストブログを作っておきましょう。

ちなみにテストブログに関しては、人には見てもらわないので非公開にしておけば大丈夫です。

新しいテーマに今のカスタマイズCSSが適用されるとは限らない

実は悲しい話ですが、カスタマイズをしていて、新しいテーマにしたときには今までのテーマで使っていたカスタマイズコードがそのまま適用されるとは限りません。

僕はこのブログは「smooth」を使っていますが、「minimalism」から元に戻しています。

その時には四角で囲む<li>タグが外に飛び出てしまって、かなりのズレが生じましたね。

というのも、「minimalism」用のコードだったからなんです。

そのためにテーマの横幅が違うものに変更すると、ズレが発生することがありますので、注意が必要ですね。

テーマ変更でカスタマイズにずれが発生した時の対処法

テーマ変更でカスタマイズがずれた時の対処法についてです。

ずれた場合には、以下の2つの方法があります。

では詳しく見ていきましょう。

対処法①ずれないテーマを探す

まず1つ目の対処法は、ずれないテーマを探すことです。

別のテーマを探して、今の状態と同じものになるテーマを探しましょう。

この方法は超簡単です。

ただ探すのに時間がかかるという難点がありますね。

ただ近年では、ストアテーマが多くなっているので、同じようなストアテーマからストアテーマに変えるのだったら同じようなレイアウトのものにするとズレが少ないですね。

対処法②CSSを変更して、テーマに合わす

2つ目の対処法は、CSSを変更して、テーマに合わすことですね。

書いているCSSの幅などを変更して、CSSの書き換えを行うんです。

最初は難しいですが、やり方を覚えてしまうと簡単にできるようになりますね。

ほとんどが横幅がずれるだけだと思うので、paddingかmarginをいじれば、横幅をあわせられますね。

難しいですがデザインのこともわかるのでかなりおすすめですね。

まとめ：はてなブログのデザインを変更するときには注意が必要

お疲れさまでした。

ここまではてなブログのデザイン変更の仕方についてお話してきました。

まとめると、以下の通り。

まとめ

という感じですね。

デザイン変更をするときには注意が必要です。

注意点をバッチリ守ってデザイン変更して、読者にとって見やすいデザインを作りましょう。

ってことで今回はこの辺で。

また次回に。