ポラロイド写真

回り込み解除

REPORT2col
6作目※6/17承認
Design218*CAT2col
利用規約をご覧ください【アダルト・宗教・違法ブログでのご使用は出来ません】
2カラム(右)
プラグイン(1)(2)は右カラムに・プラグイン(3)はindexのみ・1つ目の記事の上に表示。index/date/categoryエリア変数使用。
画像の貼り方については、続きをご覧ください
メモ1カラムテンプレートもあります
素敵な写真をお借りしました(一目惚れ) 境界線シンドローム

その他・関連記事

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

: 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-CAT2col[編集]→Design218-CAT2colのスタイルシート編集

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

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

  • comment
    form

  • コメントの投稿

回り込み解除

secret

Re: ゆずねこさん

はじめまして^^
ダウンロードありがとうございます。
「CAT」気に入ってくださったようでとても嬉しいです。

カスタマイズお疲れ様でした。
ブログテンプレートのカスタマイズは
独自変数というものがあるので本当に大変だったと思います。

公式や共有テンプレートのほとんどで
記事のタイトルにその記事のページへのリンクが貼ってあるようなので
そちらに慣れていたりするユーザー様には申し訳ありません。

「出来ましたー>.<!! 」
とのご報告をいただいてホッとしました^^
ありがとうございました。

No title

管理人さんっっ!すみません!!
出来ましたー>.<!!
ふぅ~、まる2日かかってしまいました^^;
 このテンプレとても気に入っているので長く使わせていただきます!!

お騒がせして申し訳ありませんでしたmm

テンプレお借りしました。

ブログを始めようと、かわいいデザインだったのでお借りしました。
2カラムクロネコちゃんです。
自分でいろいろカスタマイズしたのですが、1つだけどうしても分からないところがあり、メールさせていただいた次第ですT.T (すみません汗)

記事のタイトルにその記事のページへのリンクを貼れるようにタグをいじっているのですが、ググってHTMLの<%topentry_らへんをいじれば良いとあったのですが、どこに入れたらよいのか分からなくて・・・。
知恵袋など調べて、何時間もかけても分かりませんT.T

忙しければスルーでも構いません。いちかばちかで書き込んでみました。本当にお手数なのですが、もし、お時間があればおしえていただけないでしょうか?
よろしくお願いいたします。

Re:店主さん

はじめまして^^
DLありがとうございます

最初はただのキャンパスノート風にする予定だったのですが
私もこの黒猫の素敵な写真に一目惚れしてしまった勢いで作ってしまいましたe-349
とても気に入ってくださったようで嬉しいです^^
こちらこそありがとうございます。

DLさせていただきました

シンプルなテンプレートを探してて、一目惚れしました。
猫と、罫線や色使いがとっても気に入ってます!

早速使わさせて頂きました!
ありがとうございます。

  • trackback
    form

  • トラックバック

回り込み解除


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

Design218-CAT2col

4作目※申請準備中 Design218*REPORT2col 利用規約をご覧ください【アダルト・宗教・違法ブログでのご使用は出来ません】 2カラム(右)テンプレート プラグイン(1)(2)は右カラムに、プラ .....続きを読む

CALENDAR •*¨*•.¸¸

09 | 2023/10 | 11
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 31 - - - -

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*) ミシン