レビューブログに使ってほしいはてなブログカスタマイズその1：良い点・悪い点のリスト

2017年7月2日

当ページのリンクには広告が含まれています。

f:id:c-miya:20170702124726p:plain
私のこのブログはレビュー系ではありませんが、メインサイトの方ではスマホや周辺機器のレビューをやっています。そこで使っていたり、ほかのレビューブログでもこういうのがあるといいな、というカスタマイズを残しておきます。

まず今回の「あるといいな」は「その製品の良い点・悪い点を端的にまとめたリスト」です。

はじめに

まず、レビューとか言いつつ自分では実物を手にせずにネット上のスペックだけをコピペしているだけでそれを見て「コスパ抜群です」とか言ってるようなブログ、スペックレビューとか言って本当にスペックしか書かれていない公式サイトでわかる情報以外が無いようなブログは滅んでください。よろしくお願いします。

レビューとか言って、開封の様子を順番に写真を載せただけで記事の9割が埋まっているブログもありますが、それもかなり残念な気持ちになります。開封レビューとかで、それぞれの写真にちゃんと有用なコメントつけるならまだいいですが、本当に開封しているだけの記事は、レビュー？と首を傾げてしまいます。

要点リストの例とcss

長々とレビューするのもいいですが、記事の最初の方に全体をギュッとまとめたような、その製品の良い点悪い点が箇条書きになっていると良くないですか？読者としても要点がわかりますし、それだけを見て買おうという気にもなるかもしれません。

また、悪い点もちゃんと分かるように書いておけば、このブログは提灯記事ではなくちゃんとレビューしているな、と思ってくれるかもしれません。

では実際にどんなものなのか、例として4つほど作ってみました。cssの記述か汚いのはすいません。
（使用しているテーマ等によっては、このcssがうまく動かなかったり調整が必要なことがあります。）

その1：シンプルな黒枠

demo

性能の割に価格が安い
このクラスとは思えないほどに軽い
必要最低限の高級感
指紋が目立つ
サポートが英語のみ

html

<ul class="point1">
<li class="good">性能の割に価格が安い</li>
<li class="good">このクラスとは思えないほどに軽い</li>
<li class="good">必要最低限の高級感</li>
<li class="bad">指紋が目立つ</li>
<li class="bad">サポートが英語のみ</li>
</ul>

css

ul.point1{border:3px solid #333;margin:0 0 1em 0;padding:0 0 0 0;}
ul.point1::before{content:'この製品の特徴';display:inline-block;background:#333;color:#fff;padding:3px 6px 3px 4px;margin:0 0 0.3em 0;}
ul.point1 li{list-style-type:none;margin:0 0 0.2em 1em;padding:0 0 0 1em;}
ul.point1 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point1 li.good::before{content:'\f029';color:#4caf50;}
ul.point1 li.bad::before{content:'\f001';color:#f44336;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}

ちょっとした解説

私がメインサイトで使っているものとほぼ同じです。先頭のアイコンは、はてなブログ独自のアイコンフォントを使っています。はてなブログで使えるアイコンフォントについては以下の記事を参考にしてください。

このアイコンフォントにはもあるのですが、と一緒に使うとちょっと細いかな、と感じました。なのでをtransform:rotate(45deg);で45度回転させてにしています。このあとの例でも基本的に同じように使っています。

その2：よく見る感じのに合わせて

demo

性能の割に価格が安い
このクラスとは思えないほどに軽い
必要最低限の高級感
指紋が目立つ
サポートが英語のみ

html

<ul class="point2">
<li class="good">性能の割に価格が安い</li>
<li class="good">このクラスとは思えないほどに軽い</li>
<li class="good">必要最低限の高級感</li>
<li class="bad">指紋が目立つ</li>
<li class="bad">サポートが英語のみ</li>
</ul>

css

ul.point2{border:3px solid #df8182;padding:1.2rem 0 0 0;background: #fffbf5;margin:1.5em 0;position:relative;}
ul.point2::before{content:'この製品の特徴';position:absolute;top:calc(-0.7rem - 2px);left:2em;display:inline-block;background:#df8182;color:#fff;padding:0 0.8em 0 1.2em;font-size:0.8rem;font-weight:bold;line-height:1.4rem;border-radius:0.7rem;}
ul.point2::after{content:'\f041';font-family:blogicon;position:absolute;top:calc(-1rem - 2px);left:0.5em;display:inline-block;background:#df8182;color:#fff;font-size:1rem;line-height:2rem;width:2rem;text-align:center;border-radius:1rem;}
ul.point2 li{list-style-type:none;margin:0 0 0.2em 1em;padding:0 0 0 1em;}
ul.point2 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point2 li.good::before{content:'\f029';color:#4caf50;}
ul.point2 li.bad::before{content:'\f001';color:#f44336;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}

ちょっとした解説

はてなブログ界隈ではよく見る、シロマティさんの「おすすめ記事・関連記事のリンク」風にしたものです。

アイコンはとりあえずを使っていますが、他のものでもいいと思います。

その3：枠に色を付けてちょっと明るい感じ

demo

性能の割に価格が安い
このクラスとは思えないほどに軽い
必要最低限の高級感
指紋が目立つ
サポートが英語のみ

html

<ul class="point3">
<li class="good">性能の割に価格が安い</li>
<li class="good">このクラスとは思えないほどに軽い</li>
<li class="good">必要最低限の高級感</li>
<li class="bad">指紋が目立つ</li>
<li class="bad">サポートが英語のみ</li>
</ul>

css

ul.point3{border:3px solid #009688;background:#e0f2f1;margin:3em 0 1em 0;padding:0.5em 0 0 0;position:relative;border-radius:0 16px 0px 16px;}
ul.point3::before{content:'この製品の特徴';position:absolute;top:-2.1em;left:-3px;display:inline-block;background:#009688;color:#fff;padding:0.1em 8px 0 8px;line-height:2em;font-weight:bold;}
ul.point3 li{list-style-type:none;margin:0 1em 0.2em 1em;padding:0.2em 0 0.2em 1em;}
ul.point3 li:not(:last-of-type){border-bottom:3px dotted #00796b;}
ul.point3 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point3 li.good::before{content:'\f029';color:#4caf50;}
ul.point3 li.bad::before{content:'\f001';color:#f44336;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}

その4：ちょっとクールに

demo

性能の割に価格が安い
このクラスとは思えないほどに軽い
必要最低限の高級感
指紋が目立つ
サポートが英語のみ

html

<ul class="point4">
<li class="good">性能の割に価格が安い</li>
<li class="good">このクラスとは思えないほどに軽い</li>
<li class="good">必要最低限の高級感</li>
<li class="bad">指紋が目立つ</li>
<li class="bad">サポートが英語のみ</li>
</ul>

css

ul.point4{padding:0 0 0.2em 0;position:relative;background:rgba(0,0,10,0.4);margin:1em 1em 2em 0;}
ul.point4::before{content:'この製品の特徴';display:inline-block;background:#333;color:#fff;padding:3px 6px 3px 4px;margin:0 0 0.3em 0;position:relative;z-index:2;}
ul.point4::after{content:'';position:absolute;z-index:0;top:8px;left:8px;width:100%;height:100%;background:rgba(10,0,0,0.4);}
ul.point4 li{list-style-type:none;margin:0 0 0.2em 1em;padding:0 0 0 1em;color:#fff;position:relative;z-index:2;}
ul.point4 li::before{display:inline-block;font-family:blogicon;text-indent:-1em;}
ul.point4 li.good::before{content:'\f029';color:#29b6f6;}
ul.point4 li.bad::before{content:'\f001';color:#ef5350;transform:rotate(45deg);text-indent:0;margin:0 0.2em 0 -1em;}