このデザインを適用する

このデザインを適用する

更新履歴

2013/7/11	リリース

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

メインイメージの変更

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

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

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

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

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

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

マイページ＞記事を書くからナビゲーションにリンクしたい内容の記事を1記事1内容で書きます。例えば、1記事目にExhibition、2記事目にPressなどです。その際、カテゴリ名を作品情報などにしてまとめておくと、後で管理するとき便利です。

ブログにアクセスして書いた記事のURLをコピーします。

上記にある「メインナビゲーションの変更」の案内を参考に、a href=以降の""内にURLをペーストしてください。

メッセージボードの変更

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

表示したい内容の変更は、ブログ設定＞基本設定から行えます。

文字色の変更は、ブログ設定＞デザイン／ブログパーツ設定のPC＞カスタマイズタブのCSSへ行きます。
まずは、以下の記述をみつけてください。

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

文字色は、「color: #666;」の部分のwebカラーコードを書き換えてください。

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

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

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

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

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

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

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

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

おすすめのカスタマイズ

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

画像/ファイルから画像をアップロードしてください。画像一覧の画像をクリックして画像のURLとサイズをコピーします。

ブログ設定＞デザイン／ブログパーツ設定のPC＞カスタマイズタブへ行きます。ブログタイトルは以下の４つのページの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 ブログ ヘルプセンター

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

ブログ設定＞基本設定から行えます。こちらのデザインテンプレートは4の倍数にするときれいに表示されます。

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

こちらをご覧ください。メッセージブログパーツのラベルをお問い合わせにして、お問い合わせフォームのように利用することができます。
メッセージ機能を使う - livedoor ブログ ヘルプセンター

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

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

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

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

メインイメージの変更

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

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

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

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