使い方目次

基本編

メニュー別活用編

スマートフォン編

携帯編

上級編

参考・リンク

検索
XML

goo blogの使い方

RSS

カバー編集(ワイドフォト)

◆ワイドフォトテンプレートを選択すると、ブログのカバー画像にお好きな写真を貼れたり、タイトル・概要文の文字色を変更することができます。

2カラム、3カラムの切り替えや、モジュールの配置を変更できるほか、ブログパーツなどのオリジナル要素をサイドバーや記事エリアに追加することができる「CLテンプレート」と同じ機能、さらに文字サイズや文字間隔が読みやすく調整された「ワイドテンプレート」をベースに、ブログタイトル部分や「カバー画像」がかんたんに設定できるテンプレートです。

※この「使い方」内の画面イメージは、実際のページと異なる場合がございます。ご了承ください。


◆ワイドフォトテンプレート設定の流れ

  1. ワイドフォトテンプレートを選択する
  2. カバー画像を設定する
  3. ブログタイトルを設定をする
  4. ブログ概要を設定する
  5. プレビューする
  6. 設定を保存する

カバー画像の設定を全て解除するには
ブログタイトル、概要をテキストでなく画像で表示したい場合
ブログの幅を固定したい場合

記事本文でのカバー画像はブラウザの幅に合わせて表示範囲が変わるため、「カバー編集」画面での設定画面と完全に同じ表示にはなりません。

この設定画面はIE9以前など古いブラウザには対応しておりません。IE10、Safari6以降、及び最新のChrome、Firefox、Operaにてご利用下さい。
設定中はメモリを多く消費します。ブラウザの余分なタブやウィンドウは閉じてから始めてください。
安定動作のため使用できる画像のファイルサイズを制限しています。大きな画像はあらかじめ6MB以下に縮小したものをご用意してください。(横幅1024~1600ピクセル推奨)
セキュリティ対策のため時間制限があります。20分以内に設定してください。
CLテンプレート、ワイドテンプレートをご利用になったことがある場合、ブログのカラムやモジュール配置の設定はそのまま引き継がれます。


■1 ワイドフォトテンプレートを選択するには

編集画面の[テンプレート選択]ボタンをクリックすると、デザイン・テンプレートのジャンルが表示されます。
テンプレートジャンル一覧
※テンプレートジャンル一覧の並び順は変更する場合があります


テンプレートジャンル「ワイドフォト」のリンクまたはサムネイル画像をクリックし、表示されたテンプレートからお好きなカラーを選択します。
ワイドフォト一覧
※テンプレート一覧の並び順、テンプレート数は変更する場合があります



※関連記事
テンプレート選択 >>
テンプレート編集(カスタムレイアウト) >>


■2 ブログのカバー画像を設定するには

対象テンプレート選択時に表示される、編集画面の[カバー編集]をクリックすると、カバー画像設定ページに移動します。
カバー編集


カバー編集画面で、[カバー設定を始める]をクリックします。
カバー設定を始める


画像の選択方法が表示されるので、いずれかの方法で画像を選択します。
記事本文でのカバー画像はブラウザの幅に合わせて拡大表示されます。横幅1024~1600ピクセル程度の画像をご利用下さい。
アップロード選択

[画像アップロード]ボタンクリック
表示された画面で使用する画像を選択します。お使いのPCに保存された画像から選択できます。
画像アップロード
【画像アップロード】

[画像フォルダより選択]ボタンクリック
gooブログの画像フォルダから画像を選択します。gooブログにアップロードした画像から選択できます。
画像フォルダより選択
【画像フォルダより選択】

[ドラッグ&ドロップ]
お使いのPCに保存された画像をドラッグ&ドロップしても設定できます
ドラッグ&ドロップで設定
【ドラッグ&ドロップで設定】


カバー画像設定欄に画像が表示されるので、拡大・縮小や位置の調整を行います。
カバー画像設定

画像をドラッグすると位置の調整が行えます。
画像位置調整

「拡大・縮小」のバーを操作すると画像の大きさが変更できます。
実サイズがカバー領域より小さい画像は拡大出来ません。
画像拡大・縮小


[画像クリア]ボタンをクリックすると、選択した画像が解除され、再び画像が選択できるようになります。
カバー画像を保存した後に拡大縮小や位置合わせは出来ません。画像クリアボタンより選び直してください。
画像クリア


[プレビュー]ボタンをクリックすると、調整した画像が表示された状態のプレビュー画面が表示されます。
[設定を保存する]ボタンをクリックするまで、実際のブログには反映されません。


■3 ブログタイトルの設定を変更するには

[タイトル設定]ボタンをクリックします。
タイトル設定


ブログタイトル設定画面になるので、各項目を編集して[OK]ボタンをクリックします。

基本色 ブログタイトルの色を選択できます
その他の色 基本色より更に多くの色を選択できます
透明度 ブログタイトルの透明度を設定できます
大きさ ブログタイトルの文字サイズを設定できます
文字位置 カバー画像領域内でのブログタイトルの位置を設定できます

※ブログタイトル設定ダイアログは、ドラッグで移動できます。
ダイアログ

ブログタイトルの位置や範囲は、点線の枠を操作することで、ある程度設定できます。
ブログタイトル内の英数字や記号が設定幅より長い場合、意図しない改行が起きる場合があります。
タイトル移動


[プレビュー]ボタンをクリックすると、調整した画像が表示された状態のプレビュー画面が表示されます。
[設定を保存する]ボタンをクリックするまで、実際のブログには反映されません。


■4 ブログ概要の設定を変更するには

[概要設定]ボタンをクリックします。
概要設定


ブログ概要設定画面になるので、各項目を編集して[OK]ボタンをクリックします。

基本色 ブログ概要の色を選択できます
その他の色 基本色より更に多くの色を選択できます
透明度 ブログ概要の透明度を設定できます
大きさ ブログ概要の文字サイズを設定できます
文字位置 カバー画像領域内でのブログ概要の位置を設定できます

※ブログ概要設定ダイアログは、ドラッグで移動できます。
ダイアログ

ブログ概要の位置や範囲は、点線の枠を操作することで、ある程度設定できます。
概要移動


[プレビュー]ボタンをクリックすると、調整した画像が表示された状態のプレビュー画面が表示されます。
[設定を保存する]ボタンをクリックするまで、実際のブログには反映されません。


■5 プレビューする

[プレビュー]ボタンをクリックします。
調整した画像が表示された状態のプレビュー画面が表示されます。
[設定を保存する]ボタンをクリックするまで、実際のブログには反映されません。
また、記事本文でのカバー画像はブラウザの幅に合わせて拡大表示されるため、「カバー編集」画面での設定画面と完全に同じ表示にはなりません。プレビューウィンドウの幅を変化させてお確かめ下さい。
プレビュー画面が開かない場合は、ブラウザの設定でポップアップを許可してください。
ご利用のPC環境によって、プレビュー表示に時間がかかる場合がございます。
プレビュー画面でブラウザの更新を行うと、カバー画像やタイトル概要設定はリセットされます。
プレビュー画面



■6 設定を保存する

[設定を保存する]ボタンをクリックします。
これまで行った設定が保存され、実際のブログに反映されます。
カバー画像設定



■6 カバー画像の設定を全て解除するには

カバー編集ページ下部の[カバー設定を初期化する]ボタンをクリックします。
「カバー設定の初期化」を行うと、カバー画像、タイトルと概要の配置や色などは初期状態に戻ります。元に戻すことは出来ませんのでご注意ください。
カバー画像だけ削除して他の設定を残す場合は、[画像クリア]後に設定を保存してください。


■TIPS ブログタイトル、概要をテキストでなく画像で表示したい場合

1.ブログタイトル、ブログ概要の文字をデザインに含めた画像をカバー画像に設定します。
2.ブログタイトル、ブログ概要の透明度を0に設定します。(html上には存在しつつ画面上では見えなくなります。)
上記の手順で画面上ではテキストが見えなくなりますが、ブックマークの際やブラウザのタブ上などで表示される場合があるので、画像内のブログタイトル、ブログ概要は「ブログ設定」で設定した文言と同じものにすることをお勧めします。


■TIPS ブログの幅を固定したい場合

ページ幅を固定すると記事本文の幅は狭くなりますが、カバー画像がほぼカバー編集画面と同じように表示されます。
カバー画像の表示範囲を変えたくない場合などにご活用ください。
ページ幅を固定する場合のカバー画像は、横幅1024ピクセル縦幅300ピクセルが推奨です。

1.編集画面左メニューから、「テンプレート編集」を選択します。
「テンプレート選択」の「使用中のテンプレート」からも表示できます。
テンプレート編集

2.「テンプレート編集」画面の下の方にある「オプション設定」の「ページ幅」欄で「固定」を選択し、[変更を保存する]ボタンをクリックします。
オプション設定



※関連記事
テンプレート編集(CSS) >>
テンプレート編集(HTML) >>
テンプレート編集(カスタムレイアウト) >>
テンプレート編集(CLアドバンス) >>

テンプレート編集(カスタムテンプレート)

※このページの機能は、一部の例外を除いてgooブログフォトgooブログアドバンスでご利用可能です


◆カスタムジャンルのテンプレートを使うと、ブログをオリジナルデザインに変更できます

■1 カスタムジャンルのテンプレートを選択するには
編集画面の[テンプレート選択]ボタンをクリックすると、デザイン・テンプレートのジャンルが表示されます。その中から[カスタム]をクリックします。

【カスタムジャンル】


【カスタムジャンル内テンプレート一覧】



■2 カスタムジャンルテンプレートの種類
(1) CLアドバンス
CLアドバンス

CLアドバンステンプレートは、「カスタムレイアウトテンプレート(簡単な操作で2カラム3カラムの切り替え、モジュールの配置変更、ブログパーツなどのオリジナル要素をサイドバーや記事エリアに追加することができるテンプレート)」に、CSSの編集機能を追加したテンプレートです。
※無料版でもCLアドバンステンプレートを選択することはできますが、CSSの編集を行うことはできません(通常のカスタムレイアウトテンプレートとしてはお使いいただけます)。
※詳しくはテンプレート編集(CLアドバンス) をご覧ください

(2) カスタムフリー
カスタムフリー

カスタムフリーテンプレートは、無料版でもCSSの編集が行えます。
※無料版の場合はHTML編集は行えません

(3)  (1) 、(2) 以外のカスタムジャンルテンプレート
これらのテンプレートは、CSSの編集HTML編集が行えます。
2カラム3カラムの切り替えやモジュールの配置などのレイアウト変更は、全てHTMLを編集することで行います。
CLアドバンスのような、簡単な操作でのレイアウト変更は行えません。
詳しくはテンプレート編集(CSS)テンプレート編集(HTML)をご覧ください。


■3 ご注意

※gooブログでは、CSSやHTMLの記述内容に関するサポートは行っておりません。ユーザ様ご自身によるCSSやHTMLの編集によって起きたレイアウト崩れ等に関してもサポートしておりませんので、あらかじめご了承ください。
※無料版でもテンプレートを選択することはできますが、一部を除きCSS編集やHTML編集を行うことはできません(通常のテンプレートとしてはお使いいただけます)。
※※上記「カスタムジャンル」のテンプレートをご利用いただいている場合、gooブログフォト、gooブログアドバンスを解約した時点で編集が出来なくなりますので、ご注意ください。


※関連記事
テンプレート選択 >>
テンプレート編集(CSS) >>
テンプレート編集(HTML) >>
テンプレート編集(カスタムレイアウト) >>
テンプレート編集(CLアドバンス) >>
カバー編集(ワイドフォト)>>
モジュール一覧 >>

モジュール一覧

モジュール 説明
<{$like_button}> <{$entry}> ~<{/$entry}> の中で使用されます。「いいね」、「応援しています」などのリアクションボタンが記事下に表示されます
<{$social_button}> <{$entry}> ~<{/$entry}> の中で使用されます。Facebookいいね!ボタンやTwitterツイートボタンなどのソーシャル系のボタンが記事下に表示されます
<{$user_btn_follow}> 読者登録ボタン+Twitterボタン+Facebookボタンのセットです
Twitter、facebookボタンは、外部連携済み、かつ「プロフィールに表示する」に設定していると表示されます
読者登録ボタンは、ブログ設定で「読者登録ボタンを表示する」に設定していると表示されます
<{$user_btn_twitter}> <{$user_btn_follow}> を使用している場合は必要ありません
Twitterのマイページ部分へリンクするボタンを表示するためのモジュールです
<{$user_btn_facebook}> Facebookのマイページ部分へリンクするボタンを表示するためのモジュールです
<{$user_btn_follow}> を使用している場合は必要ありません
<{$follower_module}> 読者一覧画面を表示するためのモジュールです。<{$entry}> の上に記述します
<{$archive_module}> 記事一覧画面を表示するためのモジュールです。<{$entry}> の上に記述します
<{$pch_module}> フォトチャンネル一覧を表示するためのモジュールです。<{$entry}> の上に記述します
<{$followerurl}> 読者一覧画面のURLを表示します
<{$archiveurl}> 記事一覧画面のURLを表示します
<{$photochannelurl}> フォトチャンネル一覧画面のURLを表示します
<{$blogtitle}> あなたのブログのタイトルが表示されます
<{$blogurl}> あなたのブログURLが挿入されます
<{$description}> あなたのブログの説明が表示されます
<{$css}> あなたのブログのCSSファイルのURLが設定されます
<{$rss_tag}> RSS1.0、RSS2.0のリンクバナーを横並びで表示します
<{$rss_url}> あなたのブログのRSS1.0のURLが設定されます
<{$rss_tag}> を使用している場合は必要ありません
<{$rss2_url}> あなたのブログのRSS2.0のURLが設定されます
<{$rss_tag}> を使用している場合は必要ありません
<{$calendar}> カレンダーが表示されます
<{$archive_list}> 過去記事一覧が表示されます
<{$recent_entry}> 最新の投稿が表示されます
<{$recent_comment}> 最新のコメントが表示されます
<{$recent_trackback}> 最新のトラックバックが表示されます
<{$category_list}> カテゴリー一覧が表示されます
<{$bookmark}> ブックマーク一覧が表示されます
<{$user_name}> あなたのgooIDが表示されます
<{$user_sex}> あなたの性別が表示されます
<{$user_prefecture}> あなたがお住まいの都道府県が表示されます
<{$sign}> あなたの自己紹介が表示されます
<{$admin}> 編集画面のURLを表示します
<{$login_module}> ログインフォームを表示します
<{$portal}> goo ブログのトップ画面のURLを表示します
<{$entry}> <{/$entry}> 記事表示用のフォームの開始部分と終了部分に挿入します
<{$ename[entry]}> <{$entry}> ~<{/$entry}> の中で使用されます。記事のタイトルが表示されます
<{$etext[entry]}> <{$entry}> ~<{/$entry}> の中で使用されます。記事の本文が表示されます
<{$category_link[entry]}> <{$entry}> ~<{/$entry}> の中で使用されます。記事のカテゴリーが表示されます
<{$entrytime[entry]}> <{$entry}> ~<{/$entry}> の中で使用されます。記事の投稿時間が表示されます
<{$entry_url[entry]}> <{$entry}> ~<{/$entry}> の中で使用されます。記事のURLが挿入されます
<{$thumbnail[entry]}> <{$entry}> ~<{/$entry}> の中で使用されます。記事に添付されている画像のサムネイルが表示されます
<{$comment_link[entry]}> <{$entry}> ~<{/$entry}> の中で使用されます。記事の表示時に、その記事のComment数が表示されます
<{$trackback_link[entry]}> <{$entry}> ~<{/$entry}> の中で使用されます。記事の表示時に、その記事のTrackBack数が表示されます
<{$ad[entry]}> スポンサー誘導枠が表示されます
<{$comment_module}> 単記事表示時に、その記事のComment一覧とコメント入力欄が表示されます
<{$trackback_module}> 単記事表示時に、その記事のTrackBack一覧が表示されます
<{$image}> 記事の表示時に、その記事に添付されている画像が表示されます
<{$pre_page}> 過去の記事を表示します
<{$next_page}> 新しく投稿された記事を表示します
<{$headline[相手先のURL]}> RSSファイルを配布しているサイトの更新記事のヘッドライン表示されます
<{$recommend_module}> gooブログおすすめリンクを表示します
<{$search_box}> サイト内検索窓を表示します
<{$powered_by}> gooブログのバナーを表示します(削除不可)

テンプレート編集(CLアドバンス)

※このページの機能はgooブログフォトgooブログアドバンスでご利用可能です

◆CLアドバンステンプレートを使うと、ブログをオリジナルデザインに変更できます

CLアドバンステンプレートは、2カラム、3カラムの切り替えや、モジュールの配置を変更できるほか、ブログパーツなどのオリジナル要素をサイドバーや記事エリアに追加することができる「カスタムレイアウトテンプレート」に、CSSの編集機能を追加したテンプレートです。

■1 CLアドバンステンプレートを選択するには

編集画面の[テンプレート選択]ボタンをクリックすると、デザイン・テンプレートのジャンルが表示されます。その中から[カスタム]をクリックします。

【カスタムジャンル一覧】

[CLアドバンス]を選択し、[テンプレートを変更する]をクリックします。

※無料版でもCLアドバンステンプレートを選択することはできますが、CSSの編集を行うことはできません(通常のカスタムレイアウトテンプレートとしてはお使いいただけます)。

■2 CSSを編集するには

編集画面の[テンプレート編集]リンク、またはテンプレート選択画面の[使用中のテンプレート]欄の[レイアウト変更/CSS編集]をクリックします。
※[使用中のテンプレート]欄に[レイアウト変更]しか表示されない場合は、CSS編集は行えません。gooブログ有料プランをご利用いただくか、【カスタム】ジャンルのほかのテンプレートをご利用ください。

【テンプレート編集リンク】

CSSの編集、レイアウト選択、モジュール配置の設定ページに移動します。

【テンプレート編集ページ】

「CSSの編集」の[+]をクリックすると、CSS編集エリアを表示します。

【テンプレート編集ページ】

■3 主な編集項目

オリジナルデザインにするための主な編集項目をご紹介します。

1.タイトルの背景に画像を表示するには

CSS編集エリアから以下の記述を見つけます。
/*-- タイトルバナー内部の設定 --*/
#title-banner-body {
border-bottom:solid 2px #5ca1d6;
width:100%;
/*-- ↓タイトルバナーに画像を入れる場合は、下記のコメントをはずし、画像URLを指定する --*/
/*--
background-image:url(/user_image/xx/xx/xxxx.jpg);
background-position: center top;
background-repeat:no-repeat;
--*/
/*-- ↓タイトルバナーに画像を入れる場合は、画像に合わせて値を変更する --*/
height:200px;
}


CSS内のコメントに従い、画像のURL(「/user_image/xx/xx/xxxx.jpg」の部分)を差し替えてコメントをはずします。
画像の大きさに応じてheightの値を変更します。

2.全体の幅を変更するには

CSS編集エリアから以下の記述を見つけます。
#container {
width:90%;
margin:0 auto;
/*-- 全体的な枠線の設定 --*/
border-bottom:solid 1px #c8c8c8;
border-left:solid 1px #c8c8c8;
border-right:solid 1px #c8c8c8;
/*-- 全体的な枠線の設定ここまで --*/
}


「width」部分をお好きな値に変更します。

記述例: #container {
width:970px;
margin:0 auto;
/*-- 全体的な枠線の設定 --*/
border-bottom:solid 1px #c8c8c8;
border-left:solid 1px #c8c8c8;
border-right:solid 1px #c8c8c8;
/*-- 全体的な枠線の設定ここまで --*/
}


3.モジュールタイトルの配色を変更するには

CSS編集エリアから以下の記述を見つけます。

#side-a .module h4 { および #side-b .module h4 {

上記の行の下に、モジュールタイトルの配色の指定があります。
「background」の値が背景色、「color」の値が文字色です。
#side-a .module h4と#side-b .module h4両方に同じ色を指定すると、2カラムや3カラムに変更しても同じ配色になります。

記述例:
#side-a .module h4 {
padding:5px;
border-left:solid 2px #ffffff;
background:#000000;
text-align:center;
color:#ff0000;
font-weight:bold;
font-size:110%;
}

記述例では2カラムのサイドバーまたは3カラムの左サイドバーの各モジュールのタイトル背景色を黒、文字色を赤にしています。

■4 ご注意

※gooブログでは、CSSの記述内容に関するサポートは行っておりません。ユーザ様ご自身によるCSSの編集によって起きたレイアウト崩れ等に関してもサポートしておりませんので、あらかじめご了承ください。

※関連記事
テンプレート編集(カスタムレイアウト) >>

テンプレート編集(カスタムレイアウト)

◆カスタムレイアウトテンプレートを選択すると、カラム数やモジュールの配置を自由に変更することができます。
カスタムレイアウトテンプレートを選択すると、2カラム、3カラムの切り替えや、モジュールの配置を変更できるほか、ブログパーツなどのオリジナル要素をサイドバーや記事エリアに追加することができます。

■1 カスタムレイアウトテンプレートを選択するには

編集画面の[テンプレート選択]ボタンをクリックすると、デザイン・テンプレートのジャンルが表示されます。リンクまたはサムネール画像をクリックすると、各ジャンルのテンプレート一覧が表示されます。

テンプレート名の後に「カスタムレイアウト」アイコンがあるものがカスタムレイアウトテンプレートです。


※関連記事
テンプレート選択 >>



■2 カラムを変更するには

編集画面の[テンプレート編集]ボタンをクリックすると、レイアウト選択、モジュール配置の設定ページに移動します。

【テンプレート編集ページ】


[レイアウト選択]で、テンプレートのカラム数を変更することができます。

※カラム数を変更すると、モジュールの配置は初期化されます。
※カラム数を変更すると、サイドバーのオリジナルモジュールは非表示エリアに、メインのオリジナルモジュールはメインの最下段に移動します(各オリジナルモジュールの内容は保持します)。

■3 モジュールの配置を変更するには

[モジュール配置]で、モジュールの位置をドラッグ&ドロップで変更できます。

【テンプレート編集ページ】


※メインのモジュール(オリジナルモジュールを含む)、グレーのモジュールを非表示にすることはできません。
■メッセージモジュールを追加!
カスタムレイアウトテンプレートを選択すると、標準で「メッセージモジュール」が非表示エリアに入っています。このモジュールを設置すると、読者からの連絡を個別に直接受け付けることができます。是非ご利用ください。

■フォントサイズ変更モジュールを追加!
カスタムレイアウトテンプレートを選択すると、標準で「フォントサイズ変更モジュール」が非表示エリアに入っています。このモジュールを設置すると、読者が文字の大きさを変更することができます。是非ご利用ください。

■4 オリジナルモジュールを追加するには

[オリジナルモジュールの新規追加]をクリックすると、ブログパーツや画像、テキストやリンクなどのHTMLタグ(一部を除く)などお好きな内容を登録し、好きな位置に配置することができます。

【テンプレート編集ページ】


[追加する]をクリック↓

【ブログ】



※オリジナルモジュールは最大10個(ブログアドバンスは30個)まで追加できます。
※追加されたオリジナルモジュールの合計容量(バイト数)によっては、10個(ブログアドバンスは30個)に満たない場合でも新規追加・変更ができないことがあります。
※メインに設置したいオリジナルモジュールは、新規追加時に表示位置で「メイン」を選択してください。


※関連記事
ブログパーツ >>



■5 オプション設定を変更するには

【テンプレート編集ページ】


[オプション設定]欄の各項目を設定することにより、お好みでその他の表示を変更することができます。

ページ幅
ブラウザのウィンドウサイズに応じて変化する可変タイプか、常に一定の幅で表示させるかを選択することができます。

※テンプレートによっては設定を変更できない場合があります。

表記の種類
オリジナルを除くモジュールのタイトル、カレンダー、バックナンバーなどの表記を、日本語または英語に変更することができます。また、英語の場合は大文字と小文字のバリエーションを3種類から選択することが可能です。

■6 初期化するには

「レイアウトの初期化」欄の[+]をクリックすると、初期化ボタンを表示します。

※ご注意:「レイアウトの初期化」を行うと、変更したレイアウト、モジュール配置は初期状態に戻ります。また、オリジナルモジュールに保存した全ての内容は削除されます。初期化後にモジュール配置、オリジナルモジュールの内容を元に戻すことはできません。


※関連記事
テンプレート選択 >>
テンプレート編集(CSS) >>
テンプレート編集(HTML) >>
テンプレート編集(CLアドバンス) >>

テンプレート編集(HTML)

※このページの機能はgooブログフォトgooブログアドバンスでご利用可能です


◆テンプレートの編集を使うと、ブログはかなりオリジナルな形に変更できます

gooブログテンプレートは、HTMLとCSSの組み合わせで構成されており、HTML・CSSを別ファイルで管理しています。機能は、先ほど説明した通り、HTMLではテンプレートの基本構造(レイアウト)を、CSSでは文字や背景の装飾部分を定義しています。

■HTMLを編集するには

カスタムテンプレートを選ぶとHTMLを変更することができます。gooブログでは、標準的なHTMLとgooブログ独自のモジュールで構成されています。

例)
たとえばカレンダーのモジュールは <{$calendar}> でありHTMLでは以下のように記載されています。
<{$calendar}> モジュールを削除するとテンプレートにはカレンダーが表示されなくなります。



必要に応じてモジュールの編集を行ってください。もし、編集中迷ってしまったら編集前までに戻す[デフォルトに戻す]を押してください。


(1)gooブログでは、安全性の確保<クロスサイトスクリプティング(*1)に対する対策>の観点からスクリプトタグなど一部タグを利用することができませんので、ご了承ください。
(2)gooブログの提供を表す <{$powered_by}> については、必ず表示をお願いいたします。詳しくは利用規約をお読みください

(*1)クロスサイトスクリプティングとは、ソフトウェアのセキュリティホールの一つで、gooブログなどの書き込みが表示されるサイトに悪意のあるユーザにスクリプトなどを埋め込まれた場合に、訪問者の情報(cookieなども)送ってしまう脆弱性のことです。gooブログでは、アクセスするすべての方の安全を考慮して、スクリプトタグなどの危険性が少しでもあるタグを禁止させていただいております。

※gooブログでは、CSSおよびHTMLの記述内容に関するサポートは行っておりません。ユーザ様ご自身によるCSSおよびHTMLの編集によって起きたレイアウト崩れ等に関してもサポートしておりませんので、あらかじめご了承ください。

テンプレート編集(CSS)

◆gooブログでは、ページ全体のデザイン部分(フォントカラー・サイズ・背景色、背景画像など)をCSSの編集で変更する事ができます。

gooブログテンプレートは、HTMLとCSSの組み合わせで構成されており、HTML・CSSを別ファイルで管理しています。HTMLではテンプレートの基本構造(レイアウト)を、CSSでは文字や背景の装飾部分を定義しています。

■CSSを編集するには

◆カスタムテンプレートの編集を開始するには
編集画面の[テンプレートの選択]ボタンをクリックすると、デザイン・テンプレートのジャンルが表示されるので【カスタム】をクリックし、ベースとなるテンプレートを選択し変更します。

【テンプレート選択ページ】


[使用中のテンプレート]欄下の[テンプレート編集]をクリックするとCSSを編集できるようになります。
※ここで[テンプレート編集]ではなく[レイアウト編集]になっている場合は、CSS編集の行えないテンプレートです。CSS編集を行うには、[デザイン]メニューの[テンプレート選択]から、【カスタム】ジャンルのテンプレートを選択してください。

【使用中のテンプレート欄】


※gooブログでは、CSSおよびHTMLの記述内容に関するサポートは行っておりません。ユーザ様ご自身によるCSSおよびHTMLの編集によって起きたレイアウト崩れ等に関してもサポートしておりませんので、あらかじめご了承ください。

テンプレート選択

■テンプレートは「テンプレートキーワード検索」または「テンプレートジャンル一覧」からテンプレートを探して変更することができます。

「テンプレートキーワード検索」では、オススメ・イメージ・季節・カラーにカテゴリ分けされたキーワードを辿って、テンプレートを検索することができます。

「テンプレートジャンル一覧」では、ジャンルによるテンプレートの検索が可能です。

■「テンプレートキーワード検索」で、テンプレートを変更する


(1)編集画面の[テンプレート選択]をクリックし「テンプレート選択」画面を開きます。




【編集画面】



(2)「テンプレート選択」画面の「テンプレートキーワード検索」から気になるキーワードをクリックします。
※「キーワード一覧」からも、キーワードでテンプレートを検索できます。この一覧には、全てのキーワードが新着順に掲載されています。



【テンプレートキーワード検索】



(3)選択したキーワードを含んだテンプレートの一覧が表示されます。
ここで使いたいテンプレートにチェックを入れ、一覧の下にある[テンプレートを変更する]をクリックするとブログのデザインが変更されます。




【テンプレート一覧】


※関連記事
テンプレート編集(CSS) >>
テンプレート編集(HTML) >>
テンプレート編集(カスタムレイアウト) >>
テンプレート編集(CLアドバンス) >>
カバー編集(ワイドフォト)>>

■「テンプレートジャンル一覧」で、テンプレートを変更する


(1)編集画面の[テンプレート選択]をクリックし、「テンプレートジャンル一覧」から選びたいジャンルの[ジャンル名]をクリックします。




【編集画面】



(2)ジャンルのテンプレートの一覧が表示されます。
ここで使いたいテンプレートにチェックを入れ、一覧の下にある[テンプレートを変更する]をクリックするとブログのデザインが変更されます。




【テンプレート一覧】


※関連記事
テンプレート編集(CSS) >>
テンプレート編集(HTML) >>
テンプレート編集(カスタムレイアウト) >>
テンプレート編集(CLアドバンス) >>
カバー編集(ワイドフォト)>>