ウーパールーパーの智慧

ウーパールーパー、子供、学習、生活お役立ち情報など

Hatenaブログのスマホ版の記事一覧ページを記事タイトルと画像のみにし、記事タイトルの文字を大きくする方法

スマホ版の理想としては、記事一覧の形式と文字の大きさをYahooと同じようにしたいと思っています。スマホ画面での表示形式です。

f:id:MisaTamaki:20190319010419j:plain

Yahooの記事一覧形式

f:id:MisaTamaki:20190314225806p:plain

 

こんな風に、写真とタイトルだけにしたい場合、デザインストアからデザインテーマ「ミニマリスト」を選択すると、記事一覧が写真と記事タイトルのみになりました。

 

はてなブログのデザインを設定し、スマホ版の文字を大きくする方法 - ウーパールーパーの智慧

 

変更前のブログのスマホ版、記事一覧ページ

f:id:MisaTamaki:20190316212558p:plain

 記事一覧の形式は写真とタイトルのみになっていますが、記事タイトルの文字の大きさが小さいです。どうにかしてこれを大きくしたいのですが。

  

元々のデザイン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; /* 行の高さ */
}
 

変更後の記事一覧ページ

f:id:MisaTamaki:20190316214516p:plain

記事一覧の記事タイトルを太字にしたい場合


先ほどのコードの代わりにこちらを貼ります。↓

 

 

/* 記事タイトル */
.entry-title a{
font-size: 19px!important; 
line-height: 1.4important; /* 行の高さ */
font-weight: bold; 
}

 

 

結果こうなりました。↓

f:id:MisaTamaki:20190316214654p:plain

理想に近づいたと思います!

 

しかし、記事下(スマホ画面)に出てくるカテゴリー一覧とか注目記事の一覧の文字の大きさは小さいままでした。これはどうしたら大きくなるのでしょうか?

 

 別日記に追記しました↓

はてなブログで注目記事一覧の記事タイトルのフォントを大きくする方法 - ウーパールーパーの智慧