スポンサーサイト

上記の広告は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 : ブログ

【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】任意の画像をサムネイル表示する方法

スマートフォン版テンプレート【simple_photo】の記事一覧で表示されるサムネイルを、好きな画像に変更できます。

sp1.png
↑記事一覧ページ(トップページ等)
記事中の絵文字がサムネイルになってしまっています。


sp2.png
↑記事個別ページ
絵文字より下の画像をサムネイル表示させます。


変更方法
・ブログ管理ページ→『新しく記事を書く』または『過去記事の管理』から記事の編集画面を開く
・『本文の編集』欄のサムネイルにしたい画像のimgタグに[ id="simple_photo_img"]を追加

↑の画像の例の場合、2番目に出てくるimgタグに[ id="simple_photo_img"]を追加します。

変更前
こんにちは<img src="絵文字のURL" class="emoji" style="border:none;" /> ←のように絵文字が記事の最初にある場合や複数の画像がある場合、指定した画像をサムネイルにします。

<a href="サムネイルにしたい画像のURL" target="_blank"><img src="サムネイルにしたい画像のURL" alt="" border="0" width="640" height="425" /></a>

変更後
こんにちは<img src="絵文字のURL" class="emoji" style="border:none;" /> ←のように絵文字が記事の最初にある場合や複数の画像がある場合、指定した画像をサムネイルにします。

<a href="サムネイルにしたい画像のURL" target="_blank"><img id="simple_photo_img" src="サムネイルにしたい画像のURL" alt="" border="0" width="640" height="425" /></a>


sp1.png
サムネイルが変更されました。


ご質問や不具合報告、リクエスト等お気軽にコメントください♪

Tag : simple_photo

プロフィール

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。