Q&Aを簡単に作れるボックスデザイン／CSSではてなブログカスタマイズ

カスタマイズ

f:id:ryo_009:20181120233600p:plain

 

ブログでQ&Aを作るときってどうやってますか？

QとAでフォントの色を変えたり、太さを変えたり、見やすくしようと思うと地味にめんどくさかったりします。

 

ということで、今回はQ＆Aを簡単に作れるボックスデザインのご紹介です。 

 

 

 

ボックスデザインとCSSコード

質問部分と回答部分が、パッと見てわかるデザインになっています。

f:id:ryo_009:20181120230346p:plain

構造は単純でQがボックスのタイトル部分、Aがテキスト部分となっているので通常のボックスを使うのと同じ感覚で使うことができます。

 

回答部分については文章はもちろん、リストも使えますし、こんな感じで文章とリストの併用も可能です。 

f:id:ryo_009:20181120230211p:plain
.boxQA {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 0.5em;
    background: #EDF1F5;/*A文章部分背景色*/
    border-radius: 10px;
}

.boxQA .box-title {
    position: relative;
    background: #fff;/*Q文章部分背景色*/
    padding: 10px 5px 10px 40px;
    color: #454545;/*Q文章文字色*/
    border-radius: 10px;
}
.boxQA .box-title:before {
    content: "Q";
    display: inline-block;
    line-height: 40px;
    position: absolute;
    padding: 0em;
    color: white;/*Q文字色*/
    background: #9ED1FF;/*Q背景色*/
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    left: -1.2em;
    top: 20px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.boxQA .box-title:after {
    content: "A";
    display: inline-block;
    line-height: 40px;
    position: absolute;
    padding: 0em;
    color: white;/*A文字色*/
    background: #FFAB8B;/*A背景色*/
    font-weight: bold;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    left: -1.2em;
    bottom: -80px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}

.boxQA p {
    padding: 20px 20px 15px 40px;
    margin: 0;
}

.boxQA ul {
  padding: 0 1em;
  position: relative;
}
.boxQA ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 4.2em;
  list-style-type: none!important;
}
.boxQA ul li:before {
  font-family: "FontAwesome";
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 3.5em;
  color: #FFAB8B; /*Aのリストのアイコンの色*/
}

※他のボックスと併用する場合は、名前がかぶらないように注意してください。

 

古いタイプのFontAwesomeを使っているので、新しいFontAwesomeを使っている場合は「font-family: "Font Awesome 5 Free";」等、変更して使ってください。

 

FontAwesomeの導入方法についてはこちらが参考になります。

saruwakakun.com

 

 

 

回答が文章のみの場合

回答が文章のみの場合は、記事の作成時に以下のhtmlコードを貼り付けて使います。

<div class="boxQA">
<div class="box-title">ここに質問を入力します。</div>
<p>ここに回答を入力します。</p>
</div>

※他のボックスと併用する場合は、名前がかぶらないように注意してください。

CSSで名前を変えた場合は、こっちの<div class="boxQA">の部分も変更が必要です。

 

回答がリストのみの場合

回答がリストのみの場合は、以下のhtmlコードを貼り付けて使います。

<div class="boxQA">
<div class="box-title">ここに質問を入力します。</div>
<ul>
<li>回答１</li>
<li>回答２</li>
</ul>
</div>

※他のボックスと併用する場合は、名前がかぶらないように注意してください。

 

回答に文章とリストを併用する場合 

参考までに...回答に文章とリストを併用する場合は次のような記述になります。

<div class="boxQA">
<div class="box-title">「スキナコトワークス」はどんなブログですか？<br />簡単に教えてください。</div>
<p>「スキナコトワークス」はりょうが好きなことを好きに書いている雑記ブログです。<br />主に次のような内容を取り扱っています。</p>
<ul>
<li>ブログのカスタマイズ</li>
<li>資産運用</li>
<li>育児</li>
</ul>
<p>この他にもその時々で好きなことを記事にしています！</p>
</div>

 

このhtmlコードを貼り付けるとこうなります。

f:id:ryo_009:20181120230211p:plain

 

ボックス内で改行する場合は</br>を使うと、行が離れすぎず読みやすいです。

 

以上です！

ボックス以外のカスタマイズ方法についてはこちらをどうぞ。

www.crypto-ksw.com

 

はてなブログのブログテーマ「Minimalism」を使っていなくても使えるCSSもまとめているのでぜひにー。

 

合わせてどうぞ