ポラロイド写真

回り込み解除

CAT
4作目※5/17承認
Design218*CAT
利用規約をご覧ください【アダルト・宗教・違法ブログでのご使用は出来ません】
メモ仕様テンプレート
横カレンダー・過去ログ(ポップアップ式)・No.数字にPermalinkのみ。date/categoryエリア変数を使用しています
画像の貼り方については、続きをご覧ください
1カラム2カラムテンプレートもあります
素敵な写真をお借りしました(一目惚れ) 境界線シンドローム

その他・関連記事

罫線からはみださずに画像を貼りたい方は↓に進んでください
そうでもない方は、好きなように、または本文の最後にバーン!と貼っちゃってください
また罫線そのものが要らないという方はずっとずっと↓に進んでください

: 21 この数字がカギです


[画像Click♪で拡大]
普通に画像を貼ってみると、画像とテキストは、罫線からはみでちゃいます

これを解決する方法として
  • 1.画像の高さを「21の倍数」にする()
  • 2.サイズ別にクラス(class="クラス名(半角英数)")を設ける
  • 3.応用編
  • 4.<img>要素の改行に注意してください
画像の高さを「21の倍数」にする()
罫線1行の高さが21pxだからです
例:<img src="画像パス" border="0" width="画像の幅" height="画像の高さ:21の倍数" />
サイズ別にクラス(class="クラス名(半角英数)")を設ける
画像(サムネイル含む)のサイズを決めている場合、CSSを使います
サイズが3種類あるなら、サイズ別にクラスを3つ設け、それを使い分けてください
1.記事の編集 (例えば、幅200×高さ210の画像)
<img src="画像パス" border="0" class="クラス名(半角英数)" />
2.CSSの編集
.クラス名(半角英数) {
float:none;
width:200px;
height:210px; ← 21の倍数
border:0;
}
※1.2.のクラス名は、2つとも同じ名前にしてください
応用編
画像に「ポラロイド風」などの「枠」を付けている場合。線や余白が関係してきますので、1.&2.で説明した方法だけでは崩れてしまいます。2.の方法を用いて、今度は「引き算()」をします!
1.記事の編集 (例えば、幅200×高さ210の画像)
<img src="画像パス" border="0" class="クラス名(半角英数)" />
2.CSSの編集
.クラス名(半角英数) {
float:none;
width:200px;
height:204px; ← 210(21の倍数)-4(上下余白)-2(上下実線)
border:0;
padding:2px; ← 余白
border:1px solid #000; ←実線
}
<img>要素の改行に注意してください
改行の扱い=HTMLタグのみで、記事を編集している場合
<img src="●"><br />
次の行 ~ としてください(次の行の先頭に<br />はNG)

※毎回、アップする画像のサイズが異なるなら1.の方法だと思いますが、編集のし易さも考えると、
私は2.の方法をオススメします。

※兎に角「21」です!記事編集などで個別に余白や行間を設定するときも、高さの最小値は「21」です!!

罫線の外し方
どうしても画像が罫線からはみ出るのは気になる...という場合はこちらをお試しください

エントリー:記事の罫線を外す
管理画面→テンプレートの設定→Design218-CAT[編集]→Design218-CATのスタイルシート編集

▼以下クラス内の、下線部分のみを削除してください
.entry_body
{
background-image:url(http://blog-imgs-61.fc2.com/a/n/m/anminn218/catnote_bg.png);
}

テーマ:共有テンプレート
ジャンル:ブログ

  • comment
    form

  • コメントの投稿

回り込み解除

secret

  • trackback
    form

  • トラックバック

回り込み解除


この記事にトラックバックする(FC2ブログユーザー)

Design218-CAT

4作目※5/17承認 Design218*REPORT 利用規約をご覧ください【アダルト・宗教・違法ブログでのご使用は出来ません】 メモ仕様テンプレート 横カレンダー・過去ログ(ポップアップ式)・No.数... .....続きを読む

CALENDAR •*¨*•.¸¸

10 | 2023/11 | 12
S M T W T F S
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

ENTRY’s •*¨*•.¸¸

CM▼<>+-
TB▼ <> + -

CATEGORY •*¨*•.¸¸

ARCHIVE •*¨*•.¸¸

  • ALL
  • 09  08  01  10  09  08  07  04  03  02  01  12  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04 

BOOKMARK •*¨*•.¸¸

PROFILE •*¨*•.¸¸

ミシン
Design218*(=218*) ミシン