今回行なうのは、毎度おなじみ（？）AFFINGER4のアップデートです。
私が現在使っているAFFINGER4のバージョンは「ver20170731β」。
8月末から9月末までのほぼ一ヶ月もの間、ブログカスタマイズをサボっていたことがたたり、AFFINGERはあれよあれよとバージョンアップを繰り返し、「ver20170820」→「ver20170905」→「ver20170922」（今ココ）となんだかスゴイことになっちゃってました(^^;
最新版を入れればそれで事足りる話なんですが、私はなんか順番通りに進めないと気がすまない性質なので、アップデートもキッチリ３回に渡って行なおうかなとも思ったんですが、AFFINGER4は最新版が出たら古いバージョンがダウンロードできなくなる仕様だったようで、ver20170820 を取り逃してしまいました。
…私の記憶違いかもしれませんが、以前は最新版が出ても一ヶ月くらいは一つ前のバージョンも最新版と共にダウンロードできたような気がしたんですが…
まーこれはこまめに情報収集をしていなかった自分が悪いですね。
仕方が無いので、ver20170820 は飛ばして、ver20170908（ver20170905の修正版）にアップデートしてから、現時点での最新版である ver20170922 にしようと思います。
AFFINGER4ver20170908にアップデート
まずは１度目のアップデートで ver20170731β を ver20170908 にアップデートします。
この間に ver20170820 があったので（私が取り逃したやつ）、その分も含めた更新内容を見ていきましょう。
AFFINGER4ver20170820更新内容
- モバイル用ヘッダー画像の設定
- サムネイル画像の枠線カラー設定
- h2及びh3タグのボーダーのサブカラー設定追加
- 「ヘッダー（及びフッター）にキャッチフレーズを表示しない」の修正 他
続いて、
AFFINGER4ver20170905更新内容
- Googleフォントをどれでも選択できるように
- インフィード広告の簡単設定
- 記事作成者のプロフィール紹介機能
- サイト管理人の紹介ウィジェット機能
- 他
以上となっております。
…いや～、なんかお腹いっぱいって感じですね（笑）
8月の方はモバイル向け機能の拡充、9月の方は広告機能の拡充が特に目を引きますかね。
この中で私の、というかこのサイトのカスタマイズにおいて必要となってくるのは、
- モバイル用ヘッダー画像の設定
- サムネイル画像の枠線カラー設定
ですかね。 どちらも8月の新機能。
さて、一つずつ新機能を見ていきたいところなんですが、自サイトで使わない機能まで見ていったらまーた冗長な記事になってしまうので、当サイトでやっていったカスタマイズにのみ絞って話していこうと思います。
『WinMerge』で新旧コードの比較
WordPressテーマのアップデートをしたらまずやることは親テーマのコードの確認ですね。
私は子テーマを利用しているので、元となった親ファイルにコードの変更があった場合、そこを自分で見つけ、子テーマに書き加えねばなりません。
今まではWordPress内 ［外観］>［テーマの編集］でコードを開き、子テーマのファイルと最新版の親テーマのファイルとを別ウィンドウで開いて、２つのコードを並べてジーッとにらめっこしていくという地味につらい作業をしていました。
しかも子テーマの方はカスタマイズ済みのコードなので、親テーマとは異なっている部分が多々あります。
それでもカスタマイズ前の構造を思い出しながら見比べていました。 他にやり方を知らなかったので。
しかし今回はアップデートを溜め込んでしまっているため、連続のアップデートとなります。
このやり方は今までは月１回程度だったから我慢できていた作業なので、今回の連続というのは正直キツい。
そこで今回は別のやり方での見比べを検討してみることにしました。
私は子テーマのファイルをカスタマイズする度にメモ帳にてphpファイルをローカル保存していたのですが、phpファイルをただのテキストファイルとして開けているなら、オリジナルのテーマファイルもテキストファイルとして開けるんじゃないかと気付いたんですよ。
そして今までzipファイルのままだったAFFINGER4のテーマファイル。 WordPressにアップロードするだけならzipのままでいいので、これに手を付けたことはありませんでした。
この中にあるであろうphpファイルに用があるので、解凍してみました。
そしたら出るわ出るわ、phpの山が。
その中から子テーマと同名ファイルを探して開いてみたんですが、そこに記述されてるコードは確かに親テーマの物なんですが、改行がほとんどされていないため、横にびろーーんと伸びた大変読みにくい物でした。(llﾟдﾟ)
よくよく見てみると、どうやら改行する部分には「↑」の記号が使われているようです。
これまた仕方ないので、「↑」に合わせて改行を入れ続けていきました。
私が一番手を加えていた「single-type1.php」の改行挿入作業は15分っくらいかかりましたかね（汗）
いや～～、やってられん！！
（まぁやったんですけど）
なんか前よりも作業内容がメンドくさくなっていることに今さら気付いた私は、更なる方法を模索するのであった。
結局のところ見比べるのはただのテキストファイルなんだから、なんかそんな感じの見比べツール？的なので一発で読み取れんじゃね？？
という漠然とした私の読み。むしろ勘。
で、そんな感じでアバウトに検索かけてみたところ、
ありましたよ。
ドンピシャですよ。
「2つのファイルやフォルダを比較して相違点を色分け表示できるプログラマー向けの開発支援ソフト」
その名は『WinMerge』！！（←読めない）
容量わずか5.6MBのフリーソフト。 しかも日本語版有り。
さっそくダウンロード→インストールしまして、特に説明を見なくても使えそうな感じだったので、オリジナルのphpファイルを新旧２つ読み込んでみたところ、一瞬で「同一ファイルです」の表示が！！
それでは私がカスタマイズしたファイル、「single.php」と「comments.php」、そして「single-type1.php」の新旧親テーマファイルを比較してみました。
single.php―これはまぁ比較ソフトを使うまでもないですね。 コードが元々少ないのでパッと見で判別できます。
comments.php―これも変化はないでしょう。 このブログでいつか書きましたが、ここはSTINGER時代から変わってないようなので。
問題はここ。 single-type1.php。 子テーマの方はそれなりに手を入れてしまっていますが、WordPress上ではなくローカル上でなら、新旧の親テーマ同士で比較することができるので、今回のバージョンアップで変更があった場合だけ、そこを子テーマに反映させればいいだけってわけですね。
とは言っても、今まで何度かコードの見比べをやってきましたが、私がAFFINGER4で子テーマを使い始めてからここに変更があったことは無いんですよね。
ま、だからと言って今回やらないというわけにはいきませんので、ちゃっちゃとやって「同一ファイルです」の表示を見て安心したいところです。
が、比較結果は何やらコードの一部がハイライトされてます。 「同一ファイルです」の表示も無し。
これはいったいどういうことだ？とハイライト部分を見てみると、 "記事を書いた人" という一文が追加されてました。
これは…アレですね、9月に追加された新機能の一つ、
３．記事作成者のプロフィール紹介機能
を読み込ませるためのコードですね。
各投稿記事下に表示できると公式にあるので、この機能は個別投稿用のphpファイルである single-type1 に追記されたようですね。
いや～～見つけられて良かった！！
そして危なかった！ 自分の目だったらこんな一文見落としていたかも(；＾ω＾)
この一文を子テーマの single-type1 の親テーマと同じ場所にコピペして、今回のファイル比較完了！(｀・д・´)ゞ
これは最高のツールを手に入れてしまいましたね！！
アップデートってちょっと億劫だったんですが、この『WinMerge』（←読めない） のおかげで親テーマの変更点が一瞬で分かるので、子テーマを使っていても安心ですね(^^)
子テーマをカスタマイズしていて、9月のアプデの新機能、投稿記事下への執筆者プロフィールが表示されない、なんて人は「single-type1.php」をチェックしてみると解決するかもしれません。
「ヘッダー右ウィジェットをフッターに表示しない」の修正
既に3600字となってしまっていますが… ここからが今回のアップデートのカスタマイズ記事です(-_-;)
まずは簡単なところから。
前回のAFFINGERアップデートの記事「『Broken Link Checker』プラグインでリンク切れを確認＋AFFINGER4アップデート」を書いた時点（ver20170731β）での新機能であった「ヘッダー右ウィジェットをフッターに表示しない」機能なんですが、この過去記事で書いた通り、挙動がおかしかったんですよね。
「ヘッダー右ウィジェットをフッターに表示しない」にチェックを入れると表示され、チェックを外すと非表示になる、という逆の設定になっていました（笑）
今回の（あるいは前回の）バージョンアップによりこれが修正されていました。
ただし、アップデート後に設定がリセットされたらしく、再びヘッダー右ウィジェットが表示されてしまっていたので、AFFINGER管理画面より今度こそチェックを入れておきました。
「引用部分の背景色」を設定
こちらも更新内容としては告知されていなかった点なんですが、先に載せた前回のアップデート記事の中でも書いていた、「引用風ボックス」が全部白なためほとんど見えない件について対応されたようですね。
デフォルトで真っ白な点は変わっていませんが、テーマカスタマイザー内［各テキストとhタグ］>「引用部分の背景色」より色が付けられるようになってました。
（っていうか［オプションカラー］の項じゃないんですね。）
ただ、私としては引用マーク（？）である「”」に色が付くことを期待していたのですが、これは引用した箇所を色付きボックスで囲むだけのようですね。（「”」自体は白のまま）
…ここまで書いといて今さらなんですが、この「引用部分の背景色」って今までありませんでしたよね？
自分の過去記事を信じて今回の記事を書いてますが、正直ちょっと不安(；´д｀)
公式サイト内でも真っ白だった、と前回書いているので多分間違ってないと思うのですが…
「記事エリア背景色」の透過設定
もしかしたら自分の記憶違いという可能性もあるので、これを機に他の機能も見直してみることにしました。
［基本エリア設定］>［記事エリア背景色］内「背景色透過」って項も初めて見た気がするんですが、これも告知なしに追加されていた新機能ですかね？
透過率の設定項目なんてAFFINGER内のどこにも見た記憶がありませんので、たぶん新機能だと思います。 どのバージョンで追加されていたかまでは分かりませんが。
「投稿日時・ぱんくず・タグ」のデフォルトカラー変更
これは新機能とかじゃないんですが、［各テキストとhタグ］>「投稿日時・ぱんくず・タグ」のテキスト色のデフォルトのカラーが変更されていました。
AFFINGER4（あとSTINGER）のデフォルトではここ薄っすいんですよね。 今でも薄いままのサイトを多く見かけますね。
私はカスタマイズの参考にずーっとAFFINGER4製サイトをチェックし続けているんですが、最近AFFINGER4に乗り換えたサイトなんかではここが少し濃くなっていたんですよ。
最初は自分でカスタマイズしたんかなぁーなんて思っていたんですが、新しめのサイトを複数見比べるとおんなじ濃さだったので不思議だったんですが、その謎が解けました（笑）
h3タグを再再設定
さて、5000字となってしまいましたが、いよいよ今回の（告知済みの）更新内容のカスタマイズに入っていきます。
３．h2及びh3タグのボーダーのサブカラー設定追加
からやっていきます。
と、いっても私はhタグデザインは今のでとりあえず満足しているので、サブカラーを使う予定はありません。
公式の説明を見てもスクショが途中で切れててよく分かりませんし(；´ｪ｀)
なので私がやるのはh3タグの再再設定です。
なぜ再が２回かというと、前回のアプデで１回再設定させられているからです。
今回のアプデで再びhタグに改変が入ったため、また一部のhタグの設定がリセットされていました。
ウチはまたしてもh3タグが。
文字色がテーマカラーになっていたので、黒に戻してここは設定完了。
一部hタグデザインで背景画像の非繰り返し設定が無効
せっかくなので、他のhタグの設定も見直しておきましょうかね。
前回のアプデ記事でも書いたように、はっきり言って前回のアプデでのhタグデザイン変更は改悪だったと今でも思っていますから。
で、hタグの新デザインを前回同様に試していったのですが、「2色アンダーライン」と「囲みドットデザイン」にした場合、「背景画像を繰り返さない」の設定が無視され、繰り返して表示されました。
…実はコレ、前回からあったんですよね…
前回はβ版だったということもあり、あんましボロクソ言うのは悪いなぁと思って書かなかったんですよ。 私には関係ない設定だったというのもありますが。
h2・h3タグの背景色も透過不可に
えー、続きましては、これまた前回の記事でもかきましたが（何度も同じリンクですみません）、h4タグの背景色「だけ」透過に設定できない、という問題があったのですが…
なんと！ この度！
h2タグとh3タグも背景色を透過にできなくなりました！！
…どういうことなの…(´ｪ｀)
h1タグの上下ボーダーの太さが違う
こ・れ・も・前回の記事で書きました。
いや、これに関しては前回修正された点でして、唯一hタグで良くなった部分だと思っていたのですが…
h1タグだけは「ボーダーを上下のみにする」に設定した際の上と下のボーダーの太さがズレたままでした。
これはもしかしたら私が前回見落としていただけかもしれません。
たぶんそうですね。 h2以下のタグはちゃんと前回から修正されていますから。
…結局今回もボロクソ言っちゃったかな？
ついでに言わせてもらうと、今回さも新機能かのごとく追加されたサブカラーってヤツなんですが、コレ前回付け忘れただけですよね？w
だって「2色アンダーライン」とかあるのに1色しか設定できないとかおかしいでしょう。
「囲み＆左ラインデザイン」とかこんなん誰が使うんだってレベルの出来でしたし。
残念ながら、今回もhタグに関しては改悪だったと言わざるを得ないですね…
今までできていたことを急にできなくするのマジやめて…
サムネイル画像の枠線カラー設定
えー、気を取り直して、今回のアプデの新機能を設定していきましょう。
カスタマイザー内 ［オプションカラー］>「サムネイル画像」より、一覧のサムネイル画像の枠線の色を設定できるようになってますね。
これは嬉しい！！ ホントに！！
私は見ての通り、記事に画像をまったくと言っていいほど使っていないのですが、一覧画面用にサムネイル画像だけは設定するようにしているんですよ。
しかし今のところ記事はほとんどがWordPressのカスタマイズ備忘録…
これにはどんな画像を設定すればいいのか分かりません。
とりあえず、その時やったカスタマイズのスクリーンショットでも載っけて、なんとかみっともない「NO IMAGE」表示だけは避けていたのですが…
サイト内のスクショをサムネにしてしまうと、記事エリア内を切り取った画像に設定した時、それが表示される一覧画面もまた記事エリアであるため、画像と背景の境目が全く無く、完全に同化してしまうんですよね(^^;
それが今回のアプデで解消されたという訳です！
一応、自分でPhotoshopを使って画像に枠線を入れてみようとした事もあったのですが、フォトショに不慣れなため上手くいきませんでした(>_<)
そんで実際に設定してみたんですが…
思ってたより枠線が太いなぁ。
公式では丸型サムネで使用されてますが、こっちは違和感なく馴染んでますね。
丸型サムネを使う予定はありませんし、それでも今までのよりは良くなったと思うので、この機能だけでも個人的には良アプデだったと言えますね((*´∀｀*))
モバイル用ヘッダー画像の設定
今回の更新の目玉機能でしょうね、これはぜひとも使用してみたい！
まだこのサイトは運営準備中であるため、モバイル用の表示に関してはあまり手を付けていません。
モバイル用の設定を確認するためにはスマホによる実機確認は必須ですし、このAFFINGER4はレスポンシブ対応テーマなので、PC用として作ったとしても、ちゃんとスマホ表示に合わせて自動でなんやかんやしてくれるはずです。
それでも、PCの大画面でしか表示されない機能なんかもあるので、その部分に関してだけは今のうちから手を加えていこうと思っています。
それが今回のモバイル用ヘッダー画像と関わってくるのです。
今までも何度も悩んできたキャッチフレーズですね。
PC用表示ではサイトタイトル横に。
モバイル用表示ではとりあえずでヘッダー下に。
「ヘッダー右ウィジェット」はPC時しか表示されないんですよね。
それでスマホ用のキャッチフレーズの表示法にずーっと悩んでいて、未だその答えは出せていませんでした。
そこで今回のモバイル用ヘッダー画像ですよ！
だいぶ前、このサイトのカスタマイズ初期にヘッダー画像の表示法にそれはもう悩んだ時期がありました。
あれもダメこれもダメで、色々な表示スタイル（キャッチフレーズも含む）を検討していったのですが、その時の案の中に、ヘッダー画像の中にキャッチフレーズを落とし込む、というのがあったのを思い出しました。
せっかく今までのカスタマイズを記事という形で投稿してきたので、過去記事を遡ってみると、「ヘッダー画像のデザイン」という4月の記事内で書かれていました。
こちらが不採用となった理由が、ヘッダー画像内にキャッチを書き込むと、スマホ表示になった際に画像が縮小されキャッチが読めなくなるから、と書かれていました。
だがしかし！ あれから約半年、この新機能のモバイル用ヘッダー画像を使えば、スマホで見れるキャッチフレーズ付きヘッダー画像が作れる、というわけなんでさあ！！
…半年かぁ… いつまで準備中なんだろね、このサイトは？
さてさて、前置きはこんぐらいにして、モバイル用ヘッダー画像を作っていきましょう。
例によってまだ運営準備中ということで、用意する画像はPC用同様に仮の画像でいいですね。 とりあえずはちゃんと機能することさえ分かれば良い。
ここで悩むのが、スマホの画面サイズですね。
普通に考えれば、スマホは画面が小っちゃいので、モバイル用ヘッダー画像も当然小っちゃくなるような気がしますが…
使用している機種なんかによっても変わってくるのかもしれませんので、きちんと調べてみました。
えーっと、細かい原理？だとかなんとかは置いといて、具体的なスマホ表示用のヘッダー画像のサイズはというと…、
iPhone最新機種のディスプレイサイズ×Retina
とすれば良いらしいです。たぶん。
Retina（レティーナ）ってのは…えっと…よく分かりません（汗）
興味のある人は自分で調べてネ！（いつものパターン）
とりあえずこのRetinaってのは機種によって２倍か３倍となっているようです。
そんで肝心のiPhone最新機種のディスプレイサイズはというと…
2017年10月現在で、iPhone 8が414×736、iPhone Ⅹが375×812 らしいですね。
そしてRetinaは共に３倍なので…
スマホ表示用ヘッダー画像は、iPhone 8なら1242×2208、iPhone Ⅹなら1125×2436で作成すれば良いということになりますね。たぶん。
私はヘッダー画像を画面いっぱいにまで設定する気はないので、必要なのは横幅だけ。 なので、サイズの大きい方を基準にして、1242px以上で作れば良いわけですね。
1242pxって…
今私が使ってるPCモニターが1280pxなので、ほとんどPCと変わりませんね。
スマホ用のは小さい画像で済むから容量を節約してモバイル表示を速くできるかも―なーんて考えていたんですが…
ぜんぜん間違った考えでしたね(-_-;)
あと、もしかしたらスマホを横向きで表示させた時とかも考えた方がいいのかもしれませんが…
そうすると2208px（iPhone 8）にもなってしまうわけですから、今設定してあるPC用ヘッダー画像よりも大きくなってしまいますね∑(´Д｀ )
あ、そういえばAFFINGER4のヘッダー画像って推奨サイズが2200pxでしたよね？
以前は何でこんなに大きいんだろうなんて思ってましたが…
このスマホ横向き表示のサイズに合わせて設定してあったんでしょうか？
それでは、モバイル用ヘッダー画像の横幅は1242px… は半端なので、PCと同じ1280pxに合わせておきますかね。
ほんで完成したのがコチラ↓
PC用ヘッダー画像
モバイル用ヘッダー画像
同じ写真を使ってしまったのでとても分かりにくいですね(；＾ω＾)
ほ、ほら、文字の色が違うよ？
散々言っていたキャッチフレーズについてなんですが、今回は入れませんでした。
とりあえず今はAFFINGERアップデートの新機能を試すのが目的でしたからね。
モバイル用ヘッダー画像が設定できただけで良しとしましょう。
おわりに
っしゃー終わった！
この程度書くのに３日かかってしまいましたよ…
ブログ書くのサボってたので書くの遅くなったぽい( ´△｀；)
今回はAFFINGER4のアップデートをしましたよってだけの記事。
新機能のスマホ用ヘッダー画像と、あと一覧サムネ画像に枠線を付けたってだけですね。 作業量としては大したことやってませんね。
あ、あとver20170922（最新版）へのアップデートも済ませておきました。
こっちはただの修正版なので特記なし。
新機能はすばらしい、ホントーーにすばらしいものだったんですが…
やっぱhタグの改悪は残念ですね…
他の有料テーマとの差別化を図ろうとしているのかもしれませんが、正直もういじらないでほしいです……
最後に次回予告！
次はいよいよ当サイト初となるガンプラレビューをしてみたいと考えています。
実際にレビューをやってみんと分からんことだらけなので、まずは１回、って感じですね。
ずーっと空っぽだったギャラリーページとレビューページをそろそろどうにかしておきたいですし、カテゴリーやタグの設定もどうしようか決めておきたい。
でも問題はそもそも撮影がちゃんとできるか、なんですよね…
カメラの使い方もまだサッパリですし、撮影環境もまるで整っていない。
なんでも照明がとにかく重要らしいんですが…
あとレフ版？デフューザー？ まるで分からん(；´ｪ｀)
もしなんか足りない物があったらまた買い足していく必要があるので、次の投稿がなかなか無かったら、なんかしら手間取ってるんだと思ってください（笑）
あ、ちなみに私の技量はこんなモン↓なんで、まっったく期待しないどいてください(^^;
