【ブログ】５代目んだ

Chromeでスマホ画面表示

先日公開した「賽は投げられた」のページをスマホで確認したところ、予想どおり具合の悪い箇所がありましたので、画像処理して貼り付けました。画像処理したことで、未解決の課題の1つがクリアできました。

●（黒丸）の記号が小さく表示されてしまう現象が気になって、✕で代用していたわけですが、Excelのキャプチ画像なら見慣れた大きさのままです。また、H3の見出しを1個追加しました。5段落を目安にH3の見出しを入れることにします。

ところで、私が5月末まで運営していたブログは、閲覧者の7～8割がモバイルユーザーでした。私個人はスマホでじっくりサイトを見ることはまずありません。ネットはPCで見るものであり、スマホはPCが手元にないときの代替品に過ぎないという認識です。

とはいえ、7割や8割という数字は無視できません。スマホ画面表示をPCで見られないかと思って探してみたら、あっさり見つかりました。私はPCのブラウザについてはGoogle Chromeが日本でリリースされた直後からのChromeユーザーです。

ChromeではF12キーで「デベロッパーツール（開発者ツール）」を開くことができます。アイコンをクリックするだけでスマホ画面表示に切り替わりました。これは感激です。仕事？は格段に捗ります。

あいにくiPhone7には対応していないようですが、初代アンドロイド携帯HT-03Aを発売初日の2009年7月10日に購入した私も今ではiPhoneユーザーであり、自分で確認できますから不都合はありません。

もうひとつ捗るツールとして、テキストエディタのプラグイン「AddQuicktag」を導入しました。私は最低限のHTMLやCSSの知識は有しています。WordPressでは適宜テキスト画面を開いてタグを打ち込むこともあります。

ブログでテキスト画面を開くことは滅多にありませんが、固定ページでは頻繁に開くことになります。「賽は投げられた」のページはテキスト画面で作り込んだわけですが、タグ打ちは正直なところ面倒な作業です。

私はキーボードを見てしまうと、「class」を「ciass」と入力してしまうことがよくあります。もちろん1文字タグを間違っただけでも効果は反映されません。タイプミスを防ぐ意味でも「AddQuicktag」は嬉しいプラグインです。

「AddQuicktag」でタグを登録しておけば、範囲指定したうえでボタンをクリックするだけでタグが打ち込まれます。まあ、<em>xxx</em>ぐらいは手打ちでもさほど問題はありませんけど…。

探せばいろいろあるものです。ひとつずつ問題をクリアしていけば道は開けるものかもしれません。

試しに「賽は投げられた」をうｐ

先日、ヘッダ画像を挿入してみました。自宅の27インチPCやスマホでは、さほど不自然さはありませんでしたが、勤務先のノートPCでは「セットポジション」のサイト名と画像だけで埋まってしまいます。1日たたずに外しました。

なくても不自由することはありませんので、当面はヘッダ画像は使いません。使う場合も細めのものにしようと考えています。背景画像も今のところ必要はなかろうと思っています。

とりあえずメニューバーは設置しましたが、メニューから展開されるコンテンツがありません。というわけで、旧「セットポジション」から「賽は投げられた」のページを取り込んでみました。

「賽は投げられた」は短めのページですからデモ１号として最適です。今回スタイルシートに追加したのは、見出し（H1とH3）、ハイパーリンク、注釈部分のフォント指定、強調、横線の5件です。

Twenty Sixteenでは、見出しのうちH2が左コラムやこのページの下の「コメントを残す」に使われていました。このため「賽は投げられた」のページではH2を使わず、H3で対応しています。H3は旧「セットポジション」のH2と同じです。

H1については旧「セットポジション」を踏襲せず、#800000（茶）の色指定にとどめました。当初は#800080（紫）を試しましたが、#800080は訪問済みリンクテキストのWeb標準と同じ色です。

ページタイトルにはリンク設定されていませんが、ページを開けば自動的に訪問済みになるわけです。あまり問題は生じないはずですが、やはり別の色を使うべきだろうという結論です。なお、上の紫は実際には#9900FFです。

ハイパーリンクについては、旧「セットポジション」のスタイルシートをそのまま埋め込んでみました。

a:link {color: #0000FF}
a:visited {color: #800080}
a:hover {color: #FF0000; text-decoration: none}
a:active {color: #FF0000; position: relative; top: 1px; left: 1px}

このうちhover時とactive時の色指定（赤）が機能しませんでしたので、機能しない部分は削除しました。結果として、hover時とactive時のフォント色は初期設定のままです。

a:link {color: #0000FF}
a:visited {color: #800080}
a:active {position: relative; top: 1px; left: 1px}

active時のpositionは、クリックするとリンク部分のテキストが右下の方向に1pxだけ移動するというものです。クリックしたという実感がありますので、私はこの設定がお気に入りです。

現状で課題として残っているのは、hover時のフォントがメニューバーと末尾のナビゲーションでは青、右カラムでは緑、という具合に統一性に欠けることです。同一ページで異なるのは具合が悪いわけで、より細かな指定が必要になるようです。

サイトアイコンの設置

サイトアイコンを設置したのは昨日です。一般的にはファビコンと呼ばれているはずですが、私はすでにGoogleさんのBloggerでファビコンを設置したことがあります。WordPressではサイトアイコンという名称のようです。

当初はフクロウにしようと思って、フリー素材を加工して次のようなファビコンを作ってみました。ただ、ファビコンは表示サイズが小さいため、あまりフクロウっぽく見えませんでした。

顔だけなら行けるのでしょうが、この色合いで顔だけ切り取るとタヌキに見えます。フクロウの本来の色はグレー系が多いはずですが、ファビコンにグレーは馴染まないと私は理解しています。派手なほうが好ましいわけです。

というわけで、Bloggerで使っていたファビコンを踏襲することにしました。認知度は別にして、アイツが作っているのだと思ってもらえるかもしれません。フリー素材の山高帽の背景を蛍光色的な緑にしたものです。

山高帽は私の長年のハンドルネームであるワトソン君に由来します。ホームズの相棒であるワトソン博士で思い出すのは山高帽とステッキぐらいですが、やはり表示サイズの関係でUFOにしか見えなかったりします。

実はBloggerのファビコンは、帽子の上部が丸みを帯びた山高帽ではなく、角張っているシルクハットでした。次の素材を元にしたものでした。

こちらのほうが白リボンの幅が太く、ファビコンとしては妥当です。ただ、私の中ではホームズが鹿撃帽かシルクハットで、ワトソンは山高帽というイメージがあります。

Wikipediaによれば、シルクハットは1979年、山高帽は1850年に初めて作られたようです。ドイルがホームズ＆ワトソンを登場させた「緋色の研究」は1887年に発表されています。

ワトソン博士が日常的にシルクハットを着用していたとは思えませんが、識別用のファビコンとしては山高帽よりシルクハットのほうが優れていると言えそうです。何がなんでも山高帽にこだわらなければならない理由はありません。

着想はワトソン＝山高帽で始まりましたが、落ち着いたのはやはり今回も代用のシルクハット🎩ということになりました。Bloggerで使っていたファビコンをほぼそのまま引き継ぐという、代り映えのしない結果に終わりました。

あいにく私にはマジック（手品）の趣味はなく、燕尾服やシルクハットとのご縁は幸か不幸か今までありませんし、山高帽さえ被ったことがありません。というわけで、当サイトのファビコンはただの識別符号です。

404エラーページの設置

本日の課題は404エラーページの作成です。404エラーはページ削除やURL変更によって指定したアドレスが存在しなくなった場合に表示されるものです。

「セットポジション」でGoogle検索すると、幸いにも旧「セットポジション」がまだ上位表示されます。

旧ページはすべて削除しましたので、これをクリックすると404ページが返されることになります。

「WordPress 404」で検索した複数のページを覗いてみた結果、こうすればいいらしいということは大雑把に理解したような気になりましたが、情報としては古そうでしたので、「WordPress 404 TwentySixteen」で再検索してみました。

というわけで、今日の先生は次のページです。

とりあえずこのページの記述に従って、TwentySixteenの404ファイルを探して子テーマに移植し、文言を私流に組み替えました。なお、上記ページの画像をよく見ると、閉じられていない<p>タグがありましたので、<p>開始タグは省いておきました。組み替え後の404ページです。

さて、私としてはこのページの中に次の画像を挿入したいわけですが、その方法がわりません。

ここに埋め込んだ画像と同じタグを記述すればいいはずです。実際には画像は小さくして、センタリングしました。画像と下の文章との間の改行がありませんでしたから、画像のタグを<div>で囲んでみました。

正しい記述ではないかのかもしれませんが、成功しましたのでひとまず了とします。なお、画像については次のページから拝借しました。

「楽譜と流れ星」または「星空とメロディ」のタイトルのようです。まあ、この画像にこだわる必要はありませんので、「お茶しやがって」のAAでも構わないと考えています。

もともとは埋め込んだ画像を背景画像として使いたいと考えていましたが、404ページのデザインは同一サイト内の一般のページと統一せよとのことでしたので、素直にこれを受け入れることにしました。

８月中もこんな感じでゆったりと進行することになります。それなりのコンテンツが揃うのはもう少し先のことです。当然のことですが、ある程度の中身が揃ったとき、404ページの文言は書き換えなければなりません。

数字フォントのお気に入りはVerdana

Excelでは標準の英数字フォントがArial（エイリアル）ですが、私はVerdana（ヴァーダナ）が好みです。要は、横幅や文字間隔の問題になるはずです。

こうして並べてみると、HG丸ゴシックM-PROはArialがベースになっているものと思われます。1の下の横棒がないこと、6と9の飛び出した部分が長いこと、7の斜め線が曲線になっていることは共通です。

横幅のあるHG丸ゴシックM-PROは好みが分かれます。とりわけビジネス文書ではあまり歓迎されないものと思われます。私は文字としてのフォルム自体は嫌いではありませんが、数字と数字が密着していて見づらいという印象を持っています。

メイリオ書体はゴシック系の英数字書体としてもっとも一般的でしょうが、Verdanaはそのメイリオより横幅を稼いでいます。半角文字ですから、数字そのものの横幅はこの程度が限界と思われます。適度の文字間隔が読みやすさにつながっているように感じています。

五十路も半ばを過ぎると、あまりギチギチ詰まった文字列は勘弁してくれという思いが強いわけです。というわけで、当サイトのスタイルシートでは、font-familyの先頭をVerdanaで指定しました。

これに伴い、英数字については原則として半角を用いることとします。旧「セットポジション」の習慣を踏襲することになるわけです。まあ、人の好みはそんなに簡単には変わらないものなのかもしれません。

私はワープロ専用機世代ですから、たしかに「1桁の数字は全角で2桁以上の数字は半角」という習慣をかつては持っていました。プロポーショナルフォントの登場でこの習慣にこだわる理由は消滅したと理解しています。

行政文書や法律関係では、英数字が全角になっていることが一般的です。そもそも半角文字が存在しなかった和文タイプ時代の名残りだと思われます。現実問題としては、英数字で全角を使うと禁則処理が働かずに見苦しいだけです。

また、半角カナは地の文章では使わないというのも旧「セットポジション」のルールを踏襲します。今ではさほど影響はないのでしょうが、何度も文字化けメールを受け取った身としては積極的に使う理由がありません。

フォント変更をめぐる格闘

GoogleさんのBloggerでもそうでしたが、WordPressのテンプレートも外国産ですから、日本語環境では全角文字と半角文字で書体が違うという気味の悪い現象が起きます。真っ先に対処しなければならないのがフォントの変更です。

で、いろいろ試してみたのですが、3回ほど失敗しました。まず、参考にしたのは次のページです。

スタイルシートでフォントは変更できるわけですが、親テーマがアップデートされればスタイルシートの変更は無効化されてしまうとのことです。子テーマを作成しておけば、親テーマのアップデートに影響を受けないということでした。

記述されていたとおりに試みたつもりですが、残念ながらフォントは変更されませんでした。しかしながら、このページには作成日付と更新日付が記載されています。信頼性は高いという印象です。

まあ、私が抱えている課題は解決しませんでしたので、次の先生に教えを乞うことにしました。

こちらは「テーマの編集」からスタイルシートを変更しろとおっしゃっています。アフィ臭が漂うタイトルですが、肝心なのは中身です。投稿の日付がありませんので、情報が新しいのか古いのか判断できません。

textareaのフォントを変えてみましたが、反応は好ましいものではありませんでした。選択したテーマによって違うのかもしれません。私はTwenty Sixteenというテンプレートを選んでいます。

そこで、Twenty Sixteenに限定して検索してみました。

このページにも作成日付や更新日付の記載がありませんが、文中に「2015年末に公開された」との記述があります。編集対象は61行目と290行目のfont-familyとされていますが、実際には62行目と307行目でした。1年半の間にTwenty Sixteenは着実にバージョンアップしているわけです。

スタイルシートをいじってみましたが、やはり失敗でした。4人目の先生にご登場願うことになりました。一発で行けるはずだと思っていましたので、やや焦り気味です。

このページでは、子テーマを作成して新しいディレクトリ内に「style.css」だけでなく「functions.php」をつくれ、とおっしゃっています。「functions.php」はパスしましたが、「style.css」だけで無事にフォントが変更されました。

後日、「functions.php」も作成する必要が生じるのかもしれませんが、今日はここまでとします。ちなみに、このページにも作成日付と更新日付が記載されています。

というわけで、旧「セットポジション」同様にWordPressでもタイムスタンプで更新日付が打てるか探る必要があります。ないはずはありませんが、問題は私のスキルがついていけるかどうかです。

なお、私は8台目か9台目になるPCを先月購入しました。標準のIMEソフトはMicrosoftさんのものです。これまで自宅では一貫してGoogle日本語入力を利用してきた私ですが、まだGoogle日本語入力はインストしていません。

本日、1行目の「Blogger」は「ぶろがー」では変換できませんでした。次に不自由さを感じたときは、素直にGoogle日本語入力を導入するつもりです。

夏に動く？

再開にあたって、サイトを丸ごと保存できるソフトを探しました。「サイト 丸ごと保存」でGoogle検索して見つけたのがこのページでした。

ここで紹介されている「HTTrack」というフリーソフトをインストして、旧「セットポジション」をローカル環境に取り込むことができました。旧「セットポジション」のうち、いくつかのコンテンツは焼き直したうえで再うｐします。

前記ページには次のように記載されていますが、「Japanese」を選択しても再起動の必要はありませんでした。無事にオフラインで旧「セットポジション」を見ることができます。

初回起動時には言語選択させられます。英語／日本語を選択してすすめてください。
日本語を選ぶと化けてしまうけど、再起動すると直ります。

気になったことが2点あります。どうやら「Qiita」（キータ）さんはプログラマー向けのサイトのようです。結果オーライでしたが、気安く入り込んでいいページではなかったような気もします。

また、私が「HTTrack」でサイトを丸ごと取り込んだということは、ほかの誰かも同じことができるわけです。ということは、非公開ページも読み込まれてしまうことになります。

今回はWordPressを使っていますので、非公開ページが読み込まれてしまうのかどうか確認はしていませんが、自分だけの非公開サイトを持つことは意義のあることだというのが私の理解です。

さて、私が旧「セットポジション」を開設したのは2000年8月のことでした。独自ドメインの取得は2005年8月です。今回も8月間近です。私は夏になると動きたがる傾向があるのかもしれません。