ブログを書いています。ブログで画像を表示するとき、その画像の周りに、浮き上がるような装飾が自動的につくテンプレートを使用しています。そのテンプレートを下に書きます。
------------------------------------------
/* 画像の装飾 */
.mainEntryBase img{
margin:0px 3px 0px 0px;
padding: 3px;
background-color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 2px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #999999;
border-bottom-color: #999999;
}
------------------------------------------
このテンプレートを変更して、ブログ上で表示する画像の角が自動的に丸くなるようにしたいと考えています。どのようにすればいいのか教えてください。
http://ezinfo.jp/contents/script/rcr/
このサイトでは、画像のURLを入力すると自動で角を丸くしてくれます。このような操作を、ブログのテンプレートに組み込み、表示した画像の角が自動的に丸くしたいと考えています。よろしくお願いします。
No.2ベストアンサー
- 回答日時:
>画像を4つ作り、それをアップロードした画像の四隅に表示させる
スタイルシートでの実現は、残念ですが無理だと思います。先ほどふと、DirectXの機能を利用するfilterプロパティ(WinIE限定)なら出来るのではと思いましたが、これを実現できるものはありませんでした。
JavaScript(DOM)を使えば出来るかもしれませんが、様々な問題が考えられることから、この方法では出来たとしても実用には耐えられないと思います。もっと画期的な方法が有れば別ですが、テンプレートとして実現することは出来ないでしょう。
どうしても自動的に行いたいならば、CGIを利用するのが一番実用的だと思います。
画像URIをパラメータとして渡すと、加工済みの画像を返してくる。そういうCGIがあれば、自動的に角を丸くすることが実現できるでしょう。
問題点は、そのCGIをおいたサーバに負荷がかかることですね。
そうでなければ、やはり予め加工した画像を使うほかないと思います。
回答、ありがとうございます。とても詳しく教えていただけたので、参考になりました。スタイルシートで角を丸くするのは難しい、ということがよくわかりました。
あらかじめ加工した画像をアップロードして使ったほうが手軽で簡単ということですね。これからそのようにしてアップロードしていきたいと思います。
2度の丁寧な回答、本当にありがとうございました。
No.1
- 回答日時:
私が知る限りでは、画像の角を切り取るCSSプロパティはありません。
-moz-border-radius:《サイズ》;
という、枠線の角を丸くするものならありますが(Gecko限定。CSS3に採用予定)。応用が利かないかと試してみましたが、出来ませんでした。
(そちらのサイトで)画像の角を丸く加工し、ブログに掲載する。それしか無いのでは?
この回答への補足
回答ありがとうございます。
画像を切り取るのは、難しいことがわかりました。
切り取るのではなく、内側が透明で外側が白色の画像を
四隅に上から表示することで切り取ったようにみせることはできますか?
画像を4つ作り、それをアップロードした画像の四隅に表示させるというテンプレートは作れないでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
WordPressのナビゲーションメニ...
-
line
-
グーグルドライブ、勝手に共有...
-
【ExcelVBA】各セルをダブルク...
-
エクセルVBAを使用し、指定のパ...
-
スクリーンショットをエクセル...
-
プロダクトキーシールをきれい...
-
Outlook:予定表アイテ...
-
illustratorで作ったロゴをWeb...
-
圧縮ファイル(zip)について
-
ワードの保存について
-
ブログ見出し画像のサイズと容量
-
ギガファイル便のアップロード...
-
先日google document の文章をU...
-
エクスポートと保存は同じ意味...
-
JPEGの編集(一部を切り取り保...
-
FFFTP上にあるファイルを直接修...
-
スクリーンセーバーの画像の一...
-
Dropboxでアップロード出来ない...
-
FC2ブログ 写真の大きさを縮小...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
WordPressのナビゲーションメニ...
-
シーサーブログのヘッダー画像を
-
gooブログの画像リンク
-
FC2 ホームページの事です。画...
-
ワードプレスで、左寄せ画像と...
-
ホームページ作りで
-
WordPressで囲い込みや塗りつぶ...
-
FC2ブログテンプレート編集(初...
-
line
-
グーグルドライブ、勝手に共有...
-
【ExcelVBA】各セルをダブルク...
-
外国人のコメント欄でよく、コ...
-
スクリーンショットをエクセル...
-
ワードの保存について
-
Outlook:予定表アイテ...
-
エクセルVBAを使用し、指定のパ...
-
メールをwordに変換して保存したい
-
JPEGの編集(一部を切り取り保...
-
FFFTP上にあるファイルを直接修...
-
Excelで作成したファイルをOneD...
おすすめ情報