はてなブログのスマホ版レイアウトを綺麗にしてみた(完全版)

前回の記事で、はてなブログのスマホ表示において、Adsense広告表示のズレの修正、はてなブログの関連情報の非表示化などを行う方法について触れました。

 

 

今回の記事では、ファーストビューやコンテンツ部分に関する修正を行いましたので、どういった修正を行ったか、またその方法について触れていきます。

 

まず、私のブログをスマホで開くと現状どういった風に表示されるかを確認してみましょう。

 

ファーストビュー部分

f:id:nyarumeku:20141014011950p:plain

 

コンテンツ部分

f:id:nyarumeku:20141014012003p:plain

 

 

いかがでしょうか。結構変わったのですが、こうやって変化後だけ見せられても少し分かりにくいかもしれません。次からは変更点を赤枠で囲ってご説明します。

 

ファーストビュー部分

f:id:nyarumeku:20141014012145p:plain

 

コンテンツ部分

f:id:nyarumeku:20141014012157p:plain

 

 

変更方法

変更点は赤枠で囲った3つの部分です。要は、「タイトル部分を変更」「トップページの一覧記事の表示方法の変更」「見出し(h3タグ)の文章を際立たせる」といった変更を行ったわけです。ここを以下のブログで紹介されているCSSをもとに変更しました。

 

こちらのブログでは先ほどの3つの変更点に加え、フォントを変える方法まで触れられています。ただ、私のブログで上のCSS記述を試したところ、どうしても「タイトル部分の記述を消して新しいヘッダを用意する方法」が上手くいきませんでした。

 

そこで、適当にソースコードを読んで少しだけCSSの部分を変更してみたところ上手くいったので、上に書いてあるやり方で上手くタイトル部分が変更できないという方はこちらを試してみて下さい。

 

<style type="text/css">
.header-blog-icon{display:none;}
.blog-title{display:none;}
#blog-description{
 display:none;}
</style>
 
/*ここからhtml*/
<div class="headernew"> /*新しいヘッダー*/
<a href="http://hibinonikki.hatenablog.jp/" > /*ヘッダー画像をクリックでTOPページに飛ぶようにする*/
<img src="http://f.st-hatena.com/images/fotolife/n/nyarumeku/20140703/20140703133504.png" alt="大学院を出たニートが名古屋で暮らすようです" width="100%">
/*ヘッダー画像(はてなフォトライフにアップし、画像URLをsrc="●●"にコピペ) */
</a>
</div>

 

このCSSをスマホデザインのヘッダ部分に記述してもらえれば問題なく変更できるかと思います。

 

念のために書いておくと、私はCSSやHTMLについて勉強したことがなく、なんとなーくソースを読んで意味を考えてやっている“だけ”ですので、これが「正しい」ものかは分かりません。

 

多分問題はないと思いますが、一応自己責任ということでお願いします。

 
あっという間に月25万PVをかせぐ人気ブログのつくり方―これだけやれば成功する50の方法

あっという間に月25万PVをかせぐ人気ブログのつくり方―これだけやれば成功する50の方法