現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

スマホでの記事一覧のタイトルのフォントサイズを小さくしたい | カスタマイズ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
スマホでの記事一覧のタイトルのフォント...
 
Share:

[解決済] スマホでの記事一覧のタイトルのフォントサイズを小さくしたい  


うりぼーブログ
 うりぼーブログ
(@うりぼーブログ)
ゲスト
参加: 4か月 前
投稿: 32
2019年11月3日 18:47  

スマホでの記事一覧のタイトルのフォントサイズを小さくしたいです。
以前、自分でいじった記憶があるのですが、忘れてしまいました。
添付のとおりです。

初歩的な質問、すみません。。。

 

Cocoon環境に関する情報です。

----------------------------------------------
サイト名:uriboublog
サイトURL: https://uriboublog.com 
ホームURL: https://uriboublog.com 
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-colors-black/style.css
Wordpressバージョン:5.2.4
PHPバージョン:7.2.17
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.6
カテゴリ数:5
タグ数:0
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
----------------------------------------------
Gutenberg:0
AMP:1
PWA:1
Auto Post Thumbnail:0
ホームイメージ: http://uriboublog.com/wp-content/uploads/2019/07/hunters-race-MYbhN8KaaEc-unsplash-1.jpg 
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.1
All-in-One WP Migration 6.77
BackWPup 3.6.10
EWWW Image Optimizer 4.8.0
Google XML Sitemaps 4.1.0
Lazy Load by WP Rocket 2.2.2
Redirection 4.3.3
Search Regex 1.4.16
WebSub/PubSubHubbub 3.0.2
WP-CopyProtect [Protect your blog posts] 3.1.0
----------------------------------------------
----------------------------------------------
サイト名:uriboublog
サイトURL: https://uriboublog.com
ホームURL: https://uriboublog.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-colors-black/style.css
Wordpressバージョン:5.2.4
PHPバージョン:7.2.17
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.6
カテゴリ数:5
タグ数:0
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
----------------------------------------------
Gutenberg:0
AMP:1
PWA:1
Auto Post Thumbnail:0
ホームイメージ: http://uriboublog.com/wp-content/uploads/2019/07/hunters-race-MYbhN8KaaEc-unsplash-1.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.1
All-in-One WP Migration 6.77
BackWPup 3.6.10
EWWW Image Optimizer 4.8.0
Google XML Sitemaps 4.1.0
Lazy Load by WP Rocket 2.2.2
Redirection 4.3.3
Search Regex 1.4.16
WebSub/PubSubHubbub 3.0.2
WP-CopyProtect [Protect your blog posts] 3.1.0
----------------------------------------------

不具合報告の際には以下の情報を添えてもらうと助かります。


未解決
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年11月3日 19:09  

子テーマのstyle.cssに以下を追記することで出来るかと思います。

/*480px以下*/
@media screen and (max-width: 480px){
  .entry-card-title {
      font-size: 16px;
  }
} 

うりぼーブログ
 うりぼーブログ
(@うりぼーブログ)
ゲスト
参加: 4か月 前
投稿: 32
2019年11月3日 22:18  

わいひらさん

ありがとうございます。添付のとおり入力しましたが、16pxの部分を変えても変化ありまんでした。

 

style.cssは下記の通りに入力しました。

 

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.0.8
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@media screen and (max-width: 834px){
.main {
padding: 30px;
}
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
/*必要ならばここにコードを書く*/
}

.site-name-text-link {
font-size: 35px;
}

/*1030px以下*/
@media screen and (max-width: 1030px){
/*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}

.entry-card-title {
font-size: 16px;
}
.my_bold{
font-weight: bold;
}

.site-name-text{
font-family: ‘Josefin Sans’sans-serif;
font-size: 50px;
color:#ffffff;
}


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3784
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年11月4日 05:56  

添付のとおり入力しましたが、16pxの部分を変えても変化ありまんでした。

わいひらさんのCSSは最大横幅が480pxまでのデバイスで有効です。

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}

.entry-card-title {
font-size: 16px;
}

これではPCビューでも16pxになります。

 

 

  • CSSが反映されない原因

外観・カスタマイズ と開いた一番下。
追加CSS 的場所にコードを書いてるのでテーマのstyle.cssに書いても反映されません。

追加CSS に書いている

.entry-card-title {
	font-size: 20px;
}

を削除して保存。

 

その後。以下 赤文字のカッコ内 に書いてる青文字部分にstyleを書けばスマホにだけ反映。

@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
ここにコピペする
}

 

以下のようになるように指定しないと反映されません。

/* 全体の指定 */
.entry-card-title { font-size: 20px; }
/*480px以下*/
@media screen and (max-width: 480px){
/*スマホだけ16pxに指定を上書き*/
.entry-card-title { font-size: 16px; }
}


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年11月4日 20:00  

かうたっくさんも書かれていますが、僕が書いたようには書かれていないですよ。
僕も以下のように書いている通り、僕の書いたコードをそのままstyle.cssにコピペすればよいかと思います。

子テーマのstyle.cssに以下を追記することで出来るかと思います。

メディアクエリの重複が気になるようでしたら、不要な空のメディアクエリは削除すればよいかと思います。


うりぼーブログ
 うりぼーブログ
(@うりぼーブログ)
ゲスト
参加: 4か月 前
投稿: 32
2019年11月4日 21:08  

かうたっくさん
わいひらさん

度々申し訳ございません・・・。
全然わかっておりませんでした。教えていただいた通りに修正し、実現できました。ありがとうございます🙇


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3784
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年11月4日 21:55  

もうわかった。って事ではなさそうでちょっと心配です^^;

 

今ままだまだ不明点がありそうで、書かれてる通りやったけど、わかんない状態みたいですね。。意味がわからない状態の回答だったかも。
でも改善できたようで良かったです!


わいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました