アンテナカスタマイズ
RSSリーダーの便利さについつい頼り過ぎて、なんでもかんでも登録しまくってたら段々収集がつかなくなってきて、結局あまり使い勝手がよいとは言えなくなってきました 笑
だいたい、ネットサーフィンしててもあまり時間に余裕がないので「お、なんかおもしろそう」と思ったら「よし、今度ゆっくり読もう」ってなんでもかんでもブックマークしちゃうので、もうブラウザのブックマークも見るのも大変な量になって、自分でもいつ何をどうしてブックマークしたのかよくわからなくなってます。
RSSリーダーが普及すればはてなアンテナの必要性がなくなるかな、と思ってましたが、やっぱりはてなアンテナははてなアンテナで、あって不自由するモノではないですね。
この際アンテナも有効に使ってRSSリーダーのリストとブックマークをちょっとスッキリさせよう。そんなふうに思いました。
そうだ、そんでソイツをこのブログからリンクしちまえばわざわざリンクページ作らなくて済むし。一石二鳥じゃん。そうとも思いました。
で、さっそくはてなアンテナをスタイルシートでカスタマイズして、ブックマークしてるサイトを一つ一つ開いては、これはよく見る。これはたまに見る。ここはもう見ない。なんですかこのサイトは？みたいなカンジで仕分けしていきます。思っていたよりも、ずっと途方もない作業です、これは 笑
そんな作業を繰り返しているうちに意識が遠のき、いつしかおでは、テレビでやってたジェダイの復讐に釘付けになっておりました。
まあ、この作業はヒマをみつけてはぼちぼちやっていきたいと思います。
ついでのもちに、HTMLぐらいは知ってるけどスタイルシート？ナニ、ソレ？って自分のアンテナデザインを変える事をやめてしまったアナタに。今回アンテナの設定に記述したCSSを説明つきで一挙公開。
まあ、ド素人が独学で会得したようなモノなので、なんか変なトコロとか微妙な勘違いもあるかもしれないけどちゃんと動けばいいんじゃない？みたいなアバウトなカンジなので、そんなに自信をもって一挙公開っていうようなモノでもないんですがね。
このテキストエリアのCSSをガーッとコピーして、下の説明を読みながらプロパティや値をチョチョっと書き換えては試し、試しては書き換え、とやってるウチにだんだんCSSがわかってくるんじゃないかと思います。
CSSがわかるとwebデザインがグッと楽しくなってきますので、まあ、騙されたと思ってやってみてはいかがでしょうか。
body { /* body全体の設定 */ margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; background-color: #7b7b7b; /* 全体の背景色 */ font-size: 12px; /* ※説明1 */ } li { /* <li></li>で囲まれた部分 ※説明2 */ color: #ffffff; font-size: 10pt; } a:link, a:visited { color: #e4d01b; text-decoration: none; } a:hover { color: #ffe600; border-bottom: 1px dotted #ffe600; } /* リンク色などの設定 ※説明3 */ h1 { /* 見出しH1の設定 ※説明4 */ text-align: left; font-size: 16pt; color: #cecece; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; margin-top: 8px; margin-bottom: 5px; margin-left: 5%; margin-right: 5%; padding: 4px 4px 4px 4px; } h2{ /* 見出しH2の設定 ※説明5 */ text-align: right; font-size: 8pt; color: #cecece; font-weight: lighter; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; border-bottom: 1px dotted #ffffff; margin-top: 0px; margin-bottom: 5px; margin-left: 5%; margin-right: 5%; padding: 4px 4px 4px 4px; } ol { margin-top: 30px; margin-bottom: 30px; margin-left: 50px; margin-right: 5%; } .diff { /* ※説明6 */ background-color: #cecece; font-size: 8pt; color: #000000; border:dotted 1px #6d6d6d; margin: 5px 10px 20px 10px; padding: 10px; } .pager { /* ※説明7 */ font-size: 7pt; text-align: right; margin-top: 3px; margin-bottom: 3px; margin-right: 5%; } .pager a:link { color: #000000; text-decoration: none; } .pager a:visited { color: #000000; text-decoration: none; } .pager a:hover { color: #ffffff; border-bottom: 1px dotted #ffffff; } div.adminmenu { font-size: 50%; margin: 2% 5% 0% 0%; text-align: right } span.adminmenu {} div.footer { color: #cccccc; margin: 5px; font-size: 80%; text-align: center; } form.hatena-searchform { text-align: right; margin-right: 5%; }
これを適用したアンテナがこちら
飽くまではてなアンテナ内では、という観念で説明していきますが、
※説明1※
はてなアンテナ内でbody部分のフォント設定が反映されるのは、ユーザーがヘッダー・フッターに任意で書き込んだテキストと最下部のCopylight表記のみとなります。
これは、ほとんどの部分にリストや見出しなど、何らかの要素が設定されているためです。
なので、body部分で変えるべきは、背景色くらいと思います。
※説明2※
これはリスト要素の設定です。アンテナ内でこの設定が反映される部分は登録されているサイトの更新日時・サイト名が記載されている部分です。この部分で行った設定はページ内のリストタグで囲まれている記述全てに反映されます。*1
上記では通常のテキストカラーを白にしてサイズを10ptに設定するだけに留めていますが、text-decoration: underline; (下線）や font-weight: bold;（太字）、 font-style: italic;（斜体）などを書き加える事で更にカスタマイズ可能です。
※説明3※
これはリンク部分の設定です。a:linkは通常のリンク、 a:visitedは既に訪れているリンク、 a:activeは現在選択中のリンクを表します。a:hoverを使うとカーソルがリンクの上を通過した時の動作を設定できます。
通常はa:link、a:visited、a:activeをそれぞれ個別に設定するケースが多いですが、上記のa:linkとa:visitedのようにをカンマで区切ればひと括りで設定する事もできます。
リンクの設定の中で text-decoration: none;を記述するとリンク時の下線を消す事ができます。ここでは通常リンクの下線を消し、a:hoverの時だけ下線が現れるようにしています。通常はa:hoverの設定にtext-decoration:を書かなければそういうふうになりますが、ここでは下線を直線ではなく点線にするためにborder-bottom: 1px dotted #ffe600;という記述を加えております。
※説明4※
見出し(H1）の設定です。少しだけならタグが使えるという人でこのH1〜H6タグを単に字の大きさを変えるタグだと思ってるケースが非常に多いですが、実際には『見出し』として色々な役割を持っています。
ここでH1に割り当てた設定は、H1タグで囲まれている部分に反映されます。デフォルトではヘッダーに書かれている『○○のアンテナ』というタイトルがH1で囲まれていますね。
主に変えるのはフォントのサイズ、色、書体。マージンはテキストの上下左右に取る間隔ですので、これはデザインに合わせて好きな数字を設定すればいいでしょう。
また、filter: *2や text-shadow: *3といったプロパティを使えば文字を半透明にしたり影をつけたりする事も可能ですが、これは一部のブラウザにしか対応していないのであまりオススメはしません。
※説明5※
これはデフォルトの設定にはない属性ですが、要は※説明4※のH1と同じ事でH2で囲んだ部分を設定します。ここではアンテナの説明文としてヘッダーに書き込んだ文字をH2で囲み装飾するために追加しております。この場合、見出し(H2)じゃなくて、段落（p）を使ってもヨカッタんですけどね。
見出しタグにはロボット検索に対して有効に働くという特徴があり、つまり見出しタグを使っているほど検索エンジンに拾われやすいサイトを作る事ができるワケです。
ちなみに、見出しタグで囲んだ文字は否応なしに太字になってしまうワケですが、これはfont-weight: lighter;を記述すれば細字にする事ができます。
※説明6※
.diffとは更新記事にあたる部分です。この部分はテキストに背景色をつける事によってクォート記事のように実装されていますね。ように、って言うかブログ内で使うクォートも実際にはこんなふうにCSSを使ってクォート要素として囲ってある部分の見た目を変えるように設定してあるだけだから、要素の名前が違うだけでやる事は同じようなモンです。
※説明7※
.pagerは右上のグループリストやおとなりアンテナなどのリンク部分がそうです。.pagerの設定と言っても、この場合その中身の全てがリンク要素なのでリンク要素に対して行った設定も絡んできますね。あんまり変えるトコないじゃん、ってカンジですがしかし、.pagerというクラスがくっついてるおかげで、この部分のリンクだけを他と違う設定にする事もできるワケです。
.pager a:という記述は、.pager 部分のlink要素を表します。ここで行ったリンクのプロパティは.pagerというクラスがついている段落内のリンクのみに反映されます。
あと、上部の広告リンクは＜li＞の親要素である＜ol＞で囲まれてはいますが、list-style-type属性がnoneとなっているため ol要素の設定はここには反映されません。
/* */ で囲まれているのはコメントアウトの部分です。実際書き換えたりするのであれば消した方が見やすいかと思います。
まあ、そんなトコロでしょうか。
