令和だけどカウンター
これは、現在のお話です。
ホームページをやり始めて２０年以上になりますが、当時はフッターにアクセスカウンターを置くのが普通でした。今はあまり見かけませんよね。でもそのカウンターがわたしのサイトでは生きている。でも、桁数を変えないと満タンになりそう。でも、諸々の事情で更新できない。でも、更新したい。
早速代替のカウンターは無いかと検索しました。
有った！というより、【FC2カウンター】が現役だ！
いや、【FC2】さん自体が進化して現存して居られた！
mixhostに替えるまでは、【FC2】にお世話になってたんです。懐かしいなぁ。
以前というより、昨日まで使用させていただいていたFC2アカウントは大人の事情でログインできなくなっているので、別のメアドを使ってアカウントを作成し直しました。
上は【FC2カウンター】の登録画面です。ここから【新規登録】をクリックしてID（アカウント）作成に進めます。登録したIDで他のサービスも追加できます。
オリジナルカウンター作成
画像をアップして自分だけのオリジナルカウンターも設置できます。
わたしのページでは、サンプルの中から選んでしまったので元の画像が呼び出せず、今回作り直しました。
現行のカウンターは32×32pxで作成しました。ちょっとデカいかなーとも思いますが、飽きたら小さくします。
登録できる画像はGIF形式だけなので、GIMPでの作成が便利です。
最初に新規画像で32×32px等を作成して、文字入力で0～9の数字を作ります。
そして１つずつ【名前をつけてエクスポート】しますが、多分、文字入力欄の方が枠より大きいのでいきなりGIFでは書き出せないため、一旦PNGで書き出します。
実際にGIMPでやってみます。
手順１
「ファイル」→「新しい画像」を選択
手順２
●キャンバスサイズを指定
幅、高さ 共に半角で数字を入れられます。
「ファイルOK」をクリック
手順３
●背景色で指定したサイズの画像が表示される
小さくて使い辛いので、800倍にしています。
透過画像にしたいので、右側の赤枠（目玉）をクリックして背景をオフにしました。
背景色や背景画像を使用する場合はそのままでOKです。
手順４
●数字を入れる
文字入力ツール「A」を選択して「フォント」「サイズ」「色」を指定
手順５
●文字の位置を調節
移動ツール「＋」を選択して「ポインタ」で位置を調整
手順６
●PNGでエクスポート
「名前を付けてエクスポート」をクリック
手順７
●画像のエクスポート
名前：「名称未設定」→「0」に変えて[.png]
保存場所は探しやすいところにしましょう。
例としてデスクトップに作成しておいた「カウンター用」フォルダにします。
最後に右下「エクスポート」クリックです。
手順８
もう一度「エクスポート」をクリック
手順９
フォルダ表示例です。
手順１０
ここからは同じ要領で残りの1～9の数字も作成していきます。
ツール「A」に戻って、右側のレイヤーも文字レイヤーになっていることを確認します。
その状態で文字枠をクリックして「0」を削除し、「1」を入力します。
文字の位置がずれていたら、【手順５】のように調整します。
そして【手順７】の「0」を「1」に変えて「エクスポート」、【手順８】もう一度「エクスポート」です。
同様に2～9もエクスポートします。
手順１１
全部の数字のフォルダ表示例です。
手順１２
●ここから、PNGをGIFに変換
「ファイル」→「開く/インポート」を選択
手順１３
「最近開いたファイル」が開くので「0.png」を選択して、「開く」
手順１４
「名前を付けてエクスポート」をクリック
手順１５
名前：「0」のまま [.png] を [.gif] に書き換える
「エクスポート」をクリック
手順１６
再度「エクスポート」をクリック
手順１７
●1～9 はこちらから
「ファイル」→「レイヤーとして開く」を選択
手順１８
「1.png」を選択して、「開く」
その後は、「0」の「目玉」マークをオフにして、【手順１４】「名前を付けてエクスポート」、【手順１５】名前：「0」→「1」(※ [.gif] にかわっているのでそのまま)「エクスポート」、【手順１６】「エクスポート」
という要領で2~9も同様に [.png] を [.gif] に変換します。
※前の数字の目玉マークをオフにするのだけは忘れないでください。
FC2カウンターに画像を登録
ここからは作成したカウンター用の数字の画像を登録する手順です。
手順１９
「カウンターを追加」して「テスト」というカウンターを作成する設定で説明します。
「変更」をクリックします。
手順２０
「画像アップロード」をクリックします。
手順２１
画像アップロード画面です。
手順２２
0 :「ファイルを選択」をクリックします。
手順２３
使用したい画像を選択します。この例では、先ほどの「カウンター用」フォルダの中に「カウンター用GIF」というフォルダを作成しました。
「0.gif」を選んで「開く」をクリックします。
手順２４
同様に、1～9も選択したら「登録」をクリックします。
※数字の左側や右側に画像を入れたい場合は高さのpxを同じにします。
手順２５
画像を確認してみましょう。
「画像確認ページへ」をクリックします。
手順２６
無事アップロードされていますね。
「レ」して「アクセスカウンター画像に設定」をクリックします。
手順２７
「アクセスカウンター画像に設定」されました。
手順２８
ホームページやWordpressに設置するためのHTMLタグを入手しましょう。
「設置HTMLタグ」をクリックすると右側のように表示されます。
「アクセスカウンターのタグ」をコピペしてメモ帳等に貼り付けておきましょう。
タグはコピペした状態では以下のようだと思います。
ただ、このまま貼り付けると動作しないことが多いです。
<!-- FC2カウンター ここから -->
<script language="javascript" type="text/javascript" src="//counter1.fc2.com/counter.php?id=12345678"></script><noscript><img src="//counter1.fc2.com/counter_img.php?id=12345678" /></noscript>
<!-- FC2カウンター ここまで -->
そこで、以下のように改行を外して１行になるように加工します。
<!-- FC2カウンター ここから --><script language="javascript" type="text/javascript" src="//counter1.fc2.com/counter.php?id=12345678"></script><noscript><img src="//counter1.fc2.com/counter_img.php?id=12345678" /></noscript><!-- FC2カウンター ここまで -->
このタグをフッターの任意の場所に追加すればカウンターが設置できます。
ちなみに、Cocoonの場合は、「tmp」フォルダ内の「footer-bottom.php」です。