解答を掲載しました！

松川幸四郎

5年前

いつも閲覧していただき、ありがとうございます。

この一週間は単語の更新を控え、たくさんの要望がありました、問題文に解答を見ることができるように更新しました！

ただ、一つ一つやるのに時間がかかりまして、お待たせしてしまいましたm(_ _)m

クリックすると下のように解答が出ます。もう一度クリックすると解答が隠れます。

ただ、解答文章はまだ更新しておりません。単語の更新が完了した後に解答文章を更新しますね♪

更新HTML情報

（以下はHTMLなどプログラミングに興味のない人は見なくてもいい記事です。）

今回「クリックすると解答が表示される」設定を行いました。参考までに記載します。

目次：

1.参考にしたサイト

2.CSSの編集やってみました

3.HTMLの編集をやりました！

4.Gutenbergを活用してみました！

5.やっとのことで完成。

1.参考にしたサイト

いくつかのサイトを参考にさせていただきましたが、一番参考になったのはこちら

↓↓↓↓↓↓↓↓↓↓↓↓

このサイトはWordPressを使用していますが、WordPressは私のようなプログラミング初心者にもWEBサイトの運用ができます。

ただ、やはり素人にはわからないこと(専門用語など)がたくさんありますね。WEBで調べても、説明の説明が必要になってきます。

上のイメージはWordPressでサイトを構成するためのイメージです。（適当な画像で本当にごめんなさい。僕の頭の中のイメージです。）

WordPressという台紙の上に、サイトの顔を作る「テーマ」をかぶせてあげます。これだけでサイトは完成です。（私は無料、かつ多くの人が使っているStinger8を使いました。）

ただ、サイトを構成していくと「この機能も使いたいなー」って思ってきます。それを実現するためには1つの方法があります。

　　1.テーマを編集

　　2.プラグインを入れる

1の方法は、テーマ自体のプログラムを書き換える必要があり、とても難しく、下手したらテーマ自体が壊れてしまいます。なので僕みたいな素人は「1.プラグインを入れる」を選択します。プラグインは自動で編集してくれるのでとても便利です。

た・だ・し！

プラグインをたくさん入れると、サイトの処理速度が遅くなり、快適さが失われます。

なのでサイトに慣れてきた人は、「1.テーマを編集」の方法を選択します。今回、そんなに難しくなさそうなので僕もテーマの編集をしてみました！

2.CSSの編集やってみました

さあさあ、先ほどのサイトを参考にやってみました。

読んでみると、HTMLとCSSの編集が必要らしいですね。正直、よくわかりませんでした。そもそもその1つの違いもわかりませんし、「CSS」という単語自体初めて聞きました(汗)

まず、編集画面から「外観」をクリックし、テーマの画面に行きます(①)。自分のテーマのSringer8の「カスタマイズ」ボタンをクリックします(②)。

すると編集画面に行きます。すると、「追加CSS」の項目がありますね。(これを見つけるのに20分かかってしまいました。素人は時間が資本ですね。)

CSSというのは、HTMLの要素を装飾するもの。これ以上の「スタイル」とか「言語」とか言われてもよくわからないです(笑)詳しく知りたい方は下記のサイトを参考にしてください。

さあさあ、この追加CSSに実際に入力してみます！サイトで紹介されたのは以下のCSS…。

————————-

/*全体*/
.hidden_box {
margin: 2em 0;/*前後の余白*/
padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
padding: 15px;
font-weight: bold;
border: solid 2px black;
cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
background: #efefef;
}
/*チェックは見えなくする*/
.hidden_box input {
display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
padding: 10px 0;
height: auto;
opacity: 1;
}