コーポレートサイトとしてポピュラーなレイアウトのデザインです。ファーストビューにカスタマイズ可能なボタン調のメインナビゲーションと、会社の"顔"となるイメージや写真が設定できます。メインカラムはプレスリリースのように記事のタイトルのみで表示し、サイドカラムはブログパーツを使って、商品PRやお問合せなどを自由に表示することができます。

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

PC(カスタマイズ例)
法人用テンプレート01 PC版キャプチャ

このデザインを適用する

スマートフォン(カスタマイズ例)
法人用テンプレート01 スマートフォン版キャプチャ

このデザインを適用する

更新履歴

2013/7/11リリース

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

メインイメージの変更

メインイメージ

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

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

画面上「会社概要」「事業内容」などメインナビゲーションの変更

メインナビゲーション

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


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

サブナビゲーション

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

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

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

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

お問い合わせやプライバシーポリシー、個人情報保護方針などの部分と、a href=以降の""内の部分は任意の表記やURLに書き換えることができます。

ブログ内の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 {
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.38);
	line-height: 1.6;
	margin-top: 0!important;
	position: absolute;
	left: 575px;
	top: 20px;
	width: 335px;
}

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

位置は、「left: 575px;」「top: 20px;」の部分を書き換えてください。左側に寄せたいときは「left: 46px」にしてみてください。上下の位置はメッセージボードに登録した文字数によって変わってくるので「top: 20px;」の部分を書き換えて調整してください。

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

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

ブログパーツ

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

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

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

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

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

ブログタイトル文字色

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

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

トップページのラベル

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

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

「更新情報」の部分を書き換えてください。

おすすめのカスタマイズ

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

画像/ファイルから画像をアップロードしてください。画像一覧の画像をクリックして画像の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 ブログ ヘルプセンター

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

corp02_sp

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

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

このデザインテンプレートのレイアウトにするには、トップページにブログタイトルパーツを使って、ブログ名と背景画像を組み合わせてメインイメージを設定します。

メインイメージの変更

ブログ設定デザイン/ブログパーツ設定のSPレイアウトタブへ行きます。
トップページのブログタイトルパーツから、背景画像「自分で用意したものを表示する」にチェックを入れると画像アップロードができるようになります。
サイズは横320pxか640pxの長方形の画像を設定するときれいに収まります。容量は3G回線で通信しているユーザもいるため、100k前後ぐらいにするのがおすすめです。

引き続き、ブログタイトルは「テキスト」、配置は横の「右」にチェックを入れるとブログタイトルの文字位置の変更ができます。

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

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