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

<1年半運営したWordpressから、Bloggerにお引っ越し作業中!>

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

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

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

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

ビフォーアフター

ビフォー 

ZELOラベルリンクカスタマイズ前


アフター

ZELOタイトル下ラベルリンク&装飾


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


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

①HTMLのバックアップ

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

②HTMLを編集

テーマ
 → 「・」がたてに3つ並んでいるメニューを選択
 → 「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>

これに変更。

保存しておわり!


ラベル部分に装飾を追加

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


・・・思ったんですけど、「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);
    }

を追記して[保存]したら完了!!

記事下ラベルの装飾(色)は、

  • 背景色・文字色 : サイドバーのものを適用
  • ホバーカラー : サイト全体のものを適用
することによって、テーマデザイナーの設定だけで変えられるようにしています。

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

0 件のコメント :

コメントを投稿

関連記事