質問編集履歴

2

mirin300

mirin300 score 13

2017/03/02 03:48  投稿

Readmore.jsで画像を続きから読む
現在私はポートフォリオサイトの作成中で、Readmore.jsをつかってバナーと説明文をよくブログで見られる「続きから読む」のようにボタンで表示、非表示をしたいと思っていますが、自分で試した所自分のやり方が悪いのかうまく表示できませんでした。
 
URL. http://jedfoster.com/Readmore.js/  
こちらからダウンロードしました。  
read moreとcloseの表示はありますが、画像が隠れずに表示されてしまうので今困っています。
![イメージ説明](28650aeaee0697049a316d62ff634fe0.png)
すごくざっくりで申し訳ないのですが、レイアウトは上記の画像のようになっています。
左の長方形がバナー画像で右が説明分です。
真ん中のread morは多分floatの関係で真ん中にあるだけだと思います。
高さの位置的には問題無いかもしれませんが画像が隠れていなかったりと問題があるのでよろしくお願いいたします。
仮にこのReadmore.jsでは無理だということでしたら、大変申し訳ありませんが、かわりに何か同様の事が出来るプラグインを教えていただけませんでしょうか?
よろしくお願いいたします。
```       <div id="work_wrapper" class="cf">
               <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
```
  • HTML

    17044 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    11705 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    10812 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 コードを追加いたしました。

mirin300

mirin300 score 13

2017/03/01 20:59  投稿

Readmore.jsで画像を続きから読む
現在私はポートフォリオサイトの作成中で、Readmore.jsをつかってバナーと説明文をよくブログで見られる「続きから読む」のようにボタンで表示、非表示をしたいと思っていますが、自分で試した所自分のやり方が悪いのかうまく表示できませんでした。
read moreとcloseの表示はありますが、画像が隠れずに表示されてしまうので今困っています。
![イメージ説明](28650aeaee0697049a316d62ff634fe0.png)
すごくざっくりで申し訳ないのですが、レイアウトは上記の画像のようになっています。
左の長方形がバナー画像で右が説明分です。
真ん中のread morは多分floatの関係で真ん中にあるだけだと思います。
高さの位置的には問題無いかもしれませんが画像が隠れていなかったりと問題があるのでよろしくお願いいたします。
仮にこのReadmore.jsでは無理だということでしたら、大変申し訳ありませんが、かわりに何か同様の事が出来るプラグインを教えていただけませんでしょうか?
よろしくお願いいたします。
よろしくお願いいたします。
```       <div id="work_wrapper" class="cf">
               <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
```
  • HTML

    17044 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    11705 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    10812 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る