- 2014
03/03
Mon Design218-c-CAT2col
category：共有テンプレート
17作目※3/3承認
Design218*c(cork)-CAT2col
利用規約をご覧ください【アダルト・宗教・違法ブログでのご使用は出来ません】
2カラム（左）テンプレート/黒背景/コルクver.
プラグイン(1)(2)は左カラムに、プラグイン(3)はindexページでのみ、1つ目の記事の上に表示されます。index/date/categoryエリア変数を使用しています
画像の貼り方については、続きをご覧ください
レポート用紙（黒背景）・1カラム（黒背景）・2カラム（右/白背景）もあります
素敵な写真をお借りしました(一目惚れ
) 境界線シンドローム様
222の日企画★第２弾。一応新作。c(cork)は同シリーズのコルクver.です。
o*――ﾟ+.――ﾟ+.――ﾟ+.――ﾟ+.――*+.――ﾟ+.――*o
その他・関連記事
画像の貼り方
罫線からはみださずに画像を貼りたい方は↓に進んでください
そうでもない方は、好きなように、または本文の最後にバーン!と貼っちゃってください
また罫線そのものが要らないという方はずっとずっと↓に進んでください
: 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-c-CAT2col[編集]→Design218-c-CAT2colのスタイルシート編集
▼以下クラス内の、下線部分のみを削除してください
.entry_body
{
background-image:url(http://blog-imgs-61.fc2.com/a/n/m/anminn218/catnote_bg.png);
}
:9
:1comment
formコメントの投稿
No title 
ご返答ありがとうございます。
これで安心して利用させていただくことができます♪
新しいデザインも楽しみにしていますね。
Re: サクランボさん
こんばんは。
罫線外せたそうで良かったです＾＾
ご報告ありがとうございました。
> 斜体の文字に変換できないのだけが残念ですが、
これはCSSで指定している書体の為です。
書体や文字のサイズ等、個人々で好みがあるものですし、限がないので当方では変更の予定はありません。
斜体になる書体をお調べ頂き変更してお使いください。
No title
ミシンさん、こんばんは☆
質問に丁寧にお応え頂きまして、ありがとうございます。
いろいろ試した結果、罫線を外すことにしました。
写真以外に、イラストを載せた時も、スッキリします。
シンプルになった分、文字を少し大きくしたら、
バランスよくいい感じになりました♪
斜体の文字に変換できないのだけが残念ですが、
満足しています☆彡
ありがとうございました。m(_ _)m
Re: 碧さん
はじめまして＾＾
テンプレートのご利用ありがとうございます。
218*のテンプレートを気に入っていただけたようで嬉しいです。
「Design218-c-CAT2col」をご利用にあたり、商用利用の可否についてですが
こちらのテンプレートにお借りした写真サイト様と、当ブログとの利用規約に従じますと
> 商用サイトでの使用可
となっておりますので、アフィリエイトブログでのご使用は可能です。
どうぞご利用ください。
No title
ミシンさん、はじめまして、碧と申します。
ブログを作成しようと、共有テンプレートを見ていて、
いいな♪と思ったものがほとんどミシンさんのデザインでした^ ^
こちらのテンプレートを利用させていただいて、
ハンドメイドのブログを作成しようと思うのですが、
参考にした本や使用した道具を、
Amazonアソシエイト（アフィリエイト）や楽天アフィリエイトを通じて
紹介することはできますでしょうか。
利用規約を拝見させていただいたところ、
アフィリエイトブログでの使用はＮＧだったので、
確認のためにコメントさせていただきました。
Re: サクランボさん
はじめまして＾＾
テンプレートのご利用ありがとうございます。
利用規約にもありますように当方ではカスタマイズに関するご質問にはお応えしておりませんが、サクランボさんに頂いたご質問の内容ついては当方でも思うところがありましたので、Design218-c-CAT2colの関連記事の追記のほうにカスタマイズ方法としてupしました。
そちらをご覧になってみてください。
http://anminn218.blog.fc2.com/blog-entry-79.html
※ご質問いただいたテンプレートとは違うテンプレートのコメント欄にコメントがありましたので、こちらで移動させていただきました。
No title
はじめまして、Dsign 218 -c-cat2colを、大変気に入って使用したいのですが、様々なサイズの写真を載せているので、罫線がズレてしまいます。罫線だけ外すことは可能でしょうか。もしよろしければ、方法を教えて頂きたいのですが。ちなみにPC操作は、初心者レベルです。よろしくお願いします。m(._.)m
Re: ヨンカさん
はじめまして＾＾
テンプレートのご利用ありがとうございます。
ふわふわ。りさまの猫のにゃんたが可愛いですよね。
あの色々な仕草を見ているだけで本当に和みます。
彼女もいるだなんて(*´o`*)ﾎﾜﾜｰﾝ
ブログの管理人さんにも、訪問者さんにも
テンプレートを気に入って頂けるなんて光栄です。
こちらこそありがとうございます。
ヨンカさんも雪の中出勤されたんですね。
今も溶けずに残ってますが、あの雪はヤバかったです..。
お互い事故に遭わず無事で何よりです。
ここは本当に何もないブログですが＾＾；
また遊びにいらしてください。
No title
はじめまして
今ミシンさんのNYANTA使わせてもらっています。
とても可愛くて一目ぼれだったんですが
たまたま来て下さった方にも好評で
改めてお礼にとやってきました。
大雪の影響受けられたんですね
大変ですね
私も今年は雪の日に出勤しないといけない日があって
とても怖い思いをしながら何とか無事で戻って来れましたが
ミシンさんもご無事で何よりです。
また遊びに来ます。
どうぞよろしくお願いします。
