「続きを読む」の色変更

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

参考記事：
で、スタイルシートはどこに書くのか？
スタイルシートでの色の指定方法

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

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

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

#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タグのリンクなので、変更するのは a と a:hover の２箇所です。

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

#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件のフィードバック

himami より:

2012年3月7日 13:39

何度もすいません

やはりこちらのほうも出来ず・・

また挑戦してみますね。

返信
Tom より:

2012年3月7日 15:04

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

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

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

返信
ｈｉｍａｍｉ より:

2012年3月8日 13:18

メイン
<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>

うえアカイﾌﾞ

返信
ｈｉｍａｍｉ より:

2012年3月8日 13:23

このように修正しましたが、かわりませんでした。

なんだかぱにっくになってしまいすいません。

返信
himami より:

2012年3月8日 14:58

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

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

返信
かこより:

2012年3月8日 17:22

himamiさん、こんにちは。

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

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

***

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

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

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

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

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

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

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

**

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

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

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

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

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

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

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

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

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

返信
かこより:

2012年3月8日 17:26

Tomさん、ごめんね。余計なお世話しました。
次は、口出ししませんから～。

返信
Tom より:

2012年3月8日 21:04

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;
}
/* 記事表示部分 */

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

返信
himami より:

2012年3月17日 14:03

こんにちは

やはりここはできませんでした。

私にはむずかしいのかな。

返信
Tom より:

2012年3月18日 04:46

himaminさん。

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

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

<img border=”0″ width=”1″ height=”1″ src=”http://www13.a8.net/0.gi<br>
ク:http://mana0727.blog92.fc2.com/><br>
<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>

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

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

返信
かこより:

2012年3月18日 06:43

himaminさんじゃないよ。himamiさんだよ。
あげはがひまみんちゃんって呼んでるけどね笑。

返信
アゲハッピー。 より:

2012年3月18日 06:52

え…..ひまみちゃんだったの…….初耳

返信
かこより:

2012年3月18日 06:57

そだよ。おはよー。おやすみあげは。ぐー。

返信
かこより:

2012年3月18日 06:58

って、たぶんTomは知ってて書いてると思うけどね笑。

返信
himami より:

2012年3月18日 13:57

こんにちは

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

が見つからず・・・

どこか、探し中です。

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

また、確認してみます。

ありがとうございます。

返信
Tom より:

2012年3月18日 14:20

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

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

返信
himami より:

2012年3月18日 14:35

こんにちは

りょうかいです。

うまくいきました。

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

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

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

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

返信
Tom より:

2012年3月18日 14:40

himamiさん。

今見てきました。
うまく出来てよかったです。

返信
himami より:

2012年3月18日 14:50

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

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

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

返信
himami より:

2012年3月19日 14:32

こんにちは

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

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

返信

コメントを残すコメントをキャンセル

This site uses Akismet to reduce spam. Learn how your comment data is processed.

共有:

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

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル