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

f:id:kumachanshimai:20200503095559j:plain

超ペイペイの『ブログ知識ゼロの超初心者が始めるブログ』です。少しずつ、初心者なりのブログ作成のテクニックの習得やブログテーマのカスタマイズについて、備忘録的に記したいと思います。同じような境遇の方や今後ブログを始める方に参考となれば幸いです。

今回は、文章を枠で囲む方法を調べてみました。

はてなブログで文章を書く時、デフォルトでは、残念ながら通常のWordのような文字の装飾があまり出来ません。「太字」、「斜体」、「打消」、「アンダーライン」、「文字の大きさ」、「文字色」の６つだけで、設定内容の種類も少ないです。

Wordのように、フォントやフォントサイズ、強調、囲い、下線などもっと細かく設定して、もっと見やすい文章を作成したいのですが・・・。「はてなブログ」さん、デフォルトで設定してください！！

ってことで、「文章を枠で囲む方法」を調べてみました。

ポチポチっと調べてみると、すぐにヒット！！

こちらのブログを参考にさせてもらいました。（感謝）

こんな私でも、このブログでは分かりやすく解説されており、コピペするだけ・・・、いやいや、コピペさせて戴くだけです。（感謝カンゲキ雨嵐）

「HTML編集」で以下のように入力します。（以下をコピペするだけです。）

<p> ・できないことに気を取られずに、できることをやりなさい。（ジョン・ウッデン） </ p>

<p> ・失敗は、成功を引き立たせるための調味料だ。（トルーマン・カポーティ） </ p>

<p> ・前進をしない人は、後退をしているのだ。（ゲーテ） </ p>

</ div>

※注）赤字を自分の好きな文章に変更してください。

すると、こんな感じで、無事、文章を枠線で囲むことが出来ました。

⇩⇩⇩

・できないことに気を取られずに、できることをやりなさい。（ジョン・ウッデン）

・失敗は、成功を引き立たせるための調味料だ。（トルーマン・カポーティ）

・前進をしない人は、後退をしているのだ。（ゲーテ）

最後の行の下側の余白が若干広いのが気になりますが、残念ながら上手く調整出来ません。また、さらに頑張れば、枠線の色・太さ・大きさ・背景色などを変えることも出来そうです。

ってことで、腰痛の重い腰を上げて、次に「枠線の色の変更」に挑戦してみました。

色の名前とカラーコードは、以下のサイトを参考にすることができます。

先ほどの「#cccccc」の箇所を、例えば、「＃4169e1」に変更すると、

⇩⇩⇩

・できないことに気を取られずに、できることをやりなさい。（ジョン・ウッデン）

・失敗は、成功を引き立たせるための調味料だ。（トルーマン・カポーティ）

・前進をしない人は、後退をしているのだ。（ゲーテ）

こんな感じで枠線の色を変更することが出来ました。

次に、さらにもう少し「枠線のカスタマイズ」に挑戦してみます。

次に、枠線の太さ、枠線の角を丸く、背景色を追加、枠線の幅を変更するため、先ほどの１行目を

<div style = "border：2px solid ＃4169e1 ; border-radius：10px ; background：＃f0f8ff; padding：10px; width：90％ ;"> と変更すると、

⇩⇩⇩

こんな感じで枠線をカスタマイズすることが出来ました。

ちなみに、「箇条書き」の書式を併用すれば上下の余白の不均一を解消することが出来ました。

さらに、「solid（1本線）」としていた枠線のスタイルを変更してみます。

<div style = "border：ridge ; background：＃ebf6f7; padding：10px; width：90％;"> とすると、

⇩⇩⇩

こんな感じ「ridge（立体的に隆起した線）」になりました。

ネットで検索すると、もっとおしゃれなボックスデザイン（囲み枠）が公開されています。ただし、HTMLの操作だけでなく、CSSを操作する必要もあったりするため、初心者の私にはまだ理解できません。当面はこれで十分かなと考えています。

っということで、皆さんも是非やってみてください。