ハナログッド:hanalogood

冗談半分または半分冗談で生きてる人のブログ

CSSコピペでOK!はてなブログに要約機能をつける手抜きな方法

スポンサーリンク

f:id:odbc:20170224122349p:plain
はてなブログの冒頭などに「ざっくり言うと…」という感じで要約をつける方法をご紹介。CSSコピペですぐ出来る、かなり手抜きなやり方。
ブログの冒頭ってついつい
『今日、道を歩いてたら水色のパンティが落ちてて、「!!」って思って近づいたらフィレオフィッシュの包み紙でした。世知辛い世の中ですよねぇ』
と、すべらない話をパクったようなギャグを書きたくなりますよね。

でも読む方からすると
『そんなクソつまんねー話はいいからよ、このブログ、何が書いてるのさ?』
っていう、要約が知りたかったりする。特にハウツーものやニュースなど。
そんな時に使えるはてなブログ専用の要約機能を独自開発したのでご紹介。自由にコピペしてください。

はてなブログにワンタッチで要約をつけるスペシャル機能を開発!!!

スペシャル機能とか開発って言ってますが、ウソです。ごめんなさい。ただの手抜きなCSSです。ウェブ屋のプロとして長年やってる人間が書くとは思えないくらい、とにかく手抜きな仕様になっております。笑

だって、カンタンな方がいいでしょう皆さん。
※この機能はみたままモードで、なおかつ斜め文字([i]ってボタンの斜体)を過去に使ってないことが前提。もしすでに過去記事で斜体を使ってる人は文末のおまけを使ってくださいませ


【コピペでOK】はてなブログに要約をつけるCSS

以下のCSSをはてなブログのデザイン > カスタマイズ >デザインCSS に記述。

.entry-content em {
    font-style: normal;
    font-size: 0.9rem;
    background: #ffe48f;
    padding: 0.5rem;
    color: #82691e;
    display: block;
}
.entry-content em:before {
    content: "ざっくり言うと…"; /* ここは好きな文言でOK */
    color: #ff9100;
    font-size: 1.5rem;
    display: block;
}

要約用CSSの使い方

  1. 要約した文章を書く
  2. その文章に斜体【i】のスタイルをかける
  3. プレビューで確認

以上
f:id:odbc:20170224123030p:plain


要約用CSSに斜体を使う理由

ふだん、斜体【i】の機能ってあんまり使うことがない。僕の偏見だけど、ウィキペディアみたいなサイトとかでしか見る機会がないように思う。
もっというと、個人ブログで斜体をみるのはアメブロぐらい(たいていカラフル)のような気がしてる。(完全に偏見)
あと単純に斜体のフォルムが好きじゃない。なのでこのCSSでも斜体にならないようにしてる。

そこで、この斜体タグに要約CSSをつけようというわけ。これだとHTMLでの編集が不要なので、スマホから編集しててもサクッと要約をつけられる
CSS自体もかなりカンタンなものなので、余白やマージン、背景色とか文字色とかそのへんは自由に変えて使って下さい。

おまけ:すでに斜体を使ってる人用のHTMLとCSS

斜体好きなあなたはemタグでの要約はできないので、任意のclassを設定したdivで囲めばOK。(ここでは zakkuri といういい加減なclass名)
HTML編集画面で

<div class="zakkuri">
要約したい文章をここにかくかくかく
</div>

そしてCSSは

.entry-content .zakkuri {
    font-style: normal;
    font-size: 0.9rem;
    background: #ffe48f;
    padding: 0.5rem;
    color: #82691e;
}
.entry-content .zakkuri:before {
    content: "ざっくり言うと…"; /* ここは好きな文言でOK */
    color: #ff9100;
    font-size: 1.5rem;
    display: block;
}

これでOK。毎回HTMLモードでの編集という一手間が必要


斜体を使ってない人でも
『圧力鍋で作る料理は愛情がたりない手抜き料理だからダメ』
なんて言っちゃう人はこのCSSで一手間かけると、ブログへの愛情が深まる。

以上、お役に立ちそうならシェアしてもらってもいいし、ウェブマーケター・ブロガー用Tシャツを買ってくれてもOKです。
www.ttrinity.jp
www.ttrinity.jp


【お知らせ】KAI YOUでコラムニストデビューしました(寄稿が採用されただけ)
HIPHOPだから? ロックだから? ミーハーくらいでちょうどいい、というお話 - KAI-YOU.net



 

ちなみに、はてなブログの【みたままモード】だと斜体はemタグになるけど、もし今後仕様が変わってiタグとかになったら、CSSの修正(emをiに書き換え)が必要です。