サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-02-17 12:12
ホームページ制作のかなりの初心者です。
PCでの表示具合しか見ずにHPを制作していたのですが、スマホで一度確認してみると、大変見にくい表示になってしまっていました。(レスポンシブテストを試した時と同じです）
例えば、PCでは文字が1行で表示されているのに、スマホでは画面が小さいからか、大きい文字で3行になっている。画像の文字と、文章の文字がPCでは同じにしたはずなのに、スマホではバラバラになる…等です。
こうした媒体での見え方の違いを少なくし、PCでの画面の見え方を、そのままスマホでもさせたいのですが、どのようなことをすればよいのでしょうか？簡単でいいので、何をするべきか教えて頂きたいです。（何をすれば、見やすい画面にできるのかが分かりません…）
調べていたところ、やはりhtmlやcss を操作するべきなのでしょうか？とても初歩的な質問だと思うのですが、検索してもいまいち分からなかったので、相談させて頂きました。宜しくお願い致します。
----------------------------------------------
サイト名：右足アップダウンシール
サイトURL： https://migiasi-updown-siiru.com
ホームURL： https://migiasi-updown-siiru.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/veilnui-simplog-blue/style.css
WordPressバージョン：5.6.1
PHPバージョン：7.4.14
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.4.5
カテゴリ数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ： 
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
----------------------------------------------
利用中のプラグイン：
AForms -- Form Builder for Price Calculator & Cost Estimation 2.0.1
Animate It! 2.3.7
Any Mobile Theme Switcher 3.0
Blocks Animation: CSS Animations for Gutenberg Blocks 1.0.6
ConoHa WING コントロールパネルプラグイン 1.0
ConoHa WING 自動キャッシュクリア 1.0.0
DrawIt (draw.io) 1.1.3
Easy FancyBox 1.8.18
Easy Textillate 2.01
Google Ads & Marketing by Kliken 1.0.6
Marker Animation 4.1.1
Really Simple SSL 4.0.5
Remember Me Controls 1.9
Simple Custom CSS 4.0.4
SiteGuard WP Plugin 1.5.2
ThemeGrill Demo Importer 1.6.8
TypeSquare Webfonts for ConoHa 1.0.2
----------------------------------------------
2021-02-17 13:09
前略、monon さん
Cocoonをデフォルトの設定ではなく、既にかなりカスタマイズされていらっしゃるようですので、ご自身でカスタマイズしたものは、基本的には、ご自身での対処になるかと思います。
以下のようなコードで文字のサイズを修正する方法もありますが、以下の指定では大雑把すぎるので、実際には、もっと丁寧に箇所別に指定する必要があるかと思われます。
@media screen and (max-width:480px) {
.entry-content * {
font-size: 1.2rem;
}
}
HTMLやCSSの記述方法がよくわからない、といった場合は、有償となってしまいますが、以下のリンクに掲載されているプロの方々にお見積りを依頼してみると良いかもしれません。
Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】
制作期間がかかっても、ご自身で勉強して作成したい、という場合は、以下のリンクが参考になるかもしれません。
【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック
WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
また、書籍での学習もオススメです。
Webで検索すれば、本なんか要らないし、読んだことはない、という方もいらっしゃるので、人によるかとは思いますが、要点を上手くまとめている本もあります。
通販サイトで評価の高いものを買ってみるのもいいのですが、少し大きめの書店をのぞいて自分に合いそうな感じの本を物色する方が確実です。
This post was modified 3年前 3回 by リフィトリー
わいひら reacted
Topic starter
2021-02-17 20:22
リフィトリーさん
迅速に対応して頂き、有難うございます！！（なのに返信が遅れてしまって申し訳ないです?♀️）
やはり細かい設定をするには、CSSやHTMLの知識は不可欠なのですね…。
プロの方々に頼むのも良いと思ったのですが、リフィトリーさんが提示して下さった初心者向けのリンクがとても自分に今必要な知識だと思ったので、こちらを見ながら、一先ず勉強を始めてみたいと思います！！
その際に、また分からないことが出てきたら、相談するかもしれないです?♀️ その時はまた教えて頂けたらなぁと思います！
適切なアドバイスをして下さり、本当に有難うございました。m(_ _)m
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。