忍者ブログ
http://tsukikalab.blog.shinobi.jp/
Admin / Write / Res
<< 04   2017/05   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     06 >>


◆◆ INFORMATION ◆◆

忍者ブログ共有テンプレートを作成しています。
 プラグインにテンプレート一覧があります。
ご利用の際には、必ず<<はじめに>> <<利用規約>>をご覧ください。

 新作テンプレート作成中は、動作・表示確認を行うことがあるため、
レイアウトが崩れて表示される場合がありますがご了承ください。

 テンプレートについてのお問い合わせやご質問等は、
各記事のコメント欄かプラグインにあるメールフォームからどうぞ。


[64]  [63]  [62]  [61]  [60]  [59]  [58]  [57]  [56]  [55]  [54
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ちょっとした技、習得しました♪

テキスト内の画像に、ポラロイド風の枠を付けるというもの。
面倒でなければ、記事をアップする際に、ソースの編集で
直接タグを打ち込めばいいのですが、
毎回表示したい場合は、それはちょっと面倒な作業となります。

そこで、テンプレートのCSSに直接指示を出しちゃおうってことです。
編集はいたって簡単なので、みなさんもぜひお試しください。
以下、続きにCSSと、htmlの追記を記しておきます。
コピペでどうぞ♪

見本はこんな感じです(*´∇`*)

071202_1223~02.jpg


今後の共有テンプレートでは、このポラロイド風の画像枠タグを挿入します。


まず、テンプレート編集画面を開きます。
下段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記述の1行目、

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

上部、着色部分をコピペで追記してください。

これで終わりです。

このドキュメント宣言に行き着くまで、2日かかりました~ノ(´д`*)
我ながら、執念深いと思います(笑)

拍手[8回]

PR
この記事にコメントする
Name
Title
Color
Mail
URL
Comment
Password   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret
Calendar
04 2017/05 06
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
New Entries
jewel (01/25)   
Σ(・Д・ノ)ノ アウッ  (10/17)   
twilight (06/13)   
green leaf 3 (06/04)   
Flower&Painting (05/27)   
Profile
  Author   :  月華
 about me  :  とにかくブルー好き 
精神的に落ち着く色らしい。。。(≧m≦)

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
NeckDoll
Links
共有テンプレート作成で素材をお借りしているサイトさま (順不同)

写真素材 ハマ様 Kun

イラスト素材 真珠(まじゅ)様 Pearl Box

ナチュラル・レトロ素材 まりあ様 *MARIA

黒・白背景用イラスト素材 たかむらちはる様 Atelier Black/White

クリスタル素材 Anezaki様 Egg* Station
Bar Code
Copyright © 2008-2011  tsukika's lab All Rights Reserved.
*Material by Pearl Box  * Template by tsukika  * Powered by NINJA TOOLS
忍者ブログ [PR]