web, はてなブログ

ライブドアニュースの「ざっくり言うと」みたいなのを作ってみる

f:id:c-miya:20180806210207j:plain

ライブドアニュースの記事は、アクセスするとまず「ざっくり言うと」と記事を3行でまとめたものが表示されます。これがけっこう好きだったりするので、似たようなものを作ってみました。


ライブドアニュースのざっくり言うと

こういうやつです。

f:id:c-miya:20180806210723j:plain

アイスボックス「グレープフルーツ」8月1日から販売休止 (2018年8月6日掲載) – ライブドアニュース

作ってみた

  • 単にリストの先頭にチェックマーク付けてるだけ
  • cssの疑似要素で最初の吹き出しを作成
  • まぁ難しいことはやってない

html

<div class="zakkuri">
<ul>
<li>単にリストの先頭にチェックマーク付けてるだけ</li>
<li>cssの疑似要素で最初の吹き出しを作成</li>
<li>まぁ難しいことはやってない</li>
</ul>
</div>

リストを<div class="zakkuri"></div>で囲っているだけです。リスト部分ははてな記法とかで書いてあっても<ul>になるので大丈夫だと思います。

css

.zakkuri{
position:relative;
margin:1em 0 2em;
padding:32px 0 0 0;
}
.zakkuri::before{
content:'ざっくり言うと';
position:absolute;
top:0;
left:0;
display:inline-block;
background:#51b8d6;
color:#fff;
font-size:11px;
font-weight:bold;
line-height:20px;
padding:0 10px;
height:20px;
}
.zakkuri::after{
content:'';
position:absolute;
top:20px;
left:42px;
border-top:10px solid #51b8d6;
border-left:8px solid transparent;
}
.zakkuri ul{
list-style-type:none;
margin:0 0 0 1.5em;
padding:0 0 0 0;
}
.zakkuri li{
display:flex;
align-items:baseline;
margin:0.5em 0;
}
.zakkuri li::before{
content:'\f029';
font-family:blogicon;
color:#51b8d6;
margin-right:1em;
}
.zakkuri p:empty{
display:none;
}

行頭のチェックマークははてなブログで使えるアイコンフォントを使っています。

枠ありで作ってみた

そのまま真似っ子でも仕方ないので少しだけアレンジしました。

  • 単にリストの先頭にチェックマーク付けてるだけ
  • cssの疑似要素で最初の吹き出しを作成
  • まぁ難しいことはやってない

さっきのに枠つけて色変えただけです。

html

<div class="zakkuri2">
<ul>
<li>単にリストの先頭にチェックマーク付けてるだけ</li>
<li>cssの疑似要素で最初の吹き出しを作成</li>
<li>まぁ難しいことはやってない</li>
</ul>
</div>

htmlはまったく同じです。単に区別するためにzakkuri2になってるだけです。

css

.zakkuri2{
position:relative;
margin:1em 0 2em;
padding:26px 0 0 0;
}
.zakkuri2::before{
content:'ざっくり言うと';
position:absolute;
top:0;
left:0;
display:inline-block;
background:#d66d51;
color:#fff;
font-size:11px;
font-weight:bold;
line-height:22px;
padding:0 10px;
height:22px;
border-radius:3px;
}
.zakkuri2::after{
content:'';
position:absolute;
top:22px;
left:40px;
border-top:12px solid #d66d51;
border-left:12px solid transparent;
}
.zakkuri2 ul{
list-style-type:none;
margin:0 0 0 0.5em;
padding:0.5em 1em;
border:3px solid #d66d51;
border-radius:4px;
display:inline-block;
}
.zakkuri2 li{
display:flex;
align-items:baseline;
margin:0.5em 0 0.3em 0;
}
.zakkuri2 li::before{
content:'\f029';
font-family:blogicon;
color:#d66d51;
margin-right:1em;
}
.zakkuri2 p:empty{
display:none;
}

基本的にはさっきのと同じです。

まとめ

ふと思いついたというかやってみたくなったので書いてみました。以前書いた「レビューブログに使ってほしい はてなブログカスタマイズ その1:良い点・悪い点のリスト – FOXISM」というのと基本的には同じですね。

ただ、ちょっと考えを変えて、今回のは複数行になったときにチェックマークの下にテキストが潜り込まないようにしました。flexbox使うだけでこんなに簡単に実装できるんですね。

作ったものの自分で使うかはわからないですが、まぁこういうのも可愛くていいですよね。

著者近影 Shunta MIYAGISHIMA

茨城県つくば市在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。