タグ: TwentySixteen

「2017年入賞曲」をうｐ

旧「セットポジション」には「観戦試合一覧」のページがありました。年月日と球場と最終スコアだけを羅列したものです。数年分蓄積されたそのリストは私以外には利用価値はなさそうなものですが、意外に読まれていました。

これから順次整備していくことになりますが、この「入賞曲」のページはいわば「観戦試合一覧」に匹敵するのかもしれません。

今日は久しぶりに近所の11:00開店の店に行ったわけですが、ここはランチ付きで1000円ポッキリというリーズナブルなカラオケ店舗です。冷暖房付きの個室に1人で3～4時間こもって野口英世1枚で済むのですから抜群のコスパです。

通された部屋は今年の冬まではLIVEDAM無印の部屋だったはずですが、STADIUMに変わっていました。まだ絶滅危惧種とまでは行きませんが、なかなか無印に当たらなくなりました。

DAMのマシンでは、メニュー→オススメ→ここだけ採点ランキング→精密採点DX（-G）で、その部屋の最近3か月の上位10曲を見ることができます。まれに同一曲の100点で埋まっていることもあります。

今日の部屋は1位が92点台でした。私は10曲で10位まで完全に埋めたことがまだありません。今日の選曲では93点台が1～2曲あっても92点台はまず出ないはずです。なにしろ決勝ラウンドです。

新しい扉を開くことができるのかと思いきや、5曲目の「揺れる想い」がまさかの87点台でした。音程73％でしたから、フラットの状態が続いたものと思われます。5曲目に歌ったということは予選5位だったのですが…。

結局、11曲目の「ラヴ・イズ・オーヴァー」で10位まで埋めることができました。11曲で埋めたのは3回目です。次のチャンスは当分巡ってこないものと思われます。最終的にはこうなりました。

決勝ラウンドでは、15曲を同じ順番、同じキー、同じバージョンで2回歌うことにしています。今日の前半はトーンコントロールを「ロック」に設定し、後半は「演歌」に設定しました。

予選11位の「ラヴ・イズ・オーヴァー」が今シリーズ3位に躍り出て、イチ抜けを果たしました。最終日の逆転は比較的よくあるケースですが、圏外の11位から逆転したのはおそらく初めてのことです。

さて、「賽は投げられた」のページにストリートビューを埋め込んでみました。今ではマスカットスタジアムに行く途中でカエルの鳴き声を聞くことはないのでしょう。

実現するのは2年ぐらい先になりそうですが、私にはある企みがあります。忘れないように書き留めておきます。今回が最初の布石というわけです。

というわけで、今後もストリートビューを埋め込むページが増えるはずです。野球とカラオケだけで終わらせるつもりはありません。

そのストリートビューですが、Twenty Sixteenのビジュアル画面ではセンタリングができませんでした。やや強引な手法でセンタリングしましたが、これでよかったのかどうか検証が必要です。

パンくずリストのプラグインを導入

サイト名を「セットポジション」から「セットポジション（仮）」に変更しました。最終的には「セットポジション」は引き継がないという強い意志表示のつもりです。

第1階層のページをWordPressではフロントページと呼んでいるようですが、これも「再開します」から「再開しました」にタイトルを変更し、内容を書き換えました。

従来の「今後の課題と展望」のページは「旧セットポジション」として第2階層のページとしました。また、新規に作成した「ひとりカラオケ」のページも第2階層となります。

「賽は投げられた」は「旧セットポジション」に、「イチ抜け曲の一覧」は「ひとりカラオケ」に属する第3階層のページということになります。

昨日はパンくずリストのプラグイン導入に慎重なニュアンスで記述しましたが、試験的に導入してみました。撤退するのはいつでもできます。不都合があれば手を引くだけのことです。

サイトの構成が固まり、デザイン的な課題が解決できれば、トントン拍子にうｐできるはずです。適度に完成されたストックを捌き切れないほど抱えていますから…。

本来は在庫処分はほどほどにして、新規のコンテンツを加えていくことが肝要だと思っていますが、複数のページを揃えないとデザイン面の調整も進みません。今月中にデザイン面はクリアしたいものだと考えています。

さて、導入したプラグインは、パンくずリストではもっとも一般的と思われる「Breadcrumb NavXT」です。このプラグインをインストールしたところ、次のようなエラーメッセージが出ました。

お使いの PHP バージョンが古すぎますので、新しいバージョンにアップグレードしてください。
現在のバージョンは 5.2.17 ですが、Breadcrumb NavXT には 5.3.0 が必要です。

どうやらレンタルサーバ側でPHPをバージョンアップしなければならないようです。そもそも私はPHPなるものがいったいどういう代物なのかわかっていません。松下さんとは関係ないはずです。

わからないなりに調べて、古いバージョンは使わないほうがよさそうだということで、5.6にバージョンアップしました。それでもプラグインは機能してくれません。

heder.phpにおまじないを埋め込む必要があるようです。次のページを参考にして、子テーマのtwentysixteen_childフォルダ内におまじない入りのheder.phpを作成しました。

このページにはスタイルシートで表示調整する方法も記述されていますが、私としては今は満足していますので、今回はパスします。いずれお世話になるかもしれません。

気になることはあります。第1階層のページやブログにはパンくずは必要ありません。フロントページのパンくずを非表示にする方法が掲載されているページがありました。

おなじないをコピペした結果、無事にフロントページからパンくずは消えました。なお、別のページに記載されていたおまじないでは「このページは動作していません」という悲惨な結果に終わりました。

せっかく導入しましたから、すぐに外すことはしませんが、このブラグインは使わないという結論に至るかもしません。

ページ内目次の設置

WordPressでは、ブログはpost、固定ページはpageと呼ばれているようです。「賽は投げられた」は固定ページで作成しました。将来的には、旧「セットポジション」のカテゴリーに収める第3階層のページになるはずです。

「賽は投げられた」のページは、旧「セットポジション」の中では短編に属します。ページ内目次はなくても構わないわけですが、もう少し長くなると目次も不可欠になってきます。

まあ、そこは試行錯誤用のページですから、HTMLをいじって手動でページ内目次を設置してみました。旧「セットポジション」ではname属性を使っていましたが、Bloggerではid属性を用いていました。

同じ効果が得られるのなら4文字のnameより2文字のidです。id属性で無事に成功したわけですが、どうやらページ内目次を自動生成してくれるプラグインがあるようです。

というわけで、「Table of Contents Plus」というプラグインをインストールしてみました。インストールして有効化したところまではよかったのですが、肝心の使い方がよくわかりません。

私が「賽は投げられた」のページで目次を入れたい箇所は、注釈部分の下で横線の上です。Table of Contents Plusの初期設定では、ここに目次を表示させることができません。次のページに貴重な情報がありました。

ショートコードを使うことで、任意の位置に目次を入れることができるようです。というわけで、師匠に学んだ私は「次の投稿タイプのときに表示」のチェックはすべて解除して、ショートコードで目次を表示させることにしました。

このサイト、ロゴの下にパンくずリストがあり、右側ではカテゴリーが斜めに表示されています。しばらく師匠としてお使えすることになるかもしれません。

さて、次の課題は目次をセンタリングできないかということです。それらしいページはありました。

このページの記述どおりに「screen.min.css」を編集してみましたが、相変わらず左寄せのままでした。目的が達せられなかったため、センタリングはひとまず断念して、CSSは元に戻しました。

なにしろ、CSSの編集画面には次のような警告が示されます。

警告: 現在有効化されているプラグインの変更はおすすめしません。変更によって致命的なエラーが発生した場合、プラグインは自動的に無効化されます。

初心者には無視できない警告です。たじろいでしまいます。もともと旧「セットポジション」の目次は右寄せのリスト表示でした。

ところで、「賽は投げられた」のページには、「カウント０－１からの２球目」という記述がありました。ボールカウント表記はこの10年の間にボール先行に変わっています。「初球ボールのあとの２球目」に改めました。

今後、旧「セットポジション」からの焼き直しをうｐするときは、この点に注意しなければなりません。

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

昨日は引用部分のフォント調整に挑みました。まずは、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>ぐらいは手打ちでもさほど問題はありませんけど…。

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

サイトアイコンの設置

サイトアイコンを設置したのは昨日です。一般的にはファビコンと呼ばれているはずですが、私はすでに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月間近です。私は夏になると動きたがる傾向があるのかもしれません。