【HTML5 Dev】Mobile Joomla! を使ったサイトの最適化 - パート3

Joomla! ベースの Web サイトにとってかなり強力なコンポーネントである Mobile Joomla! の使い方に関するシリーズも、今回の3回目で最後となる。第1回では、Mobile Joomla! の背景とインストールに関する情報、Elegance テンプレートの適用方法について解説した。第2回は、Template Manager、ロゴ イメージのアップデート、テーマ カラーの扱い方、モジュールの使い方を解説した。今回の最終回として、高度なカスタマイズ方法について解説する。

例として、スマートフォンで GoozerNation.com と FSCgroup.com をご覧いただきたい。第1回の記事では、Amazon Fire で見るとパソコン用のメイン サイトが表示されたと書いた。ところが第2回では、Kindle Fire で FSCgroup.com を見るとモバイル サイトが表示され、Goozernation.com はメイン サイトのままだった。そして今回は、両方とも Kindle Fire でモバイル サイトが表示されるのだ。どうしてこのような違いが発生するのか分からないが、いずれの表示も素晴らしいし、害はないので良しとしたい。もしかすると、キャッシュが関係するのかもしれない。

高度なカスタマイズ

今回の解説に入る前に、筆者が運営している Web サイトのトップ ページの構成を説明したい。複数の記事にリンクする短い紹介文を掲載している Blog で、「Read More」（続き）と「Comments」（コメント）というリンクもある。これをモバイル サイトに変換すると、Read More も Comments もリンクが継承される。Read More リンクは問題なく作動したが、Comments リンクには多少問題があった。これを修正するには CSS を調べる必要があった。

Read More/Comments リンクの削除

Mobile CSS を調整するには、Template Manager から Elegance テンプレートを選択し、編集用に開く。開いたら、CSS ファイルの最後の方にある以下の文までスクロールする。

JComments div.jcomments-links { text-align: right; }

Comments リンクを表示するのがこのコードだ。これを削除するには、コードをコメントアウトして次のような短い文を追加する。/* JComments div.jcomments-links { text-align: right; } */ .jcomments-links { display:none;}

これで Comments および Read More の両リンクがトップ ページから消える。筆者は、この表示の方が閲覧しやすいと思う。記事の全文は、タイトルをクリックすれば読める。パソコン用のメイン サイトから Blog 記事にコメントが書き込まれている場合には、その Blog 記事の一番下にコメントが表示される。Kunena Forum 拡張機能と、これに関連する JComments 代わりに活用できる Mobile 拡張機能については、今後の記事で解説する。

重複タイトルの削除

筆者が完全に満足するには、Elegance テンプレートをもう1か所修正する必要があった。記事全文に移動するとタイトルが2回表示される、という問題があったのだ。この問題を引き起こしたのは、Article 設定、Menu 設定、そして Global Configurations だった。自分のメニューと記事内の両方に記事のタイトルが表示されるよう設定していたため、モバイル サイトにタイトルが二重表示されていたのだ。メイン サイトのタイトル記事は消したくなかったので、Elegance テンプレートの HTML/PHP を調査する必要に迫られた。問題のファイルは以下にあった。

templates/mobile_elegance/html/com_content/article/default.php

そこで筆者は、コードのこの部分を削除した。

するとすぐに、モバイル版で発生していたタイトルの二重表示はなくなった。この一連の作業に筆者は満足だった。

Mobile Joomla! フォーラムのサポート

Mobile Joomla! は設定もインストールも容易だが、特定 Web サイトに合わせて調整するにはある程度の知識が必要だ。これは当然のことでもある。Joomla! は月並みな万能 CMS ではない。サードパーティー製の拡張機能、プラグイン、テンプレートにはさまざまな種類があり、整合性に問題のあるものもある。こうした部分は、Elegance テンプレートを購入する前に理解しておくことがきわめて重要だ。時間のかかることを覚悟し、コードをチューニングする必要性を理解しつつ、Mobile Joomla! の開発者たちがフォーラムで助けてくれることも覚えておきたい。

Mobile Joomla! 開発者の助けがなければ、筆者もここまでのことはできなかっただろう。たいていの場合、彼らは筆者の書き込みから24時間以内に回答を寄せてくれる。最初の回答が不適切だと、2回目にもっと適切な回答が必ず返ってきた。筆者は、その結果にとても満足だった。