MT・XOOPS・CSS初心者カスタマイズMemo

• 12月31日・・・テスト
• 03月05日・・・タグソースの括弧「<>」を表示させる方法
• 03月05日・・・iframe　ターゲット指定でフレーム解除方法
• 05月15日・・・XOOPS：picoのサイドメニューのカスタマイズ
• 05月15日・・・XOOPS：pico 1.00

当サイトの更新情報をRSSで配信しています。

• テスト

ここのようにブログやサイトでタグソースを表示しようとすると
<タグ>～の括弧(かっこ)をつけたままだと
そこで展開されてしまう恐れがあるので使えなかったりします。

そんな時に便利なものがあります。

　　　　左の括弧　「<」　は　「& l t ;」

　　　　右の括弧　「>」　は　「& g t ;」

これをそれぞれ変換させて使う方法です。
(括弧に変換されてしまうので半角スペースを入れていますので使うときは取ってくださいね)

ブログを投稿してアップ記事を見てみると
「<タグ>」になってるので面白いですよ。

iframeタグがXHTML上では使わないほうがよいとは言われていますが
使ったほうが早い！ってことが出てきます(汗)。

そしてフレーム内のリンクって、そのままだとリンクをクリックすると
そのフレーム内だけで開いてしまい、スクロールも「なし」に指定しようもんなら

「見えない！」

ま、当然なのですが、初心者は確認してみて初めてその事態がわかるんです。
ということでフレーム内にあるリンクをクリックした時に
自分の思うように表示させる方法をメモメモ。

まずはフレーム指定タグも載せておきます。

・フレーム指定タグ

<iframe frameborder="0" src="フレーム枠に表示させるurl" width="000" height="000" scrolling="NO" marginheight="0"><iframe>

・フレーム枠に表示させるページ(ｈｔｍｌ)内のリンクタグ

　★_parent　1段だけフレーム解除して全画面を親ページに表示

　　　<a href="リンク先url" target="_parent">　

---------------------------------------------------------------------
各表示方法別、ターゲット(target)

　★_blank　常に名前無しのウィンドウを新規に開いて、そこに表示します。
　★_self　　自分自身のウィンドウ（フレーム）に表示します。
　★_top　　分割を全て解除して、そこに表示します。
　★_parent　1段だけ分割を解除して、その親フレームに表示します。

picoのサイドメニューのカスタマイズは
「システム管理」→「テンプレート・マネジャー」→「pico(名前変更してたらそれ)」の

「pico_block_menu.html」。

★marginで、カテゴリーの位置を調整。バックカラー変更。
　paddingで余白調整。

<{foreach item=category from=$block.categories}>
<dl>
<dt style="margin:3px 0 0 8px;padding:1px 3px;background-color:#C73A70;">

<a href="<{$block.mod_url}>/<{$category.link}>">
<{if $category.id == 0}>
<{$block.lang_topcategory}>
<{else}>
<{$category.title}>
<{/if}>
</a>
</dt>
<dd style="margin:0;"><ul>
<{foreach item=content from=$category.contents}>

★コンテンツのバックカラー修正。

<li style="margin:0;background-color:#C73A70;"><a href="<{$block.mod_url}>/<{$content.link}>" title="<{$block.lang_lastupdated}>:<{$content.created_time_formatted}>"><{$content.subject}></a></li>
<{/foreach}>
</ul></dd>
</dl>
<{/foreach}>

tinyDの後継という位置づけで新しく登場した静的コンテンツ用モジュールです。

http://xoops.peak.ne.jp/modules/mydownloads/singlefile.php?cid=1&lid=92

念のため以下コピーです。

1) アーカイブを展開して、html/modules/pico を moduels の下にコピー

(2) ディレクトリ名は好きにつけてください。（"pico"をリネーム可）

(3) アーカイブ内の html/class/smarty/plugins/ にあるファイル２つを class/smarty/plugins/ の下にコピーしてください (d3forum等と同じです）

(4) DocumentRootの外に専用のディレクトリを作ります 例) /home/yourhome/xoops_trust_path/

(5) そのディレクトリのフルパスをmainfile.phpに記述します。場所はXOOPS_URL定義行の直後が良いでしょう。

define('XOOPS_TRUST_PATH','/home/yourhome/xoops_trust_path');

(6) XOOPS_TRUST_PATHの下にmodulesディレクトリを作ります (XOOPS_TRUST_PATH/modules/)
（ステップ(4)～(6)は、altsysや各種D3モジュールと共通ですので、すでに行ってあればスキップして構いません）

(7) アーカイブのxoops_trust_path/modules/picoをXOOPS_TRUST_PATH/modules/にコピーします。（この"pico"はリネームしないでください）

(8) XOOPSモジュールとしてインストールしてください。

(9) 管理者画面のカテゴリー権限設定で、トップカテゴリーについての権限をこの時点で設定しておくと後々楽が出来るかも知れません。

==== 静的コンテンツ用モジュール pico ===

pico とは Duplicatable V3 (D3) 技術を応用した静的コンテンツ用モジュールです。
開発当初から想定していた機能を一通り実装したこともあり、この1.00を現時点での安定版としています。

機能追加は1.1xにて行います。最新機能を利用したい方は、ぜひ1.1xにトライしてください。

D3モジュールなので、XOOPS_TRUST_PATH についての設定が必要です。
（すでにこのあたりの設定がしてあれば、とても簡単にインストールできます）

機能的には、TinyDの後継という位置づけですが、コード的には完全なフルスクラッチであり、TinyDとは（もちろんTinyContentとも）完全に独立しています。picoが安定版となった時点で、TinyDは開発終了とします。もちろん、TinyDからのアップグレードパスは用意してますので、必要に応じて、適宜引っ越してください。少なくとも、picoがTinyDに機能的に劣ることはないはずです。

SPEC:

・階層カテゴリー
・パンくず
・ページナビゲーション
・XOOPS_TRUST_PATH/wraps/(dirname)ファイルの手動ページラップ
・XOOPS_TRUST_PATH/wraps/(dirname)ファイルの自動ページラップ/転送
・静的URI (wraps方式)
・カテゴリーOption Overrideシステム
・任意の順番でかけることのできるフィルター群（新たに Smarty追加）
・プレビュー
・本文キャッシュ（代わりにXOOPSのモジュールキャッシュは利用不可）
・文字化けのない友達紹介リンク
・プリンタ用画面
・シングルコンテント画面
・モジュール・カテゴリーレベルのHTMLヘッダ
・コンテンツ毎のHTMLヘッダ（上とは独立）
・検索（XOOPS検索の本文表示対応）
・閲覧数カウント
・ブロック「コンテンツ一覧」複製可
・ブロック「メニュー」複製可
・ブロック「コンテンツ表示」複製可
・管理者用記事一覧管理
・サブメニュー（ただし、メインメニューで自分自身が選択されている場合のみ）
・d3forum nativeコメント統合
・Wysiwyg Editor (common/spaw と common/fckeditorの両対応)
・TinyDからのインポート（モジュールまるごと）
・他のpicoからのインポート（モジュールまるごと）
・他のpicoへのエクスポート（記事単位）
・sitemapプラグイン
・投票
・目次ページ
・新規登録の承認制
・変更申請の承認制
・申請があったことへのイベント通知
・申請に対するwaitingプラグイン
・新着RSS（モジュール全体およびカテゴリー毎）
・ラップページ自動登録
・xoops_breadcrumbs規格に対応

タイトルがじゃまってよくあります。
特にセンター部分はいらないなあって私は思いました。
でも小窓でほしいかもって思うので、各コンテンツごとに選択したいなと思ったらこの方法ですね。

「Customizing XOOPS ~自由にデザイン・自在にHack」
にも載っていますが、タグ打ちが大変！

友人のサイトの「Affiliate Field」に載っています。

http://affiliate-field.net/modules/tinyd4/rewrite/tc_25.html

「none」をタイトル部分に追加するだけで非表示にできる優れものタグです。

注：でも私の使ったテーマは少し元からのタグが違っていたので四苦八苦！
ブロックごとにHTMLが分けてあるのがデフォルトのテーマ。
私の使用したテーマはそれが１つのHTMLにまとめてあったので
不要な「ifタグ」を削除しないとサイトが真っ白に・・・・

照らし合わせてみるといらない分がわかってきます。
メイン部分全体にかかっていた「ifタグ」を削除することでできました。(=￣▽￣=)Ｖ

あちこちで見て回って１番わかりやすかったハックです。

http://suin.jp/modules/mydownloads/viewcat-cid-4.html

Simplified URLs　(ダウンロード)

http://suin.jp/modules/mydownloads/visit-cid-4-lid-6-type-0.html

zip圧縮ファイルをダウンロードし、説明どおりに修正アップロードすると、静的URLに変更できました。

1. loadpage.php　の修正箇所は３３行目の　$start_module = "new";　を　$start_module = "";　にする。
2. ３８、４０行目を自分のURLになおす。 (public_htmlなど表面にでないディレクトリは入れなくて良い)
3. 私の場合：http://www.kirei-dokoro.com/loadpage.php
4. あとは「mainfile.php」の属性に注意してダウンロード・アップロードすること。

前記事参照。

mainfile.php を属性変更(書き込みにチェック入れる)して

1度自分のPCにダウンロードする。

テラパッドで開いてリンクのついている２箇所を

変更したいURLに変更する。

その際最後の「/」は取ること。

変更し、保存したらそのままアップ。

属性を元に戻して終了です。

MTのレイアウトや内容の変更をする時、
メインページやカテゴリーページなど同じ訂正を数回しないといけません。
これを一発で変更できる方法がモジュールにしちゃえー！なのです。

<$MTInclude module="★★★"$>　タグを使います。

「テンプレート」-「モジュール」で新規作成。

例えばヘッダー部分(タイトルバナー部分等)を一発変換したい場合、
ヘッダー部分のタグすべてをモジュールにコピペします。
そしてアルファベット限定のタイトルをつけます。
例えば「header」とします。

これでモジュールのほうは保存でOK。

それぞれのテンプレートには
「header」の場合

<!--ヘッダー-->
<$MTInclude module="header"$>
<!--/ヘッダー-->

こんな感じになります。
そしてヘッダー部分の最初にあったタグと入れ替えたらOKです。

これでヘッダー部分に変更があった場合、
モジュールの「header」を修正するだけですむようなります。

ヘッダー、フッター、３カラムなど、各パーツ別に作ると便利ですよ。

↓こんな感じです。私はヘッダー部分を「バナーとナビ」にしてみました。

<!--コンテンツ・バナーとナビ-->
<$MTInclude module="banner-nav"$>
<!--/コンテンツ・バナーとナビ-->

<!--コンテンツ左-->
<$MTInclude module="alpha(left)"$>
<!--/コンテンツ左-->

<!--コンテンツ右-->
<$MTInclude module="gamma(right)"$>
<!--/コンテンツ右-->

<!--フッター-->
<$MTInclude module="footer"$>
<!--/フッター-->

元のスタイルのままだとあまりにもタイトルと記事との間が狭かったので

広げてみました。

スタイルシートの記事部分、

　　　　　.entry-content { margin: 5px 0;
　　　　　　　↓
　　　　　.entry-content { margin: 20px 0;

に変えたらできました。この場合、記事の上下が20pｘあくという意味です。

下は空けたくないときは　20px 0px 0px 0px とそれぞれ指定すればOK。

.date-header
{
margin: 5px 17px 0 0;
padding: 0 0 5px 0;
color: #09c;
font-size: 11px;
text-transform: uppercase;
}
/* 記事タイトル */
.entry-header
{
margin: 5px 0;
padding: 15px 0 0 33px;
background: url(maru.gif) 0 0.20em no-repeat;
color: #6f6fff;
font-size: 18px;
font-weight: bold;
}

.entry-content { margin: 20px 0;
}