初代HDD2012/10/17 昇天orz
 
53075
 
 
自宅サーバ監視
株式会社シーマン サーバー監視サービス

無料DDNSサービス

 

NetCommonsのテンプレートをイジってみるよ

2014/10/19 08:27 ブッチャー

ネットコモンズ公式マニュアルに沿って進めてみます。私のは初版です。

私にもできちゃった!NetCommonsで本格ウェブサイト 第2版: ネットコモンズ公式マニュアル
新井 紀子
近代科学社(2012/08/22)
値段:¥ 2,592






第6章NetCommonsをデザインハックを進めてみます。

※っと、その前に、、、NetCommonsで構築されたHPの編集・管理作業は、IEかFireFoxで行ってください。Chromeだと正常に動かないことが多いです。注意! 例:ページスタイル変更で「タイトルタグを入力してください」と出て変更できない。フルバックアップをしようとしたらダイアログが出なくて先に進まないなど・・・

では、本の内容にそって進めてみますが、それぞれ自分の環境に合わせて読み替えて行きますので、必要なところのみつまんでいきます。

今回は、サーバ上のファイルを直接編集せず、Windows上で編集してから、サーバにアップロードします。

テキストエディターは、Apsalyというソフトを使いました。
http://www.venus.dti.ne.jp/mw31/apsaly/

TeraPadを使いました。
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html

早速、Windows用コアファイルをダウンロード、解凍して編集していきます。
Windows用コアパッケージ

解凍したフォルダー \NetCommons-2.4.2.0\NetCommons-2.4.2.0\html\webapp\style\themesの中にある \noneframe をコピーして任意の名前(半角英数)に変更します。 今回はサイト名 \vchyakki としました。

コピーしたフォルダー内の /comfig フォルダーの theme.ini ファイルをテキストエディターでUTF8,CR+LFで開きます。
;--------------------------------------------------------------------
; 参加カテゴリ-定義ファイル
;--------------------------------------------------------------------
[category]
block = simple←otherに変更
page  = simple←otherに変更

次は、/language\japanese\thme.ini を編集します。
[page]
default = "枠なし" ←"vchyakki"

[block]
default = "枠なし"  ←"vchyakki"

次は、/css/page_style.cssを下のように編集しました。画像ファイルはパンチングメタル風のタイル画像です。
gif形式じゃないとうまく行きませんでした。どうしてpngじゃダメなんだorz

body {
 background-image:url("<{$smarty.const.CORE_BASE_URL}> /themes/vchyakki/images/punch.png);
}
.leftcolumn {
 background-color:#cccdaa;
}

.centercolumn {
 background-color:#ffffff;
}

.rightcolumn {
 background-color:#cccdaa;
}

.headercolumn {
 background-color:#4b4238;
}

.footercolumn {
 background-color:#ceca93;
}


次は、/css/style.css を編集します。noneをvchyakkiに変更します。
/*
 * ブロック定義
 */
.th_vchyakki_content {
 border:0px;
 padding:0px;
}

/*ヘッダータイトル*/
.th_vchyakki_title {
 white-space:nowrap;
 text-align: left;
 margin-bottom:10px;
}


/*
 * ヘッダーメニュー(サブメニュー部)
 */
/*
.th_vchyakki_headermenu {
 padding:3px;
 text-align:right;
}
.th_vchyakki_headermenu .header_btn {
 padding-left:3px;
 padding-right:3px;
}
*/

次は、 /templates/block.html を編集します。3ヶ所のnoneをvchyakkiに変更
<{strip}>
<{assign var="main_theme_name" value="vchyakki"}>
<table border="0" cellspacing="0" cellpadding="0" class="th_vchyakki widthmax">
  <tr>
    <td class="th_vchyakki_content">
     <{*ヘッダータイトル*}>
  <{include file="../../../templates/headertitle/default/title.html"}>
     <{*ヘッダーメニュー*}>
  <{if $headermenu}><{include file="../../../templates/default/headermenu.html"}><{/if}>
     <div class="content"><{$content_field|smarty:nodefaults}></div>
    </td>
  </tr>
</table>
<{/strip}>

ここで、一旦サーバにアップロードします。


ダメだorz うまくいってないorz


もう一度見なおすか・・・


タイル状に画像が貼れてないorz page_style.cssと画像をgifに修正したんだけどね・・・どこかで上書きされてるのかなorz

body {
        background:transparent url("<{$smarty.const.CORE_BASE_URL}>/themes/vchyakki/images/punch.gif") repeat fixed left top;
}
.leftcolumn {
        background-color:#cccdaa;
}

.centercolumn {
        background-color:#ffffff;
}

.rightcolumn {
        background-color:#cccdaa;
}

.headercolumn {
        background-color:#4b4238;
}

.footercolumn {
        background-color:#ceca93;

どうも、ページスタイルの配色が邪魔をしているようで、dot テクスチャ というテーマの一つを改造したらうまくいきました。配色の機能を排除できれば行けそうな気もしますので、もう一冊の実践デザインカスタマイズを読んで作りこんでみますね。


今日はここまで