スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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);
}

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

コメントの投稿

SECRET

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

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

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

2013/07/29 Mon|19:50|URLEDIT

まおとNo title

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

2013/07/28 Sun|10:20|URLEDIT

218*管理人Re: btitdsさん

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

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

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

2013/06/28 Fri|20:54|URLEDIT

btitdsDLさせていただきました♪

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

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

2013/06/18 Tue|18:51|URL|EDIT

218*管理人Re: ゆめさん

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

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

2013/05/26 Sun|12:51|URLEDIT

ゆめ

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

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

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

2013/05/24 Fri|02:55|URL|EDIT

トラックバック

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

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

Design218-CAT1col

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

2013/05 19|Sun|22:15|218*

CALENDAR

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

top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。