--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年08月14日

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

 今まで、2007/04/20の未来の日時で投稿して『yozoの気が向いたと記2.0』の読み方♪をブログのトップに設置していましたが、常にここのブログの最新記事が、この未来投稿の『yozoの気が向いたと記2.0』の読み方♪になってしまうので、未来投稿をやめて、ブログのトップに直接記入できるフリースペースを設置することにしました。
 このカスタマイズは、BlogPetうさも初コメント投稿のコメントにて、お友達のグリーティングカードモンビッケさんと、果報は寝て待て(-_☆)Pavlobaさんから、BlogPetのうさものコメント投稿が最新記事になるので、このままだとずっとこの未来投稿のトップ記事になってしまうというアドヴァイスをしてもらったのがきっかけとなりました。また、Pavlobaさんには、参考となるページ、FC2tyle-FC2ブログ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
人気blogランキング

スポンサーサイト

スレッドテーマ:本日の小ネタ:ブログ

メイン

≪New DrecomRSSを使って他のブログ名/最新記事を表示する | Top | BlogPet「うさも」の背景紹介 夏休み Old≫

トラックバックURL


コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
またまたすごいカスタマイズを~~!!
これまたブックマークしておかねば(笑
未来記事でなくてもこんなふうにできるなんて・・
考えた人はすごいですね。尊敬です。
読んだだけでやってのけちゃうyozoさんも凄いです。
σ(・ω・*)は・・・今日は一日背景ページと戦って・・・オロロオロロ
まだ整理がつかない状態なんです(ノД`)・゚・。
なんでこーなるのぉ~みたいな(笑
今日は夜更かしになっても頑張りたいと思いまっす(。・ω・。)ゞピッ♪
((((((((((っ・ω・)っ ブーン

コメント

>モンビッケさん、こんばんはー♪

>またまたすごいカスタマイズを~~!!
>これまたブックマークしておかねば(笑
あはは・・・ありがとーございまっす♪m(_ _)m 
どうもいいアイデアでも、yozoがやるとイマイチですよね。
基礎研究ということで、みなさんにアイデアを提供でもいいかな♪(^○^)

>未来記事でなくてもこんなふうにできるなんて・・
>考えた人はすごいですね。尊敬です。
ブログをホームページのようにしているところで、よく使われていますね。
フリースペースということで、お知らせや新着情報を提供できますよね。
(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

>σ(・ω・*)は・・・今日は一日背景ページと戦って・・・オロロオロロ
>まだ整理がつかない状態なんです(ノД`)・゚・。
あらら・・・大変ですよね。配布ページは文字化けも直ってましたね。
よかったですよ。(*^-゚)vィェィ♪

>今日は夜更かしになっても頑張りたいと思いまっす(。・ω・。)ゞピッ♪
ふふふ・・・無茶だけはいないでくださいね。楽しくしなきゃね。
yozoものんびりカスタマイズしてますよ。マイペースですよね(*^-^)

コメント

こんばんはー。
うーん。。。yozo殿のブログは日々、進化!!
って感じですねー。
私も見習わなければ・・・
しかしその前にお引越しが先ですが(汗)
だんだんエキサイト以外のブログの方が増えてるのに
今はリンクが貼れない状態なので・・・

コメント

>ばばるさん、おはよーございまっす♪

>うーん。。。yozo殿のブログは日々、進化!!って感じですねー。
ありがとーございまっす♪すこしずつですけど、自分も訪問してくださるみなさんにも、気楽で使い勝手のいい、ブログでありたいと思っています。
(ちょっといいカッコしちゃいました・・・(*v.v)。ハズイ。。。。 )

>しかしその前にお引越しが先ですが(汗)だんだんエキサイト以外の
>ブログの方が増えてるのに今はリンクが貼れない状態なので・・・
あはは・・・以前のyozoと同じですね。当時yozoもBlogPet関係のお友達は、エキサイト以外の方がほとんどでしたからね。お引越し考え中ですか?
もしもお引越しでしたら、いつでも応援しますからね。(゚-゚*)(。。*)ウンウン

コメント

またまた参上!!!おはよー。yozoちゃん。
これいいねーーー♪未来投稿じゃなくて、表紙みたいにフリースペースが出来るんだねー♪
なるほど♪
来てみて、、、あ、、、変わったなぁー♪と思ったんだけど・・・。
さらに!!!すごいねーー♪
これはいつか是非やってみたいのでとっても参考になります♪
色々ブログの事詳しくなるからとってもうれしい♪
アリガトねー♪

コメント

yozoさん、すごいです♪進化していますね。(^-^
未来記事にならないように、カスタマイズされている。
とってもステキです☆ 便利ですね♪
ぼくのうたは…べつにトップを作らなくてもいいけれど…。
あっちの闇のブログは注意事項が必要だから、やりたいかも♪(^w^*
でも、あっちは…Livedoorだから…うまく出来るかしら;(><;

そうそう!アキラくんのきりぺたが、777Hitになりました☆
日ごろ来て下さって、ありがとうございます♪
777はラッキーセブンですので、特別記念品としてブログペット背景を作りました。
よかったら、見に来て下さいね♪お持ち帰りも自由ですよ☆(^-^*

コメント

yozoさん、おはようございま~す♪
フリースペース、これいいですね。
まだ、エキサイトから移動する覚悟ができてませんが
FC2さんに完全移動したときは、
yozoさんのカスタマイズ講座を色々、参考にさせてもらいます。
いつもありがとうございますm(__)mペコ

コメント

>enuちゃん、こんにちはー♪
本当にたくさんありがとーございまっす♪m(_ _)m

>これいいねーーー♪未来投稿じゃなくて、表紙みたいに
>フリースペースが出来るんだねー♪
そうでしょ。まだまだ見た目も改良しなきゃいけないんですけど、
とりあえずは、報告記事をUPしちゃいましたよ。 ( ̄∀ ̄*)イヒッ

>これはいつか是非やってみたいのでとっても参考になります♪
>色々ブログの事詳しくなるからとってもうれしい♪
(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン これは難しくないですよ。
はっきりいって簡単です。ただし、見た目も凝るのはこれからが難しいと思いますよ。お時間のあるときにでも、お試しあれ。(^○^)

コメント

>わたるさん、こんにちはー♪

>未来記事にならないように、カスタマイズされている。
そうなのですよ。以前のメインブログのエキサイトブログでは、HTMLにそのままトップを書くだけのスペースをとれないくらいに、容量が少なかったんですよ。
それで未来投稿にしてました。こちらでは、便利な変数があって、設定だけならすぐにできましたよ。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

>あっちの闇のブログは注意事項が必要だから、やりたいかも♪(^w^*
わたるさんもいくつかブログをお持ちなんですね。トップに注意書きをするには、
このHTML直接書き込みは便利ですよね。(*^-゚)vィェィ♪

>でも、あっちは…Livedoorだから…うまく出来るかしら;(><;
livedoorでもできるとおもいますけど・・・どうでしょうかね。
yozo本で出来ればOKなのですけどね。(=⌒▽⌒=) ニャハハハ♪

>そうそう!アキラくんのきりぺたが、777Hitになりました☆
>日ごろ来て下さって、ありがとうございます♪
そのようですね。さっきお邪魔させていただきましたよ。
どんどんぺたぺたのペースが上がってきましたね。これからも楽しみですね。
よーし!次こそGet狙うぞ♪ (゚ロ゚)/(゚ロ゚)/(゚ロ゚)/(゚ロ゚)/(゚ロ゚)/オォー

コメント

>ゆうゆさん、こんにちはー♪

>フリースペース、これいいですね。
えへへ・・・便利ですよ。ただ、まだまだyozoは上手く使えていないのですが、
これからもちょくちょくいじっていくつもりです。( ̄∀ ̄*)イヒッ

>まだ、エキサイトから移動する覚悟ができてませんが、FC2さんに完全移動したときは、
>yozoさんのカスタマイズ講座を色々、参考にさせてもらいます。
どうぞ♪どうぞ♪いつでも好きなときに好きなだけお使いくださいね。
yozoもエキブロから引越して、2週刊ほどですけど、懐かしく思いますよ。
軽さはエキブロが一番ですよね。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

コメント

yozoさん、こんにちは♪(='▽')
おぉ、とても見やすくなりましたね♪('∇^d) ナイス☆!!
色使いもとても素敵ですよ♪(゚-゚*)(。。*)ウンウン
そっかぁ。うさもちゃんがずっとあの記事にコメント投稿しちゃうんだ。
うさびはコメント投稿しないので気付きませんでした。
これでいろんな記事にコメントしてくれますね。
まゆびもうさもちゃんのコメント楽しみにしてます♪(*'ー')

コメント

>まゆびさん、こんばんはー♪

>おぉ、とても見やすくなりましたね♪('∇^d) ナイス☆!!
>色使いもとても素敵ですよ♪(゚-゚*)(。。*)ウンウン
ありがとーございまっす♪ちょっとそのままなんですが、このくらいで
とりあえず見た人の気分はわるくならないだろう・・・って思って
記事にしましたよ。今日8/15にもさらに追加しますのでお楽しみに('-'*)エヘ

>そっかぁ。うさもちゃんがずっとあの記事にコメント投稿しちゃうんだ。
>うさびはコメント投稿しないので気付きませんでした。
きっかけは、うさものコメント投稿がずっと未来投稿の記事になってしまうことを
回避することでした。もともと未来投稿は反則ワザのようなものですからね。
いずれは・・・って思っていて放置していたんですよ( ̄∀ ̄*)イヒッ

コメント

yozoさん、こんばんわ♪(゚▽゚*)

来てみてビックリ!!
「(ノ゚ο゚)ノ オオオオォォォォォォ-、私の名前だぁっっ!!」って(笑)
なんか大して役にもたてなかったのに、なんか記事読んでると私ってスゴそうな人に見えたりして??( ̄m ̄*)(爆)

ともあれ、イロイロこれからも進化を遂げるのでしょうね?
お互いにガンバリましょう!!(゚ー゚*)

・・・コレからもイロイロ教えてくださいm(__)m

コメント

もう、「読み方」が設置されている。すごいなぁ。
これってh3って部分になるんですか?あっ、h4だ。
たくさんあるので難しそうです。このスペースっていろんな使い方ができそうで面白いですね。
すごく見やすくなって広告機能もアップですね、

コメント

yozoさん、こんばんわ♪(゚▽゚*)

>Pavさん、おはよーございまっす♪

>「(ノ゚ο゚)ノ オオオオォォォォォォ-、私の名前だぁっっ!!」って(笑)
あらら・・・Pavさんとモンビッケさんのコメントがきっかけでしたからね。(^○^)
アドバイスありがとーございまっす♪m(_ _)m

>なんか記事読んでると私ってスゴそうな人に見えたりして??( ̄m ̄*)(爆)
いえいえ、index_areaがわかれば、変数を調べて、念のためFC2ブログ ユーザーフォーラムで検索して完璧に理解してから、さぁ、どの方法でやろうか・・・って考えて、CSS編集のしやすいHTML直接書き込みにしちゃいました。別ファイル(プラグイン3)を流用してもよかったんですけどね。┐( ̄ヘ ̄)┌ ヤレヤレ・・・

>・・・コレからもイロイロ教えてくださいm(__)m
とんでもないですよ。それでは、お互い情報を交換するということで・・・
今後とも、遠慮なくアドバイスしてくださいね。助かってますよ。
こちらこそ、今後ともよろしくお願いしまっす m(_ _)m

コメント

>ととろさん、おはよーございまっす♪

>もう、「読み方」が設置されている。すごいなぁ。
いえいえ、Pavさんとモンビッケさんのおかげですよ。キーワードがすぐにわかったことがおおきかったですね。本当に助かりましたよ。(゚-゚*)(。。*)ウンウン

>これってh3って部分になるんですか?あっ、h4だ。
hは見出し文字(タイトル)のタグなんですよ。h1~h6の順に大→小となってます。本文の一番初めの部分はFC2の独自の変数で、<!--index_area-->から<!--/index_area-->の間に挟まれた部分を表示してくれます。それを利用して、フリースペースとして、表示させたい内容を記入したのですよ。(^○^)

>たくさんあるので難しそうです。このスペースっていろんな使い方が
>できそうで面白いですね。すごく見やすくなって広告機能もアップですね
あはは・・・もっとあっさり書けばいいのですが、ついついあれもこれもって感じで書いてしまうんですよね。ごちゃごちゃブログにならないようにと思っているんですが・・・┐( ̄ヘ ̄)┌ ヤレヤレ・・・ お暇なときにでも<!--index_area-->~<!--/index_area-->をHTMLに追加してみてくださいね。(*^-^)

コメント

yozoさん、こんばんは!しばらくご無沙汰しちゃってごめんなさい。
うわぁ!ブログのトップがすっきり、分かりやすいインフォメーションになってますね。
すばらしい~!!カテゴリもプルダウン式になってるし♪背景色もついて、目立ってばっちりですね☆
スクロールバーで多くの情報をコンパクトに見せるといっても、スクロールしないと見えない部分もありますし、
一目で分かるという点では、現在の形はすっごくいいんじゃないでしょうか♪
記事ではない形でインフォメーションをつけたいというお話を伺ったとき、
一瞬「プラグインカテゴリ3」を利用すればいいのかな、と思ったのですが、
こういう方法もあるんだわ~と感心しちゃいました。

yozoさん、おつかれさまでっす(*'m')v

コメント

mioさん、こんばんはー♪

>うわぁ!ブログのトップがすっきり、分かりやすい
>インフォメーションになってますね。
ありがとーございまっす♪m(_ _)m
まだまだデザインはダメなのでしょうが、取りあえずは見ていても
叱られない程度にはなったかと思って安心していまっす( ̄∀ ̄*)イヒッ

>一瞬「プラグインカテゴリ3」を利用
そうなんですよ。そのようにされている方もいらっしゃいますね。ただ、考え方は同じで、どこにそのインフォメーションの内容を書くかということだけが違うようです。別ファイルに書くというプラグインカテゴリ3か、yozoがやったようにHTMLに直接書き込むかの違いですね。HTML直接書き込みは、トップのHTMLが増えて表示が遅くなる可能性もありますが、取りあえずは直接書き込みしてます。
もうこれでいいやってなったらプラグインでもいいかなって思ってますよ。
(*^-゚)vィェィ♪

コメント

始めまして。
よみびとしらずの、
LAYLHAと申します。
 
INDEXを作りたくて
いろいろさまよっていたらこちらにたどり着きました。
そして参考にさせていただきました。
とても親切丁寧な説明でわかりやすかったです。
 
しかしテンプレートのデザインにあわせた
スタイルシートがなかなかうまくできなくて、
このような状況でとまっています。
 
途中でやめるなとお叱りをいただきそうな出来栄えですが
とても勉強になりました。
 
まだブログの初心者で、
勝手ながら、迷いながら、
初めてトラックバックなるものをさせていただきました。
 
何か失礼な言葉使いや
表現上の問題点があればお知らせください。
 
アリガトウございます。
 
またいろいろと参考にさせてくださいませ!

コメント

LAYLHAさん、こんばんはー♪ いらっしゃいませ♪
フリースペースを設定されたのですね。yozoの記事がお役に立ったみたいで、とてもうれしいでっす♪プラグインを使ってもっと簡単な方法もありますのでご参考までに案内しておきまっす。(ただし、見た目のデザインについてはご自身でカスタマイズしてくださいね。)
http://yozoblog2.blog63.fc2.com/blog-entry-503.html

>何か失礼な言葉使いや表現上の問題点があればお知らせください。
ここのブログでは、そんなに気を使うことはありませんよ。お気軽にどうぞ。(^○^)

追伸:記事での紹介及びトラバありがとーございまっす♪m(_ _)m

コメント

yozo様、こんばんは。
よみびとしらずの、
LAYLHAです。

”プラグインの方法”情報アリガトウございます。

今の、この中途半端の出来上がりのままでは悔しいので、
デザインを表現できるまでは、
なんとか!やりとげたいと思っています。

そして、プラグインを使った方法は、
そのあとに必ず挑戦して見ます。
それもすごく楽しみです!

成功したらまたご連絡しますので、
それまでLAYLHAのことを、
頭の片隅に置いといて下さい~。
ではでは。

コメント

LAYLHAさん、こんばんはー♪
プラグイン3を使われた方がメンテナンスはしやすいと思いますが、急ぐことはありませんし、LAYLHAさんのお好きな方でいいと思いますよ。それよりもまずは、CSSのデザインに力を注ぐとのこと♪ がんばってくださいね♪よい知らせをいただけることを楽しみにしてまっす♪ \(*⌒0⌒)bがんばっ♪

コメント

こちらのおかげでフリースペースをブログに設置できました!
私のようなHTML初心者にもわかりやすい説明を書いてくださって
ありがとうございます。
これからもハテナということが出てきたら、こちらをチェックさせて
いただきます!

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。