FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

一部だけ文字、リンク等の色を変える

一部だけ文字、リンクの色等を変える方法を紹介します。
色を変えたい文字をfontタグで囲みます。

<font color="#0033FF">色を変えたい文字</font>

数値を変えてお好みの色に設定してください。

例えば「続きを読む」のリンクの色を変えたい場合は

～
<a href="<%topentry_link>#more">続きを読む</a>
～

これを次のように編集します。

～
<a href="<%topentry_link>#more"><font color="#0033FF">続きを読む</font></a>
～

これで「続きを読む」のリンクの色を変えることが出来ます。

関連記事

[ 2006/04/30 23:18 ] カスタマイズ共通カスタマイズ | TB(0) | CM(35)

≪ 記事の文字を一部小さくする | HOME | カテゴリ３の背景の色を変える ≫

[ 379 ] ありがとうございました＾＾

回答ありがとうございました♪　おかげで色を変えることができました！
また、質問するときもあるかもしれませんがそのときはよろしくお願いします（＿　＿）

[ 2006/05/01 00:51 ] [ 編集 ]

[ 382 ]

テンプレート使わせてもらってます　<(_ _)>
質問なのですが、
・記事内の文字を強調文字（太字？）にするにはどうすればいいのでしょうか？
・続きを読む文字を変更させたいのですが（タイトル文に変更）できますか？
・≪前ページ | HOME | 次ページ≫の前ページと次ページもタイトル文に変更させることはできますか？
よろしくお願いします　<(_ _)>

[ 2006/05/07 22:31 ] [ 編集 ]

[ 383 ] こんにちわ。

自分もテンプレート使わせてもらってます＾＾
かなり元の形がなくなってますが（笑）

＞ぶぶっちさん

＞記事内の文字を強調文字に

は、
記事を書くスペースのすぐ上のボタンがいっぱいある中の、「B」って所を使えば簡単です。
強調したい文字の初めの所をクリックして
終わりたい所までドラッグした後、
「B」のボタンを押せば太字になりますよ・・・って今ブログ見たら、出来てるじゃないですか（笑）

＞続きを読む文字を変更

は、
・「ブログデザインの設定」をクリック
（管理画面の右上の方にあります）
⇒今使ってるテンプレートの「修正」をクリック
⇒HTMLの編集の方の▼ エントリー（記事）▼って書かれてる場所がありますから、その辺にある「続きを読む」って文字を探して、好きなように変えてください。
毎回の記事毎のタイトルにする方法は自分には分かりません＾＾；
シーサーブログのやり方パクッたらイケそうですけど・・・

＞≪前ページ | HOME | 次ページ≫の前ページと次ページもタイトル文に変更

は、
常に一定のタイトルなら、すぐ簡単に出来ますよ。
これも、次の記事のタイトル毎の変更の仕方はよく分かりませんが・・・

常に一定のタイトルで良いのなら、
・「ブログデザインの設定」をクリック
⇒今使ってるテンプレートの「修正」をクリック
⇒HTMLの編集の方の▼ページナビゲーション▼の部分の
　≪前ページと次ページ≫の部分を好きなように変え　ればOKです。

ただ、このやり方だと、ずっとそのタイトルになっちゃいます・・・
あまり役に立てなくて申し訳ない＾＾；

そうそう、自分も質問しに来たんだった（笑）

▼カテゴリー別記事ナビゲーション▼の中の日付けを消したんですが、年月日の前にある『＆nbsp; 』のタグ？も消して良かったんですかね？？

一応、今の所大丈夫なんですが、
検索で調べたら、スペースを表すタグ？ってなってました。
それで、何か意味があって知らない内に、急におかしくなったら嫌だなぁと思って、聞きに来ました。

お忙しい事と思いますが、
時間のある時で良いのでよろしくお願いします。

[ 2006/05/08 14:27 ] [ 編集 ]

[ 385 ] > トラオさん

こんばんは、トラオさん。
思うとおりに色が変えられたようでなによりです。
また何でも聞いてくださいね。

[ 2006/05/13 22:41 ] [ 編集 ]

[ 388 ] > ぶぶっちさん

こんばんは、ぶぶっちさん。
ぶぶっちさんの質問は殆んどサッカー大好き男さんが回答してくれました。一応補足説明をさせていただきます。

・続きを読む文字を変更させたいのですが（タイトル文に変更）できますか？

HTMLの続きを読むを<%topentry_title>に書き換えると毎回の記事タイトルにすることができます。

・≪前ページ | HOME | 次ページ≫の前ページと次ページもタイトル文に変更させることはできますか？

一ページに複数の記事が掲載されていますのでこれは不可能です。申し訳ございません。

[ 2006/05/13 23:18 ] [ 編集 ]

[ 389 ] > サッカー大好き男さん

こんばんは、サッカー大好き男さん。
ぶぶっちさんへの質問に答えてくれて本当に有難う御座いました。とても助かりました＾＾
年月日の前にある『＆nbsp; 』のタグは消していただいて全く問題ありません。不具合も起こらないので安心して消してください。

ワールドカップ開幕も近づいてきましたね。私も楽しみです。

[ 2006/05/13 23:27 ] [ 編集 ]

[ 2345 ] 黒地に黒リンク

＜追記＞解決しました。

はじめまして。

いたおさんのテンプレートは初心者にもわかりやすいように親切な作りで、ここで色々カスタムの仕方も丁寧に説明していただいて、本当に感謝しています。ほかのテンプレに浮気しようという気になれません。

はじめてのコメントなんですが、いきなり質問させていただきます。

[standard_ver.08]を使っています。
写真がメインなので背景もリンク色も黒にカスタムしました。
ページナビなどは白に色を変更できたのですが、コメントをしてくださる方がＨＰのＵＲＬも記入した場合、名前が見えなくなってしまいます：

http://tennispics.blog108.fc2.com/blog-entry-13.html

解決方法があったらぜひ教えて下さい。
（急ぎませんので、お時間のある時で結構です）

変更するのはここ↓か、このすぐ上かな、と思って色々試してみたのですが、どうにもなりませんでした。

if (b) {
document.write("<a href='<%comment_url>' target='_blank'>"+"<%comment_mail>"+"</a> <a href='<%comment_url>' target='_blank'><%comment_name></a>");
} else {
document.write("<%comment_mail> <%comment_name>");
}
}
</SCRIPT>
[ <a href="<%comment_edit_link>" title="コメントを編集する"><font color="#FFFFFF">編集</font></a> ]
</div>

[ 2007/06/24 22:44 ] [ 編集 ]

[ 2360 ] 解決しました。

頭を冷やしてまたトライしてみたら、ちゃんとできました。
お騒がせして申し訳ありませんでした。

[ 2007/06/26 00:22 ] [ 編集 ]

[ 2396 ] > れいこさん

自己解決されましたか。返事が遅くて誠に申しわけありません。
私ももう少ししっかり管理できるように頑張ります＾＾；

[ 2007/06/28 03:16 ] [ 編集 ]

[ 2413 ] ＞いたおさん

そんな風におっしゃらないでください。
ここに書かれているとおりにすればちゃんとできることなんですから、質問する私がいけなかったんです。

話がそれますが、次のカスタマイズを組み合わせてみました。

　記事文末に広告等を挿入する
　管理者用記事編集リンク

そしたら、過去記事にもすべて記事編集リンクが入り、しかも黒地に黒地なので、訪問者には見えません。

その他、ここで教えていただいたカスタムは数知れません。
本当にありがとうございます。

[ 2007/06/28 19:42 ] [ 編集 ]

[ 2436 ] > れいこさん

なるほど、管理者用記事編集リンクは訪問者にとって不要なものですから見えないほうが好都合ですね。

カスタマイズの記事もお役にたてたのなら幸いです。
れいこさんのブログは写真が多いので黒背景にしたデザインが実に功を奏していますね。お見事です。

[ 2007/06/30 02:19 ] [ 編集 ]

[ 3366 ]

初めまして、いたおさん。
テンプレート愛用させて頂いています。

質問なのですが、リンクに設定した画像には枠が付きますよね？
この枠の色を変更するにはどうすればいいのでしょうか？

また、プロフィールの一番下にある、はてなブックマークの画像にも枠が付いています。
この枠を外す方法はありますでしょうか？

初心者なので分かりにくい質問だったと思いますが、解決案があるのでしたら教えてください。
よろしくお願いします。

[ 2008/06/05 22:51 ] [ 編集 ]

[ 3380 ] > ヒロキさん

リンク画像の枠を変える記事を書きましたのでこちらを参考にしてください。

リンク画像の枠を変える
http://10plate.blog44.fc2.com/blog-entry-166.html

[ 2008/06/09 22:20 ] [ 編集 ]

[ 3386 ]

いたおさん
詳しい説明ありがとうございます。

早速カスタマイズしてみましたが、カウンターにも枠が付いてしまいました。

自分がファイルアップロードした画像のみに枠を付ける方法などはありますでしょうか？

お時間のある時でいいので、方法があれば教えて頂けると幸いです。よろしくお願いします。

[ 2008/06/10 23:28 ] [ 編集 ]

[ 3398 ] > ヒロキさん

「自分がファイルアップロードした画像だけ」というのはちょっと難しいのですが、記事の中にあるリンク画像だけ変えるのであれば可能です。記事を掲載しましたのでこちらを参考にしてください。

記事に投稿したリンク画像だけ枠を変える
http://10plate.blog44.fc2.com/blog-entry-167.html

[ 2008/06/14 15:26 ] [ 編集 ]

[ 3400 ]

いたおさん
何度も解説ありがとうございます。
今回解説して貰った事を参考にカスタマイズしていきたいと思います。

本当に、ありがとうございました。

[ 2008/06/15 14:07 ] [ 編集 ]

[ 4169 ]

質問ですが、
「各記事内のリンクだけ青色に変える」ということはできますでしょうか？
記事内限定で、記事内のリンク全てを基本青色にするにはどうすればいいのか、ということです。
色を変えたりなどの基本のことはできるんですが、
あまりテンプレートとかは詳しくなくて･･･
なので今までリンクを貼る度に文字を青色に変えていたんですが（基本の色が目立たない為）、
何か方法があったら詳しく教えて欲しいです。

[ 2009/05/11 22:28 ] [ 編集 ]

[ 4170 ] > Spring Rainさん

それは私の制作したテンプレートでは無いので確かなことは言えないのですが、スタイルシートの末尾に以下を加えてみてください。

.main_body a:link { color: #0000FF; }

こちらの記事も参考にしてください。

リンクのスタイルを変える
http://10plate.blog44.fc2.com/blog-entry-23.html

[ 2009/05/11 22:37 ] [ 編集 ]

[ 4189 ]

リンクの文字色の件、出来ました。
どうもご丁寧な回答ありがとうございました＾＾

[ 2009/05/12 21:29 ] [ 編集 ]

[ 4190 ]

できたと思ったんですが、
なぜかプレビューの時だけできて更新をしてもう1度見てみると何ら変わっていませんでした･･･
何か問題でもあるんでしょうか？

[ 2009/05/12 22:13 ] [ 編集 ]

[ 4197 ] > Spring Rainさん

以下をスタイルシート末尾に加えてみてください。

.main_body a:link { color: #0000ff; }
.main_body a:visited { color: #0000ff; }
.main_body a:hover { color: #0000ff; }
.main_body a:active { color: #0000ff; }

[ 2009/05/13 01:24 ] [ 編集 ]

[ 4200 ]

どうもありがとうございます！
なんかよく分かりませんができましたｗ

[ 2009/05/13 07:39 ] [ 編集 ]

[ 5542 ]

Spring Rainさんと同じことをしたいのですが、どうしても記事内のリンクだけ青色にするということができません
スタイルシートの末尾ということは

/* ▲ サイトマップ ▲ */

の下のあたりということですか？
そこにコピペで貼っても反映されませんでした…
他には

/************************************** ▼ リンクの色 ▼ */
a:link { color: #000000;text-decoration:none; }
a:visited { color: #000000;text-decoration:none;}
a:hover { color: #800000;text-decoration:none; }
a:active { color: #000000;text-decoration:none; }
/************************************** ▲ リンクの色 ▲ */

の中に入れてみたりもしたのですがダメでした
解決法を教えていただけると幸いです

[ 2009/08/20 17:15 ] [ 編集 ]

[ 5548 ] > ななしさん

原因を見つけるためにURLを教えてください。

[ 2009/08/20 18:13 ] [ 編集 ]

[ 5560 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/08/20 22:16 ] [ 編集 ]

[ 5565 ] > ななしさん

鍵コメを貰いましたがURLが間違っています。
管理画面のURLではなく、ブログのURLを教えてください。

[ 2009/08/20 23:25 ] [ 編集 ]

[ 5700 ]

申し訳ありません
こちらです

http://tanakaramochibota.blog63.fc2.com/

[ 2009/08/28 16:54 ] [ 編集 ]

[ 5702 ]

スタイルシートの末尾に以下を加えてください。

.article a:link { color: #000000;text-decoration:none; }
.article a:visited { color: #000000;text-decoration:none; }
.article a:hover { color: #800000;text-decoration:none; }
.article a:active { color: #000000; text-decoration:none;}

色等はお好みに合わせて設定してください。

[ 2009/08/28 17:28 ] [ 編集 ]

[ 8068 ]

[ 2010/01/27 21:06 ] [ 編集 ]

[ 8547 ]

スタンダートのテンプレートを使わせてもらっています。
質問なのですが、記事内の指定した文字を全て色変更するにはどうすればいいでしょうか？
例えば「おはよう」と指定した場合、記事内の「おはよう」という文字すべてに色が付くようにしたいです。

[ 2010/02/25 04:50 ] [ 編集 ]

[ 8565 ] 凶さん

ユーザータグの利用ではなくてこのようなことを実現するにはjavascriptを利用するしかないでしょう。試したわけではないですが、検索して調べてみたところ以下が参考になります。

jQuery 指定した文字列をハイライトするプラグイン
http://d.hatena.ne.jp/deeeki/20090319/jqueryhighlight

[ 2010/02/27 16:37 ] [ 編集 ]

[ 8856 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2011/09/18 11:26 ] [ 編集 ]

[ 9084 ]

僕は何かをDLしてもらうときにそれが目立つようにしたいんですけど

【download】こんな感じにしたいんですが

[ 2012/03/18 09:31 ] [ 編集 ]

[ 9085 ]

すいません補足です。

リンクを張ったときの文字全てに適用したいんですが

[ 2012/03/18 09:32 ] [ 編集 ]

[ 9092 ] > daikiさん

こちらの記事を参考にしてください。

リンクのスタイルを変える - FC2ブログのテンプレート工房
http://10plate.blog44.fc2.com/blog-entry-23.html