http://tsukikalab.blog.shinobi.jp/
ちょっとした技、習得しました♪
テキスト内の画像に、ポラロイド風の枠を付けるというもの。
面倒でなければ、記事をアップする際に、ソースの編集で
直接タグを打ち込めばいいのですが、
毎回表示したい場合は、それはちょっと面倒な作業となります。
そこで、テンプレートのCSSに直接指示を出しちゃおうってことです。
編集はいたって簡単なので、みなさんもぜひお試しください。
以下、続きにCSSと、htmlの追記を記しておきます。
コピペでどうぞ♪
見本はこんな感じです（*´∇｀*）
今後の共有テンプレートでは、このポラロイド風の画像枠タグを挿入します。
テキスト内の画像に、ポラロイド風の枠を付けるというもの。
面倒でなければ、記事をアップする際に、ソースの編集で
直接タグを打ち込めばいいのですが、
毎回表示したい場合は、それはちょっと面倒な作業となります。
そこで、テンプレートのCSSに直接指示を出しちゃおうってことです。
編集はいたって簡単なので、みなさんもぜひお試しください。
以下、続きにCSSと、htmlの追記を記しておきます。
コピペでどうぞ♪
見本はこんな感じです（*´∇｀*）
今後の共有テンプレートでは、このポラロイド風の画像枠タグを挿入します。
[8回]
まず、テンプレート編集画面を開きます。
下段CSS中断辺り、
“記事ブロック用デザイン” を見つけます。
その欄の一番下に、以下のものを追記します。
/*テキスト内の画像*/
.EntryText img {
background: #ffffff;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
padding: 5px;
}
着色部分は画像と枠の隙間ですので、お好きな数字に指定してください。
また、border の#****** は、枠線の色指定ですので、お好きな色に変えてください。
次に、このままだと、絵文字・リンクにも反応してしまいますので、
両者に反応しないタグを追記します。
同じく、下段CSS最終行に、以下のタグをコピペしてください。
img.emoji{
vertical-align:middle;
border:0;
}
img {
border: none;
}
mozilla(firefox) だとこれでOKなのですが、IEだとpadding の空間を認識しません。
よって、画像枠と画像の空間が表示できないのです。
そこで、ドキュメント宣言！にURLを追記します。
テンプレート編集画面上段、html記述の１行目、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
上部、着色部分をコピペで追記してください。
これで終わりです。
このドキュメント宣言に行き着くまで、2日かかりました～ﾉ(´д｀*)
我ながら、執念深いと思います(笑)
下段CSS中断辺り、
“記事ブロック用デザイン” を見つけます。
その欄の一番下に、以下のものを追記します。
/*テキスト内の画像*/
.EntryText img {
background: #ffffff;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
padding: 5px;
}
着色部分は画像と枠の隙間ですので、お好きな数字に指定してください。
また、border の#****** は、枠線の色指定ですので、お好きな色に変えてください。
次に、このままだと、絵文字・リンクにも反応してしまいますので、
両者に反応しないタグを追記します。
同じく、下段CSS最終行に、以下のタグをコピペしてください。
img.emoji{
vertical-align:middle;
border:0;
}
img {
border: none;
}
mozilla(firefox) だとこれでOKなのですが、IEだとpadding の空間を認識しません。
よって、画像枠と画像の空間が表示できないのです。
そこで、ドキュメント宣言！にURLを追記します。
テンプレート編集画面上段、html記述の１行目、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
上部、着色部分をコピペで追記してください。
これで終わりです。
このドキュメント宣言に行き着くまで、2日かかりました～ﾉ(´д｀*)
我ながら、執念深いと思います(笑)
PR
この記事にコメントする
Calendar
| 03 | 2024/04 | 05 |
| 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 |
Thanks
New Entries
New Comments
Christmastide
⇒ DSLR-A850 (11/12)- blue flower
⇒ 橙 (08/29) - blue flower
⇒月華
- blue flower
⇒ 橙 (08/28) - blue flower
⇒ - twilight
⇒ AKIG (07/25) - twilight
⇒ - jewel
⇒ えいしん (01/28) - jewel
⇒ - はじめに
⇒ くるりん村長 (12/25) - はじめに
⇒ - Σ(･Д･ﾉ)ﾉ ｱｳｯ
⇒ 橙 (12/01) - Σ(･Д･ﾉ)ﾉ ｱｳｯ
⇒ - Σ(･Д･ﾉ)ﾉ ｱｳｯ
⇒ 橙 (10/17) - Σ(･Д･ﾉ)ﾉ ｱｳｯ
⇒ - marguerite ３カラム
⇒ かなせ (10/14) - marguerite ３カラム
⇒ - twilight
⇒ ミドリーヌ (08/01) - twilight
⇒
Profile
精神的に落ち着く色らしい。。。(≧ｍ≦)
OS : Windows Vista ・ XP ・ Me
browser : IE 6 ・7 ・8
Firefox 3.6.15
Safari 5.0.4
Google chrome 8.0.552.237
▼ リンクバナー
当ブログはリンクフリーです。
バナーは、右クリック → 保存 でお持ち帰りください。
Name : tsukika's lab
URL : http://tsukikalab.blog.shinobi.jp/
Master : 月華
Search in Blog
Links
共有テンプレート作成で素材をお借りしているサイトさま (順不同)
Kun
Pearl Box
*MARIA
Atelier Black/White
Egg* Station
Bar Code