人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【ちょっとしたお礼あり】はてなダイアリーで「続きを読む」を画像にする方法を教えてください
題名の通りです。
BAの方にはちょっとしたお礼を差し上げます。
回答よろしくお願いします。

●質問者: _
●カテゴリ:はてなの使い方
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● こっば

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つ続けた


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


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

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

2 ● ぽけっとしすてむ
ベストアンサー

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:psneさんのダイアリーに☆を入れさせていただきます!!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ