人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

box-shadow を導入

2014年 06月 08日
記事タイトルとコメント欄にボックスシャドウ「box-shadow」を付けてみました。

おすすめスキンに見るニュータイプ」で、今は想像以上に普通に使われているらしいと思えて来て導入したのですが、反映しない環境があってもリスクがないので、この点は割り切れます。
角丸「border-radius」も試してみたのですが、ちょっとデザインが締まらず今回はパス。 もし導入するならメニューから適応させたいし。

box-shadow を導入_b0174191_11193653.png
上はサンプル用に左右を切り縮めています。

CSS例
div.POST_HEAD { 
margin: 25px 0px 20px;
border: 1px #AAA solid;
background-color: #D7E3EC;
box-shadow: 4px 4px 6px #AAA;
overflow: hidden; }

box-shadow」の項を追加しただけですが、この程度が現在のデザインにマッチしていると判断しました。
左右シフト量/上下シフト量/拡散範囲/影の色
の値を設定するだけですから、グラフィックに比べればとても簡単ですね。



続いて最上段のサイトロゴのバーデザインにも「box-shadow」を導入しました。
開設当初よりこのバーにはグラフィックで影を付けていたのですが、全体の背景色を調整変更(過去2度程行っている)すると、バーの書き直しが必要になります。 「box-shadow」を用いればその必要は基本的に不要となり、またバーのフロート感の微妙な調整が簡単に可能になり、圧倒的に便利です。

最初は、グラフィックの影を除いただけのデザイン。
box-shadow を導入_b0174191_19260788.png
バーの丸みを抑えてソリッドなデザインに。 左のフイルムシンボルも書換え。
box-shadow を導入_b0174191_19261045.png
少し暗くなったので、トーンを修正。 ついでにロゴ背景をフラットに。
box-shadow を導入_b0174191_19261245.png
以上が現状です。

CSS例
table#HEADLOGO { 
min-width: 1000px;
box-shadow: 0px 6px 8px #AAA; }

こちらも「box-shadow」の項を追加しただけです。
このバーの様にウインドウの左右端に繋がるバーの場合、左右のシフト量を「0px」としても微妙に左右端が淡くなります。 これだけが「box-shadow」の難点です。

こうしてサイトロゴのデザインを見直していると、その上の Exicte のメニューバー、1ドットの borderラインがロゴバーの立体感を損なっているなぁと思えて来ました。 DOMでこのバーのCSSを調べて以下の項目を追加。 Exicte のメニューバーの背景と下線の色を「#EEE」に指定しています。

CSS例
.exHeader_0 {
background-color: #EEE;
border-bottom-color: #EEE; }



ロゴバーの色がメニューに対して微妙に軽いので、微調整。 トーン調整は、私はPhotoShop より IrfanView を使った方がやりやすく、両方を使って仕上げています。
box-shadow を導入_b0174191_13413454.png
ブログネームをグラフィックから提供スキンの本来の「<$header$>」を使う様式に戻しました。

以下は、ロゴバーに関するHtmlの概要です。

Html
<table ID="HEADLOGO" align=center width=100%>
<tr>

<td class="TOPLEFT">
<div id="TOPGRAF"><$header$>
</div>
</td>

<td classS="TOPRIGHT">
<div class="JUMPMENU">
<a href="#toollink">□</a>  
<a href="/i0/">Recent Update Page</a>  
<$adminmenu type=2$>
</div>
</td>

</tr>
</table>

<$header$> を追記しただけです。 後半の構造の詳細は過去記事「ブログヘッダー 手直し」にあります。

そのままでは、標準文字サイズでロゴバーの左端にブログネーム(実際はリンク文字)が表示されるだけなので、CSSで修飾しました。

CSS 追加項目
#TOPGRAF a {
color: #000;
background-color: rgba(255,255,255,0);
margin-left: 210px;
line-height: 80px;
font-size: 27px; }

<$header$>は、システムによってブログネームのリンク文字「a」に展開されるので、これを指定するセレクタで特定しています。
文字色、文字背景色、左端からの位置、行高さ(上端からの位置)、フォントサイズ、の指定です。
カーソルを置くとリンク文字の背景色は白になりデザインを損いますので、背景色の指定に「rgba」を使って、最後の値「0」で完全に透過背景としています。

フォントはWin環境では「メイリオ」になり、グラフィックの場合よりきめが細かく表示される様になります。



by Ataron | 2014-06-08 11:45 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。