un

un

はてなブログの使い方をメインに書いています

はてなブログでコードをコンパクトに表示する方法

【スポンサーリンク】

f:id:un_machi:20200227194043p:plain

ブログに前回初めてコードを載せたのですが、
長いコードを記事に載せると、記事中のスペースを取りすぎてしまい、記事が読みにくくなってしまいました。
そこで、コードのフォントサイズ・行間を調整し、コードをコンパクトに表示しました。

コードのフォントサイズ・行間を調整する

下記CSSコードを指定

.entry-content pre.code {
    font-size: 14px;
    line-height: 1;
    }

記事内に複数のコードを表示していて、一部のコードのみコンパクトに表示したい場合は、そのコードを<div class="〇〇"></div>で囲み、セレクタ部.entry-content後にdivタグのクラス名を追加。

CSSコードの意味

.entry-content pre.code
はてなブログ・Minimalismの場合)
記事コンテンツ部分のコードに対しての指定

font-size: 〇px
文字の大きさを変更

line-height: 1
行間を消す

CSSコード有無の比較

CSSコード指定無しの表示
<p>CSSコードを指定しない場合</p>
<p>文字が大きい</p>
<p>行間が広い</p>
<p>長いコードだと記事が読みにくい</p>
CSSコード指定有りの表示

<p>CSSコードを指定した場合</p>
<p>文字が小さくなる</p>
<p>行間が無くなる</p>
<p>コードがコンパクトになり記事が読みやすい</p>

コードがコンパクトになりました!
これで長いコードでも記事がみやすくなりました。(^^)