ひなぴし ドラマ考察

会いたくて、会いたくてふるえるシンドローム。トケルのブログ。

はてなブログ、スマートフォン表示のデザインCSSをカスタマイズする方法。スマホ・モバイルの見出し・文字サイズ変更等。

最近はブログの更新がなかなかままならない状況なんですが(^_^;)

それでも、少しずつは記事公開をしていこうかなと思っています。

時間がある時に一気に公開して・・またしばらく沈黙・・みたいなやり方ですが(笑)

 

で、久しぶりに、ブログの見た目を少し変更してみようと思い

いろいろ調べてみました。

 

ぼくの場合、全く知識がないわけではないですが

それほど詳しいわけでもない、という中途半端な技術の人間ですので

自力ではなかなか・・。

 

ということで、ネットで方法をいろいろ調べてみました。

 

「はてな」ではじめるブログ生活―はてな公式ハンドブック

 

はてなブログのスマホ表示・デザインCSSをカスタマイズする方法

今回調べたのはこちらです。

調べたというか、たまたま知ることになったというか・・(笑)

 

「簡単なやり方」が無いだけに、「できない」のかなーと勝手に思っていましたが

これ、方法があったようです。

 

しかも、けっこう簡単に。

 

 

ただ、このスマホの見栄えをカスタマイズする方法

を完全にやりきるには条件があります。

 

「はてなブログPro」を利用していること

が条件です。

 

このはてなブログProは有料ですので

かなり本気でブログやろうと思っている人しか・・入ってないとは思いますが。

 

まあそういう人でなければ、わざわざスマホでの見え方を変更しようとは

思わないかもしれないですけど。

 

 

これ、ちゃんと試してないんですが・・

例えば、スマホの「記事」ページだけにCSSを反映したい場合は・・

たぶんProを利用していなくてもできそう。

※できなかったら、ごめんなさい。

 

 

どうやってやるかというと

 

はてなブログのデザイン編集画面で、

「スマートフォン」を選び、

左のメニューで「フッタ」を選ぶと

 

f:id:AR30:20150512104317p:plain

 

「スマートフォン用にHTMLを設定する」

という項目があります。

 

ここにCSSを書けば良いんです。

 

<style type="text/css">

/*この中にCSSを記述 */

</style>

 

 

ということで、簡単でした(笑)

 

「ヘッダ」の「タイトル下」のHTMLも

はてなブログProを利用していると編集できるみたいです。

こちらに追加しても良いかと。

 

 

さらに、これはたぶんですが・・

「記事上」「記事下」については、はてなブログProを利用していなくても

編集できるような・・

 

もしそうなら、スマホビューの「記事ページ」だけに反映されるCSSなら

ここに書けば、反映してくれる気がします。

スマホTOPページとかのCSSをカスタマイズするにはやっぱり

はてなブログProを利用して、ヘッダやフッタに追加するしかないと思いますが。

 

 

例えば、どういうカスタマイズをするかは・・

また時間があれば書きますが、まあこの記事を興味をもってみる人なら

個人個人、自分がしたいカスタマイズがあるはずですし、とくに説明の必要はないかもですね。

 

 

とにかく、スマホ表示はかなり重要なので

こだわって見栄え・見た目を編集してみましょう!

このブログへメール 削除依頼