アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】記事内の見出しを見やすくする

こんにちは。

今日は嬉しいニュースが!

じゃじゃん!

PV100突破

アゴ乗せ日記の今月のPVは100を突破しました!

ガッツポーズ

誰かに見てもらえたということが本当に嬉しいし、ありがとうございます!
これからもテキトーに頑張ります!

おっしゃ、今日は記事内の見出し部分を見やすくしていくぜ!

現状どうなのか

見出しbefore

文字の大きさと先頭に*をつけて強調してますね。 ですが、流し読みしている時など境界がわかりにくい感じがありました。

修正していく

この見出しは <h2>タグで表示されているので、.entry-content内のh2にCSSを当てます。

.entry-content {

   /* 省略 */

    h2 {
        font-size: 1.4rem;
        /* ここから追記 */
        position: relative;
        padding: 0.6em;
        background: #555;
        color: #FFF;
        border-radius: 5px;
        margin-bottom: 2rem;
        &::before {
            content: '';
        }
        &::after {
            position: absolute;
            content: '';
            top: 100%;
            left: 30px;
            border: 15px solid transparent;
            border-top: 15px solid #555;
            width: 0;
            height: 0;
        }
        /* ここまで */
        @media #{$mq-md} {
            font-size: 1.5rem;
        }
    }

結果

before

見出しbefore

after

見出しafter


ええんとちゃいまっか?

ちなみに最近知ったけど、
記事ページのデザイン確認はデザイン>カスタマイズ>記事>記事ページをプレビューからできるんやね。

スマホページも見てみる

デザイン>スマートフォン>記事>記事ページをプレビュー

スマートフォンbefore

全然アカンやんけ

なぜや

スマートフォンのスタイルはPC用と違う

スマートフォンページのCSSはPC用とは別みたいだ。
アゴのサイトはまだレスポンシブ対応できていない。

しょうがない、記事上にスタイルを追記しよう。

こーゆーのってあんまりカッコ良くはないけど、初めから俺たちはカッコ良くなんてないしな。

スマートフォンも修正

デザイン>スマートフォン>記事>記事上に以下を追加

<style>
.entry-content h2 {
    font-size: 1.2rem;
    /* ここから追記 */
    position: relative;
    padding: 0.6em;
    background: #555;
    color: #FFF;
    border-radius: 5px;
    margin-bottom: 2rem;
}
.entry-content h2:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #555;
    width: 0;
    height: 0;
}
</style>

スマートフォン結果

before

スマートフォンbefore

after

スマートフォンafter

ええやんけ

おわり

やることまだまだあるな

以上!

スポンサーリンク