各種CMS関連

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

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

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

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

beeztemp

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

フォルダ内のtemplateDetails.xmlの4行目から12行目までがこのテンプレートの情報になるので、環境に合わせて変更してください。
この情報は管理画面でテンプレート選択の際に表示されます。
最低でも<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ファイルを編集してカスタマイズしていきます。

続きを読む: Joomla!のテンプレートカスタマイズ

 

EC-CUBEでのリンク指定と画像表示

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

EC-CUBE独特のタグ

画像やリンクの設定では、通常はファイルが保存されている場所のURLを入力します。
例:画像を表示させる

EC-CUBEでは独特のタグを使用してURLを入力する事も出来ます。

使用タグ 意味合い 書き方の例
<!--{$smarty.const.URL_DIR}--> リンク設定の省略タグ <a href="
<!--{$smarty.const.URL_DIR}-->
index.php">

<!--{$TPL_DIR}-->

画像指定の省略タグ <img src="
<!--{$TPL_DIR}-->img/〜.jpg">