fc2ブログ

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

【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 : ブログ

【simple_photo】一覧表示を左右どちらかに揃える方法

スマートフォン版テンプレート【simple_photo】は、トップページやカテゴリ一覧などで記事が左右交互に表示されます。
これを揃えたいとの声が多かったので、カスタマイズ方法を説明します。
ver2.0での説明になりますので、以前のバージョンの方は記事後半の作業も行ってください。
【simple_photo】のバージョンはテンプレートのスタイルシートの最終行で確認してください。


変更箇所は『simple_photoのスタイルシート編集』329行目辺り
/* 左右交互に表示する設定 */

#entry_list li:nth-child(even) .entry {
padding:20px 15px 20px 100px;
text-align:right;
}

#entry_list li:nth-child(even) .entry div {
left:15px;
}

/* --ここまで-- */

こちらをご希望のスタイルのコードに書き換えてください。


画像右配置・文字左寄せ
r-l.png

該当箇所を削除


画像右配置・文字右寄せ
rr.png

/* 左右交互に表示する設定 */

#entry_list li .entry {
text-align:right;
}

/* --ここまで-- */



画像左配置・文字右寄せ

l-r.png

/* 左右交互に表示する設定 */

#entry_list li .entry {
padding:20px 15px 20px 100px;
text-align:right;
}

#entry_list li .entry div {
left:15px;
}

/* --ここまで-- */



画像左配置・文字左寄せ
l-l.png

/* 左右交互に表示する設定 */

#entry_list li .entry {
padding:20px 15px 20px 100px;
}

#entry_list li .entry div {
left:15px;
}

/* --ここまで-- */



カスタマイズされていて以前のバージョンをそのまま使いたい方は、
#entry_list li a.odd {
display:block;
padding:20px 15px 20px 100px;
text-align:right;
}

#entry_list li .entry div.odd {
left:15px;
}

上記のような.oddのスタイルを削除した後、上で説明したスタイルを探し変更してみてください。
場所や内容が少し違いますのでテキストエディタなどで検索してみてくださいm(__)m

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

Tag : simple_photo

【simple_photo】サムネイル画像を指定する方法(ver2.0)

スマートフォン版テンプレート【simple_photo】ver2.0から、記事一覧で表示されるサムネイルを選べるオプションを追加しました。
公式テンプレートのサムネイルじゃ機能が足りない!という方は使ってみてくださいね。
【simple_photo】のバージョンはテンプレートのスタイルシートの最終行で確認してください。


【simple_photo】ver2.0でできること
・idを指定した好きな画像のサムネイル表示(参照)
・外部サイトのバナーなど、FC2にアップロードした以外の画像のサムネイル表示
・指定したファイル名の画像のサムネイル表示
・サムネイルにする画像の最小サイズ指定


以上のオプションは『simple_photoのHTML編集』66行目辺り

//サムネイル設定
$("#entry_list").getImage({
onlyFC2Image: true,
useFileName: false,
minWidth: 0,
minHeight: 0,
id: 'simple_photo_img',
fileName: 'spthumb_',
});

で設定します。
デフォルトではFC2からアップロードした画像を含む記事の一番上の画像がサムネイル表示されます。



onlyFC2Image: true,

FC2にアップロードした以外の画像をサムネイル表示するかどうかの設定です。
FC2ブログの仕様で、記事本文にFC2にアップロードした画像がある場合のみ『画像ありの記事』と判断されるようです。
外部サイトのバナーなどのタグを手動で貼っただけの記事は、サムネイル画像が取得されません。
追記にのみ画像をアップした際も取得されないようです。
そういった場合もサムネイルとして取得したい場合はこれを

onlyFC2Image: false,

にしてください。



useFileName: false,

ファイル名が[spthumb_]で始まる画像をサムネイルにするかどうかの設定です。
複数ある場合は一番最初に出てきた[spthumb_]で始まる画像をサムネイルにします。
使用する場合は

useFileName: true,

にしてください。



minWidth: 0,
minHeight: 0,

サムネイルにする画像の最小サイズをピクセル単位で指定できます。
1pxのスペーサーや小さな絵文字などをスキップすることができます。
指定は数字のみで、1pxの画像を表示したくない場合は

minWidth: 2,
minHeight: 2,

のようにしてください。
ただし最小サイズを指定すると表示に時間がかかる場合があります。
サイズの比較のために上から順に一枚ずつ画像を読み込むため、指定サイズより小さい画像が大量にある場合は推奨できません。


指定例
1019sp3.png

minWidth: 0,
minHeight: 0,
※指定なし
①が表示されます

minWidth: 100,
minHeight: 0,
③が表示されます

minWidth: 100,
minHeight: 100,
④が表示されます


サムネイル選択の優先順位は

▼FC2以外の画像を表示するか
▼id
▼ファイル名
▼最小サイズ

です。



id: 'simple_photo_img',
fileName: 'spthumb_',

変更するとid名やファイル名を好きな名前にできます。
デフォルト状態で説明していますので、必要がなければそのままお使いください。



長々説明してしまいましたが、複雑な機能はいらないって方はデフォルトで使うのが一番表示も速いと思います。
公式テンプレートのサムネイル表示はたぶんもっと速いです(^^;)
自分が欲しい機能を詰め込んだらややこしくなってしまいましたが、お役に立てれば幸いです。

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

Tag : simple_photo

【simple_photo】修正版 ver2.0公開

コメント欄や拍手から頂いた不具合を修正し、カスタマイズしやすいよう機能を追加したバージョン2.0を公開しました。

tshop33_simple_photov2.gif


変更点
・追記にアップした画像の幅が記事の幅より大きい場合、記事の幅におさまらない不具合を修正
・追記・トラックバックの折りたたみを開閉できるように変更(前バージョンは開くのみ)
・サムネイルにする画像の最小サイズ・ファイル名などを指定できるように変更(別記事参照)
・一覧表示の左寄せ・右寄せが簡単にできるようコードを変更(別記事参照)
・その他不要なコードの削除や綴り間違いの修正など
10191.png10192.png


内部的にはいろいろ変えているのですが、デザインや機能に大きな変更がないため更新で公開しています。
今後カスタマイズの説明などはこのバージョンメインで行いますので、すでに【simple_photo】をご利用の方はバージョンアップをお願いしますm(__)m

現在お使いのsimple_photoのスタイルシートの最後が
/* simple_photo v1.1 (C)2011 tshop33.blog.fc2.com */
となっている場合、または赤字部分がv1.0場合が対象です。

【simple_photo】という名前のテンプレートがすでにあるとダウンロードできないため、現在お使いのsimple_photoの名前を変更してダウンロードしてください。
古い分も残しておくことをおすすめします。

ダウンロードしたsimple_photoのスタイルシートの最後が
/* simple_photo v2.0 (C)2013 tshop33.blog.fc2.com */
となっていればOKです。


現在ご自分でカスタマイズされていて不具合がない場合はそのままお使いください。
特にサムネイル取得周りはかなり変更しているので、同じようにカスタマイズしようと思っても難しいかもしれません・・・。

変更の詳細やカスタマイズ方法は各記事でご確認ください。
【simple_photo】サムネイル画像を指定する方法(ver2.0)
【simple_photo】一覧表示を左右どちらかに揃える方法

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

Tag : simple_photo

お礼とお詫び・お知らせ

当ブログへのご訪問・テンプレートのご利用ありがとうございます。
私情により長い間放置してしまい大変申し訳ありません。

おかげさまでsimple_photoが2012年のFC2テンプレートコンテストにて特別賞を受賞し、2013年10月15日現在総合DL1位という順位で、とても嬉しく思っています。

コメントもたくさんいただき、本当にありがとうございます。
返信できず大変申し訳ありません。
1年以上もコメントを返信していない状況を続けてしまいましたので、 自己解決している方も多いとは思いますが、全て返信させていただきました。
なお、非公開コメントも内容を伏せてブログ上で返信させていただきました。
ご了承ください。
お礼とお詫びの言葉は伝えきれないので省略させていただきましたが、感謝の気持ちでいっぱいです。

カスタマイズについてなど長くなる内容は、新しく記事にさせていただきます。
もうしばらくお待ちください。


あまりの更新のできなさに閉鎖しようかとも思いましたが、少しずつでも制作し続けられればと思います。
これからも末永くご愛用よろしくお願いいたします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