DREAMARK

WEBLOG

困った時に知りたい時のあれやそれ。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


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

 .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>

レスポンシブデザインでレクタングルのレスポンシブ広告を使いたい



ユーザー様
私はレクタングル広告が好きです!レクタングルだけ表示する事はできますか?


DREAMARK JOE
はい、可能です。以下のページに詳しく記載しているのでお読み下さい。
スマホ時には広告が並んでしまうので、他場所に移動する方法も書いてあります。

レスポンシブでレクタングルのみを表示させ横並びにする方法とスマホで縦並びになる時の解消法 - DREAMARK

はてなブログのスマホ表示でパーツが表示させたい



ユーザー様
私はレスポンシブデザインは使わずにはてなブログのスマホデザインを使っています。
その時にもPCと同じように蛍光マーカーやコラム欄を使う事はできますか?


DREAMARK JOE
はい、使えます。全体的な表示に関してはまだ対応していませんが、各種パーツは以下のURLよりCSSコードをダウンロードできます。

はてなブログ独自のスマホページにもCSSを対応させるコードを紹介。 - DREAMARK

Copyright © 2016 DREAMARK All rights reserved.