ブログのスマホ画面での表示形式の理想として、記事一覧の形式と文字の大きさをYahooと同じようにしたいと思っています。
Yahooの記事一覧形式
こんな風に、写真とタイトルだけにしたい場合、デザインストアからデザインテーマ「ミニマリスト」を選択すると、記事一覧が写真と記事タイトルのみになりました。
はてなブログのデザインを設定し、スマホ版の文字を大きくする方法 - ウーパールーパーの智慧
変更前のブログのスマホ版、記事一覧ページ
記事一覧の形式は写真とタイトルのみになっていますが、
記事タイトルの文字の大きさが小さいです。どうにかしてこれを大きくしたいのですが。
元々のデザインCSS
デザイン＞カスタマイズ＞デザインCSS
の部分には以下のコードを張っています。↓
（これはミニマリストを選択し、本文の文字を大きくし、目次と見出しの設定を行ったものです。）
/* <system section="theme" selected="8599973812270629022"> */
@import "https://blog.hatena.ne.jp/-/theme/8599973812270629022.css";
/* </system> */
/* 文字の大きさ */
.entry-content {
font-size:18px!important;
line-height:1.8em;
}
/*目次*/
ul.table-of-contents {
font-size: 18px !important;
border: 1px solid #c0c0c0 !important;
color: #999 !important;
display: inline-block;
}
ul.table-of-contents a:after {
display: none !important;
}
ul.table-of-contents li a,
ul.table-of-contents li a:visited {
color: #4169e1 !important;
text-decoration: none; /* リンクの下線あり・なし */
}
ul.table-of-contents li a:hover {
color: #000000 !important; /* リンクにマウスを重ねた時の色 */
}
ul.table-of-contents li {
margin: 5px 0 10px 6px !important;
line-height: 1.5;
padding: 0;
list-style-type: none !important;
}
ul.table-of-contents li:before {
font-family: blogicon;
content: "\f008";
position: absolute;
left: 1.2em;
color: #5a6dba;
}
.entry-content h4 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}
記事一覧のタイトル文字を大きくするコード
上記のCSSの下にこれを加えたら大きくなりました！↓
/* 記事タイトル */
.entry-title a{
font-size: 19px!important;
line-height: 1.4important; /* 行の高さ */
}
変更後の記事一覧ページ
記事一覧の記事タイトルを太字にしたい場合
先ほどのコードの代わりにこちらを貼ります。↓
/* 記事タイトル */
.entry-title a{
font-size: 19px!important;
line-height: 1.4important; /* 行の高さ */
font-weight: bold;
}
結果こうなりました。↓
理想に近づいたと思います！
しかし、記事下（スマホ画面）に出てくるカテゴリー一覧とか注目記事の一覧の文字の大きさは小さいままでした。これはどうしたら大きくなるのでしょうか？
別日記に追記しました↓
はてなブログで注目記事一覧の記事タイトルのフォントを大きくする方法 - ウーパールーパーの智慧
