「店舗用テンプレート02」について

「店舗用テンプレート02」は、
アパレル系のような商品画像をたくさん表示するレイアウトのデザインです。
メインカラムは各記事の画像がタイル状に表示されるので商品を一覧で見せることができ、
新着が目に留まりやすくなっています。

また、ファーストビューにサイドカラム（サイドバー）が入っているので、
ブログパーツを使ってキャンペーンの告知や、カテゴリで商品を探しやすくしたりなど、
自由に表示することができます。

★スマートフォン版管理画面(パソコンから)からの設定方法はこちら

　★スマートフォン版管理画面(スマートフォンから)からの設定方法はこちら

PC（例）

このデザインを適用する

カスタマイズについて

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

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

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

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

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

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

• HTML

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

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

• 記述例

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

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

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

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.「保存する」をクリック

• CSS

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

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

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

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

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

• CSS

.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.「保存する」をクリック

• HTML

<h2>新着一覧</h2>

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. ページナビゲーションの変更

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

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

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

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

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