【2020年】無料版はてなブログのスマホ画面で「目次・見出し・リスト・商品紹介」のCSSを編集する方法

ども！ハイソブロガーのまとんです。

はてなブログは無料版のままでは、スマホ画面のCSSを編集することができません。

しかし、とある工夫をすれば、スマホ画面にCSSを適用することができます。レスポンシブルデザインは使いません。

今回は「目次・見出し・リスト・商品紹介」にCSSを適用する方法をご紹介します。

TL; DR

以下のような感じになります。

TL; DR
大見出し
- 中見出し
  - 小見出し
スマホ画面にCSSを適用する方法
CSSの中身
CSSの中身について解説
ぜひ参考にしてください！

枠を点線で囲ってます。

大見出し

吹き出しっぽい感じにしました。

中見出し

左端の線と、下線をつけました。

小見出し

下線をつけました。

リスト
リスト
リスト

リストの輪郭を囲ってみました。

数字リスト
数字リスト
数字リスト

リストの輪郭を囲ってみました。

Amazonの商品紹介（はてなブログのデフォルト機能で貼り付け）

鬼滅の刃 23 (ジャンプコミックスDIGITAL)

作者:吾峠呼世晴
発売日: 2020/12/04
メディア: Kindle版

デザインを崩さずに、デフォルトのまま表示されるようにしました（詳細は後述）。

スマホ画面にCSSを適用する方法

ポイントは二つです。

デザインのPC画面設定の「記事上」にHTML/CSSを記載する
デザインのスマホ画面設定で「PCと同じHTMLを表示する」にチェックを入れる

具体的には以下のようにします。

f:id:highso:20201218174909p:plain

PC画面の「記事上」にCSSを記載します。

f:id:highso:20201218174922p:plain

スマホ画面では「PCと同じHTMLを表示」にチェックを入れます。

無料版では本来、上の画像にもあるように、スマホ画面にHTMLを設定することはできません。しかし上記の方法なら「CSSをスマホ画面に適用する」ことができます。

ちょっとした裏技ですね。

このやり方については以下の記事で詳細に解説しました。

highso.hatenablog.com

この記事は2年前に書いたものですが、今でもアクセス数を集めてくれているようです。

CSSの中身

上記の「記事上」のところに、以下のCSSをコピーしてみてください。

するとこのブログと同じデザインになると思います。

<style type="text/css">
.entry-content p {
font-size: 16px;
}

.entry-content h3 {
position: relative;
padding: 0.6em;
margin-bottom: 18px;
background: #e0edff;
}
.entry-content h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}

.entry-content h4 {
padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 8px #e0edff;
border-bottom: solid 3px #e0edff;
}

.entry-content h5 {
border-bottom: solid 3px #e0edff;
font-size: 16px;
}

.entry-content ul{
background: #fcfcfc;
padding: 0.5em 0.5em 0.5em 2em;
margin-left: 0;
border: solid 3px #e0edff;
}

.entry-content ol {
background: #fcfcfc;
padding: 0.5em 0.5em 0.5em 2em;
margin-left: 0;
border: solid 3px #e0edff;
}

.entry-content ul li {
line-height: 1.5;
padding: 0.5em 0;
font-size: 16px;
}

.entry-content ol li {
line-height: 1.5;
padding: 0.5em 0;
font-size: 16px;
}

.itunes-embed-info ul{
background: initial;
padding: initial;
margin-left: initial;
border: initial;
}

.itunes-embed-info ol li {
margin-left: initial;
}

.itunes-embed-info ul li, ol li {
line-height: initial;
padding: initial;
}

.entry-content ol li {
margin-left: initial;
}

.hatena-asin-detail ul, ol {
background: #ffffff;
padding: 0;
border: solid 0px #e0edff;
}

ul.table-of-contents {
border: 2px dashed #e0edff;
padding: 1em 1.5em 1em 2.25em !important;
display: inline-block;
}
ul.table-of-contents:before {
content: "目次";
display: inline-block;
margin: 0.2em 0em 1em;
padding: 0em;
font-weight: bold;
}
ul.table-of-contents li {
margin: 2px 0 2px 0;
line-height: 1;
padding: 0;
}
ul.table-of-contents ul li,
ul.table-of-contents li ul {
border: 0px;
font-size: 16px;
}
</style>