interest blog

サクッと読めるライトな記事に詰めた知識

はてなブログ記事内の画像やサムネイル画像をオシャレな丸角にする方法

はてなブログで使用する画像の角を取っ払って丸く優しいイメージにしたい!との思いから、先人達の知恵をグーグル様で検索にかけて発見したので備忘録として残しておきます。

コードをカスタムする男性

 

サムネイル画像を丸角にするCSSコード

はてなブログのサムネイル画像を丸角にするコードです。参考にした記事はこちらの記事です。

↑の記事内にある「サムネイル画像を丸くする方法」という見出しにあるCSSをコピーして管理画面の[デザインカスタム]>[モバイル]>[タイトル下]にコピペ、保存で完了です。

 

 因みに、コード下の方の「画像に枠線をつける」の部分の[solid 3px]とされている数字を変えることで枠線の太さを変更可能です。

 

記事内画像を丸角にするCSSコード

次に記事内の画像を丸角にする方法です。参考に下記事はこちら、

 

CSSとされた見出しにあるコードを[デザインカスタマイズ]>下部の[デザインCSS]に入れて保存して完了です。

 

モバイルビューでも対応させたい場合は、[スマホ]>[ヘッダー]>[タイトル下]にコピペで保存して完了です。

 

これは記事にもありますが、セレクタをまとめて行う方が効率が良いと思います。

 

以上が画像の角を丸くするコードです。

 

どうです?出来ましたか?

先人たちのお蔭で快適ブログ生活です。感謝感謝であります。

 

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

  • 作者: 赤間公太郎,原一宣。,藤川麻夕子,山本和泉
  • 出版社/メーカー: エムディエヌコーポレーション
  • 発売日: 2015/07/17
  • メディア: 単行本
  • この商品を含むブログを見る