interest blog

サクッと読めるライトな記事に詰めた知識

【CSS】はてなブログでデザインされた見出し(hタグ)をモバイル表示させてみた。

モバイルでデザインしたhタグを表示させる方法

f:id:so888:20150405024909j:plain

はてなブログはPCで閲覧した場合には、そのテーマで設定されているhタグが表示されますが、モバイル(ケータイ・スマホ)で閲覧した場合には文字が大きくなっただけで味気ないデザインでしか表示されません。

 

多くのブログを見ていると稀に、モバイルでもhタグをデザインされている方を見受けられます。表示させることは可能なのだと思い、コードを調べて表示させることに成功しました。

 

 

その方法を説明します。

 

1-1.CSSに記入するコード

まず、はてなブログは記事中で使用できるhタグは[h3][h4][h5]の3種類です。この3つのhタグをCSSに書き込むだけ、簡単です。

 

<style> 

h3{

  color:#141414; /* テキストの色*/

  font-size:150%; /*フォントのサイズ*/

  font-weight:bold; /*太文字*/

  line-height:1.5em; /*行間*/

  border-bottom:1px solid #008ee1; /*下線*/

  border-left:10px solid #008ee1; /*左側の線*/

  margin:50px 0 10px 0; /*上下の余白*/

  padding:3px 10px 1px 10px; /*テキストとボーダーの間の余白*/

  }

 </style>

上記のコードが私が使用したコードです。

 

 このコードは下のブログに載っていました。

delaymania.com

 

 

1-2.他のカラーも試したい

とてもシンプルなデザインです。テキストのカラーなどを変更させることで更にカスタマイズが可能です。知識があれば、これらのコードを参考にして色々と試してみるのも良いと思います。

 

参考までにカラーコードの一覧です。↓

www.netyasun.com

 

1-3.挿入する場所

 さて、このコードをどこに入れるか?ですが、これをはてなブログの[デザイン]>[モバイル]>[記事]を選択します。

 

はてなブログ、スマホ設定画面

 

 そして下にスクロールして、[記事下]に先程のコードを入れます。

 

サクッとぶち込んじゃいましょうw

 

はてなブログ、記事下の画像

 

1-4.h4・h5も設定

変更を保存して終了です。先程のコードは「h3」での設定になるので、コードを複製して、「h4」や「h5」も作りましょう。その際、フォントのサイズを調整することです。

 

h3→h4→h5に行くにつれてパーセンテージが下がるように調整して下さい。(100%以下にはしないように)

 

 この他にも、画像や写真を使用した見出し(hタグ)の作成方法などもありました。

blog.sukecom.net

 

興味のある方は試してみて下さい。

 

 

今回の「見出しの設定」で感じたことですが、CSSやHTMLの知識があれば、はてなブログはかなり自由度の高いブログだと感じました。

 

 

 関連記事:

so888.hatenablog.com