サボりは1日にしてならず。

MENU

【コピペで簡単!】はてなブログ無料版に囲み枠を設置してブログをオシャレにする裏技【スマホアプリでも可能】

f:id:keykuuun:20211105133306j:image

はじめまして、きー(@sabori_key)です!

 

今回もはてなブログのカスタマイズに関しての記事になります。

 

みなさんブログを作成する上で重視しているものはありますか?

 

ブロガーさんでしたら、他の人のブログを覗いてみることもあると思いますがその中で「囲み枠」をうまく使っている方が多いと感じたことはありませんか?

 

文章の質や、タイトルの付け方はブログを執筆する上では重要です。ですが、どれだけ良質な記事を書いてもブログのデザインが悪いと読みづらい印象を与えてしまい、ユーザーの離脱率が上がってしまいます。

 

それを回避するためにブログの記事のデザインにこだわる方が多いわけです。

 

とはいっても、はてなブログで記事にデザインできることは限られているので、なかなかデザインにまで手が回っていないという方もいらっしゃるのではないでしょうか?

 

実ははてなブログは簡単にブログの記事のデザインをすることができます!

 

今回は、ブログの記事に囲み枠を設置して読みやすく、オシャレなブログを作る方法をご紹介します!コピペをするだけで簡単にできますので、ぜひ参考にしてみてください!

 

 

ブログの記事のデザインの重要性

ブログのデザインは非常に重要になります。デザインやレイアウト、画像の差し込み方でイメージが変わるだけでなく、読みやすさや情報の伝わりやすさも大きく変わります。

 

また、デザインがいいブログや見やすいブログはユーザーの離脱率が低いと言われています。

 

なので、ブログを書く際にはデザインを駆使してユーザーが読みやすい記事を作ることで、より多くのユーザーに記事を見てもらいやすくなるわけです。

 

囲み枠は強調にも情報整理にも使える便利なツール

僕は見出しにも囲み枠を使っています。囲み枠なしに見出しを作成してしまうと、どこから話の内容が変わっているのかが分かりづらいですよね?

 

囲み枠は情報の整理や内容の強調が簡単に行えます。読者にとって「わかりやすさ」はとても重要な要素の一つです。いくら画像を挿入しても、ブログの見出しや言いたいことが強調もされてないとどうしても内容が分かりづらくなってしまいます。

 

そこで、今回紹介する囲み枠を使うことで、「どこを読んだらいいのか」「この記事を書いた人は何が言いたいのか」を的確に読者に伝えることができるようになります。

 

囲み枠って一体何?

この文章の周りに出ている囲いのことを囲み枠といいます!

 

これがあるだけで文章が目立って見えませんか?かなり見やすくなりますよね?

 

囲み枠を設置すると目立つので、目が惹かれます。それに、重要なことを書きたい場所だということが読者に伝わります。

 

はてなブログで囲み枠を設定する時はHTML編集を使う

残念ながら、囲い線を使いたい時はその都度HTMLコードを入力する必要があります。

 

markdownならそのまま記述をして、見たまま編集であればHTML編集に切り替えてコードを使用する必要があるのです。後ほど詳しい使い方はご紹介します。

 

また、これからご紹介する囲い線を使いたいという方は必ずHTMLコードをメモ帳などの保存しておきましょう!

 

では、ここから実際に囲み枠の設定方法を解説していきます!

 

使いやすい囲み枠10種類

今回ご紹介するのは使いやすい10種類の囲み枠になります。その中から自分のブログで使いたいものを選んでコードを保存してください!

  • 直線
  • 丸角
  • 点線
  • 二重線
  • 塗りつぶし
  • 丸角の塗りつぶし
  • 影付き
  • 付箋風
  • タイトル付き(タイトル塗りつぶし)
  • タイトル付き(直線)
 

直線

一番オーソドックスな囲い枠
 
上のような囲い枠です。強調をしたい時に使いやすいのが特徴です。シンプルなので汎用性が高いのでどんなブログにも向いていると言えます。
 

<div style="background:#fff; padding:10px; border:2px solid #fc4a1a;">
ここに文章を書いてください。<br>
</div>

 
ちなみに改行をしたい時には<br> を改行したい位置に書き込むことで改行することが可能です。これから紹介する囲い枠全てに対応していますので、HTML編集を行う際には参考にしてください!
 

丸角

直線の囲い枠の角が丸くなったバージョン
 
直線の囲い枠の角が丸くなったものになります。角がなくなるだけで柔らかい印象になりますね!こちらも使いやすいのでおすすめです!
 
<div style="padding: 10px; border: 2px solid #fc4a1a; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">
ここに文章を書いてください。<br>
</div>
 

点線

切り取り線のような囲み枠
 
点線で文字を囲えます。ポップな内容を取り扱うブログにおすすめです。雰囲気もかわいいですね!
 
<div style="background:#fff; padding:10px; border:2px dashed #fc4a1a;">
ここに文章を書いてください。<br>
</div>
 

二重線

二重線!
 
こちらは直線かつ、囲いが2つついているパターンになります。より強い強調に使うことができます。
 
<div style="background:#fff; padding:10px; border:3px double #fc4a1a;">
ここに文章を書いてください。<br>
</div>
 

塗りつぶし

塗りつぶしの囲い枠!
 
シンプルですが線で囲うわけでなく、全体を塗りつぶして使うことができます。箇条書きなどを使いたい時におすすめの枠です。
 
<div style="background: #fffff0; padding:10px; border:none;">
ここに文章を書いてください。<br>
</div>
 

丸角の塗りつぶし

見づらいですが、角がないバージョン!
 
先ほどの塗りつぶしの囲み枠の角がないものになります。こちらも使いやすいですね!
 
<div style="background: #fffff0; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">
ここに文章を書いてください。<br>
</div>
 

影付き

僕が頻繁に使っている囲み枠です!
 
僕が個人的にすごく気に入っている囲み枠です。シンプルですし、どこに差し込んでも違和感がないので使いやすいですね!
 
<div style="border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;"> ここに文章を書いてください。<br>  </div>
 

付箋風

僕が見出しに使用している囲い枠!
 
僕が見出しに設定している囲い枠になります。シンプルなので使いやすいです。見出しにおすすめです。
 
<div style="border: #343838 solid 1px; border-left: #343838 solid 13px; padding: 10px; background: #fffff9; ">ここに文章を書いてください。 <br>  </div>
 

タイトル付き(タイトル塗りつぶし)

タイトルを書いてください
タイトル付きで何について書いてあるのか分かり易い!
 
この囲い枠になります。「まとめ」や「何について書いているのか」を強調したい時に使いやすいです。個人的に使いやすいのでおすすめです。
 
<div style="background: #fc4a1a; border: 2px solid #fc4a1a; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;"> ここにタイトルを書いてください。</span></div><div style="border: 2px solid #fc4a1a; padding: 10px;">ここにら文章を書いてください。 <br> </div> 
 

タイトル付き(直線)

タイトルを書いてください この囲い線!問題提起に使えそうですね!

 

 僕が「こんな人におすすめ!」でよく使う囲み枠になります。問題提起やまとめに使えますが、先ほど紹介したタイトル付き(塗りつぶし)よりは目立ちづらいです。

 

<fieldset style="padding: 10px; border: 2px solid #95ccff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;"> <legend><span style="font-size: 18px; color: #95ccff; font-weight:bold;"> タイトルを書いてください。</span> </legend> ここに文章を書いてください。<br>  </fieldset> 

 

実際の使い方

使い方は至ってシンプルです!先ほどのコードをHTMLが反映される編集方法で記事に挿入するだけになります!

 

例えば、

サラリーマンは大変です
毎朝出勤をします
寝坊が許されません
と記載をする場合には、
 
<div style="padding: 10px; border: 2px solid #fc4a1a; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">サラリーマンは大変です  <br>  毎朝出勤をします<br>寝坊が許されません</div> 
となるわけですね!
 
改行をしたい位置には<br>と打ち込むことで改行をすることができます!
 
あとはこの文章をプレビューで確認すると、先ほどの囲み枠が使用された文章になります!
 

スマホで編集をする場合

スマホで編集をする場合にもこちらの囲み枠は全て使うことができます。見たまま編集の場合、設定方法がPCで行う場合と変わりますのでご注意ください!

Markdownで編集をしている場合はPCと変わりはありません!

 

手順は簡単!

  1. コードをコピーする
  2. アプリに戻り、記事作成の画面で「HTML貼り付け」をする
  3. 囲み枠に文章を打ち込む
 
たったこの3工程で囲み枠を設定することができます。かくいう僕もスマホでしかブログは書いていません!

 

「HTML貼り付け」をした場合、 

 
上のように囲み枠だけが表示がされるので、後から文章を打ち込みます。
 
実際に記事を読んだ時と同じ感覚で記事を書くことができるのでかなり編集がしやすいですよ!
 

囲み枠の色の変更方法

今紹介した囲み枠を使いたいんだけど、色が自分のブログのイメージに合わない…という方も見えられるかと思います。

 

安心してください!色は全て変更することができます!

 

<div style="padding: 10px; border: 2px solid #fc4a1a; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;"> ここに文章を書いてください。 <br>  </div>
 
上のコードに「#」から始まる数字と英字の列があるのですが、こちらで色を設定しています。HTMLコードでは、色は「#」から始まる6文字の数字、英字で表現されるので、下のページから自分のイメージに合う色を設定して使ってみてください!
 
 

まとめ

いかがでしょうか?手間はかかりますが、設定するのとしないのとでは全く見た目が変わりませんか?

 

何もデザインをしないままだと味気ないブログになってしまうので、自分色のブログを作るためにも囲み枠を有効活用してみることをオススメします!

 

かなり見やすくなるので、ぜひ試してみてください!

 

ブログランキング・にほんブログ村へにほんブログ村

 

はてなブログのデザイン関連記事