ライブドアブログのヘルプ(PC向け)

このデザインを適用する

このデザインを適用する

カスタマイズについて

お客様のCSS・HTML編集に伴い、ブログ表示が崩れる可能性がございますので、
デザイン保存機能を利用して、編集前に保存してください。
また、ブログ崩れが発生しても弊社では対応いたしかねますので、予めご了承ください。

・ブログデザインのカスタマイズについてのヘルプページはこちら
・カスタマイズしたデザインの保存についてのヘルプページはこちら

　項目一覧　
（確認したい項目をクリックしてください）

1. メインイメージの変更
2. 画面右上「ホーム」「お問い合わせ」などサブナビゲーションの変更
3. メッセージボードの変更
4. サイドバー（左）のブログパーツの表示を変更する
5. ブログタイトルの文字色を変更する
6. トップページの記事一覧のラベルを変更する
7. ブログタイトルを画像にする
8. ページナビゲーションの変更
9. トップページに表示する記事数の変更
10. お問い合わせフォームを設置する
11. スマートフォン版のレイアウト紹介

1. メインイメージの変更

2. 画面右上「ホーム」「お問い合わせ」などサブナビゲーションの変更

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「トップページ」タブをクリック
※「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」も全て同様に変更します。
6. 各ページから下記HTMLの変更前の記述をみつける
7. 「ホーム」や「お問い合わせ」部分と、
   a href=以降の""内の「<$BlogUrl$>」や「#」の部分を任意の表記やURLに書き換える
※不要な場合は<ul>～</ul>を削除すると表示されなくなります。
8. 「保存する」をクリック

      <ul id="header-menu">
        <li><a href=" <$BlogUrl$>">ホーム</a>ｌ</li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>

      <ul id="header-menu">
        <li><a href="http://blog.livedoor.jp/staff/">公式ブログ</a>ｌ</li>
        <li><a href="http://help.blogpark.jp/">ヘルプ</a>ｌ</li>
        <li><a href="http://docs.livedoor.com/privacy/">プライバシーポリシー</a>ｌ</li>
        <li><a href="http://docs.livedoor.com/rules/">利用規約</a></li>
      </ul>

• 会社概要や支払い・送料など、任意のページを作ってサブナビゲーションにリンクする

1. ブログ管理画面にログイン
2. 「記事を書く」をクリック
3. ナビゲーションにリンクしたい内容の記事を1記事1内容で書く
例えば、1記事目に会社概要、2記事目に支払い・送料などです。
その際、記事カテゴリ名を店舗情報などにしてまとめておくと、後で管理するとき便利です。
4. ブログにアクセスして書いた記事のURLをコピー
5. 上記「サブナビゲーションの変更」の案内を参考に、
   a href=以降の""内にURLをペーストしてください。
   

3. メッセージボードの変更

ブログのトップページに一定の内容を表示しておけるのがメッセージボードです。
こちらのデザインテンプレートはメインイメージの下に表示されます。

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「CSS」タブをクリック
6. 下記HTMLの記述をみつける
7. Webカラーコードの部分を書き換える
※メッセージボードの文字色は「color: #333333;」の部分
8. 「保存する」をクリック

/* メッセージボード */
.message-board {
    background-color: #f5f5f5;
    color: #333333;
    line-height: 1.6;
    margin-top: 20px;
    overflow: hidden;
    padding: 20px;
}

4. サイドバー（左）のブログパーツの表示を変更する

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「CSS」タブをクリック
6. 下記HTMLの記述をみつける
7. Webカラーコードの部分を書き換える
・ブログパーツのラベル(見出し)文字色は、「.sidewrapper .sidetitle」に続く「color: #9e9e9e;」の部分
・ブログパーツのラベル(見出し)リンク色は、「.sidewrapper .sidetitle a 」に続く「color:#333;」部分
8. 「保存する」をクリック

.sidewrapper .sidetitle {
    color: #9e9e9e;
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 20px;
}
.sidewrapper .sidetitle a {
    color: #333;
}

5. ブログタイトルの文字色を変更する

6. トップページの記事一覧のラベルを変更する

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「トップページ」タブをクリック
6. 下記HTMLの記述をみつけたら、”新着一覧”の部分を書き換える
7. 「保存する」をクリック

<h2>新着一覧</h2>

7. ブログタイトルを画像にする

画像URLをコピー

1. ブログ管理画面にログイン
2. 「画像/ファイル」をクリック
3. 画像をアップロード
4. 画像一覧の画像をクリックして画像のURLとサイズをコピー

ブログタイトルを画像にする

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「トップページ」タブをクリック
※「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」も全て同様に変更します。
6. 各ページから下記HTMLの変更前の記述をみつける
7. <$BlogTitle ESCAPE$>の部分を下記変更後のようにimgタグに書き換える
8. コピーした画像URLとサイズを指定
9. 「保存する」をクリック

<h1 id="blog-title"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>

<h1 id="blog-title"><a href="<$BlogUrl$>"><img width="画像の横幅" height="画像のサイズ" alt="<$BlogTitle ESCAPE$>" src="画像のURL"></a></h1>

8. ページナビゲーションの変更

9. トップページに表示する記事数の変更

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. 「基本設定」をクリック
4. トップページの表示件数を変更
5. 「設定する」をクリック

10. お問い合わせフォームを設置する

11. スマートフォン版のレイアウト紹介

スマートフォン版のレイアウトは、下記4つのページで構成されており、
各ページのパーツを組み合わせることによって好みの内容を表示することができます。

• トップページ
• アーカイブページ(カテゴリ別や月別)
• 個別記事ページ
• 画像ページ

記事一覧のレイアウトの変更

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「スマートフォン」をクリック
4. 「レイアウト」タブをクリック
5. 「トップページ」にブログアイテム「記事一覧」が追加されているか確認
※追加されていない場合、追加を行ってください。
6. ブログパーツ「記事一覧」の「設定」をクリック
7. スタイル項目で「ギャラリー」を選択
8. 「保存する」をクリック