メインコンテンツへスキップ

[Blog PC版]『法人用テンプレート02』…企業や店舗、あらゆるジャンルに対応

  • カスタマイズ次第で企業や店舗、あらゆるジャンルに対応できるデザインを紹介。
  • ファーストビューにテキストのグローバルメニューと写真を設定することが可能。
  • サイドカラムはブログパーツを使って、PRしたいものを自由に表示できる。

「法人用テンプレート02」は、
カスタマイズ次第で企業や店舗、あらゆるジャンルに対応できるデザインです。

ファーストビューにテキストのグローバルメニューと、ページの"顔"となるイメージや写真が設定できます。
メインカラムは記事のタイトルと冒頭が表示され、画像がアイキャッチとなるので新商品などの紹介に最適です。
サイドカラムはブログパーツを使って、PRしたいものやお問合せ先など自由に表示することができます。

 

PC（例）

07c3e30d.jpg

 

このデザインを適用する

 

カスタマイズについて

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

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

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

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

 

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

  1. メインイメージの変更
  2. 画面上「カフェ情報」「メニュー」などメインナビゲーションの変更
  3. 画面右上「お問い合わせ」「プライバシーポリシー」などサブナビゲーションの変更
  4. メッセージボードの変更
  5. サイドバー（右）のブログパーツの表示を変更する
  6. ブログタイトルの文字色を変更する
  7. トップページの新着情報のラベルを変更する
  8. ブログタイトルを画像にする
  9. ページナビゲーションの変更
  10. トップページに表示する記事数の変更
  11. お問い合わせフォームを設置する

 

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

96232cf3-s.png

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

 

「法人用テンプレート02」では、かんたんタイトル画像の「タイトルテキストを隠す」機能がご利用できないデザインとなります。

 

2. 画面上「カフェ情報」「メニュー」などメインナビゲーションの変更

メインナビゲーション部分は、メニューバー機能を利用してカスタマイズすることができます。
詳しくはこちらのヘルプを参考にしてください。

 

081a6adc.png

 

3. 画面右上「お問い合わせ」「プライバシーポリシー」などサブナビゲーションの変更

サブナビゲーションは「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」の４つのページのHTMLに記述されているため、全てを変更する必要があります。

9d06de1f.png

 

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

 

  • HTML
 <ul id="sub-nav">
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">個人情報保護方針</a></li>
</ul>

 

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

 

  • 記述例
 <ul id="sub-nav">
<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>の行数を追加・削除することでサブナビゲーションの数を調整することができます。サブナビゲーションのおすすめの表示個数は、全角６文字前後で３～４個です。
4個以上増やしても表示が崩れにくいので、お好みに合わせてご利用ください。

会社概要や店舗一覧など、任意のページを作ってメインナビゲーションやサブナビゲーションにリンクする

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

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

ブログのトップページに一定の内容を表示しておけるのがメッセージボードです。

2982c3c3.png

 

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

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

1.ブログ管理画面にログイン
2.「ブログ設定」をクリック
3.デザイン／ブログパーツ設定の「PC」をクリック
4.「カスタマイズ」タブをクリック
5.「CSS」タブをクリック
6.下記HTMLの記述をみつける
7.Webカラーコードや位置の部分を書き換える
・Webカラーコードの部分を書き換える　※メッセージボードの文字色は「color: #fff;」の部分
・位置の部分を書き換える　※位置は「left: 555px;」「top: 30px;」の部分
左側に寄せたいときは「left: 46px」にしてみてください。
上下の位置はメッセージボードに登録した文字数によって変わってくるので、
「top: 30px;」の部分を書き換えて調整してください。
8.「保存する」をクリック

 

  • CSS
/* メッセージボード */
.message-board {
color: #fff;
background: url(https://parts.blog.livedoor.jp/img/usr/default_2012/common/opacity_b_40.png);
text-shadow: 0 1px 0 rgba(0,0,0,0.38);
line-height: 1.6;
margin-top: 0!important;
padding: 20px;
position: absolute;
left: 555px;
top: 30px;
width: 335px;
}

 

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

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

757f6cd3.png

 

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


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

  • CSS
.sidewrapper .sidetitle {
color: #666;
font-size: 14px;
font-weight: bold;
line-height: 1.2;
padding-bottom: 8px;
border-bottom: 2px solid #d6d6d6;
margin-bottom: 15px;
}
.sidewrapper .sidetitle a {
color: #666;
}

 

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

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

c1fba40a.png

 

7. トップページの新着情報のラベルを変更する

1.ブログ管理画面にログイン
2.「ブログ設定」をクリック
3.デザイン／ブログパーツ設定の「PC」をクリック
4.「カスタマイズ」タブをクリック
5.「トップページ」タブをクリック
6.下記HTMLの記述をみつけたら、「更新情報」の部分を書き換える
7.「保存する」をクリック

  • HTML
<header class="archives-header" id="index-header">
<h1>更新情報</h1>
</header>

f3e950ff.png

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

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

 

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

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

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

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

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

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

ヘルプページの改善に役立てるためご協力をお願いいたします。

この記事は役に立ちましたか？
ページの先頭へ戻る

関連記事