Home > テンプレート

テンプレート Archive

ja-purityでクールなメニューを表示する

今日はja-purityでクールなメニューを表示するよ!
えー、クールって言葉が気になるけど、なんかすごそうだね。
ja-purityは、標準で高機能な水平メニューを簡単に表示することができるのよっ。
へー。(なんか今日のアネは鼻息荒いなー)

解説するチュンチュン

まずは、水平表示するためのツリーメニューをつくるよっ。

menu item

ツリー構造のメニューを作るには

>> メニューをツリー表示したい

次にモジュールの作って、「配置」で"hornavi"を選択するよっ。

モジュール設定

ほら、こんな風に表示されるのよ。クールでしょ。

メニュー表示例

ほんとだ、マウスをメニューに合わせるだけで、出たり入ったりするね。
でしょ!ほーらクールクル、クールクル!
(病院に連れて行ったほうがいいかしら・・)

JA_Purityテンプレートのサイトスローガン背景色を背景画像と同色にしたい3

JoomlaJA_Purityヘッダーのテーマ前回の記事>>JA_Purityテンプレートのサイトスローガン背景色を背景画像と同色にしたい2

サイトタイトル下部に表示されるスローガンテキスト の背景色を調整しました。
CSSを編集したんだよっ。

JoomlaJA_Purityスローガン

JA_Purityサイトスローガン背景色

サイトタイトル下のテキスト=スローガン の背景色が指定されています。
これが、

 

JA_Purityスローガン背景画像と色

こうなりました。
サイトスローガンの背景色の指定をやめたため、
背景画像が表示されています。

上の設定をした後、JA_Purity テンプレートの「ヘッダーのテーマ」を「Blue」にしたよ。
そしたら、またスローガンに背景色が表示されちゃったんだ。

JoomlaJA_Purityヘッダーのテーマ

こうなっちゃった。
スローガン部分に背景色がついて、やや明るい色になっています。

JoomlaJA_Purityヘッダーのテーマと背景色ふなは、テンプレートJA_Purityを使って、
ヘッダーのテーマはblue、
サイトスローガンの背景色は特に指定せず、背景画像が透けて表示されるように設定したいんだねっ。

なんでヘッダーのテーマをblueにしたら、スローガンの表示が変わっちゃったの?
前回の記事でスローガンの背景色backgroundを調整したのに。
前回編集したCSSは、ヘッダーのテーマがデフォルトの場合にのみ適用されるんだよ。

(前回編集したCSS=デフォルトに適用されるCSS は templates/ja_purity/css/template.css)

JoomlaテンプレートJA_Purityヘッダーのテーマ参考 ヘッダーのテーマ

Joomlaテンプレート編集ヘッダーのテーマ

ヘッダーのテーマはここから設定。
テンプレート管理画面、画面右側パラメータ内
「ヘッダーのテーマ」をプルダウンで選択。

前回の記事は「ユーザーデフォルト」
今回の記事では「blue」を選択しています。

じゃあヘッダーのテーマをblueへ変更したら、また別のCSSを編集設定しないといけないんだ?
そうね。
そしたら前回みたいにテンプレートの編集画面からCSSを編集したらいいよね?
それが、今回はJoomlaバックエンドからは編集できないんだよ~。
今回編集するのは
templates/ja_purity/styles/header/blue/style.css
っていうCSSだけど、これはFTPを使わないと編集できないんだ。
えーっ
CSSの編集箇所は前回と一緒だから、きっとできるよ~

 

JoomlaテンプレートJA_Purityサイトスローガン背景画像Joomla!は…
バックエンドから編集できるファイルとできないファイルがあります。

Joomla!バックエンドから編集できないファイルは、FTPで直接編集する必要があります。

バックエンドにあるファイルを調べても編集する箇所が分からない場合は
FTPで他のファイルを調べてみるといいよね。

JA_Purityテンプレートのサイトスローガン背景色を背景画像と同色にしたい2

テンプレートJA_Purityの「スローガン」の背景色を
背景画像と一緒にします。
(デフォルトの場合、「スローガン」の背景色が指定され、
背景画像と若干異なる色が表示されています。)

スローガン背景色の指定をやめ、背景画像の上にスローガンテキストが表示されて見えるようにします。

Joomlaスローガン背景色を消す前回の記事>>JA_Purityテンプレートのサイトスローガン背景色を背景画像と  同色にしたい1

今回の作業はテンプレートJA_PurityのCSSを編集します。
CSSの編集はテンプレート管理画面から行えます。

Joomlaエクステンションテンプレート管理

エクステンション―テンプレート管理

 

Joomlaテンプレート管理選択画面

編集したいテンプレートJA_Purityを選択
「編集」アイコンをクリック

 

JoomlaテンプレートCSS編集

テンプレート編集画面です。
画面右上のCSS編集アイコンをクリック。

 

JoomlaテンプレートCSSエディタ

テンプレートCSSエディタ画面です。
template.css を選択して

「編集」

 

JoomlaJA_purityCSS編集

テンプレート編集画面です。
p.site-slogan の background
で設定します。

スローガンの背景を背景画像と一緒にしたいんだよね。
コメントアウトしちゃえ。

 

p.site-slogan {
    margin: 0;
    padding: 0;
    padding: 2px 5px;
    color: #FFFFFF;
    /* background: #444444; */
    font-size: 92%;
    position: absolute;
    bottom: 20px;
    left: 0;

 CSSをこのようにして、保存。すると・・・

フロントエンドはこうなります。

Joomlaフロントエンドサイトタイトル色

サイトスローガンの背景色は表示されなくなります。

背景色一色だけが表示されます。

この設定をする前はこうでした。

Joomlaフロントエンドスローガン背景色

背景は真っ黒だけど、よく見ると
スローガン部分の背景のみ、やや明るい色でした。

できたできた
わーい!スローガンテキストの背景色が透けて、背景画像と同色になったね。

ホーム > テンプレート

ブログランキング
にほんブログ村 IT技術ブログ オープンソースへ
最近の投稿
カテゴリー
最近のコメント

Return to page top