自分用のメモを兼ねて。
スマホよりアクセスの比較的少ないPCでの見え方を頑張ってしまいました。
「法人用テンプレート02」を元に
ゲゲさん
http://dq10z.blog.jp/
ラグナさん
http://dq10ragu.com/
のような感じに、トップページに画像とタイトルを綺麗に並べられないかなと。
画像が右にあるけど左にしないとなー→良く分からん、後回し。
ブログの幅を1000pxにして、文字の大きさ・色からいじり始めて、いたるところにあるマージンを変更（私には意味が分からないくらい大きなマージンをとっているところがあり、主に削減）。
スマホのテンプレートも変えておこうか→これはテキトウにポチっとやって一発。細かい設定はできない。
さて、画像が右にあるのは、多分CSSなんだろうな、HTMLソースにあるarticle-innerから・・・
CSSを見ると、ありました。
/* トップページ */
.article-inner {
width: 490px;
float: left;
}
.article-image-thumbnail {
width: 160px;
float: right;
}
.article-image-thumbnail img {
border: 1px solid #ccc;
border-radius: 7px;
}
この中のleftとrightの記述を入れ替えました。つまり、leftをrightに書き換え、rightをleftに書き換えました。
CSSは余り詳しくないのですが、人が書いたものを少し読めれば、これくらいはできます。0から作るより格段に簡単。width: 490px; は幅490ピクセルという意味だし、float: っていうのは浮動させるわけです。.article-innerとかarticle-image-thumbnailというのは単に作者がそういう名前にしただけ。
こんな感じで色々いじっていたら、半徹してしまいました。
今気付いていたのですが、ラグナさんのブログの「続きを見る」ボタンは、マウスカーソルを乗せると大きくなるのですね。「マウスカーソルを載せると画像が変化する」のはやったことがあるので分かりますが、これ、画像の大きさが滑らかにアニメーションで変化しているように見えるのは気のせいでしょうか。
左右からカーソルを少しづつ近づけて行くと、ちゃんと画像に乗ってから大きくなるし、大きな画像からちゃんと外れないと小さくなりません。単純に2枚の画像を切り替えているわけではなくて、何か仕掛けがありそうです。
more-linkというのがCSSにあるはず→ありました。結構長い。
仕組みは、これですね
http://www.webcyou.com/?p=1937 ここから行けるデモページにサンプルがあります。
■覚え書き追記：
問題「テンプレートを変えたら画像が右にずれて困った」
「法人用テンプレート02」にしたら、過去の記事も全部画像が右にずれて変な感じになってしまいました。よくよく観察すると、画像の周囲に5ピクセルの余白があって、それで左端に着目すると5ピクセル右にずれてる。「全ての記事でそうだからCSSか」とさんざん眺めて見つからず、HTMLソースを見ていたら・・・
<img src="http://… hspace="5" class="pict" />
あれ？「hspace="5"」って？自分で余白入れてるんじゃん。じゃあ、ずれるのが本来の仕様なわけだ。ライブドアブログのシステムで画像を貼ると、勝手に「hspace="5"」って入る。
ここで、今まで書いた沢山の記事の「hspace="5"」を全て消すなんてのは、あり得ません。エクスポートして一発削除してインポートすればできるけど、そもそも前のテンプレートでは起こっていなかったのだから、以前のCSSを見れば分かります。幸い、保存してありました。
div.article-body img.pict {
margin: 0 5px 5px 0;
}
以前のCSSにこれがあり、新しいCSSにこれを足したら直りました。値を4つ指定した場合、記述した順に上、右、下、左のマージンになるので、画像の右と下に5ピクセルずつのマージンを入れることになります。つまり、左と上に5ピクセルずらす・・・えー、本当かよ？
検索していたら、これがかかりました。
http://help.blogpark.jp/archives/52352351.html
.article-body-inner img.pict自体をコメントアウトして枠を消していましたが、
公式はこうであるところ・・・
.article-body-inner img.pict{
height: auto;
margin: 1em 0 1.5em!important;
max-width: 100%;
}
以下のようにすればついでに位置ずれも直りますな。
.article-body-inner img.pict{
height: auto;
margin: 0 5px 5px 0!important;
max-width: 100%;
}
これで直ることは分かりました（試しました）が、いまいち納得はしていません。多分、marginの理解が足りてないのでしょう。
ちょっと検索すると、左上にずらすなんて「ネガティブマージン」の方がしっくり理解できるのですが・・・。「ネガティブマージン」は負の値で「引っ張る」イメージなら、正の値なら「押す」と考えれば良いのでしょうか。「押す」側に余白ができるだけの気がしてならないのですが、実際そうはならないで「押す」動作をしているようなので、今まで誤った思い込みをしていたということでしょう。
akira_dq