ウェブサイトの改訂 － スマホ対応にしました 2020年3月

　このサイト「Ces-durのプロジェクトx」は2014年2月に開設し、丸6年経過した。スマートフォンからの閲覧に未対応なことなど、設計の陳腐化が気になってきていた。新型コロナウィルス感染拡大の影響で外出が減り、暇ができたので改訂することにした。 ■スマートフォンへの対応 　パソコンを使うのは職場だけ、プライベートではスマホを使うという人が多くなっているようだ。ウェブ閲覧もスマートフォンで、という人が多い。自宅のデスクトップ・パソコンでウェブ閲覧などというのは、われら高齢男性ばかりではないか。その仲間と思っていた合唱団男性メンバー某氏までがウェブサイトをスマ―トフォンで眺めるのを見て、ちょっとした衝撃を受けた。ブルータス、お前もか・・・。 　今や、個人サイトといえども、スマートフォンの小画面で閲覧しにくいという状態は改善すべきなのだ。 　私のサイトはHTML(ウェブページを作成するための言語)で書いており、スマホ対応にするにはWordPress(ウェブページ作成を補助してくれる一番人気のソフト)で作り直す大作業になるだろう、と足を踏み出せずにいた。たまたま本屋で手に取った「HTML5&CSS3 デザインレシピ集」(狩野祐東 技術評論社 2017) に、HTMLのままでスマートフォン対応を実現する具体的な手法が示されていて、ようやく改訂に取りかかる気になった。 ■ふりかえって 　このサイトを始めた2014年、既に個人サイトの主流はブログであり、固定ページのホームページは過去のものになっていた。その後、主流は、ブログからさらに手軽なツイッター、ファイスブック、インスタグラムなどのSNSに移っている。一方、ウェブ上では、ブログ、ホームぺージに企業広告を掲載することが当たり前になり、さらには稼ぐ手段、ビジネスとしてのサイト運営が広まっている。 　私のサイトは、自分が行った経験、その折に考えたことなどを「プロジェクト」と称して書いた身辺雑記だ。退職後の御隠居さん生活は、自分ひとりの世界で心が頑なになってしまいがちである。外に開かれた窓を、何らか持っておいたほうが良い。経験といっても、その時々に興味を持った物事を好きなようにしてみた、というだけのことだ。「われながらバカなことをやっているなあ」というものばかりで、もとより他人様から見れば意味も価値も無いことだが、文章に綴って外にさらすことで、自分ひとりの物から多少とも客観的・相対的な物に変わる。心の持ち方にも反映する。そんなことを思って続けている。 　新しいコンテンツを頻繁に時系列で重ねていくブログは、日記や軽快なエッセイに良いのだろうけれど、私のスタイルではない。ましてツイッターなど、とてもとても。やはり、ゆっくり構え、書きたいテーマができたら書く、という固定ページ型が性に合っているようだ。 　ということで、改訂といっても中身は変わらず、これまでと同じだ。外見の体裁を新しくする化粧直し、ということになる。 ■作業のあらまし (1)まず、「HTML5&CSS3 デザインレシピ集」を教科書に、スマホ対応を実現するレスポンシブ・デザインのテクニックを学習した。合わせて、これまでHTML4.01で書いていたコードをHTML5に変えるため、書式の変更点を学習した。 (2)この本のサンプル・コードをダウンロードできるので、それを参考に、HOMEのページを幅が伸縮する1コラムにする、画面サイズによりCSS(スタイルの指定)を切り替えるといったレスポンシブ・デザインのCSSを作成した。 (3)これに合わせてHOMEページのデザインを変更し、ヘッダーや背景の色も変えた。 (4)コンテンツ各ページに、必要な修正を加えた。本文で箇条書きを多用していたが、幅の伸縮により改行がうるさくなるので平文に直した。ページ数があるため数日がかりだったが、エディターの置換を活用して修正した。 　(4)の各ページの書式だが、私流の手抜き技がある。 　ページの本文については、一つ一つの段落をp要素(p、/p)で囲うことがHTMLの決まりだが、CSSでwhite-spaceプロパティ(white-space : pre-wrap;)を使い、p要素は本文全体を囲うだけにする。こうすると、エディターで書いたテキストファイル形式の文の、改行やスペースがそのまま表示される。 　書式として行儀が悪いのだが、HTMLの書式を忘れてワープロ的に本文を書くことができ、コンテンツ作成が格段に楽になる。 　今回の改訂で、ほぼ全部のぺージにこれを適用した。私のサイトは、ところどころ写真を挟むくらいで凝ったレイアウトではなく、字の大きさ、太さ、色などの変化も付けていない。画一的な体裁の本文なのでこんな方法が使える。 ■まとめ 　改訂はそれなりの作業量だったが、思ったほど難しいものではなかった。スマ―トフォンやタブレットでも字の大きさが適切になり、不自然な改行も無くなって見やすくなった。全体のデザインも今風にすっきりして、Wordpressで作ったサイトに見劣りしなくなった。所期の目標、達成だ。 　私のサイトは長文のコンテンツが多い。従前のままパソコンの大画面での読者を想定していて、その点でのスマホ対応はしていない。それが自分の文体でもあるので、読みにくさについては御寛恕のほどお願いいたします。