以下の内容はhttps://simadzu.hatenablog.com/entry/customより取得しました。


最近のブログカスタマイズを箇条書き(随時更新)

はてなロゴ

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

CSS
html {
    overflow-y: scroll;
}
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: "/";
}

内部リンクの頭にはてなのアイコンフォント(Webフォント)を表示した。
おち研 技術部|コピペOK!外部リンクをCSSとアイコンフォントで目立たせる
NER|:before / :after の text-decoration を消す

CSS
.entry-content a[href^="https://simadzu.hatenablog.com/entry"]:before {
    font-family: blogicon;
    font-size: 16px;
    content: "\f024";
    display: inline-block;
    padding: 0 2px;
}
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);
}
  • トップページの「こちらもおすすめ」の左右に「display:flex」で水平線を表示した。

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

タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
簡潔に書きます。 タイトルを挟む1pxとかの横線を簡単に書くCSSを一生懸命考えてみたので忘備録。
CSS
.entry-content > *:first-child {
    margin-bottom: 30px;
}
CSS
.entry-content {
    font-size: 16px;
    line-height: 1.8;
}

.entry-content p {
    margin: -6px 0 24px;
}

上段落0px(line-height上余白6px+pタグの上余白-6px)
下段落30px(line-height下余白6px+pタグの下余白24px)

font-size
CSS
/* ヘッダの色を白から黒に */
#globalheader {
    background: #fff;
    mix-blend-mode: difference;
}

/* ヘッダのスケルトンスクリーンを非表示 */
#globalheader-container:before,
#globalheader-container:after {
    content: none !important;
}
CSS
.hatena-module-related-entries:has(li:only-child) {
    display: none;
}



以上の内容はhttps://simadzu.hatenablog.com/entry/customより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14