ブログに追加した隠し機能:Twitterの埋め込みTLデザイン変更/YouTubeの埋め込み動画軽量化/現在の訪問者数カウンター/SSL化/アドセンス/独自ドメイン

 隠れてはいないです。

もくじ


Twitterの埋め込みTLデザイン変更

 表示件数を変えたいと思って調べたのですが、一般に言われている ”data-tweet-limit” などのオプションが効かない。他のサイトの埋め込みタイムラインを見ても効いてる気配がない。どうもTwitter側の仕様が頻繁に変わっている模様。


参考にした記事
 CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする | ITハット


実装
 お手数ですがページの一番下をご覧ください。色んな要素を消してスッキリと。表示件数は各ツイートのliタグのn番目以降を非表示にするなどして減らせそうですが、”ツイートをさらに読む” と干渉しそうなのでそのままに(未検証)。


YouTubeの埋め込み動画軽量化

 ページ内に動画を貼りたいが、YouTube標準の埋め込み機能はけっこう重い。


参考にした記事
 YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLE


実装

短い動画です


メニュー&上へ戻るボタン

 このブログはレスポンシブデザイン(デバイスの画面幅によってレイアウトが変化する)になっている。PCで見ると記事右にメニューが、スマホで見ると記事下にメニューが来る。

 スマホで見た時もメニューにアクセスしやすいように、またページの一番上に楽に戻れるようボタンを設置した。


参考にした記事
 忘れた。検索するとたくさん出てくる。javascriptで動いてる。


現在の訪問者数カウンター

 このブログは結構たくさんの人が見てくれている(ありがとう)のだが、パブリックな雰囲気がないというか、閑古鳥が鳴いてるというか。なにか視聴者参加型企画とかあればいいのかな。

 少しでも『人いる感』が出るよう、現在の訪問者数が分かるカウンターをメニュー内に設置した。


参考にした記事
 今、リアルタイムにサイトを見ているユーザー数を表示する方法「Real Time User」 | Web制作ナビ


実装

【css】
.realtimeuserscounter__num:after{ content:'名が閲覧中'; }
.realtimeuserscounter__attr{ display:none; }

 デフォルトでは閲覧者数(数字のみ)とPoweredByほにゃららが表示される。追加の文章をつけ、ほにゃららは非表示に。


Tumblrの写真サムネイル

 写真を撮るのが好きだったけど、見せる場所がないのでこっそりとメニューの一番下に配置。


使用サービス
 画像付きRSSブログパーツ | 忍者画像RSS


実装

  • 若干重い
  • 更新予定がない

 のに毎回表示されるのはなぁ(・~・)と思い廃止。手裏剣のロゴなどはjsファイルを抜いてきて改変したものを読み込ませて消す。


行間

 ↑にも出ている◆。#コンパスの記事ではコンパスマークで区切っている。

 毎回imgタグを貼っていると長いのでまとめた。


ソース

【html】
<p style="text-align:center;">◆</p>
<p style="text-align:center;"><img src="画像URL" style="height:21px;width:auto;"></p>

↓

<hr class="sep">
<hr class="cps">


タップ/クリックで表示

 上で使ったもの。


ソース

【html】
<div onclick="obj=document.getElementById('いい感じの名前').style; obj.display=(obj.display=='none')?'block':'none';"><a style="cursor:pointer;">タップで表示</a></div>
<div id="いい感じの名前" style="display:none;clear:both;">(隠したい内容)</div>

 同一ページ内でいくつも使う時は、[いい感じの名前]の部分を変えて増やす。open1とかopen2とか。

 参考にした記事はやはり忘れてしまった。上のソースでググるとちゃんとした記事が出てくるはず。こういうギミックがあるとちょっと楽しいかなと思う。


SSL化

 httpをhttpsにするやつ。セキュリティ面などいくつかのメリットがあるらしい。


実装
 このブログははてなブログさんのサービスを利用している。設定画面からボタン一つで完了。加えてちょいちょい直すところがある。

  • 記事内のリンク

 このブログの元々のURLは kalikan.hateblo.jp である。独自ドメイン(後述)をやめた時のために、自分の記事へのリンクを貼る時は元々のURLをフルパスで書いていたのだが、相対パスなら関係ないのではじめからそうしておけばよかった。

ソース

【html】
<a href="http://kalikan.hateblo.jp/ほにゃらら"></a>
[http://kalikan.hateblo.jp/ほにゃらら]

↓

<a href="../ほにゃらら"></a>
[https://kalikan.hateblo.jp/ほにゃらら]

 はてな記法によるリンクは相対パスが使えないので、まとめて置き換える時は注意。httpでもアクセスできるので困らないといえば困らないけど。

  • jQueryのURL

 http『s』をつけ加えないと読み込まない。また、はてなブログは標準でjQueryを一度読んでいて、同じjsを読み込むと無駄がないらしい。

<script src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>


  • テーマのCSSのURL

 実際のサイトの表示は問題ないが、デザイン編集画面で読み込まない。もう一度テーマを指定し直すと新しいURLになる。他に付け加えたCSSが整形されてしまうので、コピーをとっておく。


画像の遅延読み込み(LazyLoad)

 をさせると表示速度が上がると聞いて入れてみたけど、ページ下までワープするボタンと相性が良くないのと、将来的にブラウザの方でやってくれそうなのでやめた。まぁちまっこい画像しかないからいいかな。


参考にした記事
 画像をふわっと遅延表示させる「lazysizes.js」 – WEB制作会社 BRISK


 画像はなるべく小さくしてTinyPNGなどで圧縮。ただ圧縮したjpgやpngをはてなフォトライフにアップしてもそのままアップロードされない(ファイルサイズが若干増える)。これは今のところどうしようもないらしい。gifはそのままアップされるっぽいのでよく使うアイコンはgifにしている。


アドセンス

 アドセンスとはGoogleの広告である。お前しれっと儲けてんじゃねーぞ!と思われるかもしれないが、一万円稼ぐのに一万円以上かかってしまっている。まずはご覧いただこう。

  • Googleに自分のブログやホームページを申請して、許可が降りると広告が貼れる。他社にもいろんな広告サービスがある。
  • 広告画像が表示されたり、クリックされて広告元のサイトにアクセスがあると報酬が発生する。後者の報酬のほうが遥かに大きいので、あの手この手でクリックさせようとする。
  • このブログには去年6月~今年2月ころまでの8ヶ月間貼ってあった。期間中約12万回のアクセスと220回のクリックがあり、8000円の報酬が発生した。
  • アドセンスは8000円以上稼ぐと現金化できる。8000円溜まったので振り込んでもらって広告を剥がした。最近また貼った。
  • ブログやホームページにアドセンスを貼るには、『このサイトは私が管理しています』という証明が必要になる。


独自ドメイン

 先述の通り、アドセンスを貼るには『このサイトは私が管理しています』という証明が必要。


 このブログははてなブログさんのサービスを利用して書かれている。元々のURLは kalikan.hateblo.jp である。kalikanがユーザー名、hatebloが管理元。このURLだとはてなさんのサイトということになる。

 なので好きなURLを選べる独自ドメインのサービスを使っている。そのためご覧の www.cmons.me からもアクセスできる。すっきりしていいでしょ。契約しているコースは¥2500/年ほど(.netとか.infoとかドメインによって値段が異なる)。

 はてなブログで独自ドメインを使うには、有料サービスのはてなPro(¥7~8000/年)の契約が必要。合計で年に一万円程度かかる。勉強がてらWordpressに引っ越そうか考えたけど、思ったよりサーバー代が高くて諸費用が大差なかったのでやめた(意識が低い)。


 このように、それなりにアクセスがないと儲かるどころか赤字になる。有名なまとめブログみたいに、一日何十万もアクセスがあればそれだけで生活できそう。去年アクセスが増えてきた頃、どのくらい稼げるのか気になったので導入した。


 まぁ元取れるくらいかなと分かって、一回もうこのブログはやめようと思って独自ドメインもやめた所、一日のアクセスが600人→6人になってしまった。もうすっかりcmonsのアドレスで周知されていて、元のアドレスは検索にまったく引っかからないし、元のURLでブックマークしてくださってる方しかアクセスできない。一日に何百人も見ているページが突然なくなったら困る人もいるかなと思ったので、元に戻した。


終わりに:ブログをやること

 やっぱりねー『ゲームをただ遊ぶだけじゃもったいない』。楽しかった!という思い出の他に、それを可視化できるなにかを残しておきたいし、聞いたことを誰かに話したい。願わくば『私はこのゲームでこんなに楽しく遊びました』と製作者の方に伝えたい。そんな感じでやっています。

 ブログのいいところは、なんか書いたりいじったり無限にヒマを潰せるところ。私も近所にジムでもあればこんなんほったらかして毎日ボルダリングしたいのですが。


 今回たくさん書いたように、ブログもといWeb制作はいくらでも工夫のしがいがある。楽しい。みなさんもぜひ。