Follow Us.RSS

ページレイアウトとCSSの編集について

  • 新規投稿
  • ログイン

ホームページメーカーページレイアウトとCSSの編集について

 まだまだHTMLとCSSの参考書とにらめっこ状態の初心者です。

 RSSやカレンダーが表示される部分を左に寄せて、本文を右側に表示させたり、色々したいのですが、なかなかうまくいきません。

 表示情報は出来るだけ簡素なシンプルなものでいいかと考えているので、初心者ながら一度ページレイアウトとCSS編集をまっさらにして組み直した方が思い通りになるのではなんて考えていますが、消さない方がいいCSSの箇所や、ページレイアウトの記載箇所はありますでしょうか。(ページレイアウトの記載以外に関係するCSSの箇所はどれになるでしょうか)

 また、カテゴリ付きホームページメーカだと、div id="content" class="double" となっているのですが、カテゴリなしだとclass指定が無かったりするのは、何かあるのでしょうか。

 初心者の質問で申し訳ありませんが、よろしくお願いいたします。

グラファイト-ショボン
  • みれにあむ
  • Windows 7/InternetExplorer9.0
  • 2012年11月9日(金) 0時34分12秒

ホームページメーカーRe:ページレイアウトとCSSの編集について

ご質問ありがとうございます。

CMONOS.JP のデフォルトの XHTML の構造についてはこちらをご覧ください。
CMONOS.JP マニュアル:CMONOS.JP 共通:CMONOS.JP の HTML/CSS カスタマイズ

ちなみに、デフォルトのサイトテンプレートでは、何も設定を変更しなければ、「サブ | メイン」と並びます。「メイン | サブ」と並べたい場合は、ページレイアウトの「<body> class」に「ordinary」と設定して「保存」し記事を再構築します。

もし、「<body> class」に「ordinary」と設定してされている場合、これを削除して「保存」し記事を再構築すると、カラムの並び順が「サブ | メイン」となります。

なお、デフォルトの CSS では、id#content に .double は用意されていません。ただ、class 名に何も設定しない場合、2カラムとなります。

また、Vicuna CMS をお使いの場合は、Vicuna のサイトでカスタマイズ方法についてお調べください。
mt.Vicuna - Customize Index

HTML の各要素に適用されている CSS を分析するには、Firefox + Firebug や、Chrome のインスペクタが便利です。

もちろん、CSS をすべて削除して一から記述するのも手ですし、実際ウェブ制作案件ではそのようにされることが多いですが、それなりにたいへんです。書き込み欄の CSS なども消えてしまいますのでご注意ください。

以上、参考になりましたら幸いです。

CMONOS スタッフ
  • CMONOS スタッフ
  • MacOS X/Safari6.0
  • 2012年11月9日(金) 1時34分27秒

ホームページメーカーRe:ページレイアウトとCSSの編集について

回答ありがとうございます。
マニュアルの読み込みが足りなかったようですいません。

ところで、カテゴリ付きのホームページメーカの総合インデックス頁のレイアウトが、どうも最新のテンプレート適用がされないようなのですが、どうすればよいでしょうか。

全ページに最新のテンプレートを・・・とかいうメニューも一般設定に出てきませんし、カテゴリー記事内で最新のテンプレート適用としても、総合インデックス頁は反映されていないようです。(もしかしたら、そのせいもあって今までレイアウトがうまくいかないと悩んでいたところがあったかも)

よろしくお願いいたします。

グラファイト-ショボン
  • みれにあむ
  • Windows 7/InternetExplorer9.0
  • 2012年11月10日(土) 10時39分28秒

ホームページメーカーRe[2]:ページレイアウトとCSSの編集について

ご返信ありがとうございます。

総合インデックスには各カテゴリーとは別に「ページレイアウト」設定があります。もし、Vicuna CMS を導入している場合は、「データベース・設定の復元」で「Vicuna 互換」とつく設定を復元する必要があります。

また、総合インデックスは、「最新のテンプレートを使う」オプションが有効でない場合も、新しく公開記事が保存されたときに必ず更新されます。

以上参考になりましたら幸いです。

CMONOS スタッフ
  • CMONOS スタッフ
  • MacOS X/Safari6.0
  • 2012年11月10日(土) 15時9分52秒

ホームページメーカーRe:ページレイアウトとCSSの編集について

…総合インデックスページレイアウトの div id=main の中身を空にして、カテゴリー記事を投稿しました。
div id=utilitie で更新された情報が出ているので、ページレイアウトもリセットされるはずと思ったのですが・・・(更新されません)

追記:新規投稿記事がmain内にあるはずの更新情報に出ないようになりましが、過去の投稿分が残ったままです。(そこに更新情報が表示されるという設定も保存されたままということは、やっぱりレイアウトが直ってないのではと考えています。div#utilities分を左に移したいのに!)

http://hyena.jp/millennium/nikki/

何が悪いのでしょう。(あるいは、明示的に最新のレイアウトでリセットする方法はありませんでしょうか)

それと、総合インデックスを、更新情報も入れないリンクだけにしたら、やっぱり更新されなくなったりしそうで、悩み中です。

グラファイト-ショボン
  • みれにあむ
  • Windows 7/InternetExplorer9.0
  • 2012年11月10日(土) 15時37分29秒

ホームページメーカーRe[2]:ページレイアウトとCSSの編集について

ご返信ありがとうございます。

総合インデックスのページテンプレートにインデックスタグがみつからない場合、そのページテンプレートは無視されますのでご注意ください。

一度「データベース・設定の復元」で「初期設定」について「Vicuna 互換設定」を選択して「復元」することをおすすめします。

また各カテゴリーの設定も「Vicuna 互換」となっていないようです。こちらもカテゴリーごとに一度「データベース・設定の復元」で「初期設定」と「フィールド設定」について「Vicuna 互換...」を選択し、「復元」することをおすすめします。

なお、Vicuna CMS では「ページレイアウト」の「<body> class」に「mainIndex double」などと指定し、カラムの表示をコントロールします。

デフォルトの XHTML では、id="content" で同様のコントロールをしますが、Vicuna 互換サイトテンプレートの XHTML はまったく異なりますので、ご注意ください。

参考:mt.Vicuna - Customize Index

以上参考になりましたら幸いです。

CMONOS スタッフ
  • CMONOS スタッフ
  • MacOS X/Safari6.0
  • 2012年11月10日(土) 15時52分23秒

ホームページメーカーRe:ページレイアウトとCSSの編集について

Vicunaを使いたくも無いのですが。
デフォルトを弄ってでは無理なのでしょうか?

取り置きしていた削除分から、index を復帰させても変わらず。

ショボンです。
(レイアウト無視される条件を、少し詳しく教えて下さい)

グラファイト-ショボン
  • みれにあむ
  • Windows 7/InternetExplorer9.0
  • 2012年11月11日(日) 1時24分11秒

ホームページメーカーRe[2]:ページレイアウトとCSSの編集について

ご返信ありがとうございます。

テスト中でまだ本番記事がないようですので、一度すべてのCGI をアンインストールして、「デフォルトのサイトテンプレート」を現在のディレクトリに適用するところからやり直されるのも手だと思います。

すべての CGI をアンインストールするには「セットアップアシスタント」の「CGI アンインストール」で表示されるすべての CGI を選択し、アンインストールします。

デフォルトのサイトテンプレートを現在のディレクトリに適用するには「セットアップアシスタント」の「サイトテンプレート適用」で「デフォルトのサイトテンプレート」を選択し、サイトテンプレートを適用します。

※トップページは、CGI アンインストーラーで削除されないため、これまでに作成されたページが残ります。「最新のテンプレートを使う」を有効にして保存すると、レイアウトが更新されます。

ちなみに、インデックスが必須のページでは、インデックス関連独自タグがみつからない場合、そのテンプレートは無視され、ページは更新されません。

以上参考になりましたら幸いです。

CMONOS スタッフ
  • CMONOS スタッフ
  • MacOS X/Safari6.0
  • 2012年11月11日(日) 2時13分12秒

ホームページメーカーRe:ページレイアウトとCSSの編集について

 回答ありがとうございます。
 デフォルトとVicunaが入り交じっていて、おかしなことになっていたようです。

 ところで、回答いただいた内容でデフォルトの状態に戻すことは出来たのですが、liquid gridを用いてカテゴリ有りのホームページめーかのインデックスを横に並べようとしても上手くいきません。ボックスは設定されているようなのですが、下に並んで横に回り込んでくれないのです。

 liquid gridにした他は、いじっていない状態なので、並ぶのが正しい動作のように思うのですが勘違いしていますでしょうか?(liquid gridを追記する場所を間違えている?)

 3列で横に並ばせたいのですが、何処をいじればいいでしょう。他の頁では5列にしたいので、併せて教えていただけると、とても助かります。

 よろしくお願いいたします。

グラファイト-ニコリン
  • みれにあむ
  • Windows XP/Opera8.7/ja
  • 2012年11月13日(火) 8時16分38秒

ホームページメーカーRe[2]:ページレイアウトとCSSの編集について

ご返信ありがとうございます。

liquid grid はカテゴリーごとに設定されます。そのため、同一カテゴリーの記事はタイル状に並びますが、別カテゴリーの記事は回り込みません。

カテゴリーを横断してインデックスを表示したい場合は、index タグを削除して、subindex タグを、metaindex タグにしてください。

また、3列、5列と列数を指定することはできません(もちろんCSSを改造すれば可能です)。div#content に class="single" を指定すると、1カラムのみとなり、4列に並べることはできます。

以上参考になりましたら幸いです。

CMONOS スタッフ
  • CMONOS スタッフ
  • MacOS X/Safari6.0
  • 2012年11月13日(火) 16時41分9秒

ホームページメーカーRe:ページレイアウトとCSSの編集について

 お世話になります。

 諦めの悪いところにあと少し教えて下さい。

①subindexにオプションでIDを指定して、指定のカテゴリだけのsubindexを表示させることは出来ますでしょうか。
 これが出来るなら、divでくくって横に並べられるのではと期待しています。

②有る程度欲しい材料がそろっている状態で一度総合インデックスを作り、そのhtmlファイルを直接改造してftpでアップするという方法で、望みのレイアウトで横に並べた物を作ると言うことは出来ますでしょうか。
 また、この方法が使えた場合、カテゴリ内記事を追加した際に総合インデックスのレイアウトが崩れるのを防ぐには、どうすればよいでしょうか。

 何かいい方法がありましたら、教えて下さい。
(出来るだけインデックスは一目でわかる様にしたいので、スクロールさせないと項目が出てこないような状態は避けたく、横に並べたいのです。)

グラファイト-ニコリン
  • みれにあむ
  • Windows XP/Opera8.7/ja
  • 2012年11月14日(水) 18時9分33秒

ホームページメーカーRe[2]:ページレイアウトとCSSの編集について

ご返信ありがとうございます。
ひとつひとつお答えいたします。

①subindexにオプションでIDを指定して、指定のカテゴリだけのsubindexを表示させることは出来ますでしょうか。 これが出来るなら、divでくくって横に並べられるのではと期待しています。

どのような状態をお考えなのか、いまひとつイメージがつかめ切れていないのですが、いずれにしましても、総合インデックスで特定カテゴリーのインデックスのみを表示することはできません。

デフォルトの状態で、既にカテゴリーごとに div で区切られてはいますから、この div に独自の class 名を設定した上で、その class 名についてカテゴリーがカラム状に横に並ぶようスタイルを指定すれば、イメージしてらっしゃるかんじになる、かもしれません。

②有る程度欲しい材料がそろっている状態で一度総合インデックスを作り、そのhtmlファイルを直接改造してftpでアップするという方法で、望みのレイアウトで横に並べた物を作ると言うことは出来ますでしょうか。

アップロードして状態を確認するためには有効かもしれませんが、あとで改造した html にあわせてページテンプレートも改造する方が望ましいです。

カテゴリーをひとつのカラムとして横に並べたいということでしたら、上記にも書きました通り、CSS ファイルを編集することでコントロール可能です。

 また、この方法が使えた場合、カテゴリ内記事を追加した際に総合インデックスのレイアウトが崩れるのを防ぐには、どうすればよいでしょうか。

インデックス用の独自タグを正しく設定してください。

 何かいい方法がありましたら、教えて下さい。(出来るだけインデックスは一目でわかる様にしたいので、スクロールさせないと項目が出てこないような状態は避けたく、横に並べたいのです。)

カテゴリーごとに縦長のインデックスを生成し、横に並べたいということでしょうか。

CSS を改造することで可能だと思います。

弊社ではデフォルトの HTML/CSS の id/class 名カスタマイズで対応できない、新しいテンプレートの作成サポートを、有償で承っております。もし必要な場合は有償サポートのご依頼をご検討ください。

https://cmonos.jp/cgi/support/start.cgi

以上参考になりましたら幸いです。

CMONOS スタッフ
  • CMONOS スタッフ
  • MacOS X/Safari6.0
  • 2012年11月14日(水) 21時35分49秒

ホームページメーカーRe:ページレイアウトとCSSの編集について

できました!!

素人質問でお手数おかけしましたが、CSSを弄って何とかイメージに近い状態に持ってくることが出来ました!(index周りのブロックのCSSに、clear:noneを貼りまくりました)

今までよくわからなかったHTMLやCSSも何となくわかるようになった感じがするので、本当にお世話になりました。

これから、細かいところを色々手を加えて、自分だけのすてきサイトを作るよう、頑張ってみたいと思います。

また、何かありましたらよろしくお願いいたします。

グラファイト-エヘッ
  • みれにあむ
  • Windows 7/InternetExplorer9.0
  • 2012年11月15日(木) 0時51分37秒

ホームページメーカーRe[2]:ページレイアウトとCSSの編集について

ご報告ありがとうございます。

また何かわかりにくい点等出てきましたらお気軽にご相談ください。お待ちしておりますm(_ _)m。

CMONOS スタッフ
  • CMONOS スタッフ
  • MacOS X/Safari6.0
  • 2012年11月15日(木) 1時32分50秒
タイトルは内容を簡潔にまとめたものにしてください。
「質問です」などのタイトルで投稿することはできません。
アイコン
この E-Mail は表示されません。
添付ファイル
(< 1000000 byte)
サイズ (<800) × (<800) ピクセル
ユーザー環境MacOS X/AppleWebKit537.36
  • 新規投稿
  • ログイン