カテゴリ: プログラミング
March 10,2021 at 1:15 PM

【WordPress】ひとまず自作テーマ完成!スクロール機能などこれから熟成していきます。

こんにちは!こんばんは!おはようございます!

日本はだいぶ春が近づいてきている頃でしょうか。

ボリビアは相変わらず暑いです。実際のところ常に服を着たくないほど汗かきます。

さてさて、3月は早くも10日が過ぎ、この投稿が今月初のブログ更新になります。

こんなに期間空いて更新さぼってた?ひと月経って飽きた?

まぁたしかに最低でも修正2、3記事上げるだけでも結構な労力ではあるんですが、

実際には逆で、このブログの個性をめちゃくちゃ引き出していけるようなWordPressオリジナルテーマのコーディングに励んでおりました!

ご覧の通り、現在既に作成したこのテーマを使ってこのサイトは運営中です。

というわけで、今回の記事はブログ用テーマでこだわった部分とそれに関して今後改善していくべき改善点なんかをメモ代わりに書いていこうかと思います。

どうぞお付き合い頂けると幸いです。

ページスクロール機能

「コンセプトとかではなくていきなり機能の話?」という感じですが、たしかにこのテーマ作成には若干実験目的なところも含んでいるので、どうぞご容赦を(笑)。

ページをめくって下のセクションへ移動

今回のテーマ作成においてどうしても盛り込みたかった機能のひとつが、ページスクロールです。

もしも正式な呼び方があって間違っていたらすみません。

むしろこの機能ありきで、これをブログサイトにどう生かせるのか気になったためにこのテーマを作ったといっても過言ではありません。

コーディングのお仕事を頂いてきた中で面白いな~と思ったのが、この機能を搭載したサイトの構築でした。

どんな機能かというと、このブログサイトのトップページをご覧いただくとお分かりの通りかと思います。

ディスプレイで表示された画面の高さを1ページとして扱い、スクロールするごとに1ページごと下へと移動していく仕組みです。

実際には一般的なサイト同様縦長レイアウトのページを下へと移動しているにすぎないのですが、

操作感としてはページを一枚一枚めくっているかのような感覚で、少し遊び心が感じられます。

「仕事で身に付けた技術を自分のサイトでも反映させたいな~」と思い、このサイトのテーマにもそれを盛り込んだのでした。

「諸刃の剣」なレベルの高い機能

ただしこの機能は結構諸刃の剣のような部分があり、今回作成する中でも結構試行錯誤を繰り返しました。

まずはこの機能のメリットとして感じた部分についてまとめてみたいと思います。

メリット

  • 他の一般的に見られるサイトとは違う面白さや希少性
  • セクションごとにきっちり画面いっぱい使えるので、コンセプトに合わせてデザインをガラッと変えやすい
  • 捉え方によってはスクロールがしやすい
  • 作成するページが比較的少なくて済む(かも)

ざっとこういったところでしょうか。

やはりこの機能を導入するにあたって特筆すべきは、スライドショーのように画面が切り替わる楽しさでしょう。

セクション一枚一枚がアルバムのように下へ下へと切り替わっていく様子は一番の魅力です。

そのため縦の流れのつなぎ目を意識することがあまりなく、それぞれのセクションでコンセプトを変えやすい。

現時点のこのサイトではカテゴリごとに特定の背景やテーマカラーを与え、世界観を分けてみました。

本来であれば縦長のホームページに記事一覧を表示するとなると、テーマをなるべく統一しなければごちゃごちゃとした印象になってしまうところ。

大きな変化をつけるとすれば別のページに飛ばすことも選択肢となるので、そうなればだいぶ作成するテンプレートも増えてしまいます。

ですがこの機能を搭載すれば、同一のページ内でデザインを大きく分けることができるというわけです。

さらに上から下まで見る上でスクロールの動作が少なくて済むのも良いところかもしれません。

7セクションあるこのサイトのホームページも、マウスのホイールを7回コロッと回してやるだけで一番下までスクロールできてしまいます。

この感覚は何とも言えない魅力と思うのは僕だけではないはず。

ただ、「あれ?意外とメリットってこれだけ?」と思えなくもないかと思います。

そうです。この機能をサイトで快適に動作させるには、たくさんのデメリットを克服するかうまく付き合うかしなければならないのです。

デメリット

現時点のこのサイトのデメリットについては以下の通りです。

  • 広告や投稿一覧がページの高さをはみ出しやすく、セクション領域のバランスが崩れやすい
  • Googleの自動広告が入るとバランスが大きく崩れやすい
  • 投稿ページのようなどうしても縦長にならざるを得ないページでは、機能のキャンセルが必要
  • ひとつの事柄について扱う部分では、どうしても1画面にきっちり収めなければならない
  • レスポンシブ化にあたってはレイアウトに工夫が必要

こういったところでしょうか。

まず、それぞれのセクションを画面の高さに収めることを義務付けられたこのサイトにおいて、広告をどう差し込むかは結構大きなハードルです。

ブログで収益を得ていくとすれば、まずは広告を掲載するスペースが無ければ始まりません。

ところがいざ本番運用を開始してみると、いきなり目に飛び込んできたのは右サイドバーを占拠するGoogleさんの縦長バナー!

高さが1ページ分に指定されているのか気になりレイアウトを確認してみると、「height: auto」となっている。

指定はされていないけど、デフォルトの高さは見たところ丸々1ページ分くらい。

これでは他の要素と共にサイドバーに配置することは難しいなという印象。

そうなんですね。この機能を盛り込んだサイトというのは、必要な情報を1ページにきっちり収めるためのレベルの高いデザインが要求されるのです。

一応分かってはいたけど、やっぱり簡単ではない。この部分を自分のものにするにはしばらくかかりそうだと思います。

そして1ページに収めるというのはPC用とタブレット用、スマホ用のレイアウトでも同じなので余計に難しい。

この機能の難しさ以前に、異なる画面サイズに合わせるためのレスポンシブ化の作業は結構奥が深いですからね。

PC画面で見ていたものをぎゅっと圧縮してスマホの画面に収めるわけにはいきませんから。

文字があまりにも小さくなりすぎて読めなくなってしまいます。

となると、PCレイアウトで表示していた何かを削ぎ落す必要がある。

真っ先にそれの対象になるのが広告画像というわけですね。

ただこのモバイルが発達した時代にあってスマホでは広告を表示できないというのはあまりにも痛い。

ほとんどのサイトは来訪者の大半がモバイル機器からのアクセスだといいますからね。

ブログ運営者としては結構悩ましいところです。

他のサイトではどうしているのでしょうか?この部分に関してはもう少し観察と分析を重ねる必要がありますね。

ちなみにこれまで使用していた仮の無料テーマは、サイドバーはモバイルレイアウト時にすべて下にまとめて表示されるようになっていました。

scrollifyにより実装

ちなみにこの機能はscrollifyというjQueryプラグインによって実装しています。

ほかにもいくつか選択肢はあったのですが、個人的にはこれが情報も出回っていて扱いやすいなと思ったので使用しています。

プログラミングあるあるですが英語の情報がほとんどで、説明を読み解くだけで一苦労。

それでもこの機能をしっかり使いこなすには本家の英語サイトも攻略する必要がありそうです。

jQueryならびにJavaScriptに関するスキルももう少し上げて、自由に記述できるくらいにはなりたいですね。

というわけで、今回は新しいテーマのページスクロール機能を実装してみた感想についてざっと書いてみました。

その他のコーディングあれこれについてはまた別の記事で触れていきたいと思います。

良かったらご感想、いいね、お願いします。それではまた次の記事で!

プログラミングカテゴリーの次の記事
Scroll Up