RocketThemeのJoomla!用テンプレート　カスタマイズ編

RocketTheme Template Club

RocketTheme Template Club ここでは、RocketTheme Template Clubのテンプレートをカスタマイズする方法を、おおまかにですが紹介していきます。RocketThemeで最近公開されるテンプレートは、どれもバックエンドのテンプレート編集で変更できるパラメータが多く用意されています。直接HTMLやCSSをいじらなくとも、バックエンドから少しの手間で大きく雰囲気を変えることが可能です。まだRocketThemeに登録しようか悩んでいるという方は、この記事に目を通していただくことで、どの程度のカスタマイズが可能なのか、おおまかに事前確認ができるかと思います。 RocketTheme Template Clubについては、すでに二つの記事をアップしました。RocketThemeって？という方、登録やダウンロード方法を知りたいという方は、まずは下の記事に目を通してください。

RocketTheme テンプレートのカスタマイズ

テンプレートの編集は、エクステンションメニューのテンプレート管理から。

rt_replicant2の選択

Joomlaismでも2008年10月から利用している、Replicant2というテンプレートを例にします。rt_replicant2_j15という名称をクリックします。

パラメータ上部

パラメータ欄の一番上の項目です。パラメータは多岐にわたるため、もっとも使いそうな項目を中心に触れていきます。

Default Style:
テンプレートのデフォルトのデザインを選択します。Replicant 2というテンプレートは、デフォルトで10種類のデザインが選択可能になっています。

たとえば、Style1を選択した場合。
Style1の適用

これをStyle6に変更しただけで、色味などがガラリと変わります。
Style6の適用

Default StyleをCustomにしておくと、次のBody StyleとColor Style、２つの項目が有効になります。逆にいえば、パラメータ一番上のDefault Styleで1から10のスタイルを指定した場合は、より細かな設定はできないことになります。

Body Style:
全体ではなく、各部品のスタイルを変更する項目です。

Body StyleでStyle1を選択した場合。
Style1の適用

Body StyleでStyle3を適用した場合。
Style3の適用

Color Style:
これはデザイン全体のスタイルを変更する項目です。Default Styleのところで例に挙げたように、サイト全体の色味を変更するときに指定します。Replicant 2では、10種類の中から選択できるようになっています。

Template Width:
テンプレートの横幅指定は、この項目に数字を入力します。

Left sidecolumn Width:
左サイドのコラムの幅です。指定しておいても、左サイドにモジュールを表示しない設定にしてあれば、なにも表示されません。そのぶんMain Bodyの幅が広がります。

Right Sidecolumn Width:
右サイドのコラムの幅です。こちらもモジュールを指定しなければ、カットされてそのぶんmain Bodyが広がります。

Font Size:
初期状態で表示されるフォントの大きさを、このテンプレートの場合は三段階から指定できます。

パラメータ　中央部

中央部は、上がモジュールスライダー、下が各部品の表示・非表示の選択欄になっています。

Modulesliderは、Joomlaismでもサイトのトップページ中央、告知欄で使用しているスライダーで、テンプレートを導入するだけで利用が可能です。スライダーを表示する高さや、各タブの名称、そしてタブに表示されるモジュールの指定が可能です。デフォルトでは、User15からUser19まで、5つのモジュールポジションが指定されています。

Show BreadcrumbsやShow Logoは、パンくずリストやサイトのロゴを表示するかしないかを選択する項目です。Show Copyrightでは、いいえを選択するだけで簡単にRocketThemeのフッターを隠すことができます。HTMLやCSSの知識がなくとも、自分のサイト名と関係のないテンプレートのコピーライトを、簡単に非表示にできてしまいます。

パラメータ下部

パラメータの下部は、メニューの表示設定に関する項目が多数並んでいます。この項目で、メニューの表示方法を細かく設定することができます。

テンプレートのロゴを変更する

RocketThemeのダウンロードコーナーには、テンプレート自体のファイルとは別に、テンプレートのソースファイルも併せて公開されています。このソースファイルには、ロゴの部分だけを抽出した画像が用意されていますので、Fireworksなどを用いればサイト名を簡単に変更することができます。

ここから先の作業は、Joomla!のバックエンドからではなく、画像編集ソフトを利用しての作業になります。RocketThemeのソースファイルは、以前はPSD形式のものも公開されていましたが、最近はPNGファイルのみに統一されたようです。アドビが出しているFireworksというウェブ画像に特化したグラフィックソフトを用意しておくと、最初から部品がスライスされた（切り出された）状態で扱えるため、部品切り出しの手間を省くことができます。ここではFireworksを使ったことがない人に向けて、雰囲気だけでもつかんでいただこうかと手順を簡単に紹介してみます。

スライスされているlogo.pngファイル

Replicant 2のソースファイル内に収録されている、ロゴのみのソースファイルです。緑色にマスクがかかっているのは、この部分が１つのスライス（切り出して１つの部品になる）という意味です。

ロゴの変更

スライスの緑表示を不可視にしてみました。この部品は、左側のマーク、右上のサイト名、右下の副題から構成されています。RocketThemeのソースファイルは文字データなどもそのまま変更が可能な形式ですから、REPLICANTと書かれた文字の上から、自分のサイト名を打ち込んでしまえばすぐに変更できます。

ロゴの修正が終わったら、スライスを可視の状態に戻して（アイコンを１つクリックするだけの簡単な作業です）、画像を右クリックして選択スライスの書き出しを選ぶだけです。これでロゴのファイルができましたので、あとはFTPソフトを使ってアップすれば、サイトのロゴが変更されます。

変更されたロゴ

logo.pngを置き換えると、サイトのロゴが変更されます。ロゴの置き場所は、Body Style1を使っている場合は、/templates/rt_replicant2_j15/images/body/style1/になります。

テンプレートの各部品の修正・変更

ロゴだけでなく、サイトで使われている各部品をカスタマイズしていきたいという場合は、Replicant 2自体のソースファイルを開きます。

やはり最初から、各部品にスライスが入った状態になっています。修正したい箇所のかたちや色を変更して、各部品をスライスして書き出し、FTPソフトなどを利用してサーバー上にアップするという流れは、ロゴの変更と変わりません。上の画像はソースファイルの1ページ目ですが、これはColor Style1のソースファイルになっています。2ページ目はColor Style2、3ページ目はColor Style3と、すべての色のソースファイルが用意されていますので、どのColor Styleからでも加工することができます。

ページ2

ページをめくって2ページ目にすると、上の画像のようにColor Style2用のソースに変わります。

以上でRocketThemeのカスタマイズについての、簡単な説明（といっても結構な長文になってしまいましたが）を終わります。HTMLやCSSをいじらずとも多くの項目が変更・修正できるように工夫されている点、またソースファイルもロゴや使用フォントが別に用意されているなど使いやすい点、さらにはフッター非表示がボタンクリック１つでできてしまう点など、やはりRocketThemeはひと味違うテンプレート公開サイトだなと関心します。