Inblog
始める

ブログデザインのカスタマイズ

左サイドバーで「デザイン」をクリックして、ブログの見た目や雰囲気のカスタマイズを始めましょう。

左サイドバーで デザイン をクリックして、ブログの見た目や雰囲気のカスタマイズを始めましょう。

ヘッダー

  • ロゴ

    • ロゴをアップロードし、ロゴをクリックしたときのリンク先URLを設定します。
    • 推奨サイズ: 250×150 または 400×200

  • ヘッダーボタン

    • 2種類のボタンタイプから選択できます:
      • Subscribe Form
        • 「ボタンがクリックされたときにリード獲得フォームを表示します。」
        • フォームの内容と設定はFormタブで構成できます。
      • 入力した URL へ移動
        • ボタンを任意の内部/外部URLにリンクします。

  • ナビゲーションバー

    • Primary Navigation
      • ブログの上部に固定のメニューバーを設定します。
    • Dropdown Menu
      • メニュー項目をクリックしたときに表示されるドロップダウン項目を設定します。

  • カスタムコード

    • カスタムCSSやHTMLを挿入して、ウェブサイトのブランドガイドラインに完全に合わせることもできます。

バナー

  • ブログのタイトルと説明

    • ブログのホームページに表示されるタイトルと説明文をカスタマイズします。

  • テキストカラー

    • バナーのテキストの色を設定します。

  • バナーレイアウト

    • テキストの配置を選びます: 左揃えまたは中央揃え。

  • 背景 (色または画像)

    • バナーの背景をカスタマイズします:
      • 単色の背景色を設定する
      • または背景画像をアップロードする
        • 推奨サイズ: デスクトップ用 1680×450 / モバイル用 390×300

  • カスタムコード

    • カスタムCSSやHTMLを挿入して、ウェブサイトのブランドガイドラインに完全に合わせることもできます。

レイアウト

  • inblogでは、3種類のデフォルト投稿レイアウトから選択できます。

  • カスタムコードを使って、さらに視覚的なカスタマイズを適用することもできます。

    • カスタムコード: HTML/CSSを使って完全に独自のレイアウトを実現します。

フッター

  • フッターセクションに会社情報を追加します。

  • 他のエリアと同様に、フッターもコードでカスタマイズできます。

カスタムコードの入力と保存

コードフィールドが表示されない場合や編集できない場合は、まずブログのプランをご確認ください。カスタムコード設定はFreeプランではロックされています。ブログでカスタムコードが利用可能な場合は、デザイン → 共通 を開き、変更したいエリアの カスタムヘッダー、カスタムバナーコード、または カスタムフッターコード スイッチをオンにしてください。スイッチがオフの場合、エディタの代わりに Switch ON to insert custom ... code. というメッセージが表示されます。投稿一覧レイアウトの場合は、レイアウトセクションでカスタムコード設定を有効にしてください。

ヘッダー、バナー、レイアウト、フッターの各 Custom Code エリアは、すべて同じエディタを使用します。上部に HTML ボックス、下部に スタイル CSS ボックスがあります。CSSルールを直接入力するか、以下のように <style> タグで囲んで入力してください。新しく追加または編集されたCSSルールは、コードを適用すると自動的に <style> タグで囲まれます。

<style>
  h2 {
    font-size: 20px;
  }
</style>

変更されていない保存済みのCSSは保持されます。 他の設定やHTMLのみを編集しても、既存のCSSは変換されません。タグのない以前に保存されたCSSを有効にするには、内容を確認して明示的に <style> タグで囲んでください。保存する前にプレビューでデザインを確認してください。 不完全なCSSルールや <style> ブロック、および cover などのプリセット名は、赤字のエラーを引き起こします。CSSフィールドにHTMLやスクリプトを追加しないでください。既存のフィールドにすでにそれらが含まれている場合は、他のコード、スタイル属性、順序を変更せずに、そのCSSコンテンツを編集できます。

コードは、以下の両方のステップを完了した後にのみブログに適用されます:

  1. コードを適用 をクリックします。コードが検証され、エディタ内のプレビューに反映されます。この時点ではまだ保存されていません。
  2. 設定パネルの上部に固定されている 保存 をクリックします。このステップが完了して初めて、変更がブログに公開されます。

コードを適用 をクリックした後に保存せずにデザイン画面を離れると、変更内容は失われます。未保存の変更がある状態で離れようとすると、確認ダイアログが表示されます。

  • カスタムコードは画面ごと、およびエリアごとに保存されます。 デザイン画面の上部にある 共通、ホーム / カテゴリ、投稿、著者、404 の各タブにはそれぞれ個別のコードが保持され、共通 内でもヘッダー、バナー、フッターは別々のボックスになっています。変更したい画面のタブにコードを入力してください（例: 投稿本文の間隔を調整する場合は 投稿 タブで設定します）。
  • a や button などの広範なCSSセレクタは、ブログ全体に影響を与える可能性があります。その場合、エディタに警告が表示されます。ルールを特定のエリアにのみ適用したい場合は、セレクタのスコープを絞り込んでください。

404エラーページ

  • ユーザーが存在しないURLにアクセスしたときに表示される、カスタム404エラーページを設定できます。

モバイルプレビュー対応

  • 「ブログのデザインは完全にレスポンシブです。」エディタから、デスクトップとモバイルの両方の表示でブログがどのように見えるかを直接プレビューできます。

最終更新 2026-10-14

前へブログ設定の概要次へチームメンバーの管理