はてなブログ独自のスマホページにもCSSを対応させるコードを紹介。WEB配色からCSSクラスタのまとめ方まで。困った時に知りたい時のあれやそれ。Q&Aページを作りました。はてなブログ独自のスマホページにもCSSを対応させるコードを紹介。2016-06-08はてなブログ独自のスマホページにもCSSを対応させるコードを紹介。テーマ昨日CONTENTSをレスポンシブデザインに対応したと発表をしたのですが、レスポンシブデザインを適用しないで、はてなブログ独自のスマホデザインを表示をしている方にもCONTENTSの機能を使っていただくために今回はコピペ用のコードを用意しました。スマホ用に表示できるようにデザインされています。この記事ははてなブログのテーマ「CONTENTS」を利用する方やテーマのインストールを検討されている方向けの記事です。今回のコードを適用すれば、PCで見ても、はてなブログの独自のスマホデザインページを見ても表示を同じようにできるようになります。外観に関しては、そこまでいじる時間がなかったので、また随時対応をしていく予定です。コンテンツ部分のコードは一応細かく分けても用意しましたが、面倒という方は一番下にある全載せコードを用意しました。コンテンツ部分のCSSが全て入っています。※全載せコードにはグローバルメニュー・リコメンド枠・フッターは入っていません。対話形式カエレバ・ヨメレバ全載せコードグローバルメニュー・リコメンド枠・フッターを、はてなブログのスマホデザインで利用するには、基本的にはてなブログProにしている必要があります。Proにしなくても外部読み込み等の方法もありますが、私の方では推奨しかねるので各自お調べ下さい。※PC用の表示やレスポンシブデザインは、はてなブログProではなくても利用する事が出来ます。下の3つはブログ全体に表示する部分になります。PC版の時とは異なり、各全てのコードHTML・CSS・jQuery(グローバルメニューのみ)を基本的には同じ所に貼り付けします。CSSは下のようなスタイルで書きます。グローバルメニューとリコメンド枠を同時に利用する場合はどちらかの下のCSS枠の中にCSSを入れるといいでしょう。type="text/css">ここにCSSを記述していく。</style>グローバルメニュー・リコメンド枠の貼り付け位置ダッシュボード→デザイン→スマートフォンタブ→1ヘッダをクリックして2タイトル下にコードを貼り付ける。ヘッダ・フッダ共通の注意事項HTMLの記述が出ていない場合は、スマートフォン用にHTMLを設定するにチェックが入っている事を確認する。フッタの貼り付ける位置ダッシュボード→デザイン→スマートフォンタブ→1フッタをクリックして2タイトル下にコードを貼り付ける。グローバルメニュー(トグルメニュー)リコメンド枠フッターコンテンツ表示部分コンテンツ部分はCSSのみです。PC用に書いた記事が表示されるのではてなブログ独自のCSSのみが適用される事になります。こちらも各CSSを下記の「ここにCSSを記述を足していく」の部分に入れて下さい。対話形式カエレバ・ヨメレバ全載せコードこれではてなブログ独自のスマートフォンデザイン表示時でもPCと同じように表示出来ます。今回どのように表示されるのか画像を用意する事が出来ませんでしたが、また後日追加していく予定です。基本的にはレスポンシブデザインの表示と同じになるので、下のリンクより確認して下さい。12:20Tweet関連記事2016-07-12CONTENTS×日本の夏。新色のリクエストを募集します。今回から普通の記事に戻ります。題材的にはかなり一部の人向け...2016-07-07私の執筆した本の発表と予約開始。GuideBookを執筆しました。カスタマイズやデザイン、WEB系(SEOやWEBマーケティング)の事を書いていきます。GuideBookを執筆しました。はてなIDの取得からブログ解説。Proや独自ドメインへの変更の説明やSNSとの連携。カスタマイズに広告やアフィリエイトの設置まで。はてなブログの解説書。GuideBookThemeはてなブログでテーマをを公開しています。「主役はコンテンツ」をコンセプトに、おしゃれで機能的で、使いやすく見やすいテーマを作りました。グローバルメニューやフッターに加えリコメンド欄や対話式のCSSも適用済です。ヨメレバとカエレバも適用済。コンテンツ作りに集中していただけるようなテーマになっています。無料で使用出来るので、是非ご利用下さい。合わせて読みたいおすすめ記事2017-01-05現在制作中であるはてなブログの新テーマの概要を紹介します。おかげさまで、...2016-07-12CONTENTS×日本の夏。新色のリクエストを募集します。今回は私が公開しているはてなブログのテーマ「CONTE...2016-06-14困った時に知りたい時のあれやそれ。Q&Aページを作りました。WEB配色からCSSセレクタのまとめ方まで。reserved.TOPへ引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。