前回、過去の記事のタグ付けを行いました。
今回は、スマホから見た時でも見やすくなっているか確認を行います。
パソコンからスマホで見たときにどのように見えるかを確認するために
使用しているのが、Google Cromeのその他のツールから、
デベロッパーツールというのを使用しています。
もちろんスマホから見ても良いと思いますが、iPhone、iPad、などを
切り替えて確認できるのでよいかと思います。
たまに、本当に大丈夫かなぁって時にスマホでも確認しています。
デベロッパーツールを起動すると、こんなメニューが表示します。
iPadと書いている場所で機種を選び、その横が画面サイズがこんなサイズで、
%のところは大きく表示したければ100%とかそれ以上にします。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/64/e7/p/o0500073115019252657.png?caw=800)
さて、表示がおかしい場所を探していくと、3か所気になった場所がありました。
1か所目、パソコン処分しますの画像の左に、少し文字が来ています。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/0a/83/p/o0500073115019252660.png?caw=800)
2か所目、スマホのバッテリ交換も画像の左に、少し文字が来ています。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/b9/c5/p/o0463057515019252661.png?caw=800)
この、1か所目、2か所目は、同じ対処で表示が改善しました。
その方法は、ブロックのメニューからすべて表示を選びます。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/0f/82/p/o0371042515019252662.png?caw=800)
メディアとテキストを選択し、1行に画像と文字を並べます。
これで、横幅を超えたときに、良い感じに表示してくれるようになりました。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/37/5b/p/o0343063115019252663.png?caw=800)
画像を選択すると標準設定ではコンテンツ(文章)が右にきます。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/32/66/p/o1344075015019252664.png?caw=800)
画像を右に変えたい場合は、メニューで位置を変更できます。
コンテンツの枠内に文章を入力し、画像のサイズは少し小さめでも見えるので
メディアの幅で調整します。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/31/75/p/o1766054715019252666.png?caw=800)
設定した後の画面の見え方はこのようになりました。
スマホから見た場合も、少し文字が横に来ることはなくなりました。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/3e/27/p/o1449058015019252667.png?caw=800)
3か所目は、Cocoonでロゴを設定し、トップメニューを右寄せに設定すると、
サイト名とキャッチフレーズが表示しなくなったので、
もう一つのサイトの方で表示できているロゴとサイト名とキャッチフレーズを
画像にしてヘッダーロゴと差し替えました。
※色々調べてもわかりませんでしたので、解決ではなく回避策となります。
Cocoon設定よりヘッダーを開き、ヘッダーロゴをクリアしてからNeveから画像として
持ってきたデータに差し替えます。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/99/e9/p/o1201025915019252670.png?caw=800)
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/a2/92/p/o1211035515019252672.png?caw=800)
また、スマホで表示を確認すると、ヘッダーロゴの余白が大きいように見えます。
スマホで表示するときだけ、高さを減らしたいと思います。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/af/f5/p/o0629037415019252674.png?caw=800)
Cocoon設定よりヘッダーを開き、高さ(モバイル)の方を110から60に減らし、
設定をまとめて保存しました。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/1a/e5/p/o1569040115019252677.png?caw=800)
すると、このように表示の余白が無くなりました。
![](https://stat.ameba.jp/user_images/20211021/19/pc-komatta/f9/ec/p/o0650033115019252680.png?caw=800)
パソコンで作成していると、スマホで開いた時の表示まで確認することを
忘れることがあります。
しかし、ほとんどの人はスマホでページに訪れているかと思います。
今回の方法を使って確認しながら修正することで、色々な方に見やすい
サイトを作成するとを心がけましょう。
21日目はサブカテゴリの作成と記事の整理や表示順の変更を行います。
以上
コメント