昨日CONTENTSをレスポンシブデザインに対応したと発表をしたのですが、レスポンシブデザインを適用しないで、はてなブログ独自のスマホデザインを表示をしている方にもCONTENTSの機能を使っていただくために今回はコピペ用のコードを用意しました。もちろんスマホ用に表示できるようにデザインされています。
この記事ははてなブログのテーマ「CONTENTS」を利用する方やテーマのインストールを検討されている方向けの記事です。
今回のコードを適用すれば、PCで見ても、はてなブログの独自のスマホデザインページを見ても表示を同じようにできるようになります。外観に関しては、そこまでいじる時間がなかったので、また随時対応をしていく予定です。
コンテンツ部分のコードは一応細かく分けても用意しましたが、面倒という方は一番下にある全載せコードを用意しました。コンテンツ部分のCSSが全て入っています。
※全載せコードにはグローバルメニュー・リコメンド枠・フッターは入っていません。
グローバルメニュー・リコメンド枠・フッターを、はてなブログのスマホデザインで利用するには、基本的にはてなブログProにしている必要があります。
Proにしなくても外部読み込み等の方法もありますが、私の方では推奨しかねるので各自お調べ下さい。
※PC用の表示やレスポンシブデザインは、はてなブログProではなくても利用する事が出来ます。
ブログ全体表示部分
下の３つはブログ全体に表示する部分になります。PC版の時とは異なり、各全てのコードHTML・CSS・jQuery（グローバルメニューのみ）を基本的には同じ所に貼り付けします。
CSSは下のようなスタイルで書きます。グローバルメニューとリコメンド枠を同時に利用する場合はどちらかの下のCSS枠の中にCSSを入れるといいでしょう。
<style type="text/css">
ここにCSSを記述していく。
</style>
グローバルメニュー・リコメンド枠の貼り付け位置
ダッシュボード→デザイン→スマートフォンタブ→①ヘッダをクリックして②タイトル下にコードを貼り付ける。
ヘッダ・フッダ共通の注意事項
HTMLの記述が出ていない場合は、スマートフォン用にHTMLを設定するにチェックが入っている事を確認する。
フッタの貼り付ける位置
ダッシュボード→デザイン→スマートフォンタブ→①フッタをクリックして②タイトル下にコードを貼り付ける。
グローバルメニュー（トグルメニュー）
リコメンド枠
フッター
コンテンツ表示部分
コンテンツ部分はCSSのみです。PC用に書いた記事が表示されるのではてなブログ独自のCSSのみが適用される事になります。
こちらも各CSSを下記の「ここにCSSを記述を足していく」の部分に入れて下さい。
<style type="text/css">
ここにCSSを記述を足していく
</style>
各CSSを貼り付ける位置
コラム欄
蛍光マーカー
目次
対話形式
カエレバ・ヨメレバ
全載せコード
これではてなブログ独自のスマートフォンデザイン表示時でもPCと同じように表示出来ます。今回どのように表示されるのか画像を用意する事が出来ませんでしたが、また後日追加していく予定です。基本的にはレスポンシブデザインの表示と同じになるので、下のリンクより確認して下さい。
