隠してはないです。
もくじ
- YouTubeの埋め込み動画軽量化
- 現在の訪問者数カウンター
- リンクをhoverで画像がポップアップするcss
- 行間
- タップ/クリックで表示
- Webフォント
- Twitterの埋め込みTLデザイン変更
- Twitterの埋め込みツイートを自作する
- Tumblrの写真サムネイル
- SSL化
- 画像の遅延読み込み(LazyLoad)
- アドセンス
- 独自ドメイン
- 終わりに:ブログをやること
【!】ソースはきったない(仕事でこんな書き方したら怒られる)ので本当に使う場合は清書してください。
【!】はてなブログ上で動かしている(はてなのcssも読んでいる)ため、足りなかったり余計なcssがあるかもしれません。
YouTubeの埋め込み動画軽量化
ページ内に動画を貼りたいが、YouTube標準の埋め込み機能はけっこう重い。
参考にした記事
YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった - NO TITLE
実装
短い動画です
現在の訪問者数カウンター
このブログは結構たくさんの人が見てくれている(ありがとう)のだが、パブリックな雰囲気がないというか、閑古鳥が鳴いてるというか。なにか視聴者参加型企画とかあればいいのかな。
少しでも『人いる感』が出るよう、現在の訪問者数が分かるカウンターをメニュー内に設置した。
参考にした記事
今、リアルタイムにサイトを見ているユーザー数を表示する方法「Real Time User」 | Web制作ナビ
実装
【css】 .realtimeuserscounter__num:after{ content:'名が閲覧中'; } .realtimeuserscounter__attr{ display:none; }
デフォルトでは閲覧者数(数字のみ)とPoweredByほにゃららが表示される。追加の文章をつけ、ほにゃららは非表示に。
行間
↑にも出ている◆。#コンパスの記事ではコンパスマークで区切っている。
毎回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">
タップ/クリックで表示
上で使ったもの。
参考にした記事
クリックイベントをCSSだけで | UNICO LABO
ソース(以前使っていたもの)
<div onclick="open1()">タップで表示</div> <div id="close" style="display:none;">(隠したい内容)</div> <script> var open1 = function(){ obj=document.getElementById('close1').style; obj.display=(obj.display=='none')?'block':'none'; }; </script>
Webフォント
スマホで閲覧する時のみ、ヘッダーとメニューをWebフォントで表示している。PCはブラウザによってフォントの表示がまちまちで対応しきれない・スマホで見る人が大多数なので断念。
ソース
<script> var _UA = navigator.userAgent; if(_UA.indexOf('Android') > 0 || _UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('iPad') > 0){} else{ document.write('<style>header,#top-editarea,.font,#box2{font-family:inherit}</style>'); } </script>
Webフォントの導入方法については割愛。スマホ以外からのアクセスの時のみ、フォントを指定しているCSSを書き換える。
またアスキーアートを使いたいページでは、AAHub FontsさんのAA用フォントを当てている。
Twitterの埋め込みTLデザイン変更
表示件数を変えたいと思って調べたのですが、一般に言われている ”data-tweet-limit” などのオプションが効かない。他のサイトの埋め込みタイムラインを見ても効いてる気配がない。どうもTwitter側の仕様が頻繁に変わっている模様。
参考にした記事
仕組みとしては『jsでウィジェット内にcssを追加する』みたいです。
CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする | ITハット
実装
いくつかのボタンを非表示にしてすっきりと。ツイート表示件数は各ツイートのliタグのn番目以降を非表示にするなどして減らせそうですが、”ツイートをさらに読む” と干渉しそうなのでそのままに(未検証)。
Twitterの埋め込みツイートを自作する
自分のツイートをブログに貼りたい時、公式の埋め込みツイートを使うと全然ふぁぼられてないのがバレる(ふぁぼボタンがついている)のでその部分を除いてcssで再現してみました。誰も使わないと思うけどせっかく作ったので。
実装
【html】 <div class="mov"><video src="(動画URL)" poster="(動画サムネイルURL)" controls preload="none"></video></div> or <div class="img"><img src="(画像URL)"></div> + <a class="tweet" href="(ツイートURL)" target="_blank"> <ul> <li class="icon">(アイコン)</li> <li class="name"><b>(アカウント名)</b><span>(@ID)</span></li> <li class="logo"><i class="blogicon-twitter"></i></li> </ul> <div class="txt">(ツイート)<span>(#ハッシュタグ)</span></div> <div class="day">(ツイートした日)</div> </a>
- しもんず@crnons
- 右上のTwitterロゴは別途Font AwesomeなどのWebフォントを設定する必要があります。上のソースでははてなのcssから呼び出しています。参考:はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい!
- 画像や動画サムネイルのURLは元ツイートのページから抜いてくる。動画URLはTwitterの動画を保存するためのURL変換器さんで探せます
- 『画像が複数投稿されているツイート』には対応していないので必要になったら作らないといけない
Tumblrの写真サムネイル
写真を撮るのが好きだったけど、見せる場所がないのでこっそりとメニューの一番下に配置。
使用サービス
画像付きRSSブログパーツ | 忍者画像RSS
実装
- 若干重い
- 更新予定がない
のに毎回表示されるのはなぁ(・~・)と思い廃止。手裏剣のロゴなどはjsファイルを抜いてきて改変したものを読み込ませて消す。
SSL化
httpをhttpsにするやつ。セキュリティ面などいくつかのメリットがあるらしい。
実装
このブログははてなブログさんのサービスを利用している。設定画面からボタン一つで完了。加えてちょいちょい直すところがある。
- 記事内のリンク
このブログの元々のURLは kalikan.hateblo.jp である。独自ドメイン(後述)をやめた時のために、自分の記事へのリンクを貼る時は元々のURLをフルパスで書いていたのだが、ルート相対パスなら関係ないのではじめからそうしておけばよかった。
ソース
<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に自分のブログやホームページを申請して、許可が降りると広告が貼れる。Google以外の会社の広告サービスもある。
- 広告画像がタップされると報酬が発生する。そのためあの手この手でタップさせようとする。
- 自分でタップすると失格となる(怖)。また同じ人が連打しても報酬は上がらないため、多くの人に見てもらうことが重要になる。
- ブログやホームページにアドセンスを貼るには、『このサイトは私が管理しています』という証明が必要になる。
独自ドメイン
先述の通り、アドセンスを貼るには『このサイトは私が管理しています』という証明が必要。
このブログははてなブログさんのサービスを利用して書かれている。元々のURLは kalikan.hateblo.jp である。kalikanがユーザー名、hatebloが管理元。このURLだとはてなさんのサイトということになる。
なので好きなURLを選べる独自ドメインのサービスを使っている。そのためご覧の www.cmons.me からもアクセスできる。すっきりしていいでしょ。契約しているコースは¥2500/年ほど(.comや.netなどドメインによって値段が異なる)。
はてなブログで独自ドメインを使うには、有料サービスのはてなPro(¥7~8000/年)の契約が必要。合計で年に一万円程度かかる。つまり、広告を貼ってもそれなりにアクセスがないと儲かるどころか赤字になる。有名なまとめブログみたいに、一日何十万もアクセスがあればそれだけで生活できそう。去年アクセスが増えてきた頃、どのくらい稼げるのか気になったので導入した。
まぁギリギリ元取れるくらいだと分かって、一回もうこのブログはやめようと思って独自ドメインもやめた所、一日のアクセスが600人→6人になってしまった。もうすっかり今のアドレスで周知されていて、元のアドレスは検索にまったく引っかからないし、一日に何百人も来るページが突然なくなったら困る人もいるかなと思ったので、元に戻した。
終わりに:ブログをやること
やっぱり『ゲームをただ遊ぶだけじゃもったいない』。楽しかった!という思い出の他に、それを可視化できるなにかを残しておきたいし、聞いたことを誰かに話したい。願わくば『私はこのゲームでこんなに楽しく遊びました』と製作者の方に伝えたい。そんな感じでやっています。
ブログのいいところは、なんか書いたりいじったり無限にヒマを潰せるところ。私も近所にジムでもあればこんなんほったらかして毎日ボルダリングしたいのですが。
今回たくさん書いたように、ブログもといWeb制作はいくらでも工夫のしがいがある。楽しい。みなさんもぜひ。