• TOP
• ブログ

＜ZELOカスタマイズ記④＞記事タイトル下のラベルにリンクを貼りたいはなし

2019-12-11T00:00:00+09:00 2019-12-29T05:42:10Z Blogger ZELO カスタマイズ ブログ

＜１年半運営したWordpressから、Bloggerにお引っ越し作業中！＞

今日はカテゴリ（ラベル）のおはなしです。

カテゴリという機能がないBloggerですもの、その代わりとなる「ラベル」はとっても大事だと直感しました。

なのにZELOでは、記事内ラベルの表示がリンクになってない。
しかも、記事タイトル下にしかない。

できれば

• 記事ページタイトル下のラベルにリンクを貼り
• 記事下部分にもラベルが表示されるように

したい！

ビフォーアフター

ビフォー 

アフター

記事ページタイトル下のラベルにリンクを貼る

（参考）Vaster2｜記事ページのラベルにリンクを付ける方法。

ひとまず、「記事ページタイトル下のラベルにリンクを貼る」は、このサイトのとおりにやることでクリア。

①HTMLのバックアップ

HTMLをいじる前はかならずバックアップを取ります。

②HTMLを編集

テーマ

　→　「・」がたてに３つ並んでいるメニューを選択

　→　「HTMLを編集」

<!-- 記事ページの設定 -->

（省略）

                          <span class='post-tag'>
                            <i aria-hidden='true' class='fas fa-tag'/>
                            <b:loop values='data:post.labels' var='label'>
                              <data:label.name/>
                            </b:loop>
                          </span>

を、

                  <span class='post-tag'>
                    <i aria-hidden='true' class='fa fa-tag'/>
                    <b:loop values='data:post.labels' var='label'>
                      <a class='taglink' expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;'>
                        <data:label.name/>
                      </a>
                    </b:loop>
                  </span>

これに変更。

保存しておわり！

ラベル部分に装飾を追加

ただこれだけだと

• ラベルだってこと
• リンクだってこと

がわかりにくいかなーと思ったので、サイドバーのラベルと同じようなデザインにしてみたいと思います。

（参考）Vaster2のラベルのデザインを変えてみよう！コピペでOK！

・・・思ったんですけど、「ZELO」のコードって「Vaster2」と似てるんですかね・・・。

カスタマイズ記事、割とそのまま使えることが多いな、と。

/* ---------- topページサムネの本文要約 */

（省略）

    .top-content .post-tag {

    display: none;

    }

の部分を

    .top-content .post-tag{
font-size:14px !important;
background: white;
padding:1px 4px !important;
margin-top:0px;
display:inline-block;
}

に変更！

そんでもって、ラベルの装飾用に

    .taglink {
    display: inline-block;
    position: relative;
    height: 20px;/*高さ*/
    line-height: 20px;/*高さ*/
    vertical-align: middle;
    text-align: center;
    padding: 0px 10px 0 10px;/*文字の余白*/
    background: $(label.bg.color);/*背景色*/
    color: $(label.txt.color);/*文字色*/
    box-sizing: border-box;
    border-radius: 5px;/*角を丸く*/
    font-size:14px !important;
    margin: 1px;
    }
    a.taglink:link{color:white;}
    a.taglink:visited{color:white;}
    a.taglink:active{color:white;}
    a.taglink:hover{color:white;background:$(hover.background.color);
    }

を追記して［保存］したら完了！！

記事下ラベルの装飾（色）は、

• 背景色・文字色　：　サイドバーのものを適用
• ホバーカラー　：　サイト全体のものを適用

することによって、テーマデザイナーの設定だけで変えられるようにしています。

違う色にしたいときは、カラーコードを直接入れてくださいね～。