CSSでのデザイン設定は一旦終了
元デザインから、大分変わりましたね。
このデザインを公式にUPしたいくらいだけど、やり方が分からないのでいいや。
左が元で、右が変更後の現在。
こうやって比べると、細々してる所が変わってるだけで、全体的には一緒か(´・ω・｀)
公式にUPする必要は、なさそうですね。（やらないけど）
説明以外で追加したのは・・・
- 一部のリンク色やカーソルを置いた時の反応を変更
- 画像に影を付けた
- サイドバーのタイトルにも影を付けた
- キーワードリンクを目立たなくした
- 記事とサイドバーの文字色を変更（黒くなかったので黒にした）
ちなみに、キーワードを目立たなくするCSSは、以下の通りです。
/* キーワードの色等設定 */
.entry-content a.keyword, .entry-content a.keyword:link, .entry-content a.keyword:visited, .entry-content a.keyword:hover, .entry-content a.keyword:focus {
text-decoration: none; ←デコレーションを切りました
border-bottom-width: 0px; ←下線を消した
color:#000000; ←文字の色を指定
position: static; top: 0px; left: 0px; ←カーソルが当たっても動かない
}
赤文字は消して、コピペすれば使えると思います。
はじめは、タイトルの絵に合わせて影を左下にしていましたが、文字は左上から右下に見るので、どうしても違和感が出ました。
仕方がないので、タイトルの絵を少し修正して、全体的に影を右下に変更。
違和感も無くなりました。
影の基本設定は、以下の通り。
box-shadow: 5px 6px 10px #3f4646;
-webkit-box-shadow: 5px 6px 10px #3f4646;
-moz-box-shadow: 5px 6px 10px #3f4646;
各クラス等で、当てはめたい所に入れて下さい。
角を丸くするのと同様、ブラウザ対応の為に3行になりました。
- 右への幅、下への幅、ぼかす範囲、拡大、色
となってるそうです。
上記では、拡大は省略してます。
影の位置は、デフォルトで右と下ですが、マイナスを付けたら左と上になるようです。
ぼかす範囲は、マイナスを付けられません。
拡大は、マイナスで縮小されるそうです。
他にも回転させたりすることも出来るらしいですが、やり方は検索すれば出てきますので、省略します。
始めは面倒だったけど、やっぱり物が出来上がっていくのは楽しいので、結局ハマってしまいました(*´д｀*)
サイドバーの最新記事に「カテゴリタイトル」を追加するのは、今度でいいやｗ
