はてなブログのカスタマイズ！コピペだけで簡単。定型文を利用した枠線・マーカー・囲みのやり方 -

ブログのカスタマイズは難しい

このブログは、はてなブログproで作成しているのですが、ＨＴＭＬやデザインＣＳＳにあまり詳しくなくて、かわいいアレンジやカスタマイズに憧れて色々なhtmlやデザインcssを調べてチャレンジするのですが、なかなかうまくでできず挫折することも多いです（笑）できればコピペだけで、難しい編集なしに記事を作成したいですよね。

ブログで収益をあげるためにはカスタマイズは大切

ブログを書いているほとんどの人は収益を上げる目的もありますよね。そのためには見やすい記事だったり、アクセス数が伸びるようにカスタマイズしないといけません。

SEO対策はもちろんのこと、ページを見た時に読者が見やすいように、さっと流したときに目に留まるようにしないと、リピートして記事を読みに来てもらえません。そのためにも大切なのがブログのカスタマイズです。

簡単に「見たまま編集」だけでカスタマイズ

そこで、難しい編集はなく、デザインcssもいじらずに、コピペだけでできるカスタマイズを集めましたので、ブログデザインに困っている人は参考にしてみてください。

文字にマーカーをひく

上の文章の中にも登場していますが、文章にマーカーをひくのはやってみたいカスタマイズですよね。通常はhtmlやcssをいじって太字および斜線選択するとマーカーがひかれるように設定することができるのですが、そうなるとすべての太字にマーカーが引かれてしまいマーカーだらけにったり、太字にしたくても太字にならなくなってしまう、なんてこともあります。しかも、googleは「太字を重要な言葉」と認識しますので、SEO対策やアクセス数アップを狙う場合、マーカーと太字を使い分ける必要があります。

【マーカーのコピペ定型】

<span style="background: linear-gradient(transparent 60%, #ffff00 60%);">ここに書きたい文字</span>

「ここに書きたい文字」の部分をお好きな文字に変えて下さい。すると黄色のマーカーがひけます。ちなみに#ffff00が表すのは色です。この場合は黄色の色コードになっています。色コードを変更するとお好みの色でマーカーがひけます。transparentのあとに続く60％の部分は、マーカーの太さです。わかりやすくならべてみますね。

10%→わたりん、30%→わたりん　、60%→わたりん　、90%→わたりん　

このように、数字が大きいほど細いマーカーになります。

文字を囲む

文字を囲むやり方です。

ポイント

こんなかんじで見出しをつけて文字を囲めます。

上と同じ囲み線のコピペ定型文

タイトルの部分と、内容の部分をご自分のブログに合わせて変更してください。先ほどの説明とおなじように、#ffffffの部分は色コードです。

ブログ記事にほんの少し囲み線をつけるだけで、見栄えがグッとよくなります。是非活用してください。

次は以下のような囲みです。

ここがポイント！

見やすいブログには囲みが欠かせない！

このような囲み線も良くみかけますよね。「合わせて読みたい！」とか「ポイント！」とかで良く利用されてるイメージです。

コピペ定型文

コピペすると、この見本とと同じ色で作成されます。自分の好みにしたい場合は色コードを変更して下さいね。

↓アレンジするとこんな感じです！↓

合わせて読みたい！

ポイ活より断然効率良い！セルフバックアフェリエイトのやり方とは

watarinblog.hatenablog.com

こういった感じでよく見かけるような囲みが作成できますよ。

簡単にコピペだけでブログカスタマイズ

このように簡単にコピペするだけで、見やすいブログや簡単カスタマイズができます。色コードなども検索すると簡単に出てきますが、ブログの統一感をだすためにもあまり多色使いにならないようにしましょう。紹介したコピペ定型文のまま使っていただいて大丈夫ですので、慣れるためにもどんどん使ってください。htmlをいじるのは難しいけど、コピペだけでできるのでまずはやってみましょう！

また別の囲み線についても紹介したいと思います。

ブログを簡単にカスタマイズして、自分好みのブログを気軽に作成しちゃいましょう！