🔥🔥おつむの野望🔥🔥ぶしょうもの風雲録📜

ゲーム大好きものぐさたろうが最終的な野望を遂げるため⁉︎ぷち野望を叶えていく様子をお伝えするブログ

【はてなブログ】コピペで簡単!画像を角丸にする方法★画像一つに複数デザイン設定可

カブトをかぶった文字入りのツム顔

おつむ愛用ツム顔メーカー

 

今回のぷち野望🔥「画像を角丸にしたい」

カスタマイズの前に!

 

初めてカスタマイズをされる方は、カスタマイズの前に注意事項の確認をお願いします☆⬇︎
 カスタマイズする前の注意事項!※カスタマイズ心得五か条※


画像は大きくなったけど…

 

f:id:otsum:20200314141215j:plain

 

前回、プロフィール画像の表示サイズを大きくすることに成功しました。↑↑

 

前回の関連記事はこちら⬇

otsum.com

 

でも…画像は大きくなったけど、角丸になってない…

デフォルトのプロフィール画像は角丸になってるのに…

 

角丸にしたい!!

 

というわけで、角丸にしてみました♪

 

画像を角丸にする方法

 

コード例はいろいろあるようですが、シンプルで簡単なものにしました。

 

参考記事

 

こちらの記事を参考にさせていただきました☆⬇︎

www.web-officer.com

 

基本の手順は2STEP

 

  1. CSSをコピペ(最初の一度のみ)
  2. 画像のHTMLに「class="effect"」を追加(使う時その都度)

 

❶CSSをコピペ

 

はてなブログ管理画面から「デザイン」⇒「カスタマイズ(スパナアイコン)」と進み、「{}デザインCSS」に下記のCSSをコピペ。

CSS

/* 画像を角丸に */
.effect {
border-radius:15px;
}

参考:「15px」の部分の数値を大きくするほど角が丸くなります。

★「/* 画像を角丸に */」(コメントアウト)の部分も一緒にコピペしておくと、デザインの内容がわかりやすいのでおすすめです。

 

❷画像のHTMLに「class="effect"」を追加

 

角丸にしたい画像のHTMLにclass="effect"」を追加。

HTML

<img src="images/sample.jpg"class="effect">

 

今回の手順

 

前回、プロフィール画像として既にHTMLをペーストしているので、

「プロフィール」の「編集」を開き、①ペーストしてあるHTMLに「class="effect"」を追加 ②「適用」③「変更を保存する」

f:id:otsum:20200317181848j:plain

 

できあがり!⬇︎

f:id:otsum:20200314141118j:plain

 

無事、プロフィール画像が角丸になりました☆

 

「角丸」と言えば、事務の仕事でテプラを使う時よく角丸にしてたなーと思い出しました。

ウィーン…カチャッっていうカットする音がなんとも心地いいんですよねー♪

 

補足

 

他の画像も角丸にしてみようと思ったら、既に別のclassが指定されていました!
(>_<)

こういう場合はどうすればいいのか検索したところ、答えが見つかりましたので補足します☆

 

複数指定可

 

画像に既にclassが指定されている場合でも、複数指定が可能なので大丈夫です!

 

方法は、

半角スペースを空けてclass名を複数記述するだけ」です。

 

参考記事

 

こちらの記事を参考にさせていただきました☆⬇︎

beginners-high.com

 

はてなフォトライフの例

 

例えば、はてなブログの編集サイドバーの「写真を投稿」機能から画像をアップロードして貼り付けたものを「HTML編集」で見ると、「class="hatena-fotolife"」となっています。

 

この指定があることによって、

①画像をポイントした時(マウスオーバー時)に画像の周りにグレーの影が現れて画像が浮き上がったようになり

②クリック(タップ)した時に元のサイズの画像がポップアップで開く(元のサイズが貼り付けたサイズより大きい場合は拡大される)

ことはわかったのですが、別の効果も設定されているのかはわかりません!
(またわかりましたらお伝えします…。)

 

…で、この画像を角丸にしたい場合、先ほどのclass名「effect」を半角スペースを空けて追加すればOKです。

 

HTML

class="hatena-fotolife effect"

※コロン( , )やカンマ( . )では区切らない。

 

これで、ポップアップもする角丸の画像ができました☆

クリック(タップ)してみてください♪

f:id:otsum:20200319163752p:plain

 

ちなみに、一応、指定できる数に制限はないようです。

 

★今回の成果★

おつむは、ぷち野望🔥「画像を角丸にしたい」を叶えた!

 

🔜次回のぷち野望🔥「ディズニーランドに行きたいPart. 4」

otsum.com

 

🔙前回のぷち野望🔥「ディズニーランドに行きたいPart. 3」

otsum.com