はてなブログの文章を枠で囲む方法！！

よくいろいろなサイトやブログで、

見本

のような文章を枠線で囲んだ表記見かけませんか？

今回は上記のような文章を枠で囲む方法を説明していきたいと思います。

はてなブログの文章を枠で囲む方法

 はてなブログの文章を枠で囲むには、『記事を書く』から『HTML編集』を選択してもらい、下記タグをコピーし貼り付けてみて下さい。

<div style="border: 3px solid #ff1493;">見本</div>

貼り付け後に『編集見たまま』か『プレビュー』を選択してもらうと下記のような囲いができます。

見本

では先ほどコピーして貼り付けたタグの内訳を見ていきましょう。

<div style="border: 3px（枠線の太さ） solid（実線） #ff1493（枠線の色）;">見本（枠線内の本文）</div>

となっています。

枠線の太さをかえるには

枠線の太さをかえる場合は

 border:3pxの数字を変更すれば太さを変えることが出来ます。

例えば3pxを10pxにかえます。

<div style="border: 10px solid #ff1493;">見本</div>

見本

と線の太さが変わる事が分かります。

枠線の種類をかえるには

次に枠線の種類ですが、solidと書かれた部分を下記値に順次かえていきます。

double・・・枠線を2本線で表示。

<div style="border: 10px double #ff1493;">見本</div>

見本

dotted・・・枠線を点線で表示。

<div style="border: 10px dotted #ff1493;">見本</div>

見本

dashed・・・枠線を破線で表示。

<div style="border: 10px dashed #ff1493;">見本</div>

見本

groove・・・窪んだ枠線を表示。

<div style="border: 10px groove #ff1493;">見本</div>

見本

ridge・・・隆起した枠線を表示。

<div style="border: 10px ridge #ff1493;">見本</div>

見本

inset・・・上、左の枠線を暗く、下、右の枠線を明るく表示。

<div style="border: 10px inset #ff1493;">見本</div>

見本

outset・・・上、左の枠線を明るく下、右の枠線を暗く表示。

<div style="border: 10px outset #ff1493;">見本</div>

見本

といった形でいろいろな枠線を表示させる事ができます。

枠線の色を変えるには

枠線の色をかえるには#ff1493の#以降の英数字を変えます。

例えば

枠線を黒に変更・・・#000000（black）

 <div style="border: 10px dotted #000000;">見本</div>

見本

 枠線を青に変更・・・#0000ff（blue）

<div style="border: 10px dotted #0000ff;">見本</div> 

見本

#以降の英数字を変更すると上記のような表示になります。

カラーコードは下記サイトを参考にして下さい。

www.colordic.org

スポンサーリンク

枠線内の余白の変更

枠線内の余白を変更するには

枠線の説明で使用した

<div style="border: 10px dotted #ff1493;">見本</div>

にpadding: 〇〇px;を追加します。

※余白の大きさは〇〇の部分の数字を変更する。 

例えば

<div style="border: 10px dotted #ff1493; padding: 15px;">見本</div>

とすると以下のようになります。

見本

余白が大きくなったのがわかりますか？

試しにpadding: 15px;とpadding: 5px;を並べてみましょう。

見本

見本

と上記のように余白が変わります。

ちなみに、

上の余白のみを変更したいときはpadding-top: 〇px;

下の余白のみを指定したいときはpadding-bottom: 〇px;

左の余白のみを指定したいときはpadding-left: 〇px;

右の余白のみを指定したいときはpadding-right; 〇px;

で変更する事が可能です。

上から順に〇を15pxにすると以下のようになります。

<div style="border: 10px dotted #ff1493; padding-top: 15px;">見本</div>

見本

 <div style="border: 10px dotted #ff1493; padding-bottom: 15px;">見本</div>

見本

 <div style="border: 10px dotted #ff1493; padding-left: 15px;">見本</div>

見本

 <div style="border: 10px dotted #ff1493; padding-right: 15px;">見本</div>

見本

また、上下左右別々に余白を指定したいときはpadding: 〇px 〇px 〇px 〇px;とpxの間にスペースを入れることで左から順に上の余白、右の余白、下の余白、左の余白を指定する事が出来ます。

<div style="border: 10px dotted #ff1493; padding: 20px 5px 15px 10px;">見本</div> 

見本

余談ですが、

padding: 〇px 〇px;のように二つの値を指定すると左から順に上下、左右の値になります。

例えば<div style="border: 10px dotted #ff1493; padding: 20px 10px;">見本</div> で、

見本

padding: 〇px 〇px 〇px;のように三つの値を指定すると左から順に上、左右、下の値になります。

例えば、<div style="border: 10px dotted #ff1493; padding: 20px 10px 30px;">見本</div> で、

見本

のようになります。

枠線内の背景色を変更する

枠線内の余白の変更で使用した

<div style="border: 10px dotted #ff1493; padding: 15px;">見本</div>

 に更にbackground: #〇〇〇〇〇〇;を追加します。

※〇には枠線の色で説明した英数字で色を指定する。

例えば

 <div style="border: 10px dotted #ff1493; padding: 15px; background: #ff69b4;">見本</div>

とすると以下のようになります。

見本

枠線の角を丸くする方法

 <div style="border: 10px dotted #ff1493; padding: 15px; background: #ff69b4;">見本</div>

にborder-radius: 〇〇px;を追加します。

 ※〇〇の部分には数字を入れる数字が大きいとより角が丸く表示されます。

例えば

 <div style="border: 10px dotted #ff1493; padding: 15px; background: #ff69b4; border-radius: 10px;">見本</div>

見本

<div style="border: 10px dotted #ff1493; padding: 15px; background: #ff69b4; border-radius: 20px;">見本</div>

見本

 border-radius: 〇〇px;の〇〇の数字により上記のような違いになります。

まとめ

今回は文章を枠線で囲む方法を紹介させていただきました。

題名ははてなブログになっていますが、はてなブログ以外でも紹介させていただいた内容を活かす事ができます。

是非今回の文章を囲う方法を活かして、個性的なブログ作成に取り組んでみてください。

※記事は2020年7月21日現在の内容です。実際のサービス内容等と異なる場合がありますので注意して下さい。