ライブドアブログは アフィリエイト広告の貼り付けがOKなので、
ブログの右側に グーグルアドセンスの広告を入れようと画策した。
入れたい広告は 幅が300ピクセル。
普通に貼り付けたら ちょこっと切れてしまった。
ならば、幅を変えよう と 思った。
だけど、簡単に設定できるページは無かった。
いったん 「スタイルシートの記述」を見たけど よく分からない。
インターネット検索で、「ライブドア ブログ 記事 幅 変更」で調べてみるが、
出てくるのは すごく難しい表現だったので 私には理解できなかった。
でもね、なんとかなるだろう♪ と 自分で あれこれ やってみた。
私は スタイルシート わかんないんですよ。
でもね、
記事の幅を変更するんだから、
スタイルシート内の 「 px 」(ピクセル) か 「 % 」の数値を変えれば なんとかなる、
その程度の知識だけど やってみた。
スタイルシートは 使ってるデザインによって違うらしいので
あまり参考にならないかも知れないけど、
今の状態の私のブログの「記述」は これ です。
長いので 変更した部分の付近だけ 抜粋
~~~~~~~~~~~~~~
/* =============================================== */
/** 02. Layout - レイアウト(全体の枠組み) */
/* ----------------------------------------------- */
body {
margin: 0;
padding: 0;
min-width: 600px; ←2番目に ここを変更した
background-color: #aed7ff;
text-align: center;
}
div#container {
width: 94%;
margin: 0 auto;
padding-bottom: 10px;
position: relative;
}
div#content {}
div#main
, div#sub
, div#extra {
overflow: hidden;
}
div#main {
float: left;
display: inline;
width: 90%; ←いろいろやった後 ここを変えた
margin: 0 -220px 0 0;
}
div#main div.column-inner {
margin: 0 230px 0 0;
}
div#sub {
float: right;
display: inline;
width: 300px; ←まず 1番目に ここを変更した
background: #d3e9ff url(https://parts.blog.livedoor.jp/img/usr/default_2008/aqua/side_top.gif) no-repeat;/* 背景画像:上 */
padding-top: 15px;
}
~~~~~~~~~~~~~~~
1番目に変更したところは、
ここの数値が230pxだったけど、
付けたいグーグル広告の幅が300pxなので、
300に変更した。
2番目に変更したのは、
「たぶん これが本文の記事の幅だろう」と思って、
1番目の変更で右側が 230→300で 70ピクセル増えたので、
元の数値(いくつだったか忘れた。 740ぐらいだったと思う)から
70を引いた値を入れた。
「保存」してから 自分のブログを見てみると、
レイアウトが狂ってた。
右フレームが、本文記事が終わった後に 右側に表示されるようになってた。
もっと本文記事の幅を減らさないといけないのかな、と思い
極端に減らした数値を入れても、同じようにレイアウトが狂ってた。
いろいろやった後、
100%と表記されていた所を 90%にしてみた。
これでレイアウトが正常になった。
まぁ、私も よく分かんないけど、
どこか もっと変えなきゃいけないのかも知れないけど、
これにより、「ファイアーフォックス」・「グーグル・クローム」・「インターネット・エクスプローラー」
3つのブラウザでチェックしても レイアウトが正常なので、
深入りせず、 これで良し と する。
グーグル広告を付けた事によってブログの表示がかなり遅くなるなら
他の広告を付けよう。 (←自分へのメモ)
ブログの右側に グーグルアドセンスの広告を入れようと画策した。
入れたい広告は 幅が300ピクセル。
普通に貼り付けたら ちょこっと切れてしまった。
ならば、幅を変えよう と 思った。
だけど、簡単に設定できるページは無かった。
いったん 「スタイルシートの記述」を見たけど よく分からない。
インターネット検索で、「ライブドア ブログ 記事 幅 変更」で調べてみるが、
出てくるのは すごく難しい表現だったので 私には理解できなかった。
でもね、なんとかなるだろう♪ と 自分で あれこれ やってみた。
私は スタイルシート わかんないんですよ。
でもね、
記事の幅を変更するんだから、
スタイルシート内の 「 px 」(ピクセル) か 「 % 」の数値を変えれば なんとかなる、
その程度の知識だけど やってみた。
スタイルシートは 使ってるデザインによって違うらしいので
あまり参考にならないかも知れないけど、
今の状態の私のブログの「記述」は これ です。
長いので 変更した部分の付近だけ 抜粋
~~~~~~~~~~~~~~
/* =============================================== */
/** 02. Layout - レイアウト(全体の枠組み) */
/* ----------------------------------------------- */
body {
margin: 0;
padding: 0;
min-width: 600px; ←2番目に ここを変更した
background-color: #aed7ff;
text-align: center;
}
div#container {
width: 94%;
margin: 0 auto;
padding-bottom: 10px;
position: relative;
}
div#content {}
div#main
, div#sub
, div#extra {
overflow: hidden;
}
div#main {
float: left;
display: inline;
width: 90%; ←いろいろやった後 ここを変えた
margin: 0 -220px 0 0;
}
div#main div.column-inner {
margin: 0 230px 0 0;
}
div#sub {
float: right;
display: inline;
width: 300px; ←まず 1番目に ここを変更した
background: #d3e9ff url(https://parts.blog.livedoor.jp/img/usr/default_2008/aqua/side_top.gif) no-repeat;/* 背景画像:上 */
padding-top: 15px;
}
~~~~~~~~~~~~~~~
1番目に変更したところは、
ここの数値が230pxだったけど、
付けたいグーグル広告の幅が300pxなので、
300に変更した。
2番目に変更したのは、
「たぶん これが本文の記事の幅だろう」と思って、
1番目の変更で右側が 230→300で 70ピクセル増えたので、
元の数値(いくつだったか忘れた。 740ぐらいだったと思う)から
70を引いた値を入れた。
「保存」してから 自分のブログを見てみると、
レイアウトが狂ってた。
右フレームが、本文記事が終わった後に 右側に表示されるようになってた。
もっと本文記事の幅を減らさないといけないのかな、と思い
極端に減らした数値を入れても、同じようにレイアウトが狂ってた。
いろいろやった後、
100%と表記されていた所を 90%にしてみた。
これでレイアウトが正常になった。
まぁ、私も よく分かんないけど、
どこか もっと変えなきゃいけないのかも知れないけど、
これにより、「ファイアーフォックス」・「グーグル・クローム」・「インターネット・エクスプローラー」
3つのブラウザでチェックしても レイアウトが正常なので、
深入りせず、 これで良し と する。
グーグル広告を付けた事によってブログの表示がかなり遅くなるなら
他の広告を付けよう。 (←自分へのメモ)