最近のブログカスタマイズを箇条書き

はてなブログ

hatenaロゴ

自分が見たくなるように、ブログを書きたくなるように、モチベーションを高めるため、ブログをカスタマイズしています。記事にするほどでもないカスタマイズの小ネタを過去の分も含めてメモとして箇条書きしてあります。

  • イラストACのあまどさんのフリー素材（パンダ）をプロフィールやブログアイコン、上に戻るボタンに使用した。
    ちなみに、なぜこのブログのキャラをパンダにしたかというと、「ユル休み」がほのぼのしててよかったのと、ブログの色をモノトーン（白と黒）にしているからです。
CSS
.entry-content ul {
    list-style-type: none;
}

.entry-content li:before {
    font-family: blogicon;
    content: "\f024\00a0";
    vertical-align: -1px;
}

CSS
.entry-content li {
    padding-left: 1.2em;
    text-indent: -1.2em;
}

CSS
.hyphen {
    display: none;
}

.date-year:after,
.date-month:after {
    content: "/";
}

CSS
.entry-content a[href^="https://simadzu.hatenablog.com/entry"]:before {
    font-family: blogicon;
    font-size: 16px;
    content: "\f024\00a0";
}

HTML
<div class="video">
    <iframe src="動画のURL" frameborder="0"></iframe>
</div>

CSS
.video {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video iframe {
    width: 100% !important;
    height: 100% !important;
}

CSS
body:before {
    position: absolute;
    z-index: -1;
    content: url(画像のURL) url(画像のURL);
}
  • 「参考になるブログ・Webサイト」の左右に「display:flex」で水平線を表示した。

参考になるブログ・Webサイト

タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
簡潔に書きます。 タイトルを挟む1pxとかの横線を簡単に書くCSSを一生懸命考えてみたので忘備録。
のんびりデザインしているような。
CSS
body {
    background: repeating-linear-gradient(0deg, #ccc, #ccc 1px, #fff 0, #fff 29px) fixed;
}

CSS
.page-archive .archive-entries .entry-description {
    text-align: justify;
    word-break: break-all;
}

CSS
.entry-content > *:first-child {
    margin: 0;
}