紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

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

f:id:slash1196:20210726213752j:plain

f:id:slash1196:20200520205950j:plain

はてなブログ初心者

 

「はてなブログのデザインテーマを変更したいけど、やり方がわからないから教えてほしいな。あとは変更の時の注意点もあったら教えてほしいな。」

 

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

 

この記事でわかること

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

 

こんにちわ、紅蓮です。

 

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

 

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

 

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

 

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

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

 

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

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

 

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

 

では行ってみましょう。

Here We Go!!

 

 

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

f:id:slash1196:20210726213820j:plain

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

 

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

  • 手順①デザイン⇒デザインテーマと行く。
  • 手順②一番下のテーマストアでテーマを探すをクリック
  • 手順③上部のタブをクリック
  • 手順④好きなデザインをクリック
  • 手順⑤右端のプレニューしてインストールをクリック
  • 手順⑥ブログ名をクリック
  • 手順⑦左上の「このテーマをインストールをクリック」
  • 手順⑧ドロップダウンが出てくるので「OK」をクリック
  • 手順⑨デザインテーマがインストールされて適用される

 

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

 

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

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

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

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

 

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

 

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

 

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

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

 

  • トップ:スタッフのセレクションとか、ピックアップなどが出てくる
  • 人気順:はてなブログの中でよくダウンロードされているもの順。
  • 新着順:テーマを作られた日時が新しいもの順。
  • 公式テーマ:公式テーマの人気順

 

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

 

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

 

 

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

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

 

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

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

 

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

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

 

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

そこをクリックします。

 

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

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

 

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

 

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

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

 

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

 

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

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

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

 

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

 

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

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

おめでとうございます。

 

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

f:id:slash1196:20210726213843j:plain

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

 

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

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

 

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

 

以下の画像ですね。

f:id:slash1196:20210726183604j:plain

 

【内容】

blog.hatena.ne.jpの内容

テーマをインストールすると、現在設定しているテーマ、デザインCSS、背景画像が破棄されます。

 

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

 

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

 

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

 

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

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

 

対処法は、以下の通り。

 

  • 対処法①CSSやJavascriptのバックアップを取る
  • 対処法②CSSはheadの要素に入れるといいかも…
  • 対処法③テストブログを作るのもいい

 

では見ていきましょう。

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

  • 対処法①ずれないテーマを探す
  • 対処法②CSSを変更して、テーマに合わす

 

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

 

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

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

 

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

 

この方法は超簡単です。

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

お疲れさまでした。

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

 

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

 

まとめ
  • はてなブログのデザインテーマの変更方法は以下の通り。
    • 手順①デザイン⇒デザインテーマと行く。
    • 手順②一番下のテーマストアでテーマを探すをクリック
    • 手順③上部のタブをクリック
    • 手順④好きなデザインをクリック
    • 手順⑤右端のプレニューしてインストールをクリック
    • 手順⑥ブログ名をクリック
    • 手順⑦左上の「このテーマをインストールをクリック」
    • 手順⑧ドロップダウンが出てくるので「OK」をクリック
    • 手順⑨デザインテーマがインストールされて適用される
  • はてなブログのデザインテーマの変更時に気を付けることは以下の通り
    • デザインを変更すると、いままで自分でデザインCSSはリセットされる
    • デザインテーマを変更時にカスタマイズが消えない対処法
      • ①CSSやJavascriptのバックアップを取る
      • ②CSSはheadの要素に入れる…
      • ③テストブログを作る
    • 新しいテーマに今のカスタマイズCSSが適用されるとは限らない
    • テーマ変更でカスタマイズにずれが発生した時の対処法
      • 対処法①ずれないテーマを探す
      • 対処法②CSSを変更して、テーマに合わす

 

という感じですね。

 

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

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

 

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

また次回に。