SEO・PPCライティングワードプレス行政書士のホームページ行政書士開業ブログ

文字を枠で囲んでブログやホームページを読ませやすくしよう

行政書士のブログやホームページではどうしても法的な要件やシステム中心の文章が続くことが多くなってしまいます。

しかし、実際に検索するユーザーは法律に関しては全くの素人であることがほとんどです。そのため文章だらけだと実際に読み進めても文字だらけで疲れてしまい、他のページに移ってしまうことも十分に考えられます。

あなたが書いている文章は最終的にユーザーの利益にならないと意味がありません。できれば文章主体のテキストであっても見やすくて理解しやすく、最後まで読ませるものがいいコンテンツということになります。

もちろんユーザーの利益になるということはそのままサイトロイヤリティーにも直結するので検索上位に表示されやすくなります。

 

では、実際にはどのようなコンテンツが読みやすいものなのでしょうか?いろいろテクニックはありますが、その一つが点線で囲って文章にアクセントをつけるやり方です。

今回は、この部分にフォーカスして紹介してみたいと思います。

 

アイコン チェックもちろん、文章全てを画像化して枠で囲むのもいいのですが、そうですとスマホ表示の時に見づらくなります。

これから紹介するやり方でhtmlで直接入力すればスマホの場合でも最適化されて表示されるので便利です。

 

文字を囲む手法

htmlモードで入力する

通常はビジュアルモードで入力していると思いますが、文字を枠で囲む場合はhtmlモードで入力することになります。

htmlモードで入力する方法は、各ブログやホームページのエディターによって違います。ワードプレスの場合は”テキスト”のところをクリックして表示させましょう。

canvas

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

canvas2

ここに直接打ち込むことによってパソコンに直接パソコンの言葉で命令することになります。

 

実際に打ち込んでみよう

一般的な囲み方

では、さっそく文字を囲んでみましょう。

 

前からあなたのことが好きだった!付き合ってください!

 

この言葉を囲んでみましょう。テキストモードにして、

<div style=”border-style: solid ; border-width: 1px; padding: 10px 20px 10px 20px;”> 前からあなたのことが好きだった!付き合ってください!  </div>

と打ち込んでください。すると下のように表示されます。

このサイトはコピープロテクトをしていますので、左クリックはできません。面倒でも手動で打ち込んでください。入力は、すべて小文字になります。

前からあなたのことが好きだった!付き合ってください!

 

↑このようになります。

各コードの意味

では簡単にどのような意味の命令を出しているのかを見てみましょう。

canvas3

 

border-width・・・線の太さになります。あまり太いとシャープさにかけますので1~2がいいでしょう。

padding・・・枠の中の余白になります。細かいところは省きますが、まずはこのまま使ってもらっても大丈夫でしょう。

border-style・・・囲み方のスタイルになります。様々なスタイルがあるので試してみてください。

 

solidは通常の枠、dottedは点線になりますのでここでは見比べてみましょう。

前からあなたのことが好きだった!付き合ってください!

 

前からあなたのことが好きだった!付き合ってください!

 

前からあなたのことが好きだった!付き合ってください!

 

 

このようになります。また、私の場合は枠の中にアイコンを差し込んでさらに見やすくなるようにしています↓。

 

アイコン ペン行政書士の試験勉強で条文をずっと眺めてきた場合は文字だけの文章に慣れているかもしれませんが、それは試験勉強の時まで。

あなたが開業して、これからは法律に疎い人を救済するのですから、できれば見やすく、はいってきやすい読ませ方をするべきでしょう。是非参考にしてください。


開業やウェブ集客のご相談はフォーラムへ




↓”いいね”をお願いします!↓

監修

行政書士として年間300件以上の許認可・民事案件の依頼を受ける。 士業向けのコンテンツSEOでの集客のコンサルタントも務める。
行政書士 前場亮事務所
106-0031 東京都港区赤坂9-1-7 赤坂レジデンシャル534
tel 03-6418-1075(許認可)

LINEで送る