「団体・個人用テンプレート01」について : ライブドアブログのヘルプ（PC向け）

「団体・個人用テンプレート01」について

「団体・個人用テンプレート01」は、
団体・個人などの活動で画像をダイナミックに表示するレイアウトのデザインです。
1カラムでレイアウトしているので画像を大きく表示することができ、
記事の画像もサイトデザインの一部になるため表現の幅が広がります。
メインナビゲーションでカテゴリ等のリンクの設定もでき、便利に活用できます。

カスタマイズについて

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

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

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

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

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

メインイメージの変更

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

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

「Profile」「News」「Works」などメインナビゲーションの変更

メッセージボードの変更

画面下のブログパーツの表示を変更する

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

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

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

スマートフォン版のレイアウト紹介

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

メインイメージを設定するとファーストビューに画像が表示されます。

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

「団体・個人用テンプレート01」では、かんたんタイトル画像の「タイトルテキストを隠す」機能がご利用できないデザインとなります。
個別記事でかんたんタイトル画像が表示されないのも、デザインの仕様となります。
ブログタイトルを画像で表示希望の場合は、下記「ブログタイトルを画像にする」をご確認ください。

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

ブログ管理画面にログイン
「ブログ設定」をクリック
デザイン／ブログパーツ設定の「PC」をクリック
「カスタマイズ」タブをクリック
「トップページ」タブをクリック
各ページから下記HTMLの変更前①、②の記述をみつける
下記変更後①、②のようにタグを書き換える
「個別記事ページ」タブをクリック
<div id="main-inner">の記述を見つける
<div id="main-inner">の真下に、下記追加③のようにタグを追加する
「保存する」をクリック

【▼変更前①】
※「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」全てで同様に変更します。

<!-- ブログタイトル、説明 -->
<header id="blog-header">
    <div id="blog-header-inner">
        <h1 id="blog-title"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
        <p id="blog-description"><$BlogDescription$></p>
    </div>
</header>
<!-- /ブログタイトル、説明 -->

【▼変更後①】

<!-- ブログタイトル、説明 -->
<header id="blog-header"<IfBlogHeaderImageUrl> class="show-image<IfBlogHeaderHideText> hide-text</IfBlogHeaderHideText>"</IfBlogHeaderImageUrl>>
    <div id="blog-header-inner">
        <h1 id="blog-title"><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
        <p id="blog-description"><$BlogDescription$></p>
    </div>
</header>
<!-- /ブログタイトル、説明 -->

【▼変更前②】
※「トップページ」のみ変更を行います。

<IfBlogHeaderImageUrl><img src="<$BlogHeaderImageUrl$>" id="blog-header-image"></IfBlogHeaderImageUrl>

【▼変更後②】

<a href="<$BlogUrl$>"><IfBlogHeaderImageUrl><img src="<$BlogHeaderImageUrl$>" id="blog-header-image"></IfBlogHeaderImageUrl></a>

【▼追加③】
<div id="main-inner">の直下に以下記述例を追加する。
※「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」で追加を行います。

<a href="<$BlogUrl$>"><IfBlogHeaderImageUrl><img src="<$BlogHeaderImageUrl$>" id="blog-header-image"></IfBlogHeaderImageUrl></a>

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

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

4. 「Profile」「News」「Works」などメインナビゲーションの変更

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

ExhibitionやPressなど、任意のページを作ってメインナビゲーションにリンクする

ブログ管理画面にログイン
「記事を書く」をクリック
ナビゲーションにリンクしたい内容の記事を1記事1内容で書く

例えば、1記事目にExhibition、2記事目にPressなどです。
その際、記事カテゴリ名を作品情報などにしてまとめておくと、後で管理するとき便利です。

ブログにアクセスして書いた記事のURLをコピー
「ヘルプページ」の案内を参考に、
a href=以降の""内にURLをペーストしてください。

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

ブログのトップページに一定の内容を表示しておけるのがメッセージボードです。
こちらのデザインテンプレートはメインイメージの下に表示されます。
メインイメージがないときは、メインナビゲーションの下に表示されます。
メッセージボード機能の利用方法はこちらをご確認ください。

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

ブログ管理画面にログイン
「ブログ設定」をクリック
デザイン／ブログパーツ設定の「PC」をクリック
「カスタマイズ」タブをクリック
「CSS」タブをクリック
下記HTMLの記述をみつける
Webカラーコードの部分を書き換える

※メッセージボードの文字色は「color: #666;」の部分

「保存する」をクリック

/* メッセージボード */
.message-board {
	background-color: #fdfdfd;
	color: #666;
	line-height: 1.6;
	margin-bottom: 30px;
	overflow: hidden;
	padding: 40px 55px;
}

6. 画面下のブログパーツの表示を変更する

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

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

ブログ管理画面にログイン
「ブログ設定」をクリック
デザイン／ブログパーツ設定の「PC」をクリック
「カスタマイズ」タブをクリック
「CSS」タブをクリック
下記HTMLの記述をみつける
Webカラーコードの部分を書き換える

・ブログパーツのラベル(見出し)文字色は、「.sidewrapper .sidetitle」に続く「color: #333;」の部分
・ブログパーツのラベル(見出し)リンク色は、「.sidewrapper .sidetitle a 」に続く「color:#333;」部分

「保存する」をクリック

まずは、以下の記述をみつけてください。

.sidewrapper .sidetitle {
	color: #333;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 0.7em;
}
.sidewrapper .sidetitle a {
	color: #333;
}

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

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

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

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

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

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

10. スマートフォン版レイアウト紹介

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

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

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

メインイメージの変更

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

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

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

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

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

この記事は問題解決に役に立ちましたか？

ライブドアブログのヘルプ(PC向け)