スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【スマホ版】記事・追記内のリンク色を変える方法

【simple_photo】のリンク色が基本の文字色と同じなので、記事・追記内にリンクを貼った場合わかりにくくなっています(^^;)
ちょうど気になっていたところ、コメントで質問いただきましたので、カスタマイズ方法を説明します。
当ブログが公開しているスマートフォン版テンプレート全て共通のカスタマイズ方法になります。
※バージョンによって一部変更点がありますのでご確認ください。

変更方法
・ご使用のテンプレートの『スタイルシート編集』で、スタイルシートに下記(.section~}まで)を追加してください。
※場所はどこでもかまいませんが、「記事本文・追記」という部分を探して追加していただくと整理しやすいと思います。

未訪問・訪問済みで色を変えたい場合は個別に指定します。
未訪問のリンク色
.section .entry_body a:link,
.section .entry_more a:link {
color:ご希望の色コード;
}

訪問済みのリンク色
.section .entry_body a:visited,
.section .entry_more a:visited {
color:ご希望の色コード;
}

ポイント時のリンク色
.section .entry_body a:hover,
.section .entry_more a:hover {
color:ご希望の色コード;
}

選択中のリンク色
.section .entry_body a:active,
.section .entry_more a:active {
color:ご希望の色コード;
}


全て同じ色でいい場合は下記のみでOKです。
.section .entry_body a,
.section .entry_more a {
color:ご希望の色コード;
}

赤字部分を使いたい色に置き換えてからスタイルシートに追加してください。
色指定の方法は下記サイト様等を参考にしてください。
スタイルシート[CSS]/CSSの基本/CSSの色指定 - TAG index Webサイト

※追記のリンク色が変わらない場合はentry_moreをentory_moreにしてください。
旧バージョンは綴りが間違っていました・・・


{}内にプロパティを追加すると、下線を引いたり太字にしたりさまざまなスタイルに変更できます。


下線を引く
text-decoration: underline;
太字にする
font-weight: bold;

その他使えるスタイルシートのプロパティはいろいろありますので試してみてください。
スタイルシート[CSS]/リンク - TAG index Webサイト
スタイルシート[CSS]/テキスト・フォント - TAG index Webサイト
スポンサーサイト

Theme : FC2ブログ共有テンプレート
Genre : ブログ

コメントの投稿

非公開コメント

ありがとうございます!

先日、この件について質問させて頂いた者です。

さっそくカスタマイズしてみたところ、
上手く反映されました!!
凄く嬉しいです!

お忙しいところ本当にありがとうございました!
とても感謝しています。

質問失礼します

こちらのテンプレートを使用させていただいています。
とても見やすくて、画像表示も綺麗でしとてもありがたいです。

ただ、追記に画像を付けると記事の追記部分が隠れずいつも表示されている状態になっています。タグは一切弄っていません。アップデートもしました。
それでも変わらず表示されたままなのです。

画像付きの追記部分を隠しておくにはどうしたらいいでしょうか。

Re: ありがとうございます!

ぴょんさん

無事カスタマイズしていただけたようで安心しました(^^)
こちらこそご愛用いただきありがとうございますm(__)m

Re: 質問失礼します

名無しさん

コメント&ご愛用いただきありがとうございます。
追記に画像をつけると折りたたまれないとのことですが、当方のiPhoneとAndroidの標準ブラウザで確認したところ、画像があっても折りたたまれております。
画像はFC2にアップロードした画像でしょうか?どのようなものでも画像があると必ず追記が表示されたままになるのでしょうか?
可能であればブログを拝見したいのですが、それは無理でも環境をお教えいただけると対処しやすいかと思います。
お手数ですがよろしくお願いいたします。

二個目の質問させていただいた者です

お返事ありがとうございます。
画像だらけでお見苦しいですがこちらが当方のブログになります。ご確認お願いします。
http://0rder.blog.fc2.com

自分(iPhone)でも再度確認しましたが、やはり画像があると追記が表示されたままになってしまうようです…。文章だけの追記はちゃんと閉じられて隠れています。
再度確認して一つわかったのが、追記に画像を入れると、画像を入れた所の部分以降が隠れなくなるようです。

私のiPhoneの表示が悪いだけなら良いのですが…、追記が隠れていないと恥ずかしいものもあるのでできればご確認お願いします。

お忙しい中失礼しました。

Re: 二個目の質問させていただいた者です

0rderさん

詳細のご報告ありがとうございます。
早速ブログ拝見させていただき、追記が折りたたまれないのを確認いたしました。
記事に貼ってある画像が<div>タグで囲まれているということが原因のようなのですが、通常の管理画面から書き込んだ場合は<div>タグで囲まれなかったので、エディタの問題ではないかと思います。
<div>タグを消していただければ一番いいのですが毎回では大変だと思いますので、下記をお試しいただければと思います。

『simple_photoのHTML編集』で
58行目「//追記折りたたみ」の下

$(".morelink").click(
function () {
$(this).nextAll("p:first").slideToggle("fast");
$(this).parent().children(".morelink").toggle();
})


上記の青字5行を下記の赤字6行に書き換えてください。

$("div.fc2_footer").appendTo(".entry_more");
$(".morelink").click(
function () {
$(this).nextAll("div:first").slideToggle("fast");
$(this).parent().children(".morelink").toggle();
})



252行目

<p style="display:none"><%topentry_more></p>

上記の青字1行を下記の赤字1行に書き換えてください。

<div style="display:none"><%topentry_more></div>


この2箇所を書き換えていただければ今までの分も折りたたまれるようになると思いますので、お手数ですがお試しくださいm(__)m
根本的な解決方法がわからずあまり確認もできないので、不具合ありましたらまたご連絡いただけると幸いです。

ありがとうございます

貼っていただいたタグを差し替えて、無事に追記が隠れるようになりました。本当にありがとうございます。

ながながとお手間をかけさせ申し訳ありませんでした。ありがとうございました。

承認待ちコメント

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

承認待ちコメント

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

承認待ちコメント

このコメントは管理者の承認待ちです
プロフィール

sasha

Author:sasha

テンプレート確認環境

*PC版

Windows
OS:Windows7
ブラウザ:IE・Firefox・Safari・Opera・GoogleChrome 最新バージョン

Mac
OS:MacOSX 10.7.2 Lion
ブラウザ:Safari・Firefox・GoogleChrome

*スマートフォン版

iPhone4S
OS:iOS5.0.1
ブラウザ:Safari

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
タグ

simple_photo (5)
natural_linen (1)
simple_white (1)
retro_pop (1)

検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。