Design218*

( ´ ・ J ・` ) ♥(∵ )

Design218-CAT1col


REPORT
5作目

2014' 222の日企画にて限定配布しました

Design218*CAT1col
利用規約をご覧ください【アダルト・宗教・違法ブログでのご使用は出来ません】
1カラムと見せかけて2カラムにもなるテンプレート
プラグイン(1)(2)はポップアップ式。プラグイン(3)はindexページでのみ、1つ目の記事の上に表示されます。index/date/categoryエリア変数を使用しています
画像の貼り方については、続きをご覧ください
レポート用紙2カラム(右/白背景)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-CAT1col[編集]→Design218-CAT1colのスタイルシート編集

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

カテゴリー: ⇒222の日企画
テーマ:共有テンプレート  ジャンル:ブログ

コメントの投稿はこちらから ♥

COMMENT-FORM

SECRET

218*管理人 ⇒ Re:まおとさん

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

まおとさんの初めてのブログのテンプレートに
選んでいただけてとても光栄です
こちらこそありがとうございますv-353

  • このページのトップへ

まおと ⇒ No title

初めてブログを作ってみて、
わからないことだらけなのですが、
こちらのテンプレートをダウンロード
させてもらって、素敵なブログに
しようと思いました。
感謝です。ありがとうございました。

  • このページのトップへ

218*管理人 ⇒ Re: btitdsさん

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

この猫の写真は一切加工せずお借りしたものですが
色合いも含め写真の完成度が高いですよね
私も一目惚れしてしまいましたi-178

「21」私の下手な説明が不安ですが^^;
是非チャレンジしてみてくださいね

  • このページのトップへ

btitds ⇒ DLさせていただきました♪

お借りします♪
猫も好きなのですが、色使いがとてもステキで、
なおかつ見やすく、素晴らしいです!!(・∀・)

「21」の件、頑張って設定してみたいと思います♪

  • 2013.06.18
  • Tue
  • 18:51
  • URL
  • EDIT

  • このページのトップへ

218*管理人 ⇒ Re: ゆめさん

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

シンプルなテンプレートは私も大好きです!
またDLしてみようかな?と思っていただけるように
シンプルで可愛いテンプレート作り頑張りますねv-353

  • このページのトップへ

ゆめ ⇒

(o゚▽゚)ゝハジメマシテ♪(o_ _)o))ペコ

シンプルで可愛いものが好きなので
配布楽しみにしていました(*^^*)

早速DLさせていただきました。
ありがとうございます(*^▽^*)

  • 2013.05.24
  • Fri
  • 02:55
  • URL
  • EDIT

  • このページのトップへ

トラックバックはこちらから ♥

TRACKBACK

この記事のトラックバックアドレス

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

Design218-CAT1col

4作目※ブログ期間限定配布テンプレート 5/19DL開始~7月末まで Design218*REPORT1col 利用規約をご覧ください【アダルト・宗教・違法ブログでのご使用は出来ません】 1カラムテンプレー
...この記事を表示

  • 2013.05.19
  • Sun
  • 22:15
  • 218*

  • このページのトップへ

CALENDAR

07 | 2017/08 | 09
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
  • 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*) ミシン