「続きを読む」の色変更

スポンサーリンク


続きを読む… の色を変更します。

関連記事として「続きを読む」を画像に変更を書きました。画像のほうがいい方はそちらをどうぞ。

いつものようにスタイルシートを開きます。

今回も探すのは、/* 記事表示部分 */ と書かれているところの少し下です。
/* 記事表示部分 */を目印にして

#entries .entryContinue {
	margin:10px;
	text-align:left;
}
#entries .entryContinue a {
	padding: 4px;
	color: #fff;
	background: #999;
	text-decoration: none;
}
#entries .entryContinue a:hover {
	background: #333;
}

と書かれている場所を探します。
今回もaタグのリンクなので、変更するのは aa:hover の2箇所です。

具体的には次のようにしました。

#entries .entryContinue {
	margin:10px;
	text-align:left;
}
#entries .entryContinue a {
	padding: 4px;
	//color: #fff;
	//background: #999;
	color:#f00;
	background:#fcc;
	text-decoration: none;
}
#entries .entryContinue a:hover {
	//background: #333;
	background:#f88;
	color:#fff; //追加
}

表示結果

表示結果


関連コンテンツ

スポンサーリンク

「「続きを読む」の色変更」への20件のフィードバック

  1. コメント欄がおかしい理由は
    http://fanblogs.jp/himami/archive/445/0
    に追加で投稿しています。

    続きを読むが変わらない理由ですが、HTMLがおかしくなっています。
    「続きを読むを画像に変更」しようとして、失敗したのではないですか?

    該当箇所を元通り
    <BlogEntryIfExtended>
    <div class=”entryContinue”><a href=”{$BlogEntryPermalinkUrl$}#BlogEntryExtend”>続きを読む…</a></div>
    </BlogEntryIfExtended>
    に直してください。

  2. メイン
    <BlogEntries>
    <div class=”entry”>
    <div class=”entryDate”>{$BlogEntryDateformat=”%Y年%m月%d日”
    language=”jp”$}</div>
    <h2 class=”entryTitle”><a href=”{$BlogEntryPermalinkUrl$}”>{$BlogEntryTitle$}
    </a></h2>

    <div class=”entryBody clr”>{$BlogEntryBody$}</div>
    <BlogEntryIfExtended>
    <div class=”entryContinue”><a href=”{$BlogEntryPermalinkUrl$}
    #BlogEntryExtend”>続きを読む…</a></div>
    </BlogEntryIfExtended>
    <div class=”entryInfo”>
    投稿者:<a href=”{$BlogEntryWriterUrl$}” target=”_blank”>
    {$BlogEntryWriterName$}</a>|{$BlogEntryDate format=”%H:%M”$}
    <BlogEntryIfCategory>|<a href=”{$BlogEntryCategoryLink$}”>
    {$BlogEntryCategory$}</a></BlogEntryIfCategory>
    <BlogEntryIfAllowComments>|<a href=”{$BlogEntryPermalinkUrl$}
    #commentTitle”>コメント({$BlogEntryCommentCount$})
    <<BlogEntryIfExtended>
    <div class=”entryContinue”><a href=”{$BlogEntryPermalinkUrl$}
    #BlogEntryExtend”>続きを読む…</a></div>
    </BlogEntryIfExtended>
    <div class=”entryInfo”>
    投稿者:<a href=”{$BlogEntryWriterUrl$}” target=”_blank”>
    {$BlogEntryWriterName$}</a>|{$BlogEntryDate format=”%H:%M”$}
    <BlogEntryIfCategory>|<a href=”{$BlogEntryCategoryLink$}”>
    {$BlogEntryCategory$}</a></BlogEntryIfCategory>
    <BlogEntryIfAllowComments>|<a href=”{$BlogEntryPermalinkUrl$}
    #commentTitle”>コメント({$BlogEntryCommentCount$})
    </a></BlogEntryIfAllowComments>
    <BlogEntryIfAllowPings>|<a href=”{$BlogEntryPermalinkUrl$}
    #trackbackTitle”>トラックバック({$BlogEntryTrackbackCount$})
    </a></BlogEntryIfAllowPings>
    </div>
    </div><!– entry –>
    </BlogEntries>

    /a></BlogEntryIfAllowComments>
    <BlogEntryIfAllowPings>|<a href=”{$BlogEntryPermalinkUrl$}#trackbackTitle”>
    トラックバック({$BlogEntryTrackbackCount$})</a></BlogEntryIfAllowPings>
    </div>
    </div><!– entry –>
    </BlogEntries>

    うえアカイブ

  3. 続きのコメントは出ないですが、ぜんたいピンクになりました。

    なんだかご迷惑おかけしてすいません。

  4. himamiさん、こんにちは。

    お友達のTomさんが、ちょっと困ってるみたいなので
    おじゃましますね。

    優しいTomさん本人からは
    なかなか言いにくいと思うので
    横から口出しさせてくださいね。

    ***

    まず、一度に、いろんなカスタマイズを
    しちゃだめです。

    混乱のもとになるので、一つ一つ
    仕上げましょうね。

    もし、パニックになっちゃったら
    混乱する前の状態に、一度全部戻しましょう。

    もし、変更前のソースのバックアップをとってなくて
    どうしようもないということなら、

    管理画面の
    デザインの変更⇒スキンの選択⇒スキン一覧で
    もう一度、今のスキンを選びなおしましょう。

    そうしたら、初期状態に戻ります。

    今までやったカスタマイズは消えちゃいますけど
    前に、一回出来たものは、やり直しができますよね?

    **

    ところで、himamiさんは、
    今回のカスタマイズをする前に
    一度、ソースの中身、読んでみました?

    読んで、うっすらでも
    理解できないものは、導入しない方がいいです。

    分からなくても、記事の通りにやって
    導入できたものは、いいかもしれません。

    質問することは、別にいいと思いますよ。

    でも、ソースを書いた人に
    少し質問して、もし分からなければ
    そのカスタマイズは、今のhimamiさんには
    難しすぎたってことです。

    Tomさんにも生活はありますので
    あまり時間をとらせては、
    いけないと思いますよ?

    himamiさんだって、一日中
    ブログをやっている時間はとれませんよね?

    Tomさんちのカスタマイズは、
    初心者さんには少し難しいです。

    ブログは、カスタマイズしなくても楽しめますよ?
    自分の手の届く範囲で、楽しむといいと
    思いますよ~。

  5. himamiさん。

    http://fanblogs.jp/ayzfqir5/archive/404/0
    にスキンの戻し方を書いたので、それを見ながら
    かこの言うとおりスキンを初期状態に戻してください。

    その上で、
    http://fanblogs.jp/ayzfqir5/archive/388/0
    を見ながら、コメント欄に画像が出るようにするカスタマイズを
    もう一度やり直してください。

    もし、そこで失敗したら
    またスキンを初期状態に戻してやり直します。

    コメント欄に画像が出るようにできたら、
    次は、そこまでのバックアップを取ってください。

    バックアップのとり方は
    http://fanblogs.jp/ayzfqir5/archive/403/0
    に書いておきました。

    その後で、スタイルシートを次のように直します。

    /* コメント */
    と書いてある部分から
    /* 記事表示部分 */
    と書いてある部分までを全部削除して、その場所に
    下のソースを貼り付けます。

    /* コメント */
    h3#commentTitle {
    //border: 1px solid #eee;
    border: 1px solid #0f0;
    margin-top:15px;
    padding: 6px;
    //background:#eee;
    //color:#666;
    background:#efe;
    color:#0c0;
    font-weight:bold;
    }
    h3#commentPosts {
    //border: 1px solid #eee;
    border: 1px solid #0f0;
    margin-top:15px;
    padding: 6px;
    //background:#eee;
    //color:#666;
    background:#efe;
    color:#0c0;
    font-weight:bold;
    }
    #comment_preview{
    border:none;
    background:transparent;
    }
    .comment_layer {
    padding:4px 4px 0 4px;
    border-top:1px solid #ff0;
    border-right:1px solid #ff0;
    border-left:1px solid #ff0;
    border-bottom:none;
    background:#ffe;
    color:#888;
    margin-bottom:0;
    }
    .posted2 {
    border-top:none;
    border-right:1px solid #ff0;
    border-left:1px solid #ff0;
    border-bottom:1px solid #ff0;
    background:#ffe;
    color:#fb0;
    margin-top:0;
    margin-bottom:10px;
    padding:3px 2px 4px 0;
    text-align:right;
    }
    /* 記事表示部分 */

    これで、コメント欄は完全に元に戻ります。
    そこまで出来てから、次にやりたいことを
    やる前に、教えてください。

  6. himaminさん。

    なぜ「続きを読む」の色が変わらないかわかりました。
    himaminさんは、この記事の通りやっています。

    原因は、その前にあります。

    <img border=”0″ width=”1″ height=”1″ src=”http://www13.a8.net/0.gi<br>
    ク:http://mana0727.blog92.fc2.com/><br&gt;

    <br>
    </div>

    <div class=”entryContinue”><a href=”http://fanblogs.jp/himami/archive/452/0#BlogEntryExtend”>続きを読む…</a></div>

    これがhimaminさんのブログのHTMLです。
    この赤いところがおかしいです。

    src=”URL”

    src=の右側は ” ではじまって ” で終わらなければいけません。
    もう一度赤いところを、よーく見てもらうとわかりますが
     ” ではじまっているのに、終わりの ” がありません。

    だからコンピュータは、srcがまだ終わったとわからないので、おかしな結果になっています。

    この <img からはじまるところ

    <img border=”0″ width=”1″ height=”1″ src=”http://www13.a8.net/0.gi<br>
    ク:http://mana0727.blog92.fc2.com/><br&gt;

    この部分を一度消してください。
    そうすれば「続きを読む」の色が変わるように出来ます。

    その後、消したところを直してください。
    どう直せばいいのかは、何を表示したかったのかhimaminさんしかわからないので説明できません。

  7. こんにちは

    何度もhtmlかくにんしましたが、<img border=”0″ width=”1″ height=”1″ src=”

    が見つからず・・・

    どこか、探し中です。

    私の目の調子がわるいのかな??

    また、確認してみます。

    ありがとうございます。

  8. himamiさん。
    2012年03月17日 の記事の追記の前にある
    一つ目の記事の最後です。

    最後に貼ってあるアフィリエイトだと思います。
    それを貼りなおしてください。

  9. こんにちは

    りょうかいです。

    うまくいきました。

    本当にありがとうございます。

    ここだとは、スキンやアカイブや みてました。

    また少しずつ、テンプレート無理しない程度にがんばります。

    ありがとうございました。

  10. ほんとうにありがとうございました。

    本当にうれしかったです。

    いつもすいません、またありがとうざいます。

  11. こんにちは

    続くが出たとたん、コメントランがしろになりました。

    また、チョコチョコ直していきます。

himami へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください