オトナの雨風呂カスタマイズ華香部屋 -5ページ目

オトナの雨風呂カスタマイズ華香部屋

好かれなくてもいいけど、嫌われないカスタマイズ。
CSSオンリーのカスタマイズ。
なぜかって?
CSSしか解らないのよ。

やめたいもの・こと ブログネタ:やめたいもの・こと 参加中
オリジナルのフルカスタマイズをやめたわけではない。
やめたいとも思っていない。
ただ、時間と生活に余裕がなければ、ゆっくりじっくりみっちりと、できないだけのこと。
だから、譲れない部分だけを、デザインスキンに加えている。
やめるなら、雨風呂カスタマイズではなく、多忙の原因である仕事(有償無償)かな。

前記事⇒フリースペースに枠をつける
この記事は、諸般の事情で GoogleChrome (←ブラウザ)での操作を記述している。

ブログ上で、右クリックして「ページのソースを表示」すると、ブログがどんな構造なのかがざっと分かる。
別タブで開いたものが(多くの人は意味不明だというが)HTMLタグがいっぱい並ぶソースコードである。

サイドバーには、いろんな skinMenu (各メニュー)という名前の箱があり、その箱の中には skinMenu2 (二重構造になっている)という箱が入っている。
skinMenu2 という箱には、 skinMenuHeader (各メニューのヘッダー)という部分と、 skinMenuBody (各メニューの本体・内容)という部分がある。
skinMenuHeader は、 skinMenuTitle という名前がついた <span> で囲まれた塊を内包し、それがメニュータイトルとして表示される。

サイドバーのメニューごとに同一に施されたデザインや画像などの指定は、CSSでセットされている。
それを活かすには、CSSで指定された部分(セレクタ)を、フリスペやフリプラにタグを書いて作ってやれば、ブラウザが勝手にCSSに書かれたブツを拾ってきて表示してくれる。

で、書いてみた。
と、いうこと。

フリスペやフリプラに書かれたタグは、CSSのようにスキンを変更しても消えない。
あら、便利。

よろしければ⇒恋ブロランキング

完璧な人間なんていないよね… ブログネタ:完璧な人間なんていないよね… 参加中
完璧な人間なんていない。
同様に、完璧なカスタマイズなどない。

それぞれの好みによってデザインされるように、カスタマイズする人の好みであり、万人受けするデザインとは限らない。
見目麗しい男の娘の3次元が好きな女子もいれば、少女が流血している二次元のを好む人もいる。
ビビッドな色合いを好む人もいれば、パステルな色合いを好む人もいる。
同系色でまとめる人もいれば、大胆に多くの色を配置する人もいる。

カスタマイズできる場所をすべていじるのが完璧なカスタマイズではないことは、多くの人が理解できることだろう。
ほとんど全部をいじっている雨風呂が配布しているスキン(公式)は、比較的まとまっていて、全体のバランスが取れている。
だが、サイドバーの各項目が統一された枠で囲まれているのに、フリースペースとフリープラグインを設置したときに枠で囲まれていないのは、完璧から遠くなるということも、多くの人が同意できるだろう。

それで、フリスペ等に公式スキンと同様の枠をつけてみた。
CSSではない。
公式スキンのサイドバーの各メニューについているタグを、フリースペースやフリープラグインに記述して、それと認識させてやればいいだけのこと。
それなら、公式スキンを変更してもグローバルナビがきちんとデザインにあわせて表示されるようになっているのと同様、書いたまま放置してもOK。


こういうカスタマイズをせずにいいから、きっとまるっと背景にしてしまう「素材屋風スキン」がもてはやされるのだろうが。


<div class="skinMenu">
<div class="skinMenu2">
<div class="skinMenuHeader">
<span class="skinMenuTitle">
ここにタイトルを書く
</span>
</div>
<div class="skinMenuBody">
ここに内容を書く
</div>
</div>
</div>


赤色部分が他のサイドバーメニューと同じように枠をつけるタグ。
水色部分が表に出る部分。

スリースペースなら、改行すれば改行タグが入ったと認識されるので、赤色では改行を行わない。
フリープラグインなら、改行タグを入れなければ改行されないので、水色部分で体裁を整えるときには<●br>タグを入れる。

フリスペやフリプラ内で、上記タグを2回、3回と繰り返すことにより、それぞれに枠を設置できる。
このブログには、「オトナのカスタマイズ」「ローカルルール」「管理グルッぽ」の3つのサイドバーメニューがあるが、記入しているのはフリースペースである。

フリスペ内が読解困難にならないように、表示に影響しないように改行も入れてある。
ソースを表示して「free」で検索すると、該当箇所はすぐ分かるので、見たい人はどうぞ。

よろしければ⇒恋ブロランキング


平均睡眠時間は? ブログネタ:平均睡眠時間は? 参加中
平均睡眠時間は6時間。
21時に寝落ちしようものなら27時だか3時だか微妙な時刻に目が覚める。
雨風呂が↓こんなことをしてくれると、3時に目覚めてそのまま格闘することになる。
それでも睡眠時間は6時間を確保している。

アメーババーが変更になった。
↓雨風呂が書き込んだCSSを見たい人はどうぞ。(リンクしてないけど)
http://stat100.ameba.jp/ameblo/pc/css/amebabar/ameblo.common.hf.white.css
http://stat100.ameba.jp/ameblo/pc/css/amebabar/amebabar.css

新たなアメーババーは、上部にアメーババーヘッダー ambHeader 、下部にアメーババーフッター ambFooter と2種類あり、HTMLから予想するに、一時的なものではなく長期にわたって使用すると思われる。

ブログ全体に背景を敷きたいときに使用する場所(セレクタ)は、.skinBody 。
そこを lightblue にしてみた。
背景であるにもかかわらず、素材屋風スキンと呼ばれている画像を貼るのに圧倒的に支持されている場所が、.skinFrame2 。
そこを lightpink にしてみた。
雨風呂では「普通スキン」と呼ばれるヘッダー画像が表示されるのが、.skinBlogHeadingGroupArea を含む .skinHeaderArea 。
そこを yellow にしてみた。
lightblue の境界部分にグレイの1px線が入っているのは、アメバーに設定されている border-bottom 。

ss1


その状態でアメバーヘッダーの背景色を透過するとどうなるか。
グレイの1px線も消してみた。

ss2


透過されているはずのバーが白くなっている。
スクロールすると、確かに透過されている。
CSS編集の「表示を確認」(プレヴュー)では、アメバーヘッダーの背景(白色)が透過され、lightblueが見える。
プレヴューでは、フリープラグインに入れたカスタマイズが効かない。
思うに(←ちゃんと考えなさいよ)、CSSしか理解しないし学ぶ気もない華香-hanako-が思うに、javascript を仕掛けてきたのか?
お馬鹿な(スペックの低い、処理速度の遅い)PCでリアル表示したときに、アメババーがあとから表示されるのを見ても、そう思う。
記事を書く画面からのプレヴューでは、デザインスキンによっては、アメババーヘッダーの上に背景が20pxぐらい見えるものもある。
skinBody に padding が付いていたりする、、、そんなのの上書きか?

休むに似たり、という思考は放り投げて、とりあえず、CSS編集用スキンのその白い背景の理由を見つけるに、
html.fixed body {padding-top: 30px !important; }
この30pxが白く表示されている模様。(←否、無地白なんだが)
これをなくしてやれば、.skinBody に貼った画像なり色なりが現れる。

それでも .skinFrame2 に貼った背景の場合には、まだ余白が残る。
.skinFrame {padding-top: 22px;}
これがあるから。

ss3


でも、そこまで padding-top を取り捲ると、.skinHeaderArea が窮屈になってくる。
そこまで考えて、どこに背景をつけるか、アメバー背景の透過が必要なのかを考えてみよう。
どうしてもというときに、.skinHeaderArea に、margin をつけるのもひとつの選択肢。


よろしければ⇒恋ブロランキング