ブログのデザインを変更する

ブログの管理画面で、左側のサイドバーから「デザイン」をクリックすると、ブログごとの デザイン設定画面 が開きます。

デザイン設定画面では、デザインに必要なメニューが左サイドに集められています。

デザイン設定画面の操作

上部には「管理画面に戻る」と「変更を保存する」という2つの操作ボタンがあります。「変更を保存する」をクリックすると、選択したデザインが実際のブログに反映されます。

3つのタブの役割とデザイン設定の手順

操作ボタンの下には、「デザインテーマ」「カスタマイズ」「スマートフォン」の3つのタブがあります。

はてなブログのデザインをカスタマイズするには、次の手順で操作します。

  1. まず「デザインテーマ」から全体のデザインを選択します。
  2. 次に「カスタマイズ」で、サイドバーなどに配置するモジュールやブログパーツを個別に設定します。

また、「スマートフォン」では、スマートフォンから閲覧したときのデフォルト表示をカスタマイズできます。

※スマートフォン版の設定画面ではデザイン設定ができないため、PC版の「スマートフォン」タブから設定します。

デザインプレビュー

デザイン設定画面の中央には大きくプレビューが表示されます。中央のプレビューを確認しながら、デザインのメニューを操作します。

「デザインテーマ」タブ

はてなブログ公式のデザインテーマから、ブログにインストールしたいテーマを選択します。また、これまでにインストールしたことがあるテーマから選ぶこともできます。

※「テーマ ストア」に移動して、ユーザーデザインテーマを利用することもできます。

「カスタマイズ」タブ

次の設定項目があり、それぞれ項目名をクリックすると設定内容が開きます。
項目 設定内容
背景画像 ブログの背景画像を切り替えます。オリジナルの画像をアップロードすることもできます。
背景色 ブログの背景色を選択できます。
ヘッダ 「タイトル画像」では、ブログタイトルに表示する画像をアップロードできます。画像の表示位置や、ブログタイトルのテキストを重ねて表示するかどうかを設定できます。ブログ名を含むロゴを画像として使用するには、「画像だけ表示」を選択します。
「タイトル下」では、ヘッダのタイトル下にHTMLコードを自由に配置できます。詳細は「ブログパーツやソーシャルプラグインを配置する」を参照してください。
記事 ソーシャルパーツを表示したり、記事上下にHTMLを自由に記述できます。詳細は「記事ごとにブログパーツやソーシャルプラグインを配置する」を参照してください。
サイドバー 「検索」や「最近記事」などのモジュールを配置できます。詳細は「サイドバーにモジュールを設置する」を参照してください。
フッタ ブログ全体の下部にHTMLコードを自由に配置できます。詳細は「ブログパーツやソーシャルプラグインを配置する」を参照してください。
デザインCSS デザインをカスタマイズするCSSを自由に記述できます。独自に作成したデザインテーマも設定できます。

※独自のデザインテーマを作成するには「はてなブログテーマ制作の手引き」を参照してください。

※「タイトル下」などHTMLを自由に記述できる場所にはWeb広告を設置することもできますが、はてなブログの ガイドライン に定める「広告ポリシー」等の範囲内でご利用ください。

「スマートフォン」タブ

スマートフォンで表示されるデザインを設定できます。ヘルプ「ブログのデザインを変更する(スマートフォン)」を参照してください。