効率165センチメートル

ちいさな体で効率的に生きていく

【コピペOK】はてなブログで引用マークを非表示にする【カスタマイズ】

 

f:id:k07_20:20191019094213j:plain

 今日はカスタマイズ記事をお届けします。

 

はてなブログで引用の「”」マークを非表示にするカスタマイズになります。

 

引用は記事を書く画面のツールバーに表示されているこれです。

使っている方も多いのではないでしょうか?

 

f:id:k07_20:20191019085515p:plain

 

そしてこれを非表示にします。

 

f:id:k07_20:20191019085823p:plain

なぜ非表示にするかというと「”」の引用マークを無くすと、

引用だけでなく、大事な部分を強調させることが簡単にできるようになるからです。

 

今回もコピペで簡単にできます。みなさんもぜひやってみてください。

 

カスタマイズ

さっそくカスタマイズしていきます。

コード【コピペOK】

コードは以下の通り。

 

コピペOKです。

 

.entry-content blockquote:before {
   display:none;
}
.entry-content blockquote:after {
   display:none;
}

 

カスタマイズ場所

上のコードを下の場所に貼り付けてください。

 

ダッシュボード→デザイン→スパナマーク→デザインCSS

 

ダッシュボード→デザイン

f:id:k07_20:20191019092610p:plain

 

 カスタマイズ(スパナマーク)

f:id:k07_20:20191005180656p:plain

 

デザインCSS

f:id:k07_20:20191019092600p:plain

この赤枠にコードをペーストします。

カスタマイズ結果

カスタマイズ結果はこんな感じ。

 

「”」が消えて、すっきりしました。

文章のアクセントをつけるときにも簡単に使用できておすすめです。

 

引用が2wayになりました。

Before

f:id:k07_20:20191019090039p:plain

After

f:id:k07_20:20191019090043p:plain

使用しているテーマ

当ブログでは、テーマ【UnderShirt】を使用しています。

blog.hatena.ne.jp

コード解説

はてなブログでは、記事のclassは「.entry-content blockquote」となっています。

 

.entry-content blockquote:beforが右上の引用マークになります。

.entry-content blockquote:afterが左下の引用マークになります。

 

僕の使用しているテーマでは、左下の引用マークはデフォルトで非表示ですが、

ついている方も多いと思います。

 

念のため両方のコードを書いてください。

引用マークを非表示にする

display:none;

 

このコードが非表示を表します。

アクセントのある記事を

以上が引用マークを非表示にするカスタマイズです。

 

一工夫でアクセントが加えられて、なおかつ効率的にブログが書けます。

 

読者ファーストで見やすい記事を書きたいですね。

その他のカスタマイズ

その他にもカスタマイズ記事ありますので、よかったら参考にしてください。

 はてなスター機能を残したまま非表示にする

www.165-cm.com

記事一覧のカスタマイズ

 記事一覧を大きなカード型へ

www.165-cm.com

 

記事を枠線で囲む

www.165-cm.com

 

 選択した記事を透けさせるカスタマイズ

www.165-cm.com

 サイドバーをカスタマイズ

サイドバーを見やすくする

www.165-cm.com