タイル状のインデックスについて
タイル状のインデックスについて
いつもお世話になっております。
マニュアルの「ページレイアウト」、「HTML/CSS カスタマイズ」を参照しつつ
ページレイアウトをカスタマイズしようとしているのですが、なかなか方法が
わかりません。
■実施したいこと
「ホームページメーカー【フォルダ管理(コラム等)】-カテゴリーあり」を
利用したメニューページの作成
■実現イメージ
開発者ブログ（https://cmonos.jp/blog/）のような画面構成
（2カラムで左側：タイル状インデックス、右側：Recent Entries）
■ご確認
作成したページのインデックスをタイル状に並べるための具体的な手順を
知りたいのですが、下記のような流れで合っているのでしょうか？
①ホームページメーカーでページを作成
②上部のナビゲーションから作成したページのアイコンを選択し、
"CSSファイル編集（共通）〉 default.css" を選択
③"上記以外の設定"に記載されているCSSの中に
〈div class="square grid section"〉を追加
そもそも機能的に実現できるのかもわかっていません。
アドバイス頂けると幸いです。
Re:タイル状のインデックスについて
ご質問ありがとうございます。
手順1と2はあっていますが、3が違っているようです。
インデックスをタイル状に並べるには「インデックスページ」「履歴ページ」の「ページテンプレート」を書き換える必要があります。
例）太字が書き加えた文字列
<!--index-->
<!--subindex-->
<!--title--><!--head--><h1><!--/head--><!--foot--></h1><!--/foot--><!--/title-->
<div class="liquid grid section">また、メインカラムとサイドカラムを「メイン | サイド」の順に並べるには、ページレイアウト設定の「<body> class」に「ordinary」と設定します。
以上参考になりましたら幸いですm(_ _)m。
Re:タイル状のインデックスについて
ご回答どうもありがとうございます。
①ホームページメーカーでページを作成
②上部のナビゲーションから作成したページのアイコンを選択し、
"CSSファイル編集（共通）〉 default.css" を選択
この後に、以下の回答を実施しようと思ったのですが、
設定する項目がありません。
インデックスをタイル状に並べるには「インデックスページ」「履歴ページ」の「ページテンプレート」を書き換える必要があります
「インデックスページ」「履歴ページ」の「ページテンプレート」
を編集する画面自体がないのですが、何か誤っているのでしょうか？
※「メイン | サイド」の順に並べるのは無事に出来ました。
どうもありがとうございました。
Re[2]:タイル状のインデックスについて
ご返信ありがとうございます。
「ホームページメーカー【フォルダ管理(コラム等)】-カテゴリーあり」ということを見落としておりました。
フォルダ管理の場合は「履歴ページ」は生成されません。
また、「カテゴリーあり」の場合、「総合インデックスページ」中にインデックスが存在します。各カテゴリーのインデックスを書き換えるには、「カテゴリー編集」から各カテゴリーの環境設定を開き、それぞれの「ページレイアウト/インデックスページ」にある「ページテンプレート」を書き換える必要があります。
以上参考になりましたら幸いですm(_ _)m。
Re:タイル状のインデックスについて
迅速な回答どうもありがとうございます。
作成したページ自体をタイル状のインデックスにする場合、
以下の手順であっていますでしょうか。
①ナビゲーションから作成したページのアイコンを選択し、
"ページレイアウト 〉総合インデックスページ" を選択
②ページテンプレートを以下のように変更
<!--title--><!--head--><h1><!--/head--><!--foot--></h1><!--/foot--><!--/title-->
<!--index-->
<!--subindex-->
<div class="liquid grid section">
<!--title--><!--head--><h2><!--/head--><!--foot--></h2><!--/foot--><!--/title-->
これで試してみたのですが、タイル状のインデックスには
なりませんでした。
何か手順に誤りがありましたら、ご指摘頂けますでしょうか。
Re:タイル状のインデックスについて
ご回答ありがとうございます。
色々試しているのですが、反映されません。
この場合の記事とは「カテゴリー編集」からカテゴリを追加すればよろしいのでしょうか。
それとも各カテゴリの記事を更新すればよいのでしょうか？
いずれも試しましたが、状況が変わりません。
Re[2]:タイル状のインデックスについて
ご返信ありがとうございます。
各カテゴリの記事を更新すればインデックスも更新されます。ただ、総合インデックスのページテンプレートのみ書き換えられただけですと、各カテゴリーのインデックスはタイル状になりません。すべてのカテゴリーについて、それぞれのインデックスのページテンプレートを書き換える必要があります。
添付スクリーンショットの環境設定から各カテゴリーのページレイアウト設定を変更します。
以上参考になりましたら幸いですm(_ _)m。
Re:タイル状のインデックスについて
丁寧にご解説頂き、どうもありがとうございます。
色々試しているのですが、今回メインページとして考えている
表示にまだ近付けていません。
すいませんが、また相談に乗って頂けますでしょうか。
■実現したいイメージは「01.png」のような感じです。
■しかし、現状は「02.png」のようになっています。
なんとか実現イメージに近付けたいのですが、良い方法は
ありますでしょうか。
カテゴリ名のリンク以下のページは通常通りの表示で構わない
のですが・・
Re:タイル状のインデックスについて
こちらが現在の表示になります。
「02.png」
Re[2]:タイル状のインデックスについて
ご返信ありがとうございます。
残念ながら、現在のサイトテンプレートでは、class 名の指定だけでは、ご希望に沿った表示を実現することができません。
カテゴリーごとのインデックスが横に並ぶよう、独自のスタイルを記述する必要があります。
たとえば、カテゴリーごとに、float: left もしくは display: inline-block とするような形になるのではないかと思います。
もし希望する表示を実現するために、CSS の追加などサポートが必要な場合は、有償のサポートを申し込まれることをご検討ください、
以上よろしくお願いいたしますm(_ _)m。
Re:タイル状のインデックスについて
どうもありがとうございます。
運用上は大した問題にはならないのですが、
表示の選択肢が増えると嬉しいです。
気長に待っております。
Re[3]:タイル状のインデックスについて
本日公開した ver2.0.20131218 にあわせ、本サイトで配布中のサイトテンプレートに、カテゴリーを横に並べて表示する class 名を追加しました。
この表示を利用するには、新しいサイトテンプレートを読み込む必要があります。
デフォルトのサイトテンプレートを利用している場合は、「styleFramy スキン」を読み込み、「サイトテンプレート適用」から読み込んだ「styleFramy スキン」を選択して、「選択したサイトテンプレートをこのディレクトリに適用する」を実行します。
※このとき、default.css などに記述した既存のカスタマイズは消えてしまいます。必ず、事前に FTP ソフトなどで「/lib/css/default.css」をダウンロードし、バックアップとしてください。新しいサイトテンプレートを適用後、再度それまでと同様のカスタマイズを施します。
その後、カテゴリーを横に並べたいインデックスのページテンプレート中にある「<div id="main">」を「<div id="main" class="pillars">」と書き換え「保存」します。
この変更は新しい記事を書き込んだときに反映されます。また、div#content が .single または .double のときのみ有効です。
以上お役に立てましたら幸いですm(_ _)m。
Re:タイル状のインデックスについて
上記の記事を参考に2カラム化を行っているんですけど。。。
メインカラムとサイドカラムを「メイン | サイド」の順に並べるには、ページレイアウト設定の「 class」に「ordinary」を試したのですが、うまく行かないですけど。。。
あと、rssよりも、プロフィール等を上に表示したいのですけど、どこを変更すれば良いでしょうか？
- つのだ
- http://www.iiie-mitsukaru.com/
- Windows 7/Chrome34.0
- 2014年4月15日(火) 16時21分0秒
Re[2]:タイル状のインデックスについて
ご質問ありがとうございます。
使用されている CSS の作成時期が古いので、ordinary 指定には対応していないようです。
新しい CSS を適用するには、「サイトテンプレート読み込み」で「styleStationery スキン」を読み込み、「サイトテンプレート適用」で同スキンを適用する必要があります。
もしくは、styleStationery スキン をダウンロードして、「home/htdocs/lib/css/default.css」ファイルを「~/〈http公開ディレクトリ〉/lib/css」フォルダにアップロードして、既存ファイルと差し替えます（念のため既存ファイルをダウンロードしバックアップとしてください）。
また、3カラムから2カラムに変更するには、ページレイアウトの変更も必要です。
「<div id="sub">...</div>」の中身(...にあたる部分)を「<div id="aside">...</div>」の先頭へ移動させ、残った「<div id="sub"></div>」を削除します。
そのあと「ホーム」を「最新のテンプレートを使用する」を有効にして「保存」します。
以上参考になりましたら幸いですm(_ _)m。
![Re[2]:タイル状のインデックスについて](/cgi/forum/files/forum1/20131203154648/6.Unknown.png){kind=link}
![Re:タイル状のインデックスについて[画像:382x341]](/cgi/forum/files/forum1/20140415162100/6.png){kind=link}