ブラックリストのキリンです

延滞、自己破産、債務整理でブラックになった人を応援するブログ

 メニュー

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

f:id:oshaberiitboy:20180210020208p:plain

 

「囲み枠とか引用符のデザイン、もっとオシャレにしたいんだよなー...」

 

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

 

たとえばみなさんが「文章で特に強調したい箇所」ってどうしてますか?太字にしたり色を変えたりしてその箇所だけ目立たせるということが多いのではないでしょうか。

 

もしろん短文であれば太字や色を変えるのも良いです。でももし長文なら...

 

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

 

そして、引用するときもちょっとした工夫でオシャレに見えますよ。

 

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

 

とは言っても、私自身がカスタマイズを紹介するのではありません。偉大なる先人達の記事をリンクしているので参考にしたい方はどうぞ。

 

なおタイトル通り、リンク記事内のカスタマイズ方法は全てコピペが可能です。

 

 

 

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

 

まずは囲み枠デザインのカスタマイズです。ここでは2つの記事を紹介します。

 

mudaide.hatenablog.com

 

mudaide.hatenablog.com

 

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

 

記事で紹介しているコードは全て、記事を書くときには「HTML編集」モードにコピペしてくださいね。「編集 見たまま」モードに貼り付けると、ただただコードが書かれているだけになってしまいます(苦笑)

 

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

 

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

 

基本編である程度イメージを掴めた人は、こちらの記事も参考にしてください。

 

saruwakakun.com

 

上で紹介した基本編の派生版のような内容。リンク先はお世話になってる人も多いであろうサルワカさんです。

 

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

 

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

 

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

 

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

 

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

 

では最後に、引用符をオシャレにするデザイン記事です。

 

saruwakakun.com

 

上の応用編と同じくサルワカさんの「引用符デザイン」のカスタマイズ記事。 

 

記事内は囲み枠と同じく引用デザインのサンプルが豊富。大きい引用符のフォントが1つあるだけで、引用箇所がかなり引き締まって見えます。

 

はてなブログで最初に設定されているの引用符はぶっちゃけかなり味気ないデザインです。変更をオススメします。

 

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

 

おわりに

 

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

 

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

 

私も引用符のデザインについては、なかなかいいカスタマイズ記事が見つからず...。これらの記事のおかげで、非常に助かりました!

 

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

 

本日は以上です!