ミヅマアートギャラリー

oyone — 2008-10-18T21:11:14+09:00

開館時間：火曜日から土曜日の11:00-19:00 休廊日：日曜・月曜・祝日東急東横線・日比谷線中目黒駅より徒歩３分東急東横線代官山駅より徒歩６分 JR線・日比谷線恵比寿駅より徒歩１２分

クリエイター用ＨＰ構築ソフトの配布について

oyone — 2008-08-22T11:05:41+09:00

現在、私、画業に専念中の為、1~２ヶ月はアップグレードされません。
まぁ宣伝もしてないんで。いいんですけどね。
↓サーポートページはある程度書き込みしときました。
xoops+WFAさぽーと
↓ソフトのダウンロードは
xoops+WFA（主に、デザイナー、平面、立体作家等、視覚芸術に携わる人用のホームページ構築ソフト）

いろいろな質問はお気軽に
xoops+WFAサポートフォーラム

自分のホームページを作成したい、レベルを上げたい〜けどめんだくさい〜って方には、各種代行サービスもしますよ。（有料す。格安だとは思うすけど）
とりあえずお問い合わせはこちら。

テーマデザインについて（サイトの全体的なカスタマイズ）

oyone — 2008-08-11T17:55:38+09:00

テーマデザイン概要

テーマデザインのカスタマイズ・作成方法は、いろんなやり方があります。
テーマの「default」なんかは、xoops本来のテーマで、ブロックごとにＰＨＰで構成を制御しています。
が、
私的には、解りにくい、やりにくい、という理由から、私作テーマの「simple」で説明していきたいとおもいます。
完全ではないかも知れませんが、極力わかりやすく作ったつもりです。

テーマデザイン（simple）は以下の構成で成り立っています。

『simpleフォルダ』

-　『images』フォルダ
サイト内で基本的に仕様するＨＰ素材画像
-　『style.css』
基本的な各装飾や見た目、配置等を制御
-　『theme.html』
基本的な構成を指定

ある程度カスタマイズの利便性を考えた上でのソース記述をしているつもりです。
そのままのデザインやちょっとした変更ぐらいでは必要の無いソースタグもあります。
まぁお好きなように。

ソースをいじったことさえないという方には、下記参考書やソフトがおすすめ！
パターンさえ覚えれば何とかなるもんすよ。

Amazon.co.jp ウィジェット

お高いソフトを買わなくたってソースに慣れれば十分です。まぁあるにこしたことはないですけどね。
足りないとこは無料ソフトでカバー。
■簡易で使いやすいエディタ
「EmEditor Free」（無料ソフト）
■html作成・編集用エディタ
UnEditoｒ（無料ソフト）
■php用エディタ
ＰＨＰエディタ(2000 or XP 推奨)（無料ソフト）
●Mac ：http://www.mimikaki.net/（無料ソフト）

『html タグ　初心者』とか『html タグ』だけでもインターネットから十分すぎるほどの情報得られますし♪

〜余談〜
サイトのデザイン構成は、はっきり言って、tableレイアウトが正確ですし、やりやすいのですが、私は作るのは、基本、Ｄivでレイアウト。ＣＳＳでデザイン制御。
めざせＷｅｂ標準です。
ＳＥＭ的どうとか、いろんな意見ありますが、とりあえず。
ちなみにテーマは、ＨＴＭＬじゃなくてＸＨＴＭＬ。

theme.htmlの詳細・ブロック配置について。

私の作成したテーマデザインのブロック構成は、基本、右ブロックをページヘッド部分用の
ブロックとして使用しています。

<{*●● ほにゃらら●●*}>は、編集時わかり易くするためのコメントです。
通常でも見た目は表示されないのでいいんですけど、『 <{* 』と『 *}> 』ではさむと、ソース表示時にもHTML上へも実際に反映されることはありません。
本気で編集するためだけのコメントアウトです。

↓とりあえずソースをまんま表示＆説明してみた。

XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

↑DOCTYPE 宣言。ＸＨＴＭＬだよー！とか文字コードの説明してる。

↓ヘッダー部分。サイトの説明とかいろいろ環境の説明。

『system管理画面 > 一般設定 > 一般設定 > 「使用言語」』
『system管理画面 > 一般設定 > 一般設定 > 「使用言語」』
『system管理画面 > 一般設定 > METAタグ/フッタ設定 > 「METAタグ(ROBOTS)」』
『system管理画面 > 一般設定 > METAタグ/フッタ設定 > 「METAタグ(キーワード)」』
『system管理画面 > 一般設定 > METAタグ/フッタ設定 > 「METAタグ(Description)」』
『system管理画面 > 一般設定 > METAタグ/フッタ設定 > 「METAタグ(RATING)」』
『system管理画面 > 一般設定 > METAタグ/フッタ設定 > 「METAタグ(作成者)」』
『system管理画面 > 一般設定 > METAタグ/フッタ設定 > 「METAタグ(コピーライト)」』

<{$xoops_pagetitle}>ページタイトル - <{$xoops_sitename}>サイトタイトル『system管理画面 > 一般設定 >一般設定』
include/xoops.jsへ（ジャバスクリプトファイルの指定）
更新情報（RSS・ATOM）------------------------------

------------------------------------------------------
サイトのアイコンを指定
指テーマで使用するＣＳＳを指定
<{*●● <{$xoops_themecss}>＝style.css●●*}>編集時にコピペで切り替えするためのコメント。
<{$xoops_module_header}>各モジュールの指定するヘッダーを表示
<{$xoops_block_header}>ｄｂｃｓｓの指定するサブヘッダー

<{*●●ヘッダ部分の定義●●*}>

<{*●●右ブロック部分の定義●●*}>ヘッダーメニューとして使用
<{if $xoops_showrblock == 1}>

<{foreach item=block from=$xoops_rblocks}>

<{$block.content}>

<{/foreach}>

<{/if}>
<{*●●右ブロック部分end ●●*}>

<{$xoops_sitename}>

<{*●●サイトタイトル●●*}>

<{*●●ログイン●●*}>

images/login.png" alt="ログイン" width="20" height="20"/>

images/newuser.png" alt="閲覧ユーザ登録" width="20" height="20" />

images/useinfo.png" alt="アカウント情報" width="30" height="20" />

images/news.png" alt="イベント通知" width="30" height="20" />

images/mail.png" alt="受信箱" width="30" height="20" />

images/castam.png" alt="管理者メニュー" width="30" height="20" />

images/logout.png" alt="ログアウト" width="30" height="20" />

images/rss.png" alt="RSS" width="39" height="13" />

<{*●●ログインend●●*}>

<{$xoops_banner}>

『system管理画面 > バナー管理』

<{*●●下記の[ mlimg ]は多言語リンクです。文字リンクの場合は[mlimg]を
Japanese
English
に変更を●●*}>

[mlimg]

<{*●●ヘッダ部分end●●*}>

<{*●●センター部分●●*}>

<{*●●左ブロック部分の定義●●*}>

<{foreach item=block from=$xoops_lblocks}>
<{*●●

<{$block.title}>

●●*}>

<{$block.content}>

<{/foreach}>

<{*●●左ブロックend●●*}>

<{*●●メイン部分の定義●●*}>

<{$xoops_pagetitle}>

<{*●●モジュールコンテンツ●●*}>
<{if $xoops_contents == "" }>
<{else}>

<{$xoops_contents}>

<{/if}>
<{*●●モジュールコンテンツend●●*}>

<{*●●中央-中央ブロック部分の定義●●*}>

<{foreach item=block from=$xoops_ccblocks}>

<{$block.title}>

<{$block.content}>

<{/foreach}>

<{*●●中央-中央ブロック部分end●●*}>

<{*●● メイン2部分の定義 ●●*}>

<{*●●中央-左ブロック部分の定義●●*}>

<{foreach item=block from=$xoops_clblocks}>

<{$block.title}>

<{$block.content}>

<{/foreach}>

<{*●●中央-左ブロック部分終end●●*}>

<{*●●中央-右ブロック部分の定義●●*}>

<{foreach item=block from=$xoops_crblocks}>

<{$block.title}>

<{$block.content}>

<{/foreach}>

<{*●●中央-右ブロック部分end●●*}>

<{*●● メイン2部分end●●*}>

<{*●●メイン部分end●●*}>

<{*●●センター部分end●●*}>

<{*●●フッタ部分の定義●●*}>
『system管理画面 > 一般設定 > METAタグ/フッタ設定 > 「フッタ」』
<{*●●フッタ部分end●●*}>

style.cssの詳細

@charset "euc-jp";
/*--------------------------------------------------------------*/
/* CSS and Graphics are released under GPL */
/* Copyright (C) 2008, Takayuki Yonezaki Inc.   */
/* http://webforart.net/                                           */
/*--------------------------------------------------------------*/
プラウザごとにズレがある。ので初期値をリセット☆
* {    margin: 0;
    padding: 0;
    font-style: normal;}

/* ---------------全般設定----------------------- */

body {
    color: #666666;
    font-family: Verdana, Helvetica, 'ＭＳＰゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', osaka, sans-serif;
    font-size: 75%;
    margin: 0;
    padding: 0;
    }
/* ----表示------ */
マイベスト！？clearfix。divの中に子divを入れてfloat（左寄せ）とかしちゃうと、
子divの高さが親divに反映されない。それを防止するためのものどす。
.clearfix:after { content: url(images/px1toumei.gif); display: block; clear: both; height: 0; }
.clearfix {display: inline-table;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

#page {margin-right: auto;margin-left: auto;width: 99%;}

table {width: 100%;margin: 0;padding: 0;}

table td {
    padding: 5;
    margin: 0;
    vertical-align: top;
    line-height: 130%;}

th {padding:3px;}

img {margin: 1px;padding: 1px;border: 0;}

/* ---------------見出しとリスト ----------------------- */

h1, h2, h3, h4, h5 {
    font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', osaka, sans-serif;
    color: #f60;
    padding: 0;
    margin: 0px 0 5px;
}

h1 {
    line-height: 130%;
    font-size: 14px;
    font-weight: bold;
    color: #666600;
    margin-top: 5px;
    margin-left: 10px;
}
h1 a{
    line-height: 130%;
    font-size: 14px;
    font-weight: bold;
    color: #666600;
    margin-top: 5px;
    margin-left: 10px;
    text-decoration: none;
    cursor: default;
}
h1 a:hover {text-decoration: none;}

h2 {line-height: 130%;font-size: 13px;}

h3, h4, h5 {line-height: 130%;font-size: 12px;}

ul, ol, li {padding: 1px;text-align: left;}

legend {padding: 0 10px;color: #F60;background: inherit;}

hr {height: 1px;padding-top: 1px;padding-bottom: 2px;}

/* ---------------リンクの設定----------------------- */

a {    text-decoration: none;color: #000033;}

a:visited {    color: #666666;}

a:hover {color: #666633;text-decoration: underline;}

/* ---------------ヘッダーブロックの定義------------------- */

#header {
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;}
#topstaitol{padding: 5px;float: left;}
#topstaitol p{
    font-size: 20px;
    line-height: 130%;
    font-weight: bold;
}

/* ---------------右ブロックの定義----------------------- */

#rightcolumn {
    line-height: 110%;
    width: 100%;clear: both;
}
#rightcolumn .blockTitle {font-weight:bold;}
#rightcolumn .blockTitle img {margin: 1px;padding: 1px;}
#rightcolumn .blockContent {}

#menu1{float: right;}
#menu1 li{
    margin: 2px;
    white-space: nowrap;
    list-style-type: none;
    border-left-width: medium;
    border-left-style: solid;
    border-left-color: #CF55FD;
    border-bottom-width: thin;
    border-bottom-style: dashed;
    border-bottom-color: #CCCCCC;
    display: inline;
    float: left;
}
#menu1 a {
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    display: block;
    white-space: nowrap;
}
#menu1 a:hover {}
#menu1 a.menuTop {}
#menu1 a.highlight {}

#menu2{float: right;}
#menu2 li{
    margin: 2px;
    white-space: nowrap;
    list-style-type: none;
    border-left-width: medium;
    border-left-style: solid;
    border-left-color: #999900;
    border-bottom-width: thin;
    border-bottom-style: dashed;
    border-bottom-color: #CCCCCC;
    display: inline;
    float: left;
}
#menu2 a {
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    display: block;
    white-space: nowrap;
}
#menu2 a:hover {}
#menu2 a.menuTop {}
#menu2 a.highlight {}
/* ---------------ユーザメニューの定義----------------------- */

#user_menu {
    float: right;
    clear: right;
    list-style-type: none;
}

#user_menu li{
    margin: 2px;
    white-space: nowrap;
    display: inline;
    float: left;
}

#user_menu li a{
    font-size: x-small;
    display: block;
}
#user_menu a:hover {}
#user_menu a.menuTop {}
#user_menu a.highlight {}

/* ------------多言語リンク------------ */
#enjalink{height: 15px;clear: both;margin: 4px;text-align: right;white-space: nowrap;display: block;}
#enjalink a{font-size: 12px;white-space: nowrap;margin: 5px;}

/* ---------------センター部分の定義-------------------- */

#main_content {width: 100%;clear: both;}

/* ---------------左ブロックの定義-------------------- */

#leftcolumn {float:left;width:16%;display: block;}

/*左ブロックタイトルの定義*/

#leftcolumn .blockTitle {font-weight: 600;text-align: center;}

/*左ブロックコンテンツの定義*/

#leftcolumn .blockContent {
    line-height: 110%;
    padding: 3px;
    display: block;
    margin-bottom: 5px;
    text-align: center;
}

/* ---------------メインメニューの定義----------------------- */
#mainmenu li{
    list-style-type: none;
    margin: 2px;
    padding: 5px;
    clear: both;
}
#mainmenu a {
    display:block;
    font-weight: 600;
}
#mainmenu a:hover {
    font-weight: 600;
    color: #006600;
}
#mainmenu a.menuTop {}
#mainmenu a.menuMain {}
#mainmenu a.menuSub {}

/* ---------------メインブロックの定義----------------------- */
#centercolumn {
    width: 77%;
    display: block;
    float: right;
    padding: 10px;
    border-right-width: thin;
    border-left-width: thin;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-left-color: #CCCCCC;
}

/* ---------------モジュールビューの定義----------------------- */

#content {text-align:left;padding:8px;clear: both;margin-bottom: 26px;}
#content .p505{width: 505px;}

/* ---------------中央-中央ブロックの定義----------------------- */
#centerC {clear: both;}
#centerCcolumn {}
#centerCcolumn .blockTitle {
    padding:5px;
    font-weight:bold;
    overflow:hidden;
    clear: both;
}
#centerCcolumn .blockContent {
    padding:5px;
    margin-bottom:10px;
    clear: both;
}

/* ---------------中央2-----------------------*/

#centercolumn2{width: 100%; clear: both;}

/* ---------------中央-左ブロックの定義----------------------- */
#centerL{width:49%; float: left;}
.centerLcolumn{}
.centerLcolumn .blockTitle {padding:3px 5px;font-weight:bold;}
.centerLcolumn .blockContent {padding:5px;}

/* ---------------中央-右ブロックの定義----------------------- */
#centerR{width:50%; float: right;}
.centerRcolumn{}
.centerRcolumn .blockTitle {padding:3px 5px;font-weight:bold;}
.centerRcolumn .blockContent {padding:5px;}

/* ---------------フッタブロックの定義-------------------- */

#footer{
    height:30px;
    text-align:center;
    margin-top: 30px;
    width: 100%;
    display: block;
    clear: both;
    background-color: #F2F2EE;
    font-size: xx-small;
    line-height: 150%;
    padding-top: 10px;
}

/* ------------ ■■編集管理用■■ ------------ */
.admlink{
    margin-bottom: 12px;
}

.admlink a{
    border-left-width: medium;
    border-left-style: solid;
    border-left-color: #CC6600;
    white-space: nowrap;    background-image: url(images/yb.gif);
    background-repeat: repeat-x;
    background-position: left center;
    border-right-width: medium;
    border-right-style: solid;
    border-right-color: #CC6600;
    text-align: center;
    padding: 5px;
    display: inline;
    margin-top: 0px;
    margin-right: 2px;
    margin-bottom: 4px;
    margin-left: 0px;
    color: #2B2B00;
    }
.pico_concon a{
    border-left-width: medium;
    border-left-style: solid;
    border-left-color: #CC6600;
    white-space: nowrap;    background-image: url(images/yb.gif);
    background-repeat: repeat-x;
    background-position: left center;
    border-right-width: medium;
    border-right-style: solid;
    border-right-color: #CC6600;
    text-align: center;
    padding: 5px;
    margin-top: 8px 8px 8px 0;
    line-height: 200%;
    text-decoration: none;
}

Web for Art Project

ミヅマアートギャラリー

クリエイター用ＨＰ構築ソフトの配布について

テーマデザインについて（サイトの全体的なカスタマイズ）

テーマデザイン概要

テーマデザイン（simple）は以下の構成で成り立っています。

theme.htmlの詳細・ブロック配置について。

<{$xoops_pagetitle}>

style.cssの詳細