PR PR

Bloggerブログ タイトルテキスト色のみ変更方法 HTML版

スポンサーリンク
新着情報
2023.04.09
2023.04.06
2023.04.03
2023.03.19
スポンサーリンク
スポンサーリンク

この記事は2013年8月12日の1年以上前に書かれたものです。現在は状況が異なる可能性がありますのでご注意ください。

記事内に広告が含まれています。

タイトル通りですが、

スポンサーリンク

スポンサーリンク

投稿タイトル、記事タイトルのテキスト色を統一性を持たせたく変更してみました。

CSSによって、
変更しようとしたのですが、

<h3>要素になっているので、

サイドバーのウィジェットタイトルのテキスト(フォント)色も変わってしまう為、

今回は、
半強制的HTMLの編集によって、

メインカラムのテキスト色と同じ白系に変更してみました。

変更前画像

変更後画像

こんな感じで、
白系統に統一してみました。

記事タイトルに、

リンクされるよう以前カスタマイズしているので、

記事タイトルもパーマリンク(Permalink)させる

デフォルトのHTMLやCSSとは、
異なってしまいますが、

HTMLのみでの編集方法であれば、

関係なく投稿タイトル・記事タイトル色のみの、
変更が可能です。

上記リンク時のカスタマイズには、
<h2>要素でしたが、
現在は、
<h3>要素に変えています。

コードとしては、
以下になります。

<h3 class='post-title entry-title'>
<a style="color:#ffffff;" expr:href='data:post.url'>
<b:if cond='data:post.link'>
<a style="color:#ffffff;" expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a style="color:#ffffff;" expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</a>
</h3>

変更・追加箇所は、

以下画像の方が見やすいと思います。

style="color:#ffffff;"

を、
画像の部分3箇所に追加するだけです。

これで、
しばらく様子を見てみようと思います。

スポンサーリンク
タイトルとURLをコピーしました