フリースペースを常にトップに設置する

　今まで、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

1. FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
2. 「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
3. 「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
4. [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにtopentryと入力して、検索してください。
5. <!--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> - 時を表示

6. 「スタイルシートの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
7. [Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに.blogと入力して、検索してください。
8. .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で背景色をお好みのものに変更してください。

9. [プレビュー]で確認して、[更新]をクリックしましょう。

• yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m