Godin > BCCOLORS（実績一覧）ページで、画像が２段積みになってしまう件です（初心者） @ 2015/4/8 10:45
今回初めて、BaserCMSを使わせて頂き、フォーラムにも質問させて頂きます。宜しくお願い致します。勉強させて頂きますにつき、BCCOLORS（バージョン 3.1.1）を導入し、（初期データ読込)もさせて頂きますと、実績一覧（works)ページも用意して頂いておりますので、この雛形を試させて頂いてるのですが、私の方では何度やり直してみましても、この実績一覧（works)ページでの画像が、２段積みになってしまいます。仮アップしたものが、下記になります。 http://gratitude.ever.jp/basercms_sample/index.php/works/index 一方、BCCOLORSのご提供者様でございます（小桃デザイン様ＷＥＢサイト）の方では、画像が２段積みに、なってございません。 http://komomo.biz/works/index そこでこの、実績一覧（works)ページで、画像が２段積みになってしまう件につきまして、自分なりには、 /basercms/app/webroot/theme/bccolors/Blog/works の、 archives.php、　index.php、　posts.php、　single.php 　あたりが糸口かなとも考えまして、・小桃デザイン様のＷＥＢサイトのソースとも比較してみる・フォーラムも検索し、いろいろググってみる　等の事は、行ってもみたのですが、その他いろいろ行ってみましても、なかなか解決のヒントがつかめない状態にありますので、完全に詰まってしまい質問させて頂きました。ＨＴＭＬ、ＣＳＳは最低限わかりますが、ＰＨＰ等は全く無知なものでございますので、お忙しい中恐縮ではございますが、解決方法についてまたご教示頂けましたら幸いでございます。宜しくお願い致します。 ■BaserCMSバージョン：4.10 ■レンタルサーバー名：ミニバード ■スマートURLの利用：OFF ■利用しているデータベース：SQLite ■ドキュメントルート：変更済み ■ＰＨＰのスキル：[ E ]

Godin > BCCOLORS（実績一覧）ページで、画像が２段積みになってしまう件です（初心者） @ 2015/4/8 10:45

今回初めて、BaserCMSを使わせて頂き、フォーラムにも質問させて頂きます。
宜しくお願い致します。

勉強させて頂きますにつき、BCCOLORS（バージョン 3.1.1）を導入し、（初期データ読込)もさせて頂きますと、

実績一覧（works)ページも用意して頂いておりますので、この雛形を試させて頂いてるのですが、

私の方では何度やり直してみましても、この実績一覧（works)ページでの画像が、２段積みになってしまいます。

仮アップしたものが、下記になります。
http://gratitude.ever.jp/basercms_sample/index.php/works/index

一方、BCCOLORSのご提供者様でございます（小桃デザイン様ＷＥＢサイト）の方では、画像が２段積みに、なってございません。
http://komomo.biz/works/index

そこでこの、実績一覧（works)ページで、画像が２段積みになってしまう件につきまして、

自分なりには、
/basercms/app/webroot/theme/bccolors/Blog/works の、

archives.php、　index.php、　posts.php、　single.php 　あたりが糸口かなとも考えまして、

・小桃デザイン様のＷＥＢサイトのソースとも比較してみる
・フォーラムも検索し、いろいろググってみる
　等の事は、行ってもみたのですが、

その他いろいろ行ってみましても、なかなか解決のヒントがつかめない状態にありますので、完全に詰まってしまい質問させて頂きました。

ＨＴＭＬ、ＣＳＳは最低限わかりますが、ＰＨＰ等は全く無知なものでございますので、お忙しい中恐縮ではございますが、解決方法についてまたご教示頂けましたら幸いでございます。

宜しくお願い致します。

■BaserCMSバージョン：4.10
■レンタルサーバー名：ミニバード
■スマートURLの利用：OFF
■利用しているデータベース：SQLite
■ドキュメントルート：変更済み
■ＰＨＰのスキル：[ E ]

n1215 > Re: BCCOLORS（実績一覧）ページで、画像が２段積みになってしまう件です（初心者） @ 2015/4/9 0:26
Godin 様 http://komomo.biz/works/index こちらのページのソースを見ると画像のimgタグ自体は２つ分出力されており、２つ目の画像がCSSのdisplay:noneで非表示になっていることがわかりました。（何故このような仕様になっているかまではちょっとわかりませんが……）テーマ適用時に表示が異なるのは、HTMLが若干違うためにCSSでが上手く適用されないせいのようです。最新版でテーマを適用した状態では、２つ目の画像のimgタグがaタグで囲まれてしまっています。この部分を修正する必要がありますね `<a href="/works/archives/1"> <img src="/theme/bccolors/files/blog/works/blog_posts/2014/02/00000001_eye_catch.png?1465123803" class="img-eye-catch" alt="" /> <!-- ↓このaタグが余計--> <a href="/theme/bccolors/files/blog/works/blog_posts/2014/02/00000001_eye_catch.png?361569154" class="img-eye-catch" rel="colorbox"> <img src="/theme/bccolors/files/blog/works/blog_posts/2014/02/00000001_eye_catch.png?1685421319" alt="" /> </a> </a>` app/webroot/theme/bccolors/Blog/works/index.phpが実績一覧のページ（ http://example.com/works/index ）を表示するコンテンツテンプレートとなっています。該当箇所は33行目あたりです。 `<a href="<?php echo $uri ?>"> <?php $this->Blog->eyeCatch($post, array('link'=>false)) ?> <?php $this->Blog->eyeCatch($post, array('noimage'=>'/theme/bccolors/img/blog/works/noimage.png')) ?> </a>` ２つ目の画像をリンクで囲まれないようにするということで `<a href="<?php echo $uri ?>"> <?php $this->Blog->eyeCatch($post, array('link'=>false)) ?> <?php $this->Blog->eyeCatch($post, array('link'=> false, 'noimage'=>'/theme/bccolors/img/blog/works/noimage.png')) ?> </a>` で良いと思いますがいかがでしょう？ Twitter:　@n_1215

n1215 > Re: BCCOLORS（実績一覧）ページで、画像が２段積みになってしまう件です（初心者） @ 2015/4/9 0:26

Godin 様

http://komomo.biz/works/index
こちらのページのソースを見ると画像のimgタグ自体は２つ分出力されており、
２つ目の画像がCSSのdisplay:noneで非表示になっていることがわかりました。
（何故このような仕様になっているかまではちょっとわかりませんが……）

テーマ適用時に表示が異なるのは、HTMLが若干違うためにCSSでが上手く適用されないせいのようです。
最新版でテーマを適用した状態では、２つ目の画像のimgタグがaタグで囲まれてしまっています。
この部分を修正する必要がありますね


<a href="/works/archives/1">
<img src="/theme/bccolors/files/blog/works/blog_posts/2014/02/00000001_eye_catch.png?1465123803" class="img-eye-catch" alt="" />
<!-- ↓このaタグが余計-->
<a href="/theme/bccolors/files/blog/works/blog_posts/2014/02/00000001_eye_catch.png?361569154" class="img-eye-catch" rel="colorbox">
<img src="/theme/bccolors/files/blog/works/blog_posts/2014/02/00000001_eye_catch.png?1685421319" alt="" />
</a>
</a>

app/webroot/theme/bccolors/Blog/works/index.phpが実績一覧のページ（ http://example.com/works/index ）を表示するコンテンツテンプレートとなっています。
該当箇所は33行目あたりです。


				<a href="<?php echo $uri ?>">
						<?php $this->Blog->eyeCatch($post, array('link'=>false)) ?>
						<?php $this->Blog->eyeCatch($post, array('noimage'=>'/theme/bccolors/img/blog/works/noimage.png')) ?>
				</a>

２つ目の画像をリンクで囲まれないようにするということで


				<a href="<?php echo $uri ?>">
						<?php $this->Blog->eyeCatch($post, array('link'=>false)) ?>
						<?php $this->Blog->eyeCatch($post, array('link'=> false, 'noimage'=>'/theme/bccolors/img/blog/works/noimage.png')) ?>
				</a>

で良いと思いますがいかがでしょう？

Twitter:　@n_1215

Godin > Re: BCCOLORS（実績一覧）ページで、画像が２段積みになってしまう件です（初心者） @ 2015/4/9 11:51
n1215様　はじめましてお忙しい中、早々にアドバイス頂きまして誠に有難うございました。試させて頂きましたら、バッチリ解決でございます。仮アップした下記の分も、キチンと表示してくれました http://gratitude.ever.jp/basercms_sample/index.php/works/index まず最初に、ご指摘頂きました index.php の方で行ってみましたら、（実績一覧）ページの方では、２段積み表示も解消してくれましたが、そこから個別の（実績ページ）を表示してみましたら、こちらは２段積み表示のままでしたので、それで、single.php　の方も、それらしきところを同様に変えてみましたら、キチンと表示してくれました誠に有難うございました自分なりにも、ＨＴＭＬソースの段階では、２重に重なっていたのはわかっていたのですが、そこから、どこをどう改善したら良いのかがまったくつかめませんでした。 Baserタグ、PHP関連の無知さを痛感致しましたが、今回の事を機会にまた勉強していきたいと思います。いろいろ有難うございました。今後共に宜しくお願い致します。 ■BaserCMSバージョン：4.10 ■レンタルサーバー名：ミニバード ■スマートURLの利用：OFF ■利用しているデータベース：SQLite ■ドキュメントルート：変更済み ■ＰＨＰのスキル：[ E ]

Godin > Re: BCCOLORS（実績一覧）ページで、画像が２段積みになってしまう件です（初心者） @ 2015/4/9 11:51

n1215様　はじめまして
お忙しい中、早々にアドバイス頂きまして誠に有難うございました。

試させて頂きましたら、バッチリ解決でございます。

仮アップした下記の分も、キチンと表示してくれました
http://gratitude.ever.jp/basercms_sample/index.php/works/index

まず最初に、ご指摘頂きました index.php の方で行ってみましたら、
（実績一覧）ページの方では、２段積み表示も解消してくれましたが、

そこから個別の（実績ページ）を表示してみましたら、こちらは２段積み表示のままでしたので、
それで、single.php　の方も、それらしきところを同様に変えてみましたら、キチンと表示してくれました

誠に有難うございました

自分なりにも、ＨＴＭＬソースの段階では、２重に重なっていたのはわかっていたのですが、
そこから、どこをどう改善したら良いのかがまったくつかめませんでした。

Baserタグ、PHP関連の無知さを痛感致しましたが、今回の事を機会にまた勉強していきたいと思います。
いろいろ有難うございました。今後共に宜しくお願い致します。

スレッド表示 | 新しいものから

前のトピック | 次のトピック | トップ

BCCOLORS（実績一覧）ページで、画像が２段積みになってしまう件です（初心者）

キーワード検索