講座2

アイコンを押すと文章が表示するHTMLとCSSを使ってする方法

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

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

アイコンを押すと文章が表示するHTMLとCSSを使ってする方法

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

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

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

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

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

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

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

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

貼り付けました。

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

「OK」を押します。

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

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

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

HTMLとCSSの説明

CSS

/*アイコンを押すと文書が表示する（基本）*/
.i-bunsho-hyouzi1 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.i-bunsho-hyouzi1 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.i-bunsho-hyouzi1 label:hover {
  color: orange; /*文字の色*/
}
/*アイコン表示用*/
.i-bunsho-hyouzi1 label:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f013"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 5px; /*アイコンの右側の余白*/
  color: blue;/*アイコンの色*/
}
/*マウスをアイコンの上にのせたとき*/
.i-bunsho-hyouzi1 label:hover:before {
  color: orange; /*アイコンの色*/
}
/*文章を見えなくする*/
.i-bunsho-hyouzi1 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.i-bunsho-hyouzi1 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.i-bunsho-hyouzi1 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 10px 20px 10px 0px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
}

HTML

<div class="i-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.5em;」は、文字の大きさを設定するためのCSSコードです。

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

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

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

「font-family: "Font Awesome 5 Free";」は、文字のフォントを指定するためのCSSコードです。

「content: "\f013";」は、アイコンの種類を指定するための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は、使えません。

アイコンの変更方法

アイコンの変更方法を教えます。

下記のサイトを開きます。
↓
https://fontawesome.com/v4.7.0/icons/

 

少し下へ移動します。

好きな「アイコン」を押します。

ここの４ケタの「f1b9」をコピーします。

ワードプレスの管理画面を開きます。
左側の「外観」を押します。

左側の「カスタムCSS」を押します。

これをCSSコードの「content」の中に貼り付けます。

一番下の「カスタムCSSの更新」を押します。

左上の「サイトを表示」を押します。

「アイコンの色を変えるHTMLとCSSを使ってする方法」の記事を押します。

アイコンが変更されていることを確認します。

アイコンを押すと文書が表示する記入例

アイコンを押すと文書が表示する（基本）

CSS

/*アイコンを押すと文書が表示する（基本）*/
.i-bunsho-hyouzi1 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.i-bunsho-hyouzi1 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.i-bunsho-hyouzi1 label:hover {
  color: orange; /*文字の色*/
}
/*アイコン表示用*/
.i-bunsho-hyouzi1 label:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f013"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 5px; /*アイコンの右側の余白*/
  color: blue;/*アイコンの色*/
}
/*マウスをアイコンの上にのせたとき*/
.i-bunsho-hyouzi1 label:hover:before {
  color: orange; /*アイコンの色*/
}
/*文章を見えなくする*/
.i-bunsho-hyouzi1 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.i-bunsho-hyouzi1 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.i-bunsho-hyouzi1 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 10px 20px 10px 0px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
}

HTML

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

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


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

アイコンを押すと文書が表示する（下線付き）

CSS

/*アイコンを押すと文書が表示する（下線付き）*/
.i-bunsho-hyouzi2 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.i-bunsho-hyouzi2 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
}
/*マウスを文字の上にのせたとき*/
.i-bunsho-hyouzi2 label:hover {
  color: orange; /*文字の色*/
}
/*アイコン表示用*/
.i-bunsho-hyouzi2 label:after {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f15b"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 5px; /*アイコンの右側の余白*/
  padding-left: 5px; /*アイコンの左側の余白*/
  color: blue;/*アイコンの色*/
}
/*マウスをアイコンの上にのせたとき*/
.i-bunsho-hyouzi2 label:hover:after {
  color: orange; /*アイコンの色*/
}
/*文章を見えなくする*/
.i-bunsho-hyouzi2 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.i-bunsho-hyouzi2 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.i-bunsho-hyouzi2 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  padding: 10px 20px 10px 0px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  text-decoration: underline; /*下線*/
}

HTML

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

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


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

アイコンを押すと文書が表示する（マーカー付き）

CSS

/*アイコンを押すと文書が表示する（マーカー付き）*/
.i-bunsho-hyouzi3 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.i-bunsho-hyouzi3 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
  border: solid 2px black; /*枠線*/
  padding: 15px; /*文字の周り余白*/
}
/*マウスを文字の上にのせたとき*/
.i-bunsho-hyouzi3 label:hover {
  color: orange; /*文字の色*/
}
/*アイコン表示用*/
.i-bunsho-hyouzi3 label:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f00c"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  color: blue;/*アイコンの色*/
}
/*マウスをアイコンの上にのせたとき*/
.i-bunsho-hyouzi3 label:hover:before {
  color: orange; /*アイコンの色*/
}
/*文章を見えなくする*/
.i-bunsho-hyouzi3 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.i-bunsho-hyouzi3 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.i-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="i-bunsho-hyouzi3">
  <label for="label3">続きを見る</label>
  <input type="checkbox" id="label3"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

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


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

アイコンを押すと文書が表示する（枠線付き）

CSS

/*アイコンを押すと文書が表示する（枠線付き）*/
.i-bunsho-hyouzi4 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.i-bunsho-hyouzi4 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
  border: solid 2px black; /*枠線*/
  padding: 15px; /*文字の周り余白*/
  background: yellow; /*背景色*/
}
/*マウスを文字の上にのせたとき*/
.i-bunsho-hyouzi4 label:hover {
  color: orange; /*文字の色*/
}
/*アイコン表示用*/
.i-bunsho-hyouzi4 label:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f2b6"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  color: blue; /*アイコンの色*/
}
/*マウスをアイコンの上にのせたとき*/
.i-bunsho-hyouzi4 label:hover:before {
  color: orange; /*アイコンの色*/
}
/*文章を見えなくする*/
.i-bunsho-hyouzi4 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.i-bunsho-hyouzi4 .bunsho-miseru {
  height: 0; /*高さゼロ*/
  padding: 0; /*余白ゼロ*/
  overflow: hidden; /*はみだし非表示*/
  opacity: 0; /*透明*/
  -ms-transition: 0.8s; /*変化時間*/  
  -webkit-transition: 0.8s; /*変化時間*/
  transition: 0.8s; /*変化時間*/
}
/*文字を押すと文章表示*/
.i-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="i-bunsho-hyouzi4">
  <label for="label4">続きを見る</label>
  <input type="checkbox" id="label4"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます</div>
</div>

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


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

アイコンを押すと文書が表示する（枠線と背景）

CSS

/*アイコンを押すと文書が表示する（枠線と背景）*/
.i-bunsho-hyouzi5 {
  margin: 2em 0 -0.5em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.i-bunsho-hyouzi5 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  cursor :pointer; /*矢印の形*/
  padding: 15px; /*文字の周り余白*/
  border: solid 2px #b6ddff; /*枠線*/
  background-image: linear-gradient(#fff 0%, #00cfff 100%); /*グラデーション*/
}
/*マウスを文字の上にのせたとき*/
.i-bunsho-hyouzi5 label:hover {
  color: orange; /*文字の色*/
}
/*アイコン表示用*/
.i-bunsho-hyouzi5 label:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f0c9"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  color: blue; /*アイコンの色*/
}
/*マウスをアイコンの上にのせたとき*/
.i-bunsho-hyouzi5 label:hover:before {
  color: orange; /*アイコンの色*/
}
/*文章を見えなくする*/
.i-bunsho-hyouzi5 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.i-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; /*文章のところだけ枠線*/
}
/*文字を押すと文章表示*/
.i-bunsho-hyouzi5 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  margin-bottom: 3em; /*文章の下側の余白*/
  padding: 10px 20px 10px 20px; /*文章の余白*/
  height: auto; /*文章の高さ*/
  opacity: 1; /*文章表示*/
  display: inline-block; /*文章のところだけ枠線*/
  border: solid 2px black; /*枠線*/
  background: #ebffe1; /*背景色*/
}

HTML

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

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


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

アイコンを押すと文書が表示する（枠線と背景と下線）

CSS

/*アイコンを押すと文書が表示する（枠線と背景と下線）*/
.i-bunsho-hyouzi6 {
  margin: 2em 0 -0.5em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.i-bunsho-hyouzi6 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  color: white; /*文字色*/
  cursor :pointer; /*矢印の形*/
  padding: 15px; /*文字の周り余白*/
  border: solid 2px #797979; /*枠線*/
  background-image: linear-gradient(#00cfff 0%, #004cff 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
}
/*マウスを文字の上にのせたとき*/
.i-bunsho-hyouzi6 label:hover {
  color: orange; /*文字の色*/
}
/*アイコン表示用*/
.i-bunsho-hyouzi6 label:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f02d"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  color: white; /*アイコンの色*/
}
/*マウスをアイコンの上にのせたとき*/
.i-bunsho-hyouzi6 label:hover:before {
  color: orange; /*アイコンの色*/
}
/*文章を見えなくする*/
.i-bunsho-hyouzi6 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.i-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; /*文章のところだけ枠線*/
}
/*文字を押すと文章表示*/
.i-bunsho-hyouzi6 input:checked ~ .bunsho-miseru {
  margin-top: 2em; /*文章の上側の余白*/
  margin-bottom: 3em; /*文章の下側の余白*/
  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="i-bunsho-hyouzi6">
  <label for="label6">続きを見る</label>
  <input type="checkbox" id="label6"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

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


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

アイコンを押すと文書が表示する（枠幅いっぱい表示）

CSS

/*アイコンを押すと文書が表示する（枠幅いっぱい表示）*/
.i-bunsho-hyouzi7 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.i-bunsho-hyouzi7 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  color: white; /*文字色*/
  cursor :pointer; /*矢印の形*/
  padding: 15px; /*文字の周り余白*/
  border: solid 2px #797979; /*枠線*/
  background-image: linear-gradient(#ffe300 0%, #f00 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
}
/*マウスを文字の上にのせたとき*/
.i-bunsho-hyouzi7 label:hover {
  color: orange; /*文字の色*/
}
/*アイコン表示用*/
.i-bunsho-hyouzi7 label:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f001"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  color: blue; /*アイコンの色*/
}
/*マウスをアイコンの上にのせたとき*/
.i-bunsho-hyouzi7 label:hover:before {
  color: orange; /*アイコンの色*/
}
/*文章を見えなくする*/
.i-bunsho-hyouzi7 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.i-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; /*枠幅いっぱい表示*/
}
/*文字を押すと文章表示*/
.i-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="i-bunsho-hyouzi7">
  <label for="label7">続きを見る</label>
  <input type="checkbox" id="label7"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

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


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

アイコンを押すと文書が表示する（指定した幅で表示）

CSS

/*アイコンを押すと文書が表示する（指定した幅で表示）*/
.i-bunsho-hyouzi8 {
  margin: 2em 0;/*外側の余白*/
  padding: 0; /*内側の余白*/
}
/*文字の装飾*/
.i-bunsho-hyouzi8 label {
  font-size: 1.5em; /*文字の大きさ*/
  font-weight: bold; /*太字*/
  color: white; /*文字色*/
  cursor :pointer; /*矢印の形*/
  padding: 15px; /*文字の周り余白*/
  border: solid 2px #797979; /*枠線*/
  background-image: linear-gradient(#9b9b9b 0%, #000 100%); /*グラデーション*/
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.29); /*影*/
}
/*マウスを文字の上にのせたとき*/
.i-bunsho-hyouzi8 label:hover {
  color: orange; /*文字の色*/
}
/*アイコン表示用*/
.i-bunsho-hyouzi8 label:before {
  font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
  content: "\f118"; /*アイコンの種類*/
  font-weight: bold; /*太字*/
  padding-right: 10px; /*アイコンの右側の余白*/
  color: yellow; /*アイコンの色*/
}
/*マウスをアイコンの上にのせたとき*/
.i-bunsho-hyouzi8 label:hover:before {
  color: orange; /*アイコンの色*/
}
/*文章を見えなくする*/
.i-bunsho-hyouzi8 input {
  display: none; /*文章を非表示*/
}
/*文章を非表示*/
.i-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%; /*枠の幅*/
}
/*文字を押すと文章表示*/
.i-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="i-bunsho-hyouzi8">
  <label for="label8">続きを見る</label>
  <input type="checkbox" id="label8"/>
  <div class="bunsho-miseru">ここに好きな文章を入れます<br>ここに好きな文章を入れます<br>ここに好きな文章を入れます</div>
</div>

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


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