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

※新規ウインドウで開きます 印刷Eメール

デフォルトテンプレートの複製とヘッダーのカスタマイズ

標準でダウンロードされているbeezテンプレートを引用します。
beeztemp

FTPなどで/httpdocs/templates/からbeezフォルダを丸ごとダウンロードし、フォルダ名を任意の名前に変更します。
ここではtestにしておきます。

フォルダ内のtemplateDetails.xmlの４行目から１２行目までがこのテンプレートの情報になるので、環境に合わせて変更してください。
この情報は管理画面でテンプレート選択の際に表示されます。
最低でも<name>の部分だけは変更しておきましょう。

変更が終わったらフォルダごと/httpdocs/templates/にアップロードすると、管理画面の「エクステンション」＞「テンプレート」管理から選択できる様になります。

まずはページ上部の画像を変更します。
index.phpファイルの43〜46行目

<h1 id="logo">
<img src="//templates/beez/images/logo.gif" border="0" alt="<?php echo JText::_('Logo Beez, Three little Bees'); ?>" width="300" height="97" />
<span class="header1"><?php echo JText::_('Joomla Accessible Template'); ?></span>
</h1>

赤字の部分を変更し、画像を差し替えます。
画像は/httpdocs/templates/test/images/の中に保存して下さい。
青字部分は好みに合わせて消去してもかまいません。

<h1 id="logo">
<img src="//templates/test/images/aomori_header.jpg" border="0" alt="<?php echo JText::_('Logo Test, Aomori'); ?>" width="970" height="120" />
<span class="header1"><?php echo JText::_('テスト作成テンプレート'); ?></span>
</h1>

上記のように変更した事で、画像が変わりました。
testheader

このようにphpファイルとCSSファイルを編集してカスタマイズしていきます。

文字の大きさ調整メニューをカスタマイズ

下図の①にあたる部分を先ほどは変更しました。

次は②にあたる部分を変更します。
②はHP閲覧者が自由にページの文字サイズを変える為のメニューです。
好みによって、そのまま使用しても削除してもかまいません。
ここではメニューの文字を日本語に直します。
number

index.phpファイルの58〜67行目

<div id="fontsize">
<script type="text/javascript">
//<![CDATA[
document.write('<h3><?php echo JText::_('FONTSIZE'); ?></h3><p class="fontsize">');
document.write('<a href="/index.php" title="<?php echo JText::_('Increase size'); ?>" onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('bigger'); ?></a><span class="unseen"> </span>');
document.write('<a href="/index.php" title="<?php echo JText::_('Decrease size'); ?>" onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('smaller'); ?></a><span class="unseen"> </span>');
document.write('<a href="/index.php" title="<?php echo JText::_('Revert styles to default'); ?>" onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('reset'); ?></a></p>');
//]]>
</script>
</div>

変更後

<div id="fontsize">
<script type="text/javascript">
//<![CDATA[
document.write('<h3><?php echo JText::_('文字の大きさ'); ?></h3><p class="fontsize">');
document.write('<a href="/index.php" title="<?php echo JText::_('文字を大きくする'); ?>" onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('大きく'); ?></a><span class="unseen"> </span>');
document.write('<a href="/index.php" title="<?php echo JText::_('文字を小さくする'); ?>" onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('小さく'); ?></a><span class="unseen"> </span>');
document.write('<a href="/index.php" title="<?php echo JText::_('文字を元の大きさに戻す'); ?>" onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('元に戻す'); ?></a></p>');
//]]>
</script>
</div>
記事の背景をカスタマイズ

次は③の記事表示部分を編集します。

その前にindex.phpファイルの22行目以降を確認して下さい。

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/beez/css/template.css" type="text/css" />
<link rel="stylesheet" href="/templates/beez/css/position.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/templates/beez/css/layout.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/templates/beez/css/print.css" type="text/css" media="Print" />
<link rel="stylesheet" href="/templates/beez/css/general.css" type="text/css" />

<link rel="stylesheet" href="/templates/beez/css/template_rtl.css" type="text/css" />

<!--[if lte IE 6]>
<link href="/templates/beez/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="/templates/beez/css/ie7only.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="/templates/beez/javascript/md_stylechanger.js"></script>
</head>

赤字部分が上記同様beezだった場合は、全て に書き換えてください。
直接テーマ名(現在の場合はtest)を打ち込んでも良いのですが、こうする事で自動で現在使用しているテーマ名を入力してくれるので、後々新たにテーマを作る際の複製が楽になります。
3main

それでは③の編集に移りましょう。

③では見出し記事、概要記事、その他の記事と続きます。

まずは見出し記事の背景を変更してみましょう。

templates/test/cssフォルダ内position.cssの150行目

.leading
{
background: #EFDEEA url(../images/biene.gif) no-repeat top left;
border: solid 1px #CCCCCC;
color: #000000;
margin: 30px 0px 10px 0px;
padding: 20px 20px 40px 120px;
position: relative;
}

↓

.leading
{
background: #EFDEEA url(../images/desk_bg.jpg) repeat-y top left;
border: solid 1px #CCCCCC;
color: #666;
margin: 0px 0px 10px;
padding: 15px;
position: relative;
}

赤字のように変更する事で、以下の様になります。
3leading

見出し名などは同フォルダ内layout.cssの491行目
/* ############### main * ########################### */
以降の#main .leadingが含まれる項目を変更します。
好みに合わせて変更してみて下さい。

#main .leadingを含む項目例

500行目
#main .leading h2,#main2 .leading h2 {

515行目
#main .leading .readon,#main2 .leading .readon {

概要記事の背景は
templates/test/cssフォルダ内position.cssの
207行目　.article_row、214行目　.article_column
見出しはlayout.cssの#main h2,#main2 h2が含まれる項目

その他の記事はlayout.cssの#main .blog_moreが含まれる項目

を変更します。

下記画像は③部分編集例となります。
3page
右サイド、左サイドをカスタマイズ

④、⑤はそれぞれtemplates/test/cssフォルダ内position.cssの
71行目　#left、　80行目　#right
で背景等を変更出来ます。

しかし#left、#rightで背景を設定する場合、背景の範囲は上図の色で囲んでいる部分のみとなります。
例えば記事の両脇に上から下まで画像を配置したい場合は、以下のようになります。

position.cssファイルの56行目

#contentarea,#contentarea2
{
border: solid 0px #000;
margin: 0;
padding: 0px 0px 0px 0px;
position: relative;
overflow: hidden;
}
#wrapper { margin: 0 0 0 21%}

↓

#contentarea,#contentarea2
{
border: solid 0px #000;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
background: url(../images/aomori_zigsawleft.jpg) repeat-y 5px 300px;
}
#wrapper { margin: 0 0 0 204px;
background:url(../images/aomori_zigsawright.jpg) repeat-y 550px 300px;
}
wrapper

左画像で示した場所が上記で設定した箇所です。

この時、両サイドのメニューの隙間からも画像が見えてしまうので、
position.cssの#left、#rightを32行目の#allと同じ背景色に設定しておきましょう。
今回の場合は白です。

サイドメニューの項目の色などの設定は、layout.css内の#leftや#rightを含む項目を変更します。
362行目の/* ################ left ######################## */
771行目の/* ############### right ################# */
を目印に項目を探し、設定していきましょう。

両サイドを設定した例は以下の様になります。
4page
フッターのカスタマイズとIE用の設定

⑥はtemplates/test/cssフォルダ内layout.cssの
323行目　/* ################# breadcrumbs ################ */
以降の項目を変更します。

右側の検索枠は同ファイル内160行目の
/* Search box */
以降を変更します。

 

⑦は同ファイル内1332行目の#footerで変更します。
必要に応じてリンクや背景の設定を追加してみましょう。

 

最後に全体の幅や色をlayout.cssのbodyや#allで整えましょう。

Internet Explorer用の設定
beezテンプレートの場合、Internet Explorer用のcssが別に用意されています。
この為、Internet Explorerでページを閲覧すると変更したはずのデザインが適用されていないように見えます。

templates/test/cssフォルダ内のieonly.css及びie7only.cssを確認し、Internet Explorerでも同じデザインで表示されるように調整しましょう。

お疲れ様でした。
これでテンプレートの完成です。
complete