
ブログを書いています。ブログで画像を表示するとき、その画像の周りに、浮き上がるような装飾が自動的につくテンプレートを使用しています。そのテンプレートを下に書きます。
------------------------------------------
/* 画像の装飾 */
.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で質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・「これはヤバかったな」という遅刻エピソード
- ・初めて自分の家と他人の家が違う、と意識した時
- ・いちばん失敗した人決定戦
- ・思い出すきっかけは 音楽?におい?景色?
- ・あなたなりのストレス発散方法を教えてください!
- ・もし10億円当たったら何に使いますか?
- ・何回やってもうまくいかないことは?
- ・今年はじめたいことは?
- ・あなたの人生で一番ピンチに陥った瞬間は?
- ・初めて見た映画を教えてください!
- ・今の日本に期待することはなんですか?
- ・集中するためにやっていること
- ・テレビやラジオに出たことがある人、いますか?
- ・【お題】斜め上を行くスキー場にありがちなこと
- ・人生でいちばんスベッた瞬間
- ・コーピングについて教えてください
- ・あなたの「プチ贅沢」はなんですか?
- ・コンビニでおにぎりを買うときのスタメンはどの具?
- ・おすすめの美術館・博物館、教えてください!
- ・【お題】大変な警告
- ・洋服何着持ってますか?
- ・みんなの【マイ・ベスト積読2024】を教えてください。
- ・「これいらなくない?」という慣習、教えてください
- ・今から楽しみな予定はありますか?
- ・AIツールの活用方法を教えて
- ・最強の防寒、あったか術を教えてください!
- ・歳とったな〜〜と思ったことは?
- ・モテ期を経験した方いらっしゃいますか?
- ・好きな人を振り向かせるためにしたこと
- ・スマホに会話を聞かれているな!?と思ったことありますか?
- ・それもChatGPT!?と驚いた使用方法を教えてください
- ・見学に行くとしたら【天国】と【地獄】どっち?
- ・これまでで一番「情けなかったとき」はいつですか?
- ・この人頭いいなと思ったエピソード
- ・あなたの「必」の書き順を教えてください
- ・14歳の自分に衝撃の事実を告げてください
- ・人生最悪の忘れ物
- ・あなたの習慣について教えてください!!
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
メールで、画像の上に文字を書...
-
ワードプレスで、左寄せ画像と...
-
FC2ブログで関連記事の画像が表...
-
グーグルドライブ、勝手に共有...
-
line
-
【ExcelVBA】各セルをダブルク...
-
スクリーンショットをエクセル...
-
GoogleドライブOCR機能が使えな...
-
外国人のコメント欄でよく、コ...
-
パソコン版LINEのデータ保存先...
-
プリントスクリーンショットの...
-
エクセルVBAを使用し、指定のパ...
-
Gooブログの画像を大きく出来ま...
-
TIF JPGの画像回転ソフト
-
QRコードを保存する方法を教え...
-
テレビで放送された男性芸能人...
-
拡張子bakってなんですか?必要...
-
画像リンクを別ウインドウでサ...
-
Outlook:予定表アイテ...
-
プロダクトキーシールをきれい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワードプレスで、左寄せ画像と...
-
WordPressのナビゲーションメニ...
-
【Wordpress】headerの上に文字
-
seesaaブログ 画像にリンクを...
-
メールで、画像の上に文字を書...
-
ブログの背景画をシースルーで...
-
FC2ブログで関連記事の画像が表...
-
グーグルドライブ、勝手に共有...
-
line
-
【ExcelVBA】各セルをダブルク...
-
スクリーンショットをエクセル...
-
エクセルVBAを使用し、指定のパ...
-
外国人のコメント欄でよく、コ...
-
メールをwordに変換して保存したい
-
JPG画像をDVDプレーヤー...
-
GoogleドライブOCR機能が使えな...
-
Outlook:予定表アイテ...
-
最近プリクラを撮るとピクトリ...
-
illustratorで作ったロゴをWeb...
-
Webページ保存によるテキストボ...
おすすめ情報