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

このデザインを適用する

このデザインを適用する

カスタマイズについて

ブログデザインのCSS・HTML編集は、 サポートガイドライン記載の通り
サポート対応の範囲外です。 お客様ご自身にてご確認・操作をお願いします。

また、ブログデザインのCSS・HTML編集はPC版のみ可能であり、
スマートフォン版や携帯版は編集できません。

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

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

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

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

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

かんたんタイトル画像に画像をアップロードしてください。
かんたんタイトル画像は、表示したい部分のトリミングができるので、
長方形になるようにトリミングするときれいに収まります。
かんたんタイトル画像機能の利用方法はこちらをご確認ください。

2. 画面上「カフェ情報」「メニュー」などメインナビゲーションの変更

メインナビゲーション部分は、メニューバー機能を利用してカスタマイズすることができます。
詳しくはこちらのヘルプを参考にしてください。

3. 画面右上「お問い合わせ」「プライバシーポリシー」などサブナビゲーションの変更

サブナビゲーションは「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の４つのページのHTMLに記述されているため、全てを変更する必要があります。

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

      <ul id="sub-nav">
        <li><a href="#">お問い合わせ</a></li>
        <li><a href="#">プライバシーポリシー</a></li>
        <li><a href="#">個人情報保護方針</a></li>
      </ul>

ブログ内のURLにすることもできるので、
例えば、特定のカテゴリアーカイブページへ誘導することができます。

      <ul id="sub-nav">
        <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>

また、<li> ～ </li>の行数を追加・削除することでサブナビゲーションの数を調整することができます。サブナビゲーションのおすすめの表示個数は、全角６文字前後で３～４個です。
４個以上増やしても表示が崩れにくいので、お好みに合わせてご利用ください。

会社概要や店舗一覧など、任意のページを作ってメインナビゲーションやサブナビゲーションにリンクする

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

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

ブログのトップページに一定の内容を表示しておけるのがメッセージボードです。

メッセージボード機能の利用方法はこちらをご確認ください。

メッセージボードの文字色や位置の変更は、は下記手順をご参照ください。

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「CSS」タブをクリック
6. 下記HTMLの記述をみつける
7. Webカラーコードや位置の部分を書き換える
・Webカラーコードの部分を書き換える　※メッセージボードの文字色は「color: #fff;」の部分
・位置の部分を書き換える　※位置は「left: 555px;」「top: 30px;」の部分
　左側に寄せたいときは「left: 46px」にしてみてください。
　上下の位置はメッセージボードに登録した文字数によって変わってくるので、
　「top: 30px;」の部分を書き換えて調整してください。
8. 「保存する」をクリック

/* メッセージボード */
.message-board {
	color: #fff;
	background: url(https://parts.blog.livedoor.jp/img/usr/default_2012/common/opacity_b_40.png);
	text-shadow: 0 1px 0 rgba(0,0,0,0.38);
	line-height: 1.6;
	margin-top: 0!important;
	padding: 20px;
	position: absolute;
	left: 555px;
	top: 30px;
	width: 335px;
}

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

20種類以上ある様々なパーツを組み合わせてサイドバーに表示できるのがブログパーツです。
このデザインテンプレートでは右側に表示されます。
ブログパーツの利用方法はこちらをご確認ください。

ブログパーツのラベル(見出し)文字色、リンク色の変更は下記手順をご参照ください。

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

.sidewrapper .sidetitle {
    color: #666;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    padding-bottom: 8px;
    border-bottom: 2px solid #d6d6d6;
    margin-bottom: 15px;
}
.sidewrapper .sidetitle a {
    color: #666;
}

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

ブログタイトルの文字色を変更方法はこちらをご確認ください。

7. トップページの新着情報のラベルを変更する

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

<header class="archives-header" id="index-header">
<h1>更新情報</h1>
</header>

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

ブログタイトルを画像にするためには、画像URLが必要となります。

画像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>

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

ページナビゲーションの変更方法はこちらをご確認ください。
トップページのみ削除するとWebページのように利用することができます。

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

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

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

ブログパーツ「メッセージ」のラベルを「お問い合わせ」に変更すると、
お問い合わせフォームのように利用することができます。
メッセージ機能の利用方法はこちらをご確認ください。

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

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

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

このレイアウトは、最新記事の画像がアイキャッチとしてファーストビューに表示されるので、
ユーザに新着情報を伝えやすくなります。
このレイアウトにするためには、ブログアイテム「記事一覧」を変更します。

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

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

ブログタイトルに背景画像を置く

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「スマートフォン」をクリック
4. 「レイアウト」タブをクリック
5. ブログアイテム「ブログタイトル」を選択
6. 配置で横縦とも「中央」を選択
7. ブログタイトル項目で「テキスト」の「設定」をクリック
8. 背景画像項目で「自分で用意したものを表示する」を選択
9. このような画像を用意して「アップロードする」
10. 画像並びで「横方向に並べる」を選択