--
--
--

スポンサーサイト

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

「pic700c」写真&イラスト表示見本

 写真表示見本。

イラストの表示見本

 「pic700c」は、黒背景の「pic700b」が共有登録されたときに、「白版がほしい」というリクエストがあったのを意識したものです(そのわりには遅くなってしまいましたが)。
 リクエストを下さった方は、ブログに、エンピツ書きのイラストを載せていらっしゃいました。
 エンピツイラストをスキャナーや写真撮りで取り込んだとき、イラストが文字に負けないよう、「pic700c」は、うちのテンプレートにしては文字色を淡めに設定しています。
 またスタイルシート内「画像の枠」というところで、画像を囲む罫線の設定をしています。カスタマイズはご自由にどうぞ。

イラスト見本 表示見本として自分でイラストが描ければよかったのですけど、(写真もあまり上手ではありませんが)絵はまったくダメなので、素材サイトさんからお借りすることにしました。
 右は、「もずねこ」さんのイラストです。もずねこさんのサイトにはいろいろなタッチのものがあるのですが、エンピツやエンピツの線に色をつけたような作品がかなり多く、そのなかからお借りしました。優しい温かい感じのものから、少し奇怪なのにオシャレな感じのものまで、見ているだけで楽しめるサイトです。
skyplus1.jpg


「pic700c」を装備したがずっと使うかどうか判らない方へ

このテンプレートをずっと使っていただけるならテンプレートを変更した時のことを心配する必要はないのですが、普通は、「ずっと使うかどうかなんて判らない」と思います。このテンプレートを使って700pxの画像を入れた記事をたくさん書いた後で、他のテンプレートにしようとした場合、幅700pxの画像を崩れず全部表示させることのできるテンプレートは、あまり多くありません。あらかじめ、変更後の対応を「仕込んで」おくほうが安心です。
 具体的には、画像を入れたときに、クラスを付与しておきます。このブログの場合には、テンプレートを替えてもharukiyaさんのスクリプトと組み合わせて使用できるように、「js_popup」というクラスを使用しています。

<img src="http://blog-imgs-32.fc2.com/m/a/n/manannan/saido3.jpg" class="js_popup" border="0" />

popup.jsスクリプト導入済みテンプレートで幅700px画像の入った記事を表示するサンプル(#211=当記事です)
(スクリプトで、写真の表示サイズを調整可能です。閲覧窓サイズをかえると、写真のサイズも変わるよう、%で指定しています。写真をクリックすると別窓で原寸表示、別窓内の写真をクリックすると窓が閉じます)
スポンサーサイト
Comment
 

管理者にだけ表示を許可する


Trackback
Trackback URL

«  | HOME |  »

Manannan Mac Lir

共有テンプレート


Tree-Recent


Tree-Comment


Tree-TB


カテゴリ


Tree-Arcive


CalendArchive


ブログ管理メニュー(新)


タグリスト(旧


ユーザータグ


テンプレート構造解析


フォーラムリンク


最新コメント


リンク


バナー貼


カテゴリ


画像一覧(月別)


ブログ内検索


プロフィール


Tree-LINK


RSSフィード


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