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

生涯ピンチケ宣言

ドジっ子とらいちゃんの日記。ヲタク気質な大学生。ピンチケ大好き。

ブログ初心者がはてなブログのスマホデザインを変えるときに参考にした記事

f:id:try328:20151110051558p:plain

 

はてなブログのスマートフォン版カスタマイズをする際に参考にした記事をまとめました。

ブログへのアクセスは大半からがスマホからです。スマホ版をカスタマイズすることで、PV数を伸ばせるかもしれません。

初心者でも、ここまでカスタマイズすることが出来ますので、是非これからカスタマイズしようとしている人は参考にしてください。

目次を追加する

まず、無料版でも目次を追加できる方法です。

参考にした記事は

この記事を参考にしていただければ、簡単な目次を次の写真のようにスマホでも表示することができます。

f:id:try328:20151110040448p:plain

Pro版では設定の、デザイン→スマートフォン→ヘッダ→タイトル下の欄に

<style type="text/css">
.entry-content .sectionList{ color: rgb(59, 66, 126);/*文字色*/
font-size:100%; /* フォントの大きさ */
font-weight:bold; /* 太字 */
padding: 5px 10px; /*見出しまわりのスペース 上下、左右*/
border-left: 9px solid rgb(97, 101, 134); /*見出し左の線*/}

.entry-content h3 { color: rgb(59, 66, 126);/*文字色*/
font-size:95%; /* フォントの大きさ */
font-weight:bold; /* 太字 */
background: rgb(243, 242, 252); /*背景色*/
padding: 10px 10px; /*見出しまわりのスペース 上下、左右*/
border-left: 9px solid rgb(97, 101, 134); /*見出し左の線*/}

.entry-content h5 { color: rgb(0,0,0);/*文字色*/
font-size:90%; /* フォントの大きさ */
background: rgb(250,250,250); /*背景色*/
padding: 6px 6px; /*見出しまわりのスペース 上下、左右*/
border-left: 9px solid rgb(97, 101, 134); /*見出し左の線*/}
</style>

とそのままコピペすれば写真のようにできます。

文字の色や背景色、フォントの大きさなど変更したい所があれば、適時/*◯◯◯*/の説明通りに変更可能です。

f:id:try328:20151110041330p:plain

目次はあると、かなり記事を読みやすくなり、気になる所だけピックアップできることで確実にアクセス数を伸ばせるのではないかと思います。

英字フォントと見出しをオシャレにする。

これは、Pro版ではないとできないことなので要注意です。

参考にした記事は

f:id:try328:20151110042126p:plain  初期フォント

f:id:try328:20151110042128p:plain 変更後フォント

 

写真からもわかる通り、意外と英字フォントを初期フォントから変えるだけで、かなりオシャレになります。

次に、見出しです。

 

f:id:try328:20151110042826p:plainf:id:try328:20151110042750p:plain f:id:try328:20151110042615p:plain

ちょっと分かりにくいですが、左写真の「渋谷エリア」という見出しが、カスタマイズ後の右写真だと、四角で囲い左に縁ができ背景色が設定出来てることが分かると思います。

また、カスタマイズをもう少しいじれば、大見出し・中見出し・小見出し全てをカスタマイズすることが可能です。

ヘッダーに表示される丸いアイコンを消し画像にする方法。

これも、Pro版ではないとカスタマイズ出来ないので要注意です。

参考にした記事は

この記事にある、CSSをコピペすることで、

・丸く表示されるアイコン画像削除

・ヘッダー削除

・上部余白の削除

・ヘッダーに背景色の設定

・ヘッダーの上にブログタイトル・ブログ説明の表示

をすることができます。

僕は、ヘッダーに無地色ではなく、画像を設定したかったので

#header の枠に

background-image: url("画像のURL");
background-position: 50%;
background-repeat: no-repeat;

を追加することでヘッダーに画像を設定することが出来ます。

僕は次の写真のようにカスタマイズすることが出来ました。

f:id:try328:20151110044315p:plain

        ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

f:id:try328:20151110044313p:plain

ナビゲーションを追加する。

上の写真でもあるナビゲーションの設定方法です。

これもPro版のみでカスタマイズ出来ることなので要注意です。

参考にした記事は

この記事にあるCSSをコピペすれば、沢山パターンのナビゲーションを設置することができます。

自分のブログに対応したURLや表示文字に変更するだけで、ナビゲーションを設定出来るので大変有り難いです。

僕がこれらのカスタマイズをしたすぐ後に、この記事を書いているので、本当に一部のカスタマイズだと思いますが、是非参考にしてください。

カスタマイズは、しながらCSSやHTMLの勉強にもなるので、見た目を気にする人などやってみると面白いと思います。