現在「イノセンス」スキンを適用中です。

PCとスマートフォンで画面の見え方を同じにしたい。 | カスタマイズ相談 | Cocoon フォーラム

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

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

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

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

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

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

最近の書き込みはこちら。

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

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

スポンサーリンク
PCとスマートフォンで画面の見え方を同...
 
共有:
通知
すべてクリア

[解決済] PCとスマートフォンで画面の見え方を同じにしたい。


monon
 monon
(@monon)
ゲスト
結合: 2週間前
投稿: 2
Topic starter  

ホームページ制作のかなりの初心者です。

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
----------------------------------------------


未解決
リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 4146
 

前略、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 2週間前 3回 by リフィトリー

わいひら 件のいいね!
monon
 monon
(@monon)
ゲスト
結合: 2週間前
投稿: 2
Topic starter  

リフィトリーさん

迅速に対応して頂き、有難うございます!!(なのに返信が遅れてしまって申し訳ないです🙇‍♀️)

やはり細かい設定をするには、CSSやHTMLの知識は不可欠なのですね…。

プロの方々に頼むのも良いと思ったのですが、リフィトリーさんが提示して下さった初心者向けのリンクがとても自分に今必要な知識だと思ったので、こちらを見ながら、一先ず勉強を始めてみたいと思います!!

その際に、また分からないことが出てきたら、相談するかもしれないです🙇‍♀️ その時はまた教えて頂けたらなぁと思います!

適切なアドバイスをして下さり、本当に有難うございました。m(_ _)m


わいひらリフィトリー 件のいいね!
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年7ヶ月

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

クーポンコード:PK4JK4RJ

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

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年5ヶ月

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

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

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

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

サービス運営期間:5年

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