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

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








スポンサーサイト 

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

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

カテゴリ名変更 

XOOPSでつくるビジネスサイト というカテゴリを立てていましたが、XOOPS以外のCMSも取り上げることになったので、カテゴリ名を CMSでつくるビジネスサイト に変更しました。

CMSとはコンテンツ(C) マネジメント(M) システム(S)という意味です。簡単に言えば、ウェブ上での文書管理システム、もっと簡単に言うと、ウェブページとして情報を提供するための仕組みのことです。バックにDBを持ち、記事はDBに保存されます。ページの作成は投稿画面から、記事のレイアウトは管理画面からできるので、従来型のページ作成に比べて、簡単に効率良く、ウェブサイトが構築できます。

このカテゴリは、CMSを使って、企業のサイトやネットショップをつくるための情報を提供しています。

スポンサーサイト

XOOPSでつくるビジネスサイト ヘッダデザインを変更する 

XOOPS ヘッダ背景画像を入れる

XOOPSを活用したビジネスサイト構築法 デザイン編 第一弾

R0010960XOOPSはCMS=コンテンツ管理システムだが、インストールしたままでは使えない。モジュール追加以外に、デザイン面でも手を入れてオリジナリティを出す必要がある。今回は、XOOPSで行こう デザイン編の第一弾として、ヘッダのXOOPSロゴ画像の代わりに背景画像を入れてみた。

XOOPS デザインカスタマイズの準備

今回のカスタマイズは XOOPSの既定のテーマ default を対象とする。最初からテンプレートを作ったり、他のテーマをもとにする方法もあるが、XOOPSの基本構造を理解するために、最初のカスタマイズは default をベースにするほうがよいだろう。

defaultテーマを直接変更すると取り返しのつかないことになるので、themes/default配下のファイルを themes/新テーマ に再アップする。このとき、theme.html の 4か所の include先を default/ から {%xoops_thems} に変更する。
{include file="$xoops_theme/theme_blockleft.html"}

管理メニュー>システム管理>一般設定>編集 で デフォルトサイトテーマ に新テーマを設定する。新テーマは頻繁に更新することになるので、themes/ ディレクトリからの自動アップデートを有効にする を有効にしておく。(カスタマイズ終了後は自動アップデートを無効にすること)

XOOPS ヘッダ部の構成を確認する

XOOPSのテンプレートは themes/新テーマ 配下の6つのHTMLで構成されている。theme.htmlがメインとなるHTMLで、他のHTLは先ほど変更したinclude文で theme.html に読み込まれる。

ヘッダ部は theme.htmlの上部 26行目から34行目のtable内に書かれている。tableは2行(2段)、1行目の左が headerlogo、右が headerbanner。2行目は headerbar。

defaut のイメージの XOOPSロゴがテーブル1行目の左セル headerlogo、その右の青いベタ部分が headerbanner、下の行全部が headerbar だ。

XOOPS ヘッダ部1行目に背景画像を入れる

default ではロゴとバナーをセルに分けているが、今回は合体して背景に画像を入れてみる。いろいろやり方はあるが、headerlogoのセルをコメントでつぶし、headerbannerのセルに colspan="2" を指定して二つのセルを合体させた。

XOOPSのテーマ用スタイルシートは同じディレクトリの style.css。48行目あたりの headerbanner 定義に背景画像用の定義を追加する。

td#headerbanner {
width: 100%;
height:120px; /* 背景画像の高さと合わせる */
background-image:url(titleBack.jpg); /* 背景画像 */
background-repeat:no-repeat;
background-position:top right;
}

背景画像を新テーマディレクトリにアップして確認してみよう。

XOOPS サイトタイトルをスローガンを見出しに表示する

XOOPSのdefaultテーマでは、サイト名とスローガン(XOOPSではサイトの説明文のことを過激にもこう呼んでいる)は title にしか表示されない。これではSEO的にも問題なのでヘッダ部の背景画像の上に表示させる。

さらにXOOPS defautlテーマでは h1.h2,h3,h4等の見出しタグを使っていない。わずかにWordPressモジュールが記事の日付でh3,タイトルでh4を使っているのみ。これらのタグはSEO的に有効だとされているので、積極的に使ったほうがいいだろう。WordPressモジュールとの整合性を考えて、サイト名をh1,スローガン=サイト説明文をh2にした。

<td colspan="2" id="headerbanner"><a href="<{$xoops_url}>/"><h1><{$xoops_sitename}></h1></a><h2><{$xoops_slogan}></h2></td>

defaultテーマでは hタグに対するスタイル設定もないので、style.css で定義する。マージン、パッディングを設定して文字位置を調整し、h2の文字サイズを変更した。

これで、いかにもXOOPSで作りました! というサイトのイメージから脱却できるのではないか。背景画像でサイトや季節のイメージを、その上にサイト名と説明文をh1,h2タグで記述し、見た目もSEO効果を考えたつもり。


XOOPSでつくるビジネスサイト myAlbum-Pで画像ギャラリを作る 

XOOPS 画像管理モジュール myAlbum-Pを使う

XOOPSを活用したビジネスサイト構築法 第三弾

R0010974XOOPSはCMS=コンテンツ管理システムだが、インストールしたままでは使えない。さまざまなモジュール=ブログ流に言うとプラグインを追加して自分なりに使いこなしていく必要がある。前々回のTinyD、前回のxhldに引き続き、XOOPSで行こう 第三弾として画像管理モジュール myAlbum-P を追加してみた。

XOOPSには画像管理機能としてイメージマネージャがあるが、自動サムネイルが作れない。この myAlbum-Pはサムネイルの自動作成だけでなく、いろいろな機能を持ったモジュールだ。

myAlbum-Pのインストール

前々回のTinyD、前回のxhldと同じGIJOEさんのページ PEAK XOOPSから myAlbum-P 2.90Beta をダウンロード。解凍してサーバにアップ。

myalbumディレクトリをmodulesディレクトリ下に。

サーバにアップしたらXOOPSの管理者メニューをクリックし、システム管理>モジュール管理で マイアルバム myalbum-Pの列の右から二番目のインストールアイコンをクリックしてインストールを実行する。

myAlbum-Pの設定

uploadディレクトリに画像とサムネイル用のディレクトリを作り、権限を設定しておく。myAlbum-Pの管理メニューの一般設定で作成したディレクトリをそれぞれ設定。ついでに最大表示幅と高さ、最大サイズ、シングルビューのサイズも設定。画像処理はとりあえず既定のGDのまま。さらに画像インポートでイメージマネージャから画像をインポート。

myAlbum-Pの表示設定

myAlbum-Pの場合、権限が管理者のみに限定されているので、各グループの設定で権限を設定。ところが、ゲストにはアルバムが表示されない。システム管理の管理メニューのグループ管理でゲストに対しマイアルバムへのモジュールアクセス権限を設定。これでXOOPSメニューのマイアルバムでゲストに対しても画像一覧が表示された。

イメージマネージャとの統合

統合は省略。このままマイアルバムとして使ってみる。


ギャラリはこんな感じになる。画像だけでなく、文章やコメントを付けられるので、ブログとして使うことも可能だ。


XOOPSでつくるビジネスサイト xhldで他のサイトの情報を取得する 

XOOPS RSS取得抽出モジュール xhldを使う

XOOPSを活用したビジネスサイト構築法 第二弾

R0010886XOOPSはCMS=コンテンツ管理システムだが、インストールしたままでは使えない。さまざまなモジュール=ブログ流に言うとプラグインを追加して自分なりに使いこなしていく必要がある。ということでXOOPSで行こう 第二弾として、他のサイトのRSSを取得するモジュール xhld を追加してみた。XOOPSはインストールしたけれど何を書けば良いかわからないときに使える?モジュールだ。

xhldのインストール

前回のTinyDと同じGIJOEさんのページ PEAK XOOPSからダウンロード。解凍してサーバにアップ。

xhld0ディレクトリをmodulesディレクトリ下に。

サーバにアップしたらXOOPSの管理者メニューをクリックし、システム管理>モジュール管理でxhldの列の右から二番目のインストールアイコンをクリックしてインストールを実行する。

xhldの設定

xhldの管理メニューのフィード管理でRSSを取得するサイトを設定する。RSSとはサイトのサマリ(概要)をやり取りするための配信データのこと。

xhldの表示設定

xhldの管理メニュー ブロック・グループ管理を開き、画面下部のグループ管理でゲストに表示させるため、すべてをクリックして送信。上部のブロック管理で、ヘッドラインブロックをトップページの中央ブロックに表示させる。XOOPSトップページを表示してみると指定したサイトの最新記事タイトルが5個表示されている。

XOOPSメインメニューでヘッドラインブロックのメイン画面を開くと、指定されたサイトの記事タイトルと本文が表形式で表示されている。

xhldの最新ヘッドラインブロックとヘッドラインブロックの違い

同じ画面下に最新ヘッドラインブロックがある。こちらは、すべての取得サイトから最新記事を取得するもの。ヘッドラインブロックには上部にサイト名、一覧には記事名が表示されるが、最新ヘッドラインブロックでは、一覧にサイト名まで表示される。

xhldの絞込み機能

perlの正規表現を使って取得先の記事タイトルや本文を文字列検索で絞り込むこともできるが今回は省略。

xhldの使い方

自社サイトに店長ブログの新着記事を表示させたい! という要求に応えてくれるモジュールだ。記事を絞り込めば、イベント情報の新着、お知らせの新着などに分けて表示することもできる。これまた便利なモジュールだ。

インストールの際にのディレクトリ名を変更してアップすると、複数のxhldを同じXOOPS内で使い分けることができる点もTinyDと同じ。

xhldを使うと、関連するサイトやメンバーのサイトの新着が取得できるので、ポータルサイトやコミュニティサイトに最適だ。

xhldの問題

xhldを有効にすると、XOOPSサイトへの初回のアクセスでPHPエラーが出る。どうも saxparserがバッティングしているようだ。XOOPS標準と同じクラスを xhld の中で定義しているため。

今、xhldをアクティブ⇔非アクティブに切り替えて確認したところ、xhldアクティブでやはりエラーとなる。当面非アクティブにするしかない。

XOOPSではモジュール単位にアクティブ⇔非アクティブが設定できるのは便利だ。今回のように、どれかのモジュールに問題があるかもしれない場合、本来ならアンインストールしてみることになるが、XOOPSならモジュール管理で非アクティブにすれば特定のモジュールを切り離すことができる。アンインストールすれば、またインストールしなければならないが、チェックのON/OFFでアクティブに戻せるので気軽に確認できる。


XOOPSでつくるビジネスサイト TinyDで自由にページを作る 

コンテンツ管理モジュール TinyDを使う

XOOPSを活用したビジネスサイト構築法 第一弾

R0010874XOOPSはCMS=コンテンツ管理システムだが、インストールしたままでは使えない。さまざまなモジュール=ブログ流に言うとプラグインを追加して自分なりに使いこなしていく必要がある。とはいえ、最初にどんなモジュールを追加すればよいか迷うところだ。今回は汎用的に自由にページが書けるモジュールを追加してみた。使いはじめとして、簡単に何でも記事が書ける状態にしてみる。

TinyDのインストール

GIJOEさんのページ PEAK XOOPSからダウンロード。解凍してサーバにアップ。

commonディレクトリはXOOPSのルートへ、tinyd0ディレクトリはmodulesディレクトリ下に。

サーバにアップしたらXOOPSの管理者メニューをクリックし、システム管理>モジュール管理でTinyDの列の右から二番目のインストールアイコンをクリックしてインストールを実行する。

TinyDの表示設定

管理メニューの左列からTinyDを開き、ブロックアクセス権限画面下部のグループ管理でゲストにも表示閲覧を許可。同画面の上部でTinyDのメニューとTinyDの内容の表示ページとブロック位置を指定。

TinyDの記事を書く

TinyD管理メニューバーからコンテンツの追加を選んで記事を書く。ビジュアルエディタとHTMLエディタが選べる等、ブログの記事を書くのとまったく同じ要領。

TinyDの記事の見え方

追加した記事はメニュー内のアイテム(サブメニュー)としてTinyDメニューに表示される。TinyDメニューから記事をクリックすると各記事ページが表示され、TinyDカテゴリをクリックしたときはTinyDのコンテンツ管理でHP(HomePage)とした記事が最初に表示さる。

XOOPSトップページにTinyDの記事を表示させることもできるが、この場合ブロック管理でTinyDのオプションに指定した記事が一つだけ表示される。

TinyDのメニューの見え方

既定ではサブにチェックが入っているので追加した記事はメニュー内のアイテム(サブメニュー)となるが、TinyD管理ページでサブのチェックをはずすとメニューには表示されなくなる。

TinyDのメニューをXOOPSトップページに表示させることもできる。

TinyDのページナビゲーション

TinyDの一般設定でページナビゲーションを設定すると、各ページの下部に前ページ、次ページのリンクとタイトルが表示される。

TinyDの使い方

XOOPSトップへの表示、TinyD内で最初に表示されるページの設定、TinyDメニューの表示設定が可能なので、TinyDを利用すれば、かなり充実したコンテンツが作れる。技術メモなどの関連するページを作っていくには便利なモジュールだ。インストールの際にtinyd0のディレクトリ名を変更したアップすると、複数のTinyDを同じXOOPS内で使い分けることができる。XOOPS技術情報とWordPress技術情報など、複数のコンテンツが管理できるので便利だ。

簡単にカテゴリ分けしたページが作れるので、XOOPSで最初に使うモジュールとしても最適だといえる。


ニッコウキスゲ週間 Part5 

R0011014
長かった一週間も終わりです。最後は夕映えのニッコウキスゲでしめることにします。

本当は一輪だけをアップにしたいところですが、国立公園内では手も足もだせません。

※訂正 霧ケ峰のある八ヶ岳・中信高原は国定公園でした


ニッコウキスゲ週間 Part4 

R0010989
車山湿原から車山乗越を経て、一本樺の丘で一休み。蓼科山を眺め北の耳へ。一面のニッコウキスゲの高原を散歩して肩に戻ったら夕暮れ近く、鷲ヶ峰をシルエットに八島湿原が白く光り、花の色も濃さを増しています。


ニッコウキスゲ週間 Part3 

R0010980
突然の雨。コロボックルヒュッテで雨宿りを兼ねて一服。雨が小降りになったら出発です。やがて蝶々深山の上に青空が広がってきました。


ニッコウキスゲ週間 Part2 

R0010868
霧が峰自然保護センターで開花状況を確認したところ、車山の肩が見ごろだとのことなので直行します。








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