SNSボタンの設置とアクセスカウンターの導入

投稿日:2018年3月6日

今回やっていくブログカスタマイズは、「SNSボタン」と「アクセスカウンター」を設置すること。

私が使用しているWordPressテーマ『AFFINGER4』ではSNSボタンの設置はデフォルト機能として備わっているので簡単なはず。
なのでまずはこちらから取りかかっていきましょう。
 

SNSボタンの設置

SNSボタンの設定は、[AFFINGER4管理]画面から行なえます。
ここの「SNS設定」から、設置したい場所・あるいは設置したくない場所にチェックを入れるだけ。
 

このサイトではSNSボタンは一つも設置していませんでしたが、もともとAFFINGER4の設定では設置されているのがデフォだったはず。

こんな未完成状態のサイトはあまり人に見られたくなかったので、設定をいじって全て非表示にした記憶があります。

設定画面を見るとトップページ下と投稿ページ下のSNSボタンを非表示にする項にチェックが入っていたので、おそらくこの2箇所がデフォルトの表示箇所ですね。
 

AFFINGER4でSNSボタンを設置できるのは、
●トップページ下
■投稿ページ下
■投稿ページ上
◆固定ページ下
◆固定ページ上(※固定ページ下に表示している場合のみ)
の6箇所。

これらの設定を一つずつ試していって、気に入った箇所にのみ設置することにしました。
 

で、その結果
●トップページ下
■投稿ページ下
の2箇所がしっくりきました。

えぇ、デフォルトで表示されてた箇所ですね(笑)
 

そもそも記事の上のSNSボタンってどういうときに使うんでしょ?
記事を読む前から「この記事拡散したい!」なんて思うこと無いような…?

 

そんでこれが設置してみたSNSボタン

トップページ下SNSボタン

非常ーによく見かけるデザインなんじゃないでしょうか。
このデザインを見たらまず間違いなくSTINGER系テーマでしょうねw
 

一応、SNSボタンをアイコンのみにする「シンプル」という表示形式もあり、私としてもこちらの方が好みなんですが、SNSを全くやったことない身としてはアイコンだけの表示になってしまうと何がなんだか分からなくなってしまうのでね(;´д`)

というかそもそもこの「SNSボタン」ってのは何をする機能なのだ?
「拡散」って言葉は聞いたことあるけど…

押すとどうなるん?
トップ下と記事下にあるボタンとで機能は変わるの?

…もうおじさんは世界の速さについていけません。
押したきゃどうぞ押してってくだせぇ。
 

優しくね?

 

アクセスカウンターの導入

ここまでで大体1000字なので1記事分は書けたかなとも思うんですが、たいした作業もしていないので、続けて「アクセスカウンター」を設置しようと思います。
 

アクセスカウンターの設置法には目星を付けてあったんですよ。
私が利用している『ロリポップレンタルサーバー』の機能の中に「カウンター作成」というのがあったので。

で、早速カウンターを作ろうとしてみたら、なにやら注意書きが…

カウンターは、HTTPS(SSLで保護されたページ)でのご利用に対応していません。

なん…だと…

このサイトは去年の8月くらいにロリポップが「Let's Encrypt」だとかに対応したことで誰でも独自SSL化できるっつーことで自力で頑張ってHTTPSにしたんですが…
まさかそのせいでアクセスカウンターが使えなくなったとは…
 

さて、困りました。
こうなってしまってはやはり頼みの綱はプラグインですね。
すでに16個も入れてるのでできれば頼りたくはなかったのですが…

ネットで調べてみると数件見つかったのですが、私が使いたいのはアクセスカウンターをウィジェットとして設置できるプラグインなんですよね。
先のロリポップのカウンターとか実は無理やり使ってみようとしたんですが、なんか「コードを表示したい場所に張り付けてくれ」だとか意味分からんこと言われたので(´゚д゚`)ポカーン

で、その条件で見つかったのが 『WP Hit Counter』 というプラグイン。
が、すでに配信停止していました。
 

改めて検索してみると、『Hit Counter Max』 というプラグインが見つかりました。
こちらは現在も配信中でした。

が、インストールしてみると最終更新は3年前
「注意: このプラグインは現在使用している WordPress のバージョンではテストされていません。」の文字にかなりの不安を感じますが…

よくよく調べてみると、アクセスカウンタープラグインで調べて出てきた情報が2014~2016年と古いものばかり。

…ま、そりゃそうですよね。
アクセスカウンターなんて昔むかしのホームページ時代の物ですもんね。
「キリ番」だとか「Web拍手」だとかをみんなが使っていた時代。

だが!私はその時代が好きだった!
やたらピカピカするアイコンや自作のボタンが所狭しと並んでいて、テンプレートも定まっていなくてサイトを移動すると操作法がまるで違っているのが当たり前。
とにかく個性的だった。 良い意味でも悪い意味でも。

私はその時代に憧れがあるので、あえてちょっと古臭い、レトロ感を出していきたいんよね。
そのためにもアクセスカウンターはぜひとも導入しておきたい。
 

…ちょっと話が脱線しましたが、とりあえず『Hit Counter Max』でアクセスカウンターをウィジェットとして設置することはできるようなので、長らく更新されてないプラグインですが使っていこうと思います。

しかしカウンターの設置の前に一つ問題が。
それは設置する場所です。

もちろんウィジェットとして配置できる場所に限定されはするんですが、カウンターの他にも一緒に設置したいものがありまして、それらがウィジェットの範囲内に収まるのか、そもそも一緒に置けるのか、など先に試してみないといけないことがあるのです。

…これにとにかく時間かかった(ll゚д゚)
 

ヘッダーエリアにメニューを配置

さて、プラグインを利用することでアクセスカウンターを置くことはできそうなんですが、肝心の置き場所をまだ決めれていません。

現在候補となっているのが、

PC版サイト写真

このサイトをPCから見た時にのみ表示される右上のエリア、この写真では黄色っぽい背景にサイトのキャッチフレーズ(説明文)が入っている部分にアクセスカウンターを設置しようかなと考えています。

この黄色い部分、ヘッダーエリアの右側、ウィジェットで言うと「ヘッダー右ウィジェット」になるんですが、ここに配置するものが無くなったんですよね。

2週間ほど前の「ヘッダー画像の完成」の記事で行なったカスタマイズにより、このサイトのキャッチフレーズはヘッダー画像の中に落とし込むことに決めたので、それまでキャッチの表示に使っていたこのエリアがまるっと空いたわけです。
これを有効活用しない手はない!
 

ならさっさとここにアクセスカウンターを置きゃいいだろって話なんですが、前回の記事「モバイル用ミドルメニューとアコーディオンメニューの設定」 で完成させたモバイル用表示を見て思ったんですが、モバイル版だとこのサイトの全8つのメニューは右上のアコーディオンメニュー(三本線マーク)を押して展開させれば見れるのですが、PC版だとこの8つのメニューを表示させるにはフッター(画面最下部)までスクロールさせないと見れない仕様なんですよね。

モバイル版サイト写真

↓        ↓        ↓

アコーディオンメニュー展開写真
アコーディオンメニュー展開時

これではなんだかモバイル版の方がPC版より利便性が上になってしまっている気がするんですよねぇ。
 

というわけで、空いたヘッダー右エリアにPC版で表示しきれていない残り2つのメニューを配置すればPC版の利便性は大きく上がるだろう、という考えです。

理想としてはメニュー2つを上段に横並びにして、下段にアクセスカウンターを置ければ最高ですね。

最悪メニューを縦並びにしか配置できず、それによりカウンターを設置するスペースが足らなくなってしまった場合、アクセスカウンターはサイドバーあたりに置いときゃいいかなーと。
優先するのはメニューの方ですね。 カウンターは残りスペースを見て決めます。
 

メニューの横並びに関しては「ナビゲーションメニュー」ウィジェットに新規作成したメニューを割り当てることで実現できたのですが、ヘッダー画像下のグローバルメニューのようなボタン型ではなく、ただのテキストリンクになってしまっているのが残念ですね。

できればここも6つ表示されてるグローバルメニューからの続きのコンテンツとしてボタン型のリンクになってほしかったのですが…

縦並びならばボタン型リンクは「STINGERオリジナルボタン」ウィジェットを使えば可能なんですが、アクセスカウンターも並べると3段になってしまい、この高さ分だけヘッダーエリアの高さも拡張されてしまい不恰好になってしまうんですよね。
あとSTINGERオリジナルボタンにはアイコンが強制的に付くのが困り物ですね…
 

おそらくこのへんはCSSをいじって対応していくものなんだと思いますが、私にはそんな技術はないので、なんか使えそうなウィジェットはないものかとひたすらプレビューを繰り返していきました。

試しに設置していたアクセスカウンターがガンガン回っていき、自分のアクセスだけで100以上カウントされてしまいましたが、なんやかんやで完成に漕ぎ着けたのがコチラ。

アクセスカウンター

どうです? 右上の2つのメニュー(お問い合わせ・プライバシーポリシー)、ボタンっぽく見えません?

実際はただウィジェット背景に色が付いてるだけなんで押せるのはテキスト部分だけなんですが、まぁそれっぽく見えるようになったんで良しとしましょう!

あ、やり方に関してはナイショで。
たぶんこれ表示バグなんで。
なんかてきとーにウィジェットいじり回してたら偶然おかしな表示になって、それが私が今やりたいものにすごく近かったので、かなりメチャクチャなカスタマイズして今の形にしました。
もしかしたら今後AFFINGER4がアップデートされたら直っちゃうかも。
 

そんでサラッとアクセスカウンターも設置しておきました。
もちろん自分のIPアドレスは除外設定で。
設定画面が英語だったので解説サイトに助けてもらいました。

あとはカウントするのを訪問者数かPV(ページ閲覧数)かで選択できるようだったので、私はPV、ページビューでカウントするようにしました。
今のブログって「月間PV○○○万!!」みたいなのがステータスになってるっぽいので。 個人的には好きじゃないんですけどね。
 

アクセスカウンターの誤差について

ただちょっと…いやかなり気になったのが、『Hit Counter Max』のアクセスカウンターの回りが異様に多いという点です。

私はアクセス解析には『Jetpack』プラグインで簡易的に行なっているのですが、この数値と『Hit Counter Max』のアクセスカウンターの数値が全然違うのです。

隠すようなモンでも無いので言ってしまいますが、ウチのアクセス数なんて1日10~20PVほどです。 2桁いきゃラッキーってレベルですよ、マジで。 しかも仮運営とはいえもう1年運営してるのに、ですよ。
どんな初心者ブロガーでも1~3ヶ月くらいで超えられるようなレベルでしょうね。

にも関わらず、このアクセスカウンターは1日50~100PVほどカウントしてました。
ひどいですね、まるっと1桁くらいサバ読んでますよ(^^;
 

こいつはどーいうことなんじゃいってことで軽く調べてみたところ、どうやらこの『Hit Counter Max』の誤差が大きいのは私だけではない様子。

「アクセスカウンター 誤差」あたりで検索かけると、まー出るわ出るわw
この辺から情報をかいつまんでみますと、どうやら一口にアクセスカウンターと言ってもカウントの仕方に色々と違いがあるようです。
クローラーなどのbot(人間でないもの)までカウントしたりするのもあるとかないとか。
 

ま、この辺の解説は専門的なサイトがやってくれてるでしょうから、今私がやるべきはこの『Hit Counter Max』の誤差を許容して使い続けられるかどうかですね。

そりゃー誤差は無い(少ない)方が良いんでしょうが、そもそも「アクセスカウンター」にそこまで正確なものを求めるかって話だと思うんですよね。
だってサイトの分析は「アクセス解析」でやるわけじゃないですか。 アクセスカウンターの数値を見てサイトの指標とかは立てないと思うんですよ。

それにちょっと検索かけてあんだけヒットしたってことは、たぶん皆さんアクセスカウンターが正確性に欠けるものだってのは共通認識なんじゃないかと。

もっと言うなら、現在アクセスカウンターをブログに設置しているのはほぼどこかしらのブログサービスにて用意されていた物(はてな・アメブロ等)でしょうから、それらも大なり小なり誤差があることはもうデータとして出てるんで、要は今ブログで表示されてるアクセスカウンターは全て誤差があるもの、と言い切っていいんじゃないでしょうか。 …言いすぎ?
 

本当ーに正確な物を表示したかったらGoogleアナリティクスの解析結果をそのまま出力するツールでもない限りは無理だと思うので、私はあんま気にせず誤差まみれの Hit Counter Max を使うことにします。
…他にアクセスカウンターを表示するプラグインも見つからなかったしね。

「誤差」っつっても別にまったくなーんにもアクションが無かったのに勝手にカウントされるとかじゃーありませんでしょうし。
…アメブロはどうだか知りませんが

 

おわりに

ほんじゃ、今回はこんなところで終了~~
…最後駄文だった気もしなくもないですが、まーいつも通りでしょう!
 

次回は、今回の記事の最後の方に出たアクセス解析の必須ツール『Googleアナリティクス』を導入します。 いまさら。

ぶっちゃけ『Jetpack』でも事足りてる感はあるんですが、今後必要になった時にデータが集まってないと役に立ちませんからね。
サイトにインストールするもんでもなし、やっといて損は何もないでしょう。
 

これだけだと記事が不足しそうなので、あとなんかブログカスタマイズもやっときます。

そうさな、「404ページ」のカスタマイズでもしとこうかな。
クソどうでもいい気もするんだけど、Google先生はここも見てるらしいからね。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.