外部リンクに自動でマークを付けて視認性を高めるワザ

ブログカスタマイズを勉強中のかーずです。これから休日は本題からそれて、ちょっとした小ネタ（があれば）書くことにします。

勉強中の身なので、堂々と記事にするのは気がひけるのですが、だれかの役には立つかなとは思いますので興味がわいた人は読んでください。


ではまず、カスタマイズといえば、ブログをカッコよくデザインすることを意味しているような感じがしますが、使い勝手をよくする為にももちいられます。かーずが今取り組んでいるのは主に後者です。

で、カスタマイズをするために必須の技術がCSS（カスケーディング・スタイル・シート）です。このCSSの知識がないとカスタマイズと言ってもなかなか難しいです。

CSSとは簡単に言えば、ホームページやブログのデザイン部分を決めてしまう設定のことです。一昔前はHTMLで内容とデザインの全てを表現していたのに対し、今は、内容はHTMLで、デザインはCSSでというのが主流です。

特にこのアメブロはHTMLを全くいじれないので、全てのデザインをCSSのみでやらなければならない。

逆に言えば、CSSを勉強する環境としては最高なんですね
モノは考えようです


で、今回かーずが挑戦したのがタイトルにもあるように「外部リンクにマークを付ける」ことです。

なんのためにこんなことをするかというと、かーずのブログを見てもらえばわかるように、過去の記事やら外部の記事やら、どこへ飛ばされるか分からないリンクがあちこちに張り巡らされています。

読者からすれば、ワケも分からない外部サイトに飛ばされるが嫌な人もいるだろうし、ブログ内のリンクだと思ったのに外部に飛ばされて不快な思いをさせるかもしれません。

そういうことは予め一目でわかるように外部リンクの後にのマークを付けてあげれば親切ですよね。
この手法は、Wikipediaなどでよく使われている（←外部リンクです。分かります？）ので理解されやすいのではないでしょうか。

でも、記事を書くごとにいちいちこのマークを画像フォルダから呼び出して貼り付けていたんでは作業効率が悪くなりますし、今まで書いた記事にも同じことをするとなるとものすごい手間が掛かります。絶対やりたくありません。

やっぱり、外部リンクと内部リンクを自動で判定して、マークをつけてくれたらありがたいですよね。


そういうわけで、いろいろ試行錯誤で頑張ってみたので紹介します。
まずは、外部リンク用の画像を用意してどこかにアップロードしておいてください。お持ちでない方は、このブログで使われているアイコンをそのままダウンロードして使用しても構いません。

方法はCSS編集画面に以下の記述を追加するだけです。
/*ここから*/　と　/*ここまで*/の部分をコピーしてCSS編集画面の一番下に追加してください。

/*ここから～外部リンクにマークを付ける*/
.entry a[href^="http:"]:after{
content: url(画像のURL);
vertical-align: middle;
}
.entry a[href^="http://ameblo.jp/mixturet/"]:after{
content: "";
}
/*ここまで*/

注1：赤文字部分はあなたのブログURLを記入してください。
注2：この記述はアメブロ専用です。他ブログで使用する場合は、.entryをお使いのブログで記事部分を指定するセレクタ名に置き換えれば使える？と思います。

気になるひとのために解説しておくと、まず最初の記述で記事内の内部・外部を問わず全てのリンクにマークを付けます。
そして、次の記述では指定URL内のリンク先からマークを取り外しています。

CSSがよく分からない人にとっては、わけわからないようにみえると思いますが、やってることはシンプルです。要は記号に慣れてないだけなんですね。


また、画像を用意するのが面倒であれば、テキスト（定型文）で表現するのも良いかもしれません。その場合は先程の画像へのURL部分を、例えば以下のように変更してください。

/*ここから～外部リンクに定型文を付ける*/
.entry a[href^="http:"]:after{
content: "（⇒外部サイトへ）";
vertical-align: middle;
}
.entry a[href^="http://ameblo.jp/mixturet/"]:after{
content: "";
}
/*ここまで*/

注：赤文字の部分をお好きな言葉や記号に修正してください。

これで、好きな記号や文字列をリンクの後に自動で表示させることができます。


今後もこのような小ワザがあれば紹介して行きますね。


しかし、アメブロはCSSの設定反映が遅いです・・・
実はこの記事をアップする直前に、このブログでもこの設定を済ませているんですが、アップした時点ではまだ設定が反映されていないので、本当にうまく行っているか不安です
まあ、プレビューがうまく行っているから大丈夫でしょう。なんくるないさー


かーずでした。

太陽光発電実績（2010.2.13）-曇り時々雨 3.5kwh

おはようございます、かーずです。

天気悪いですね～。先月から続く流れですが、今はここ沖縄だけでなく、全国的に悪いようです。

発電量は3.5kwh、売電量は0.3kwhでした

平均発電量は8.3kwh、1月換算すれば232.4kwh
シミュレーション値343.4kwhどころか、300kwhもかなり厳しい情勢です
今月で節目の3000kwh発電は間違いないと思っていましたが、この調子が続けば、来月に持ち越す可能性もありますね

日の出：7時7分
日の入：18時21分
日中時間：11時間14分
天気：

項目	２月１３日	今月の累積	これまでの累積 （８月１１日～）
発電量	４kwh　 （１９２円）	１０９kwh　 （５,２３２円）	２,８９２kwh　 （８８,７２２円）
売電量	０kwh　 （０円）	８１kwh　 （３,８８８円）	２,３１２kwh　 （７０,８１８円）
買電量	９kwh　 （２２５円）	１０１kwh　 （２,５２５円）	１,３１０kwh　 （３２,７５０円）

※１１月１９日以降、売電単価４８円、買電単価は２５円で計算しています。

他の日の発電量を見る＞＞

160Wソーラーパネルがこの価格！シャープ製ソーラーパネルはコストパフォーマンスが抜群！シャ...

検索エンジンからのアクセスが増えた！？

かーずです。休日くらいは、太陽光発電に直接関係のないテーマも取り上げてみようかと思います。


お陰さまで、最近検索エンジンからのアクセスが最近多くなってきているようです。

以下の画像は、過去1ヶ月のアクセス状況ですが、特にグーグルからが一番多く、2010年2月13日現在では406アクセスもグーグルからお越し頂いています

3番目もヤフーから146アクセスして頂いているわけですから、これはちょっぴり嬉しいですね。
2番目はこのブログに読者登録してくれているアメブロユーザー様からのアクセスです。本当にありがとうございます。

でも、この検索エンジンからのアクセスの伸び率は実はかーずの目論見通りというか、少しは予測していたんです。というのは、ちょっとした"仕掛け"をしていたからです。

まあ、この”仕掛け”はまだ継続中、成功したかどうかはもう少し後にならないと分からないので、いずれまた記事で紹介しますね。


さて、このランキングなんですが、これはブログの右サイドバーに設置しているi2iアクセスランキングというブログパーツです。

どういう経路をたどってこのブログに来ていただいたのかをランキング表示するツールですが、ここにサイト名が載るということは、そのサイトには、何らかの形でこのブログへのリンクが張られていて、それをクリックしてここにアクセスする人がいるということを意味します。

だからアクセスを送ってくれたお礼にもなるなってことで、ランキング形式でサイトを紹介しているわけです。

でもこれはかなり便利なツールだと個人的には思っています。
だって、リンクを貼ってくれているということはそのサイトもこちらと同じテーマの内容である可能性が高く、逆にそこへのリンクをこちらも自動で表示することで、このブログの不足部分を補完することになりますからね。

つまり、読者にとっても、紹介者にとっても自分にとってもメリットがあるツールなんですね。ちょっと重いのが玉にキズですが、それを差し引いても十分に有益なツールだと思います。

i2iランキングの設置方法などは、こちらのブログが詳しい ので興味ある方は読んでみてくださいね。

かーずでした。