現在私はポートフォリオサイトの作成中で、Readmore.jsをつかってバナーと説明文をよくブログで見られる「続きから読む」のようにボタンで表示、非表示をしたいと思っていますが、自分で試した所自分のやり方が悪いのかうまく表示できませんでした。
URL. http://jedfoster.com/Readmore.js/
こちらからダウンロードしました。
read moreとcloseの表示はありますが、画像が隠れずに表示されてしまうので今困っています。
すごくざっくりで申し訳ないのですが、レイアウトは上記の画像のようになっています。
左の長方形がバナー画像で右が説明分です。
真ん中のread morは多分floatの関係で真ん中にあるだけだと思います。
高さの位置的には問題無いかもしれませんが画像が隠れていなかったりと問題があるのでよろしくお願いいたします。
仮にこのReadmore.jsでは無理だということでしたら、大変申し訳ありませんが、かわりに何か同様の事が出来るプラグインを教えていただけませんでしょうか?
よろしくお願いいたします。
<h2>WORK</h2> <article class="work"> <div class="work_box cf"> <div class="work_left"> <img src="./css/images/bnr_01.jpg" alt="テスト"> </div> <div class="work_right"> <h3>テスト(1)</h3> <p>テスト</p> </div> </div> <div class="work_box cf"> <div class="work_left"> <img src="./css/images/bnr_02.jpg" alt="テスト"> </div> <div class="work_right"> <h3>テスト</h3> <p>テスト</p> </div> </div> <div class="work_box cf"> <div class="work_left"> <img src="./css/images/bnr_03.jpg" alt="テスト"> </div> <div class="work_right"> <h3>テスト</h3> <p>テスト</p> </div> </div> <!-- .work_box --> </article> <!-- #work --> </div> <!-- #work_wrapper --> HTML
#work_wrapper{ width: 950px; margin: 0 auto; padding-bottom: 50px; } #work_wrapper h2{ font-size: 60px; text-align: center; padding: 90px 0; } #work_wrapper a{ } .work_box{ width: 950px; padding-bottom: 60px; } .work_left{ float: left; } .work_right{ float: right; } .work_right h3{ padding-bottom: 20px; } css