リンクをアイコン化 -

これまで、モバイルのようなリンクが並んでいるだけだったが、これをアイコンっぽく変更した。
あと、長い記事、短い記事、Myのソート機能はモバイル向けに作ったものなので、PC版はこれらを削ってシンプルにした。
でも、復活するかもしれない。。

改修前

↓
↓
改修後

改修時に調べたこととか

	a:link	未訪問
	a:visited	訪問済

サンプル

未訪問のリンク色を赤色に
a:link {
    color:red
}
訪問済のリンク色を青色に
a:visited {
    color:blue
}

で、

<a href="http://hogehoge">hoge</a>

のリンク色が変更されるらしい。

でも、この書き方は、ページ全体の色が変わるので、一部だけ変更したいときは

未訪問の hoge_linkだけを赤色に
a.hoge_link:link {
    color:red;
}
訪問済みの hog_link だけを青色に
a.hoge_link:visited {
    color:blue;
}

として、

<a href="http://hogehoge" class="hoge_link">hoge</a>

とすると、この hoge_link の色だけが変更される。

おいしいアンテナのリンクは画像で作ると、変更があったときなど作り直すのがめんどくさいので、divタグで囲んでつくった。

こんな感じ。

<a class="icon_link" href="http://a.moog.me/oishii/?sort=newface" ><div class="icon_block"><div class="icon_inner_block">　新着順　</div></div></a>

divタグを aタグで挟むと、そのブロック自体がリンクになった。
画像でもできるから、よく考えれば当たり前だけど、、知らなかった。