BloggerのCSSの利用方法。
というかもっと砕けた言い方をすれば
複数並べたアフィリエイトを中央にする方法がわからなかったんです。
え？簡単なんじゃないの？？
いや～そうでもないんですわ...
どうしてもこんな感じになっちゃう。
これを真ん中にしたいんですよね。
ということで色々調べてやっとできるようになりました。
その報告です。
今までね。
中央ぞろえにするにはこれを使ってました。
そう 文章の中央ぞろえ...
さもなければこのページを参考にHTMLで造ってました。
<div align="center">～～～</div>
アフィリエイト一つならいいんです。
それならできる。
ところが複数だと真ん中にならないんですよ。
複数のアフィはどのようにしていたかというと
楽天の場合はここをりよう。
楽天 amazon 併用の場合は某氏の猫空さんのページを利用していたわけです。
ところが双方利用してもこんな具合になる...。
要は真ん中にならないんです。
それで悩んでいたのですが...
複数アフィを並べるための某氏の猫空さんのページを観てて...
プログラムの
<div style="float:left;padding-right:10px;"> アフィリエイト </div> <div style="float:left;padding-right:10px;"> アフィリエイト </div> <div style="float:left;padding-right:10px;"> アフィリエイト </div> <div style="clear:both;"></div>
の中において
floatという項目があるのに気づいたわけです。
floatがleftになってる。
これもしかしたらここをいじれば中央にできるんじゃねーか？
とおもっており「float」でググッたらこんなページを見かけたわけです。
Quiita(float で横並びさせてリストを中央揃え（センタリング）させる方法)
cly7796.net(floatで中央揃えにする)
miauler(floatで横並びにした要素を中央寄せする)
さらにFloatに関するこんな詳しいページまで...
Taneppa(CSSの【float】についてちょっと本気出して説明してみた)
あれ？結構簡単にできるんじゃねーか？
CSSの部分をCSSを起動させる部位に搭載して
#sample { position: relative; overflow: hidden;}#sample ul { position: relative; left: 50%; float: left;}#sample li { position: relative; left: -50%; float: left;}本文にHTML箇所を入力すればできそう...
<div id="sample"> <ul> <li>ブロック01</li> <li>ブロック02</li> <li>ブロック03</li> <li>ブロック04</li> <li>ブロック05</li> <li>ブロック06</li> </ul></div>しかしだ...
前からの議題でもあった
CSSをBloggerに搭載する方法がわからない...ｗ
もう一回ググってみる...。
「blogger CSSを使う」であまりいいものがヒットせず
「bloggerの使い方」で検索をかけるとこんなページが...
メモロウ(Bloggerのカスタマイズと使い方（シンプルテンプレート対応）)
えぇぇ～っ！？
カスタマイズからCCSの搭載ができるって！？
びっくり...
ということでやってみました...。
まずは「テーマ」→「カスタマイズ」
この中の白い場所に先のCSSを入力。
自分はsampleの箇所をaffiliate-Sにしています。
#affiliate-S {
position: relative;
overflow: hidden;
}
#affiliate-S ul {
position: relative;
left: 50%;
float: left;
}
#affiliate-S li {
position: relative;
left: -50%;
float: left;
list-style: none;
}
さらにどうもこれで項目を並べると点がでるというので
Quiita(float で横並びさせてリストを中央揃え（センタリング）させる方法)を参考に
上記太字のように list-style: none;を最下段に加えます。
そしてブログに適用ボタンを押下したところ
文字上は適応されたと出ました。
早速ブログに戻り...
HTML編集から
<div id="affiliate-S">
<ul>
<li>ブロック01</li>
<li>ブロック02</li>
<li>ブロック03</li>
<li>ブロック04</li>
<li>ブロック05</li>
<li>ブロック06</li>
</ul>
</div>
と入れて...
ブロック01などのところにアフィリエイトのHTMLをコピペ
して編集表示にすると...
あれ？縦に表示されている...
しかも・出とるヤン...
失敗かと思ったのですが念のためプレビューすると...
でけたーーーー！
もちろん楽天もこれでいけました。
ということは...
今まで散々悩んだCSS搭載方法も習得！？
やったーーーっ！
やるじゃねーか！俺！
ということで今回はアフィの中央寄席ではなくもうBloggerにおけるCSS搭載方法でした！
ということはこれから色々楽に設定できるようになるんじゃね？
やったね★
因みにBloggerの色々な知識はコチラでも...
0 件のコメント:
コメントを投稿