Home > Joomla!で実践サイト作成

Joomla!で実践サイト作成 Archive

記事のCSSエディターで、画像メニューの作り方2

Joomla記事CSS画像メニュー前の記事>>記事のCSSを編集して、画像メニューを作る1

Joomla!デフォルトのエディターを使って、記事のCSSを編集します。

表のセルごとに異なる背景色を設定するよっ。

 

JoomlaCSS表範囲選択

記事編集画面です
背景色をつけたいセルを選択
CSS編集ボタンをクリック

Joomla記事CSSアイコン このアイコンです。

 

Joomla,CSS,エディター,Background

CSS編集画面がポップアップされます
「background」タブを選択
カラー選択のボタンをクリック 

 

JoomlaCSSエディター使い方

もうひとつポップアップされます
色を選択して
「Apply」をクリックすると・・・

 

JoomlaCSSエディター使い方

Background colorに色番号が入ってます
「Update」をクリック

 

JoomlaCSSエディター使い方

指定したセルに背景色が付きました

 JoomlaCSSエディターJoomlaでポンではHTMLやCSSの編集は極力避けるようにしてるけど、このエディターを使ってのCSS編集は、簡単な使い方で感心したのでご紹介しました。ちゅん、ちゅん

記事のCSSエディターで、画像メニューの作り方1

このメニューを作ります。ちょっとバナーメニューみたいでしょ。

Joomla,CSS,記事,背景色

記事にね、
・表を作って、
・テキスト書いて、
・画像を入れて、
・リンクを貼って
・背景に色をつけて、
メニューみたいにしてあるのよ。
以前Joomlaでポンで記事にしたのと同じ方法ね。

参考記事:  表の作り方の流れ >>まとめJoomlaでポン 表の挿入 

 表へ画像を挿入、画像へのリンク設定は >>表とモジュールで画像メニューを作成 

Joomls,記事,CSS,画像,メニュー今回は、上記の参考記事の内容に加えて、表のbackground colorを表示させます。

確かにセルごとに色分けしてあって、見やすさとデザイン性があるよね。
だけど…backgroundcolorというと、CSSを触らなくちゃあいけないの?むつかしそうね…
ノンノン、Joomla!デフォルトのエディターにCSSのボタンがあるから簡単よ。
それじゃあCSSでセルごとに異なる背景色をつける手順を教えてください!

Joomla,記事,CSS,,画像,メニューいいトコで続くよっ!

>>記事のCSSを編集して、画像メニューを作る2

フロントページへ特定記事を固定表示させる2

Joomlaフロントページへ記事を固定表示フロントページの記事TOPへ、常に特定の記事を表示させます。  Joomlaフロントページへ特定記事を固定

このメニューのような記事を、常にフロントページ最上部へ表示させます。
新しい記事を書いた場合でもこの記事は最上部です。

記事が所属するカテゴリ名と、
フロントページのパラメータ設定に工夫をしたよ。
手順は簡単。3ステップよ!

 

1.カテゴリ名を「1-フロントページ」など、数字から始まるカテゴリ名とする

 

Joomlaカテゴリタイトルを数字にする

 カテゴリのタイトルは数字から始まるタイトルにします。

 2.記事を作成、上記のカテゴリへ所属させる

 

 

3.フロントページブログレイアウトで表示順序の設定。

パラメータ-拡張「カテゴリ表示順」を「タイトル―アルファベット順」とする

Joomlaフロントぺージブログレイアウトパラメータ

メニューアイテム編集画面 右側のパラメータ―拡張 です。

 Joomlaフロントページカテゴリ表示順

カテゴリ表示順は タイトル-アルファベット順 を選択します。

 Joomlaフロントページへ特定記事を固定フロントページブログレイアウトでは「カテゴリ表示順」でカテゴリの表示順序を指定することができるよ。

「初期表示順」で設定する記事の表示順よりも「カテゴリ表示順」の方が優先なんだ。

あざやか!Joomla!は機能満載!やりたいことが簡単にできるね!

Joomlaフロントページへ記事を固定表示次はこのメニューの作り方よ。ちゅん、ちゅん。 

>>記事のCSSエディターで、画像メニューの作り方1

ホーム > Joomla!で実践サイト作成

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

Return to page top