グレートブロガー養成講座!可能性が広がる魅力的なブログの作り方とは? -2ページ目

リンクの色を変えようと思っていても、何色にするかわかりますか?

リンク(テキスト)の色を何色にして良いかわかりますでしょうか?

これっていう絶対的な決まりはないのですが、見やすい色にすべきなのは誰でもわかるかと思います。

古くから、リンクテキストは青系にする方が良いと言われています。

実は、多くのブラウザのデフォルトの色は青系になっているものがほとんどです。

更に、訪問済みのリンク色も紫系が良いとされてきていて

これも、最初からブラウザのデフォルトになっています。


また、公式はもちろん

余所で配布されているアメブロカスタマイズ用のテンプレートも、この辺は考慮されているはずですので

あえて、変更はしないでもかまわないと思うのですが

いわゆる、広告的なリンクであったり

注目リンクは傾向として、青系(太字も多い)のアンダーライン付きで、

訪問済みリンクも区別しないスタイル設定にしているサイトも多いです。

細かい事を言えば、ユーザビリティの面からは訪問済みリンクは別のスタイルを設定するのが良いかと思いますが、

この辺のさじ加減は、それぞれが状況やブログ(サイト)のコンセプトの優先順位から決めた方が良いかと思います。

なお、このブログではアメブロでの傾向を考えて

広告的なリンクや注目リンクは青系のスタイルに設定しています。
(現在では、共に同じスタイルですが、

将来的に変更する可能性を考慮して

それぞれに別のクラス名を指定しています。

実際の、やり方とコードは後日公開予定です。)

また、見慣れたものであった方が良いだろうとの考えもあります。
(他のレイアウトを含めたスタイル全般的に、
  1. WEBでの一般的なサイト
  2. アメブロでの一般的なブログ

この、両方から考察しています。)





はじめての方はこちらからどうぞ

無料のWEBサービスでは広告を表示する事を利用条件とするものが多いです。

タイトルのとおりなんですが、

これはWEBサービスの利用条件としてはあたりまえのように思えるのですが・・・

当然ながら、アメブロも例外ではなく広告をユーザー(会員)に

表示してもらうことで利益をあげることができます。

その広告を見えにくくするとか、消してしまうという発想そのものがおかしい事に気付いてください。

心情的には、そういった事を思うのはわかるのですが

WEB上でサービス提供している方(法人も個人も)の大半はボランティアをしている訳ではありません。

運営費を維持する必要もあるわけで、昔からWEBでは広告でその費用を賄うような事が当たり前のように行われています。

サービスを利用する側は、運営側のこういった台所事情には進んで協力するべきとの考えも当たり前のように浸透してきたと思います。

ですが、インターネットが一般の家庭に当たり前のように導入されてきたわけですが

それにより、こういった常識的に定着していることを認識できてない方が多くなってきた感があります。


これも、多くのサービスにある事が多いのですが

アメブロも広告を有料で外すことが出来ます。

なので、どうしても外したい場合は有料サービスを利用するべきです。

デザインに関しては、昔からこういった広告はうまくデザインの一部とすることでデザイン性をそこなわないようにするということも当たり前のようにいわれていたのですが、

これを間違えて解釈してはいけないのは、見えなくなるほど背景に同化させたり

文字を視界に入らぬほど小さくする事ではありません。

あくまでも、広告としての効果を落とす装飾ではなく広告は広告として機能し

その上でデザインと融合させる必要があります。

サービスによっては、ガイドラインがあってその範疇なら自由に広告の位置を決められるサービスもありますが、

現状ではアメブロは自動挿入の位置がHTMLの構造的には決まっていますので変えることはできません。

CSSやJavaScriptで位置を故意に変更することは出来ますが、

これを行うという考え自体が誤りです。

偶然、他の装飾により位置が変ってしまった場合は

それが広告として機能が落ちるとあかるさまにわかる場合は

デザインを考え直す必要があります。

また、古くからWEBサービスの運営側は

元々が利用者側として多くのサービスを利用してきている人が多く

利用者の気持ちも考慮してくれていると思っています。

そういうことが前提にあって、広告を外せるように有料サービスを提供したりもしていると思っています。

はじめての方はこちらからどうぞ

画像リンクのHTMLコードその2

2012/05/03:img要素に関する重要な追記をしています。


この記事は画像リンクのHTMLコードその1の続きです。

前回は長くなって本題に入れませんでしたので、さっそく画像リンクのコードの説明を始めます。

要は、リンクの内容を画像にするだけです。
(img要素をa要素の内容にします。)

<a title="HTMLの簡単な説明|グレートブロガー養成講座!可能性が広がる魅力的なブログの作り方とは?" href="http://ameblo.jp/setagayaweb/entry-10788790248.html" target="_blank"><img src="http://stat.ameba.jp/user_images/20110207/18/regolbema/13/fe/p/o0170016011032875862.png" width="170" height ="160" alt="HTMLの簡単な説明|グレートブロガー養成講座!可能性が広がる魅力的なブログの作り方とは?" style="border:none;" /></a>


このように記述すると下記のような画像リンクになります。

HTMLの簡単な説明|グレートブロガー養成講座!可能性が広がる魅力的なブログの作り方とは?

<a title="この部分はリンクテキストに該当する内容やリンクに関連する事を記述します。" href="リンク先URL" target="_blank"><img src="画像URL" width="画像の幅" height ="画像の高さ" alt="ここには、画像が表示されない時に表示する代替文字を記述します。" style="border:none;" /></a>

赤い背景を付けた部分は、文法上必須ではありませんが普段私が使っている画像リンクにはほとんど使っています。
(target属性に関しては臨機応変ですが、アメブロでは使う事が多いです。)


追記:a要素にhref属性は文法上は必須ではないですが、画像リンクを作成するには必要なので赤い背景を付けて区別していません。

ちなみに、img要素のsrc属性は必須属性です。
(画像URLが必要なのは当然ですが、混同されないよう記しておきます。)

画像リンクとして最低限必要な記述は

<a href="リンク先URL"><img src="画像URL" alt="代替文字" /></a>

このようになります。



一応理由もあるのですが、a要素に付加するtitle属性ですがimg要素に付加するalt属性(これは必須属性です)と同じものを値として指定するのが無難です。

2012/05/03:追記
このtitle属性の説明があまり妥当ではありませんので、追記します。

上記の画像リンクの場合はこれでもおかしくはないとは思うのですが、

仕様と実際のブラウザの反映状況において適切な表現ではなかったです。

必ずしもa要素のtitle属性の値とimg要素のalt属性の値を同じにするのが無難ではなく、むしろ違う方が自然な形になるケースが多いと考えられます。

img要素の必須属性であるalt属性に指定するのはあくまでも、代替のテキストであり、

画像が表現するものと同等の意味を持つテキストを入れるのが妥当です。

そして、title属性なんですが、これはその要素(今回はa要素に付加してますが)に関する妥当な情報を提供するのが目的で、多くの視覚系のブラウザがツールチップとしてその役目を果たしています。

そのままですが要素のタイトル文と考えて良いかと思います。

ところが、IEの場合はimg要素のalt属性の値がツールチップとして機能してしまうので、

a要素のtitle属性の値とimg要素のalt属性の値が同じではない場合はブラウザによって異なるツールチップとなってしまいます。(IE以外のブラウザではimg要素のalt属性をツールチップとして表現はしないので、見た目上の反映と言う事では上記の例では同じ内容のツールチップが機能します。)

適切にこれらの属性を指定した場合には、異なる値になる方がわりと自然なケースが多いと考えられ、

その場合、画像リンクの場合はimg要素にtitle属性も併記しておくのがベストだと考えられます。
(併記した場合はIEでもtitle属性の値がツールチップとして機能します。)

title属性はa要素にもimg要素にも必須の属性ではありませんが、付けるとするならこの辺を考えて付加するべきだと言えます。

もっとも、重要なポイントはIEがalt属性の表現を拡張しすぎ(バグと言うまでのことではないと思うので・・・)ていることだと言えます。




それと、target属性なんですが『_blank』を指定(a要素の属性として)すると

リンク先を別のウィンドウや別のタブ(ブラウザの設定などで違います)で開きます。

同一ウィンドウの場合は属性を付加しないか、『_self』を指定してやります。

『_top』でも同一ウィンドウで開きますが意味合いが違うのであえて付けるなら『_self』です。

これは、実は一時期は使わない方が良いと言われていたもので、(この辺の経緯は長くなるので今回は割愛します。)

文書型によっては(実はHTMLには文書型というものがあってそれによって文法が違ったりもします。)使えません。

で、アメブロは現状では『XHTML 1.0 Transitional』なので使えます。

ついでなので話しておくと『XHTML 1.0 Transitional』は比較的文法的には厳しくなっていないものだと思っていただいて良いかと思います。

ですが、文法上で必須になっているものは意図することが存在する訳で今回のalt属性などは付けるべきです。

このalt属性の値は、通信状況など環境によって画像が表示されない時にブラウザが代替として表示するために使います。(IEなどはツールチップとして表示もしますが・・・)

『 style="border:none;"』ですが、『 border="0"』でも同じ効果が期待できます。(アメブロのスキンのデフォルトで設定されていれば付けなくともOKですが・・・)

これは、画像リンクの周りに枠が表示されるブラウザがあるので

それを表示させたくない場合に付けます。
(逆に枠の太さなどを指定して表示する枠を装飾する事もできますが、一般的には枠を表示させない為に使うことが多いです。)

おそらく、画像URLでつまずく人も多いかと思います。

だれか、アメブロでうまく説明してないかなと検索してみたところ

わざめーばーさんがわかりやすく説明されているので、下記の記事を参考になさってください。

アメブロの画像アップロード方法とアップロード画像のURLを取得する方法



はじめての方はこちらからどうぞ