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

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

PC（例）

このデザインを適用する

カスタマイズについて

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

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

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

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

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

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

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

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

• HTML

<!-- ブログタイトル、説明 -->
<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>
<!-- /ブログタイトル、説明 -->

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

• HTML

<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.ブログ管理画面にログイン
2.「記事を書く」をクリック
3.ナビゲーションにリンクしたい内容の記事を1記事1内容で書く
例えば、1記事目にExhibition、2記事目にPressなどです。
その際、記事カテゴリ名を作品情報などにしてまとめておくと、後で管理するとき便利です。
4.ブログにアクセスして書いた記事のURLをコピー
5.「ヘルプページ」の案内を参考に、
a href=以降の""内にURLをペーストしてください。

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

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

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

1.ブログ管理画面にログイン
2.「ブログ設定」をクリック
3.デザイン／ブログパーツ設定の「PC」をクリック
4.「カスタマイズ」タブをクリック
5.「CSS」タブをクリック
6.下記HTMLの記述をみつける
7.Webカラーコードの部分を書き換える
※メッセージボードの文字色は「color: #666;」の部分
8.「保存する」をクリック

• CSS

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

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

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

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

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

• CSS

.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. トップページに表示する記事数の変更

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

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

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