うしごや ~さとり男子の考察牧場~

現実世界でのストレスを糧に、好き放題白黒ハッキリした映画レビューをしていきます(笑)感想&妄想寄りの考察(゜-゜)?他雑記!

うしごや ~さとり男子の考察牧場~

【はてなブログ】カスタマイズ!ボックス&引用デザインを簡単コピペ!

ボックスカスタマイズ

 

こんばんは、うしぞうです!今回は、はてなブログにおいての記事内のボックス(囲い枠)引用デザインカスタマイズしていきます

 

どういうのかってゆーと

 

合わせて読みたい

こん

 

参考

な感

 

Point

じで

 

す!

 

ね!

前も簡単にちょこっとまとめたけど、今回はより詳しめにいきます(*´∀`*)

 

合わせて読みたい

 

※参考サイト様を頼りに、私なりに改変したものを紹介していきます。

 

 

記事内のボックス(合わせて読みたい)をコピペ!

 

参考

 

デザインはいつもの通りサルワカさんより拝借m(__)m

 

まず記事内のボックスとはなんのこっちゃと言いますと、色付き(モノクロももちろん可)の目立つ囲い枠で記事内のコンテンツを目立たせようって代物です。

 

普通に文字を囲んでもいいし、私のブログではリンクカードを囲って、より目立つように表示してます(^^)ホントに目立ってるのかは知らない

 

/* 合わせて */.awasete {position: relative;margin: 2em 0;
padding: 0.5em 1em;border: solid 3px #f18e7c;border-radius: 8px;}

.awasete .awasete-title {position: absolute;
display: inline-block;top: -13px;left: 10px;padding: 0 9px;line-height: 1;
font-size: 19px;background: #fff;color: #ea553a;font-weight: bold;}

.awasete p {margin: 0; padding: 0;}
.awasete-title:before{font-family: blogicon;content: "\f727";}

 

こちらは私が実際にデザインCSSに仕込んでいるやーつです。

サルワカさんのに赤字部分を付け加えました。

 

赤字部分はなんぞやと言いますと、はてなブログ公式のアイコンですね。

 

『合わせて読みたい』のボックスには、内部リンクを貼り付けるイメージで画鋲のアイコンを表示してます。

 

<div class="awasete"><span class="awasete-title"> 合わせて読みたい</span>
<p>

本文

</p></div>

 

んで記事内のHTML編集で、囲みたい部分をコイツで囲えば適用されます

 

『参考』のボックスはマイナーチェンジで、外部リンク用です。

色を黒&グレーっぽくして虫眼鏡アイコンに変えています(*´∀`*)

 

Pointボックス

 

CSS

 

/* ポイント */.point {position: relative; margin: 2em 0;padding: 0.5em 1em;border: solid 3px #8ad1ac;}

.point .box-title {position: absolute; display: inline-block;top: -27px;left: -3px;padding: 0 9px; height: 25px;line-height: 25px;font-size: 17px;background: #58BE89; color: #ffffff;font-weight: bold;border-radius: 5px 5px 0 0;}

.point p {margin: 0; padding: 0;}.point-title:before{font-family: blogicon;content: "\f01d";}

 

Point

ちょっと大事な部分の整理用に『ポイント』ボックスも別作成

 

<div class="point"><span class="box-title"><span class="point-title"> Point</span></span><p><span style="text-decoration: underline gray;">

本文

</span></p></div>

 

コイツで囲めばOK。

ちなみに赤字部分はグレーの下線のことなので、いらなければ省いても問題なし。

 

引用デザインのコピペカスタマイズ!

 

引用デザインについては、ぶっちゃけはてなブログのデフォルトでもそう悪くはないですよね(゜-゜)

 

ただちょーっと味気ない感じはするので、上の縁に線を付けて背景色を変えてみました『.entry-content blockquote』がはてなブログの引用ボックスを示します。

 

.entry-content blockquote {background: #〇〇〇〇〇〇;
border-top: solid 3px #△△△△△△;}

 

〇部分で引用ボックス内の背景色、△部分は上線の色を指定できます。

どちらも#からのカラーコードを記入orコピペしてください(*´∀`*)

 

グラデーションカラーのサンプル

 

webgradients.com

 

ということで当ブログの引用デザインはこんな感じですが、単色でもつまらないので引用ボックスの背景色はグラデーションに設定しました

 

いつもの#〇〇〇〇〇〇の6ケタ、もしくは短縮系3ケタの数字部分を、リンク先のグラデーションコードに置き換えればお手軽グラデザインに!

 

当然サンプルの種類は限られるので、自分で配色とか比率考えて作ってもいいけど、グラデーションをかなり楽して設定できるのでこちらのサイトはオススメです(^^)

 

まとめ:ボックス&引用デザインもオシャレに!

 

記事内のボックス&引用、枠っぽいジャンルのカスタマイズでした

内部リンクを目を引くデザインとか配色にしておけばブログ内の回遊率も上がるかも?

 

合わせて読みたい

 

※デコまとめ。はてなブログの公式アイコンについてはこちらに記述してます。

 

ありがとうございました!

 

うしごやよろしく!

 

にほんブログ村 にほんブログ村へ