forfreelife’s blog

サラリーマンから脱出するためにいろいろとチャレンジしてみる。まずは、アフェリエイト。

無料版はてなブログのスマートフォンデザインCSSを変更してみる

ブログ作成

スマートフォンデザインCSSを変更するには、はてなブログproに登録して「ダッシュボード」－「デザイン」ー「スマートフォン（アイコン）」ー「記事」ー「スマートフォン用にHTMLを設定する」でCSSを記述するのが通常である。

しかし、最近のブラウザの特性やHTMLの知識を使って無料版はてなブログでもスマートフォンデザインCSSを変更することができる。

 

ページ毎にデザインを変更したい場合

ページの編集画面が「見たままモード」である必要があります。各ページのHTML編集画面にCSSを<style>タグを使用して記述します。

    <style>
    <!--
      /* h3タグの文字列を青にする例 */
      .entry-content h3{
        color:blue;
      }
    -->
    </style>

この方法の場合、記事を書くたびにCSSをHTML編集画面に貼り付けるので手間がかかります。また、デザインの一括変更ができません。

ページのソースコードを見れば分かりますが、<body>タグ内に<style>タグが出力され、HTMLのお作法に反したページとなります。しかし、最近のブラウザは高機能と言うべきか、融通が利き、<body>タグ内に<style>タグがあっても、ちゃんとデザインに反映してくれます。

 

PC版とスマートフォンのデザインを統一して一括変更したい場合

一般的にCSSをhtml文章内に記述する方法の1つとして、<head>タグ内に<style>タグを使用して記述する方法があります。

(一般的なタグの記述例)

    <html>
    <head>
      <style>
      <!--
        /* h3タグの文字列を青にする例 */
        .entry-content h3{
          color:blue;
        }
      -->
      </style>
    </head>
    <body>
      コンテンツ
    </body>
    </html>

はてなブログの設定で「ダッシュボード」－「設定」－「詳細設定」－「headに要素を追加」で<head>タグの編集が可能です。ここにCSSを記述することで、PC版デザイン、スマートフォン版デザインを統一することができます。

 

ページをソースコードを見ると分かりますが、「headに要素を追加」で編集した内容が<head>タグに出力されるため、HTMLのお作法に則ったCSS表記になります。