MY CSS DESIGN

最新記事のRSS

FC2ブログのテンプレート配布・作成日誌。

≪ PREV | PAGE-SELECT | NEXT ≫

≫ EDIT

2007.06.23 Sat

追記の展開してみる？

少し前にコメントでページを移動せずに追記の展開をしたい。という質問がありました。今回はその追記の展開をしてみようと思う。スクリプトは共有テンプレート一覧の管理者でお馴染みのビスコさんのを使用する事にしました。

さて、まず上記リンク先に飛んで指示通りにスクリプトを挿入してください。挿入した時点で動作するようになるので動かなければ適切な場所に挿入されていない事になります。動作確認が済んだら当テンプレート用に少し改造します。<!--more_link-->と<!--/more_link-->の間に挿入するスクリプトを下記のように変更くださいませ。

<!--BisEntryIfExtended-->
<p class="entry_more" id="varP<%topentry_no>">
<a href="<%topentry_link>#no<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#no<%topentry_no>');return false;">≫ Read More</a>
</p>

<div id="varXYZ<%topentry_no>" style="display: none">

<div class="entry_body"><%topentry_more></div>

<p class="entry_more"><a href="#no<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">▲ Close</a></p>
</div>
<!--/BisEntryIfExtended-->

これでページを移動せずに続きを読むを展開可能になります。スクリプトの挿入場所さえ間違わなければ普通に動作するので焦らずゆっくりがんばってみてください。当テンプレート全てに対応していると思いますが不具合などあれば報告お願いします。

※テンプレートは最新のを使用してください。古いテンプレートの動作は不明です。
※作者であるビスコさんに質問を持ち込む行為はできるだけ控えてください。

■ 関連リンク


こんな感じになるんだぜ。

なかなか便利かも。

| カスタマイズ | Permalink | comments:28 | trackbacks:0 | TOP↑

COMMENT

★ Zeroさん
はい。またどうぞ。
ブログがんばってください。

| ひよこ＠管理人 | 2008/08/14 19:41 | URL | ≫ EDIT

ひよこさん、ありがとうございます！
痒いところが全て解決しました。
ご丁寧にありがとうございました。

| Zero | 2008/08/13 12:37 | URL |

★ Zeroさん
以前書いたタグの中にある#moreを外せば出来ますがアンカー（#○○）外すと記事タイトルをクリックしたときと同じようにページの先頭に飛んでしまいますよ？

SUBJECTの外し方はテンプレートHTML内をSUBJECTで検索して該当する部分を削除すればおｋです。コメント投稿と編集用のがあるので２箇所削る事になります。

| ひよこ＠管理人 | 2008/08/13 00:55 | URL | ≫ EDIT

すいません。更に質問なんですが、
このブログのようにコメント欄から題名（Subject）を消す方法も教えていただけますか？

| Zero | 2008/08/12 15:30 | URL |

>>ひよこさん
返信ありがとうございます。
別ページへの切り替えの際に、URLの末尾、.htmlの後ろに#(エントリー番号)がついてしまうのですが、それを.htmlで終わらせるにはどうしたら良いのでしょうか？

| Zero | 2008/08/12 10:16 | URL |

★ Zeroさん　はじめまして。
追記の展開を解除したいって事ですよね？
単純に</head>直上のスクリプトを外せば展開はされなくなります。ページを開いた時に追記部分まで読み込むのがウザイとお思いの場合は下記にしたがってHTMLを変更してください。

<!-- 続きを読む -->中略<!-- 続きを読む END -->を下記のように書き替えてください。

<!-- 続きを読む -->
<!--more_link-->
<p class="entry_more"> <a href="<%topentry_link>#more">≫ Read More</a> </p>
<!--/more_link-->
<!--more-->
<hr size="1" /><br />
<a name="more" id="more"></a>
<div class="entry_body"><%topentry_more></div>
<!--/more-->
<!-- 続きを読む END -->

| ひよこ＠管理人 | 2008/08/11 21:15 | URL | ≫ EDIT

はじめまして。
ひよこさんのテンプレート非常に好みでしたので、多少設定の変更をしつつ使わせて頂いています。

質問があるのですが、この追記の展開を逆にページ切り替えで行うことはできますか？

| Zero | 2008/08/11 15:09 | URL |

★ Samuraiさん
ほんとですね。もしかしたらテンプレートが古くて対応していないのかも知れません。
いちど最新のテンプレートをダウンロードして試してみてください。
ちなみに最新のテンプレートは既に追記の展開スクリプトを組込んであります。
面倒かと思いますがもう一度ご報告くださいませ

※現状FC2ブログは同ネームのテンプレートはダウンロードできないので今あるテンプレの名前を変更してからならダウンロード可能になります。

| ひよこ＠管理人 | 2008/06/24 00:10 | URL | ≫ EDIT

ブログ内検索で記事を表示した場合
≫ Read More
記事の続きを読みますか？表示が有りますが、　↓
http://mmasamurai.blog100.fc2.com/?q=%C3%CF%BF%CC%B1%C0
【岩手・宮城内陸地震】 発生前に出現した地震雲

記事エントリーから表示した場合
≫ Read More
記事の続きを読みますか？の部分が表示されないようです。　↓
http://mmasamurai.blog100.fc2.com/blog-entry-518.html
【岩手・宮城内陸地震】 発生前に出現した地震雲


http://hiyokokun.blog2.fc2.com/?q=%A2%E4+Read+More
Search： 追記の展開してみる？

http://hiyokokun.blog2.fc2.com/blog-entry-524.html
記事エントリー： 追記の展開してみる？

ひよこさんのBlogでは
記事の続きが開いて表示されるようです。

| Samurai | 2008/06/23 22:43 | URL | ≫ EDIT

★ 漂さん
HTML・CSSの基本さえ覚えればいろんな事ができるようになるのでがんばってください。
嬉しいお言葉をありがとう。

| ひよこ＠管理人 | 2007/07/02 23:00 | URL | ≫ EDIT

返答ありがとうございます！
スクロールも好きですが、ひよこ様の作るデザインが好きなので、
HTMLを少し学んで自分なりにアレンジしてみようと思います。

| 漂 | 2007/07/02 21:56 | URL | ≫ EDIT

★ 漂さん
スクロール仕様のテンプレートなら共有にたくさんありますよ。ただスクロール仕様のテンプレート作製は難しいらしく共有にあるものでも各ブラウザでまともに表示されていないのが結構あるようなので注意が必要です。

| ひよこ＠管理人 | 2007/07/02 19:52 | URL | ≫ EDIT

初めまして。
テンプレート、使わせて頂いております。

本題なのですが、
TOP画像、プラグイン、背景を固定して、
記事のみスクロールするようにしたいのですが、
HTMLに関する知識が殆ど無いので方法が分かりません。
宜しければ教えて頂けないでしょうか。
というか、
それが可能かどうかすら分からない次第なのですが･･･

| 漂 | 2007/07/02 13:17 | URL | ≫ EDIT

★ まりもっこさん
おっできましたか。おめでとう
素敵なブログにしてください。

| ひよこ＠管理人 | 2007/07/01 15:54 | URL | ≫ EDIT

ありがとうございました<(_ _*)><(_ _*)>
おかげで、行間や文字サイズの変更が出来ました。

ご迷惑おかけいたしました。

本当にありがとうございましたっ<(_ _*)><(_ _*)>

| まりもっこ | 2007/06/30 19:49 | URL | ≫ EDIT

★ まりもっこさん
これでわからなければ諦めてください＞＜；

■ サイドメニューの文字サイズ変更。
#navi { のfont-sizeを変更。

■ 記事の行間変更
.entry_body {　のline-heightを変更。

■ サイドメニューの行間変更
リストの行間なら.navi-contents ul {　のline-heightを変更。
それ以外なら.navi-contents { に新たにline-heightを記述してください。

■ サイドメニュー等の背景画像
これは説明が大変なので、CSSをある程度理解できるようになってから当ブログのCSSでも覗いて参考にしてください。

| ひよこ＠管理人 | 2007/06/30 18:49 | URL | ≫ EDIT

そうですか・・・。
でもどうしてもこちらのテンプレートを使用させていただきたいので、
行間の調整のみ、どこに

line-height : ○%

を記載したらいいのかだけでも教えていただけないでしょうか。
あとは、自分で調べてなんとか調整してみますので。

本当に申し訳ありませんが、よろしくお願い致します<(_ _*)>

| まりもっこ | 2007/06/30 18:17 | URL |

★ まりもっこさん　はじめまして
初心者でそこまでカスタマイズするのは大変なので、まりもっこさんが思い描くテンプレートを共有から探した方が早いと思われます。

| ひよこ＠管理人 | 2007/06/30 17:43 | URL | ≫ EDIT

はじめまして。
ついさきほどこちらのテンプレートをDLさせていただいたのですが、
初心者なので、何をどう弄っていいのかわからず、
コメントさせていただきました<(_ _*)>

本文・コメント・サイドメニューの行間調整はどこで行ったらいいのでしょうか。
line-height : ○%
というのを記載すればいいというのは、調べてわかったのですが、
この表記をどの位置に記載すればいいのかわかりません･･･（涙）


また、サイドメニューの文字サイズのみを小さくすることは可能でしょうか。

あと、こちらのブログのようにサイドメニューのタイトルやコメントやトラックバックのタイトル（？）を画像にするのは、どこを変更したらいいのでしょうか。

質問ばかりで申し訳ありませんが、
お返事いただけると幸いです。

| まりもっこ | 2007/06/30 11:56 | URL |

ぴよこは、ここに変更しないです。

| BlogPetのぴよこ | 2007/06/29 10:58 | URL |

★ 手作りｍさん　はじめまして
テンプレートご使用ありがとう。上手にできてますよ。
ブログしてればHTMLはなんとなくわかってくると思うのでがんばってください。

| ひよこ＠管理人 | 2007/06/28 22:11 | URL | ≫ EDIT

★ Marshaさん　ども。
はいはい。今更ながらカスタマイズ方法を書かせていただきました。
これって何気に便利ですよね。

| ひよこ＠管理人 | 2007/06/28 22:07 | URL | ≫ EDIT

こんばんは。テンプレお借りしました。
自分の写真を入れることが出来喜んでいます。
なかなか解らないことが多くて。またよろしく。

| 手作りｍ | 2007/06/28 22:01 | URL |

テンプレート使わせて頂いてるMarshaです。

おぉ！！追記の折りたたみが出来るんだ！！
って事で、早速この技を使わせて頂きました^^
前からやりたいなぁって思ってたんで、嬉しいです。
ありがとうございました〜。

| Marsha | 2007/06/28 03:31 | URL | ≫ EDIT

★ ユイさん
たいへんよくできました。

まだまだ改造の余地はあるみたいだね。
自分からはあまり改造しようと思わないから要望・質問がなければ動きませんがね。ｗ

| ひよこ＠管理人 | 2007/06/25 22:57 | URL | ≫ EDIT

ハイ！記事の先頭に戻りました♪

これでスッキリ読みやすくなったかな
って　そんな長文かかないけど(笑)

まだまだ改造したりするとこあるんだねぇ
コピペするだけで申し訳ないみたいだｗ
どうもありがとう！愛されときます♪

| ユイ | 2007/06/25 21:36 | URL | ≫ EDIT

★ ユイさん　おはよ
あああ油断した！戻るアンカーがあったんだ。言われてみれば記事頭に戻らないと追記に長文でもあった場合、閉めたときに下手すれば1〜3記事分上がっちゃうよな・・・。って言うかこれが仕様だと完全に思い込んでたから言われなかったら絶対に気付かなかったよ＾＾；

このスクリプトにある記事の頭に飛ぶアンカーはid="<%topentry_no>"なのですが、うちのテンプレートの記事の頭に飛ぶアンカーはid="no<%topentry_no>"なんだよね。この違いで飛ばないようになってた。

って事で修正しておきました。愛してます。

| ひよこ＠管理人 | 2007/06/25 07:20 | URL | ≫ EDIT

スクリプト入れてちゃんと表示されました。
だから不具合ではなくて質問です。

ここの『甘栗むいちゃいました』で試すと　
Closeで閉じた時に戻る場所が
前の日の『人間ってそんなものね』の記事になるよ。

自分のとこでも　閉じたら前日の記事に戻るから同じだね。

ビスコさんのを読んでid="<%topentry_no>"を入れるのかなと思うけど…どうなのかな？
入れる場所が分からなかったけど(汗)

閉じるだけのことだし　大差ないのかなぁ
もし閉じてその日の記事に戻れるなら　それがいいなとｗ
動作するのは分かったから今はClose無しに戻してます。

| ユイ | 2007/06/25 02:37 | URL | ≫ EDIT













非公開コメント

現在yournet.ne.jpを書き込み規制しております。ご用の方は面倒ですがメールでお願いします。

TRACKBACK URL

言及リンクの無いトラックバックは受け付けておりません。

http://hiyokokun.blog2.fc2.com/tb.php/524-e3b17ee7

TRACKBACK

≪ PREV | PAGE-SELECT | NEXT ≫