soleil test blog

1 ■数週間前から…

広告表示がコロコロ変わる現象は私のページでも確認いたしておりまして…。
現在は３つで落ち着いてますが…。
IDとクラスが変わったみたいで表示が元に(＝カスタマイズ前)戻ってます。
最初見たときは一つだけだったんですけど…。
今は３つに(｀(エ)´)ﾉ_彡。
私のブログの場合、カスタマイズで三つが横に並ぶようになっているはずなのに…。トップだとそうならなくなっていて、ページを奥に進んでいくとボックス表示になるのです。(わざわざIDとクラスが変えられたと思いますが…。違うのかなぁ…。)

面倒そうなので…。こちらの広告表示のように右寄せ一行表示にしておこうと思っていろいろと調べたりはしていたのですが…。
やり方がわからないのでおうかがいしたいと思っていたところなんです。

わたしのブログ新スキンじゃないですが…。
観る度に変わるのでチト困っております。

是非ともご指導をお願いいたしたく…
よろしくお願いいたします。

2 ■>遙耶 -haruka-さん

新デザインも旧スキンも、運営の改変により、運営が管理してるGoogleアドセンスがバグってます。
いつ、修正されるんだろう
今までの事例では、バグ報告しても、バグを99%認めず、トンチンカンな回答
→修正されない可能性が大かなぁと思ってます


遙耶 -haruka-さんはPR広告のつかない旧デザインをお使いですが、新デザインのCSSに、【広告の改変は規約違反に該当する可能性が有る】
【広告の改変はしない様に】という意味合いの文面が書かれたのを受けて、現在は、多くのカスタマイズ解説ブログで、広告カスタマイズに関する記事は書かれていないです
うちも、広告カスタマイズに関する記事は、避けてます
規約違反なしや、スレスレ(アウト？ｗ)程度な記事に留めています


また、アメブロは、改変が頻繁にあり、特に、広告は、バグ含め、本当に、しょっちゅう変わります


もし、この先も広告をカスタマイズするのであれば、firebugなどのデベロッパーツールを使った方が良いので

現在の広告に関するHTMLやCSSは、これ！って、明確に今は書くのを避けた方が良いので
<(_ _)>
デベロッパーツールをどう使うか
の記事なら書けますが、それは、どうでしょうか

3 ■続きφ(．_．)

現在は、今までと、広告のHTMLが変わっています
ページ別・テーマ別など

・CSSはHTMLに沿って書かないと、適用されない
・アメブロには、運営提供の規定CSSが複数ある
・広告に関する規定CSSは、ユーザーCSSより、下に配置されている
・広告に関する規定CSSは、!important付きで書かれていたり、style属性でHTMLに書かれているものが多い


↓

■HTMLにstyle属性で書かれたCSSより優先させて適用させるには、!important

■ユーザーCSSより後に書かれている、!important付きより優先させて適用させるには、親や先祖要素からの指定や、aやdivやspanなどの"要素名"をつけて、!important


※本来は、あまり使わない方が良いかと思いますが、広告に関しては、ユニバーサルセレクタである、*(アスタリスク)を使う手も有ります
しかし、これも、書けばすべて万能ではなく

そこは、運営が変更するごとに、HTMLや規定CSSと照らし合わせつつ、進めていくのが良いかと思います

広告カスタマイズは、カスタマイズさせない様にか、頻繁に改変するので、非常にめんどくさいです
めんどくさい→もう、いいやってなるのが作戦
めんどくさい→消してしまえｗになる人も居るかと思うけど



■どれが優先？に関しては、CSS happy life様の『CSSの基本～セレクタの優先順位・個別性・!important宣言～』が、わかりやすいかもです

4 ■横に並べるのは、インライン化

ブロックレベル要素は、移動や幅指定が無い限り、設置幅に対し、100%になるのがデフォです

広告内のインライン要素であるspanが幅100%になり、それぞれ、改行されているのは、規定でブロックレベル要素に変更している為です
display:block

これらを本来のインラインに変えてあげると、横に並びます
display:inline

+--+--+--+--+--+--+--+

前アカウントで記事にしてた3こ(検索含め4こ)、横に並べるのは、floatでやってたかと思います
全ての広告をフッターにも、floatだったかと思います

+--+--+--+--+--+--+--+

幅指定が必要な場合は、インラインブロック(display-inline:block)にすると、幅指定が有効になり、横に並べる事もできます
しかし、インラインの中に、ブロックレベル要素が有るのは、おかしいのと、IE7以下は解釈が違うので、避けた方がいいかも
また、避ける為に、aやspanをインライン化すると、改行がおかしくなり、見づらくなります

+--+--+--+--+--+--+--+

■ブロックレベル要素内のインライン要素(文字や画像など)の右寄せは、【text-align:right】で


+--+--+--+--+--+--+--+
余談ですが右寄せのついでに
右寄せ指定されている要素内の文字や画像にはtext-indentでエリア外に飛ばせない
→非表示にならない

文字を消して画像に置き換えたい場合
規定CSSに、右寄せ指定が有ると、飛ばせないので
いつか、役にたつ事が有るかもです

頑張ってください
p(^-^)q

5 ■ふむふむφ(．． )

なるほどぉ…。そういうことなんですね…わかりました。

HTMLが変わったからCSSが効かないってことなのですねぇ…。o(_ _*)o

このところずーっとおかしくて日によって表示が違うなんてことがずっと続いてたのでバグだろうとは思っていましたが…。

firebugなどを使いこなせてるわけじゃないし…。

規定CSSが何に対してどう効いてるのかってのも理解していないと難しいこともありますしね…

デベロッパーツールをどう使うかの記事

お願い致したく…。<(_ _)>
お勉強もコツコツいたしまする。<(_ _)>

6 ■Re:横に並べるのは、インライン化

＞soleilさん

わわわわわっ！
コメしているあいだに参考書がっ！

ありがとうございます。
かなり参考になる内容です。

そうです。floatで横並びになってました。
そっか幅の指定でが必要なんですね。
なかなか改行がうまくいかずどーすればいいのかなというところが良くわからず…σ(^_^;)悪戦苦闘してました。

参考にさせていただいて自分で何とか乗り切ります。

本当にありがとうございます。

7 ■>遙耶 -haruka-さん

か、か、かぶりました！(笑)


訂正です。すみません<(_ _)>
携帯から書いてたもので
スペル、間違えてます

インラインブロックのところ
display:inline-block
が正しいです
IE7以下を捨てるなら、かなり便利なので☆彡


IE7以下は、アメブロ推奨環境以下だし
もう、さんざん、IE7以下には、泣かされてきたんで

このアカウントでは、たいがい、捨てて使いまくってます
むしろ、IE全般捨てるmode
＼(^o^)／
IE、死んでぇー(笑)



デベロッパーツールは、コツさえ掴んで慣れると、これが無いとカスタマイズ無理ってくらい、走召便利ですので、少しずつ、馴染んでみてくださいませ

特に、アメブロは、(おかしな厄介な)規定CSSが複数ありますんで、ぜひっ！！
(ﾟДﾟ;)

8 ■>遙耶 -haruka-さん

floatは、ブログのカラムレイアウトなんかにも使われています

divやpなど、ブロックレベル要素を内包しているブロックレベル要素は、インライン化できないので
※書けますが、しない方がいい


floatは、特に、幅指定が必要なわけじゃないです
画像横に文字などを配置する場合、imgにfloat指定したりします


インラインブロックは、例えば
グローバルメニューなどの横に並んだ文字を画像に置き換えたい場合
(画像)サイズが有効になるんで、便利なんです
floatみたいに、解除する必要が無いの

インラインだけだけど、ブロック＼(^o^)／みたいな
↑
わかりにくい(＿＿*)


これは、実際、書いて試してみた方がわかると思うんで


タグインデックス様
CSS happy life様
HTMLクイックリファレンス様
など、リファレンス系を見ながら
プロパティdisplayに何の値があるか(blockなど)
インラインテーブルなんかも有ります
規定CSSで使われてます

私は、タグインデックス様が一番、とっつきやすい・わかりやすいです
様々な要素の解説ページで、ブロックレベルなのか、インラインなのか、ページ右端に、記載があったり


ここがわかりやすい的リファレンスサイト様を見つけて
頑張ってください☆彡

未だに、タグインデックス様、愛読してます←何年目(笑)