読者です 読者をやめる 読者になる 読者になる

かるみに

趣味とともに生きる

【はてなブログ】無料版でもCSSでスマホページをカスタマイズする方法

藤子・F・不二雄さんは漫画「ドラえもん」にてスマートフォンの到来を予言していたとかつて話題になりました。

f:id:trrun:20161125003146p:plain

 

そんなスマートフォンの普及に伴い、ネットサーフィンやちょっとした検索はパソコンよりスマートフォンが利用されています。

特にTwitterFeedlyなど便利なサービスが増えたため、特にこういうはてなブログスマホから見る人が大半でしょう

 

となると読んでもらう人のために、PCページだけでなく、スマホページもオシャレにカスタマイズしたいですよね。

見出しをアレンジしたり、シェアボタンを設置したり…。そういったカスタマイズにはCSSが必須です

 

しかし、はてなブログ無料版では、スマートフォン向けページの「{ }デザインCSS」欄が利用できません。そのため通常、無料版ではスマートフォン向けサイトのデザイン変更はできなくなっています。

 

しかし、少し手を加えるだけでスマホ向けページのカスタマイズは可能です!

見出しを変更したり、シェアボタンを設置したりしてオシャレなページを作ってみましょう!

事前準備

ダッシュボード内にある「デザイン」→スマートフォンマークタブを選択→「記事」→「記事上下のカスタマイズ」の項目「PCと同じHTMLを表示する」にチェック

 

↓ここ

f:id:trrun:20161125000747j:plain

 

これは、PC版のHTMLで記述した部分がそのままスマートフォンでも利用できるよ~ってことを示しています。

なので、次はPC版にHTMLを記入していきます。

 

ちなみにまだ何も変化しません。

 

HTMLを記入する

チェックを入れたら、続いてスパナマークを選び、記事を選択します

普通、ブログのデザインをカスタマイズするとき、「{}デザインCSS」を選ぶんだけど、今回は全く使いません

f:id:trrun:20161124235743p:plain

「記事」をクリックするとこんな感じにズラーッと出てきます。

今回はスマホ向けデザインを作るので、「記事上下のカスタマイズ」中にある、「記事上」「記事下」に記入します

f:id:trrun:20161124235735p:plain

詳しくは割愛するけど、通常はここにHTMLコードを記入して「{ }デザインCSS」にCSSを記入したら、シェアボタンやフォローボタンが記事上下に設置できます。

 

で、事前準備のチェックによってここに書かれたことがスマホ向けページに適応されるようになっています。

 

じゃあこれで終わり…とはいきません。

このままだと、「デザインCSS」の中身はスマホ向けページに反映されていません。(HTMLとCSSは別物だからね)

 

違いがよくわからない人は、HTMLがゲーム機本体でCSSがカセットだと思ってください

ゲームは、ゲーム機本体だけやカセットだけあっても遊べない。両方準備して始めてゲームが遊べます…みたいな

(今ってダウンロードが中心だし、そもそもこの例えって伝わるのかな…?伝わらなかったらごめん)

 

ま、というわけで、ゲーム機だけで遊べるように改造します

具体的には、HTML内にCSSを記入できるようにする必要があるわけですね。

 

今まで「デザインCSS」とHTMLを一体化する方法 

 そうするのは簡単で、CSSをこのタグで挟んであげればいいわけです。

<style type=text/css>ここにCSSを記入する</style>

 

今までデザイン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が適応されるようになります。

まとめ

回りくどかったからまとめると

  1. PCと同じHTMLを表示するにチェック
  2. 今まで「デザインCSS」に記入していたCSS<style type=text/css></style>で挟む
  3. PC版カスタマイズ「記事上」または「記事下」に貼る

これで、スマホにもCSSが適応されるので、カスタマイズの幅が広がります!