Nucleus(JP)フォーラム

NucleusCMS日本語版ユーザーのためのサポートフォーラムです。疑問が生じたらまずは記事検索をご利用ください。

ログインしていません。

#1 2005-09-24 17:40:17

fujita
メンバー
登録日: 2005-04-17
投稿: 9

Re: defaultスキンにて左右にサイドバーを設置するには

はじめまして。よろしくお願いします。

WinXP、IE6.0
v3.2、EUC-JP、インストール時に付属されているdefaultスキンにて使用させて頂いております。

このスキン、ご存知の様に右側にサイドバーが設置されています。
それはそれで便利なのですが今後を考えると左側にも同様なサイドバーが欲しいと考えております。
(右側はカレンダーやカウンター、左側に最新コメントやTBリストなど…)

が、HTML、CSSは理解できるのですが
php関係は全く弱い私にはどこを編集すればよいか、見つけるのに困難な状態です。
単純にフレームの様な設定になっている事は分かるのですが…

初歩的な質問で申し訳ありませんが、ご教授、よろしくお願い致します。
なお、稼働中のURLです。プラグイン等インストールさせて頂いておりますが、ほぼ素のままの状態で利用させて頂いております。
http://fujita.edisc.jp/nucleus/

オフライン

#2 2005-09-24 19:05:06

Tamamiki
メンバー
登録日: 2004-12-04
投稿: 71

Re: defaultスキンにて左右にサイドバーを設置するには

phpは弄らなくても大丈夫だと思いますよ。
CSSに新しいクラスを作って、管理画面でスキンを書き換えればいいかと思います。

現状は<div id="sidebarcontainer">の部分が右サイドバーの領域になっていますので、
<div id="sidebarcontainer2">とか適当な名前のクラスを作って左サイドバーの部分を作って、
CSSにもその要素についてのプロパティを追加してみてはどうでしょうか。
(もちろんこれだけでなく、真ん中の本文部分などの広さを調整する必要もあるかと思います)。

3カラム指定などのCSSについて参考になるかと思いますので↓まずこちらを読まれてみてください。
http://desperadoes.biz/style/dan/index.php

スキンを元の状態に戻したい時もあるかもしれませんので、バックアップとしてデフォルトのスキンは残しておいて、スキンを複製して適当な名前に変更してから書き換えた方が安心ではないかと思います。

オフライン

#3 2005-09-24 23:37:47

fujita
メンバー
登録日: 2005-04-17
投稿: 9

Re: defaultスキンにて左右にサイドバーを設置するには

Tamamikiさん、早速のコメント、ありがとうございます。

管理ページより該当の定義済みパーツを選択後、
<div id="sidebarcontainer2">
として、左側の部分を作成。
仰られた事、ここまでは理解出来たのですが、ここからが…
現状いじる前の段階として

<%parsedinclude(head.inc)%>

<!-- page header -->
<%parsedinclude(header.inc)%>

<%Moblog%>

<!-- page content -->
<div id="container">
<div class="content">
<%blog(default/index,10)%>
</div>
</div>

<!-- page menu -->
<h2 class="hidden">Sidebar</h2>
<div id="sidebarcontainer">
<%parsedinclude(sidebar.inc)%>
</div>

<!-- page footer -->
<%parsedinclude(footer.inc)%>

と記載されております。左側用を作成するというのは、
<!-- page content -->
以前に
<div id="sidebarcontainer2">
を記述すればよろしいのでしょうか?
この部分に記述したり、
<!-- page menu -->
内に記述してみたり、はたまた
<div id="sidebarcontainer2">
<%parsedinclude(sidebar2.inc)%>
と記述してみたり(sidebar2.incは作成済みです)しましたが反映される事が無く、頭が混乱しております。

スキンというより、記述の質問で申し訳ありませんがご教授お願い致します。

オフライン

#4 2005-09-25 01:02:56

はっち
メンバー
From: 岩手
登録日: 2003-11-19
投稿: 251

Re: defaultスキンにて左右にサイドバーを設置するには

<%parsedinclude(head.inc)%>

<!-- page header -->
<%parsedinclude(header.inc)%>

<%Moblog%>

<!-- page content -->←真ん中の箱の中身
<div id="container">
<div class="content">
<%blog(default/index,10)%>
</div>
</div>

<!-- page menu -->←左ないし右(CSS選択により変化)の箱
<h2 class="hidden">Sidebar</h2>
<div id="sidebarcontainer">
<%parsedinclude(sidebar.inc)%>
</div>
↓ここらにでも書けばいいんじゃないでしょうか。
<h2 class="hidden">Sidebar</h2>
<div id="sidebarcontainer2">
<%parsedinclude(sidebar2.inc)%>

</div>

<!-- page footer -->
<%parsedinclude(footer.inc)%>

(sidebar2.incは作成済みです)しましたが反映される事が無く、頭が混乱しております。

Tamamikiさんも書いてらっしゃいますが、
聞くのもなんですが、CSSには書いてますよね?
width等の変更もしてますよね?
すっごい下の方にでてるって言うこともないですよね?
CSSは二種類あります。書き込んだのが違う方だったって言うこともないですよね?
基本的なスキンの変更方法をなにか忘れてるって言うことはないかとは思いますが・・。
すいません、なんか変なこと聞いてるかもしれません・・。
反映されるはずなんですけどね。なんか気になって。

オフライン

#5 2005-09-25 02:07:52

fujita
メンバー
登録日: 2005-04-17
投稿: 9

Re: defaultスキンにて左右にサイドバーを設置するには

はっちさん、コメントありがとうございます。
全くもって、CSSすら理解してなかった様です。

コメント頂いたとおりに記述してみました。
head.incによりdefault_right.cssが読み込まれている様なので、こちらに以下の様に記述してみました。

/*-------------------------------------------------
  Menu
-------------------------------------------------*/
#sidebarcontainer
{
    float: right;
    width: 102px;
    padding: 2px 0 0 0;
}
#sidebarcontainer2
{
    float: left;
    width: 102px;
    padding: 2px 0 0 0;
}
(以下デフォルト)

総幅pxが704px(こちらは変更しておりません)、元々のサイドバー幅が204pxですので、とりあえずテスト的に102pxずつにしてみました。
が、結果は同じ。左側に出る訳でも、下の方に出る訳でもありませんでした。
単純に記述の問題だけだとは分かっているのですが、どこを修正、記述すればいいのか分かりません。
度々申し訳ありません。ご教授お願い致します。

オフライン

#6 2005-09-25 22:17:23

Tamamiki
メンバー
登録日: 2004-12-04
投稿: 71

Re: defaultスキンにて左右にサイドバーを設置するには

やり方はいろいろあると思うんですけれど、テスト的に簡単な3カラムの段組を作ってみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="test.css" rel="stylesheet" type="text/css" />
<title>テスト</title>
</head>
<body>
<div id="title">ヘッダー</div>
<div id="wrapper">
<div id="left">左</div>
<div id="main">メイン</div>
<div id="right">右</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

※test.cssの中身
body {
  margin: 0;
  padding: 0;
  text-align: center;
  background: #000000}

#title {
    width: 800px;
    margin: 0 auto;
    background: #00CCFF;
}

#wrapper {
  width: 800px;
  margin: 0 auto;
  text-align: left;
  background: #CCCCCC}

#left {
    width: 102px;
    float: left;
    background: #FF0000;
}

#main {
    float: left;
    width: 540px;
    background: #FFFFFF;
}

#right {
    width: 102px;
    float: left;
    background: #0000FF;
}

#footer {
    clear: both;
    background: #00FFFF;
}

まず試しにNucleusは使わず、test.htmlとtest.cssを作って表示させてみてください。
そのあとでleft,main,rightのwidth値を変えてみて、背景の灰色がどのように出てくるか確認してみてください。
そうするとどういう構造になってるか一目瞭然だと思います。

ここまでやった上で、http://desperadoes.biz/style/dan/index.php の3段組のところを再確認
してみていただければ大丈夫ではないかと思います。

オフライン

#7 2005-09-27 00:48:25

fujita
メンバー
登録日: 2005-04-17
投稿: 9

Re: defaultスキンにて左右にサイドバーを設置するには

Tamamikiさん、はっちさん、コメント本当にありがとうございます。
まずはお詫びを
スキンの変更をしたつもりが、
グローバル設定の基本のスキンを変えただけで、Blog設定の標準のスキンの変更をしていませんでした。
どうりで反映されなかった訳です。ご迷惑をお掛けいたしました。

>>Tamamikiさん
わざわざ分かりやすいサンプルを作っていただき、ありがとうございます。
ようやっと理解出来るようになってきました。

本来はスキンの質問をしなければいけない場で、cssの仕組みまでご教授頂き、本当にありがとうございます。
また何かありましたらよろしくお願い致します。

オフライン

Board footer