はじめに
今回の記事は、ブログのトップ画像をランダムに変える方法の説明です。
当ブログはヒーローヘッダーを採用してますが、ブログにアクセスするたびに、ヒーローヘッダーの画像をランダムに変えちゃおう、という作戦です。
ただ変えるだけでは面白くないので、アクセスする時間帯に応じて、きれいなお姉さんのセクシーレベルが変わるように工夫しました。
更にWebサイトを冬らしくするために、雪もどきを画面に降らせてます。
演出が多少くどいかも知れませんが、これが管理人の今のスキルの限界とご理解下さい。
なぜヒーローヘッダーで派手な演出をするのか
当ブログでは2018年8月20日にヒーローヘッダーを採用しましたが、ヒーローヘッダーの画像はスライドーショーで切り替える方法でした。
ブログは中身（コンテンツ）が命ですが、ご存知の通り管理人は不良ブロガーです。
毎日コツコツやるタイプでなく、気が向いた時、自分が面白いと思って共有した時にしか記事を書かないので、月1～2記事書くのが精いっぱいです。
「ブログ開始3カ月で100記事達成！」なんてマネは絶対出来ません。あっと言う間にブログで消耗してしまうので、はてなに移転して来てからはマイペースを貫いてます。
と言い訳をたくさん繰り返しましたが、中身の少なさを手っ取り早くカバーするために、Webサイトのトップページを印象的なものに変え、読者にちょっとのぞき見してもらおう、というズルイ考えです。
ヒーローヘッダーを採用しいるWebサイトは、トップビューにビジュアル画像が表示されているのが特徴ですが、何のサイトなんだろうと、自然に引き込まれてしまう仕組みになってます。
例えば「無料ではじめる」というトップビューは良く見かけると思います。
Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
その他、美しいヒーローヘッダーのホームページは下記サイトで解説されているので、参考にして見て下さい。
管理人はデザイナーではなく、美のセンスもないスケベなオヤジなので、オリジナルの画像は作れません。
なので、主にスケベな男性に興味を持ってもらうよう、きれいなお姉さんの画像を表示してます。
初心者でもカッコ良くできるWebサイト
はてなブログではヒーローヘッダーを採用しているブログは少ないようですが、たぶんProの方が非常に多く、アフェリエイトに熱心だからだと思います。
アフェリエイトは広告クリックが命なので、トップページに1つも広告がなく、おススメ記事へのリンクが表示されないのは、考えられない構成なのかも知れません。
しかし、ヒーローヘッダーは手っ取り早くWebサイトをカッコよく見せる方法としてはとても有効な手法です。
ヒーローヘッダーの表示は特別な技術は不要です。ヘッダー画像をデカくするだけなので、初心者向けのデザイン手法なのです。
ブログのカスタマイズが苦手な方も、ちょっと勉強するだけで、難しいコーディングなしで似たようなWebサイトを作ることができます。
なぜトップビューの画像をランダムに変えるのか
ヒーローヘッダーの画像入れ替えは、ブログの更新に合わせていたのですが、月1～2回しか更新しないので、約4ケ月の間に5回しかヒーローヘッダーは入れ替わりませんでした。（少し反省）
これでは、当サイトの読者が訪問した時、ヒーローヘッダーが変わってないと、ブログの更新をさぼっていることがバレてしまい、すぐ離脱されてしまいます。
更にマズイ事にGoogleは2018年11月12日よりPageSpeed Insights（PSI）の分析エンジンをLighthouseに統一しました。
一つ前の分析エンジンでは、可もなく不可もないスコアでしたが、新しい分析エンジンでは、とんでもない評価でした。
「Banksy Shredder」を2018年10月21日にWebサイトに組み込んだのですが、これで致命的にスピードが遅くなり、PageSpeed Insightsのテストでは、時間切れで分析終了、という論外の結果でした。
「Banksy Shredder」もともとお遊びで組み込んだ仕掛けなので、すぐ取り外したのですが、サイトのスピードはあまり改善されず「遅い」区分の中の下の評価でした。
さまざまな要因が重なりサイトのスピードが遅くなってますが、足を引っ張っている要因の一つが、スライドショーのヒーローヘッダーでした。
スライドーショーの画像はJavaScriptは使わず、CSSで読み込み切り替えてます。
1枚100KB～200KBの容量ですが、36秒で計6枚の画像を切り替えているので、最初に6枚分を読み込む必要があり、スライドショーがスタートする迄のアイドル時間が長いのです。
せっかくサイトを訪問してもらっても、遅っ！と思われたら、すぐ離脱されてしまい、サイト内回遊でも、毎回トップビューからクリック移動しなければならないので、イラッとされていたと思います。
せっかくヒーローヘッダーを設けたのに、これでは本末転倒です。
しかし、きれいなお姉さんのヒーローヘッダーは、当ブログのシンボルにしているので、今更外すことはできません。
そこで苦肉の策で考えたのが、アクセスするたびにヒーローヘッダーをランダムに変える方法でした。
この変更で毎回1枚しか画像は読み込まれないので、アイドル時間は1/6に減らすことが出来ます。
ヘッダー画像をランダムに切り替えているはてなブログは見たことがなかったので、出来るかどうか不安でしたが、スケベパワーで何とか乗り切ることが出来ました。
トップの画像をランダムに変える方法
管理人はプログラミングのスキルが乏しいので、先人が作ったものを参考にすることにしました。
ランダムに画像を選択する
ネットを調べてみると、JavaScriptのrandom関数で画像を切り替えることが出来ることが分かりました。
ランダムに表示する仕組みを簡単に言うと、画像のアドレスを変数に入れ、random関数で表示する画像の配列番号を決定し、この画像のアドレスをCSSで設定したクラスにぶち込んで、backgroundに表示させるのです。
参考にjQuery,CSS,HTMLを載せておきます。HTMLはヘッダーに、jQueryはフッターに保存してください。
jQuery
<script>
$(window).on("DOMContentLoaded", function(){
var pretty_girls = [ 'https://a.jpg', 'https://b.jpg', 'https://c.jpg' ];
var girl_img = pretty_girls[Math.floor(Math.random() * pretty_girls.length)];
$('.randomimg').css('background-image', 'url(' + girl_img + ')');
});
</script>
CSS
.randomimg {
background-attachment: fixed;
position: absolute;
width: 100%;
height:100%;
background-position: center center;
background-size: cover;
top: 0px;
z-index: -1;
}.randomimg:after {
position: absolute;
width: 100%;
height:100%;
content: '';
background: linear-gradient(to top, rgba(0,0,0,0.60) 0%,rgba(0,0,0,0) 100%);
}
HTML
<div class="randomimg"></div>
どのような処理を行っているかざっくり説明します。
①きれいなお姉さんのURLを要素として配列に設定
pretty_girlという変数に、きれいなお姉さんの画像URLをぶち込みます。
②きれいなお姉さんの数を取得
lengthプロパティは要素の数を取得する命令で、pretty_girls.lengthと記述し、きれいなお姉さんの数を取得します。
③乱数ときれいなお姉さんの数を掛け合わせます
Math.random()関数は0以上-1未満の浮動小数点を返し、Math.floor()関数は小数点以下を切り捨てる関数です。Math.random()とpretty_girls.lengthを掛け合わせ、Math.floor()関数で小数点を切り捨てます。
例えば、0.333という乱数が発生したら0になり、0番目のきれいなお姉さんが選択されます。
注意しなければならないのは、配列の通し番号の最初は0番です。配列の最初に記述した要素は1番目ではなく0番目なのです。3個目の要素は2番目となります。
④画像のアドレスを取得
girl_imgに乱数で決定した0番目のきれいなお姉さんの要素：https://a.jpgが入ります。
⑤CSSにぶち込んできれいなお姉さんを表示
.randomimgで定義したクラスに従って、きれいなお姉さんを背景に表示します。
「えー、何だか難しい、良くわかんない。」と思っている方は、下記動画でも見て、モチベーションを上げて下さい。
動画で解説されているのは、スマホでクリックして水着ギャルの写真をランダムに表示するもので、セクシーな画像を画面に表示するという目的と原理はいっしょです。
JavaScript入門 -動画で楽しくプログラミングを学ぼう
次に考えたのは表示する画像をどうやって選別するかです。
アクセス時刻で表示を変える
真昼間からセクシーな画像が画面一杯に表示されると、ご家庭や会社、通勤電車での閲覧に支障が出ます。
そこで、きれいなお姉さんの画像を管理人の好みで3つに分類し、お肌の露出が多い画像は夜暗くなる時間帯に表示するように設定しました。
4時～21時：かわいいお姉さんを表示
21時～24時：セクシーなお姉さんを表示
0時～ 4時：エロティックなお姉さんを表示
jQuery
<script>
$(window).on("DOMContentLoaded", function(){
var today = new Date();
var now_hour = today.getHours();
if ( 4 <= now_hour && now_hour <= 18 ) {
var pretty_girls = ['https://a.jpg', 'https://b.jpg', 'https://c.jpg'];
var girl_img = pretty_girls[Math.floor(Math.random() * pretty_girls.length)];}
else if ( 19 <= now_hour && now_hour <= 23 ) {
var sexy_girls = ['https://d.jpg', 'https://e.jpg', 'https://f.jpg'];
var girl_img = sexy_girls[Math.floor(Math.random() * sexy_girls.length)];}
else {
var erotic_girls = ['https://g.jpg', 'https://h.jpg', 'https://i.jpg'];
var girl_img = erotic_girls[Math.floor(Math.random() * erotic_girls.length)]; }
$('.randomimg').css('background-image', 'url(' + girl_img + ')'); });
</script>
2019年1月6日 追記
諸事情により0時～4時はエロティックなお姉さんのみの表示は止め、厳選したエロティックなお姉さんをセクシーなお姉さんに混ぜて表示するように変更しました。
なお、同時にブラウザのウィンドウサイズを検出し、きれいなお姉さんがご覧になっているウィンドウに最適に表示されるように変更しました。
縦長のきれいなお姉さんはウィンドウが縦長、横長のきれいなお姉さんはウィンドウが横長でないと表示されないので、お気をつけください。
興味がある方はソースを見て下さい。
2019年1月10日 追記
諸事情によりセクシーなお姉さんの表示は21時からに変更しました。
----------- 追記はここ迄
なお、海外からのアクセスも考慮して、はてなサーバの時刻を取得し切り替えることはやってません。
真昼間からセクシーなトップビューを見たいスケベな方は、PCやスマホの時計の時刻を変更してお楽しみ下さい。
ところで、はてなブログのガイドラインでは、過度に性的な描写は禁止されてますので、おしりは出てても乳首がモロに見える画像は表示されません。
見えそうで見えない部分は脳内変換し、スケベな想像力でカバーして下さい。
上手く行かなかったこと
ヒーローヘッダーの画像は100KB以下に圧縮したので、画像によってはアラが見えるようになりました。
そんな時は、最終兵器「網点」でマスクするのですが、許容できないモアレが出てしまったので、泣く泣く「網点」の使用は中止しました。
暫定対策として、今回はlinear-gradientでグラデーションを被せ誤魔化しました。モアレが出にくい画像に変換できたら復活されるかも知れません。
また、画像の直リンクは避けて下さい。例えば、pxsabayの画像を直リンクすると、画像は表示されず、pxsabayからお叱りを受けます。
画面に雪を降らせる方法
クリスマスが近くなると、雪を降らせるWebサイトが多くなりますが、当サイトもその演出に乗っかることにしました。
雪を降らせる方法はたくさんありますが、比較的簡単に実装できます。
CodePenにたくさん公開されてますので、参考にして下さい。
https://codepen.io/search/pens?q=snow&page=1&order=popularity&depth=everything&show_forks=on
使用したコードは記事の内容と直接関係ないので割愛します。
2018年12月30日 追記
ブログに降らせていた雪もどきは、クリスマスも過ぎてしまったので、本日削除いたしました。また来年、クリスマスが近づいたら再開します。
まとめ
ヒーローヘッダーを採用すると、初心者でも簡単にWebサイトをカッコよく見せることが出来ます。
当サイトのように記事数が圧倒的に少ない場合は、集客のためにヘッダー画像をカスタマイズしてみてはどうでしょうか。
なお、入口だけ豪華すぎて中身のコンテンツが面白くないとアンバランスになるので、ヒーローヘッダーの画像は慎重に選んでください。
それでは今回の記事はこれで終わりです。最後まで読んで頂き、ありがとうございます。
