Emporioに階層化ラベルを導入する

最近、世界のグルメ情報を発信するブログを立ち上げた。

>> 食いしん坊日記ザ・ワールド

このブログでは地域ごとにカテゴリわけしようと思ったのだが、世界中かなりの国や町を周ったので、単純にカテゴリを付けると収集がつかなくなる。

都市ごとにカテゴリつけたら何個カテゴリが必要になるのか(^_^;)

というわけで

ヨーロッパ/国/都市

みたいな感じで階層化して整理したい。

しかしてBloggerにはその機能がなく、ネットに出回ってる方法では最近のテーマであるEmporioでうまく動作しなかった。

ではEmporioではどうするのか？を今回はまとめます。

スポンサーリンク

Emporioに階層化ラベルを導入すると？

ネットで定番の方法をそのまま適用すると、Emporioでは表示が崩れる。

ラベルの階層化

ネットを徘徊して階層化ラベルの実装方法を探してみると、どうもこれ↓で紹介されてる方法が定番のようだ。

>> ブログの探究 －ブログ運営のテクニック集－: Bloggerのカテゴリ（ラベル）ツリー化

まずJqueryを導入する。
以下を</head>の直前にぺたっと貼っておけばよい。


<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>


で、上記の記事に書かれているコードでLabelガジェットを置き換える。

そして記事を作成するとき「ヨーロッパ/ノルウェー/オスロ」みたいにスラッシュで区切ったラベルを設定しておく。

うまくいけばラベルガジェットの表示をこんな↓感じに階層化してくれる。

Emporioでは表示が崩れる

しかし上記をそのままやってもEmporioではうまく動かない。

このように↓表示がおかしくなってしまうのだ。

上↑は「ヨーロッパ/ノルウェー」と「旅のグルメ」という2つのラベルを設定した場合。
複数ラベルがあるときれいに整列せず崩れた表示となる。

またEmporioではラベルの文字に背景が設定されていて薄いボックスの中に小さな文字が入る。

が、Jqueryで移し替えた文字列にそれが適用されないのでフォントの統一感が失われている。

さらにタイトルの文字列（’カテゴリ’）も微妙に大きくなってしまい、他のガジェットとの統一感も壊れている。

Emporio向けにカスタマイズする

スポンサーリンク

上記の

• 複数ラベルの配置
• フォントの統一
• タイトル文字のサイズ

という3つの問題を修正するため、EmporioではCSSと元コードのカスタマイズが必要となる。

ラベルの配置を変更する

Emporioではラベル表示はliタグで実装されている。

そしてその配置がCSSで以下のように指定されており、

display:inline-block

要するに横並びになるよう設定されている。

なのでこれを縦並び、すなわち「display:block」に変更する。

該当箇所を以下の通り修正すればよい。


.Label li{
/* 階層化ラベルのためdisplay:inline-blockを縦並びに変更 */
display:block;
overflow:hidden;
max-width:100%;
text-overflow:ellipsis;
white-space:nowrap
}

文字の装飾をなくす

またラベルの文字の装飾をなくすことで全階層の文字フォントに統一感を出す。

そのために、

• CSSの装飾を設定している部分やフォントの設定をコメントアウトし、
• font-family: sans-serif; を設定

している。

実際の該当箇所は以下の通り。


/* 階層化ラベルの文字フォントを変更：背景なし、ゴシック */

.Label li a,.Label span.label-size,.byline.post-labels a{
/* background-color:rgba($(sidebar.link.color.red),$(sidebar.link.color.green),$(sidebar.link.color.blue),.1);
border-radius:2px;
color:$(sidebar.link.color); */
cursor:pointer;
display:inline-block;
/* font:$(labels.font); */

font-family: sans-serif;

line-height:1.5;
margin:4px 4px 4px 0;
padding:4px 8px;
text-transform:uppercase;
vertical-align:middle
}


ただこのカスタマイズはひょっとしたら影響範囲が大きすぎるかもしれない、とも思う。

どこかがヘンな表示になってたらご一報ください(^_^;)

タイトルの文字サイズを変更する

タイトルの文字は元記事のコードの中で以下のように設定されている。

<h2><data:title/></h2>

しかしEmporioではガジェットのタイトルはh3で実装されている。
またフォントサイズは16pxのようなので、上記の行を以下に変えた。


    <h3 style='font-size:16px;'><data:title/></h3>

テーマの「HTMLの編集」で「ウィジェットへ移動」ドロップダウンから’Labe1’を選んで該当箇所を置き換えればよい。

※なお上記のCSSカスタマイズを行うと、以下の方式のラベル階層化もEmporioで可能になります。

>> 【Blogger】ラベルを階層化する方法 – ブログ運営のためのブログカスタマイズ

個別記事に階層化ラベルを導入する

スポンサーリンク

なおEmporioでデフォルトで入っているラベルガジェットはトップページのもの。

個別の記事のサイドバーにカテゴリを出したい場合、「レイアウト」で「Sidebar(Item Page)」というところにラベルガジェットを追加する必要がある。

この追加したラベルガジェットの表示も階層化したいのであれば、追加したガジェットのコードも上記のコードに入れ替えることになる。

ただし追加したラベルガジェットのidは’Label2’になってると思うので、コード内の’Labe1’はすべて’Label2’に変えなければならない。

というわけで上記のカスタマイズにより、Emporioでも以下のような表示ができるようになるはずだ。

Emporio使いのひとはご参考に :)

なお例によって有用な記事を発信してくださった方に感謝しますm(_ _)m


その他のコード改変によるカスタマイズはこちら
Bloggerで目次を出すスクリプトを、適用先に合わせてカスタマイズする