2006年08月14日
フリースペースを常にトップに設置する
今まで、2007/04/20の未来の日時で投稿して『yozoの気が向いたと記2.0』の読み方♪をブログのトップに設置していましたが、常にここのブログの最新記事が、この未来投稿の『yozoの気が向いたと記2.0』の読み方♪になってしまうので、未来投稿をやめて、ブログのトップに直接記入できるフリースペースを設置することにしました。
このカスタマイズは、BlogPetうさも初コメント投稿のコメントにて、お友達のグリーティングカードのモンビッケさんと、果報は寝て待て(-_☆)のPavlobaさんから、BlogPetのうさものコメント投稿が最新記事になるので、このままだとずっとこの未来投稿のトップ記事になってしまうというアドヴァイスをしてもらったのがきっかけとなりました。また、Pavlobaさんには、参考となるページ、FC2tyle-FC２ブログstyle-のbonkさんの記事トップページにだけ表示させたいを紹介していただきました。そこで知った『index_area』をテンプレート中で使える変数一覧で調べて、実例をFC2ブログ ユーザーフォーラムで検索しました。おかげ様でスムーズにフリースペースを作成できました。
また、同じくテンプレート中で使える変数一覧を参考に、『最新の記事紹介』もフリースペースに追加しました。
モンビッケさん、Pavlobaさん、bonkさん、ありがとうございました。m(_ _)m
フリースペースを常にトップに設置する FC2 only
- FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
- 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
- 「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
- [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにtopentryと入力して、検索してください。
- <!--topentry-->の直前に<!--index_area-->〜<!--/index_area-->を追加すれば、フリースペースの完成です。
- 必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
<!-- フリースペース -->
<!--index_area-->
<div class="freespace">
ここに記入します。
<div align="center"><h4><span style="color:#007495;">最新の記事紹介</span></h4></div><br />
<!-- エントリーリスト開始 -->
<ul><!--recent-->
<li><a href="<%recent_link>" title="<%recent_body>"><%recent_title><font size="1"> <%recent_month>/<%recent_day> <%recent_hour>:<%recent_minute>UP</font></a></li>
<!--/recent--></ul><!-- エントリーリスト終了 --></div>
<!--/index_area--><!-- フリースペース終了 -->
<!--topentry-->〜以下省略〜
※<!-- エントリーリスト開始 -->〜<!-- エントリーリスト終了 -->は、最新の記事紹介部分です。記事数は、[環境設定の変更]-[ブログの設定]の画面で、一番上の「記事の設定」の「最近の記事リストの表示数」で好みの数にしてください。
※変数の解説
<%recent_link> - URLを表示、
<%recent_body> - 本文の要約を表示
<%recent_title> - タイトルを表示
<%recent_year> - 年を表示
<%recent_month> - 月を表示
<%recent_day> - 日を表示
<%recent_hour> - 時を表示 - 「スタイルシートの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
- [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに.blogと入力して、検索してください。
- .blog {〜}の下に/* フリースペース */以下のコードを追加します。
- 必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「css_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪.blog {
〜内容省略〜
}
/* フリースペース*/
.freespace {
margin: 12px 10px 0px;
padding: 15px;
color: #444444;
font-size: 11px;
line-height: 140%;
background-color: #ffeebf;
border: 1px solid #666666;
}
※marginはtop 12pxをサイドバータイトルにあわせて調節してください。
※background-colorで背景色をお好みのものに変更してください。 - [プレビュー]で確認して、[更新]をクリックしましょう。
この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておくようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New DrecomRSSを使って他のブログ名／最新記事を表示する | Top | BlogPet「うさも」の背景紹介 夏休み Old≫
トラックバックURL
トラックバック
≫ INDEXを作る〜第十三段 070507 monday from よみびとしらず
ブログを開いた時に最初に表示されるページを目次にしたいと思いYOZOさんの「YOZOの気が向いたと記2.0」の2006年8月14日の記事“フリースペースを常にトップに設置する”を参考にして(素人のくせに！)いろいろ試して [Read More]
コメント
またまたすごいカスタマイズを〜〜！！
これまたブックマークしておかねば（笑
未来記事でなくてもこんなふうにできるなんて・・
考えた人はすごいですね。尊敬です。
読んだだけでやってのけちゃうyozoさんも凄いです。
σ(･ω･*)は・・・今日は一日背景ページと戦って・・・ｵﾛﾛｵﾛﾛ
まだ整理がつかない状態なんです(ﾉД`)･ﾟ･｡
なんでこーなるのぉ〜みたいな（笑
今日は夜更かしになっても頑張りたいと思いまっす(｡･ω･｡)ゞピッ♪
((((((((((っ･ω･)っ ﾌﾞｰﾝ
Posted by モンビッケ at 2006.08.14 22:58 | edit
コメント
＞またまたすごいカスタマイズを〜〜！！
＞これまたブックマークしておかねば（笑
あはは・・・ありがとーございまっす♪m(_ _)m
どうもいいアイデアでも、yozoがやるとイマイチですよね。
基礎研究ということで、みなさんにアイデアを提供でもいいかな♪(^○^)
＞未来記事でなくてもこんなふうにできるなんて・・
＞考えた人はすごいですね。尊敬です。
ブログをホームページのようにしているところで、よく使われていますね。
フリースペースということで、お知らせや新着情報を提供できますよね。
(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
＞σ(･ω･*)は・・・今日は一日背景ページと戦って・・・ｵﾛﾛｵﾛﾛ
＞まだ整理がつかない状態なんです(ﾉД`)･ﾟ･｡
あらら・・・大変ですよね。配布ページは文字化けも直ってましたね。
よかったですよ。(*^-ﾟ)vｨｪｨ♪
＞今日は夜更かしになっても頑張りたいと思いまっす(｡･ω･｡)ゞピッ♪
ふふふ・・・無茶だけはいないでくださいね。楽しくしなきゃね。
yozoものんびりカスタマイズしてますよ。マイペースですよね(*^-^)
Posted by モンビッケさんへ at 2006.08.14 23:15 | edit
コメント
うーん。。。yozo殿のブログは日々、進化！！
って感じですねー。
私も見習わなければ・・・
しかしその前にお引越しが先ですが（汗）
だんだんエキサイト以外のブログの方が増えてるのに
今はリンクが貼れない状態なので・・・
Posted by babar at 2006.08.15 00:35 | edit
コメント
＞うーん。。。yozo殿のブログは日々、進化！！って感じですねー。
ありがとーございまっす♪すこしずつですけど、自分も訪問してくださるみなさんにも、気楽で使い勝手のいい、ブログでありたいと思っています。
(ちょっといいカッコしちゃいました・・・(*v.v)｡ﾊｽﾞｲ｡｡｡｡ )
＞しかしその前にお引越しが先ですが（汗）だんだんエキサイト以外の
＞ブログの方が増えてるのに今はリンクが貼れない状態なので・・・
あはは・・・以前のyozoと同じですね。当時yozoもBlogPet関係のお友達は、エキサイト以外の方がほとんどでしたからね。お引越し考え中ですか？
もしもお引越しでしたら、いつでも応援しますからね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
Posted by ばばるさんへ at 2006.08.15 08:09 | edit
コメント
これいいねーーー♪未来投稿じゃなくて、表紙みたいにフリースペースが出来るんだねー♪
なるほど♪
来てみて、、、あ、、、変わったなぁー♪と思ったんだけど・・・。
さらに!!!すごいねーー♪
これはいつか是非やってみたいのでとっても参考になります♪
色々ブログの事詳しくなるからとってもうれしい♪
アリガトねー♪
Posted by enu at 2006.08.15 09:32 | edit
コメント
未来記事にならないように、カスタマイズされている。
とってもステキです☆ 便利ですね♪
ぼくのうたは…べつにトップを作らなくてもいいけれど…。
あっちの闇のブログは注意事項が必要だから、やりたいかも♪（＾ｗ＾＊
でも、あっちは…Ｌｉｖｅｄｏｏｒだから…うまく出来るかしら；（＞＜；
そうそう！アキラくんのきりぺたが、７７７Ｈｉｔになりました☆
日ごろ来て下さって、ありがとうございます♪
７７７はラッキーセブンですので、特別記念品としてブログペット背景を作りました。
よかったら、見に来て下さいね♪お持ち帰りも自由ですよ☆（＾−＾＊
Posted by わたる at 2006.08.15 10:10 | edit
コメント
フリースペース、これいいですね。
まだ、エキサイトから移動する覚悟ができてませんが
ＦC２さんに完全移動したときは、
yozoさんのカスタマイズ講座を色々、参考にさせてもらいます。
いつもありがとうございますm(__)mﾍﾟｺ
Posted by ゆうゆ at 2006.08.15 10:39 | edit
コメント
本当にたくさんありがとーございまっす♪m(_ _)m
＞これいいねーーー♪未来投稿じゃなくて、表紙みたいに
＞フリースペースが出来るんだねー♪
そうでしょ。まだまだ見た目も改良しなきゃいけないんですけど、
とりあえずは、報告記事をUPしちゃいましたよ。 (￣∀￣*)ｲﾋｯ
＞これはいつか是非やってみたいのでとっても参考になります♪
＞色々ブログの事詳しくなるからとってもうれしい♪
(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ これは難しくないですよ。
はっきりいって簡単です。ただし、見た目も凝るのはこれからが難しいと思いますよ。お時間のあるときにでも、お試しあれ。(^○^)
Posted by enuちゃんへ at 2006.08.15 14:05 | edit
コメント
＞未来記事にならないように、カスタマイズされている。
そうなのですよ。以前のメインブログのエキサイトブログでは、HTMLにそのままトップを書くだけのスペースをとれないくらいに、容量が少なかったんですよ。
それで未来投稿にしてました。こちらでは、便利な変数があって、設定だけならすぐにできましたよ。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
＞あっちの闇のブログは注意事項が必要だから、やりたいかも♪（＾ｗ＾＊
わたるさんもいくつかブログをお持ちなんですね。トップに注意書きをするには、
このHTML直接書き込みは便利ですよね。(*^-ﾟ)vｨｪｨ♪
＞でも、あっちは…Ｌｉｖｅｄｏｏｒだから…うまく出来るかしら；（＞＜；
livedoorでもできるとおもいますけど・・・どうでしょうかね。
yozo本で出来ればＯＫなのですけどね。(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
＞そうそう！アキラくんのきりぺたが、７７７Ｈｉｔになりました☆
＞日ごろ来て下さって、ありがとうございます♪
そのようですね。さっきお邪魔させていただきましたよ。
どんどんぺたぺたのペースが上がってきましたね。これからも楽しみですね。
よーし！次こそGet狙うぞ♪ (ﾟﾛﾟ)/(ﾟﾛﾟ)/(ﾟﾛﾟ)/(ﾟﾛﾟ)/(ﾟﾛﾟ)/ｵｫｰ
Posted by わたるさんへ at 2006.08.15 14:12 | edit
コメント
＞フリースペース、これいいですね。
えへへ・・・便利ですよ。ただ、まだまだyozoは上手く使えていないのですが、
これからもちょくちょくいじっていくつもりです。(￣∀￣*)ｲﾋｯ
＞まだ、エキサイトから移動する覚悟ができてませんが、ＦC２さんに完全移動したときは、
＞yozoさんのカスタマイズ講座を色々、参考にさせてもらいます。
どうぞ♪どうぞ♪いつでも好きなときに好きなだけお使いくださいね。
yozoもエキブロから引越して、2週刊ほどですけど、懐かしく思いますよ。
軽さはエキブロが一番ですよね。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
Posted by ゆうゆさんへ at 2006.08.15 14:18 | edit
コメント
おぉ、とても見やすくなりましたね♪('∇^d) ﾅｲｽ☆!!
色使いもとても素敵ですよ♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
そっかぁ。うさもちゃんがずっとあの記事にコメント投稿しちゃうんだ。
うさびはコメント投稿しないので気付きませんでした。
これでいろんな記事にコメントしてくれますね。
まゆびもうさもちゃんのコメント楽しみにしてます♪(*'ｰ')
Posted by まゆび at 2006.08.15 17:13 | edit
コメント
＞おぉ、とても見やすくなりましたね♪('∇^d) ﾅｲｽ☆!!
＞色使いもとても素敵ですよ♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
ありがとーございまっす♪ちょっとそのままなんですが、このくらいで
とりあえず見た人の気分はわるくならないだろう・・・って思って
記事にしましたよ。今日8/15にもさらに追加しますのでお楽しみに('-'*)ｴﾍ
＞そっかぁ。うさもちゃんがずっとあの記事にコメント投稿しちゃうんだ。
＞うさびはコメント投稿しないので気付きませんでした。
きっかけは、うさものコメント投稿がずっと未来投稿の記事になってしまうことを
回避することでした。もともと未来投稿は反則ワザのようなものですからね。
いずれは・・・って思っていて放置していたんですよ(￣∀￣*)ｲﾋｯ
Posted by まゆびさんへ at 2006.08.15 18:53 | edit
コメント
来てみてビックリ！！
「(ﾉﾟοﾟ)ﾉ ｵｵｵｵｫｫｫｫｫｫ-、私の名前だぁっっ！！」って(笑)
なんか大して役にもたてなかったのに、なんか記事読んでると私ってスゴそうな人に見えたりして？？（￣ｍ￣*）(爆)
ともあれ、イロイロこれからも進化を遂げるのでしょうね？
お互いにガンバリましょう！！(ﾟーﾟ*)
・・・コレからもイロイロ教えてくださいｍ(＿＿)ｍ
Posted by Ｐａｖ at 2006.08.15 23:18 | edit
コメント
これってｈ３って部分になるんですか？あっ、ｈ４だ。
たくさんあるので難しそうです。このスペースっていろんな使い方ができそうで面白いですね。
すごく見やすくなって広告機能もアップですね、
Posted by ととろ at 2006.08.16 01:37 | edit
コメント
＞Pavさん、おはよーございまっす♪
＞「(ﾉﾟοﾟ)ﾉ ｵｵｵｵｫｫｫｫｫｫ-、私の名前だぁっっ！！」って(笑)
あらら・・・Pavさんとモンビッケさんのコメントがきっかけでしたからね。(^○^)
アドバイスありがとーございまっす♪m(_ _)m
＞なんか記事読んでると私ってスゴそうな人に見えたりして？？（￣ｍ￣*）(爆)
いえいえ、index_areaがわかれば、変数を調べて、念のためFC2ブログ ユーザーフォーラムで検索して完璧に理解してから、さぁ、どの方法でやろうか・・・って考えて、CSS編集のしやすいHTML直接書き込みにしちゃいました。別ファイル(プラグイン3)を流用してもよかったんですけどね。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･
＞・・・コレからもイロイロ教えてくださいｍ(＿＿)ｍ
とんでもないですよ。それでは、お互い情報を交換するということで・・・
今後とも、遠慮なくアドバイスしてくださいね。助かってますよ。
こちらこそ、今後ともよろしくお願いしまっす m(_ _)m
Posted by Pavさんへ at 2006.08.16 07:59 | edit
コメント
＞もう、「読み方」が設置されている。すごいなぁ。
いえいえ、Pavさんとモンビッケさんのおかげですよ。キーワードがすぐにわかったことがおおきかったですね。本当に助かりましたよ。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
＞これってｈ３って部分になるんですか？あっ、ｈ４だ。
ｈは見出し文字(タイトル)のタグなんですよ。h1〜ｈ6の順に大→小となってます。本文の一番初めの部分はFC2の独自の変数で、<!--index_area-->から<!--/index_area-->の間に挟まれた部分を表示してくれます。それを利用して、フリースペースとして、表示させたい内容を記入したのですよ。(^○^)
＞たくさんあるので難しそうです。このスペースっていろんな使い方が
＞できそうで面白いですね。すごく見やすくなって広告機能もアップですね
あはは・・・もっとあっさり書けばいいのですが、ついついあれもこれもって感じで書いてしまうんですよね。ごちゃごちゃブログにならないようにと思っているんですが・・・┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･ お暇なときにでも<!--index_area-->〜<!--/index_area-->をHTMLに追加してみてくださいね。(*^-^)
Posted by ととろさんへ at 2006.08.16 09:20 | edit
コメント
うわぁ！ブログのトップがすっきり、分かりやすいインフォメーションになってますね。
すばらしい〜！！カテゴリもプルダウン式になってるし♪背景色もついて、目立ってばっちりですね☆
スクロールバーで多くの情報をコンパクトに見せるといっても、スクロールしないと見えない部分もありますし、
一目で分かるという点では、現在の形はすっごくいいんじゃないでしょうか♪
記事ではない形でインフォメーションをつけたいというお話を伺ったとき、
一瞬「プラグインカテゴリ３」を利用すればいいのかな、と思ったのですが、
こういう方法もあるんだわ〜と感心しちゃいました。
yozoさん、おつかれさまでっす(*'m')ｖ
Posted by mio at 2006.08.16 22:45 | edit
コメント
＞うわぁ！ブログのトップがすっきり、分かりやすい
＞インフォメーションになってますね。
ありがとーございまっす♪m(_ _)m
まだまだデザインはダメなのでしょうが、取りあえずは見ていても
叱られない程度にはなったかと思って安心していまっす(￣∀￣*)ｲﾋｯ
＞一瞬「プラグインカテゴリ３」を利用
そうなんですよ。そのようにされている方もいらっしゃいますね。ただ、考え方は同じで、どこにそのインフォメーションの内容を書くかということだけが違うようです。別ファイルに書くというプラグインカテゴリ３か、yozoがやったようにHTMLに直接書き込むかの違いですね。HTML直接書き込みは、トップのHTMLが増えて表示が遅くなる可能性もありますが、取りあえずは直接書き込みしてます。
もうこれでいいやってなったらプラグインでもいいかなって思ってますよ。
(*^-ﾟ)vｨｪｨ♪
Posted by mioさんへ at 2006.08.17 10:26 | edit
コメント
よみびとしらずの、
LAYLHAと申します。
INDEXを作りたくて
いろいろさまよっていたらこちらにたどり着きました。
そして参考にさせていただきました。
とても親切丁寧な説明でわかりやすかったです。
しかしテンプレートのデザインにあわせた
スタイルシートがなかなかうまくできなくて、
このような状況でとまっています。
途中でやめるなとお叱りをいただきそうな出来栄えですが
とても勉強になりました。
まだブログの初心者で、
勝手ながら、迷いながら、
初めてトラックバックなるものをさせていただきました。
何か失礼な言葉使いや
表現上の問題点があればお知らせください。
アリガトウございます。
またいろいろと参考にさせてくださいませ！
Posted by LAYLHA at 2007.05.07 13:30 | edit
コメント
フリースペースを設定されたのですね。yozoの記事がお役に立ったみたいで、とてもうれしいでっす♪プラグインを使ってもっと簡単な方法もありますのでご参考までに案内しておきまっす。（ただし、見た目のデザインについてはご自身でカスタマイズしてくださいね。）
http://yozoblog2.blog63.fc2.com/blog-entry-503.html
＞何か失礼な言葉使いや表現上の問題点があればお知らせください。
ここのブログでは、そんなに気を使うことはありませんよ。お気軽にどうぞ。(^○^)
追伸：記事での紹介及びトラバありがとーございまっす♪m(_ _)m
Posted by LAYLHAさんへ at 2007.05.07 21:35 | edit
コメント
よみびとしらずの、
ＬＡＹＬＨＡです。
”プラグインの方法”情報アリガトウございます。
今の、この中途半端の出来上がりのままでは悔しいので、
デザインを表現できるまでは、
なんとか！やりとげたいと思っています。
そして、プラグインを使った方法は、
そのあとに必ず挑戦して見ます。
それもすごく楽しみです！
成功したらまたご連絡しますので、
それまでＬＡＹＬＨＡのことを、
頭の片隅に置いといて下さい〜。
ではでは。
Posted by LAYLHA at 2007.05.08 23:03 | edit
コメント
プラグイン３を使われた方がメンテナンスはしやすいと思いますが、急ぐことはありませんし、ＬＡＹＬＨＡさんのお好きな方でいいと思いますよ。それよりもまずは、CSSのデザインに力を注ぐとのこと♪ がんばってくださいね♪よい知らせをいただけることを楽しみにしてまっす♪ ＼(*⌒0⌒)ｂがんばっ♪
Posted by ＬＡＹＬＨＡさんへ at 2007.05.12 18:47 | edit