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


カスタマイズについて
ブログデザインのCSS・HTML編集は、 サポートガイドライン記載の通りサポート対応の範囲外です。 お客様ご自身にてご確認・操作をお願いします。
また、ブログデザインのCSS・HTML編集はPC版のみ可能であり、
スマートフォン版や携帯版は編集できません。
お客様のCSS・HTML編集に伴い、ブログ表示が崩れる可能性がございますので、
デザイン保存機能を利用して、編集前に保存してください。
また、ブログ崩れが発生しても弊社では対応いたしかねますので、予めご了承ください。
・ブログデザインのカスタマイズについてのヘルプページはこちら
・カスタマイズしたデザインの保存についてのヘルプページはこちら
項目一覧
(確認したい項目をクリックしてください)
- メインイメージの変更
- 画面右上「ホーム」「お問い合わせ」などサブナビゲーションの変更
- メッセージボードの変更
- サイドバー(左)のブログパーツの表示を変更する
- ブログタイトルの文字色を変更する
- トップページの記事一覧のラベルを変更する
- ブログタイトルを画像にする
- ページナビゲーションの変更
- トップページに表示する記事数の変更
- お問い合わせフォームを設置する
- スマートフォン版のレイアウト紹介
1. メインイメージの変更

かんたんタイトル画像に画像をアップロードしてください。
かんたんタイトル画像は、表示したい部分のトリミングができるので、
長方形になるようにトリミングするときれいに収まります。
かんたんタイトル画像機能の利用方法はこちらをご確認ください。
2. 画面右上「ホーム」「お問い合わせ」などサブナビゲーションの変更

- ブログ管理画面にログイン
- 「ブログ設定」をクリック
- デザイン/ブログパーツ設定の「PC」をクリック
- 「カスタマイズ」タブをクリック
- 「トップページ」タブをクリック ※「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」も全て同様に変更します。
- 各ページから下記HTMLの変更前の記述をみつける
- 「ホーム」や「お問い合わせ」部分と、
a href=以降の""内の「<$BlogUrl$>」や「#」の部分を任意の表記やURLに書き換える
※不要な場合は<ul>~</ul>を削除すると表示されなくなります。
- 「保存する」をクリック
<ul id="header-menu"> <li><a href=" <$BlogUrl$>">ホーム</a>l</li> <li><a href="#">お問い合わせ</a></li> </ul>ブログ内のURLに変更することもできるので、
例えば、特定のカテゴリアーカイブページへ誘導することもできます。
<ul id="header-menu"> <li><a href="http://blog.livedoor.jp/staff/">公式ブログ</a>l</li> <li><a href="http://help.blogpark.jp/">ヘルプ</a>l</li> <li><a href="http://docs.livedoor.com/privacy/">プライバシーポリシー</a>l</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をペーストしてください。
その際、記事カテゴリ名を店舗情報などにしてまとめておくと、後で管理するとき便利です。
3. メッセージボードの変更
ブログのトップページに一定の内容を表示しておけるのがメッセージボードです。
こちらのデザインテンプレートはメインイメージの下に表示されます。

メッセージボードの文字色の変更は、は下記手順をご参照ください。
- ブログ管理画面にログイン
- 「ブログ設定」をクリック
- デザイン/ブログパーツ設定の「PC」をクリック
- 「カスタマイズ」タブをクリック
- 「CSS」タブをクリック
- 下記HTMLの記述をみつける
- Webカラーコードの部分を書き換える ※メッセージボードの文字色は「color: #333333;」の部分
- 「保存する」をクリック
/* メッセージボード */ .message-board { background-color: #f5f5f5; color: #333333; line-height: 1.6; margin-top: 20px; overflow: hidden; padding: 20px; }
4. サイドバー(左)のブログパーツの表示を変更する
サイドバーは、20種類以上ある様々なブログパーツを組み合わせて表示することができます。このデザインテンプレートではサイドバーは左側に表示されます。
ブログパーツの利用方法はこちらをご確認ください。

ブログパーツのラベル(見出し)文字色、リンク色の変更は下記手順をご参照ください。
- ブログ管理画面にログイン
- 「ブログ設定」をクリック
- デザイン/ブログパーツ設定の「PC」をクリック
- 「カスタマイズ」タブをクリック
- 「CSS」タブをクリック
- 下記HTMLの記述をみつける
- Webカラーコードの部分を書き換える ・ブログパーツのラベル(見出し)文字色は、「.sidewrapper .sidetitle」に続く「color: #9e9e9e;」の部分
- 「保存する」をクリック
・ブログパーツのラベル(見出し)リンク色は、「.sidewrapper .sidetitle a 」に続く「color:#333;」部分
.sidewrapper .sidetitle { color: #9e9e9e; font-size: 18px; line-height: 1.2; margin-bottom: 20px; } .sidewrapper .sidetitle a { color: #333; }
5. ブログタイトルの文字色を変更する
ブログタイトルの文字色を変更方法はこちらをご確認ください。6. トップページの記事一覧のラベルを変更する
- ブログ管理画面にログイン
- 「ブログ設定」をクリック
- デザイン/ブログパーツ設定の「PC」をクリック
- 「カスタマイズ」タブをクリック
- 「トップページ」タブをクリック
- 下記HTMLの記述をみつけたら、”新着一覧”の部分を書き換える
- 「保存する」をクリック
<h2>新着一覧</h2>
7. ブログタイトルを画像にする
ブログタイトルを画像にするためには、画像URLが必要となります。画像URLをコピー
- ブログ管理画面にログイン
- 「画像/ファイル」をクリック
- 画像をアップロード
- 画像一覧の画像をクリックして画像のURLとサイズをコピー
ブログタイトルを画像にする
- ブログ管理画面にログイン
- 「ブログ設定」をクリック
- デザイン/ブログパーツ設定の「PC」をクリック
- 「カスタマイズ」タブをクリック
- 「トップページ」タブをクリック ※「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」も全て同様に変更します。
- 各ページから下記HTMLの変更前の記述をみつける
- <$BlogTitle ESCAPE$>の部分を下記変更後のようにimgタグに書き換える
- コピーした画像URLとサイズを指定
- 「保存する」をクリック
変更前
<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. トップページに表示する記事数の変更
- ブログ管理画面にログイン
- 「ブログ設定」をクリック
- 「基本設定」をクリック
- トップページの表示件数を変更
- 「設定する」をクリック
10. お問い合わせフォームを設置する
ブログパーツ「メッセージ」のラベルを「お問い合わせ」に変更すると、お問い合わせフォームのように利用することができます。
メッセージ機能の利用方法はこちらをご確認ください。
11. スマートフォン版のレイアウト紹介

スマートフォン版のレイアウトは、下記4つのページで構成されており、
各ページのパーツを組み合わせることによって好みの内容を表示することができます。
- トップページ
- アーカイブページ(カテゴリ別や月別)
- 個別記事ページ
- 画像ページ
このレイアウトは、最新記事の画像がアイキャッチとしてファーストビューに表示されるので、
ユーザに新着情報を伝えやすくなります。
このレイアウトにするためには、ブログアイテム「記事一覧」を変更します。
記事一覧のレイアウトの変更
- ブログ管理画面にログイン
- 「ブログ設定」をクリック
- デザイン/ブログパーツ設定の「スマートフォン」をクリック
- 「レイアウト」タブをクリック
- 「トップページ」にブログアイテム「記事一覧」が追加されているか確認 ※追加されていない場合、追加を行ってください。
- ブログパーツ「記事一覧」の「設定」をクリック
- スタイル項目で「ギャラリー」を選択
- 「保存する」をクリック
※「アーカイブページ」も同様の設定にすることをおすすめします。