及川WEB室|ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > その他 > livedoor Blogのトップページの記事タイトルに各個別ページへのリンクをつける方法

livedoor Blog のトップページの記事タイトルにリンクをつける

livedoor Blog タイトルにリンクを張る livedoor Blog のトップページには記事が複数表示される。
livedoor Blog のトップページの記事タイトルに、リンクがついていなかったため、
各記事タイトルに各記事の個別ページへのリンクをつけた。

サンプルのライブドアブログ↓
建築設計事務所(神奈川県川崎市) スタッフの日記

トップページの記事のタイトルにタイトルにリンクをつける方法

管理画面のデザイン設定で、トップページのテンプレートCSSを修正します。

トップページのテンプレートを修正

livedoor Blog の管理画面[ブログ設定]→[カスタマイズ]→[トップページ] livedoor Blog 管理画面
【変更前】
1
2
3
4
5
6
7
...
<div class="titlebody">
<h3 class="title">
<$ArticleTitle ESCAPE$><ifarticlerating><$ArticleRatingIcon$></ifarticlerating>
</h3>
</div>
...
上記のハイライトした4行目のようなタグがタイトルの文字部分。
ブログに適用させているデザインによって違う場合も有ると思うが、
私のテンプレートの場合、タイトルは <h3 class="title">...</h3> だった。
クラス名は「title」だった。

【変更後】
1
2
3
4
5
6
7
8
9
...
<div class="titlebody">
<h3 class="title">
<a href="<$ArticlePermalink$>">
<$ArticleTitle ESCAPE$><ifarticlerating><$ArticleRatingIcon$></ifarticlerating>
</a>
</h3>
</div>
...
上記のハイライトした4行目・6行目のように、リンクタグを追加。
リンク先は <$ArticlePermalink$> 。

CSSを修正

見出しタグ <h3> 内の文字をリンク文字にしたため、 見出しタグ <h3> に設定したスタイルではなく、リンクタグ <a> に設定したスタイルが適用されてしまう。

リンクタグ <a> に設定したスタイルが適用されてしまう。
livedoor Blog 管理画面
見出しタグ <h3> に設定したスタイルにしたい。 livedoor Blog 管理画面
見出しタグ <h3> 内のリンク文字にも 見出しタグ <h3> のスタイル(.title)を適用させるため、CSSを修正する。

livedoor Blog の管理画面[ブログ設定]→[カスタマイズ]→[CSS] livedoor Blog 管理画面
ブログに適用しているデザインによってCSSは違うかもしれないが、
私の場合は、タイトルは <h3 class="title">...</h3> でクラス名は「title」だったので、.title クラスを修正した。

【変更前】
1
2
3
4
h3.title {
        font-size:14px;color: #5F2500;
        font-weight:bold; !important;
    }
※スタイルの内容は、適用デザインによって違うと思います。

【変更後】
1
2
3
4
h3.title,h3.title a {
        font-size:14px;color: #5F2500;
        font-weight:bold !important;
    }
1行目のように、クラス名に「,.h3.title a 」を追加。
これで、title クラスの h3 タグ内のリンク文字も、h3.title と同じスタイルになる。

以上です。
MENU Ξ