
- 2013
05/19
Sun Design218-CAT1col
category: ⇒222の日企画

5作目
2014' 222の日企画にて限定配布しました
Design218*CAT1col
利用規約をご覧ください【アダルト・宗教・違法ブログでのご使用は出来ません】
1カラムと見せかけて2カラムにもなるテンプレート
プラグイン(1)(2)はポップアップ式。プラグイン(3)はindexページでのみ、1つ目の記事の上に表示されます。index/date/categoryエリア変数を使用しています
画像の貼り方については、続きをご覧ください
レポート用紙・2カラム(右/白背景)・2カラム(左/黒背景)もあります
素敵な写真をお借りしました(一目惚れ
) 境界線シンドローム様
その他・関連記事
- index_area=プラグイン(3)
- ポップアップメニューの展開
- Design218* CAT2col(右カラム/白背景)
- Design218* CAT2col(左カラム/黒背景)
- Design218* CAT(黒背景)
罫線からはみださずに画像を貼りたい方は↓に進んでください
そうでもない方は、好きなように、または本文の最後にバーン!と貼っちゃってください
また罫線そのものが要らないという方はずっとずっと↓に進んでください

[画像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-CAT1col[編集]→Design218-CAT1colのスタイルシート編集
▼以下クラス内の、下線部分のみを削除してください
.entry_body
{
background-image:url(http://blog-imgs-61.fc2.com/a/n/m/anminn218/catnote_bg.png);
}
comment
formコメントの投稿
Re:まおとさん 
はじめまして^^
DLありがとうございます
まおとさんの初めてのブログのテンプレートに
選んでいただけてとても光栄です
こちらこそありがとうございます
No title 
初めてブログを作ってみて、
わからないことだらけなのですが、
こちらのテンプレートをダウンロード
させてもらって、素敵なブログに
しようと思いました。
感謝です。ありがとうございました。
Re: btitdsさん 
はじめまして^^
DLありがとうございます
この猫の写真は一切加工せずお借りしたものですが
色合いも含め写真の完成度が高いですよね
私も一目惚れしてしまいました
「21」私の下手な説明が不安ですが^^;
是非チャレンジしてみてくださいね
DLさせていただきました♪ 
お借りします♪
猫も好きなのですが、色使いがとてもステキで、
なおかつ見やすく、素晴らしいです!!(・∀・)
「21」の件、頑張って設定してみたいと思います♪
Re: ゆめさん 
はじめまして^^
DLありがとうございます
シンプルなテンプレートは私も大好きです!
またDLしてみようかな?と思っていただけるように
シンプルで可愛いテンプレート作り頑張りますね
(o゚▽゚)ゝハジメマシテ♪(o_ _)o))ペコ
シンプルで可愛いものが好きなので
配布楽しみにしていました(*^^*)
早速DLさせていただきました。
ありがとうございます(*^▽^*)