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

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

はてなブログ、1年間のスマホサイト・カスタマイズのまとめ

はてなブログ はてなブログ-カスタマイズ

f:id:kminebg1110:20160626115357j:plain

昨年度の7月に「はてなブログPro」の契約を行ってから、他ブログの見よう見まねで「はてなブログ・スマホサイト」のカスタマイズを行ってきました。これまで何をどうしたものか自分でも混乱したこともあるため、ここで一旦、これまでに実施したスマホサイトのカスタマイズのまとめを行います。
なお、他ブログのコピペ対応のものは、コピペ元の皆さんに感謝しつつ、記憶にある限り引用元も紹介させていただきます。

 

スポンサーリンク

 

 

本文フォントサイズの変更

はてなブログを使用し最初に感じたことが、フォントサイズが小さいこと。老眼気味の私には、フォントサイズが小さいとそれだけで読みたい意欲が減少します。
 
▼こちらを「スマホアイコン」・「ヘッダ」・「タイトル下」にコピペ。
私のブログでは「16.5」に設定しています。ディスプレイが5.5インチですと、私にはこれがベストですが、5インチクラスでは、まだ小さいように感じます。
<style type="text/css">
.entry-content {font-size:16.5px;}
</style>
 
▼引用元のブログを失念してしまったので、当ブログの過去記事のリンクです。


ヘッダまわりの見易さを追及

私の場合、はてなブログ・デフォルトのスマホサイトのカスタマイズのきっかけは、以下の点にあります。

 

  • 多くの方が同じデザインで、個性に乏しい。
  • グローバルメニュー・カテゴリー・関連記事を表示し、少しでも回遊率をアップしたい。

 

そこで、ヘッダまわりで行ったカスタマイズは以下のとおり。

 

▼現在(2016/6/19)のヘッダまわり

f:id:kminebg1110:20160619111125j:image
 

デフォルト設定を(ほぼ)全てを非表示にする

カスタマイズにあたっては、円型のアイコンなど、デフォルト設定のほぼ全てを非表示にしてから始めたほうが手っ取り早いかと思います。

非表示にできる項目は多数ありますが、以下の過去記事を参照くださいませ。


ヘッダーをシンプルに、しかも強調する(画像①)

ヘッダーに画像を貼り付けて、さらに個性を出すこともできますが、画像の①のとおり、私はシンプルにして、強調したものにしています。

 

▼こちらの「ゆきひー」さんの記事に記載のものをコピペ、色を変更したのみです。


グローバルメニュー(画像②)

このグローバルメニューについては、つい先日まではプルダウン式を利用していました。トグルメニュー化も試してみましたが、以下を踏まえ、現在は「チップの日常」さんに記載のものを、そのまま利用させていただきました。

 

  • プルダウン式の場合、「タップする人がどれほどいるのだろうか?」と素朴な疑問が沸いてきた。
  • トグルメニュー化を試してみたところ、やや負荷があるのか、レスポンスが滑らかではなかった。
  • 単純にカテゴリーを全表示した場合、カテゴリー数がやや多いため、スマホでは場所をとる。
  • その点、「チップの日常」さんのグローバルメニュー(スライド式)は、動きが滑らかであり、表示のバーがカテゴリー表示であることを、見た目で読者の方はわかっていただけると思われる。

 

▼設置方法はこちらを参照。


日付まわりのデザイン(画像③)、サムネイル画像の強調(画像④)

こちらはアクセスに好影響を及ぼすわけではないのですが、デザイン的なメリハリなどのために変更しました。引用元のブログ・記事は失念のため、未掲載です。

 

こちらを「スマホアイコン」・「ヘッダ」・「タイトル下」にコピペ。

青文字がサムネイルの強調(画像④)、赤文字が日付周りのデザイン(画像④)です。画像の背景色・画像の大きさなどはお好みで。

<style type="text/css">

.list-entry-article .thumb-image
{
width: 90px; /*サムネイル画像の横幅*/
height: 90px; /*サムネイルが画像の縦幅*/
border-radius: 0em; /*サムネイル画像の角の丸みをなくす*/
border: solid 3px rgb(61, 61, 61); /*画像の枠線をつける*/
}
.date
{
color: white; /*日付の文字色*/
background: #1D3557;/*日付の背景色*/
padding: 0px 10px;/*日付の文字まわりのスペース*/
}

</style>

 

フッターの利便性・デザインを追求

 
▼現在の「注目記事」周辺のカスタマイズ後はこちら。
f:id:kminebg1110:20160620202550j:image
 

注目記事見出し・サムネイルのデザインを変更(画像①②)

注目記事の見出しは、ヘッダー・日付周りの色と整合性をとるためにデザインを変更。サムネイルは新規記事一覧でのカスタマイズに合わせ、周囲の枠を設定し、画像をやや大きくしました。

 

▼カスタマイズ方法はこちらを参照


カテゴリーを新設

なぜか、スマホサイト・デフォルトにはカテゴリーがありません。このため、パソコンサイトのカテゴリーを移植しました。
 
▼パソコンサイトのカテゴリーをスマホサイトに移植。同時にカテゴリーの階層化も行っています。
f:id:kminebg1110:20160621121814j:image
 
▼詳細はこちらの過去記事を参照。


プロフィールの位置を変更、読者登録ボタンの新設

▼プロフィールの位置を最下段に変更し、読者登録ボタンを好みの画像で新設しました。
f:id:kminebg1110:20160621121848j:image
 
プロフィールの位置を変更

 デフォルトでは「注目記事」の上に「プロフィール」がありますが、回遊率を高めるためにも、みていただきたいのは「プロフィール」よりも「注目記事」。このため、既存のプロフィールを削除し、最下段に新設。

 

▼変更方法はこちら。


読者登録ボタンの新設

プロフィール欄を最下段に変更し、デフォルトの「読者登録ボタン」設置していましたが、どうもこれが小さすぎてバランスがわるい。このため、好みの画像に変更しました。


記事見出し

▼現在の記事見出しはこちら。2・3カ月に1回は修正しています。小見出し(h5)はデフォルトのままですが、現在 変更すべく物色中。

ちなみに、私は過去に大見出し(h3)を使わずに、誤って中見出し(h4)から使用していた経緯があり、未だに過去記事はそのまま放置しています。。。

 

f:id:kminebg1110:20160626105657j:image

 

▼参照(コピペさせていただいた)したのは、こちらの記事。

 

関連記事

現在、Milliardプラグインを使用していますが、このMilliardブラグインのよいところは、カテゴリーの階層化を行っている場合、子カテゴリーの関連記事を表示してくれるところです。

f:id:kminebg1110:20160626105708j:plain

 

カスタマイズした点は、「ゆきひー」さんの記事を参考に、見出しとサムネイルの強調です。


逆に、Milliardプラグインのデメリットは「表示が遅い。表示されないこともある」こと。表示されないこともある点は、「子カテゴリ-の関連記事の表示」のメリット以上のデメリットであり、以下の表示方法にしようかと検討中。

 

▼検討案、その1。「ゆきひー」さんの記事のものを利用。


▼検討案、その2。

私のPCサイトで使用しているテーマです。以下の記事の関連記事の表示は、シンプルなコードで望ましいのですが、レスポンシブデザインでないとスマホサイトには表示されない模様。パソコンサイトの関連記事をスマホサイトに移植できないか確認中。


まとめ

「カスタマイズよりも、コンテンツの充実を図らなければ」と思いつつも、なかなか止められないカスタマイズ。ほとんどが諸先輩方のコピペ対応ですが、何かのお役に立てれば、と思います。