【ブログカスタマイズ】囲み枠と画像の枠の導入方法

今回は囲み枠と画像の枠の導入方法について紹介します。

PC版とスマホ版のそれぞれの導入方法になります。

囲み枠の導入

囲み枠の導入方法ついて紹介します。

囲み枠とは、下記のように枠で囲んで文章を強調したりするときに使用します。

ユキはシャルを（＾ω＾）ﾍﾟﾛﾍﾟﾛしたい。

 以下のサイトを参考にして導入していきます。

saruwakakun.com

.box16{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}

 上記サイトの「16」のボックスデザインを導入しようと思うので、そのコードをコピーします。

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記サイトからコピーしたコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

<div class="box16">
<ul>
<li>アーンドラスペシャルミールス・・・・1,650円</li>
<li>レディースセット・・・・・・・・・・1,250円</li>
<li>ドーサ・セット・・・・・・・・・・・1,450円</li>
<li>タンドゥール・セット・・・・・・・・1,550円</li>
</ul>
</div>

HTML編集にて、上記のように囲み枠で囲みたい文章を「<div class="box16">～</div>」で囲みます。

上記のように囲みたい文章が囲まれます。

スマホ版（Proのみ）

<style type="text/css">
/*囲み枠*/
.box16{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}

</style>

① 上記のように囲み枠のコードを「<style type="text/css">～</style>」で囲みます。

② はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に上記コードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

スマホ表示でも囲み枠が表示されます。

囲み枠の導入は以上です。

画像の枠

続いて画像の枠の導入方法です。

背景が白の画像だと背景と同化してどこからどこまでが画像か分かりませんよね？

これだとわたくしが背景と化しちゃってるように見えます・・・orz

「ブログ投稿画像に枠（輪郭）を付ける方法 」というサイトを参考にしていきます。

<style>
.entry-content img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}
</style>

上記コード（ 参考サイトの画像枠コード）をコピーします。

はてなブログの管理画面にアクセスして、「設定」⇒「詳細設定」⇒「headに要素を追加」に上記コードを貼り付けて「変更する」をクリックして設定を変更します。

これでPC表示でもスマホ表示でも画像に枠が表示されます。

画像に枠が付いて画像が見やすくなったと思います。

これでわたくしが背景の模様と勘違いされずに済みますな！！

まとめ

ユキはシャルを（＾ω＾）ﾍﾟﾛﾍﾟﾛしたい。

ちょっと！！なんで囲み枠の参考がこの文章なのよ！？

それはですねえ・・・

私がうしるさんを操作して書かせたんですよ・・・

操作したってどういうことよ！？

うしるさんの脳を私がリモート操作してこの記事を書かせたってことですよ？

シャルはユキ様の嫁・・・シャルはユキ様の嫁・・・

シャルちゃんも操作したいですねえ・・・

ヒッ！

最後まで読んでいただきありがとうございました！