Nucleus(JP)フォーラム

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

ログインしていません。

#1 2006-02-04 17:19:25

funk
メンバー
From: 福岡
登録日: 2006-01-24
投稿: 45
ウェブサイト

Re: タイトルに画像を貼ったのはいいけれど・・・

こんにちわ 過去ログで下記の記事を見つけて実行したのはいいんですが・・・
<!-- l --><a class="postlink-local" href="http://japan.nucleuscms.org/bb/viewtopic.php?p=10226&">viewtopic.php?p=10226&</a><!-- l -->

header.incの記述は下記のようにしました。

<body>

<!-- page header -->
<div id="header"><a name="top"></a>
<h1>
<img src="<%skinfile(images/kaitek.gif)%>"  title="ネットで快適生活">
</h1>
    <%if(skintype,error)%>
        <a href="<%sitevar(url)%>" accesskey="1"><%sitevar(name)%></a>
    <%else%>
    <%if(skintype,member)%>
        <a href="<%sitevar(url)%>" accesskey="1"><%sitevar(name)%></a>
    <%else%>
        <a href="<%blogsetting(url)%>" accesskey="1"><%blogsetting(name)%></a>
    <%endif%>
    <%endif%>
</h1>
</div>

<!-- begin wrapper divs -->
<div id="mainwrapper">
<div id="wrapper">

どうしてもバックの黄色がはずせません。
リンク設定も下のタイトル文字ではなく画像につけたいんですが、どうすればいいのでしょうか?
今の状態です。
http://funk.main.jp/blog/

まだいろいろなことがよく理解できなくてご迷惑かもしれませんがどなたかお願いします。


あのですね 登録しているURLは  Nucleusのデフォルトのまんまなです。これからいろいろいじっていきますのでその過程を楽しんでください。汗

オフライン

#2 2006-02-04 17:53:41

kosugiatkips
メンバー
From: 金沢区
登録日: 2006-01-15
投稿: 353

Re: タイトルに画像を貼ったのはいいけれど・・・

デフォルトスキンの見た目は
スキンフォルダのdefault/default_right.css
をいじるといいでしょう。

#headerと#header h1に書いてあるバックグラウンド設定等が該当してますね。

大きさとかにこだわらないなら、スキンフォルダの
default/images/header.jpgとdefault/images/header_sm.jpgを編集して上書きアップすれば、好きな画像に変えられるかと思います。

リンクとかはheader.incをよく見るしかないかな。

オフライン

#3 2006-02-04 19:31:25

funk
メンバー
From: 福岡
登録日: 2006-01-24
投稿: 45
ウェブサイト

Re: タイトルに画像を貼ったのはいいけれど・・・

kosugiatkipsさん 早速、解答してくださってありがとうございます。
kosugiatkipsさんのおっしゃる通りdefault/default_right.css の一部分をいじってみたのですが、/* background: white url(images/header.jpg) no-repeat; */という部分のheader.jpgをロゴ.jpgに変えてみましたがうまく反映されませんでした。で、background: white url(images/header_sm.jpg) repeat-x 0 6px;
のheader_sm.jpgを試しに画像ソフトで真っ赤にしてみたらそれは反映されました。でも出来るならばロゴそのものでデザインを決めたかったのでファイル名はそのままにdefault/images/header.jpgのheader.jpを大きさ等はそのままに上書き編集してアップさせてみました。
だけどだめでした。
結局header.incを開いてタイトル画像のファイル名を上記のimages/header.jpgに書き換えてやっと表示できた次第です。
ただ、これってdefault/default_right.cssの設定の上にheader.incの設定がかぶさっているということなのでしょうか? だとすると方法としてあんまりスマートではないような気がします。
で、自分がheader.incとdefault/default_right.cssの関係がよくわかってないということに気づきました。
今はタイトル部分をどうにかしたいということだけなのですが、そのへんの部分を教えてもらえないでしょうか?
あと画像の貼られている部分の縦の大きさをも少し狭くしたいのですがそのへんもよくわかりませんでした。

>リンクとかはheader.incをよく見るしかないかな。
header.incを見ましたがよくわかりませんでした・・・orz 具体的にタグをどのように改造すればいいのでしょうか?

で関連質問なのですが上記の方法ってすべてFTPでサーバにつないで直接ファイルをいじってるってことになりますが、管理ホームにログインしてスキン設定とかからはいじれないんでしょうか?また上記のような場合どの項目をいじるのでしょうか?管理ホームでいじれることと直接じゃないといじれないことの区別もまだよくわかってない状態です。それと一応スキンは複製してるのですがその生データがどこに格納されているのかわかりません。(そーいうもんじゃないかもしれませんが・・・今はまだわかってないので)

文章が長くてわかりずらくてすいません。
自分でもマニュアルとか見て考えたんですがいまひとつわかりませんでした。よろしくお願いします。


あのですね 登録しているURLは  Nucleusのデフォルトのまんまなです。これからいろいろいじっていきますのでその過程を楽しんでください。汗

オフライン

#4 2006-02-04 20:09:35

kosugiatkips
メンバー
From: 金沢区
登録日: 2006-01-15
投稿: 353

Re: タイトルに画像を貼ったのはいいけれど・・・

中途半端な説明で誤解させてしまいましたね。

ご質問の内容に全部回答すると、ものすごい長いドキュメントになってしまうので、私が誤解させてしまった部分について補足したいと思います。

defaultスキンのヘッダー部分なんですが、

header -> header h1 -> コンテンツ

というような階層構造になって上に重なっているものと思ってください。
この階層構造ぶりがheader.incに書かれています。

default_right.cssはこの見え方を決定しています。
なので、#headerの内容をどう変えても、#header h1の内容が上書きしてしまえば、#headerに対して設定したbackgroundは見た目に影響しません。
サーバから、header_sm.jpgを削除してしまえば、header.jpgが見えてきます。

header.incの画像ファイル名は上記の階層で言うと「コンテンツ」の部分です。
これをimages/header.jpgに変えたということは、一番上の階層なのでこれだけが見えます。

header_sm.jpgをサーバから削除して、header.jpgを背景にしたい画像に変更し、header.incの画像はロゴの画像にしたらいいかと思います。

ヘッダー部分の高さを抑えるなら、#headerのheightと#header h1のheightの両方の値を小さくするとよいでしょう。

FTPを使うのを好まない場合は、デフォルトで入っているプラグインのSkinFilesでスキンディレクトリ内のファイルを編集できます。


スキンとテンプレートの関係は多分、このサイトのどこかにわかりやすく説明してある部分があるんじゃないかと想像するのですが、どうなんでしょう。私は確認してないですが。

http://japan.nucleuscms.org/documentati ... tesvsskins
こちらのマニュアルはご覧になったかと思いますが、デフォルトのスキンをいじってデザインを決めるにはCSSの知識が必要です。


という前置きをした上で簡単に書いておきますと、
私も最初は誤解していたのですが、スキンの主体はスキンディレクトリじゃなく、データベース内にあります。
管理画面に入るとスキンの編集ができますが(おそらくここで複製して使用されていると思いますが)ここで登録された内容がスキンであって、パーサーがこれを読んでページを育成します。
呼び名はスキンですが、実際のところ、骨格です。これにアイテムを流し込んだり共通の機能を提供するのがテンプレートで、テンプレートとスキンのコンビネーションはかなり重要です。
でスキンディレクトリは何をするところかというと、全部データベース内のスキンに書くと煩雑になるので見通しを良くするためにインクルードします。html、画像、phpプログラム、等が使えます。

という御託を並べても、結局誤解を与えるだけのような気がしてきました。忘れてください。

オフライン

#5 2006-02-04 21:54:08

Z10
メンバー
From: 神奈川
登録日: 2005-06-30
投稿: 228

Re: タイトルに画像を貼ったのはいいけれど・・・

こんにちは。
CSSがどのように設定されているのかをまず理解することが大事です。
例えば、#header、#container、.contentとか、レイアウトのアウトラインを決めているようなものにたいして、それぞれ色や太さを変更する等したborderをCSSに修正を加えてみると、理解できると思います。
こういったことをやっておかないと、ボックスが落っこちたとか、びよーんと伸びたりとか、あるはずのものが見えないなんてことが起こったりします。


Kilax.org
http://kilax.org
Kilax : Nucleus HTML5 w/Responsive Skin
http://kilax.org/blog/catid_2-itemid_3.html

オフライン

#6 2006-02-04 21:57:52

funk
メンバー
From: 福岡
登録日: 2006-01-24
投稿: 45
ウェブサイト

Re: タイトルに画像を貼ったのはいいけれど・・・

kosugiatkipsさん 本当に申し訳ないです。自分の理解力が足らないばかりに長文の質問になってしまって・・・。
今はその調べ方と質問の仕方自体に四苦八苦してる状態なので、どうしても質問が長くなってしまって。。。
また、さらに詳しく説明してくださってありがとうございます。何度も理解できるまでマニュアルも見てみます。

>FTPを使うのを好まない場合は、
FTPは使ってもいいんですが複製したスキンのファイルを直でいじった方がもしもの場合、復帰できるかなと思って・・・。今は生のデータを扱う場合は複製ディレクトリがないのでオリジナルをいったんPCの方にDLさせて保険としてとってる状態です。(一応最初にNucleusをDLしたものはPCに保存してありますが)

kosugiatkipsさんの解答も少し理解することが出来ました。書かれてあることを再度反芻して実行に移りたいと思います。
早くいろいろなことが理解できるようにがんばりますのでこれからもよろしくお願いします。


あのですね 登録しているURLは  Nucleusのデフォルトのまんまなです。これからいろいろいじっていきますのでその過程を楽しんでください。汗

オフライン

#7 2006-02-04 22:03:13

funk
メンバー
From: 福岡
登録日: 2006-01-24
投稿: 45
ウェブサイト

Re: タイトルに画像を貼ったのはいいけれど・・・

Z10さん CSSを理解するということですね。わかりました。参考書も買ったのでそれを見て勉強します。
ありがとうございました。またよろしくお願いします。


あのですね 登録しているURLは  Nucleusのデフォルトのまんまなです。これからいろいろいじっていきますのでその過程を楽しんでください。汗

オフライン

#8 2006-02-04 23:02:30

kosugiatkips
メンバー
From: 金沢区
登録日: 2006-01-15
投稿: 353

Re: タイトルに画像を貼ったのはいいけれど・・・

CSSの知識的には手探りでも、いろんなスキンが配布されているので、やりたいことやテイストの近いものを探して画像だけ張り替えるとかすると言う手もありますよ
スキンは複数インストールして切り替えて使うこともできますし。

オフライン

#9 2006-02-05 02:02:37

funk
メンバー
From: 福岡
登録日: 2006-01-24
投稿: 45
ウェブサイト

Re: タイトルに画像を貼ったのはいいけれど・・・

kosugiatkipsさん そうですね まずは出来ることからやってみます。一足飛びにはなかなかいかないものですね(;^_^A アセアセ・・・

一応 タイトルをロゴ画像に変えることには成功しました。
default_right.cssの

#header h1
{
    /* small header image specific lines */
    height: 168px;
    width: 692px;
    background: white url(images/header_sm.jpg) repeat-x 0 6px;
    margin: 0 6px;
    /* end small header image specific lines */
    font-size: 38px;
    text-align: center;
    line-height: 160px;
}

の部分を全部削除し、header.incの中の一部分を
<img src="<%skinfile(images/kaitek.jpg)%>のkaitek.jpg(作成したロゴのファイル名)にしました。

作成したロゴのファイルはdefault/imagesに置きました。

まだdefaultスキンを複製したファイル群はどこに格納されてるのかという疑問はありますがそれはまた別のスレッドをたてたいと思います。
ロゴにリンクを設定はまだやってませんがなんとかさぐりだしたいと思います。

kosugiatkipsさん、Z10さん 本当にありがとうございました。
よろしかったら画像貼りに成功した私のページを見てやってください。
http://funk.main.jp/blog/

追伸 #header h1って削除したけどまずかっですかねぇ・・・・ それが少し不安。。。
それとdefault_right.cssの中の/* background: white url(images/header.jpg) no-repeat; */のheader.jpgってロゴファイル名に変更しなくてもよかったんですかね・・・。header.incの設定の方が優先されるんでしたよね。。。
最後にきてまた質問でほんとすいません。


あのですね 登録しているURLは  Nucleusのデフォルトのまんまなです。これからいろいろいじっていきますのでその過程を楽しんでください。汗

オフライン

#10 2006-02-05 09:13:25

kosugiatkips
メンバー
From: 金沢区
登録日: 2006-01-15
投稿: 353

Re: タイトルに画像を貼ったのはいいけれど・・・

バックアップはとってあるようなんですが、defaultスキンは他のスキンにスキンタイプが設定されていないときなどに使用されるので、defaultのままとっておくか、すべてのスキンタイプを装備したデフォルトのスキンを、グローバル設定のデフォルトのスキンに指定しておく必要があります。

で、わけがわからなくなるまえにdefaultのスキンの複製方法を知っておいたほうがいいです。

まず、複製を作ります。
1.skinsディレクトリのdefaultディレクトリを複製して適切なディレクトリ名をつける。
2.管理エリアのスキン編集でdefaultのスキンを複製する。
3.管理エリアのテンプレート編集でdefault/indexとdefault/itemを複製する。

複製の初期的な設定をします。
1.スキン(複製直後はclone_default)で編集をクリックして、名前をわかりやすいものをつけて、Include プリフィックスを先ほど作成したスキンディレクトリの名前に変更する。(最後の/を忘れずに)
2.同様に、複製したテンプレート(cloneddefault/indexやcloneddefault/item)の名前を変更する

複製同士の連携を構築する。
1.複製したスキンディレクトリ内の.inc関係のファイルからdefaut/indexやdefault/itemと記述してある部分を先ほど複製して改名したテンプレート名に書き換えて、スキンディレクトリをアップする。
2.スキン編集からすべてのスキンタイプを編集して、default/indexやdefault/itemとなっている部分を先ほど改名したテンプレート名に置き換えて保存する。

ブログで新規作成したスキンを適用する。
ブログの設定でスキンを新しく指定したものに置き換える。

とまぁ、知っていればどうということはないのですが、最初のとっかかりとしては結構手間がかかります。

funk さんの発言:

追伸 #header h1って削除したけどまずかっですかねぇ・・・・ それが少し不安。。。
それとdefault_right.cssの中の/* background: white url(images/header.jpg) no-repeat; */のheader.jpgってロゴファイル名に変更しなくてもよかったんですかね・・・。header.incの設定の方が優先されるんでしたよね。。。
最後にきてまた質問でほんとすいません。

とのことですが、CSSで変わるのは見た目なので、見た目に問題がなければ気にしなくてよいと思いますよ。

オフライン

#11 2006-02-05 19:36:29

funk
メンバー
From: 福岡
登録日: 2006-01-24
投稿: 45
ウェブサイト

Re: タイトルに画像を貼ったのはいいけれど・・・

kosugiatkipsさん、具体的な説明本当にありがとうございます。
今、kosugiatkipsさんの説明の通りにしました。サーバの中のやつを複製するとこまで気づきませんでした。 :oops:

ただ、タイトルの画像にリンクを貼るやり方と画像タイトルの下の文字タイトルを消すことがどうしてもわかりませんでした。default_right.cssとheader.incと管理エリアのスキン設定を何度も見ていろいろいじってはもどし、その影響を観察していったんですが答にたどりつきませんでした。。。orz

すいません・・・ どうか教えてください。


あのですね 登録しているURLは  Nucleusのデフォルトのまんまなです。これからいろいろいじっていきますのでその過程を楽しんでください。汗

オフライン

#12 2006-02-05 19:53:42

kosugiatkips
メンバー
From: 金沢区
登録日: 2006-01-15
投稿: 353

Re: タイトルに画像を貼ったのはいいけれど・・・

最初の投稿によれば

<div id="header"><a name="top"></a>
<h1>
<img src="<%skinfile(images/kaitek.gif)%>" title="ネットで快適生活">
</h1>
 <%if(skintype,error)%>
  <a href="<%sitevar(url)%>" accesskey="1"><%sitevar(name)%></a>
   <%else%>
    <%if(skintype,member)%>
     <a href="<%sitevar(url)%>" accesskey="1"><%sitevar(name)%></a>
  <%else%>
     <a href="<%blogsetting(url)%>" accesskey="1"><%blogsetting(name)%></a>
    <%endif%>
  <%endif%>
 </h1>
</div> 

と書かれているようなんですが、
<h1>タグが変ですね。
下記のようにしてみてはどうでしょうか。

<div id="header"><a name="top"></a>
<h1>
 <%if(skintype,error)%>
  <a href="<%sitevar(url)%>" accesskey="1"><img src="<%skinfile(images/kaitek.gif)%>" title="ネットで快適生活" /></a>
 <%else%>
  <%if(skintype,member)%>
    <a href="<%sitevar(url)%>" accesskey="1"><img src="<%skinfile(images/kaitek.gif)%>" title="ネットで快適生活" /></a>
  <%else%>
    <a href="<%blogsetting(url)%>" accesskey="1"><img src="<%skinfile(images/kaitek.gif)%>" title="ネットで快適生活" /></a>
   <%endif%>
 <%endif%>
</h1>
</div> 

オフライン

#13 2006-02-05 20:25:00

funk
メンバー
From: 福岡
登録日: 2006-01-24
投稿: 45
ウェブサイト

Re: タイトルに画像を貼ったのはいいけれど・・・

kosugiatkipsさん たびたびありがとうございます。
header.incの中身をkosugiatkipsさんの書かれた通りになおしたところ、画像にリンクも貼れて画像の下の文字タイトルも消えました。

ただWindows(IE)でページ確認したところ、画像タイトルの上に余白ができてしまったのです。
Macintoshでは(サファリ)下記の様にその余白と画像の下に文字化けらしきものがついてしまいました。
ブラウザの文字コードはどちらもEUCにしてます。

Macintosh(サファリ)のキャプチャです。
http://funk.main.jp/1.png

なんども質問して心ぐるしいのですがよろしくお願いします。


あのですね 登録しているURLは  Nucleusのデフォルトのまんまなです。これからいろいろいじっていきますのでその過程を楽しんでください。汗

オフライン

#14 2006-02-05 20:51:16

kosugiatkips
メンバー
From: 金沢区
登録日: 2006-01-15
投稿: 353

Re: タイトルに画像を貼ったのはいいけれど・・・

コードの中のインデントしてある部分に全角スペースが入っているみたいです。(というか私が間違って全角にしたぽ)

なので、全角スペースを半角スペースに変換してください。

オフライン

#15 2006-02-05 21:32:09

funk
メンバー
From: 福岡
登録日: 2006-01-24
投稿: 45
ウェブサイト

Re: タイトルに画像を貼ったのはいいけれど・・・

kosugiatkipsさん 無事、解決しました〜=*^-^*=♪
スペースひとつとってみてもこんなにかわってしまうんですね。勉強になりました。
ほんとに長いやりとりありがうございました。
今後ともよろしくお願いします。


あのですね 登録しているURLは  Nucleusのデフォルトのまんまなです。これからいろいろいじっていきますのでその過程を楽しんでください。汗

オフライン

Board footer