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

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

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

カスタマイズ設定の操作

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

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

ブログの背景

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

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

f:id:hatenablog:20190205145137p:plain:w400

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

f:id:hatenablog:20190205145146p:plain:w400

ヘッダ

タイトル画像」と「タイトル下」を編集できます。
f:id:hatenablog:20190205145140p:plain

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

f:id:hatenablog:20190205145217p:plain:w270

記事

ブログ内にある記事ページ(一つの記事だけが表示されるページ)を編集できます。
f:id:hatenablog:20190205145208p:plain

  • 記事ページをプレビュー」をオンにすると、右画面が記事を1つだけ表示するページに変わり、変更点がわかりやすくなります。

f:id:hatenablog:20190205145156p:plain:w400

  • ソーシャルパーツ(記事をSNSなどにシェアするボタン)を表示できます。
  • 記事上下にHTMLを自由に記述できます。
  • 関連する記事を表示したい場合は「関連記事を記事下に表示する」を選択してください。

f:id:hatenablog:20190205145220p:plain:w400

  • パンくずリストを設定する場合は、「記事ページにパンくずリストを表示する」を選択してください。

サイドバー

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

フッタ

ブログのフッタを編集できます。
f:id:hatenablog:20190205145214p:plain

デザインCSS

f:id:hatenablog:20190205145159p:plain:w400
デザインをカスタマイズするCSSを自由に記述できます。

注意事項

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