光ちゃ!のブログ

SOHO始めてもうすぐ20年になります。最初の頃は仕事を見つけられず、安定し出したのは7年前からですね。2年前から青色申告に。それと毎朝のウォーキングと日曜日のサイクリングを10年継続中。おかげで病気や風邪はなかったです。FAX機をcimFaxサーバに変えたり、ルータ設置でVPN実現化等で自宅は様変わりました。そう言った所を紹介できればと思います。

ホームページ

6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)

 1月6日初公開した時のHP おうちフリーランサー(コンピュータ&ウェブ)  光ちゃ!はページも少なく、あれからページを少しずつ増やし、コロナで外出控えるようとの事で集中して、6月21日に完成したんですが、iPhoneとAndroidで自分のHPを見るとケータイを縦にした場合、左メニューの占有率が大きく、本文が少ししか見れないと指摘あったので、今日、やっと出来ました。

(1) パソコン&iPadで通常のページを見るとこんな感じになります。

スクリーンショット 2020-06-28 20.08.43
CSSでデザインしているので、ページを狭めても見にくいと言う事もないですね。

(2) パソコン&iPadで右上の「黒地」ボタンを押すと、目が悪い視覚障害者向けに見やすく表示されます。
スクリーンショット 2020-06-28 20.09.24
アクセシビリティを配慮したページに仕上がっていますね。

(3) iPhone横長で見るとこんな感じになります。
IMG_0003
パソコンで見たページから右側のアフィエイト領域が省かれた感じになるので、これも見やすいと思います。

(4) iPhone横長で右上の「黒地」ボタンを押すとこんな感じです。
IMG_0004

上の宣伝画像を除けた方がいいかな?

(5) iPhone縦長で見ると左メニューエリアを無くし、上の方に移動します。
IMG_0005
左メニューを上に移動させて、本文を100%の幅で表示したら、読みやすくなりましたね。

(6) iPhone縦長で「黒地」ボタンを押すとこれも左メニューエリアを無くし、上の方に移動します。
IMG_0006
目が悪い人もこれなら見やすく見れますね。

(7) Android横長で見るとこんな感じになります。
Screenshot_2020-06-28-20-41-48
iPhone横長と同じでいいですね。

(8) Android横長で右上の「黒地」ボタンを押すとこんな感じです。
Screenshot_2020-06-28-20-42-10

見やすいですね。

(9) Android縦長で見るとiPhoneと同じく左メニューエリアを無くし、上の方に移動します。
Screenshot_2020-06-28-20-35-09
バッチシですね!

(10) Android縦長で「黒地」ボタンを押すとこれも左メニューエリアを無くし、上の方に移動します。
Screenshot_2020-06-28-20-35-16

iPhoneとAndroidも表示が良さそうなので、HP作成はこれで打ち切ろうと思います。




おうちフリーランサー(コンピュータ&ウェブ)  光ちゃ!HP完成

 お久しぶりです。
コロナで県外外出控えるようとか、極力外出しないよう、県から指示が出て、何しようか?結局の自分のHPを完成させようと黙々作って、昨日完成しました。
おうちフリーランサー(コンピュータ&ウェブ)  光ちゃ!

結構アフィリエイトのリンクを一杯入れたんですけど、他のHPにない特徴に仕上げました。
・右側のスペースはPHPで表示させる。
・それ以外のスペースはJavascriptで。
・iPhoneとかAndroidなどモバイルは右側のスペースは表示させない。スペースがないから。
・ページを印刷する時はアフィリエイトの画像とテキスト文を出ないようにする(CSSで処理)。
・弱視者も見やすくにするよう、右上にある「黒地」ボタンを用意。アクセスキーも設置。
他にもちょっとあるけど、キリがないのでw

せっかく、皆さんに見てもらえるのだから、少なくともHTML5とCSS検証合格しています。

The W3C Markup Validation Service
W3C CSS 検証サービス - CSS Validation Service

これからやる予定は2年ぶりリリースされたUbuntu Desktop 20.04 LTSのインストールなど、
またサーバ版も。

HPからパソコンや本などを買って頂ければ嬉しいです。
ギャラリー
  • 6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)
  • 6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)
  • 6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)
  • 6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)
  • 6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)
  • 6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)
  • 6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)
  • 6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)
  • 6ヶ月かかって出来たHPをちょこちょこCSS修正(iPhoneとAndroid)
アクセスカウンター
  • 今日:
  • 昨日:
  • 累計: