今回のぷち野望🔥「画像を角丸にしたい」
カスタマイズの前に!
初めてカスタマイズをされる方は、カスタマイズの前に注意事項の確認をお願いします☆⬇︎
カスタマイズする前の注意事項!※カスタマイズ心得五か条※
画像は大きくなったけど…
前回、プロフィール画像の表示サイズを大きくすることに成功しました。↑↑
前回の関連記事はこちら⬇
でも…画像は大きくなったけど、角丸になってない…
デフォルトのプロフィール画像は角丸になってるのに…
角丸にしたい!!
というわけで、角丸にしてみました♪
画像を角丸にする方法
コード例はいろいろあるようですが、シンプルで簡単なものにしました。
参考記事
こちらの記事を参考にさせていただきました☆⬇︎
基本の手順は2STEP
- CSSをコピペ(最初の一度のみ)
- 画像のHTMLに「class="effect"」を追加(使う時その都度)
❶CSSをコピペ
はてなブログ管理画面から「デザイン」⇒「カスタマイズ(スパナアイコン)」と進み、「{}デザインCSS」に下記のCSSをコピペ。
/* 画像を角丸に */
.effect {
border-radius:15px;
}
参考:「15px」の部分の数値を大きくするほど角が丸くなります。
★「/* 画像を角丸に */」(コメントアウト)の部分も一緒にコピペしておくと、デザインの内容がわかりやすいのでおすすめです。
❷画像のHTMLに「class="effect"」を追加
角丸にしたい画像のHTMLに「class="effect"」を追加。
<img src="images/sample.jpg"class="effect">
今回の手順
前回、プロフィール画像として既にHTMLをペーストしているので、
「プロフィール」の「編集」を開き、①ペーストしてあるHTMLに「class="effect"」を追加 ②「適用」③「変更を保存する」
できあがり!⬇︎
無事、プロフィール画像が角丸になりました☆
「角丸」と言えば、事務の仕事でテプラを使う時よく角丸にしてたなーと思い出しました。
ウィーン…カチャッっていうカットする音がなんとも心地いいんですよねー♪
補足
他の画像も角丸にしてみようと思ったら、既に別のclassが指定されていました!
(>_<)
こういう場合はどうすればいいのか検索したところ、答えが見つかりましたので補足します☆
複数指定可
画像に既にclassが指定されている場合でも、複数指定が可能なので大丈夫です!
方法は、
「半角スペースを空けてclass名を複数記述するだけ」です。
参考記事
こちらの記事を参考にさせていただきました☆⬇︎
はてなフォトライフの例
例えば、はてなブログの編集サイドバーの「写真を投稿」機能から画像をアップロードして貼り付けたものを「HTML編集」で見ると、「class="hatena-fotolife"」となっています。
この指定があることによって、
①画像をポイントした時(マウスオーバー時)に画像の周りにグレーの影が現れて画像が浮き上がったようになり、
②クリック(タップ)した時に元のサイズの画像がポップアップで開く(元のサイズが貼り付けたサイズより大きい場合は拡大される)
ことはわかったのですが、別の効果も設定されているのかはわかりません!
(またわかりましたらお伝えします…。)
…で、この画像を角丸にしたい場合、先ほどのclass名「effect」を半角スペースを空けて追加すればOKです。
class="hatena-fotolife effect"
※コロン( , )やカンマ( . )では区切らない。
これで、ポップアップもする角丸の画像ができました☆
クリック(タップ)してみてください♪
⇊
ちなみに、一応、指定できる数に制限はないようです。
★今回の成果★
おつむは、ぷち野望🔥「画像を角丸にしたい」を叶えた!
🔜次回のぷち野望🔥「ディズニーランドに行きたいPart. 4」
🔙前回のぷち野望🔥「ディズニーランドに行きたいPart. 3」