講座2

ボタンを押すと文章が表示するHTMLとCSSを使ってする方法

  • Jo Masafumi
  • Jo Masafumi
学習状況をツイッターでつぶやく

次は、ボタンを押すと文章が表示するHTMLとCSSを使ってする方法をします。

ボタンを押すと文章が表示するHTMLとCSSを使ってする方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「ボタンを押すと文章が表示するHTMLとCSSを使ってする方法」と入力します。

右側の「テキスト」を押します。

テキストのところにコードを貼り付けます。

テキストのところに下記のコードをコピーして、貼り付けます。

<div class="b-bunsho-hyouzi1">
  <label for="label1">続きを見る</label>
  <input type="checkbox" id="label1"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「ボタンを押すと文章が表示するHTMLとCSSを使ってする方法」の
ボタンを押すと文章が表示することを確認します。

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*ボタンを押すと文書が表示する（基本）*/
.b-bunsho-hyouzi1 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*ボタンの装飾*/
.b-bunsho-hyouzi1 label {
  display: inline-block; /*横並び*/
  font-size: 1.2em; /*文字大きさ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #FFF !important; /*文字色*/
  transition: all .3s ease 0s; /*変化時間*/
  cursor :pointer; /*矢印の形*/
}
/*マウスをボタンの上にのせたとき*/
.b-bunsho-hyouzi1 label:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.b-bunsho-hyouzi1 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.b-bunsho-hyouzi1 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*ボタンを押すと文章表示*/
.b-bunsho-hyouzi1 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 10px 20px 10px 0px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
}

HTML

<div class="b-bunsho-hyouzi1">
  <label for="label1">続きを見る</label>
  <input type="checkbox" id="label1"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

「margin: 2em 0;」は、ボタンの外側の余白のCSSコードです。

「padding: 0;」は、ボタンの周りの余白をゼロにするためのCSSコードです。

「font-size: 1.2em;」は、文字の大きさを設定するためのCSSコードです。

「font-weight: bold;」は、文字の太さを設定するためのCSSコードです。

「cursor :pointer;」は、「続きを見る」の文字の上にマウスの矢印をのせたときの矢印の形を指定するためのCSSコードです。

「opacity: 0.7;」は、ボタンの上にマウスの矢印をのせたときの透明度を指定するためのCSSコードです。

「display: none;」は、文章を非表示にするためのCSSコードです。

「height: 0;」は、文章を非表示にするためのCSSコードです。

「overflow: hidden;」は、文章のはみだしを非表示に定するためのCSSコードです。

「opacity: 0;」は、文章を非表示にするためのCSSコードです。

「-ms-transition: 0.8s;」は、ボタンを押したときに文章が表示される時間を指定するためのCSSコードです。

「-ms-transition」の、「-ms-」は、ブラウザーのインターネットエクスプロラーで表示させるためのコードです。

「-webkit-transition: 0.8s;」は、ボタンを押したときに文章が表示される時間を指定するためのCSSコードです。

「webkit-transition」の、「-webkit-」は、ブラウザーのグーグルクロームとサファリで表示させるためのコードです。

「transition: 0.8s;」は、ボタンを押したときに文章が表示される時間を指定するためのCSSコードです。

「margin-top: 2em;」は、文章の上側の余白を指定するためのCSSコードです。

「padding: 10px 20px 10px 0px;」は、文章の周りの余白を指定するためのCSSコードです。

「height: auto;」は、文章の高さを指定するためのCSSコードです。

「opacity: 1;」は、文章を表示するためのCSSコードです。

「input type="checkbox" id="label1"」の、「label1」は、「ボタン」１つずつに違うラベルが必要となります。

注意事項：１つのページにたくさんのラベルIDを使うときは、ラベルのIDを違うIDにしないといけません。
同じラベルIDは、使えません。

ボタンを押すと文書が表示する記入例

ボタンを押すと文書が表示する（基本）

CSS

/*ボタンを押すと文書が表示する（基本）*/
.b-bunsho-hyouzi1 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*ボタンの装飾*/
.b-bunsho-hyouzi1 label {
  display: inline-block; /*横並び*/
  font-size: 1.2em; /*文字大きさ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #FFF !important; /*文字色*/
  transition: all .3s ease 0s; /*変化時間*/
  cursor :pointer; /*矢印の形*/
}
/*マウスをボタンの上にのせたとき*/
.b-bunsho-hyouzi1 label:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.b-bunsho-hyouzi1 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.b-bunsho-hyouzi1 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*ボタンを押すと文章表示*/
.b-bunsho-hyouzi1 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 10px 20px 10px 0px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
}

HTML

<div class="b-bunsho-hyouzi1">
  <label for="label1">続きを見る</label>
  <input type="checkbox" id="label1"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

記事をプレビュー表示したとき


ここに好きな文章を入れます

ボタンを押すと文書が表示する（下線付き）

CSS

/*ボタンを押すと文書が表示する（下線付き）*/
.b-bunsho-hyouzi2 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*ボタンの装飾*/
.b-bunsho-hyouzi2 label {
  display: inline-block; /*横並び*/
  position: relative; /*通常の表示位置が基準*/
  font-size:1.2em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  padding: 0.5em 1em; /*余白*/
  background: red;/*背景色*/
  color: #FFF !important; /*文字色*/
  text-decoration: none !important; /*装飾なし*/
  transition: all 1s ease 0s; /*変化時間*/
  cursor :pointer; /*矢印の形*/
}
/*マウスをボタンの上にのせたとき*/
.b-bunsho-hyouzi2 label:hover {
  opacity: 0.5; /*半透明*/
}
/*ボタンの上側台形部分*/
.b-bunsho-hyouzi2 label:before {
  content: ""; /**/
  position: absolute; /*親要素の左上基準*/
  top: -16px; /*上側位置*/
  left: 0; /*左側位置*/
  width: -webkit-calc(100% - 0px); /*横幅*/
  width: calc(100% - 0px); /*横幅*/
  height: 0; /*高さ*/
  border: solid 8px transparent; /*ボタン上側　太さ*/
  border-bottom-color: #ff6b85; /*ボタン上側　色*/
  transition: all 1s ease 0s; /*変化時間*/
}
/*マウスを台形部分の上にのせたとき*/
.b-bunsho-hyouzi2 label:hover:before {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.b-bunsho-hyouzi2 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.b-bunsho-hyouzi2 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*ボタンを押すと文章表示*/
.b-bunsho-hyouzi2 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 10px 20px 10px 0px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  text-decoration: underline; /*下線*/
}

HTML

<div class="b-bunsho-hyouzi2">
  <label for="label2">続きを見る</label>
  <input type="checkbox" id="label2"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

記事をプレビュー表示したとき


ここに好きな文章を入れます

ボタンを押すと文書が表示する（マーカー付き）

CSS

/*ボタンを押すと文書が表示する（マーカー付き）*/
.b-bunsho-hyouzi3 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*ボタンの装飾*/
.b-bunsho-hyouzi3 label {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  font-size:1.2em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  text-decoration: none !important; /*装飾なし*/
  color: #FFF !important; /*文字色*/
  background: #fd9535;/*背景色*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05) !important; /*影*/
  font-weight: bold; /*文字太さ*/
  border: solid 2px #d27d00;/*線色*/
  transition: all 1s ease 0s; /*変化時間*/
  cursor :pointer; /*矢印の形*/
}
/*マウスをボタンの上にのせたとき*/
.b-bunsho-hyouzi3 label:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.b-bunsho-hyouzi3 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.b-bunsho-hyouzi3 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*ボタンを押すと文章表示*/
.b-bunsho-hyouzi3 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 5px 20px 5px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
  display: inline-block; /*文章のところだけマーカー*/
}

HTML

<div class="b-bunsho-hyouzi3">
  <label for="label3">続きを見る</label>
  <input type="checkbox" id="label3"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

記事をプレビュー表示したとき


ここに好きな文章を入れます

ボタンを押すと文書が表示する（枠線付き）

CSS

/*ボタンを押すと文書が表示する（枠線付き）*/
.b-bunsho-hyouzi4 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*ボタンの装飾*/
.b-bunsho-hyouzi4 label {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  font-size: 1.2em; /*文字大きさ*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #f7f7f7; /*背景色*/
  border-left: solid 6px #ff7c5c;/*左線*/
  color: #ff7c5c !important;/*文字色*/
  font-weight: bold; /*文字太さ*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.b-bunsho-hyouzi4 label:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.b-bunsho-hyouzi4 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.b-bunsho-hyouzi4 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*ボタンを押すと文章表示*/
.b-bunsho-hyouzi4 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
}

HTML

<div class="b-bunsho-hyouzi4">
  <label for="label4">続きを見る</label>
  <input type="checkbox" id="label4"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

記事をプレビュー表示したとき


ここに好きな文章を入れます

ボタンを押すと文書が表示する（枠線と背景）

CSS

/*ボタンを押すと文書が表示する（枠線と背景）*/
.b-bunsho-hyouzi5 {
  margin: 1em 0 -2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*ボタンの装飾*/
.b-bunsho-hyouzi5 label {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  text-decoration: none !important; /*装飾なし*/
  color: blue !important; /*アイコン色*/
  width: 80px; /*横幅*/
  height: 80px; /*縦幅*/
  line-height: 80px; /*行高さ*/
  font-size: 40px; /*アイコンサイズ*/
  border-radius: 50%; /*角丸み*/
  text-align: center; /*中央位置*/
  overflow: hidden; /*非表示*/
  font-weight: bold !important; /*文字太さ*/
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%); /*グラデーション*/
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); /*影*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19); /*影*/
  border-bottom: solid 2px #b5b5b5; /*線色*/
  cursor :pointer; /*矢印の形*/
}
/*アイコン高さ*/
.b-bunsho-hyouzi5 i {
  line-height: 80px; /*行高さ*/
}
/*マウスをボタンの上にのせたとき*/
.b-bunsho-hyouzi5 label:hover {
  opacity: 0.7; /*半透明*/
}
/*文章を見えなくする*/
.b-bunsho-hyouzi5 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.b-bunsho-hyouzi5 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
  display: inline-block; /*文章のところだけ枠線*/
}
/*ボタンを押すと文章表示*/
.b-bunsho-hyouzi5 input:checked ~ .bunsho-miseru {
  margin-top: 1em; /*文章の上側の余白*/
  margin-bottom: 3em; /*文章の下側の余白*/
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
  background: #ebffe1; /*背景色*/
}

HTML

<div class="b-bunsho-hyouzi5">
  <label for="label5"><i class="fa fa-power-off"></i></label>
  <input type="checkbox" id="label5"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

記事をプレビュー表示したとき


ここに好きな文章を入れます
ここに好きな文章を入れます
ここに好きな文章を入れます

ボタンを押すと文書が表示する（枠線と背景と下線）

CSS

/*ボタンを押すと文書が表示する（枠線と背景と下線）*/
.b-bunsho-hyouzi6 {
  margin: 1.5em 0 -1em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*ボタンの装飾*/
.b-bunsho-hyouzi6 label {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  font-size:1.2em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  text-decoration: none !important; /*装飾なし*/
  color: #67c5ff !important; /*文字色*/
  border: solid 2px #67c5ff; /*枠線*/
  border-radius: 3px; /*角丸み*/
  transition: .4s; /*変化時間*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.b-bunsho-hyouzi6 label:hover {
  background: #67c5ff; /*背景色*/
  color: white !important; /*文字色*/
}
/*文章を見えなくする*/
.b-bunsho-hyouzi6 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.b-bunsho-hyouzi6 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
  display: inline-block; /*文章のところだけ枠線*/
}
/*ボタンを押すと文章表示*/
.b-bunsho-hyouzi6 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  margin-bottom: 2em; /*文章の下側の余白*/
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
  background: #fff9e1; /*背景色*/
  text-decoration: underline dashed 1px black; /*下線*/
}

HTML

<div class="b-bunsho-hyouzi6">
  <label for="label6">続きを見る</label>
  <input type="checkbox" id="label6"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

記事をプレビュー表示したとき


ここに好きな文章を入れます
ここに好きな文章を入れます
ここに好きな文章を入れます

ボタンを押すと文書が表示する（枠幅いっぱい表示）

CSS

/*ボタンを押すと文書が表示する（枠幅いっぱい表示）*/
.b-bunsho-hyouzi7 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*ボタンの装飾*/
.b-bunsho-hyouzi7 label {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  font-size:1.2em; /*文字の大きさ*/
  font-weight: bold; /*文字太さ*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*余白*/
  border-left: solid 4px #668ad8; /*左線*/
  border-right: solid 4px #668ad8; /*右線*/
  color: #668ad8 !important; /*文字色*/
  background: #e1f3ff; /*背景色*/
  transition: .4s; /*変化時間*/
  cursor :pointer; /*矢印の形*/
}
/*ボタンを文字の上にのせたとき*/
.b-bunsho-hyouzi7 label:hover {
  background: #668ad8 !important; /*背景色*/
  color: #FFF !important; /*文字色*/
}
/*文章を見えなくする*/
.b-bunsho-hyouzi7 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.b-bunsho-hyouzi7 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
  display: block; /*枠幅いっぱい表示*/
}
/*ボタンを押すと文章表示*/
.b-bunsho-hyouzi7 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: block; /*枠幅いっぱい表示*/
  border: solid 2px black; /*枠線*/
  background: #ffe1e1; /*背景色*/
  text-decoration: underline dashed 1px black; /*下線*/
}

HTML

<div class="b-bunsho-hyouzi7">
  <label for="label7">続きを見る</label>
  <input type="checkbox" id="label7"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

記事をプレビュー表示したとき


ここに好きな文章を入れます
ここに好きな文章を入れます
ここに好きな文章を入れます

ボタンを押すと文書が表示する（指定した幅で表示）

CSS

/*ボタンを押すと文書が表示する（指定した幅で表示）*/
.b-bunsho-hyouzi8 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*ボタンの装飾*/
.b-bunsho-hyouzi8 label {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  font-size:1.2em; /*文字の大きさ*/
  font-weight: bold; /*文字太さ*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #5e7fca; /*下線*/
  cursor :pointer; /*矢印の形*/
}
/*マウスをボタンの上にのせたとき*/
.b-bunsho-hyouzi8 label:hover {
  background-image: linear-gradient(#6795fd 0%, #67ceff 70%); /*グラデーション*/
}
/*文章を見えなくする*/
.b-bunsho-hyouzi8 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.b-bunsho-hyouzi8 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
  width: 80%; /*枠の幅*/
}
/*ボタンを押すと文章表示*/
.b-bunsho-hyouzi8 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  width: 80%; /*枠の幅*/
  border: solid 2px black; /*枠線*/
  background: #e1fbff; /*背景色*/
  text-decoration: underline dashed 1px black; /*下線*/
}

HTML

<div class="b-bunsho-hyouzi8">
  <label for="label8">続きを見る</label>
  <input type="checkbox" id="label8"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

記事をプレビュー表示したとき


ここに好きな文章を入れます
ここに好きな文章を入れます
ここに好きな文章を入れます