TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2009年08月27日

サイドバーに見出しを入れる

■ 4-17 自由形式コンテンツの活用


ブログでは「カテゴリ」「過去記事」などのように、ブログサービス側で用意したコンテンツが有りますが、それ以外に自由にコンテンツを作り、追加することが出来る機能があります。

それが「自由形式」のコンテンツです。

「自由形式」のコンテンツは、記事入力と同じように簡単に作れ、文章、画像、HTMLなどの挿入もできるようになっています。

カテゴリや過去記事などのコンテンツと異なる点は
タイトル(見出し)が表示されないため、そのままの形で配置したら、何のコンテンツか分からないことです。

構成上コンテンツバーが邪魔だと言う方もいますが
コンテンツのタイトルは「ナビゲーション」の役目も果たしています。

ブログを読みやすい、分かりやすい流れ、整然とした形にすることは
ブログの基本をしっかりと見極め、訪問した方の気持ちに対応するという考え方です。

ブログの構成はグラフィックデザインと同じ考え方で、如何にバランスの取れた配置をするか、如何に訪問者の目を引き付けるかになります。

ブログの基となるWEBデザインも、同じ考えに基づいています。

適当に作ってあるブログと思われたら
サイトの信頼性や、紹介している商品の信憑性までが疑われる結果になります。


■「自由形式」の活用

「自由形式」の使用方法には

@ 本文記事と同じように商品紹介のような画像、記事を書き込むページ構成にする。

 「例」
  このブログの上段に設置しているメニュー(ナビゲーション)や
  トップページに常に表示される「ブログの案内(見方)」のように
  タイトルを付ける必要のない形式。

A サイドに設置してタイトルを付けて、独自のコンテンツバーにする。

 「例」
  右サイドに表示している「利爺にお問い合わせ」など
  サイドに表示してタイトルを付けた方が分かりやすい表示形式。

が有ります。

@ は目的に応じて、比較的に楽で自由に設定できますので
A のサイドバーに用いて、タイトルを付ける方法を確認します。

【画像1】は
このブログのコンテンツの配置です。

bga01.jpg
 ↑ 画像をクリック・元画像が開きます。

右サイドの「利爺にお問い合わせ」などのコンテンツは
「自由形式」を使用して、タイトルを付けて使用しています。

「自由形式」のコンテンツに、タイトルを表示する方法を確認します。

「自由形式」のコンテンツ追加の方法は分かりますね。



左上段のメニューの  「デザイン」  ⇒  「コンテンツ」  に進み

現在使用している各コンテンツの配置図のページの左上の 「ブログパーツ」 「コンテンツ」 「ブログ広告」 の中から「コンテンツ」をクリックして一覧を出します。

一覧には「ブログ画像」「記事」など多数のコンテンツが用意されていて、その中に「自由形式」も有りますね。

「自由形式」をドラッグで設置したい箇所にドロップして配置します。

コンテンツを開くと、画像2のように表示されます。

【画像2】
cont003.jpg
 ↑ 画像をクリック・元画像が開きます。

タイトルを付けるためには、右上の「コンテンツHTML編集」から編集に入ります。

「資料1」のような表記になってますね。

【資料1】
「コンテンツHTML編集」

<% content.header -%>
<% content.free.text %>
<% content.footer -%>


サイドバーとして活用するために下記の「資料2」のように
CSSを参照する「赤文字」のHTMLタグを追加しします。

【資料2】
<div class="sidetitle">タイトル</div>
<div class="side">

<% content.header -%>
<% content.free.text %>
<% content.footer -%>
</div>


<div class="sidetitle">タイトル</div>
<div class="side">

の追加したHTMLは
CSSのセレクタ(class)「.sidetitle 」と「.side」の定義を参照にしますので確認します。

【CSS】
【CSS】

.sidetitle {
background-image:url(url);
background-repeat:no-repeat;
background-position:left top;
font-size:12px;
color:#1B6E90;
font-weight:normal;
padding:5px 0px 20px 0px;
margin-bottom:0px;
text-align:center;
}

.side {
font-size:12px;
line-height:18px;
padding:0px 5px 10px 5px;
margin-bottom:10px;
}


⇒ セレクタ名(class)
⇒ コンテンツバー画像
⇒ 画像の表示
⇒ バー画像表示位置
⇒ 文字の大きさ
⇒ 文字の色
⇒ 文字の形状
⇒ 文字の表示位置
⇒ 文字の下辺位置
⇒ 文字の左右位置
⇒ セレクタ閉め

⇒ セレクタ名(class)
⇒ 文字の大きさ
⇒ 行の高さ
⇒ 文字の表示位置
⇒ 文字の表示位置
⇒ セレクタ閉め


<div class="sidetitle">タイトル</div>

が、サイドバーの画像などの形状、文字の種類や大きさ、表示する位置を定義するCSSです。

その中のプロパティ<background-image:url(url);>がバーの画像を表示する定義です。

<sidetitle>のセレクタは、ブログで表示している各々のサイドバーに適用されていますので
<background-image:url(url);>を削除したら、全てのバー画像が表示されなくなります。

● バー画像を独自に作成して用いるときには、このプロパティ<url>の書き換えになります。


<div class="side">

が参照するセレクタ「.side」は
そのコンテンツの中に書き込んだ、文章や画像の表示位置などを細かく定義しています。

● セレクタ「.sidetitle」がコンテンツバーの表示やタイトルの表示
● セレクタ「.side」はコンテンツの中身の表示


になっています。

    注)
   ●「自由設定」の確認上、CSSの「.sidetitle」「.side」の
    各セレクタを開いて定義をチェックしていますが、CSSを
    確認する必要はありません。


■ コンテンツバーに名前(タイトル)を付ける。

追加したHTML(資料2)

<div class="sidetitle">タイトル</div>

の「タイトル」の箇所に名前を入力します。

タイトル名は自由に設定できますので
他のバーのタイトルとバランスをとって、分かりやすい名前がいいですね。

下段の「プレビュー」でうまく表示するかを確認してから「保存」します。

HTMLを追加してタイトルを振るだけの作業で、独自のコンテンツを作成しましたが
バーとそのバーに表示するタイトルの表示だけになっていますね。


■ コンテンツに表示する内容の作成

【画像3】
jiyu01.jpg
 ↑ 画像をクリック・元画像が開きます。

「画像3」は
このブログのサイドのコンテンツ「利爺の個人ブログ」に設定した内容の例です。

配置した「自由形式」のコンテンツを開くと
何も記入されていない空ボックス(自由入力欄)が表示されます。

その自由入力欄の中に
記事と同じ形式で、必要な文言、画像、リンクタグなどを記入して表示させます。

例では
●<div style="text">でテキスト形式を宣言して
●<a href="http: url ">でリンクを組んで、リンク先のブログ名を記入しています。

ブログ名をクリックすると、外部リンクで相手先にジャンプする仕組みですね。

自由設定の自由入力欄は名前のとおり、文章や画像、表、リンクなどが自由に設定できますので、アフィリエイトの商品紹介にも最適なコンテンツになっています。


このページ(画像3)の上段にあるタイトル(赤丸で囲んだ箇所)には「個人ブログ」と記入していますが

このタイトルは
コンテンツの配置(図)で「何のためのコンテンツ」かを判別のためのものですので、ブログを表示したときの「コンテンツバー」に表示されるタイトルとは違います。

タイトルを記入していないと「自由形式」とだけしか表示されませんので
数多くの自由形式のコンテンツを使用しているときには、混乱しないように「個人ブログ」のように目的のタイトルを付けておきましょう。

【画像4】
jiyu02.jpg
 ↑ 画像をクリック・元画像が開きます。

コンテンツバーにタイトルを表示するには、上記で確認してきた
「自由形式のHTML編集」で追加したHTMLタグの<sidetitle>に
「利爺の個人ブログ」とタイトルを記入して表示します(画像4)

「画像3、4」の各設定によって

【画像5】


「画像5」のコンテンツの「タイトル」と「その内容」が表示されます。

……

ブログデザインでは
構成の流れ上、タイトルが必要でないときがあります。

流れが断ち切られると感じた時には
あえてタイトルやコンテンツバーの画像を表示する必要はありませんね。

そのことも考えて「ブログの構成」を考えましょう。

納得のいくブログを作り上げることが、アクセスアップにも繋がります。




▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

▲HTMLの関連記事 【別窓での表示です】
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



×

この広告は1年以上新しい記事の投稿がないブログに表示されております。