投稿者 天宮 司 Bloggerカスタマイズ

Bloggerカスタマイズ講座10：プロフィールリンクの色とファビコンを変更

天宮です。


今回はサイドバーに表示している自己紹介の
プロフィールリンクの色を変更してみます。

Blogger プロフィールリンクの色を変更

まずは現状を確認してみましょう。

デフォルトの青色がなんだか目立ちすぎて

バランスが悪いですね（苦笑）

周囲の色合いと合わせていきましょう。

この変更は、Vaster2のテンプレに

無いセレクタを追加するカタチになります。

サイドバーのCSSが書いてある近くに追加すると
あとでさがす時に分かりやすいと思います。

.popular-post ul li a　で検索

今回は人気記事と書かれている部分の上に

下記を追加しました。

/*   プロフィール   */

.profile-datablock a {

    color: #666;

}

.profile-datablock a:hover {

    color: #ccc;

}

.profile-link {

    color: #666;

    font-size: 14px;

}

/*   サイドバー見出し   */
.sidebar h2,h3,h4{
    padding: 5px 0 5px 10px;
    font-size: 18px;
    font-weight: 700;
    border-left: 5px solid #D01857;
    border-bottom: 1px solid #bcbcbc;
    margin-bottom: 20px;
    margin-top: 30px;
}
/*   プロフィール   */
.profile-datablock a {
    color: #666;  /* 名前の文字色  */
}
.profile-datablock a:hover {
    color: #ccc;  /* 名前の文字色オンマウス  */
}
.profile-link {
    color: #666;  /* 自己紹介文の色  */
    font-size: 14px;
}
/*   人気記事    
------------------------------------- */

color:の部分は自分の好きな
カラーコードと入れ替えてください。

表示を確認してみましょう。

同じような色合いになりましたね。

blogger ニックネーム横のファビコンを変更

せっかくだからニックネーム横の

ファビコンを変更してみましょう。

これはHTMLに直接書き込むカタチとなります。

" + data:profileLogo + "　を検索

<dt class='profile-data'>　で検索してもイイです。

<a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>

上記の「&quot; + data:profileLogo + &quot;」部分を下記と書きかえます。

ブログURL/favicon.ico

例）

<a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(https://test.blogspot.jp/favicon.ico);&quot;' rel='author'>

      <dl class='profile-datablock'>
        <dt class='profile-data'>
          <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(https://test.blogspot.jp/favicon.ico);&quot;' rel='author'>
            <data:displayname/>
          </a>
          <b:if cond='data:hasgoogleprofile'>

表示を確認してみましょう。

Bloggerのファビコンよりも

オリジナリティが出せてイイですね。

やっぱり、無料ブログでオリジナルの

ファビコンが設定できるってスゴイな（笑）