ブログパーツ

趣味の工房

ブログの画像に効果をつける☆

みなさん、こんばんは

嫁さん、子供と立て続けにインフルエンザにかかり、
((((;゚Д゚))))ガクガクブルブル
なりくんちゅ。パパです。

というか、ボクも先日からどうも体調が悪い...のですが、熱はいたって平熱w
とりあえず、こんな時のために下書きで書いておいた記事をUPさせていただきます
(; ̄ー ̄A


先日、ブログの背景画像を作成する☆という記事にて使用した画像みた読者の方から、
「画像に影がついているようだけど、どうやってやるのだ?」
というご質問がありました。いいとこ見てます(爆)

このブログの記事本文の部分の背景画像にはグレー(#222222)を使用しているのですが、画像を表示する場合、ちょいちょい背景画像と画像の境目がわかりにくくなることがあります。


2013y02m23d_235612200.jpg



これを見やすくする手段として、1つに画像に枠をつけるという常套手段がありますが...

2013y02m23d_235612200.jpg



実は前回の記事ではこの画像に影をつけることによって見やすくしています。

2013y02m23d_235612200.jpg





続きはコチラから。


ランキングに参加しております♪

にほんブログ村



ブログの画像に効果をつける


いつものように先にお断りしておきますが、FC2ブログでの使用を前提として書かせていただきます。
また、ボクはCSSに関してはド素人です。とりあえずこれでできている、というレベルですので、突っ込んだ質問にはお答えできません。
尚、参考にされる際には自己責任にてお願いします。この記事を参考にされたことによるいかなる不具合に対しても、責任は負えませんのでご了承ください。


画像に影をつけるために、テンプレートのCSS部分に以下の記述を付け加えます。

.frame-shadow {
display: inline-block;
-webkit-box-shadow: 1px 1px 10px #000; /* Opera Chrome */
-moz-box-shadow: 1px 1px 10px #000; /* FireFox */
box-shadow: 1px 1px 10px #000;}

黄色の文字「.frame-shadow」の文字部分(.の後ろ部分)は半角アルファベットであれば構わないので、覚えやすい名前にしておくのも手です。
また、白文字の部分のピクセル値は左から順に「横方向のズレ」「縦方向のズレ」「ぼかし具合」の設定値ですので、好みに応じて数字を変更してください。
また、最後の「#000」は影の色の設定です。「#000」は黒ですが、例えば「#FFF」にすると白い影にすることができます。


念のため、テンプレートの複製をしてから作業をすることをお勧めします。

テンプレートの設定の「○○のスタイルシートの編集」の欄の一番下に貼りつければOK。
2013y02m24d_231736444.jpg
もちろん、この後更新(保存)も忘れずに。

実際に使用する際には、このように記述します。

<div class="frame-shadow">

<a href="http://blog-imgs-44.fc2.com/r/i/k/rikuntyudady/2013y02m23d_235612200.jpg" target="_blank"><img src="http://blog-imgs-44.fc2.com/r/i/k/rikuntyudady/2013y02m23d_235612200s.jpg" alt="2013y02m23d_235612200.jpg" border="0" width="599" height="296" /></a>
</div>

真ん中の記述は、画像をクリックしたときのリンク先と、画像のイメージの記述。
通常FC2ブログでは画像を差し込んだ時にこう記述されますね。
それを黄色部分の<div class="frame-shadow"></div>で挟み込む形です。「.frame-shadow 」部分の名前を変更した方はコチラの記述も合わせて変更してください。

以前記事にしたIMEの辞書登録で、<div class="frame-shadow"></div>を登録しておけば、便利です。
ボクは「しゃどう」という読みで<div class="frame-shadow"></div>と変換できるようにし、その間にカーソルを合わせて画像を挿入、という方法を使っています。


ちなみに、グレー部分(画像部分)の記述については、
サムネイルをクリックしたときに違う画像を表示する☆
☆画像リンクを貼る方法☆
で説明していますのでご参照ください。

尚、上の表記では見やすくするために改行を入れていますが、実際には<div class="frame-shadow">のすぐ後に(改行せず)画像の記述が来るようにします。
また、<div>タグを使用した場合、</div>の後に自動的に改行が入りますので、画像のすぐ下に文字を入れたい場合は</div>のすぐ後に文字を書くようにします。


尚、同じようにCSSの記述を追加することで、他にもいろんな効果を出すことができます。

【角を丸める】
Ranking01.jpg


○CSS(スタイルシート)への記述

.corner img {
border-radius: 10px;
}

※白文字のピクセル値を変えることでコーナーの半径を変えられます。

○本文への記述

<div class="corner">画像の記述</div>




【画像を傾ける】

Ranking01.jpg


○CSS(スタイルシート)への記述

.rotate {
display: inline-block;
transform: rotate(5deg);
}

※白文字の数字を変更することで、傾き具合が変わります。


○本文への記述

<div class="rotate">画像の記述</div>




ここでご紹介したのはほんの一部のみ。CSSは奥が深すぎて、ボクにはこれ以上深追いできません(爆)
興味のある方はいろいろ調べてみると、もっといろんな効果が出せると思います。
詳しくなったら、ボクに教えてくださいw


それではみなさん、**SeeYou**( ̄∀ ̄*)ノ

ランキングに参加しております♪

にほんブログ村




関連記事


    23:09 | Trackback : 0 | Comment : 4 | Top
Comment
2013.02.28 Thu 21:42  |  R-506 #4kLUYIDs
おばんです。

え・・・
家族皆さん~インフルエンザ
大変・・・
大丈夫ですか・・・
パパさん
私は元気ですが・・・
こちらは先週大雪でした・・・
昨日から天気がいいのですが?
道路がダート・トライアルです。
ハンドル操作が大変ですが、もう少しで・・・「春」を
期待するこの頃です。
家族の皆さん早く元気になって下さい。
では
  [URL] [Edit]
R-506さん
こんばんはー☆
嫁さんと子供2人はよくなりつつありますが、義母がまだダウン中です。
幸い、ボクと真ん中の子だけは何とか乗り切れそうですε=(´Д`;)
(ボクも熱が出ましたが、インフルではなかった模様w)

とても大変なことになってますね~。
こちらでは多分1cm積もっただけでも大騒ぎになると思います。
お気遣いありがとうございます☆人´∀`).☆.。.:*

  [URL] [Edit]
2013.03.03 Sun 23:48  |  名無し #-
角丸はIE10では無視されるようです。7 Pro x64
別のサイト(http://blog.3streamer.net/html5-css3/css3-styling-231/)ではきちんと角丸で表示されています。
はじめまして  [URL] [Edit]
名無しさん
初めまして。
いろいろいじってみてはいるんですが、各記事のタイトル部分も含め、IEではうまく表示されないことがあるようです。( ̄∇ ̄;)
まだまだ勉強不足です。すみません(; ̄ー ̄A
  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/945-14320fb4
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示