画像をクリックしてページ遷移する方法は?
partita > 画像をクリックしてページ遷移する方法は? @ 2012/6/9 1:07 |
---|
最近baserCMSを始めました。
ブログトップページやカテゴリーリンクをクリックしたときの記事一覧画面について質問です。 個別記事の本文内に画像が配置されているとき、上記の一覧画面でも画像が表示されます。 この画像をクリックすると別ウィンドウ(?)で同じ画像が表示されます。 現在私が作成中のサイトでは、記事内の画像は画像プロパティでwidthを120に設定して強制的に縮小させ、クリックしたときに原寸拡大表示(width=600程度の画像)させるようにしています。 これを、 「一覧画面で画像をクリックすると記事にページ遷移する」 「個別記事のページで画像をクリックすると原寸拡大表示させる」 ようにしたいのですが、このようなことは可能でしょうか。 可能な場合、どのようにすればよろしいでしょうか。 よろしくお願いします。 ■ BaserCMSのバージョン:2.0.0 ■ レンタルサーバー名:ロリポップ ■ スマートURLの利用: ON ■ 設置フォルダ: サブフォルダ →www.xxx.com/basercms/ ■ 利用しているデータベース: SQLite3 ■ PHPスキル(自己評価): E |
goichi > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/9 21:46 |
---|
こんにちは(^^
引用: これを、 つまり、一覧ページでは画像クリックで記事ページに飛ぶけれども、飛んだ先の記事ページで画像をクリックすると、通常通り拡大画像が表示されるという事ですよね。 一覧ページも記事ページも、データ(管理画面で打ち込まれたブログ記事の内容)としては同じものを引っ張ってきているので、一覧ページでの表示の際に細工をしないと難しそうですね。 こうなってくると、技術や知識もさることながら、アイディア勝負といった感じがするので、他の方がもっと良いアイディアを出してくれるかも知れませんが、そもそも一覧ページで画像が拡大表示されるのは、aタグのhrefプロパティで画像のURLを指定し、relプロパティでポップアップウィンドウ(colorbox)を使う為の指定がしてあるからですよね。もし、画像をクリックして記事ページに飛んで欲しいということであれば、このrelプロパティを持っているリンクタグのhrefプロパティを、記事のURLに書き換えればOKですよね。 書き換えるファイルは一覧表示用のレイアウトファイルになります。本来であれば「/app/webroot/themed/demo/view/blog/default/index.php」をいじりますが、デモテーマを利用されている場合、インストール直後はこの場所に入っていないと思います。以下の手順を踏めば、自動的に上記場所にコピーされ編集できるようになりますので、順番に実施してみてください。 1.管理画面にログインする。 2.画面右上のメニューの「プラグイン管理」をクリック。 3.プラグインの一覧表から「blog」(一番上かな?)を探し、一覧表の左側にある操作アイコンの「管理」をクリック。 4.ブログの一覧が出てくるので、処理を施したいブログを選び、先程と同様、操作アイコンの「管理」をクリック。 5.画面の一番上の方に色々とメニューがあるので、「ブログ管理メニュー」の中から「ブログ基本設定」をクリック。 6.今度は画面の一番下に「オプション」というのがあるので、クリックする。すると、項目がズラっと出てくる。 7.出てきた項目の中の下の方に「コンテンツテンプレート名」という部分がある。「default」になっていると思うので、その横の「編集する」をクリック。(設定を保存して編集画面へ飛んでもいいか?と聞かれるので、OKする。) 8.自動的にレイアウトファイルが生成され、編集できるようになるので、以下の通り編集を加える。 出てきたレイアウト編集画面に、PHPファイルの中身が表示されていると思います。(で、念のためこの内容を全部、メモ帳か何かにコピーして、あとで不具合が起きたら復旧できるようにしておてください。) で、編集画面を見て、この中から
という部分を探して下さい。(50行目付近かな) そこを以下のように書き換えます。
あなたのサイトのURLを記述する場所がありますので、書いておいて下さい。今回、スマートURLを利用しているという事ですが、もし何かの事情でOFFにする場合は、このURLの箇所の最後に「index.php/」というスラッシュまで付けたindex.phpという文字を足して下さい。 書き換えが終わったら、更新ボタンを押して下さい。これで作業は終わりです。いかがでしょうか? |
goichi > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/9 21:49 |
---|
追記です。。。
一応、ウチのローカルで動いたので、このファイルの編集後の全文を載せておきます。
参考にしてください(^^ |
partita > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 0:58 |
---|
引用:
|
goichi > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 11:10 |
---|
どうもです(^^
まずは修正させてください(すみません・・・) とりあえず、リンクが複数あると先の記述では対応できませんでした。すみません。「preg_match_all」を使わなきゃいけなかったんですね。ウチのローカルでは画像リンクだけしか作らなかったので、気が付きませんでした。。。 書き換えの箇所を
のようにしてみてください。これで、とりあえず複数のリンクがあっても対応できるのではないかと思います。 ただ、idがずれるというのとは別の問題かもしれません。
記事NOはブログごとに振り分ける番号ですが、idはブログの別に関わらず、トータルで振られる番号です。いま、2つ目のブログの記事NOが1番で、url末尾のidが17というのは、おそらく「2つめのブログの記事としては1番目、全体では17番目の記事」という事になると思います。 処理中で使っている
の中には記事idが入るはずですが、何かしらの事情で、上手に動かなかったのかもしれません。私のローカル環境は、同じく「2.0.0」で試していますが、複数ブログの時でも、きちんとidが入っています。 何はともあれ、上記の処理を修正してみてください。もしかしたら、そのうちもっと詳しい方が出てきてくださるかも知れません。。。m(__)m |
partita > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 13:50 |
---|
お世話になります。
2回目のご回答コードでもうまくいかなかったので、じーっとコードを見て思いつきました。
のところ、
とすると成功! idというパラメータがあるならnoもあるだろう、と書き換えてみたら結果オーライ。 今回はあくまで「ひとつの」ブログ内での連番を取得するべきたっだ、ということでしょうか。 とにもかくにも、正規表現やpreg_match等、いろいろ勉強するきっかけができたのでよかったです。 |
goichi > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 16:41 |
---|
おめでとうございます!
何とかなってよかったです!(^^ |
partita > Re: 画像をクリックしてページ遷移する方法は? @ 2012/6/10 20:01 |
---|
ありがとうございました。
|