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

気ままに殴り書き

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

はてなブログ、パソコンサイトのカテゴリー階層を見易くカスタマイズ

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

f:id:kminebg1110:20160522155519j:plain

当ブログのアクセス分析にあたり、Google Analyticsのスマホアプリは毎日のように参照し、簡易的に分析しているのですが、久しぶりにAnalyticsのパソコンサイトをみてみました。

そこで、これまでは勝手な思い込みで、スマホ・パソコンのアクセス比率はスマホが多いだろうと想像していたものの、スマホ vs パソコン・タブレット連合では、ほぼ半々の割合であることが判明。

これまで、スマホサイトのカスタマイズばかりに注力してきましたが、半数がパソコンサイトの閲覧とあれば、パソコンサイトにも手を入れなければと思い、早速 修正の開始です。今回は、先日の以下の記事「はてなブログ、サイドバーのカテゴリー表示をスマホ版にコピペで移植」と関連し、パソコンサイトのカテゴリーの修正です。

 

スポンサーリンク

 

 


スマホサイト向けに作成済のカテゴリーを、パソコンサイトに移植・還元

まずは、パソコンサイトのカテゴリーの修正前後の画像から。

カテゴリー表示のBefore / After

▼修正前。こちらの「はてなブログ、カテゴリーの階層化を行い200記事をスッキリ整理」にて紹介のとおり、はてなブログの場合、カテゴリーの親子間を疑似的に表すため、例えば「スマホを親、iPhoneを子カテゴリー」とする場合、「スマホ」「スマホ-iPhone」の2つのカテゴリーを作成せざるを得ないのですが、疑似的な手法のため、サイトでは独立して表記されます。

このため、以下画像のカテゴリー表示を、しくみを知らない人がみると「カテゴリーの付け方がおかしい」と思うハズ。本人がみても、カテゴリーを探しにくいものです。

なお、青色のデザインは私が使用しているテーマ「Mistilteinn」に特有のものです。

f:id:kminebg1110:20160522150607j:plain

 

▼こちらが修正後。誰が見ても、親子のカテゴリーが明確かと思います。

f:id:kminebg1110:20160522150617j:plain

 

修正方法

修正方法と言えるほど大それたものではないのですが、ご参考です。

 

▼管理画面のサイドバーより、既存の「カテゴリー」を削除します。なお、既存のものは削除しても、「モジュールを追加」にて「カテゴリー」を選択すると、すぐに復活できます。

f:id:kminebg1110:20160522152038p:plain

 

▼新しいカテゴリーは、上の画像の「モジュールを追加」にて「HTML」を選択し、私の場合は「はてなブログ、サイドバーのカテゴリー表示をスマホ版にコピペで移植」でスマホ向けのHTMLを作成済でしたので、これを赤枠にコピーし、「フォントをパソコン向けに大きくする、親子の関係を更に強調する」ことで完了。

f:id:kminebg1110:20160522152201j:plain

 

または、新規でHTMLを書き込む場合、以下のようにカテゴリーをリスト表示し、カテゴリーのURLのリンクを貼り、カテゴリーの親子表示は「カテゴリーの表示順、記載するテキスト」により親子っぽく見せかけているのみです。

 

※青文字は、デフォルトのフォントサイズからの拡大率、赤文字のxxxはご自身のカテゴリーのURL、表示するテキストは(私の場合)「■=親カテゴリー、....=子カテゴリー」とする見せかけです。

 

<span style="font-size: 120%;">

<ul class="hatena-urllist">

<li>
<a href="http://xxx">
■スマホ
</a>
</li>

<li>
<a href="xxx">
....iPhone
</a>
</li>

<li>
<a href="xxx">
■パソコン
</a>
</li>

</span>

 

まとめ

サイドバーのカテゴリーの修正も簡単にコピペ対応できましたが、「はてなブログ」の場合、このようにカスタマイズを行う必要があるこにつき、楽しくもありつつも、ムダな作業ですね(私はどちらかというと楽しんでいます)。

私は3月からWordpressでのブログも運営していますが、Wordpressの場合、このようなカスタマイズを行うこともなく、最初から「痒い所に手が届く機能」が備わっているために記事編集に専念できます。ブログで大成するためには「ノウハウコレクターになったらダメ」と、複数のブログ・サイトで記載があり、身に染みて感じる今日この頃です。