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

「店舗用テンプレート01」は、
飲食・美容系などの店舗イメージを印象づけるレイアウトのデザインです。
お客様が最初にアクセスしたとき、背景全体に画像を表示するのでインパクトがあり、興味を惹きつけやすくしています。

サイドカラムはメインナビゲーションと記事一覧を更新情報として表示し、ブログパーツを使って営業時間や電話番号などを自由に表示することができます。

このデザインを適用する

このデザインを適用する

カスタマイズについて

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

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

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

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

1. 背景画像の変更

ブログ設定＞デザイン／ブログパーツ設定のPC＞タイトル/背景画像タブへ行きます。

かんたん背景画像に画像をアップロードしてください。
写真を使う場合は横1024px縦680以上のサイズがおすすめです。

• かんたん背景画像

2. 画面左上「アバウト」「メニュー」などメインナビゲーションの変更

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「トップページ」タブをクリック
※「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」も全て同様に変更します。
6. 各ページから下記HTMLの変更前の記述をみつける
7. 「アバウト」や「メニュー」、「アクセス」などの部分と、
   a href=以降の""内の「#」の部分を任意の表記やURLに書き換える
8. 「保存する」をクリック

      <ul id="blog-link">
        <li><a href="#">アバウト</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">アクセス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>

      <ul id="blog-link">
        <li><a href="http://help.blogpark.jp/">ヘルプ</a></li>
        <li><a href="http://blog.livedoor.jp/staff/">スタッフブログ</a></li>
        <li><a href="https://www.livedoor.com/privacy/">プライバシーポリシー</a></li>
        <li><a href="https://www.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. {}内に「color:#ffffff;」といった行を追加し、Webカラーコードを変更したい色に書き換える
8. 「保存する」をクリック

/* メッセージボード */
.message-board {
	line-height: 1.6;
	overflow: hidden;
	padding: 15px;
}

4. フォントをゴシック体にする

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「PC」をクリック
4. 「カスタマイズ」タブをクリック
5. 「CSS」タブをクリック
6. 下記HTMLの記述をみつける

body {
	color: #fff;
	font: 14px/1.2 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','ＭＳ Ｐ明朝','MS PMincho', serif;
}

「font:」以降の部分を下記のように変更すると、どのブラウザでもゴシック体で表示されます。

body {
	color: #fff;
	font: 14px/1.2 Helvetica,Verdana,sans-serif;
}

5. 右カラムのブログパーツの表示を変更する

サイドバーは、20種類以上ある様々なブログパーツを組み合わせて表示することができます。
※このデザインテンプレートではトップページ以外の左側に表示されます。

ブログパーツの利用方法はこちらをご確認ください。

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

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

.sidewrapper .sidetitle {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 0.7em;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(255,255,255,0.4);
}
.sidewrapper .sidetitle a {
	color: #fff;
}

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

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

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

ブログタイトルを画像にするためには、画像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>

8.サイドバー（左）に表示する記事数の変更

ブログ設定＞基本設定の「トップページの表示件数」、および「アーカイブの表示件数」から行えます。

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

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

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

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

このデザインテンプレートのレイアウトにするには、全体の背景画像と枠の色と背景を設定します。

全体の背景画像を変更

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「スマートフォン」をクリック
4. 「カスタマイズ」タブをクリック
5. 背景画像で「自分で用意したものを表示する」を選択
6. 「アップロードする」より画像アップロード
サイズは横320px×縦640pxぐらいの縦長で、容量が重すぎない画像がおすすめです
7. 画像並び項目で「タイル状に並べる」を選択
8. 「保存する」をクリック

引き続き、ブログタイトルは「テキスト」、配置は横縦とも「中央」にチェックを入れるとブログタイトルの文字位置の変更ができます。

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「スマートフォン」をクリック
4. 「レイアウト」タブをクリック
5. ブログパーツ「ブログタイトル」の「設定」をクリック
6. ブログタイトル項目で「テキスト」を選択
7. 配置項目で「中央」を選択
8. 「保存する」をクリック

全体の枠色と背景色を変更

1. ブログ管理画面にログイン
2. 「ブログ設定」をクリック
3. デザイン／ブログパーツ設定の「スマートフォン」をクリック
4. 「カスタマイズ」タブをクリック
5. アイテム枠の「アイテム枠線色」と「アイテム背景色」を指定
※先に設定した背景画像と、枠色と背景色を見ながら文字が読みやすい透明度を設定してください
6. 「保存する」をクリック

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

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