【はてなブログ】無料版でもCSSでスマホページをカスタマイズする方法
藤子・F・不二雄さんは漫画「ドラえもん」にてスマートフォンの到来を予言していたとかつて話題になりました。
そんなスマートフォンの普及に伴い、ネットサーフィンやちょっとした検索はパソコンよりスマートフォンが利用されています。
特にTwitterやFeedlyなど便利なサービスが増えたため、特にこういうはてなブログはスマホから見る人が大半でしょう
となると読んでもらう人のために、PCページだけでなく、スマホページもオシャレにカスタマイズしたいですよね。
見出しをアレンジしたり、シェアボタンを設置したり…。そういったカスタマイズにはCSSが必須です
しかし、はてなブログ無料版では、スマートフォン向けページの「{ }デザインCSS」欄が利用できません。そのため通常、無料版ではスマートフォン向けサイトのデザイン変更はできなくなっています。
しかし、少し手を加えるだけでスマホ向けページのカスタマイズは可能です！
見出しを変更したり、シェアボタンを設置したりしてオシャレなページを作ってみましょう！
事前準備
ダッシュボード内にある「デザイン」→スマートフォンマークタブを選択→「記事」→「記事上下のカスタマイズ」の項目「PCと同じHTMLを表示する」にチェック
↓ここ
これは、PC版のHTMLで記述した部分がそのままスマートフォンでも利用できるよ～ってことを示しています。
なので、次はPC版にHTMLを記入していきます。
ちなみにまだ何も変化しません。
HTMLを記入する
チェックを入れたら、続いてスパナマークを選び、記事を選択します
普通、ブログのデザインをカスタマイズするとき、「{}デザインCSS」を選ぶんだけど、今回は全く使いません。
「記事」をクリックするとこんな感じにズラーッと出てきます。
今回はスマホ向けデザインを作るので、「記事上下のカスタマイズ」中にある、「記事上」「記事下」に記入します
詳しくは割愛するけど、通常はここにHTMLコードを記入して「{ }デザインCSS」にCSSを記入したら、シェアボタンやフォローボタンが記事上下に設置できます。
で、事前準備のチェックによってここに書かれたことがスマホ向けページに適応されるようになっています。
じゃあこれで終わり…とはいきません。
このままだと、「デザインCSS」の中身はスマホ向けページに反映されていません。（HTMLとCSSは別物だからね）
違いがよくわからない人は、HTMLがゲーム機本体でCSSがカセットだと思ってください
ゲームは、ゲーム機本体だけやカセットだけあっても遊べない。両方準備して始めてゲームが遊べます…みたいな
（今ってダウンロードが中心だし、そもそもこの例えって伝わるのかな…？伝わらなかったらごめん）
ま、というわけで、ゲーム機だけで遊べるように改造します
具体的には、HTML内にCSSを記入できるようにする必要があるわけですね。
今まで「デザインCSS」とHTMLを一体化する方法
そうするのは簡単で、CSSをこのタグで挟んであげればいいわけです。
今までデザインCSSに記入していた内容ぜ～んぶタグで挟んで、記事上もしくは記事下に張り付ければOK！
例えばこんな感じ
<style type=text/css>
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}</style>
さっき言ってた「記事上」もしくは「記事下」にこれを張り付けると、スマホページの大見出しのデザインが変わるよ！
こんな感じで、スマホ向けページにもCSSが適応されるようになります。
まとめ
回りくどかったからまとめると
