KaRaKuRy

アクセスカウンタ

zoom RSS 「続きを読む」を画像ボタンに替える方法

<<   作成日時 : 2008/02/17 14:59   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 2 / トラックバック 2 / コメント 6

トップページの新着記事抜粋欄のほか、トラックバック欄の「続きを読む」も画像になります。

使いたいボタンの画像をアップロードしてから、CSS編集で下の設定を追加してください。
書き込むところはCSS編集画面の、どこでもわかりやすいところ(一番下とか)でOKです。
ただし2008/9/1の記事「『続きを読む』の文字を書き換える方法」を先に試された方は、下のほうにある説明を読んでから作業にあたってください。

.more{
display:block;
overflow:hidden;
width:60px;
height:11px;
background:url(画像の場所) no-repeat left top;
}

.more a{
display:block;
font-size:0px;
letter-spacing:-2px;
text-align:right;
width:300px;
height:11px;
}

widthの数字「60」は、画像の横幅です。
heightの数字「11」は画像の高さです。
画像の場所http://userdisk.webry.biglobe.ne.jp/〜で始まる、画像のURLです。
それぞれご自分の画像にあわせて書き換えてください。


2008/9/1の記事「『続きを読む』の文字を書き換える方法」を先に試された方へ
文字の書き換えを試したことのあるブログさんは、そのとき既に「.more a」の設定項目を作っています。
.more aの{ } の中にある、visibility:hidden; の行を削除してから、上の .more a{ }の中身に書き換えてください。
visibility:hidden; を残したままだとリンクが効きませんのでご注意ください。
なお、フリースペース内のソースは削除してもしなくても(文字はみえなくなるので)表示に関係ありませんが、削除したほうがページの読み込み完了は早くなります。


当ブログで使用している「read more」の画像は、
A Trial Product's 素材置き場 さんからいただきました。

位置あわせ用の追加記事を書いたよ。→「続きを読む」画像ボタンの位置を右寄せにする

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 2
なるほど(納得、参考になった、ヘー)
ナイス

トラックバック(2件)

タイトル (本文) ブログ名/日時
「続きを読む」の文字を書き換える方法
CSS編集で画像ボタンに替える方法については、ずいぶん前に記事にしているのですが、要望の多い「文字そのものを書き換える」ものをやっと作ってみました。 CSS編集だけでは書き換えることはできませんので、Javascript併用です。 ...続きを見る
KaRaKuRy
2008/09/01 10:59
「続きを読む」を画像ボタンに、変更する。
「基本表示項目設定」にて、記事本文を概要にチェックしている時に、表示される 「続きを読む」をテキストから画像ボタンに、変更するカスタマイズです。 ...続きを見る
Gift from the Sea
2009/06/06 09:44

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(6件)

内 容 ニックネーム/日時
本当にド素人の質問で申し訳ないです。画像ではなく「続きを読む」という文言を換えることはできるのでしょうか?
たま
URL
2008/03/10 16:00
できない…といってもいいかなぁ。
まず、CSS編集では、絶対にできないです。
javascriptなら、もしかしたら、できなくはないかもしれない…けど、簡単ではなさそうです。
ほんと、「続きを読む」の文字、自由に変えられるといいんですけどね。
ゆき
2008/03/10 22:21
いつか、簡単に出来るようになったら、アップして下さいね。
ありがとうございました。
たま
2008/03/11 11:33
トップページ、javascriptでごにょごにょしてみました。何となくそれっぽいのはできたような?
でも簡単ではないかも(設置説明するのが)。
もうちょい整理して、使いものになりそうだったらアップします。
ゆき
2008/03/11 16:07
こんにちは、ゆきさん
お世話になっています。

此方の記事と「続きを読む」画像ボタンの位置を右寄せにするを参考に、させて頂きました。

先ほど、合わせてトラックバックさせて
頂きました。ありがとうございます。

mituru
URL
2009/06/06 10:07
たびたびのご紹介、痛み入ります。
私がウェブリブログを使いはじめて、真っ先にいじったのがタイトル画像と、この「続きを読む」の画像置換です。
結構気になりますよね〜。
また何かありましたら、使ってやってください。
ゆき
2009/06/08 22:26

コメントする help

ニックネーム
URL(任意)
本 文

おもちゃ箱

Arcana Collection
詳細記事は→こちら
KaleidoRound
自分でつくれる万華鏡

記事をさがす

powered by Google
WWW KaRaKuRy
Neko

おもちゃ箱

【Hamster】
ちょたたたたっ。
詳細記事は→こちら
【Arcana Collection】
登録無しでもお試し戦闘ができるようになったよ。
詳細記事は→こちら
ブログ仲間s'新着記事tv 中継所
Powered By 画RSS

テーマ

「続きを読む」を画像ボタンに替える方法 KaRaKuRy/BIGLOBEウェブリブログ
文字サイズ:       閉じる