困った時に知りたい時のあれやそれ。Q＆Aページを作りました。

f:id:dreamark:20160614175710j:plain
はてなブログのテーマ「CONTENTS」用のQ&Aを作りました。実際にお問い合わせいただいた内容から、私自身が気になった部分などを対話形式で紹介していきます。
困った時や知りたい事などありましたら一度確認してみて下さい。これから先もQ＆Aは増やしていく予定です。他にも、分からない事がありましたら、お問い合わせやコメントから聞いて下さい。

蛍光マーカーを消したい
画像周りのボーダーを消したい
インストールしたのにレスポンシブにならない
パンくずリストを入れるた時にタイトル上のカテゴリーがくずれる
色を変えて使いたいな
対話形式で登場人物が三人以上いる場合
レスポンシブデザインでレクタングルのレスポンシブ広告を使いたい
はてなブログのスマホ表示でパーツが表示させたい

蛍光マーカーを消したい

ユーザー様
太字についている蛍光マーカーを消す事はできますか？

DREAMARK JOE
はい、できます。下のCSSコードをデザインCSSに貼り付ける事で蛍光マーカーを消して標準の太文字に戻せます。

strong {
  background: linear-gradient(transparent 100%, #FF847C 100%);
  background: -moz-linear-gradient(transparent 100%, #FF847C 100%); 
  background: -webkit-linear-gradient(transparent 100%, #FF847C 100%);
  background: -ms-linear-gradient(transparent 100%, #FF847C 100%); 
  background: -o-linear-gradient(transparent 100%, #FF847C 100%); 
  font-weight: bold;
}

画像周りのボーダーを消したい

ユーザー様
画像の周りに出ているグレーのボーダー（線）を消せますか？

DREAMARK JOE
はい、できます。下のCSSコードをデザインCSSに貼り付ける事で画像周りのボーダーを消せます。

.entry-content img.hatena-fotolife {
  border: 0px;
}

インストールしたのにレスポンシブにならない

ユーザー様
CONTENTSをインストールしたのにレスポンシブデザインにならないのはどうしてですか？

DREAMARK JOE
レスポンシブデザインを適用するのは手動でチェックをいれていただく必要があります。
ダッシュボード→デザイン→スマートフォンタブ→詳細設定→レスポンシブデザインにチェックを入れてください。
レスポンシブデザインを使わない時にはチェックを外してください。

パンくずリストを入れるた時にタイトル上のカテゴリーがくずれる

ユーザー様
パンくずリストをいれたら、カテゴリーと記事タイトルのボーダーが被ってしまいました…

DREAMARK JOE
一つのカテゴリーなら大丈夫なのですが、複数のカテゴリーを選択している時に、表示がくずれてしまいます。
下記CSSコードをデザインCSSにいれると、カテゴリーの表示はタイトル上からタイトル下に変更されます。
また、複数のカテゴリの先頭にアイコンが表示されるようになります。

.entry-header .categories{
margin-bottom:24px;
position:static;
} 
.entry-header .categories:before {
font-family: "";
content: "";
} 

.entry-header .categories span:before {
position: relative;
top:1px;
font-family: "blogicon";
content: "\f04a";
} 
}

色を変えて使いたいな

ユーザー様
紺じゃなくて他の色に変更できますか？

DREAMARK JOE
はい。できます。各自CSSで色を指定していただくか、
下記ページからCSSコードをコピペしていただければ色の変更をできます。
CONTENTS × 日本の伝統色 WEB配色からCSSセレクタのまとめ方まで。 - DREAMARK

対話形式で登場人物が三人以上いる場合

ユーザー様
対話形式で登場人物が二人以上居る時はどうしたらいいですか？

DREAMARK JOE
二人以上の登場人物がいる時は、アイコンのCSSとHTMLを増やします。
下記のコードの .balloon-icon-left（左側）または　.balloon-icon-right（右側）
に任意で好きな名前をつけます。名前を付けたらデザインCSSに貼り付けします。
使いたい方のアイコンだけ増やせば大丈夫です。

例
.balloon-icon-left001
.balloon-icon-right002

複数のページをまたぐ場合でも、複数の登場人物が出てくる場合はアイコンを増やす必要があります。
ページをまたぐからといってユーザー１を変更してしまうと、全てのページのアイコンが変更されてしまいます。
ブログ全体で登場人物と考えれば分かりやすいと思います。
例えば１ページに私、ユーザー１の二人が登場。
次のページには私、ユーザー２。が登場
この場合ブログ全体で登場人物は３人になります。
（私、ユーザー１、ユーザー２）
なので、上記のような場合は、３人分のアイコンを用意しておく必要があります。

 .balloon-icon-left001{ /* ←ここに任意の名前を付ける */
  width: 100px;
  height: 100px;
  float:right;
  background: url("画像のURLを記述する") no-repeat;
  background-position:center center;
  -moz-background-size:cover;
  background-size:cover;
  border-radius: 50px;
}

.balloon-icon-right002 {  /* ←ここに任意の名前を付ける */
  width: 100px;
  height: 100px;
  float:right;
  background: url("画像のURLを記述する") no-repeat;
  background-position:center center;
  -moz-background-size:cover;
  background-size:cover;
  border-radius: 50px;
}

次にHTMLも先ほどつけた名前に合わせて変更します。
変更するのはアイコン部分のみです。変更したら記事に貼り付けます。

<!-- 左側-->
<div class="balloon">
  <div class=" balloon-icon-left001"></div> <!-- この部分のクラス名をCSSで任意につけた名前に変更します-->
    <div class="hateki-balloon-board-left">
      <div class="balloon-serif-left">名前<br>
コメントを記入する
     </div>
   </div>
</div>
<!-- 右側-->
<div class="balloon">
  <div class=" balloon-icon-right001"></div> <!-- この部分のクラス名をCSSで任意につけた名前に変更します-->
    <div class="hateki-balloon-board-right">
      <div class="balloon-serif-right">名前<br>
コメントを記入する
     </div>
   </div>
</div>