node領域を横に3分割し、異なるブロックを並列で表示させる方法

Events happening in the community are now at Drupal community events on www.drupal.org.
akikuri's picture

drupal初心者です。
drupalで構築されたサイトの具体例(例えばNASA等)を見ると、
コンテンツ領域に、画像や、文章や、入力域が横に平行に並んで
表示されています。

Drupalは左右と中央に表示領域が設定されています。
このうち中央の領域(node)を例えば横に3分割して、それぞれに
別々のブロックを表示させるにはどうすればよいのでしょうか

infoファイルのregion指定 pageテンプレート+キャッシュクリア
などで対応ができるのでしょうか。

それともCSSが絡んでくるのでしょうか

どこから手がかりを掴めば良いのか当惑しております。

Comments

こんばんは、akikuriさん もちろん、regionやテ

jun784's picture

こんばんは、akikuriさん

もちろん、regionやテンプレート、CSSでも実現できますが、
私はpanels モジュールを使用することをおすすめします!
http://drupal.org/project/panels

panelsモジュールは、
infoファイルやテンプレートファイルを変更する必要なく、
新たらしいregionを作成し、コンテンツを自由に配置することができます。

ただPanelsモジュールは便利なのですが、非常に取っ付きにくいので簡単な手順をご説明しますね。

1.panels モジュールのインストールの際に依存関係として Chaos tools モジュールが必要になります。以下をインストールしてください。
http://drupal.org/project/ctools

2.panels には付属モジュールとしてmini panelsとnode panelsが付いてきますが、ちょっと取っ付きにくいので、
page maneger モジュールのみインストールしてください。Viewsをお使いでしたら、view content paneモジュールも役にたちます。

3.パネルページを作成してみます。
管理用タイトル(管理画面での表示名称)と、システム内部名称(データベースに保存されるシステム用ID)を設定してください。
Descriptionは不要です。パス項目に現在コンテンツを作成しようとしているページのパスを記入してください。
すでにパスを指定している場合は、後で変更できるので適当なパスを記入しても大丈夫です。
他の項目は気にせず next へ進んでください。

4.レイアウトを決める画面がでてきますので、3カラムの並びになっているもの、もしくはフレキシブルを選んでください。
フレキシブルは自分で自由にレイアウトを設定することができます。
nextへ。

5.3カラムを選択されていれば、薄い枠線が三つ有るのがわかります。
この枠の左上の、「歯車」がこの範囲の編集ボタンになります。
ここから新規コンテンツの追加を押していただくとDrupalで作成した様々なコンテンツがポップアップで現れます。
お好きなのを選択してみてください。とりあえずは設定は何もしなくて大丈夫です。すると・・・
そうです!この範囲に作成したコンテンツを自由に配置することができるんです!

6.終了、保存していただいて作成したページに行ってみてください。コンテンツが表示されているはずです。

7.コンテンツ領域に、画像や、文章や、入力域を横に平行に並んで表示させる為に、
レイアウトをフレキシブルに選択しなおしてください。フレキシブルでコンテンツを見ると左上にレイアウトマネージャと言うのが表示されています。
これでRegionを自分で自在に編集できます。概念としては カンパス>カラム>リージョンになります。
カンパスは大枠で、コンテンツを含む全ての領域の全景です。
カラムは上下左右に複数作成でき、範囲を区切ることができます。
リージョンはコンテンツの配置領域になります。リージョンが含まれないカラムにはコンテンツを置けないので注意してください。

以上の概念に従って、レイアウトを組んでみてください、
また不明な点があればコメントで宜しくお願いします。

akikuri's picture

jun784さん、迅速な回答ありがとうございます。返信遅れてすいません。

jun784さんのTwitterは以前からfollowさせていただいています。

panels さっそく試してます。

丁寧に解説していただいた上で大変心苦しいのですが、クライアントは極力モジュールの使用を
避ける方向で考えています。

drupalのアップデートに対する対応や、バグ対応の保証がなく、またそのモジュールに依存することに
より、モジュールにない機能が実現できなくなる可能性が将来的に発生するなどの心配から
そのような方針をあげております。

程度の問題もあるのであまり過敏になってもいけないのでしょうが。

ご紹介いただいたモジュールをクライアントにも見せて説明してみようと思いますが、
基本的にブロックのレイアウトは下記のような形で実現ができるのでしょうか。

ブロック→コンテンツの本文にhtml もしくはform関数等で、記述。
テンプレートや、CSSで各ブロックのレイアウトを行う。

申し訳ございませんがご指導願います。
明日は冬至です。

dokumori's picture

Drupalのアップデートに対する対応や、バグ対応の保証がなく

Panelsを開発している merlinofchaos は、Drupalプロジェクトの contrib module authors の中で最大の貢献者の一人です。彼のモジュールの利用者数や、彼の今までの対応、また彼をサポートしているコミュニティメンバーの数や質を見ても、アップデートやバグ対応の保証を心配するのは杞憂だと思います。
ただし、D7 での開発を考えている場合、または早い段階で D7 に移行することを考えている場合は、そのモジュールの D7 版が正式リリースされるのを待つ必要が出るため、不利なことも考えられます。
利用するモジュールを選定する際は、以上のような要素も考慮されることをお勧めします。

上記のような前提であれば、akikuri さんのおっしゃるように

infoファイルのregion指定 pageテンプレート+キャッシュクリアなどで対応

この方法で行うのが一番良いと思います。そのレベルでの対応ができるのであれば、cssを使っての微調整も問題なく出来ると思います。

ただしこの方法を用いても、Drupal自体が変化していくので、メジャーアップグレードに対応する際にはほぼ必ず修正が必要になることは留意したほうが良いでしょう。

ちなみに僕はこういう場合、page テンプレートにリージョンを追加し、Context モジュールを使ってブロックを表示させます。Panels は Drupal の振る舞いをオーバーライドしすぎてしまい、開発の最終段階の細かい調整で苦労した経験が何度かあるので。

コードを一切書きたくない場合には、 Panels はお勧めです。そのほうがアップグレードも楽ですし。

ありがとうございます。

akikuri's picture

dokumori様 ご教授ありがとうございます。
なんとなく胸のつっかえがとれた気分です。

先ず基本的にモジュールを用いない方法を試してみます。
その上でモジュールと比較し、今後の方向性を決めて行きたいと
思います。といってもまだ初心者なのでモジュール無しでの
実装方法もまだままなりませんが・・・

助かりました。ありがとうございます。
またよろしくお願いします。

sakura-mama's picture

<ちなみに僕はこういう場合、page テンプレートにリージョンを追加し、Context モジュールを使ってブロックを表示させます。

とありますが、リージョンの追加の方法をご指導いただけると嬉しいです。

ちなみに、イメージとしてはNASAのHPに近く、4つにブロック分けしたそれぞれにpageの一部の表示エリア、ブログの一部の表示エリア、viewsで作成したブロックなどを表示したいです。
タクソノミーのタームごとのブログ内容をブロック分けして横に並べるというのもやりたく、panelは簡単に出来ましたが、それ以外の方法を探していました。

失礼かと思いましたが、新しく質問のトピを作らなくても類似した内容ですのでこちらでお願いしました。

可能なら、NASAのトップで使われている写真スライドショーのボタン付きのモジュールがあれば教えて欲しいです。これはもし別トピが必要ならそちらにします。

リージョンの追加は: 1.

dokumori's picture

リージョンの追加は:
1. ファイル[themename].info に、リージョンを追加します(ファイル内には既にリージョンの定義があるので、それにならって適宜追加してください)

  1. 各リージョンの吐き出し口を page.tpl.php に追加します。既存のリージョン名をテンプレート内で検索し、どのようなしくみになっているか見てみてください。基本的にはリージョンの変数を記述するだけです。

ページごとにページテンプレートを換えることも可能です。例えば、フロントページ専用のページテンプレートが欲しい場合、テンプレートのファイル名をpage-front.tpl.php にするなど。ベーステーマによっては、色々なテンプレート名の候補を自動的に作ってくれます。例えばZen や Genesis など。テンプレート名の候補を知りたい場合、Devel Themerというモジュールを使うと簡単に見つけることができます。(説明:http://drupal.org/node/209561 )

スライドショーの作成に適しているモジュールには Views Slideshow があります:
http://drupal.org/project/views_slideshow
このページの Related project ブロックも参考にしてください。

トライしましたが・・・・

sakura-mama's picture

dokumori さん、ありがとうございます。

[themename].info は~~~~~~
regions[sidebar_first] = sidebar first
regions[sidebar_last] = sidebar last
regions[header_top] = header top
regions[header] = header
regions[preface_top] = preface top
regions[preface_bottom] = preface bottom
regions[content_top] = content top
regions[content] = content
regions[content_bottom] = content bottom
regions[postscript_top] = postscript top
regions[postscript_bottom] = postscript bottom
regions[footer] = footer
regions[node_top] = node top
regions[node_bottom] = node bottom
~~~~~となっていたので、

page.tpl.php ファイルの~~~~

<?php
if ($content):
?>

<?php
print $content;
?>

<?php
print $feed_icons;
?>

<?php
endif;
?>

                            
<?php
if ($content2):
?>
<div id="content-content" class="content-content">
<?php
print $content2;
?>
<?php
print $feed_icons;
?>
</div><!-- /content-content -->
<?php
endif;
?>

と追加しました。
content2がメインコンテンツとして並べて表示したい領域につけた名前です。
次に、Contextモジュールを使ったのですが、ブロックの中に新しく作ったcontent2が出てこないのです。これは正しく設定されていないという事ですよね?
テーマはfusionを使ってます。
何が悪いかご指導いただけないでしょうか。。。。

スライドショーモジュールありがとうございました。
早速使ってみます。
Slideshow CSで代用してましたが、探していたものが見つかって嬉しいです。

dokumori's picture

言い忘れていましたが、テーマにはレジストリーがあり、テーマ系の変更を施した際にはレジストリーを構築しなおす必要があります。パフォーマンス管理画面 (example.com/admin/settings/performance) にてキャッシュのクリアーをしてください。これでも駄目なようなら教えてください。

ちなみに、Devel モジュールを使うと、example.com/devel/cache/clear というパスにアクセスすることでキャッシュをクリアーできます。Admin menu モジュールを使えば、左端のアイコンから簡単にキャッシュをクリアーするためのリンクにアクセスできます。

Zen などのテーマには、開発モードのようなものがあり、ページのリフレッシュ毎にテーマレジストリーを再構築することが可能です。Fusion にもあるかもしれません。ただ、実際にサイトを一般公開した際にこのモードをオフにし忘れたため、サーバーに負荷が掛かり過ぎてサーバーが落ちたという話を何回か聞いたことがあります。サイトの開発中はキャッシュをクリアする必要に迫られることがよくあるので、テーマが提供する開発モードはオフにし、こまめにキャッシュをクリアすることをお勧めします。

キャッシュのクリア

sakura-mama's picture

数回やってみましたが、やはり結果は同じで駄目です。

キャッシュクリアのやり方もご指導ありがとうございました。
モジュールを使わない方法でクリアしました。

お時間のある時でかまいませんので、ご指導いただけると幸いです。

こんばんは、sakura-mamaさん 結果が駄目だったと

jun784's picture

こんばんは、sakura-mamaさん

結果が駄目だったというのが結構気になったので横から失礼します。

キャッシュをクリアしてレジストリを再構築しても、テーマにリリジョンが反映されない理由は4つ考えれます。

原因の確率が高い AND 修正が大変な Order by Desc
1.変更したpage.tpl.phpとtheme_name.infoが別のテーマの物(メインテーマ、サブテーマ)
2.以上の2点がアップロードできてない
3.ブラウザ側のキャッシュのこっている。
4.パソコンが実はフリーズしていて静止画像が表示されている。

おそらく、1じゃないかなと思います。
fusionをお使いとの事なので、
カスタマイズ用に、fusion_starterをお使いと思います。

fusion_staterをお使いの場合は
fusion_starter.infoとpage.tpl.phpをfusion_coreからfusion_starterへコピーして、
そこにfusion_starter.infoに書いた領域を書く必要があります。

また、誤解を生見やすいと思うのが、テーマをデフォルトにしなくても有効にしているとブロックの編集画面に設定画面がでてきます。
一度現状使っているテーマと、デフォルトのテーマを確認してみたうえで、

1日の時間の中で「ああ、もう一度あのマトリョーシカなテーマ構造をいじってみようか」と思うことがあったらぜひ、ご確認ください。

jun784さん!!!!

sakura-mama's picture

ありがとうございます!!!!
根本的に間違ってました。
<カスタマイズ用に、fusion_starterをお使いと思います。
って事ですがfusion_coreでやっちゃってました。。。。fusion_coreはデフォルトに戻してfusion_starterでご指導いただいた方法を行いました。
確認させていただきたいのですが

fusion_starter.infoとpage.tpl.phpをfusion_coreからfusion_starterへコピーして、
そこにfusion_starter.infoに書いた領域を書く必要があります。

fusion_core.infoをコピー→fusion_starter.infoの中身に追加するregionsを書き込み→fusion_coreの中のpage.tpl.phpをfusion_starterにコピーして、→そこに追加するregionsを書き込む。
って事で間違いはないでしょうか。
そしてキャッシュをクリアしました。

ここまでで、追加したregionsが表示されました!!!!!!!!が、あるべきはずの
ブロックが消えたようです。
•ブロック 最近のブログ投稿 は無効なリージョン sidebar_first に割り当てられ、無効にされました。
って無情なメッセージが届いて、sidebar_first 部分は全く表示されてません。

sidebar_firstのリージョンが見当たらないので追加すればいいってことなのでしょうか。。。。

すいません、誤字蛇足はやはりまずかったですね。 ただ、雪に

jun784's picture

すいません、誤字蛇足はやはりまずかったですね。

ただ、雪に囲まれて心地よい気分で月を見ている方に、
編集の度にメールアラートを飛ばすのも心無いわざかと思っちゃいました。

以下が正しい手順です。

fusion_staterをお使いの場合は
page.tpl.phpをfusion_coreからfusion_starterへコピーして、(fusion_starterフォルダにpage.tpl.phpが無いので)
そこにfusion_starter.infoに書いた領域を書く必要があります。

で、fusion coreで指定したブロック配置はfusion_starterには適応されないので設定し直す必要があります。

で、今までの努力を無に帰す。(ドラクエ3を思い出す、)
無情なエラー文はおそらくpanelモジュールが出していますが
エラー文で指摘がされている通り、fusion_starterのsidebar_firstのリリジョン(領域)が無くなっているので追加してあげるのもいいですが、

fusion_starterを使わないといけないわけではないですので、
今までの努力をやり直さずにfusion_coreで試してみてください

キャッシュのクリア

sakura-mama's picture

キャッシュのクリアは終えてます。
Devel モジュールは使っていませんが、今のところ負荷がかかっている様子はありませんが、もし危ういようならモジュール入れてみます。

前の投稿でコピペした部分がおかしな表示になってました。すいません。

出来ました!!!!!

sakura-mama's picture

jun784 さん、ありがとうございます。
囲まれていた雪が解けたと同時にエラー文も解けました。

それも恐ろしい速さで解けくれたおかげでやりたかったことが一気に進みました。
page.tpl.phpの中身をいじるのは初の体験でしたがdokumoriさんjun784さんがいなかったら今頃積雪に埋もれて姿を消していたことでしょう。
そして現在3つ目のDrupalサイトを作成中ですが、面白さにやっと気づき始めた感じです。おっそ。。。。
本当にこのようなド素人にいつもお付き合いくださって感謝しております。

まだまだ伺いたいことがでてくると思います。これからもどうぞよろしくお願いいたします。

dokumori's picture

解決してよかったですね。このところ色々立て込んでいたため、Fusionをインストールして検証したりする時間がなく、すぐに返答できませんでした。jun784さん、フォローありがとうございました。

ありがとうです。

sakura-mama's picture

dokumori さん、お返事ありがとうございます。嬉しいです。

インストールして検証してくださる予定だったなんて感動してます。
PHPもDrupalも全く初めて使い、そのときからご指導くださって感謝です。

これからも判らないことだらけだと思うのでどうぞご指導よろしくお願いいたします。

では又。

日本 コミュニティ: Drupal Japan User Group

Group organizers

Group categories

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: