キーボードが機能しない!

昨日は引用部分のフォント調整に挑みました。まずは、Twenty Sixteenのスタイルシートから引用部の指定を取り出してみました。

blockquote {
border: 0 solid #1a1a1a;
border-left-width: 4px;
color: #686868;
font-size: 19px;
font-size: 1.1875rem;
font-style: italic;
line-height: 1.4736842105;
margin: 0 0 1.4736842105em;
overflow: hidden;
padding: 0 0 0 1.263157895em;
}

フォントサイズが19pxで指定されています。iPhone7の画面上では、この引用部の文字サイズのほうが私には最適です。というわけで、本文のフォントサイズを19pxで指定しました。

前回、18pxで試したときはスマホ表示の文字サイズは変わりませんでしたが、19pxにするとスマホでも文字サイズが大きくなりました。前回はもうひと押しが足りなかったようです。

ただ、フォントサイズを19pxで指定した場合、スマホではよくてもPCではいささか大きすぎます。というわけで、最終的にサイズ指定は見送りました。本文のフォントサイズは初期設定どおりとします。

さて、疑問がないわけでもありません。実は、外観>テーマの編集で子テーマのスタイルシートを変更しても反映されませんでした。

ところが、カスタマイズ>追加CSSでblockquotを加えると反映されました。

ブラウザのキャッシュの問題だったのかもしれません。よくわかりませんが、いつかそういうことだったのかと納得できる日が来るでしょう。とりあえず今は結果オーライです。

ところで、昨日の作業中に思わぬアクシデントに見舞われました。キーボードが機能しなくなったのです。テンキーもDeleteもBackSpaceも効きません。困ったときのEscキーさえ反応がありませんでした。

最初は電池切れを疑って電池交換をしてみましたが、状況に変化はありません。再起動をかけようかとも思いましたが、このままキーボードが機能しない場合には深刻な事態が待っています。

もしリセットされなかった場合、パスワードを打ち込むこともできません。つまり、PCを立ち上げることができないわけです。再起動は最後の手段です。30分近くスマホで情報を探りつつ、いろいろ試してみました。

IMEの不具合が原因かもという意見もありましたので、まったくためらうことなくGoogle日本語入力をインストールしました。私は「ようつべ」で「You Tube」に変換できるこのIMEの大ファンです。

MS-IMEのせいではなかったはずですし、帯電が原因でもなかろうと思われますが、いつの間にか正常に打ち込むことができるようになっていました。シャットダウンしたほうが早かったのもしれませんが、私にはその勇気はありませんでした。

その後、調べたところによれば、サインイン画面ではスクリーン・キーボードを使ってマウスで入力できるようです。もし次の機会があれば、安心して再起動をかけることにします。

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>ぐらいは手打ちでもさほど問題はありませんけど…。

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

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

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

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

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

「賽は投げられた」は短めのページですからデモ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で使っていたファビコンをほぼそのまま引き継ぐという、代り映えのしない結果に終わりました。

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