TOP

フォント(文字の色) リンク記述の色替え

シリウスのテンプレートで表されるフォントカラー(文字の色)は、デフォルトでは黒より
やや薄眼の#333の色具合に初期指定されています
#333は、背景が白(#FFF)の場合、疲れない認識度合いと理解されているようです

 

しかし、コンテンツ事情により、または背景色を変更した際、色替えをする必要に迫られる
こともあるかと思われます
そのような変更を施した際は、背景色になじまぬよう認識しやすい色合いにする..ですね
付け加えれば、リンクカラーもまた上記事情にてらし色替えが必要となります

 

フォントの色合いを変える操作ですが、操作機能では指定項目が備えありません...
...で、変更はスタイルシートでCSS手動書き換えによりに指定を実行するとなります

 

通常の記事文字ではない、リンク記述のデフォルトリンクカラーもスタイルシートでの
指定替えとなります

 

リンク記述はデフォルトではブルー(青色)
マウスを当てた際のホバーカラーも同様(青色)ですが、色違いでの2段表示も可能です
マウス当てると別な色に変化する..というスタイル (どこかで経験済みとは思います)

 

 

では、スタイルシートを開いて、以下の位置へ進んで、書き換えの箇所を
確認し書き換えてください

 

フォントカラーは、ここです

 

/*
==================================================
基本スタイル
==================================================
*/
body {
background-color: #F8F8F1;
border-top: 4px solid #C500BC;
color: #666; フォントカラーここで書き換え
font-family: 'メイリオ', Helvetica, 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 15px;
line-height: 180%;
text-align: center;
letter-spacing: -0.001em;/* iOS4でのテキストの隙間への対応 */
-webkit-text-size-adjust: 100%;/* 文字サイズの自動調整機能のキャンセル */
}

 

 


 

 

リンクカラーとホバーカラーの変更箇所

 

 

/* リンク
==================================================
*/
a { color: #0066cc; } リンクカラーはここです
a:hover {
color: #0066cc; ホバーカラーはここです
text-decoration: none;
}
a:hover img {
background: none !important;
}
a img { background: none !important; }
#main a:hover, #menu a:hover, #rmenu a:hover, #pagetop a:hover {
left: 1px;
position: relative;
top: 1px;
}
@media screen and (max-width: 769px) {
#main a:hover, #menu a:hover, #rmenu a:hover, #pagetop a:hover {
left: 0;
position: static;
top: 0;
}
}

 

/*

 

 

リンクカラーとホバーカラーを色違いにする際は、異なるカラーコードに書き換えれば
反映されます

 

書き換え後、変更の保存をお忘れないよう願います

 


 

備考

 

時により、または指定場所だけ、フリースペースに置いた場合などリンクカラーを
表さない (記事カラーと同じ、)
とい表し方も必要かと思われます

 

...ただし、下線は表示されるのでリンクコードであることは認識される...

 

 

やりようは難しくもありません

 

単に、リンクコード内テキストにシリウス機能でカラーコードを付けるだけ

 

以下例
テキスト

 

参考記述
<a href="<% pageDepth %>"><span style="color:#333333">テキスト</span></a>

 

フォントカラーおよびリンクカラーの変更方法
スタイルシートで調整可能な簡単カスタマイズまとめ
トップページ