追記のある時「続きを読む」リンクのデザインを目立たせるCSS

本ブログには基本的には 追記 しませんのでブログ記事に 続きを読む が表示されることはありません。 しかし姉妹ブログ ホームページ作成浜松Tips (※)に於いては屡追記するためこれが表示されます。 デザイン的にこのリンクが分かり難いと云う問題点が ブログ村で折角 ダンディ和田 さんに 紹介された時に発覚してしまいました(笑) 問題のリンクが下の図です。

ホームページ作成浜松Tips4月6日記事:続きを読むビフォー

今回この問題に対応してみました。 HamaZoテンプレートでは 特に当該リンク部分のデザイン指定がありませんでした。 従って他のリンクと同様に処理され、 それも見映えを目立たせなくさせる一因だったのだと思います。 デザイン的に新たに指定したCSSは以下になります。

/* 続きを読む */
a.acontinues{
    display:block;
    margin:0.3em 2em 0 auto;
    color:#7D26FF;
    font-weight:bold;
    letter-spacing:0.2em;
    text-decoration:underline;
    text-align:right;
}
span.main-continues a:hover{
    color:#09ae13;
    text-decoration:overline;
}

その結果、以下の様な表示になりました。

ホームページ作成浜松Tips4月6日記事:続きを読むアフター

記事の続きに関連することを示すために、 リンク色は各ブログ記事タイトルの色に合わせました。 少しは目立つようになったのではないでしょうか。

※ 現在では ホームページ作成浜松Tips は本ブログ( Acenumber Technical Issues )に統一しました。

スポンサーリンク

「追記のある時「続きを読む」リンクのデザインを目立たせるCSS」への1件のフィードバック

  1. 追記のある時の「続きを読む」リンクのデザイン(本ブログ編)

    はまぞう(HamaZo)ブログに於いては記事投稿画面で追記リンクをクリックして表示される文字入力画面に入力することで、トップページには表示されないでいて個別ページは表示される内容を記すことが出来ます。トップページでは記事の一覧性を良くして、もう少し読みたい時に

コメントは受け付けていません。