ユーザー記述用に用意したHTMLクラスについて
ユーザー記述用にHTMLクラスを用意しています。
コンテンツのレスポンシブ表示
※Google AdSenseの場合は「レスポンシブ」を選択すれば自動でフィットしてくれるので、このクラスを使う必要はありません。
ディスプレイサイズに応じて簡単にコンテンツをきりかえられるようにdivクラスを用意しました。
記事中だけでなくサイドバーや記事下などのHTMLを記述できる箇所に使ってもらえれば、閲覧環境に合わせたコンテンツを見せることができます。
<div class="ad-full"> この中のコンテンツは画面が大きい（1176px以上）時のみ表示されます。 </div> <div class="ad-smallpc"> この中のコンテンツは画面が中くらい（1096px〜1175px）の時のみ表示されます。 </div> <div class="ad-tablet"> この中のコンテンツは画面が中くらい（768px〜1095px）の時のみ表示されます。 </div> <div class="ad-mobile"> この中のコンテンツは画面が小さい（767px以上）時のみ表示されます。 </div>
使い方は、<div class="ad-〇〇〇">〜〜</div>の間に表示したいコンテンツを好きな数貼るだけです。
たとえば、
<div class="ad-full"> 大画面用コンテンツ 大画面用コンテンツ 大画面用コンテンツ </div> <div class="ad-smallpc"> 中画面用コンテンツ 中画面用コンテンツ 中画面用コンテンツ 中画面用コンテンツ 中画面用コンテンツ </div> <div class="ad-tablet"> タブレット用コンテンツ タブレット用コンテンツ </div> <div class="ad-mobile"> モバイル用コンテンツ モバイル用コンテンツ モバイル用コンテンツ モバイル用コンテンツ </div>
のように単純に並べてコンテンツを配置してもらえれば、以下のように自動で配置されます。
画面サイズを伸び縮みさせてみてください。
この中のコンテンツは画面が大きい（1176px以上）時のみ表示されます。
大画面用コンテンツ大画面用コンテンツ大画面用コンテンツ
この中のコンテンツは画面が中くらい（1096px〜1175px）の時のみ表示されます。
中画面用コンテンツ中画面用コンテンツ
この中のコンテンツは画面が中くらい（768px〜1095px）の時のみ表示されます。
タブレット用コンテンツタブレット用コンテンツタブレット用コンテンツタブレット用コンテンツタブレット用コンテンツ
この中のコンテンツは画面が小さい（767px以上）時のみ表示されます。
モバイル用コンテンツモバイル用コンテンツモバイル用コンテンツモバイル用コンテンツ
なお、この４つのdivクラスのCSSは以下のように設定してあります。
display:flex; justify-content:space-around; align-content:space-around; flex-wrap:wrap;
「記事下」と「フッタ」でタイトルをスタイルするdivクラス
「記事下」と「フッタ」のHTML記述部分にはタイトルを別途書き込む欄がなく、自分でスタイリングしなければいけません。
このdivクラスを使うとサイドバーのタイトル部分と同じスタイルになります。
<div class="title">タイトル</div>
たとえばGoogle Adsenseでは広告の上に「広告」などと表示しなければいけないので、そういうときに便利です。
<div class="title">広告</div> <div class="ad-full"> （大画面用の広告コード） </div> <div class="ad-smallpc"> （中画面用の広告コード） </div> <div class="ad-tablet"> （タブレット用の広告コード） </div> <div class="ad-mobile"> （モバイル用の広告コード） </div>
のように書けば、下のようになります。
広告
大画面用広告
中画面用広告
タブレット用広告
モバイル用広告
このdivクラスのスタイルはサイドバー（html上は「はてなモジュール」といいます）のタイトルと一緒に設定しています。
具体的にこのようになっています。
.hatena-module-title, .entry-footer-html div.title, #bottom-editarea div.title {font-weight: bold;margin-bottom: 15px;font-size: 120%;}
サイドバーと合わせてスタイリングしたい場合は、
.hatena-module-title, .entry-footer-html div.title, #bottom-editarea div.title {ここにスタイルの記述}
というようにしてください。
