はてなブログの備忘録

このブログを書くにあたって設定変更したことをメモする。

デザインCSS(NEW)

※デフォルトの行間が広すぎるので設定した。
※検索したwebで見つけた記述「.entry-content p {」ではうまくいかず、さらに探した結果「.entry .entry-content p {」とした。
※h1~h6要素のマージンも気に入らなかったのでカスタマイズした。(2023-3-26追記)
※pre要素のマージンも気に入らなかったのでカスタマイズした。(2023-4-2追記)

    /* p要素の行間を狭める */
    .entry .entry-content p {
        margin: 3px 0;
    }
    /* h1~h6要素行間を狭める */
    .entry .entry-inner h1 {
        margin: 12px 0px 6px 0px;
    }
    .entry .entry-inner h2 {
        margin: 12px 0px 6px 0px;
    }
    .entry .entry-inner h3 {
        margin: 12px 0px 6px 0px;
    }
    .entry .entry-inner h4 {
        margin: 12px 0px 6px 0px;
    }
    .entry .entry-inner h5 {
        margin: 12px 0px 6px 0px;
    }
    .entry .entry-inner h6 {
        margin: 12px 0px 6px 0px;
    }
    /* pre要素の行間を狭める */
    .entry .entry-content pre {
        margin: 3px 0;
    }

デザインCSS(OLD)

※マークダウン記法に移行する前はpre要素について設定していました。

    /* 行間を狭める */
    .entry .entry-content p {
        margin: 3px 0;
    }
    /* コード貼り付けの1行目を目立たなくする */
    .entry .entry-inner pre {
        padding-top: 0px;
        padding-bottom: 24px; /* codeの1行に合わせている */
    }

コードブロック

markdown記法で フェンスコード・ブロック を使うとシンタックスハイライトしてくれたので今後はmarkdown記法を推していく。

    ```javascript
        // 内容
    ```

リンク(markdown

※プレビューでは表示されないが、ブログを公開したら動作する様子です。
※ただし「 target="_blank" rel="noopener"」が書けないので、元のwebページの表示をやめてリンク先に遷移します。

    リンク先は [ここ](https://hatenablog.com/) です。

実際のリンク→「リンク先は ここ です。」

リンク(html)

※プレビューでも動作する様子です。
※「 target="_blank" rel="noopener"」を書きたいのでmarkdown記法でもこちらを推していきます。

    リンク先は <a href="https://hatenablog.com/" target="_blank" rel="noopener">ここ</a> です。

実際のリンク→「リンク先は ここ です。」