アパレル系のような商品画像をたくさん表示するレイアウトのデザインです。メインカラムは各記事の画像がタイル状に表示されるので商品を一覧で見せることができ、新着が目に留まりやすくなっています。また、ファーストビューにサイドカラムが入っているので、ブログパーツを使ってキャンペーンの告知や、カテゴリで商品を探しやすくしたりなど、自由に表示することができます。

(※こちらは有料プランのブログ専用のデザインになります)

PC(カスタマイズ例)
ver06_yk_tenpo01_2c_pc

このデザインを適用する

スマートフォン(カスタマイズ例)
tenpo01_sp

このデザインを適用する

更新履歴

2013/7/11リリース

PC版カスタマイズ方法の紹介

メインイメージの変更

店舗メインイメージ

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

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

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

店舗サブナビゲーション

ブログ設定デザイン/ブログパーツ設定のPCカスタマイズタブへ行きます。サブナビゲーションは以下の4つのページのHTMLに記述されているため、全てを変更する必要があります。

  • トップページ
  • 個別記事ページ
  • カテゴリアーカイブ
  • 月別アーカイブ

まずは、各ページのHTMLソース内から以下の記述をみつけてください。

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

ホームやお問い合わせなどの部分と、a href=以降の""内の部分は任意の表記やURLに書き換えることができます。

不要な場合は<ul>~</ul>を削除すると表示されなくなります。

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

      <ul id="sub-nav">
        <li><a href="http://blog.livedoor.jp/staff/archives/cat_10037910.html">商品一覧</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>の行数を追加・削除することでサブナビゲーションの数を調整することができます。サブナビゲーションのおすすめの表示個数は、全角6文字前後で3~4個です。4個以上増やしても表示が崩れにくいので、お好みに合わせてご利用ください。

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

マイページ記事を書くからナビゲーションにリンクしたい内容の記事を1記事1内容で書きます。例えば、1記事目に会社概要、2記事目に支払い・送料などです。その際、カテゴリ名を店舗情報などにしてまとめておくと、後で管理するとき便利です。

ブログにアクセスして書いた記事のURLをコピーします。

上記にある「サブナビゲーションの変更」の案内を参考に、a href=以降の""内にURLをペーストしてください。

メッセージボードの変更

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

店舗メッセージボード

表示したい内容の変更は、ブログ設定基本設定から行えます。

文字色の変更は、ブログ設定デザイン/ブログパーツ設定のPCカスタマイズタブのCSSへ行きます。
まずは、以下の記述をみつけてください。

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

文字色は、「color: #333333;」の部分です。webカラーコードを変更したい色に書き換えます。

サイドバー(左)のブログパーツの表示を変更する

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

店舗サイドバー

ブログパーツの設定はブログ設定デザイン/ブログパーツ設定のブログパーツから行えます。

ブログパーツの見出し(設定画面では「ラベル」となっています)の文字色、リンク色の変更は、ブログ設定デザイン/ブログパーツ設定のPCカスタマイズタブのCSSへ行きます。
まずは、以下の記述をみつけてください。

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

文字色は、「.sidewrapper .sidetitle」に続く「color: #9e9e9e;」の部分です。webカラーコードを変更したい色に書き換えます。リンク色を変更したい場合は「.sidewrapper .sidetitle a 」に続く「color:#333;」部分を書き換えてください。

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

こちらをご覧ください。
ブログタイトルの文字色を変更する - livedoor ブログ ヘルプセンター

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

<キャプチャ>

ブログ設定デザイン/ブログパーツ設定のPCカスタマイズタブのトップページへ行きます。
まずは、以下の記述をみつけてください。

<h2>新着一覧</h2>

「新着一覧」の部分を書き換えてください。

おすすめのカスタマイズ

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

画像/ファイルから画像をアップロードしてください。画像一覧の画像をクリックして画像のURLとサイズをコピーします。

ブログ設定デザイン/ブログパーツ設定のPCカスタマイズタブへ行きます。ブログタイトルは以下の4つのページのHTMLに記述されているため、全てを変更する必要があります。

  • トップページ
  • 個別記事ページ
  • カテゴリアーカイブ
  • 月別アーカイブ

まずは、各ページのHTMLソース内から以下の記述をみつけてください。

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

<$BlogTitle ESCAPE$>の部分を下記のようにimgタグに書き換え、上記の画像のURLとサイズを指定して変更を保存します。

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

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

こちらをご覧ください。トップページのみ削除するとホームページのように利用することができます。
ページナビゲーションをカスタマイズする - livedoor ブログ ヘルプセンター

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

ブログ設定基本設定から行えます。

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

こちらをご覧ください。メッセージブログパーツのラベルをお問い合わせにして、お問い合わせフォームのように利用することができます。
メッセージ機能を使う - livedoor ブログ ヘルプセンター

スマートフォン版カスタマイズ方法の紹介

tenpo01_sp

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

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

このデザインテンプレートのレイアウトにするには、トップページに記事一覧(画像付き)パーツを使います。最新記事の画像がアイキャッチとしてファーストビューに表示されるので、ユーザに新着情報を伝えやすくなります。

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

ブログ設定デザイン/ブログパーツ設定のSPレイアウトタブへ行きます。
トップページに記事一覧(画像付き)を追加します。投稿者を表示したくない場合は「非表示」にチェックを入れてください。
カテゴリや月別アーカイブページも同様の設定にすることをおすすめします。