記事内リンクを利用して
Q&A を作りたい

ブログ運営について

当ブログでは
よくお越しいただくお客様も
許可を取った上で稀に登場いたします
(仮名:Aさん/Bさん/お客様として)

宜しくお願いいたします


今回は下記の応用編です

下記では
記事内リンクに関して
記事にしておりますので
宜しければご覧ください

記事内リンクを利用して
Q&A を作りたい

Rito
Rito

有難い事に
ご質問を頂きましたので
お答えさせていただきます

今回のご質問内容は
こういう事です

イラストの
センスないよな?

相方
相方
Rito
Rito

悪かったなっ!!

だったら書いてよ

上記のような
単純なものであれば
上記のリンクの応用で可能です

例として

質問
Q1.パンダってなぜ白黒なのですか?
Q2.パンダって着ぐるみですか?
Q3.相方って綺麗ですか?
Rito
Rito

実際に上の
質問をクリックしてみてください

なんちゅう質問だよ

相方
相方

わかりやすいように
スペース開けてます



答え1

A1.生まれつき白黒だから

雑な答えだな

相方
相方

わかりやすいように
スペース開けてます



答え2

A2.はい、着ぐるみです

それはお前だろ

相方
相方

わかりやすいように
スペース開けてます



A3.はい綺麗です

I LOVE ME

相方
相方
Rito
Rito

幸せ者だよ・・・
あなたは・・・

Rito
Rito

上記のような
感じも作れます

方法

クリックする側(質問側)は
下記のようにコードを入れてます

  1.     <a href="#a1">Q1.パンダってなぜ白黒なのですか?</a><br>
  2.     <a href="#a2">Q2.パンダって着ぐるみですか?</a><br>
  3.     <a href="#a3">Q3.相方って綺麗ですか?</a>

答え側は上記の場合
移動させたい各ブロックごとに
下記のコードを入れています

  1. <p id="a1">A1.生まれつき白黒だから</p>
  2. <p id="a1">A2.はい、着ぐるみです</p>
  3. <p id="a1">A3.はい?綺麗です</p>

もし飛ぶ位置を
調整したい場合

テーマや構成によっては
もう少し上で止まってほしい
などがあります

その場合は
コードと文字を別にして
微調整すると良いです

あとはプログラム的に
数値を入れて移動させるかですが
ここでは誰でもできるように
単純なHTMLのみでお伝えします

  1.  <a href="#a1">Q1.パンダってなぜ白黒なのですか?</a><br>
Rito
Rito

上記の答えを少し上で止めたい場合は

  1. <p id="a1"></p>
  2. <br>
  3. A1.生まれつき白黒だから
Rito
Rito

このような感じです

ただし微調整程度に
使った方が良いです

たとえば
極端な例ですが

  1. <p id="a1"></p>
  2. <br>
  3. <br>
  4. <br>
  5. <br>
  6. <br>
  7. A1.生まれつき白黒だから
Rito
Rito

こういう使い方は

お勧めできないです

上記のようにするなら
ブロックエディタであれば
スペーサーなどをうまく使って
調整したほうが良いです



一昔前であれば

  1. <br>

こればかり使って
改行していましたけどね(笑)
(ヤフオクのテンプレとか)

例えばクリック側の
質問はそのままで
答え側にも質問&色付き
表示はできないの?

相方
相方
Rito
Rito

出来ますよ

このような感じ

質問側は変わらず
下記を使います

プログラムの特性上
同じ記事内で同じコードは使えないので
#aの後ろの数字のみ先ほどとは違う
数字を使用してます

  1.     <a href="#a4">Q1.パンダってなぜ白黒なのですか?</a><br>
  2.     <a href="#a5">Q2.パンダって着ぐるみですか?</a><br>
  3.     <a href="#a6">Q3.相方って綺麗ですか?</a>

質問側には下記を使用します

  1.     <p id="a4">Q1.パンダってなぜ白黒なのですか?</p>
  2.     <p style="color: #31a9ee;">A1.生まれつき白黒だから</p>
  3.     <p id="a5">Q2.パンダって着ぐるみですか?</p>
  4.     <p style="color: #31a9ee;">A2.はい、着ぐるみです</p>
  5.     <p id="a6">Q3.相方って綺麗ですか?</p>
  6.     <p style="color: #31a9ee;">A3.はい?綺麗です</p>

カラーコードを変えれば
お好きな色に出来ます

実際にやってみる

Q1.パンダってなぜ白黒なのですか?
Q2.パンダって着ぐるみですか?
Q3.相方って綺麗ですか?

Q1.パンダってなぜ白黒なのですか?

A1.生まれつき白黒だから


Q2.パンダって着ぐるみですか?

A2.はい、着ぐるみです


Q3.相方って綺麗ですか?

A3.はい?綺麗です

Rito
Rito

このように作れます。
ブログに限らず
サイトでも利用できます

ほうほう・・・
とりあえず
私は綺麗だ
と言う事が
よくわかったわ♪

相方
相方
Rito
Rito

お、おう・・・

おわりに

Q&Aや詳細を記載場所へ飛ばす
など様々な事で利用できます

アイディア次第で
色々使えそうです♪

Rito
Rito

是非お試しくださいませ