はるのぶろぐ。

情報系大学生ハルが、ゆるゆるとIT関係についてや日々の雑記を綴ります。ちょっとだけ、あなたの役に立てる、そんなブログを目指しています。

【ブログカスタマイズ】はてなブログのサイドバーを工夫する

参加してます!ポチッとお願いします

記事名と
URLをコピー

こんにちは、情報系大学生のハル(Blog_IT_haru)です。

今回は、はてなブログのサイドバーを工夫する方法についてまとめました。

サイドバーを工夫するだけで、”それっぽく見える”ので、ぜひやってみてくださいね。

f:id:Blog_IT:20220204114903p:plain

やり方

私がやったのは、参考にしたサイトで紹介されている、左右に直線を重ねるデザインです。

これを、デザイン→デザインCSSに貼り付けるだけです!

その他のデザインは、参考にしたサイトから、確認してみてくださいね。

/* サイドバー 直線重ねる */
.hatena-module-title {
    color: #555;
    font-size: 120%;/* 文字サイズ */
    position: relative;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    padding: 0;
    margin-bottom:15px;
    align-items: center;
}
.hatena-module-title::before,
.hatena-module-title::after {
    content: '';
    flex-grow: 1;
    background-color:#555;
    height: 1px;
}
.hatena-module-title::before {
     margin-right: .5em;
}
.hatena-module-title::after {
     margin-left:.5em;
}

参考にしたサイト

blog.minimal-green.com

まとめ

いかがでしたか?

今回は、はてなブログで、サイドバーを工夫する方法についてまとめました。

この記事がいいな、と思ってくれたら、SNSなどで拡散したり、

ブックマークやコメントなどしてくれると励みになります!

下の方とサイドバーにある、サポートもお待ちしています!

更に、読者になってくれたら、お返しに私も読者になります!

また、この記事の内容についてなにかありましたら、

お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。

それでは。