
初めに
以前こちらの記事にて、当ブログのトップレベルドメインにページが存在せず、403エラーが出ていたことをお伝えした。問題が判明して以来、長い時間を掛けて素材画像やページの制作に着手していたのだが、なにぶん俺の知識が乏しいばっかりに、作業が難航して心が折れかけていた。
しかしこのたび、とりあえずページが形にはなったので、思い切ってサーバーにアップして、ひとまず完成ということにしようと思い至った。そこで今回の記事は、そのページのお披露目と、そこで使用したHTMLやCSSコードの紹介、それとこれからの俺のネット活動の展望を書きたいと思う。それでは本題に入ろうか。
これぞインタラクディブなホームページ!?
まず、これが例のホームぺージである。期待させてしまってすまないが、本当に大したサイトではないw スキルのある人間ならものの一時間くらいで作れそうな簡素なホームページだ。ただ昨今では見ないような一風変わったページでもあるはずだ。なぜならそこは”インタラクディブ”なサイトだからだ。
「ホームページってのはつまりは下層へのリンク集」と以前も言った通り、こだわりもなく作れば、それこそものの数分でできるものだ。だから俺は個性的でインタラクティブ(interactive:対話的)なサイトにしようと決めたのであるが、「はて? ”インタラクディブなサイト”とは何ぞや」と考えたときに、俺の脳にパッと思い浮かんだのが……あれだったw
俺のセンスはPC黎明期である90年~2000年初期くらいで止まっていて、あれはいわば古い解釈の”インタラクディブサイト”であるのだが、恐らく昨今の解釈では、企業が採用しているような「スクロールするたびに短い文言が出現して、その現れ方が横からスライドしてきたり、スクロール速度と違う速度だったり」するようなサイトを示すのであろう。それらはストレスなく洗練されていて、利用者にスマートな印象を与える”演出”である。
しかし俺は思う。「それって”対話的”?」と……だって、ただ目的の情報が現れるまで機械的にスクロールしてるだけじゃない? むしろ少ない「インセンティブ(incentive:報奨)」しか持たないサイトでそれをやられると、単にスクロールが手間なだけの”面倒なサイト”になり下がってしまうのは明白だ。ここで言うインセンティブとはつまり、ホームページが提供する”リンク”である。
こんなサイトに出会ったことはないだろうか? この企業が提供する商品一覧やそれらのスペックや説明書を見たいのに、サイトがごちゃごちゃしすぎてて、どこにあるかさっぱりだ……みたいなサイト。で、最終的には発見できず、グーグル検索に頼って直接目的のページに行くのである。それだけのインセンティブを持っているサイトでも、過剰な演出は利便性を損なうのである。これがリンクが少ないならなおのことである。
だから俺は、極力スクロール不要で、かつインタラクディブなサイトを目指した。あの貧弱なサイトがその概念の理想像だとは毛頭思わないが、画面全体に収まる一つのページに全てのリンクを内蔵しており、そのうえでほどよく”対話的”であり、また拡張性も秘めているので、ある程度満足のいく出来だと自負している。
使用したコードの一例
①大枠
[CSS]
html {
margin: 0;
padding: 0;
font-size: 21px;
width: 1920px;
height: 1080px;
overflow: auto;
background-image: url('背景画像');
background-repeat: no-repeat;
background-color: black;
}
body {
width: 1920px;
height: 1080px;
overflow: hidden;
}
背景画像の上にリンクを置くため、htmlとbody両方に画面サイズを指定する必要があった。しかし画像内でのみスクロールを有効にするいは、bodyでのみ「overflow: hidden」を使わなければいけなかった。
②タイトルなどの位置
[CSS]
.title {
position: relative;
top: 10%;
left: 50%;
transform: translateX(-50%); /* 要素の幅の半分だけ左に移動 */
padding: 10px;
font-size: 60px;
font-weight: bold;
color: #fff;
width: fit-content; /* 幅をコンテンツに合わせる */
height: fit-content; /* 高さをコンテンツに合わせる */
text-align: center; /* テキストを中央揃え */
}
[HTML]
<div class="title">サイト名</div>
位置を「left: 50%」するだけでは、コンテンツの始点がページの中心になってしまうので、コンテンツの中心をページの中心にするために「transform: translateX(-50%)」を適用する必要があった。逆に移動させたい場合は数字を正に、縦に移動させたい場合は「translateY」に、両方に移動させたい場合は「translate(-50%, -50%)」にする。
③インタラクティブリンクとホバー効果
[CSS]
.interactive-link {
position: relative;
display: block;
background-color: rgba(255, 0, 0, 0.3); /* 半透明の赤色背景 */
cursor: pointer;
}
.interactive-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.5); /* 光の色 */
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
}
.interactive-link:hover::before {
width: 100%;
height: 100%;
box-shadow: 0 0 15px 10px rgba(255, 255, 255, 0.5); /* ぼやけた光の効果 */
}
[HTML]
<a href="リンク先URL" class="interactive-link" id="link1"></a>
<a href="リンク先URL" class="interactive-link" id="link2"></a>
<a href="リンク先URL" class="interactive-link" id="link3"></a>
編集中はリンクの位置が見えるように「background-color:」で背景色を設定していた。「cursor: pointer」でその要素にカーソルが載ったときに、カーソルからポインター(指のマーク)に変わるようにして、リンクであることを分かりやすくした。
「::before」はその要素の前面に擬似要素を追加するコードで、「content: ”」はそれが空であることを示す。擬似要素の高さと幅をゼロに設定し、「hover::before」を使ってオンマウスしたときにだけ大きさを100%にして、またその変更速度を「transition: width 0.3s ease, height 0.3s ease」で指定することにより、光が浮き出るような演出を実現できた。
④各リンクとホバーコンテント
[CSS]
#link1 {
top: 700px;
left: 750px;
transform: translate(-50%, -50%);
width: 220px; /* リンクの幅 */
height: 110px; /* リンクの高さ */
}
#link1:hover + .hover-content1 {
transition: opacity 0.5s ease-in-out; /* 変化速度を指定 */
opacity: 1;
}
.hover-content1 {
display: block;
position: relative;
top: 100px;
left: 750px;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: fit-content;
height: fit-content;
text-align: center;
opacity: 0;
transition: opacity 0.5s ease-in-out; /* 変化速度を指定 */
}
[HTML]
<div class="hover-content1">任意のメッセージ<br><img src="画像のURL" alt="画像の説明" width="444" height="300"></div>
インタラクティブリンクはIDで管理されていて、各IDは「#link1」などと指定できた。コンテンツは初期状態で「opacity: 0」で完全に透明にして、それぞれ対応するリンクがホバーしたときに「opacity: 1」で出現するようにした。
対応するリンクとコンテントは横の位置を合わせたかったので、「transform: translate(-50%, -50%)」を使うことで位置を要素の中心として、「left:」による左からの距離を同期できるようにした。
⑤リンク要素の変形
[CSS]
#link4 {
top: -700px;
left: 360px;
transform: translate(-50%, -50%) rotate(45deg) skew(-22deg, -45deg); /* 回転と平行変形 */;
width: 80px; /* リンクの幅 */
height: 180px; /* リンクの高さ */
border-radius: 20px;
}
「transform」による変形を複数適用するには、各項目を半角スペースで区切る必要があった。回転変形は「rotate(〇〇deg)」で角度を指定し、平行変形は「skew(X軸方向の傾斜角度deg, Y軸方向の傾斜角度deg)」で実現できた。なお以下のような台形を生みだすコードは、なぜかクリックしたらリンクがどこかへ飛んで行ったので、採用しなかった。
[CSS]
.transparent-trapezoid {
width: 100px; /* 台形の上辺の幅 */
height: 0; /* 高さを0に設定 */
border-bottom: 50px solid rgba(0, 0, 0, 0.5); /* 台形の高さと透明度 */
border-left: 25px solid transparent; /* 左側の傾斜 */
border-right: 25px solid transparent; /* 右側の傾斜 */
}
[HTML]
<div class="transparent-trapezoid"></div>
⑥メディアクエリによるページの縮小
[CSS]
@media (max-width: 1361px) {
html {
margin: 0;
padding: 0;
font-size: 21px;
width: 1360px;
height: 765px;
overflow: auto;
background-image: url('縮小背景画像');
background-repeat: no-repeat;
background-color: black;
}
body {
transform: scale(0.71); /* 71%に縮小 */
transform-origin: top left; /* 縮小の基点を左上に設定 */
}
}
大枠はフルHDサイズで作ったので、小さなモニターでは全体を表示できず、スクロールが必要になってしまうので、それの問題を緩和するためにメディアクエリ「@media (max-width: 1361px)」を用いて、横のビューポート1361px以下の環境では縮小された背景画像を表示するようにした。
それに合わせて、「transform: scale(0.71)」でページ内の全コンテンツを71%縮小することで、リンクの位置がズレないようにした。モバイル用にもう一段階縮小のメディアクエリを設けようとも思ったが、自前のスマホでそれほどの問題もなく表示されたので、このままでよしとした。
これからの展望
独自ドメインの最上階にホームページを創ったので、その下の階層にこのブログ以外の他のページも創ってみようという気になっている。そのためにいくつか”準備中”のリンクを用意もした。だがしかし、はたして準備中のリンクが全て稼働し始める日など来るのだろうか!?(苦笑)
とりあえず、今一番創ってみたいと思っているのは「ネットショップ」である。オリジナルグッズを販売できる場所があればな、とは常々思っているのだ。バッジとかステッカーとか、そういった小物をメインに取りそろえる予定だ。あと俺はトレカが好きなので、プレイマットとかカードスリーブなんかも創れたらと構想している。オープンした暁には、ぜひのぞきに来てくれるとありがたい。
あと、趣味で書いている小説があるので、その公開場所も創れたらいいな……。もう久しく続きは書いていないので、そろそろ本腰を入れないと、マジで俺が死ぬまでに完成しないんじゃないかって、さすがに危機感が芽生えだした。自分自身のためだけに書いていた作品だけど、もしかすると楽しんでくれる人が他にもいるかもしれないよね?
最後に、ホームページの誕生により、これまでできなかった「ドメインの所有権の証明」ができるようになったので、そろそろ「Googleアドセンス」にでも申請してみようかな、と考えている。これまで当ブログは広告など一切なく、俺も1円も報酬を受け取っていないが、「ソロソロ飴玉でも欲しいなぁ~♡」みたいな気分になっている(サーバーのレンタル料もあるので)。月100円とか200円とかでもいいんだ。俺の活動には価値があるのだという証があればそれで満足だ。
まぁ審査に通ればの話だが、当ブログに広告が表示される日が来るかもしれないので、そのときは”温かい目”で(くっ、どうしてもこのワードを使うと「ドラえもん」の顔が浮かぶ……)見守ってくれると助かるよ。俺自身にも美意識はあるので、できるだけ鬱陶しくない程度の量と場所にするつもりだ。何度も言って申し訳ないが、全ては審査をパスした場合の空想だ、と言うか……通るのか、このブログ!? あのHP!?w
いちおう頑張って活動してきたが、「お前のサイトは異端すぎる! あれもこれも全部ダメダメっ! なってないっ!」とか言われそうで怖い。不合格だった場合、またいろいろ修正してトライ&エラーしなきゃいけないよね……俺もうそんな元気ないよ……。ままま、未来は神のみぞ知るということで、今回の記事はここまでにしておこうか。それでは、ホームページのお披露目と今後の展望でした。最後まで読んでくれてありがとう。また次の記事で会おう。
11/30 追記
いや~さすがは審査基準が厳しいことで有名なGoogle AdSense様。見事に審査落ちしましたw でもその理由が「コンテンツの最小要件を満たしていない」ことと、「独自性のある質の高いコンテンツと優れたユーザーエクスペリエンスをサイトで提供することができていない」ことだったので、もしかするとホームページ以降の下層サイト(当ブログ)にはアクセスしてもらえていないのかな? という疑念が浮かんでいる。
まぁ、このブログがそれらの要件を満たしていると豪語するのもおこがましいが、AdSenseは最小で5記事、1記事1000文字程度のコンテンツ量で合格するらしいので、ウチのブログは40記事以上あり、1記事の文字数が少なくとも4000文字弱、多ければ15000文字にも達しているので、コンテンツ量が貧弱だと評価されるのには違和感を感じずにはいられない。
なので一旦先の推論が正しいと仮定して、ホームページの所在地を一つ上のディレクトリ階層に移し(初期ドメインの方)、独自ドメインのトップレベルドメインには.htaccessファイルを設置して、サブディレクトリである当ブログへと301リダイレクトを行ってみようと思う。飴玉のご褒美が貰える日を夢見て、頑張ってみます。
コメント