秋のカスタマイズ以降もちょこちょこ変更してた
R0010207.jpg by bizmac
ブログは常に試行錯誤中。りく（@Rikuma_）です。
ちょうど1ヶ月前の11月、「秋のブログカスタマイズ祭り第2弾」と称して当ブログのデザインを変えたり、新機能を追加したりしました。（ちなみにカスタマイズ祭り第1弾は10月にやってた）
【参考】りくまろぐ秋のカスタマイズ祭り・ちょこちょこ変更してみました
【参考】今回は大苦戦！秋のブログカスタマイズ祭り第2弾【PC編】
【参考】初のスマホ版改造！秋のブログカスタマイズ祭り第2弾【スマホ編】
この時の「一番の目玉」はスマホ版を表示させるプラグイン「WPtouch」の大改造。相当に苦労しましたが、欲しかった機能の大半は実装できたし、満足感もありました。
しかし、PC版・スマホ版ともに足りない機能や見直したい機能も見つかり始め、12月に入ってから再びチョコチョコとカスタマイズ作業を水面下でやってた。
全ての機能が完成してからお披露目するつもりだったけど、昨日書いた「スマホ版のアクセス数がアクセス解析に反映されてない」というビックリな不具合が発覚。
これを修正し、アップロードして本番環境でチェックしていくうちに、他の機能も本番環境にアップロードしないとおかしな表示になってることに気付いた。
ということで、まだ全て作業は終わってないけど現時点で完成してる機能を全部お披露目しちゃいました。
秋のカスタマイズ編での詳細エントリーを全部書き終えてないうちに新機能の解説を書くのもどうかと思ったけど、あまり深く考えずにご紹介。いずれ詳細エントリーは書いていきますね。
その1：SNSボックスを左側に固定し、アニメーション表示を実装（PC版のみ）
↑これまでは先頭のアイキャッチ画像のすぐ下に横並びで置いていた「はてブ」「Twitter」「Facebookいいね！」などのSNSボタンボックス群を、画面の左側に縦並びで固定表示させるよう変更しました。
この機能、以前にプラグインでやりかけたのだけど上手くいかず断念してた過去あり。今回PHPファイルに直接コードを書いたらスンナリ成功しました。やってみるもんだ。
で、ただ固定表示させるだけでなく、なんか遊んでみたいなと思ったので、jQueryを使ってアニメーション表示させるよう工夫してみました。
ページが最初に表示された時、SNSボタンは消えてます。ある一定の位置までスクロールするとSNSボックスがビョーンと出現する仕組み。
これは以前に設置したPC版の右下にある「トップにニュルッと戻るボタン」のテクニックを応用したもの。
jQueryによるアニメーションの動きは、今や個人的に「jQueryの師匠」と崇拝しているおつぱさん（@OZPA）の以下の記事からインスピレーションを受けて作成してみました。
SNSボックスが出現する時、逆に上へとスクロールしてSNSボックスが画面の外に消えていく時で、アニメーションの動きをそれぞれ変えてます。どんな動きをするかはPCブラウザで見て頂ければ嬉しいです。
その2：概要文（抜粋文）をヘッダー部分に追加（PC版・スマホ版）
↑「秋のカスタマイズ祭り第2弾」の際、本文と重複する内容が多いという理由で一度は表示させないようにした概要文（抜粋文）を今回復活させました。
特にウォーキング記事の場合、歩いた日付を抜粋文にしか入力してなかったこともあり、トップページに戻らないと日付が確認できず不便だったのと、今回SNSボックスを左に移動させたのでスペースの空きが出来た、ってのが理由。
↑スマホ版は今まで抜粋文をどこにも表示させてなかったので今回新たに追加しました。
その3：右サイドバーの人気記事ランキング画像をアイキャッチに変更（PC版のみ）
↑これまでは順位を表す数字画像を表示させてましたが、それを廃止。各記事のアイキャッチ画像を表示させるよう変更しました（月間・デイリーとも）。
画像が小さくて「何の画像？」と見づらいのですが、画像を見てもらいたいというよりも、視覚的な変化を与えたいというのが主旨なので、意図的にこのサイズにしてます。
プラグイン「WordPress Popular Posts」のパラメーター設定を工夫することで、いろーんな表示方法に応用させることが出来ます。これが今回のカスタマイズで一番面白かった点かも。
その4：カテゴリー毎の人気記事欄を文末と右サイドバーに新設（PC版のみ）
最近いろんなブログで取り上げられていて、効果もありそうな「いま見てるカテゴリーでアクセス数の多い記事リスト」を当ブログも実装することが出来ました。
↑これが本文の最後（関連記事のすぐ下）に表示される「ウォーキング」カテゴリーの人気記事トップ10。月間アクセス数の多い順に10個を2行で表示させ、見出しにはカテゴリー名称も表示させるようにしました。
↑こちらは右サイドバーにウィジェットとして追加した同様の機能。
「人気記事ランキング」のテクニックを応用し、「WordPress Popular Posts」のパラメーターを使い分けて抽出・表示させ、あとはCSSで表示を変えてるだけ。やってることはほとんど同じです。
ただ、本文最後の「5個×2行」欄はちょいとばかし工夫が必要だったので、PHPの「連想配列」という機能を勉強して内部的に細工してみました。連想配列をあんまり理解できてなかったので今回イイ勉強になりました。
その5：iPhoneアプリのボタンを新設（PC版・スマホ版）
このボタンも採用されてるブログが最近増えてるみたいです。
▲ こんなん作りました。普通の文字をCSSで「ボタンっぽく」加工表示させてるだけです。なのですぐ文字を変更できちゃう。「お正月はおせちもいいけどアプリもね」とかにも変更できる。しないけど。
この「ボタンもどき」を常に表示させるため、ブックマークレット「AppHtml」も再加工しました。今後紹介するアプリには全てボタンもどきが付きます。
↑スマホ版でもボタンもどきが表示できました。「WPtouch」のCSSファイルにPC版の設定をコピーしただけ。
その6：関連記事欄のデザインを少し変更（PC版のみ）
↑関連記事欄には最大10個の関連記事を表示させてるのですが、のりごとーさんのブログでの関連記事表示がカッコいいな～と以前から思ってたので、マネさせて頂くことに。
1つ1つの関連記事の背景色をグレーにし、間隔を均等に開けるように変更しました。
しかし記事タイトルの長さによって背景色の高さがバラバラになり、とてもカッコ悪くなったので調べたところ、CSSで「overflow:hidden」を設定すれば直ると解説があったのでやってみると、見事に直った。
カテゴリー毎の人気記事一覧も同じデザインで統一させてます。
その7：カテゴリー名、タグ名をアイキャッチ下に追加（スマホ版のみ）
↑これは前回のカスタマイズで宿題だった機能。前回もやろうとしてたけど表示が上手くいかなかった。今回は上手く表示できました。
ちょっと文字が小さいのでタップしづらいかなぁ。タップするとそれぞれ「カテゴリー一覧」「タグ一覧」が表示されます。
その8：SNSボタンを大きいサイズに変更（スマホ版のみ）
↑ようやくスマホ版もPC版と同じ、大きいサイズのSNSボタンを設置できました。PC版のソースをそのまんまコピペしただけ。CSSでの表示が最初うまくいかなくて、相変わらずCSSが分かってないなぁとヘコみましたが、なんとか完成。
今後の宿題
冒頭で「全部の機能が完成してからお披露目したかった」と書いたのですが、スマホ版の関連記事表示がまだ完成してないんですよ。これ苦戦してます。
プラグインのZenbackをスマホ版のためだけに導入しよっかな～ってのは今も検討中。自分で作れるのならそれが一番イイんだけど。どうせなら自力で作ってみたいじゃないですか。ここまで作れたんだし。
というわけで今回も駆け足でカスタマイズ変更内容のみをズラーっと書いてみました。補足できるところは後日エントリー書きます。