[Blog PC版]『店舗用テンプレート01』…画像を背景全体に表示できる

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

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

PC（例）

このデザインを適用する

カスタマイズについて

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

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

1. 背景画像の変更

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

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

• かんたん背景画像

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

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

• HTML

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

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

• 記述例

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

また、<li> ～ </li>タグを追加・削除することで、メインナビゲーション数の調整ができます。
メインナビゲーションのおすすめの表示個数は、全角10文字前後で7個以下にすると、その下の情報もファーストビューに含まれて表示されます。

• メニューやアクセスなど、任意のページを作ってメインナビゲーションにリンクする

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

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

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

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

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

ブログ管理画面にログイン
「ブログ設定」をクリック
デザイン／ブログパーツ設定の「PC」をクリック
「カスタマイズ」タブをクリック
「CSS」タブをクリック
下記HTMLの記述をみつける
{}内に「color:#ffffff;」といった行を追加し、Webカラーコードを変更したい色に書き換える
「保存する」をクリック

• CSS

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

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

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

• CSS

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

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

• CSS

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

• CSS

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

変更前

• HTML

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

変更後

• HTML

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

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

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

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

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