読者です 読者をやめる 読者になる 読者になる

CSSでのデザイン設定は一旦終了

はてなブログ設定

元デザインから、大分変わりましたね。
このデザインを公式にUPしたいくらいだけど、やり方が分からないのでいいや。
左が元で、右が変更後の現在。
HPデザイン変更
こうやって比べると、細々してる所が変わってるだけで、全体的には一緒か(´・ω・`)
公式にUPする必要は、なさそうですね。(やらないけど)

元デザインリンク→Bordeaux - テーマ ストア - はてなブログ


説明以外で追加したのは・・・

  • 一部のリンク色やカーソルを置いた時の反応を変更
  • 画像に影を付けた
  • サイドバーのタイトルにも影を付けた
  • キーワードリンクを目立たなくした
  • 記事とサイドバーの文字色を変更(黒くなかったので黒にした)


ちなみに、キーワードを目立たなくする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行になりました。

  • 右への幅、下への幅、ぼかす範囲、拡大、色

となってるそうです。
上記では、拡大は省略してます。
影の位置は、デフォルトで右と下ですが、マイナスを付けたら左と上になるようです。
ぼかす範囲は、マイナスを付けられません。
拡大は、マイナスで縮小されるそうです。
他にも回転させたりすることも出来るらしいですが、やり方は検索すれば出てきますので、省略します。


始めは面倒だったけど、やっぱり物が出来上がっていくのは楽しいので、結局ハマってしまいました(*´д`*)
サイドバーの最新記事に「カテゴリタイトル」を追加するのは、今度でいいやw


※ここにある物の著作権は、「うっちょん」または「マナ」にあります。 無断転載等は禁止しています。
© 2002 ucchon    © 2014 mana