コピペOK!ブログの囲み枠・引用符の参考になるCSSデザイン記事4選

f:id:oshaberiitboy:20180210020208p:plain

 

今回はてなブログで記事を書くときに使える、「囲み枠」や「引用符」のカスタマイズ方法を紹介します!

 

例えばあなたが「文章で特に強調したい箇所」って、どうしてます?

 

うーん、太字にしたり色を変えて強調してるかな・・・

 

短文であれば太字や色を変えるのも良いですけど、もし長文なら

 

ほら、こんな感じで枠で囲った方が、より引き締まった印象になりませんか?長文を強調する場合は、囲み枠を使う方が効果的です!

 

そして、

 

引用も同様に、はてなブログのデフォルトの引用機能ではなく、ちょっとデザインをカスタマイズするだけでこれだけ見栄えが良くなります。 

 

とは言っても、僕自身がカスタマイズを紹介するのではありません。

偉大なる先人達の記事をリンクしているので、参考にしたい方はどうぞ!

 

リンク記事内のカスタマイズ方法は、全てコピペが可能です! 

 

 

 

 囲み枠のデザインをカスタマイズ(基本編)

 

mudaide.hatenablog.com

 

mudaide.hatenablog.com

 

前編と後編に分けて、囲み枠デザインについての基本的な内容が説明されてます。

 

記事で紹介しているコードは全て、記事を書くときに「HTML編集」欄にコピペしてくださいね。

 

「HTMLってよく聞くけど、あんまり分かって無いんだよなー。」という人は、この記事から何となくイメージを掴んで行きましょう。

 

 囲み枠のデザインをカスタマイズ(応用編)

 

saruwakakun.com

 

上で紹介した基本編の、派生版のような内容。

 

可愛いデザインからシュッとしたデザインのものまで、ブログのコンセプトに合わせて多種多様な囲み枠が用意されてます。

 

こちらの記事内コードは、「HTML編集」欄と「デザインCSS」欄のそれぞれにコピペする必要があります。

 

設定まではちょっとだけ手間がかかるんですけど、その分使えるデザインがグッと広がるので非常にオススメです!

 

囲み枠の線は、細い方がスッキリした印象になるよ!

 

 引用符のデザインをカスタマイズ

 

saruwakakun.com

 

上の応用編と同じブロガーさんの、「引用符デザイン」のカスタマイズ記事。 

 

記事内は囲み枠と同じく、引用デザインのサンプルが豊富。

 

大きい引用符のフォントが1つあるだけで、引用箇所がかなり引き締まって見えます。

 

はてなブログで最初に設定されているのデザインから、変更をオススメします。

 

1度デザインを設定しとけば、引用ボタンを押すだけで何度でもその引用デザインが使えるよ!

 

おわりに

 

以上、囲み枠と引用デザインのカスタマイズ記事を紹介しました。

 

淡々と文章を書く記事もいいですが、こうしたデザインは使いどころ次第で記事の印象をカンタンに上げることができます。

 

私も引用符のデザインについては、なかなかカスタマイズの記事が見つからず・・・。

 

これらの記事のおかげで、非常に助かりました!

 

コピペの色や太さは自分で変更ができるので、みなさんも色々試してください。

 

本日は、以上です!