【はてなブログ】ブログのテーマを「テーマストア」で無料でインストールして使用する方法(図解入り)

ブログのテーマを「テーマストア」で無料でインストールして使用する方法

「はてなブログ」って「WordPress」みたいにテーマを選択することができるの?

「はてなブログ」でも「WordPress」のようにテーマを選択することができるよ。

それってかなりたくさんの種類のテーマがあるの?

それが「はてなブログ」の「公式テーマ」では、35種類程度しかテーマがないんだよ。

それだったら「はてなユーザー」ってみんなよく似たテーマのサイトになってしまうってこと?

確かに「はてなブログ」を運営されている方の多くの方は、よく似たテーマに偏りがちになってしまっているかも知れないね。

じゃあ公式テーマ以外では無料でテーマを選べないってことなのかな?

いや、そんなことはないよ。公式テーマ以外にも「テーマストア」というところで新たなテーマをインストールするという方法があるんだよ。しかしテーマをむやみやたらにインストールしてしまうと少しやっかいなことになってしまうんだ。

えっそうなんだ。どんなやっかいなことになるの?

それを今回の記事で書いていこうと思ってるんだよ。

早く聞かせてよ!

了解!
というわけで今回は安全な方法で『【はてなブログ】ブログのテーマを「テーマストア」で無料でインストールして使用する方法(図解入り)』について解説させていただきたいと思います。

よろしく~!

こんばんは!たかぼんブログドットコムのたかぼんです。

ブログの「デザインCSS」に記載したCSSコードを退避しておく

ブログを運営しているとそのブログのデザインを変更するために「デザインCSS」にCSSのコードをコピペされた経験のある方は結構多いかと思います。

この「デザインCSS」に一度もコードをコピペしたことがなく、初期状態のままの方であれば、CSSコードを退避する必要はありません。

しかし少しでもCSSコードをコピペされた経験のある方であれば、新しいブログのテーマをインストールする時に、コピペされたCSSコードはすべて削除されてしまい、「デザインCSS」の欄が初期化されてしまうのでご注意ください。

ですので安全に「テーマストア」にあるテーマをインストールしていただくために、まずはその「デザインCSS」のコードの退避方法から説明させていただきます。

ご存知の方はこの項目を飛ばしていただいても大丈夫かと思います。

ダッシュボードからデザインタブを選択してクリックする

まずは「はてなブログ」管理画面である「ダッシュボード」の画面から「デザイン」タブを選択してクリックします。

公式テーマ

すると画面の左側に「公式テーマ」がズラリと縦に並んでいると思います。通常であればこの中からテーマを選択すればいいのですが、これだと「はてなユーザー」のブログはみんなここで選択したテーマに偏ってしまいます。

そこで「公式テーマ」以外のテーマをインストールするのですが、その前に先ほど言っていた「デザインCSS」のコードを退避する方法から説明いたします。

カスタマイズを選択してクリックする

「デザイン」タブから左上の「カスタマイズ」という名前のスパナのような形のマークを選択してクリックします。

デザインCSSを選択してクリックする

「カスタマイズ」の中に「デザインCSS」というタブを選択してクリックします。

デザインCSSをコピーしておいてテキストをメモ帖などに貼り付けて保管しておく

上記の画像の「デザインCSS」のボックスを開くとコードが出てくるのですが、上の3行程度は初期のコードなのでコピーはしなくても大丈夫です。

そこから下のコードはすべて削除されてしまうので、コピーしてどこかに貼り付けて退避しておかなければなりません。テキスト形式でメモ帳やWordなどに貼り付けて保存しておくと安全です。

実際にテーマをインストールしてみる

デザインテーマを選択してクリックする

再度「デザイン」タブの「デザインテーマ」を選択してクリックして戻ります。

「テーマストアでテーマを探す」を選択して右クリックして「新しいタブで開く」をクリックする

「デザインテーマ」の一番下までスクロールすると、「テーマストアでテーマを探す」という覧があるので、それを選択して右クリックして「新しいタブで開く」をクリックします。

テーマストア

すると新しいタブに「テーマストア」の画面が出てきます。その中の「人気順」を選択してクリックします。

人気のあるテーマが出てくる

すると約180種類のテーマが出てきます。その中でも1番人気があるのが「Minimalism(ミニマリズム)」というテーマになっています。「Minimalism」はシンプルで使いやすいという理由から多くの方に利用されているようです。

ここではその「Minimalism」を選択した画面で説明していきますが、「Minimalism」に限らず実際にはあなたの好きなテーマを選択していただいたらいいかと思います。

ちなみに参考までに書いておきますが、現在の筆者のブログ(takabonblog.com)で使用しているテーマは「Neumorphism(ニューモーフィズム)」というテーマで作っています。

では実際に「Minimalism」というテーマを選択してインストールしていくところを解説いたします。

プレビューしてインストールするをクリックする

まず上記の「Minimalism」というテーマがどんなものかを見てみます。「プレビューをインストール」という青いボタンをクリックしてみます。

あなたのブログ名をクリックする

上記のように「使用するブログを選択」と書いてある下にあなたのブログ名が掲載されていると思うので、そこから変更するブログ名を選択してクリックします。

このテーマをインストールする

するとテーマが変更されたあなたのブログがプレビュー画面に出てきます。

このまま「このテーマをインストール」という青いボタンをクリックしてしまうと右に書いてある注意文の通り「現在設定されているテーマ、デザインCSS、背景画像が破棄されます。」になってしまいます。

ですので最初に退避した「デザインCSS」のコードが間違いなく保存されているかを、確認してからインストールすることをオススメします。

このテーマが気に入らなければ元に戻って、同じように別のテーマを選択してプレビュー画面で確かめてみてください。

そしてテーマをインストールし終えたら「デザインCSS」のコードを元に戻す作業が残っています。

カスタマイズを選択してクリックする

再度「デザイン」タブの「カスタマイズ」をクリックします。

先ほど退避していたCSSコードを元に戻します

先ほどコピペして保管しておいた「デザインCSS」のコードを元の場所に貼り付けて戻しておきます。

変更を保存する

最後に一番上のある「変更を保存する」という青いボタンをクリックしてテーマの変更の完了になります。

スマホの画面も新しいテーマの設定にする方法

上記の変更はPCだけになっているので、スマホの画面にも先ほどインストールした新しいテーマの設定に変更する方法も開設させていただきます。

スマホをクリック

「デザイン」タブの画面上部の「スマートフォン」を選択してクリックします。

詳細設定を選択する

「詳細設定」を選択して開きます。

チェックを入れる

「レスポンシブデザイン」にチェックを入れます。

「変更を保存する」という青いボタンをクリックする

最後に「変更を保存する」という青いボタンをクリックします。

そしてスマホの画面が変更されているかをスマホでブログを開いて確認します。

もしスマホの画面のレイアウトの具合が気に入らなければ、上記の「レスポンシブデザイン」のチェックを外して保存すれば、また設定する前の画面に戻ります。

ちなみに筆者はPCのみ「Neumorphism(ニューモーフィズム)」のテーマを使用してスマホも変更したのですが元に戻しています。

まとめ

この記事では『【はてなブログ】ブログのテーマを「テーマストア」で無料でインストールして使用する方法(図解入り)』について解説させていただきました。

なかなかお気に入りのレイアウトになったからよかった!

それは良かったね。「公式テーマ」だと約35種類しかないけれど「テーマストア」に行けば約180種類ものテーマがインストールできるので自分の気に入ったものを選べると思うよ。

そうそう!インストールしなくても、プレビュー画面でいっぱい試すことができるからかなり楽しめたよ。

そうだね。プレビュー画面で気に入ったものをインストールすればいいと思うよ。
テーマでブログの雰囲気も少し変わってくるので気分転換にもなって、ブログを書くモチベーションが上がるといいね。これからもがんばってね。

最後までお読みいただきありがとうございました。感謝いたします。

少しでもあなたのお役に立てたらうれしいです。

ではまた!

はてなブログの方は

読者登録をお願いします(^_-)-☆

ブログを始めるなら【はてなブログPro】

ドメイン取るなら【お名前.com】

レンタルサーバーなら【エックスサーバー】

アフィリエイトで収入を得るならA8.net

アフィリエイトで収入を得るなら「もしもアフィリエイト」

▼今すぐTwitterのフォローをする▼

▼ブログ村に参加しました▼

雑記ブログ 芸能ブログ・テーマ
雑記ブログ(2021年9月9日17:00より)

▼この記事を今すぐSNSにシェアする▼