えす＃０５５のブログ一覧

スタイルシートのデザインを少々変えました。

と言っても殆ど枠線を追加しただけですが、Windowsの窓をイメージしていますが・・・

ただこの立体的に隆起した線だと明るい線と暗い線を並べている為に幅が広くなるのが難点です。かといって細くすると見ても解らなかったり・・・
border-top:4px ridge #ccc;
border-left:4px ridge #ccc;
border-right:4px ridge #ccc;
border-bottom:4px ridge #ccc;

を適当な所へ貼り付けてます。

このボーダーってタグは上下左右の線を別々に指定する方法の他に、上下左右の線を同時に指定する方法が有りますが、オイラは前者の方法を使っています。
理由は、上だけとか下だけの指定をすることが多いからで、書き直さなくても良い分使い回しが楽なんです。たとえば上記のタグは
border:4px ridge #ccc;
でも同じ意味です。また、
border-color:#ccc;
border-style:ridge;
border-width:4px;
でも同じ意味です。

あと、タイトルを半透明の白にしてますが、普通に指定すると、コンテンツ領域のpadding指定の分隙間が出来て、タイトルの左右の端が半透明の白になりません。

で、コンテンツタイトルのマージンを-(マイナス)で指定します。
この場合コンテンツ領域のpaddingが15pxなので、コンテンツタイトルのmarginを-15pxにしています。サイドメニューの指定も同様です。

marginの数値にマイナスの数値を指定するとデザインの幅が広がりますが、後日修正する場合はCSSが見難くなったり、表示する順番を理解していないと、思ったようにレイアウトが変化しなかったりすると思います。またブラウザによってはレイアウトが崩れる事もあるかもしれません。

最後に、プログの日付をタイトルと同じ高さまで下げる事もmarginにマイナスの数値を指定してます。

コンテンツタイトルにアイコンを追加しました。
以前、スゴックの時に同様の事をしていたのですが、今回思い出すのに一苦労した為備忘録です。結局バックアップしてあったズゴック用スタイルシートを読んで思い出しました。


普通にアイコンを登録すると、タイトル文字とアイコンの中心が揃わないため、詳細編集で「コンテンツタイトル」の背景画像として表示してます。

詳細編集/コンテンツ共通/コンテンツタイトル(div.contentsTitle)
line-height:50px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:0 50%;
padding:10px 0 10px 50px;

上記の例ではアイコンのサイズは48px×48pxなので50pxにしています。赤字の所はアイコンのサイズによって変更してください。このアイコンは背景を透過させていて色数も256色で十分なのでGIF形式で作っています。でもこの方法ならサイズ&色数の制限を受けないので、128px以上orフルカラー化も可能です。背景透過画像の場合はPNG形式を使えばOK

他にももっと簡単な方法が有るかもしれませんが、今は思いつきませんでした。（*＾_＾*；；；

本当は昨日書く予定でしたが、たまたまニュースで三倍辛いものを見つけてしまったので、延期してました。

ついでに細かい所も、色々調整してます。まだ所々「かのカレ」の名残がありますが、


今回の目玉は「ナビゲーションバー」上部の背景画像表示ですかね。これは背景画像を選ぶので誰にでもお奨めできる訳ではありませんが、一応やり方と傾向を。

詳細編集でページの基本/ページBody(body)にbackground-color:#;とbackground-image:url(画像アドレス);を入れて、ユーザー領域(div#MinkaraBody)のbackground****一式を削除するだけです。

意外と簡単ですが、ページbodyの色が白に固定されてしまいます。コレが少々問題で

白ベースのスタイルシートだと判りませんが、黒ベースのスタイルシートで回線が混んでいる場合、一旦画面が真っ白になってから、文字が先に表示されて、(この次点では読めない)背景が表示されるという事が良くありました。

気にしなければ良いのですが、目には優しくないかもです。

画像はグフＢ３型/MS-07B3でグフ・カスタムとも言うそうです。
参考資料は関連情報URLから

「ザクとは違うのだよ、ザクとは。サクッサクッ」

スタイルシートのCSSですが、なにか？

こんな物を参考にする方などいないと思いますが、整備手帳にUPしました。それぞれのブラウザのスキンも変えているのはオマケだと思ってください。

CSSを新規作成したテキストファイルに書き出して、詳細編集/スタイルの操作/CSSファイル読み込み/で読み込めます。
もちろん、カスタムベースとしても使えるので、文字の大きさ・色・画像の差し替え等々お好みで弄ってください。

ただ、本家「彼女のカレラ」スタイルシートは期間限定だそうで、現在使用している画像は将来使えなくなると思います。


全然関係が無いですが、ヤフオクにこんな物が出品されているそうです。ってパルサーオーナーズクラブに投稿がありました。
GA15用ですが、取り付けとECUの現車合わせが必要になると思うので、個人レベルでは一寸難しいかなー。

スタイルシートをチョコット変更しました。

期間限定の「彼女のカレラ」です。

いつかはこんな風にしてみようかなと思っていましたが、時間が取れたので・・・・・・

まだ、色々と治したい所はありますが、疲れたので・・・・・・


まあ、細かい事は気にしないで下さい。タイトル/ぱるこ、プロフ/愛華、サイド/麗菜になっているとか、さらに幅が広くなっているとか・・・