ブログのデザインを変更する（カスタマイズ）

デザインカスタマイズ

「カスタマイズ」ページでは、ブログの背景など細かい部分を個別に編集できます。「カスタマイズ」ページへは、デザイン設定画面の左上、真ん中のアイコン（スパナアイコン）を押せば、移動できます。

全体のデザインを変更したい場合は、ヘルプ「ブログのデザインを変更する」を、スマートフォンで表示されるデザインを設定したい場合は、ヘルプ「ブログのデザインを変更する（スマートフォン）」を参照してください。

カスタマイズ設定の操作
注意事項
関連記事
- さまざまなサイドバー・モジュール
関連記事（はてなブログ開発ブログ）

カスタマイズ設定の操作

設定項目ごとに操作方法を説明します。

変更した内容は「変更を保存する」ボタンを押すまで反映されません。

ブログの背景

「背景画像」と「背景色」タブを編集することで、背景を好みのスタイルに変更できます。

背景画像

ブログの背景画像を切り替えます。
- 好みの画像をクリックすれば、背景画像が変わります。

オリジナルの画像をアップロードすることもできます。
- 画像をアップロードする場合は「ファイルを選択」ボタンを押して、自分の端末から画像ファイルを選択してください。
- 「現在の画像」としてアップロードした画像が表示されたら画像の投稿は完了です。
- 続いて、背景画像の表示設定を選択してください。
  - 「表示」では、画像を配置する位置を選択してください。
  - 「繰り返し」では、画像の繰り返し設定を選べます。
  - 「スクロール」では、背景画像のスクロールの可否が選べます。

背景色

ブログの背景色を選択できます。
- 好みの背景色をクリックすれば、背景色が変わります。

ヘッダ

「ヘッダ画像」と「ブログタイトル下」を編集できます。

「ヘッダ画像」では、ヘッダに表示する画像をアップロードできます。
- 画像をアップロードする場合は「ファイルを選択」ボタンを押して、自分の端末から画像ファイルを選択してください。
  - 画像の推奨サイズは、「ヘッダ画像の推奨サイズ」をご覧ください。
- 画像の表示位置や、ブログタイトルのテキストを重ねて表示するかどうかを設定可能です。
  - ブログ名を含むロゴを画像として使用するには、「画像だけ表示」を選択します。

「ブログタイトル下」では、ヘッダのタイトル下にHTMLコードを自由に配置できます。
- 詳細は「ブログパーツやソーシャルプラグインを配置する」を参照してください。

記事

ブログ内にある記事ページ（一つの記事だけが表示されるページ）を編集できます。

「記事ページをプレビュー」をオンにすると、右画面が記事を1つだけ表示するページに変わり、変更点がわかりやすくなります。
ソーシャルパーツ(記事をSNSなどにシェアするボタン)を表示できます。
記事上下にHTMLを自由に記述できます。
- ソーシャルパーツや記事上下について、詳細は「記事ごとにブログパーツやソーシャルプラグインを配置する」を参照してください。
関連する記事を表示したい場合は「関連記事を記事下に表示する」を選択してください。
パンくずリストを設定する場合は、「記事ページにパンくずリストを表示する」を選択してください。
最終更新日を表示することができます。詳細は「記事に最終更新日を表示する」を参照してください。

サイドバー

サイドバーを編集できます。サイドバーの位置はデザインテーマごとに異なります。
下の画像で利用しているデザインテーマでは、ブログ下部にサイドバーが設置されています。

「検索」や「最近記事」などのモジュールを配置できます。
- 詳細は「サイドバーにモジュールを設置する」を参照してください。
サイドバーの「HTML」モジュールでは、HTMLコードを自由に配置できます。
- 詳細は、「サイドバーにブログパーツやプラグインを配置する」を参照してください。

フッタ

ブログのフッタを編集できます。

ブログ全体の下部にHTMLコードを自由に配置できます。
- 詳細は「ブログパーツやソーシャルプラグインを配置する」を参照してください。

デザインCSS

デザインをカスタマイズするCSSを記述できます。
- 詳細は「デザインCSSを記述する」を参照してください。
独自に作成したデザインテーマも設定できます。
- 独自のデザインテーマを作成する場合は「はてなブログテーマ制作の手引き」を参照してください。

注意事項

「ブログタイトル下」などHTMLを自由に記述できる場所にはWeb広告を設置することもできますが、はてなブログ個人営利利用ガイドラインをお守りいただいた上でご利用ください。

関連記事

さまざまなサイドバー・モジュール

関連記事（はてなブログ開発ブログ）