デザインテーマをインストールする

はてなブログでは、「テーマストア」からはてなブログ公式のデザインテーマやはてなブログユーザーが作成したデザインテーマを自分のブログにインストールできます。

デザインテーマとは

デザインテーマは、はてなブログ公式やユーザーが作成したはてなブログ専用のCSSです。テーマストアからデザインテーマをインストールすれば、CSSの知識がなくても、自分のブログに好みのデザインを適用することができます。

※オリジナルのデザインテーマを作成したい場合は、ヘルプ「デザインテーマ制作の手引き」を参照してください

テーマストア

テーマストアでは、デザインテーマが「人気順」や「新着順」などカテゴリ別に一覧で表示されています。

f:id:hatenablog:20190801121409p:plain
各デザインテーマの紹介ページでは、「テーマの説明」や「テーマ作者」、「インストール数」、「投稿日」、「注意」などが確認できます。
f:id:hatenablog:20190801121415p:plain
また、「利用中のブログ」タブでは、そのデザインテーマをインストールしているブログを一覧で見ることができます。
f:id:hatenablog:20190801121438p:plain:w450

テーマストアからデザインテーマをインストールする方法

テーマストアから好みのデザインテーマを選択し、デザインテーマの紹介ページに移動します。紹介ページの右側にある「プレビューしてインストール」ボタンを押すと、「適用するブログを選択」という画面が表示されるので、テーマを適用したいブログを選択してください。

f:id:hatenablog:20190801121420p:plain:w300

ブログにデザインテーマをインストールした場合のプレビュー画面に移行するので、表示されているデザインテーマを適用する場合は、「このテーマをインストール」ボタンを押せばインストールは完了です。

f:id:hatenablog:20190801121434p:plain

また、過去にブログに適用したデザインテーマは、テーマストアトップの「インストールしたテーマ」から一覧で確認できます。

f:id:hatenablog:20190801121423p:plain

※一部のデザインテーマは、はてなブログPro(有料プラン)の機能を想定して作られている場合があります。


デザイン設定画面からデザインテーマをインストールする

はてなブログ公式のデザインテーマは、ブログ管理画面の「デザイン設定画面」にある「デザインテーマ」タブからもインストールできます。

f:id:hatenablog:20190801121426p:plain:w300
好みのデザインテーマを選択するとプレビュー画面が表示されるので、問題がない場合は、「変更を保存する」ボタンを押せば、インストール完了です。

レスポンシブ対応のデザインか確認する

スマートフォンでもPCと同一のデザインを使用したい場合はレスポンシブ対応のデザインテーマを設置してください。レスポンシブデザイン対応のはてなブログ公式デザインテーマには、テーマの説明文に【レスポンシブデザイン対応】という記載があります。

f:id:hatenablog:20190801121430p:plain
ユーザー作成のテーマのレスポンシブデザイン対応の可否に関しては、ヘルプ「デザインテーマ制作の手引き」を参考にテーマの説明文やコードの確認を行うことを推奨します。

レスポンシブデザイン設定をする

レスポンシブデザインの設定をする場合は、「デザイン設定画面」の「スマートフォン」タブから「レスポンシブデザイン」設定をおこなってください。
詳しくはヘルプ「ブログのデザインを変更する(スマートフォン)」を確認してください。