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

気ままに殴り書き

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

はてなブログ、スマホサイトの「プロフィール」の位置を変更してみた

はてなブログ はてなブログ-アクセスアップ・SEO はてなブログ-カスタマイズ

f:id:kminebg1110:20160220131636j:plain

先週末に、以下の記事のとおり、ブログの回遊率を高める・直帰率を抑制する目的もあり、「はてなブログ」スマホサイトの関連記事・注目記事のデザインを変更しました。

となると、次に記事なるのは「プロフィール」の位置です。「はてなブログ」スマホサイトのデフォルトでは、「プロフィール」の後に「注目記事」がありますが、この順序を逆にしたい。

本日は、この「プロフィール欄」の位置の修正のレポートです。

※はてなブログ Pro向けです。

 

 

スマホサイトの「プロフィール」の表示位置に関する考察

情報量の多いパソコンサイトはともかく、縦に長いスマホサイトでは、読者の方には「できる限り優先度の高い順に参照して欲しい」との思いがあります。

この思いに反して、「はてなブログ」のデフォルトの場合には、ブログ運営者としては読者の方に参照していただきたい「注目記事」の上に「プロフィール」があります。確かに、「どんな方がブログを運営しているのだろう」との情報も必要ですが、プロフィールよりは「他にどのようなオススメ記事があるのだろう」と思われる方が多いのではと想定しています(私の場合は、プロフィールよりは他の注目記事を参照します)。

 

「プロフィール」の位置の変更にあたり、多くのブログ記事を参考にしましたが、「プロフィールを記事下に置いたら、アクセスが増えたよ」という方もいれば、「表示スピードを速めるため、プロフィールを削除した」という方もいます。

どちらが正解ということもないのですが、「ブログ運営者の情報が何もないのも、アフィリエイト・アクセスアップの面ではよくないだろう」との判断にて、プロフィールを残したまま、表示位置の変更を行いました。

 

前置きが長くなりましたが、以下は表示位置の変更のために行ったことです。

 

スポンサーリンク

 

 

プロフィール位置の変更、Before ・ After

▼変更前ですが、プロフィールの下に注目記事があります。できれば「注目記事」を先に参照していただきたいため、順番を逆にします。

f:id:kminebg1110:20160214204424j:plain

▼途中経過。プロフィール画像の横の空白が上手く制御できない。であれば、この空白を有効利用するため、かなり前に削除していた「読者になる」アイコンを掲載することにしました。

f:id:kminebg1110:20160220101902j:image

▼修正後の暫定版。後日、プロフィールアイコン・「読者になる」バナーも変更したいので仮の姿です。なお、「読者になる」バナーはデフォルトから変更しています。変更方法は別記事にて掲載の予定。
f:id:kminebg1110:20160220101915j:image

なお、上記画像では「プロフィール」の背景色が水色になっていますが、変更方法は以下の記事「Milliard関連記事のカスタマイズ」を参照ください。

 

プロフィール位置の変更方法

スマホサイトのプロフィール位置の変更にあたり、参考にさせていただいたのは以下の記事です。以下の記事ではパソコンサイトのプロフィールを変更していますが、これをスマホサイトに適用しました。

スマホサイトの位置変更の流れの大枠は以下となります(1・2の順番は逆でもOKです)。

  1. 既存のプロフィールのHTMLをコピー・編集し、フッターに貼付け。
  2. 既存のプロフィールを非表示。

 

1.既存のプロフィールのコピー・編集

ダッシュボード・デザイン・スマホアイコンから、スマホサイトを表示します。

そして、「プロフィール」を右クリックし「検証」を選択すると、下記画像の右にあるHTMLが表示されます。 

f:id:kminebg1110:20160220121114j:plain

画像右の矢印以降が「プロフィール」の内容ですが(文字の拡大は以下を参照)、こちらをコピーします。以下のとおり、始まりは「<div class="hatena-module profile touch-default-hatena-module">」、終わりは「<span class="id">中略 </span></a>」となっているはずです。

<div class="hatena-module profile touch-default-hatena-module">
<div class="hatena-module-title">
プロフィール
</div>
(やや長いので中略です)
<span class="id">
<a data-load-nickname="1" data-user-name="(ご自身のID)" href="http://(ご自身のURL)/about"><span class="user-name-nickname">けんけん</span> <span class="user-name-paren">(</span><span class="user-name-hatena-id">id:(ご自身のID)</span><span class="user-name-paren">)</span></a>

 

これを、以下のフッタに貼り付けます。

f:id:kminebg1110:20160220122306j:plain

そして、上記HTMLの赤文字(取消線)の部分を削除します。これをしないと下記2にて既存のプロフィールを非表示とした場合、このコピペしたプロフィールも非表示となってしまいます。

また、貼り付けたままでは、以下画像のとおりプロフィール画像の右側が空白となってしまい、間抜けなことになります。これを回避するため工夫する必要がありますが、画像の横にプロフィール文字を持っていこうにも部分的にしか反映しませんでした。

このため、「読者になる」バナーを画像右に表示しました(方法は後日の記事にて)。

f:id:kminebg1110:20160220101902j:plain

 

2.既存のプロフィールを非表示にする 

以下のHTMLを、ダッシュボード・スマホアイコン・タイトル下にコピペすると、既存のプロフィールは非表示になります。

 <style tyle=text/css>
.hatena-module.profile {
display: none;
}
</style>

 

まとめ

プロフィール画像右の空白を、これまで削除したまま失念していた「読者になる」バナーを掲載することによりごまかしましたが、これで当初のもくろみどおり、「プロフィール」を最下部に移動することができました。これでアクセスアップといきたいところですが、おそらくは自己満足の世界でしょうね。