« 「DAKS ハウスチェック クロス」のレビュー | トップページ | 回転吸入式のドルチェビータが発売に »

CSSによるリンク色変更で右往左往

 先日から当ブログをご覧になっている方は気がついていると思いますが、リンク色を変更しました。リンク色のデフォルトである、「リンク色=青既リンク=紫」にしましたから、以前より見やすくなったと思います。


■~リキッドレイアウト~

 このブログでは、ココログのデザインのテンプレートして、「シンプルライン/ブラック」というものを使ってます。このテンプレートを使っているのは、配色などが気に入ったからというのではありません。

 私は、記事本文の表示幅がブラウザの幅に合わせて伸縮する「リキッドレイアウト」の方が好きです。ですから、ブログを始めるならリキッドレイアウトにしようと思っていました。ところが、ココログが用意しているリッチテンプレートでは、リキッドレイアウトを採用しているのが「シンプルライン/ブラック」しかなかったのです。というわけで、問答無用でこのデザインを使うことになりました。
 (※ゼロからすべてのデザインを自作する、という手もありますが、私にはその技術も気力もなかったので、断念です。)


 選択の余地なくこのデザインになったわけですが、基本的にはそんなに嫌いなデザインではありませんでした。ただ一つ問題があって、それがリンク色でした。リンク色が黒色に似た色で、本文と区別が付きにくい上に、未リンクと既リンクが同じ色にデザインされていたのです。

 個人的に、この仕様はあまり好きではありません。既に見たリンクかどうかは、明確に分かった方がユーザーに優しいと思いますので。ですから変更したかったのですが、問題は既製のリッチテンプレートは、基本的に変更することが出来ない、ということです。ココログのプロプランに変更すればCSSの直接編集が出来ますが、リンク色を変更するためだけに月に997.5円を払うのも気が向きません。

 ということで、ベーシックプランのままでリンク色を何とか変更しよう、という右往左往の一週間が始まったわけです。

※注
 私は基本的にJavaScriptもCSSも、どちらの知識も元々ゼロに近い状態でした。ですから、以下の記述にはおかしいところ、効率的でないところがあるかもしれません。
 もしそうしたところがある場合は、遠慮なくコメント欄で指摘してください。


■~JavaScript~

 まず最初に考えたのは、JavaScriptで追加のCSSを読み込ませる、ということです。以前から、当ブログではカテゴリと月別バックナンバーを目次表示させるために、他のブログで公開されているJavaScriptを使ってきました。

 ココログでは、サイドバーに設置するマイリストのメモ欄にJavaScriptを書き込み、設定で「メモをテキストとして表示」にすれば、JavaScriptが実行される、という仕組みが用意されています。そこで、この仕組みを利用し、以下のJavaScriptをマイリストから実行させます。


<SCRIPT language="JavaScript">
<!--
{
document.write('<link rel="stylesheet" type="text/css" href="http://visconti.air-nifty.com/java/01.css">');
}
// -->
</SCRIPT>


 次はCSSの用意です。


@charset "UTF-8";

/* link */
a:link    { color : blue; }
a:visited { color : purple; }

.entry-body-text a:link,
.entry-more a:link {
color: blue !important;
}

.entry-body-text a:visited,
.entry-more a:visited {
color: purple !important;
}


 以上の記述をテキストエディタに書き込んで"01.css"と名前をつけ、ココログ管理画面のファイルマネージャーで、JavaScriptで記述したurlにアップロードします。これにより、めでたく希望通りのリンク色に変更することができました。(^^)

 しかし、これにも問題がありました。JavaScriptを使うために、リンク色の変更がワンテンポ遅れ、画面の書き換わりが見えてしまう、と言うことです。また、JavaScriptを禁止にしている環境では機能しません。


■~サブタイトルの利用~

 というわけで、どうしたもんかな、と思ってGoogle検索を色々としていたところ、ココログではサブタイトルにCSSを記述することでCSSが実行される、という情報がありました。というわけで、早速以下の記述をサブタイトルに追加しました。


</h2><link rel="stylesheet" href="http://visconti.air-nifty.com/java/01.css" type="text/css" /><h2>


 これで、どんな環境でも即時に望み通りの表示を実現させることができました。CSSへのリンクではなく、直接にCSSを書いても良いのですが、そうした場合、CSSの記述を替える度にサイトの再構築をかける必要がありますから、リンクにした方が便利です。


 ただ、サブタイトル利用にも問題点があります。この問題はあまりにややこしいので、この辺りを参照してください。要は、HTMLの文法的に、サブタイトルの部分にCSSを埋め込むのはよろしくない、という話です。


■~現状~

 という所で今に至ってます。「サブタイトルにCSS埋め込み」にも「JavaScript利用」にも、どちらにも一長一短があって悩ましいです。

 ちなみに、ここまでのことを実現するのに一週間かかりました。(汗) さすがに、CSSやJavaScriptの知識が全くない中で試行錯誤するのは大変でした。とは言え、望み通りのリンク色にすることが出来たので、一応満足です。

|

« 「DAKS ハウスチェック クロス」のレビュー | トップページ | 回転吸入式のドルチェビータが発売に »

日記・その他」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/515552/42015317

この記事へのトラックバック一覧です: CSSによるリンク色変更で右往左往:

« 「DAKS ハウスチェック クロス」のレビュー | トップページ | 回転吸入式のドルチェビータが発売に »