診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

背景画像でJoomla!サイトの見栄えを変える 

Joomla!サイトの見栄えを変えてみる

Joomla!実践サイトには、MovableType、WordPress、Xoopsの実践サンプルサイトに共通のデザイン、レイアウトを適用している。このテンプレートを元にページ全体に背景画像を入れて見栄えを変えてみることにした。

テンプレートをリキッドレイアウトから幅固定タイプに変更する

変更前のテンプレートは表示するブラウザ画面の横幅80%で可変する いわゆるリキッドレイアウトを採用していた。表示幅を固定しないリキッドレイアウトには確かにメリットがあるのだが、企業サイトの場合、あまり幅が小さく表示されても困ることが多い。、特に物販サイトでは商品画像をできるだけ大きく表示することになるので、リキッドレイアウトでも画像がツッカイ棒になってしまい、実際問題として可変できないことが多い。

今回の変更では背景画像で見栄えを変えることが目的なので、横幅が固定されないとサイドバーに対して画像が配置できにくいという問題もあり、フロートレイアウトによる3カラムを維持しながら、横幅固定レイアウトでいくことにした。

フロートレイアウトで3カラム、メインコンテンツ上部記述は難しい

フロートレイアウトは面倒だ。ブラウザによる解釈の違いの影響も大きい。2カラムならまだ何とかなるが、3カラムでは深刻な問題が出てくる。しかもJoomla!のテンプレートはSEOを考慮して、メインコンテンツがサイドコンテンツよりHTMLの上部にくるようにしている。この条件でIEの互換モードでもキチンと表示されるページを作るのは嫌になるほど大変な作業だ。せっかくリキッドレイアウトで表示されるようにしたものを、幅固定レイアウトに変更するのは気が重い。

ともかく、ページ幅750px、左サイドバー 170px、コンテンツ部 400px、右サイドバー 170px の3カラム幅固定レイアウトに変更できた。

後は所定の幅の背景画像を作って設定するだけ

ページ全体の ラッパー用背景画像として 左サイドバーには赤、右サイドバーには緑のクリスマスカラーの画像を作る。それぞれの画像にはドロップシャドーを入れて立体感を醸し出すことにする。コンテンツ部は読みやすくするため白一色にする。サイドバーの表示に一致するように赤緑のボックスを微妙に移動させながら位置決めを行う。ドロップシャドーを入れたために位置決めが面倒だ。

Joomla!でつくるビジネスサイトクリスマスバージョンタイトル部分はラッパーのイメージを延長し、さらにイメージ画像をはりつけることにした。クリスマスなのでリースとポインセチアの画像を使ったが、気に入った素材をネットで探すのに時間がかかってしまった。素材を検索すると、素材サイトではなく、素材サイトのリンク集が出てくるのが面倒だ。ヤットお目当てのページにたどり着いても、素材作成者のサイトはデザイン優先でどこに素材があるのか分かりにくい。時間と手間がかかる原因だ。

デザイン的にはイマイチだが

Joomla!テンプレートにはヘッダとメインの間を横断するグローバルナビを入れている。この部分は途中で色を変えるわけにはいかないので、独自に赤一色の背景画像を作った。リンク色の設定を背景色に合わせて変更するのが面倒だ。

サイドバーのタイトルにも背景画像を入れることにしたが、左右の背景色が違ううえ、アイコンを入れようとしたので結構手間取ってしまった。アクセントになり、ページを引き締めようと苦労しながら結局は妥協することになった。

デザイン的には問題点や改善点も多いが、とにかく4つの背景画像だけでページ全体のイメージを変更することができた。すべて背景画像にしているので変更も簡単だし、SEO的にも有利になるはずだ。あとはデザインセンスの問題だけだ。

泣く子と IEには・・・

一件落着かと思ったら、お問い合わせとWordPressのページがIE互換モードでズレるという現象が発生している。FireFox、Opera、SafariではOK。まったく IE などというわけのわからないブラウザのおかげでどれほどの時間が費やされていることか? 泣く子と IEには勝てない 後日対応しなければならなくなった。

スポンサーサイト

Joomla!にバナー画像を表示する 

記事のトップに画像を入れ替え表示する

Joomla!は任意の位置に所定の画像を入れ替えて表示するバナーモジュールを持っている。設定は極めて簡単。

  • 管理メニュ→モジュール管理→サイトモジュール
  • バナーを表示する位置を決める
  • ※画像サイズはテンプレートで定められた大きさ以内となるので3カラムなら中央部に表示することになるだろう
  • /joomla/images/bannersディレクトリにバナー画像をアップ
  • 管理メニュ→コンポーネント→バナー→バナー管理
  • 画像ごとに表示の有無を設定

Jooma!でWordPress 

Joomla!上のWordPressのテンプレートを変更する

JD-WordPressをインストールするとJoomla!の中でWordPressが使えるようになる。インストールは簡単だった。ただし、WordPressの記事一覧や個別記事の表示が乱れる。 おなじみの手順で themes の下のWordPressのテンプレートを変更したが、何も変わらない。

実は、Joomla!内のWordPressは 通常のWordPressのテンプレート index.php を読んでいないようだ。いろいろ調べてみると どうも JD-WP 配下の jd_wp.html.php をindex として使っているようだ。このファイルを変更しなければならない。属性を書き込みありに設定し、とりあえず 続きを読む に変更したところOK。やはり、このファイルが index.php の役割を果たしている。

JD-WP配下にはスタイルシートに該当するファイルがない。これはテンプレートのスタイルを使っている。ところが、このスタイル定義が読みづらい。何とか解読し、下記の点を修正した。

  1. ブログ名をh1から h3に
  2. 記事タイトルをh2からh4に
  3. postクラスのスタイルをすべてコメント化
  4. narrowcolumnクラスもすべてコメント化
  5. commentformIDのtextareaの幅をコメント化

上の2点は文字の表示サイズの調整とhタグの序列の調整。次は記事の左余白の調整。最後はコメントのテキストエリアの幅の調整。

ところが、これでもコメントがサイドバーにはみ出してしまう。コメントテンプレートで文字幅を指定しているためらしい。max-widthは?という疑問もあるが、とりあえず 横文字桁を 65 から 40に変更。

これで何とか表示の乱れは解消された。まだ何か潜んでいると思うが今日はここまで。


Joomla!にWordPressを組み込む 

最強タッグ Joomla! & WordPress

Joomla!はなかなか優れたCMSだが、ブログの延長ではなく、一般的な企業サイトの構築を志向しているためブログの標準であるコメント、トラックバック機能を持っていない。コメント、トラックバック機能だけを拡張することもできるが、世界標準ブログ WordPress をJoomla! に組み込めるらしい。

WordPressの便利さ・使い易さはすでにこの複眼ブログでも確認済みであり、Xoopsの拡張モジュールとして組み込んだ実績もある。さっそくトライしてみた。

Joomla!用WordPressコンポーネント

Joomla!ジャパンのサイトからコンポーネントをダウンロードする。ダウンロードページには、「WordPressをJoomla!コンポーネント化しているJD-WPを日本語化してあります。カレンダー、最近のコメント、サイドバーの表示にはモジュールが必要です。」とある。基本機能がコンポーネント、サイドバー機能はモジュールとして配布されているらしい。

JD-WordPressのインストール

ダウンロードしたファイル(zip)をローカルに保存

Joomla!管理画面メニューからインストーラ⇒コンポーネントを選択

保存したファイルを指定して、upload&installボタンをクリック

これでインストールは完了した。(実は落とし穴が待っているのだが、それは別のお話)

JD-WordPressを使ってみる

Joomla!管理画面メニューのコンポネントを選択し、リストからJD-WordPressをクリックする。

Joomla!のタイトルの下に見慣れたWordPressの管理画面が表示された。一件の記事とコメントが投稿された状態だ。カテゴリもuncategolized があるだけ。記事があることが確認されたのでJoomla!で表示させてみよう。

Joomla!からWordPressの記事を表示する

グローバルナビとして使っているtopmenuのアイテムとしてJD-WordPressを追加する。新規をクリックし、メニュータイプにコンポーネントを指定。コンポーネントにJD-WordPressを選択し、親アイテムはTop、アクセスレベルはPublic とした。

全画面のグローバルナビにWordPressへのリンク WPブログ が追加されている。クリックするとJD-WordPressの新着記事の一覧が表示される。WordPressのトップ画面(インデックス画面)と同じだ。

ユーザ追加メニューへの追加も同様。

JD-WordPressサイドバーモジュールを追加する

Joomla!じゃぱんからサイドバーモジュールをダウンロード。モジュールとしてインストール(インストール種類がモジュールに変わるだけで他はコンポーネントと同じ)

インストール後、Joomla!管理画面メニュのモジュール⇒サイトモジュールから JD-WP SideBar を選択。右サイドに表示させる。パラメータで表示する対象を指定できるのでpageとカテゴリのみにしておく。このまま保存してJoomla!で表示してみると・・・

JD-WordPressはJoomla!のコンテンツとは別モノ?!

Joomla!のトップページを表示させると・・・

Warning: main(ABSPATH/wp-includes/wp-db.php) 
[function.main]: failed to open stream:
 No such file or directory in XXX.php on line XX

Fatal error: main() [function.require]:
 Failed opening required 'ABSPATH/XXXXXX.php' 
などというエラーが出ている。JD-WordPressのページに進むとエラーは解消される。

どうも JD-WordPressが読めないととエラーがでているようだ。管理画面からモジュールのメニューアイテムリンクを JD-WordPress に限定してやるとエラーはでなくなった。

エラーはでなくなったが、トップページにはWordPressのサイドバーも出なくなる。JD-WordPressはJoomla!のコンテンツとは別モノとして扱われている!!

JD-WordPressの新着記事をJoomla!に表示する

まあサイドバーには カテゴリやpage、メタ情報、アーカイブしか表示できないのでJoomla!本体に表示されなくても我慢できる。

問題はブログの新着記事だ。最新の記事がJooma!に自動的に反映されないようでは、SEO的にも、コンテンツ的にも問題がある。セクション>カテゴリを作り、コンテンツアイテムとしてブログ記事を取り込めないかと試してみたが、どうも無理なようだ。Joomla!コンテンツで一括管理できれば、なんとでも料理できるのだが・・・

しかたがないので、JD-WordPressのRSSから新着記事を取得して、サイドバーに表示することにした。WPの新着記事のうち、指定件数分の抜粋(抜粋がない場合は記事全文)がサイドバーに表示される。本当は文字数も制限できるはずだが、日本語には対応していないようだ。画像も表示できない。RSSの取得?更新?もタイムラグがあるようだ。

不十分な点は残るが、とにかくJD-WordPressの新着記事をJoomla!で表示させることができた。

この後のお話 「JD-WordPressがカスタマイズできない!」近日アップ予定








トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。