ブログの管理画面で、左側のサイドバーから「デザイン」をクリックすると、ブログごとの デザイン設定画面 が開きます。
PC版でデザイン設定画面を開くと、デザインに必要なメニューが左サイドに集められています。
デザイン設定画面の操作
上部には「管理画面に戻る」と「変更を保存する」という2つの操作ボタンがあります。「変更を保存する」をクリックすると、選択したデザインが実際のブログに反映されます。
3つのタブの役割とデザイン設定の手順
「 デザイン設定」の操作ボタンの下には、「デザインテーマ」「カスタマイズ」「スマートフォン」の3つのタブがあります。
はてなブログのデザインをカスタマイズするには、次の手順で操作します。
- まず「デザインテーマ」から全体のデザインを選択します。
- 次に「カスタマイズ」で、サイドバーなどに配置するモジュールやブログパーツを個別に設定します。
また、「スマートフォン」では、スマートフォンから閲覧したときのデフォルト表示をカスタマイズできます。
- スマートフォン版の設定画面ではデザイン設定ができないため、PC版の「スマートフォン」タブから設定します。
デザインプレビュー
デザイン設定画面の中央には大きくプレビューが表示されます。中央のプレビューを確認しながら、デザインのメニューを操作します。
「デザインテーマ」タブ
はてなブログ公式のデザインテーマから、ブログにインストールしたいテーマを選択します。また、これまでにインストールしたことがあるテーマから選ぶこともできます。詳しくはヘルプ「デザインテーマをインストールする」を参照してください。
- 「テーマ ストア」に移動して、ユーザーデザインテーマを利用することもできます。
「カスタマイズ」タブ
ブログの背景やヘッダーなど、細かい部分を個別に編集できます。ヘルプ「ブログのデザインを変更する(カスタマイズ)」を参照してください。
- 独自のデザインテーマを作成するには「はてなブログテーマ制作の手引き」を参照してください。
- 「タイトル下」などHTMLを自由に記述できる場所にはWeb広告を設置することもできますが、はてなブログ個人営利利用ガイドラインをお守りいただいた上でご利用ください。
「スマートフォン」タブ
スマートフォンで表示されるデザインを設定できます。ヘルプ「ブログのデザインを変更する(スマートフォン)」を参照してください。
関連記事(はてなブログ開発ブログ)
デザインテーマ
- 2013-11-21 デザイン設定とテーマ ストアを改善! いろいろなデザインテーマに着替えやすくなりました
- 2013-04-10 テーマ ストアをさらに強化したほか、下書き一覧などを追加しました
- 2013-03-27 デザインCSSをカスタマイズする土台に適したサンプルテーマを公開しました
- 2013-02-20 「テーマ ストア」をオープンしました