【ちょっとしたお礼あり】はてなダイアリーで「続きを読む」を画像にする方法を教えてください

題名の通りです。
BAの方にはちょっとしたお礼を差し上げます。
回答よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/02/17 12:01:36
  • 終了:2013/02/22 16:37:13

ベストアンサー

id:psne No.2

ぽけっとしすてむ回答回数453ベストアンサー獲得回数2422013/02/17 14:37:42

seemoreに画像を置いて、aタグの文字を消しました。
環境に依存します。

.seemore {
background:url("画像URL") no-repeat;
}
.seemore a{
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}

サンプルは、自分のはてダでやってみました。(しばらくしたら戻します。)
ネタまとめ

はてなダイアリーの管理画面から、デザイン>デザイン編集>詳細と進み、スタイルシートに追記してください。

追記:

「うごキャラ日記」のように、「続きを読む」という文字を画像化したいということです。

うごキャラ日記のCSSは以下の様になっています。

p.seemore{
	font-size: 0em;
	text-indent: -5000px;
position:relative; left:100px;
}
p.seemore a {
 display:block;
 width:200px;
 height:30px;
 border:0;
 background-color:transparent;
 background-image:url('通常の画像URL');
 background-position:top;
}
p.seemore a:hover {
 width:200px;
 height:30px;
 background-color:transparent;
 background-image:url('マウスが乗った時の画像URL');
 background-position:bottom;
}
id:dorafujico

ありがとうございました!
うまく画像を設置することができました!
ちょっとしたお礼として、id:psneさんのダイアリーに☆を入れさせていただきます!!

2013/02/22 17:16:25

その他の回答(1件)

id:yk1997kobba No.1

こっば回答回数2400ベストアンサー獲得回数2122013/02/17 13:02:27

http://hatenadiary.g.hatena.ne.jp/keyword/%E8%A6%8B%E5%87%BA%E3%81%97%E6%AF%8E%E3%81%AB%E3%80%8C%E7%B6%9A%E3%81%8D%E3%82%92%E8%AA%AD%E3%82%80%E3%80%8D%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%EF%BC%88%E7%B6%9A%E3%81%8D%E3%82%92%E8%AA%AD%E3%82%80%E8%A8%98%E6%B3%95%EF%BC%89

見出し毎に「続きを読む」を表示する(続きを読む記法)

1日の日記が長い場合などに「続きを読む」記法を使うと、日記一覧表示(http://d.hatena.ne.jp/ユーザー名/ や http://d.hatena.ne.jp/ユーザー名/?of=5 など)時に、日記中の一見出しの内容を途中で区切り、日別や記事別の詳細ページでのみその後の内容を表示させることができます。
※続きを読む記法はプロフィールページではご利用いただけません。

日記文中で、半角イコール「=」を4つ続けた


だけの行を記述すると、最新の日記の一覧表示時などでは「続きを読む」というリンクが表示され、クリックすることでその後の文章が表示されます。

http://hatenadiary.g.hatena.ne.jp/keyword/%E3%81%9D%E3%81%AE%E6%97%A5%E5%85%A8%E4%BD%93%E3%81%AB%E3%80%8C%E7%B6%9A%E3%81%8D%E3%82%92%E8%AA%AD%E3%82%80%E3%80%8D%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%EF%BC%88%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E7%B6%9A%E3%81%8D%E3%82%92%E8%AA%AD%E3%82%80%E8%A8%98%E6%B3%95%EF%BC%89

その日全体に「続きを読む」を表示する(スーパー続きを読む記法)

「スーパー続きを読む」記法では、見出しを含めたその日の記事全てを「続きを読む」で省略します。日記文中で、半角イコール「=」を5つ続けた


だけの行を記述すると、日記の一覧表示時などでは「続きを読む」
と表示され、「続きを読む」をクリックすると見出しを含めたその後の文章が表示されます。

id:yk1997kobba

間違えた気がします。
記法は知っているが、「続きを読む」というあの文字を画像化したい(その画像をクリックすると続きの文章が現れる)ということですか?

2013/02/17 13:06:48
id:dorafujico

はい、「うごキャラ日記」のように、「続きを読む」という文字を画像化したいということです。
わかりにくくてすみません(汗)

2013/02/17 13:29:12
id:psne No.2

ぽけっとしすてむ回答回数453ベストアンサー獲得回数2422013/02/17 14:37:42ここでベストアンサー

seemoreに画像を置いて、aタグの文字を消しました。
環境に依存します。

.seemore {
background:url("画像URL") no-repeat;
}
.seemore a{
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}

サンプルは、自分のはてダでやってみました。(しばらくしたら戻します。)
ネタまとめ

はてなダイアリーの管理画面から、デザイン>デザイン編集>詳細と進み、スタイルシートに追記してください。

追記:

「うごキャラ日記」のように、「続きを読む」という文字を画像化したいということです。

うごキャラ日記のCSSは以下の様になっています。

p.seemore{
	font-size: 0em;
	text-indent: -5000px;
position:relative; left:100px;
}
p.seemore a {
 display:block;
 width:200px;
 height:30px;
 border:0;
 background-color:transparent;
 background-image:url('通常の画像URL');
 background-position:top;
}
p.seemore a:hover {
 width:200px;
 height:30px;
 background-color:transparent;
 background-image:url('マウスが乗った時の画像URL');
 background-position:bottom;
}
id:dorafujico

ありがとうございました!
うまく画像を設置することができました!
ちょっとしたお礼として、id:psneさんのダイアリーに☆を入れさせていただきます!!

2013/02/22 17:16:25

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません