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




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


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

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

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


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

2009年09月28日

アイコンの作成(2)-アイコンの修正-

■ 4-25 作成したアイコン画像の修正

独自のアイコンを作りブログに設置してみたら

●思っていたものと少し異なる。
●色合いがイマイチだ。
●他の画像との配色のバランスが悪いなどと

思う点がありますね。

作り上げたアイコンを修正する方法を確認します。

アイコン作成用に使用しているソフトは、フリーソフトの彩彩畑ですね。

sai-list01b.jpg←画像をクリック・元画像が開きます。

ソフトを立ち上げ
基本画面の上段のメニューツールのプルダウンメニューから「アイコン」をクリックします。

または下段の右端にある「アイコン」ボタンをクリックします。


「画像1」のような、アイコン入力画面になりますね。

 ↓

【画像1】
aic-02.JPG←画像をクリック・元画像が開きます。

アイコン作成の画面は、縦 32 横 32 ドットの正方形の画面ですが、
メニュから
16 × 16サイズの入力画面に切り替えることもできます。

アイコンの大きさを「16 × 16」の小さいサイズでブログに表示する時でも
大き目のサイズ「32 × 32」で仕上げ、縮小したサイズで表示した方がスッキリした画像になりますので、大きめに作っておきましょう。

 ↓

【画像2】
syusei01.JPG←画像をクリック・元画像が開きます。

上段のホルダー形式のファイルアイコンをクリックして、前回、作成して保存しておいたアイコン画像を読み込みます。

保存しておいた画像は
アイコンのバックにも色を乗せていましたので、ブログの背景色とは相異なる色合いになってしまい、
見た目にもバランスの取れない配色になっていることが考えられます。

色合いの変更は
右側のカラーボックスから、気に入った色を選択してその色を指定して塗り替えます。

 ↓

【画像3】
syusei02.png←画像をクリック・元画像が開きます。

作成用の画面は
アイコン類を製作しやすいように、グラフ用紙のような網目状の四角形で表現していますが、実際には、仕上がった画像類は一個いっこの丸いドットになりますね。

色の選択は、
カラーボックスの該当する色をマウスでクリックして、入力するドットの位置で、再度クリックすれば、
そのドットに選択した色が入力されます。

●矢印の上の部分は少し薄目の色。
●矢印の下方は、濃い目の色。

にしてアイコンに修正を加えます。

同色系の色合いの強弱で、平面的な画像が立体的(3D)に見えます。

カラーボックスの上段に「ペン」ツールがありますので、使いやすいツールを使用して、指定カラーに塗りあげます。

●下地(バック)は透過色(画面の赤丸印)を指定して塗ります。

透過色は表現のとおり
透過していく色で、透明のセルロイドに色の付いた矢印アイコンを描いたのと同じ効果です。

何も描いていないセルロイドの部分は、その下にある色が透過して、矢印のバック色になります。

アイコンを貼り込む位置のブログの背景色が「赤」であれば、透過色を使っている部分は「赤」になる理屈です。

白い色を使っても透過色にはなりませんね。

バックに透過色を使うことで、アイコンを貼り込む位置のブログの背景色が下地に反映され、矢印だけのアイコンに見えます。


 ↓

【画像4】
syusei03.JPG←画像をクリック・元画像が開きます。

バックや矢印の色の変更は出来ましたね。
左上の窓に仕上がりの形状が表示されていますので、確認します。

OKでしたら左上のメニューから「保存」です。



【画像5】
バックに透過色を使用した例。

   new06.gif
 
透過色を使えば、画像の貼り込み先の背景色が、どのような色であろうと
透過して、アイコンのバックの色が表示されません。

例では矢印部分の色のみの表示になっていますね。

【画像6】
バックに色を指定した例。

   ai03.gif
 
アイコンの修正方法は画像作成の基本になりますので、覚えていてください。

慣れて理屈が分かれば、自分なりの「アイコン」を作成してブログの中で十分に生かせるようになります。


●独自のデザイン画像を、アイコン画像にする。

独自のデザイン画像や写真画像から、小さいアイコン画像を作るのもできます。

使用するサンプルは
このブログに設置している、ネーム画像ですが
「彩彩畑」の機能を使い、アイコンとファビコンに作り変えてみました。

製作の手順は、今まで確認した方法と同じです。

【画像7】
アイコンとファビコンのサンプル画像

@GIF画像           AICO画像       Bファビコン画像

tosiji02.jpgtosiji02.jpg




上記の「画像7」は
画像専用ソフトで作成した独自のデザイン画像(gif形式)を、フリーソフトの彩彩畑で「アイコン画像」と「ファビコン画像」に変更したものです。

元画の下色は青色系で仕上げていますが
透過色に指定し直したら、赤色の丸いロゴだけの表示になります。

アイコンのようなファイル名は、画像の大きさの違いでGIF画像(・・.gif)アイコン画像(・・.ico)ファビコン画像(favicon.ico)と区分けしているのではなく、使用する目的での保存形式が異なります。

●ファビコン画像は、必ず「 favicon.ico 」というファイル名と拡張子で保存します。

アイコンとファビコンは見た目が同じ大きさであっても
呼び名の違いと使用目的の違いが有りますので、次回以降で確認します。

アイコン類はネット上で無料で入手できますが、
このソフトでアイコン、ネームプレートなど、ブログで使う画像類が製作でき、ブログのデザインにマッチした独自の形を作る時に役に立ちます。

ダウンロードして手持ちのソフトにしても、損はありません。




▲カスタマイズの関連記事 【別窓での表示です】
   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
……人気ブログランキング……




2009年09月26日

アイコンの作成(1)-独自のアイコン-

■ 4-24 独自のアイコンを作成して使用する

アイコンとは
PCの画面で処理の内容や対象を小さな絵や記号で表現したものですね。

画面上のカーソルをアイコンにあわせ、クリックすることにより操作を行なう、デスクトップ上の小さい画像で、ファイルホルダーやショートカットの画像もその仲間に入りますね。

アイコンを使用することで、他のソフトプログラムなどを容易に起動して、操作できる特性があり
WindowsやMacなどのOSは操作がアイコンで行なえるように設計されています。

アイコンはネット上で無償で手に入れて使用できますが、
独自に簡単なアイコンを作って使用する方法を見ていきましょう。


●独自のアイコンの作成

フリーソフトを使って
アイコンやファビコンなどに類する画像の簡単な作り方を確認します。

過去記事でもフリーソフトの「彩彩畑」を紹介しましたが
使用していない方はダウンロードをして、用意しましょう。



  ⇒ 彩彩畑 ダウンロード頁

【画像】は「彩彩畑」のトップ画面です。

saitop-a.jpg

このソフトで「矢印」の形の画像を作ります。


【画像1】
sai-list01a.jpg←画像をクリック・元画像が開きます。

基本画面です。

基本画面の上段にはメニューが設置されています。
丸で印した「ツール」のプルダウンメニューから「リストマークの基本画像」
を選択します。

    ↓

【画像2】
sai-list02a.jpg←画像をクリック・元画像が開きます。

「リストマークの基本画像」です。

数多くの矢印の中から、赤丸で囲んだ太い矢印を選択します。

それが画像3になります。

    ↓

【画像3】
sai-list03a.jpg←画像をクリック・元画像が開きます。

矢印の種類の中から
赤丸で囲んだ太い矢印を選んでみます。

選んだ矢印が、D の箇所に表示されますね。

次に矢印の色を指定しましょう。


色は B のカラーボックスから選択します。
赤系を選んだら D には赤い矢印が表示されます。

同じようにバックの色を指定します。
透過カラーを使用していますので、ブログに使用しているバックの色に近い色で十分です。厳密な色でなくても大丈夫です。

指定したカラーがすべて D で確認できますね。

矢印の形状、色、バックの色、全体のバランスを確認しましょう。

確認したら「保存」をしておきます。


アイコンは
16 × 16、32 × 32px(ドット)の正方形が一般的ですが、
このソフトでは
6 × 6 のサイズから 36 × 36px のサイズまで指定できます。

表示するとき縮小できますので、32 × 32 や 36 × 36px の大きめの
サイズで保存しておきましょう。

拡張子は自動的に「gif」のファイル形式で保存されます。


new03.gif
矢印アイコンが出来上がりましたね。

アイコンは今回の矢印のような記号類から、文字類、顔型など数多くあります。

ブログの
アイキャチャーやポイントとしての使い道がいろいろありますので
必要に応じて使ってみましょう。

次回は「アイコン修正の方法」です。






▲カスタマイズの関連記事 【別窓での表示です】
   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
……人気ブログランキング……



2009年09月24日

最近のコメントの編集

■ 4-23 コンテンツ「最近のコメント」を再編集する

前回は
「最近の記事」のタイトルの頭に表示される日付を表示しない方法の確認でした。

コンテンツの修正(編集)方法は
他のコンテンツの場合も基本的には、同じ流れの同じような方法になります。

「最近のコメント」の修正

最近のコメントの「コンテンツHTML編集」には

デザイン  ⇒  コンテンツ  ⇒  最近のコメントに進み
⇒  コンテンツHTML編集 

に入りますね。

HTMLの編集に入る前にコメントの表示方法を「ノーマル」から
「ツリー」表示に変更しておきます。

ノーマルのベタ表示より「ツリー」表示の方が見やすく、見栄えもいいです。



【資料1】
「最近のコメント」コンテンツHTML編集

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% if:content_recent_comment.type == 0 -%>
<% loop:list_article_child -%>
<a href="<% article_child.article.page_url %>#comment"><% article_child.article.subject | tag_strip %></a> by <% article_child.writer | tag_strip %> <br />
<% /loop -%>
<% /if -%>
<% if:content_recent_comment.type == 1 -%>
<% loop:list_article -%>
<a href="<% article.page_url %>#comment">@<% article.subject | tag_strip C%></a><br />
<% loop:list_article_child -%>
 Aby <% article_child.writer | tag_strip B %> <br />
<% /loop -%>
<% /loop -%>
<% /if -%>
<% content.footer -%>
</div>

資料は
このサンプルブログの「最近のコメント」のHTMLです。
コンテンツ用のHTMLとしては長い構文になっていますが、全てを理解する必要は有りません。

コメントの表示方法を「ノーマル」から「ツリー」表示に変更している方の、チェックするタグは「青色」で表記している文字の部分です。

黒文字部分は「ノーマル」表示のタグですね。


●各役割を持ったHTMLの挿入箇所

修正するためのタグ類の挿入箇所は赤文字で表した「 @ 〜 C 」の位置です。

@ = の箇所は文頭、
訪問した方が読んでコメントを寄せた「ブログ記事のタイトル」の前(頭)。

A = は「by」(誰から)
の文字を表示。

B = はコメントを送った方
のニックネームの表示。

になります。


●記事タイトルの表示と、頭に記号の表示

@ のタイトルトップに目印(記号類や画像類)
を表示するには、その @ の位置に表示する記号あるいは画像のURLを直接に挿入します。

このブログでは、コメントの頭に記号や画像などのアイコンではなく、丸印(●)を表示していますので

挿入する箇所 = @
記号の形式は = 

<a href="<% article.page_url %>#comment"><% article.subject | tag_strip ">%>

の直接挿入になります。
使用している「●」は記号や画像ではなく、ワープロ文字で表示される「まる」を使用しています。

アイコンやファビコン風画像を挿入するためには
@の箇所にアップロードした画像のurlを直接に記入します。

画像をアップロードしているサーバーを
独自で所有(レンタルサーバー含む)方は、相対的な番地の記入になりますが

seesaaブログのような、ブログサービスを利用している方は

「例」
<a href="<% article.page_url %>#comment"><img src="http://  url  " /><% article.subject | tag_strip ">%>

上記例のように「絶対番地」での記入になりますね。


A の位置には本来は「 by 」の文字が表示されますので
訪問した方の注意を引くため「 by 」の代わりに、ワープロ文字の矢印の「  」に変更しています。

使用方法 @ と同じです。

「例」
<% loop:list_article_child -%>  <% article_child.writer | tag_strip B %>


●ニックネームの表示と表示文字数の制限

B が、コメントを送った方のニックネーム。
ニックネームが長すぎると、次の行に跨りますので、その表示の長さを制限するタグを挿入する箇所です。

文字数制限の | shorten(26) を挿入してみます。

<% loop:list_article_child -%>  <% article_child.writer | tag_strip | shorten(26) %><br />

 | shorten(26)のカッコ内の数字は、任意の表示する漢字の数を表します。

漢字は1文字で2バイト使用しますので
(26)でしたら、その半分の13文字を表示することになります。

任意の数字ですので、10文字の表示でしたら
 | shorten(20)の形式なりますね。


●記事タイトル文字数の制限

C
のピンク色の文字の位置は「記事タイトル」の表示する長さを制限するタグ、
 | shorten(…) 」を挿入する箇所です。

B の方法と同じです。

このブログでは記事タイトルの長さを15字に制限していますので、それ以上の長いタイトル部分は「…」で表示されます。

修正した結果が
このブログの右サイドの「最近のコメント」欄の表示(見え方)です。


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

●コメントが記入されたブログ記事のタイトルとその文字数の制限。
●タイトル頭の記号。
●コメントの内容。
●コメントの送り主(記入した方)のニックネーム

が表示されています。

最近のコメントを残した記事のタイトルには
リンクが張られていますので、クリックでそのページに飛び、コメントの前文が確認できるようになっています。

画像では、コメントの内容や送り主のニックネームは消去しています。

あとは、確認して「保存」で終了ですね。

タグ類は変更した後、ブログにすぐに反映される時と
ある一定の時間を経過して表示されることがありますので、
変更が反映されないときは、少し時間が経ってから確認してみましょう。



………

カスタマイズにはいろんな考え方があります。

●商品販売用だから、成約率が上がればどんなブログデザインでもいい。

という考え方でしたら、
時間をかけてブログデザインを修正する必要はないですね。

訪問する方がネットで一生懸命に検索して、せっかく訪問したのに

●ブログの構成も適当。
●画像の貼りこみも、左右バラバラ。
●視線の流れも滅茶苦茶。
●探している記事までなかなかたどり着けない。

のようなブログに出会ってしまったら、引き返しますね。
逆の立場だったら、おそらく訪問した方と同じように感じるでしょう。

●seesaaブログは
利用者がカスタマイズをすることを「柔軟にしていますが

●カスタマイズは
あくまでも自己責任の元に行いますので、慎重に進めてください。





▲カスタマイズの関連記事 【別窓での表示です】
   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
……人気ブログランキング……




2009年09月23日

最近の記事の日付を消す

■ 4-22 コンテンツ「最近の記事」の日付を消す


●「最近の記事」の投稿日付を消す方法を確認します。

このブログのように
左サイドの「最近の記事」コンテンツには、記事を投稿した日付が表示されます。

日記やエッセイを中心としたブログでは、投稿した日付が重要な要素をしめますが
すでに確認した「ブログの日付を消す(ブログにおける投稿日時)と同じ意味合いからも、商品の紹介をしているアフィリエイトブログには、なるべく投稿した日付が表示されない方がいいですね。




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

「画像1」はこのブログの、コンテンツ「最近の記事」のHTML修正前の表示です。

記事のタイトルの前に「投稿した日付」が表示されていますが、アフィリエイトなどでは、日付を表示しないブログの組み立てが一般的です。

日付は
コンテンツ「最近の記事」の中の「コンテンツHTML」が司っていますので、その構造を確認して、日付表示を再編集しましょう。


最近の記事の「コンテンツHTML編集」には

デザイン  ⇒  コンテンツ  ⇒  最近の記事に進み
⇒  コンテンツHTML編集 

に入りますね。

HTML編集を開きます。


記事コンテンツHTML

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>(<% article.createstamp | date_format("%m/%d") %>)<a Href="<% article.page_url %>"><% article.subject | tag_break %></a>

<% /loop -%><% content.footer -%>
</div>


赤文字で記入している箇所

(<% article.createstamp | date_format("%m/%d") %>)

が、日付の表示タグです。

記事のタイトルや日付は

<% loop:list_article -%>    <% /loop -%

の<loop>タグの中で「入り子」で検索されて、条件に合ったものを表示する指示になっています。

日付を検索するタグがなければ、日付を表示しないということは明白ですね。

そこで日付に係わる

(<% article.createstamp | date_format("%m/%d") %>)

の一行を消してしまえばいいのですが
削除してしまうと何かの時に、元のタグの形式を忘れてしまい、戻せなくなることが有ります。

今回は、削除をする方法ではなく
ソフトプログラミングで頻繁に使用されている「コメント・注意書き」の

<!−−    HTML・CSS   −−>

の形式を使う方法で日付を消します。

<!−−  〜  −−>
 
のコメント記号のワンセットで括った範囲が
コメント・注意書きになり、該当するHTML構文を括ることで、実行されない(コメント扱い)ようになります。

HTMLやCSSでは、長い構文のどこに何が書いてあるのか、分かり易いよいうに、また記述した箇所を探し出しやすいように、コメント・注意書きを記入しておくのが一般的です。

元の構文に戻すときには、コメント記号を消してしまえばいいことです。

このコメント・注意書きは
/※   〜  ※/ 
の形で括っても、同じようにコメント記号を表します。

使用方法は、HTMLやCSSでも共通の形式ですので覚えておきましょう。


日付検索のループ部分
(<% article.createstamp | date_format("%m/%d") %>)
の頭に <!−− 記号を書き込み、後ろの部分を −−> で閉めます。

コメント・注意書きの形

<!−−
(<% article.createstamp | date_format("%m/%d") %>)
−−>

 ●注)使用するときには大文字の<>を、小文字の < > に変更します。


修正後の表示です。

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

修正前は、記事タイトルの前に日付が表示されていましたね。

このサンプル例のように、編集後は
日付は表示されず、タイトルだけになっています。

コンテンツHTMLでは
ループでもってブログ内の「最近の記事」の検索を続けていますが
該当する日付のデータがあっても、結果を表示しないようにしていますので、日付は何も無いのと同じ形です。

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

画像3の例は、タイトル頭に矢印のアイコンを表示しています。

タイトルの頭の位置に目印様のポイントを入れ
目立つ記事タイトルにするために、HTMLを書き換える方法は前回の記事で確認しています。





▲カスタマイズの関連記事 【別窓での表示です】
   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
……人気ブログランキング……




2009年09月19日

最近の記事タイトルの頭に画像

■ 4-21 最近の記事のタイトル頭に画像を表示


随時、記事の更新を行っているが、どうも訪問者反応がよくない。
連続した記事を読んでくれたら、こちらの意図することが相手にうまく伝わるのに。

サイドに設置している
「最近の記事」や「過去ログ」「コメント欄」などもゴチャゴチャして見づらい。

ブログを発信している側の悩みです。

いろいろと応用の利く機能があったら
思っているとおりのブログの構成が出来るのに、などと悩みは多いですね。

前回、確認した
記事のトップに「最近の記事のタイトル」を表示することも、記事に入りやすいレイアウトを目的にした手法ですね。

基本のレイアウトをあまり弄りたくないと言う方には
サイドの「最近の記事」や「コメント欄」などを、今より少しだけ目立たせ、タイトルが把握しやすいように定義を加えてみます。

@ サイドバーの「最近の記事」のトップ(頭)にファビコン風のアイコン画像を入れる。
A「最近の記事」のタイトルの表示文字数を制限する。


の2件を確認します。

【画像1】
tosiji-saikin.jpg
 ↑ 画像をクリック・元画像が開きます。


「画像1」は「最近の記事」の修正前の形です。

記事のタイトルが長く、2行に折れ曲がった表示や
次のタイトル行との区切りが分かりにくいですね。


● コンテンツ「最近の記事」のタイトル頭にアイコン画像を表示

コンテンツに修正を加えるには
使用しているコンテンツの種類の中から「最近の記事」のコンテンツを選択してそのHTMLを開き、必要な箇所を修正して書き換えるか、または削除などのHTML編集をします。

「編集」には

  デザイン  ⇒  コンテンツ  ⇒  最近の記事  に進み
  右上の  ⇒  コンテンツHTML編集

の順に進み、最近の記事「コンテンツHTML編集」を開きます。

【資料】
最近の記事「コンテンツHTML」

<div class="sidetitle">
<% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>)<a Href="<% article.page_url %>"><% article.subject | tag_break %></a>

<% /loop -%>
<% content.footer -%>
</div>


資料は、最近の記事の「コンテンツHTML」の構文です。

検索やループの機能を用いて、コンテンツ「最近の記事」の中に
新しくアップされたブログ記事のタイトルを表示するための構文になります。

HTMLはマークアップ言語ですが
C言語などのように、条件を検索して判定する仕組みのループ機能なども構成できるようになっています。

プログラミングの経験者なら、検索の構文を理解できますが
今回は、形式を一つひとつチェックすることが目的ではないですので、難しい構文を理解する必要はありません。


● 画像の挿入

タイトルの頭に表示する画像を作成するのに
Adobe などの専門ソフトを使うことはないです。

専用のソフトを使用するためには
デザインの知識が必要なことと、ソフトの価格も安くはないですから、ネットで無料で使える、気に入ったアイコンを探し出して、使用することも考えましょう。

画像は簡単なアイコンで十分です。

独自の画像を作りたいと言う方には、
アイコン類が簡単に作れる無料のソフトで「彩彩畑」というがあります。



    ⇒ 彩彩畑 ダウンロード

ソフトの「彩彩畑」は使いやすく、非常に重宝しています。
このブログで使用している、矢印のアイコンもそのソフトで制作しています。
 

● アイコンの表示の方法。

ブログで画像を使用するためには
ブログサービスのサーバーにアップロードしていることが基本ですね。

記事入力欄の下方にある
「ファイル」(ファイルマネージャー)からアップロードとダウンロードになります。

使用する画像ファイルのurlは
記事欄にカーソルで挿入位置を決め、アップロードした画像をクリックすると、記事欄に画像urlが表示されますね。

そのurlがアップロードされた場所とファイル名になりますので、コピーしておきます。


<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>

<img src="Http://tosiji-dreamafi.up.seesaa.net/
image/new5.png" />


  ↑ urlサンプルに、このブログの画像のURLを使用しています。

<a href="<% article.page_url %>"><% article.subject | tag_break | shorten(●) %></a><br />
<% /loop -%>
<% content.footer -%>
</div>



上記HTMLの構文の

<% loop:list_article -%>
(<% article.createstamp | date_format("%m/%d") %>

 ●  この箇所に挿入

<a href="<% article.page_url %>">

● 印の箇所に、先の確認してコピーしておいた画像の「URL」を挿入して、その箇所やurl名が正しく表記されているかを確認します。

一旦「保存」しておきます。


●表示文字数の制限

記事のタイトル文字数を、任意の数に制限する方法を確認します。

<% article.subject | tag_break %>

の後ろに、 | shorten(●)

のHTMLタグを追加します。

shorten(●) の「●」は数字(変数)を記入する箇所です。

漢字1文字は表示に2バイト使用しますので、仮にタイトルを10文字での表示にしたければ
10文字の2倍=「20」  shorten(20)  として記入します。

記事のタイトルが、10文字より長ければ
shorten(20) としていますので、それ以上の文字は表示されなくなり、省略を意味する点(…)に変わります。

サイドコンテンツの左右の表示幅をチェックして
1行に、最大何文字表示されるのかを計算して、その文字数内に収まるように変数を指定することが、次の行に折れ曲がるタイトル文字が調整されて、整然と揃って見やすくなるでしょう。


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

画像2は修正したブログの表示です。

左サイドの最近の記事

●記事タイトルの頭(トップ)の矢印。
●タイトルの表示文字の長さを制限。

記事トップの
●独自に作成した「最近の記事」コンテンツのタイトル表示

が今回、修正した表示方法です。

記事トップの修正も同じ修正方法ですので、後述します。

次回は

●コンテンツ「最新記事」の日付を消す。
●ファビコン画像の作り方。
●他のコンテンツの整理。

を確認します。



▲カスタマイズの関連記事 【別窓での表示です】
   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
……人気ブログランキング……



2009年09月08日

ページトップに最近の記事を表示(2)

■ 4-20 最近の記事のタイトル表示(2)


●CSSにセレクタの追加

前回は、記事のトップに最近の記事をピックアップしてタイトルを表示させるため
「表示記事のHTML」を編集しました。

ブログへ新しい機能を追加するときは
「HTMLの編集」と「CSSへのセレクタの追加」が必要でしたね。

HTMLが参照するCSSのセレクタの追加がまだですので、表示の段階には進んでいませんね。

ブログ作成のため使用しているテンプレートのCSSへは
左上段のメニューの
 
デザイン ⇒ デザイン設定 ⇒ テンプレート名

から入りますね。

記事HTMLが参照する、新しいセレクタを定義して追加します。
追加する箇所はどこでもいいです。

追加するセレクタ

.cont{
margin:5px;
padding:0px;
background-color:#ddcc99;
}
.cont-title{
font-size:12px;
font-weight:bold;
padding:5px;
margin:5px;
background-color:#ddcc99;
}
.cont-body{
font-size:12px;
padding:0px 10px 0px 10px;
margin:0px 0px 0px 30px;
text-align:left;
}
.cont-body a{
text-decoration:none;
color:#666666;
}


CSS用のセレクタ
.cont
.cont-title
.cont-body

は、前回のHTMLの編集のとき、新しく作ったセレクタ名ですね。
このセレクタは正式には「class」名です。

参照 



HTMLとCSSのセレクタは名前を統一しないと、参照しません。

挿入後、保存をする前にプレビューで確認してみましょう。

記事のHTMLは前回修正していますので、今回のCSSへのセレクタの追加でプレビューは表示します。

表示位置・タイトルの大きさ・文字(書体)・バックの色など納得のいく形(デザイン)になっていたら「スタイルシートの変更(保存)」です。

このブログでは、
記事トップに最新記事のタイトルの表示はしていませんが、
関連ブログでは修正していますので、使用状況をみてみましょう。

【画像1】
kijitop01.JPG
 ↑ 画像をクリック・元画像が開きます。

画像は利爺の「個人ブログ」です。

ブログ(日記)では個人的なことが多く、エッセイ風に纏められていることが多いですね。

利爺らの年代では
ブログのことは知っていても、実際に記事を読む経験があまりなく、トップ記事は読んでも他の記事は読めない(探せない)というのが大方です。

サイドのコンテンツの最新の記事から…
という話をしても、よく分からないとの返事です。

ブログトップに最新の記事タイトルが表示されていることが、記事が読みやすく、入り込みやすいようですね。

雑誌で言えば「トッピクス」です。


訪問した方に記事トップで最近の記事を案内することは、
興味を持たせる引き金になります。

検索された記事のタイトルは、
左からの表記指定(青文字)
  .cont-body{
  ・
  margin:0px 0px 0px 30px;
 (左から30pxの位置から表記)

バックの色は、右サイドの色に近いものを
  background-color:#ddcc99;
  (バックの色は#ddcc99)

を指定していますが、
ブログにマッチした色を指定することが、
見栄えのいいブログの基本です。

 参照 ⇒ PCでのカラー表現について
        

いろいろと試して見ましょう。


個人の日記ブログやアフィリエイトの展開用ブログ、

とくに商品を紹介している物販アフィリエイトにおいては、
記事のトップで、紹介している商品の案内をかけることは重要です。

シーサーブログでは、
記事トップに最新記事のタイトルを表示する機能が準備されていませんが、必要だと思う機能は、調べ上げて追加するという考えが方が重要でしょう。

苦労して作り上げた、
使い勝手のいいブログは必ずいい結果をもたらします。


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


トップに最近の記事を表示(1)

■ 4-19 最近の記事のタイトル表示(1)


訪問した読者にたいして
最近(最新)の記事のタイトルを記事トップに表示して、利用しやすくする方法です。

カテゴリや投稿記事が増えてくると、記事の管理に手間取ることが多く、カテゴリ内の情報の把握も難しくなってきます。

ブログ発行の当事者が情報の把握も難しければ、訪問者(ユーザー)にとっては、なお難しいページの構成になっていると思ってもいいでしょう。

カテゴリ内の新着記事をリストアップして、トップページに表示することで、記事の流れや纏められた内容を調べやすくして、訪問した方の意識を集中させる利点があります。


最近の記事のタイトルは、サイドに配置しているカテゴリには表示されていますが、最初に目の行く記事トップにはありません。

HTMLとCSSに手を加えて、記事トップに表示する方法を確認します。

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

画像は、記事のトップに「最近の記事一覧」を設置した例です。

画像の中のナンバー
@は
「最近の記事一覧」の記事を表示する領域に対するタイトル枠の表示です。

Aは
抽出した最近の記事のブログ記事のタイトルの表示域で、文字の位置などの定義があります。

Bは
本文記事の表示ですね。

Cは
左サイドに表示されているデフォルトでの、最近の記事のタイトルです。
この表示で、最近の記事の案内はトップに必要ではないのではと思いますが、左や右のサイドは
訪問した方にとって、あまり重要とは思わない傾向が見られます。


画像例の形にするため
HTMLでの追加、修正などのカスタマイズの項目の数は割りと多くなっています。

【資料1】
【カスタマイズの項目】

●タイトル「最近の記事一覧」の表示
●表示域を罫囲み
●表示域のバック色

●ブログの最近記事タイトル名
●ブログの最近記事タイトル名用の画像(頭)
●ブログの最近記事タイトル名の表示件数
●周囲の罫囲み

●文字の種類・大きさ・行の高さ
●表示した記事へのリンク


カスタマイズは
● 記事のHTMLの修正
● CSSへの追加


の2カ所の変更が必要です。


● 記事のHTMLの修正

記事のHTMLには、左上段のメニューから

デザイン ⇒ コンテンツ ⇒ 記事 ⇒ コンテンツのHTML編集

と進みます。

記事のHTMLは長い構文で出来ています。

その構文の中から
<% if:page_name eq 'index' -%>
のタグを探し出します。

記事HTMLの3行目くらいに有りますが、同じタグが別にもあります。

挿入する場所、該当するタグを探すのが難しければ、web上には便利な検索機能がありますので、その機能を使った方がスムーズに探し出せます。

「検索の方法」
HTML編集画面にカーソルを置いて
キーボードの「Ctrl」(コントロール)キーとアルファベットの「F」のキーを同時に押します。

日本語入力ソフトと共通の、検索の為のショートカットキーですね。

画面上部に「検索窓」が表示されますので
 <% if:page_name eq 'index' -%>
と入力して検索してください。

青色の反転文字でその該当するカ所を示します。

【資料2】
記事コンテンツのHTML

<% content.header -%>
<!-- Content -->
<% if:page_name eq 'index' -%>

 <div class="cont"
 <div class="cont-title"… 最近の記事一覧 …</div>
 <div class="cont-body"
 <% loop:list_article-%>
 <a href="<% article.page_url %>"class="title">
 <% article.subject|shorten(50)%><br></a>
 <%/loop-%>
 <br style="clear:both"></div>
 </div>
 <% if:pager.need_pager -%>
 </div>


<% if:pager.need_pager -%>
 ・
注)= 説明上<>は大文字を使用していますが
    正式には <> の小文字を使用します。


<% if:page_name eq 'index' -%>の下段に
<div class="cont">以下の赤文字で書いてあるHTMLのタグを追加します。

緑色の文字

cont  
cont-title
cont-body


のセレクタ名は、このブログ用に名づけたセレクタ名ですので、真似る必要はありません。
自由に付けて構いません。

ただし、セレクタ名の
「title」や「body」などはCSSの重要セレクタ名ですので、同じセレクタ名にしますと重複してエラーになりますので、注意が必要です。

新たに追加した赤色文字のHTMLで、
最近の記事を読み取り、指定した位置に表示する要素を記入しています。

CSSにはセレクタとして、表示上の装飾をする

「cont」     = ブログの記事のタイトル・文字の大きさ、行の高さなど
「cont-title」 = タイトル「最近の記事一覧」の表示とその位置
「cont-body」  = ブログの記事タイトルを表示する場所・位置

を作成して、定義の内容を読み込んで表示する形になります。

新しいセレクタを追加するときにCSSとHTMLのタグは同じ名前にします。
追加したセレクタ名は忘れないようにメモして置きます。


<div class="cont-title">… 最近の記事一覧 …</div>

は見出しのタイトルです。
簡単に「最近の記事一覧」にしていますが、訪問した方の気を引く言葉や語句に書き換えてもいいでしょう。

<% article.subject|shorten(50)%><br></a>

の(50)の数字は変数です。
ピックアップして表示する「最近の記事」のタイトルの長さ(文字数)をあらわし、数字(変数)を変えることによって、表示幅を変更できます。

日本語漢字は2バイトですので(50)は、25文字です。
25字を使うブログ記事のタイトルは、おそらく無いでしょうから漢字10文字として(20)でもいいでしょう。
仮に、タイトルが漢字10文字を超えていても
表示が10文字の意味ですから、余った字数が表示されないだけでエラーにはなりません。

青文字「<br>」は改行を表し、記事タイトルの表示方法です。

<br>が無ければ、記事タイトルは一行単位で表示します。

追加したHTMLは、本来は
<% if:page_name eq 'category' -%>
の構文の中に追加しますが、

この説明では「index」を利用していますので、
<% if:page_name eq 'index' -%>
の下段に追加しています。

まだ対応するCSSのセレクタを追加していないので、ブログやプレビューでは表示されません。

「保存」して記事のHTMLの編集は終了です。


次回は「CSS」にセレクタを追加します。




▲カスタマイズの関連記事 【別窓での表示です】
   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
……人気ブログランキング……



2009年09月01日

ブログの日付を消す

■ 4-18 ブログにおける投稿日時


ブログでは投稿日時が表示されるようになっていますね。

ブログが、もともと日記形式から発展したものであることを考えれば、当たり前のことですし、ブログの記事を読むときも、いつ書いた文章なのか気になるものです。

今日のようにインターネット、雑誌、テレビ、新聞などからの情報が溢れる世界では、当然であり、読者が「最新の情報」を求めているからだと言えます。

有益な情報には新しいも古いもないと思っていますが、1週間前、1ヶ月前の情報より「今日」の最新の情報が知りたいと思うことが、投稿日付を無意識に見ていくのだと思っています。

心理の作用でしょう。

その見方からいくと、
アフィリエイトを進めている方、とくに「情報商材」を展開している方の記事には「日付」を表記することは、常に新しい情報を発信している意味合いからも必須であり大事なことですね。

逆に「物販系」はどうでしょう。

今回の表題は「ブログの日付を消す」になりますので
物販のブログを始めたい方や、すでに展開している方を対象としています。

物販では
1商品を1ブログ記事で紹介するのが基本になっています。

ブログへの訪問者が検索エンジンからの経由が多いことを考えると
商品を買いたいと思う人の心理はどのようなものでしょう。

スーパーやコンビニで商品を買うときには、賞味期限などを確認しますね。
期限切れの商品は手にしませんね。

物販でも同じことが言えます。

物販の商品には「期限」の表示はありません。

そこで、購入を考えている方はブログの投稿日で判断することになります。

半年前や1年前の商品紹介の記事でしたら、商品は新しくても、その商品を案内している記事
記事が過去の日付だと、商品そのものが古いと思われる可能性が高いです。

結果、折角の検索エンジンから訪問したお客を逃がすことになりますね。

購入者にそのような意識を持たさないためにも、物販では「日付」をあまり表示しません。


■「ブログの日付を消す」

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

「画像1」はこのブログの日付を表示している画像です。
バックに画像を用いて、その上部に日付を表示しています。

CSSでの日付の定義、セレクタは「.date」ですね。

CSSには、左上段のメニュー 「デザイン」 ⇒ 「デザイン設定」
その最下段の「テンプレート」名のクリックで入ります。

参照 


【資料】
【CSS】日付のセレクタ

.date{
clear:left;
font-family:Verdana;
font-size:10px;
color:#666666;
font-weight:normal;
text-align:left;
padding:13px 0px 13px 15px;
margin:20px 0px 0px 0px;
}


⇒ セレクタ名
⇒ 左設定のクリア
⇒ 書体
⇒ 文字の大きさ
⇒ 文字の色
⇒ 文字の太さ
⇒ 文字の表示位置
⇒ 文字の表示位置
⇒ 文字の表示位置
⇒ セレクタ閉め


日付の表示を消す方法には

「.date」セレクタとそのプロパティの全てを、削除することが一番簡単ですが、マークアップ構造のHTMLと連結していますので、不可のエラーが起こることもありえます。

それを避ける意味からも

@ セレクタの「 { 」と「 } 」は残して、プロパティを削除して、空の定義にする。

セレクタ「.date」の中の定義、プロパティは全て削除して .date{ }  の形にする方法。

しかし、全てのプロパティを削除してしまうと
元の戻すときに、どのようなプロパティだったのか困ってしまいます。

A 参照の「 <!--   --> 」記号でセレクタを全て括って、新しく空の定義「.date」セレクタを作る。

参照記号<!--  CSS  -->を用いて、セレクタの要素を全て括る方法で、元の形式のままCSS上に残りますが、参照になっているので定義されません。

この場合も新しく@の形式 「.date{ } 」空定義のセレクタを作る必要があります。

B 現在の「.date」セレクタを生かし、表示させないようにする。

元に戻すことを考えて、現在のセレクタに、新しいプロパティを追加して、ディスプレイに表示させない方法。

セレクタの定義をいじることなく、エラーにもならず無難な方法です。


Bの方法を確認します。

上記の「資料」CSSに
.date{
 ・
display:none;
 }

赤文字で書いたプロパティ
display:none; 
を追加するだけです。

日付の表示が消されます。
消すというより「日付の非表示」になります。

プロパティ「display:none;」を追加して、日付を非表示にしていますので
「.date」の各プロパティは定義の意味を成さないようにみえますが

内部的にはプロパティは生きていますので、他のセレクタとの関係はそのまま継続しています。

物販では、日付のないサイトを数多く作って、検索エンジンから集客します。
その形が一般的で、多くのアフィリエイターが行っている方法です。



▲カスタマイズの関連記事 【別窓での表示です】
   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年以上新しい記事の投稿がないブログに表示されております。