2021年07月16日

BloggerのテーマNotableで画像に枠(ボーダー)を付ける方法

BloggerのテーマNotableでは標準で画像に枠(ボーダー)が付きません。
(Bloggerの他のテーマでも同じかもしれません)
画像全体に色が付いている写真などを投稿する場合は枠がなくてもいいかもしれませんが、比較的白の多い画像を使うことが多いので、枠は付けたいところです。



【A】画像を表示するHTMLにstyleで枠を付けてみる


画像を表示するHTMLコードに「border="0"」となっている部分があるので、そこを「style="border:1px solid #a9a9a9;"」に変更します。
SC20210713133146.png
   
SC20210713133232.png


「1px solid #a9a9a9」の部分は枠の太さや色を指定しいるもので、上の画像の枠はこれで指定したものです。
枠の太さや色を変えたいときは、ここを変更します。


この方法は、枠を付けたいときと付けたくないときがある、画像によって枠のデザインを変えたいという場合には適していると思いますが、全ての画像に同じデザインの枠を付けるのであれば、毎回コードを変更するのは面倒です。



【B】テーマのHTMLを編集して枠を付ける


1)Bloggerの[テーマ]ページを開いて、[カスタマイズ]ボタンの右側の[▼]部分をクリックします。
SC20210629174506.png


2)開いたメニューの中の[HTMLを編集]をクリックします。
SC20210629174700.png


3)9行目あたりに長いコードがあるので、その中から「img{border:0}」の部分を見つけます。
SC20210713140131.png


4)見つけた「img{border:0}」を「img{border:1px solid #a9a9a9}」に変更します。
SC20210713140159.png


「1px solid #a9a9a9」を変更すれば、枠の太さや色を変えられます。
この方法の場合は、画像を挿入した後でコードを変更することなく、すべての画像に同じ枠が付けられます。
もし枠を付けたくない画像があったら、「【A】画像を表示するHTMLにstyleで枠を付けてみる」で書いた「border="0"」の部分を「style="border: 0px none;"」に変更すると、その画像だけ枠なしにできます。



【C】CSSで枠を付ける


画像を表示するHTMLコードを見ると、「class="separator"」という部分があるので、CSSで何かデザインを設定していると思われます。
SC20210713143831.png


そのCSSに border のスタイルを追加してやれば枠を表示できるはずですが、調べたところCSSが難しくて断念することにしました。
私はあきらめましたが、CSSに詳しい人はCSSで枠を付ける方がいいかもしれません。



にほんブログ村 IT技術ブログ フリーソフトへ
この記事へのコメント
コメントを書く

お名前: 必須項目

メールアドレス:


ホームページアドレス:

コメント: 必須項目

この記事へのトラックバックURL
http://fanblogs.jp/tb/10851279

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
ブログ内を検索
ファン

最新記事
カテゴリー
最新コメント
ツイッター
広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール