【こnoページの場所】
 
カスタマイズする!ブログ講座 CSSやHTMLを使ってソース編集に挑戦!
1 HTMLを編集しよう! 4 記事内でリンクを張ろう!
2 記事フォーマットを変更しよう! 5 記事内に別ファイルを読み込む!
3 記事一覧のフォーマットを変更しよう! 6 記事に動画を入れてみよう!
※BLOGari(ブロガリ)の高度なデザイン編集はサポート外となります。
 本ページをご参考にお試し下さい。
どんどんカスタマイズ!見ごたえたっぷりのブログも簡単に!
前回までは、CSSを使ってブログのデザインを変更して、自分らしいブログにする方法を説明しました。
今回はさらに、ブログの骨格となるフォーマット、ページ構成や表示内容をカスタマイズして、よりオリジナリティがあり、多彩な機能の充実したブログに変身させる方法をご紹介します。

さらにカスタマイズ!

HTMLを編集しよう!
CSSソースの編集と同様、HTMLソースの編集も、ブロガリのブログ管理画面からテンプレートのソースを変更するだけで簡単に行っていただけます。画面操作は以下の手順で行ってください。

●HTMLソースを編集するには? 【1】ブロガリの「ブログ管理画面トップ」にログインして、「デザイン管理」をクリック。
「デザイン管理(マイデザイン)」のページにアクセスしたら、「高度なデザイン編集」をクリックします。
画面説明
【2】「デザイン管理(高度なデザイン編集)」ページにある「HTMLソース編集」という項目が編集できるソース部分です。ここでは、ブログトップ、記事一覧、一記事表示、プロフィール/バイオグラフィーの4つのページを編集することができます。

HTMLソース編集
【3】編集したいページのHTMLソースを選んで「編集する」ボタンをクリック。

画面説明
【4】「デザイン管理(テンプレートの編集)」にアクセスしたら、ここからカスタム開始。CSSソースの編集の時と同じ要領で、編集欄のHTMLソースに変更を直接書き込んでください。

画面説明
知っておきたい「blogタグ」

ブログのHTMLを編集するためには、通常のHTMLタグだけでなく、もうひとつ知っておかなければならないタグがあります。それが「blogタグ」とよばれるもので、ブログのテンプレートの多くの部分がこのblogタグによって記述されています。
blogタグには「変数タグ」と「コンテナタグ」の2種類があります。HTMLソースの中で、これらのblogタグはどのような働きをするのでしょうか。例えばブログトップ(スキンがざっくぅスキンの場合)を見ると、変数タグ、コンテナタグは下の図のような関係で構成されています。


ファイル構造

HTMLで構成されたテーブルの中に、見慣れない{$〜$}という記述があります。
これが変数タグです(青文字部分)。変数タグを囲んでいる<Blog…>で始まるタグがコンテナタグです(赤文字部分)。ここでは<BlogEntries>〜</BlogEntries>というコンテナタグで記事の一覧部分を囲み(ピンクの色を敷いている部分)、その中でもいくつかのコンテナタグを使用しています。

【変数タグ】
ブログへ必要な情報を呼び出し、ブラウザー上に表示させるタグ。
{$BlogName$}のように、{$タグ名$} という形式で記述します。

変数タグ説明


【コンテナタグ】
ブログの記事を一覧表示させたり、特定の記事だけを表示させるなどの設定に使うタグ。
<BlogEntries>〜</BlogEntries>のように、<タグ名>(開始タグ)〜</タグ名>(終了タグ)をペアで記述し、2つのタグの間に記述された処理をくり返し表示したり、表示の状態や条件を設定します。

コンテナタグ説明


 

  つぎへ>




■よろしければアンケートにご協力ください
  たいへんわかりやすかった
  わかりやすかった
  少しわかりにくかった
  わかりにくかった
■ご意見、ご要望等ございましたらご記入ください

※このフォームからのお問い合わせには、個別に回答させていただくことができませんのであらかじめご了承ください。また、個人情報(お名前、住所、メールアドレス、電話番号など)をご記入にならないよう、ご注意ください。

zaq zaq