wordpress/Adobe Animate CCなどweb技術やブログ運用に関する話をしていきます!検索エンジン最適化に関する実験に関する情報も!
⇒ 本ブログの詳細/連絡先はコチラ!
⇒ 本ブログは複数テーマ(色)を持つ階層構造になってます!
web技術TOP WordPress アクセスアップ Adobe Animate CC 便利ソフト/サービス紹介 効率化
  1. ホーム
  2. 〇ブログ/web技術
  3. ブログをPCでもスマホでも見やすいよう、表示改善しました!500記事達成目前の前に色々改善していきます!
■注目記事一覧

WordPressのGutenbergで秒速で設定済みブロックを呼び出す方法!

画像素材サイト「写真AC」が超お得でおすすめです!

デジハリのAdobe講座がやばすぎる!Adobe Creative Cloudが45%オフで購入可!

Adobe Animate CC(旧FLASH)が凄い!技術者にこそ是非!

複数専門ブログと雑記ブログ、両方のいいとこ取りの形態/両立を技術的に実現してみました!

エックスサーバーが凄すぎる!高速レスポンスを誇る高品質サーバー!

[Adobe Animate CC使い方講座] まずはFlashからの変遷から解説!
 
スポンサーリンク
Twitter(更新情報)

ブログをPCでもスマホでも見やすいよう、表示改善しました!500記事達成目前の前に色々改善していきます!

今まで、気づいていたのですが、このブログの文字が少し見にくいという問題がありました。問題は主に下記の2点です。
 1.PCの表示で、文字が小さすぎ?少し見にくい
2.スマホだと変なところで改行される

これに対して、改善をほどこしてかなり見やすくしましたのでご報告させて頂きます!スマホのほうは各記事の修正が必要なので、改善適応中です!実は500記事目前なので、その前に頑張って直したいと思ってます。
rapture_20161015141922.jpg


それでは、それぞれの問題とその改善について説明していきます。

問題1:PCの表示で、文字が小さすぎ?少し見にくい

このブログでは下記の画像のように12pxという文字のサイズを主に使用して作成していました。しかし、この12pxというのは少し小さい部類で、見にくい面があります。個人的に小さい文字が好きなのでよかったので良かったと言えばよかったのですが、、、、老若男女皆様に見やすい文字ではなかったのです。
また、フォントがデフォルトのMSゴシックなので、みにくいというか、文字が綺麗でなかったんです。
rapture_20161015141644.jpg
そこで、まずこの問題に対して対処を行いました。といっても普通にフォントを大きくして、フォントを変えただけです。フォントは15pxにしました。結構大きめですが、かなり見やすくなったと思います。また、フォントも業界ではよく使われているメイリオ系のフォントが選ばれるように設定しました!
この文字だとアンチエイリアスがきいて、かなりみやすく文字が見られると思います。これで、誰もが見やすくなったのではないかと思ってます。
rapture_20161015141720.jpg

問題2:スマホだと変なところで改行される

これは前から気づいていたのですが、、、ある意味面倒なので放置していました(笑) しかし、そろそろ直さなければと重い腰をあげました。
これは、過去のテンプレートのPC側の表示です。文章が読みやすいように、1行30文字ぐらいでわざと頻繁に改行をいれていたんですよね。たとえ、文章の途中でも。よく日本語は30文字~40文字ぐらいで改行した方が読みやすいといいますからね。
rapture_20161015141644.jpg
しかし、これでスマホ表示すると、、、、下記のようにちょっと見にくい状態になっていたんです。改行位置が違うので、中途半端あな文章の途中の位置で改行されることになってしまっています。
Screenshot_2016-10-15-14-15-02.png
そこでこれについては、、、、地道に改行を削除して直していっています。改行を削除すると、PC側の表示が見にくくなりそうですが、それは大丈夫です。PC側の文字を大きくしたので、改行しなくても最大でも35文字ぐらいしか表示されないからです。これもあって実はPCの文字を大きくしたというのも一因にあります、、、(笑)
とりあえずこの改善をすると下記のようにちゃんとした改行で読みやすい文章になります。しかし、現在、490記事ぐらいの公開記事があるので地道に少しずつ直しています。ただただ改行を削除して、適切な位置で読みやすいように空白行を入れていく作業です。
Screenshot_2016-10-15-14-19-44.png
ちょっと単純作業で辛いですが、、、一つ一つ手動でやっていくしかないかと思ってます。適切なところで空白行を入れないと、文章が連なって読みにくくなるので。そうなると自分が判断しないといけないため、プログラムで自動化することはできないのです。単純さぎょうですが、地道に頑張ろうと思います!


⇒「〇ブログ/web技術」カテゴリ記事一覧

その他関連カテゴリ

[関連コンテンツ]




お気軽にコメントお願いします!

Your email address will not be published.