--年--月--日

スポンサーサイト

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

Google検索を設置する

 ブログ内の検索を強力にしたいと思って、Googleのサイト検索をナビゲーション及び右サイドバーに設置しました。トップページの内容だけでなく、ブログの全記事、及びコメントの内容まで検索できます。FC2ブログの検索よりも強力な検索が可能となりました。


Google

ウェブ全体から検索http://yozoblog2.blog63.fc2.com/を検索

 設置したGoogleのサイト検索のコードは、リンク、検索機能を追加Google フリー検索 (ベーシック版) : ウェブ検索 + サイト検索で公開されています。yozoはそのコードを、許可されている範囲内で、自分なりにカスタマイズしてXHTMLに準拠させています。このコードをコピペしたい方は、3箇所(右サイドバー用では2箇所)のhttp://yozoblog2.blog63.fc2.com/をご自分URLに変更してから貼り付けてくださいね。またここのブログはFC2ブログですから文字コード(2箇所)はeuc-jpとなっていますが、ブログサービスによってはshift_jisやutf-8にする必要がありますのでご注意ください。


貼り付けコード

この記事のコード


<div class="searchstyle"><form method="get" action="http://www.google.co.jp/search"><a href="http://www.google.co.jp/"><img src="http://www.google.com/logos/Logo_40wht.gif" width="128" height="53" alt="Google" title="Google" /></a><br /><input type="text" name="q" size="31" maxlength="255" value="" accesskey="a" tabindex="1" /><input type="hidden" name="ie" value="euc-jp" /><input type="hidden" name="oe" value="euc-jp" /><input type="hidden" name="hl" value="ja" /><input type="submit" name="btnG" value="Google 検索" accesskey="b" tabindex="2" /><br /><input type="hidden" name="domains" value="http://yozoblog2.blog63.fc2.com/" /><span style="font-size:10px;"><input type="radio" name="sitesearch" value="" accesskey="c" tabindex="3" /> ウェブ全体から検索<input type="radio" name="sitesearch" value="http://yozoblog2.blog63.fc2.com/" accesskey="d" tabindex="4" checked="checked" />http://yozoblog2.blog63.fc2.com/を検索</span></form></div>


右サイドバーのコード


<div class="searchstyle"><form method="get" action="http://www.google.co.jp/search"><a href="http://www.google.co.jp/"><img src="http://www.google.com/logos/Logo_40wht.gif" width="128" height="53" alt="Google" title="Google" /></a><br /><input type="text" name="q" size="18" maxlength="255" value="" accesskey="a" tabindex="1" /><br /><input type="hidden" name="ie" value="euc-jp" /><input type="hidden" name="oe" value="euc-jp" /><input type="hidden" name="hl" value="ja" /><input type="submit" name="btnG" value="Google 検索" accesskey="b" tabindex="2" /><br /><input type="hidden" name="domains" value="http://yozoblog2.blog63.fc2.com/" /><span style="font-size:10px;"><input type="radio" name="sitesearch" value="" accesskey="c" tabindex="3" />ウェブ全体から検索<br /><input type="radio" name="sitesearch" value="http://yozoblog2.blog63.fc2.com/" accesskey="d" tabindex="4" checked="checked" />このブログ内を検索</span></form></div>


検索フォームを囲んでいる枠線はCSSで設定しています。(class="searchstyle"となっている分です。)


CSS編集で追加するコード
.searchstyle
{
background-color: #FFFFFF;
padding: 5px;
margin : 15px 20px 15px;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

  • yozoからのお願い
 この記事の内容は、yozoが実際にやってみたことを書いているだけです。この記事の方法しかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「フォーム改造」は自己責任で行ってください。
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

2007年03月05日

プラグインでブログトップのフリースペースを管理する(FC2ブログ)

 ここのブログのトップページには、常にブログの案内が表示されていますが、これはHTMLファイルに直接書き込んでいるので、修正するときはとても面倒な作業になっていました。(って、おもいっきり言い訳なんですけど・・・(;^_^A アセアセ・・・)
HTMLファイルに直接書き込む方法はコチラ→フリースペースを常にトップに設置する yozoの気が向いたと記2.0

 そこで、FC2ブログのプラグインのうち、未使用になっているカテゴリー3をブログのトップ位置に配置して、トップに表示したい内容のメンテナンスをしやすくしてみました。
カテゴリー3を使用されている方は、カテゴリー1か2へ変更しておくようにしてください。

※このカスタマイズはFC2ブログの独自タグを使ったものですから、FC2ブログの方だけにしか使用できません。


プラグインでブログトップのフリースペースを管理する(FC2ブログ)


HTML編集画面で、カテゴリー3のコードを追加します。

 HTML編集の画面で、<!--topentry-->の直前に下のようにカテゴリー3のコードを追加します。
  • 必ずバックアップしましょう!

 いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができます♪

HTML編集画面

? 省略 ?


<!-- フリースペース -->
<!--index_area-->
<!--plugin-->
<!--plugin_third-->
<%plugin_third_content>
<!--/plugin_third-->
<!--/plugin-->
<!--/index_area--><!-- フリースペース終了 -->

<!--topentry-->

?以下省略?


フリーエリアへの記入をします。

 FC2ブログの管理画面で、「プラグインの設定」を開き、「フリーエリア内容の変更」部分にブログトップに常に表示させたい内容を書いて、[保存]するだけOKです。
  • yozoからのお願い
 この記事の内容は、yozoが実際にやってみたことを書いているだけです。この記事の方法しかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪改造が禁止されているテンプレートもありますのでご注意ください。
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


↓ここのフリースペースの設定例はコチラ
【プラグインでブログトップのフリースペースを管理する(FC2ブログ)の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

2007年01月31日

ちょっと表示を軽くしてみました

 ここのブログのトップページを表示させたとき、なかなか表示されないことが多くなってきましたので、ここらで思い切ってリニューアルしてみました。
 ここのブログで、表示が重い原因として考えられるものを下に並べてみました。

  • 一番最初のフリースペースに、ドリコムRSSを表示させている。
  • 右サイドの1番目に、BlogPetがある。
  • 右サイドの2番目に、BBSがある。
  • 右サイドの4番目に、キリぺた&BBSキリ番を踏んでくれたブログを、SimpleAPIを使用したサムネイル表示をしている。
  • サイドメニューのツリー化や折りたたみ、追記の開閉、コメントプレビュー等のJavaScriptがある。
  • 1記事あたりの使用画像数が多い。

 すべてをやめるわけにもいきませんので、以下の点をリニューアルしました。

  1. ドリコムRSSは、はじめての方用の記事『yozoの気が向いたと記2.0』の読み方♪に移動させました。
  2. キリぺたとBBSキリ番を踏んでくれたブログのサムネイル表示を最新4件のみにして、それ以前のものも含めた全ての記録記事を記事キリぺたとBBSキリ番の記録に移動させて、リンクだけにしました。

 この2点のみのリニューアルですが、表示が軽くなったと思います。今まで表示が重いことも多々あって、ご迷惑かけていたと思います。申し訳ありませんでした。今後も楽しくて表示が軽いブログを目指すようにしまっす。m(_ _)m


↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スレッドテーマ:カスタマイズ:ブログ

2007年01月28日

FC2ブログ用サイドメニューの折りたたみの設定

 07/01/19の記事にあるように、ここのブログのサイドメニューに折りたたみ機能を設定しました。これは、訪問してくださった方が、文字通りサイドメニューを必要に応じて開閉することができるのはもちろんのこと、その方がブラウザのcookieを削除しないかぎり、次回訪問時に開閉したメニューの状態も保持されますので、訪問してくれる方にとっては便利な機能だと思います。
07/01/19の記事はコチラ→yozoの気が向いたと記2.0 : サイドメニューの折りたたみの設定

 ところが、この記事では、メニューの内容をすべてHTMLファイルに書き込むという方法で紹介しましたので、この方法だと、使用しているプラグインがたくさんある方にとっては、大変な作業となりますし、その後のプラグイン内容の修正にも手間がかかるという問題がありました。

 そこで、今回は、FC2ブログのプラグインを活用して、比較的簡単にサイドメニューを折りたたむ設定ができるようにしてみました。もちろん、プラグイン一つ一つに修正を加えなければいけませんので、決して楽な作業ではありませんが、設定後のメンテナンスは断然しやすくなります。不要なプラグインは管理画面で削除するだけですし、修正が必要なプラグインだけを修正すればいいようになりました。興味のあるFC2ブログユーザーの方は、お時間あるときにでも、試してみてくださいね♪


 このカスタマイズに際しては、ここのブログのテンプレートを配布してくださっている、小粋空間yujiroさん配布のJavaScriptファイルを使用させていただいています。

サイドメニューの折りたたみ


  1.  小粋空間yujiroさんの記事小粋空間: サイドメニュー折りたたみスクリプト(cookie等改善版)を開いて、1.menufolder.js ダウンロードからmenufolder.jsをダウンロードしましょう。保存するときの名前はmenufolder.jsのままにしておいてください。そして、そのファイルをアップロードします。
    なお、menufolder.jsについては、様々な設定がありますが、yozoはダウンロードしたままを使用させていただいています。細かく設定したい方は、コチラ→小粋空間: menufolder.js マニュアル
  2.  HTML編集画面で、<head>?</head>の一番下にインクルード文を追加しましょう。
    HTML編集画面

    ? 省略 ?

    <script type="text/javascript" src="menufolder.jsのアドレス" charset="utf-8"></script>
    </head>

    ? 省略 ?

  3.  続けてHTML編集画面で、プラグインカテゴリー1とプラグインカテゴリー2の部分を下のように修正します。修正する前に、プラグインのタイトルのclass(見本ではsidetitle)と、内容のclass(見本ではside)を控えておきましょう。(バックアップを取っておくことを強くおすすめします。)なお、ここの見本にある修正前のプラグインのコードは、ここのテンプレートのものです。使用のテンプレートによってclass名が異なるますので、必ず控えておくようにしましょう。
    HTML編集画面

    ? プラグインカテゴリー1の修正前 ?


    <!--plugin-->
    <!--plugin_first-->
    <div class="sidetitle">
    <%plugin_first_title>
    </div>
    <div class="side">

    <%plugin_first_content>
    </div>
    <!--/plugin_first-->
    <!--/plugin-->

    ? プラグインカテゴリー1の修正後 ?


    <!--plugin-->
    <!--plugin_first-->
    <%plugin_first_content>
    <!--/plugin_first-->
    <!--/plugin-->

    ? プラグインカテゴリー2の修正前 ?


    <!--plugin-->
    <!--plugin_second-->
    <div class="sidetitle">
    <%plugin_second_title>
    </div>
    <div class="side">

    <%plugin_second_content>
    </div>
    <!--/plugin_second-->
    <!--/plugin-->

    ? プラグインカテゴリー2の修正後 ?


    <!--plugin-->
    <!--plugin_second-->
    <%plugin_second_content>
    <!--/plugin_second-->
    <!--/plugin-->
  4.  使用しているすべてのプラグインの修正をします。管理画面の左サイドの[プラグインの設定]を選択して、下のように修正してください。
    • 「HTMLを編集する」→「FC2カウンター」や、「最新の記事」などのプラグインの修正
    • 「設定を変更する」→フリーエリアの内容の修正

    折りたたみを設定する場合

    プラグインの内容の前後に、この色のコードを追加してください。
    • <div class="sidetitle">のclass名をここではsidetitle2に変更しました。
      この設定をしたメニュータイトルが折りたたみのボタンとなります。
    • id名はタイトルには☆☆nameを、内容には☆☆listを追加します。
    • 3箇所の☆☆はメニューごとに重複しないように設定してください。例えば、「FC2カウンター」ならcounter、「最新の記事」ならentryという具合に重複しないようにしましょう。
    • 実行スクリプトのoffは、はじめに折りたたんでおく設定です。これをonにすると、はじめからメニューが表示される設定になります。

    プラグインの内容の修正
    <div class="sidetitle2" id="usamoname">
    表示させたいメニューのタイトル
    </div>
    <div class="side" id="usamolist">

    プラグインの内容

    </div>
    <script type="text/javascript">
    <!--
    FoldNavigation('usamo','off',false);
    //-->
    </script>

    折りたたみを設定しない場合

     タイトルのclassがsidetitleのままで、idも設定していません。そして、実行スクリプトはありません。
    プラグインの内容の修正
    <div class="sidetitle">
    表示させたいメニューのタイトル
    </div>
    <div class="side">

    プラグインの内容

    </div>
  5. ボタンとなるメニューのタイトルのCSSを設定します。なお、折りたたみで表示されたときに、スクロールバーが必要な部分のCSS設定等の詳細はこの記事の追記をご覧ください。
    CSS編集で追加するコード
    /*サイドバーの折りたたみ用の設定*/
    .sidetitle2 {
    width: auto;
    margin:3px 0px 0px 0px;
    padding: 0px;
    text-align: center; /* テキスト配置 */
    }
    .sidetitle2 a {
    width: auto;
    }
    /* 通常 */
    .sidetitle2 a:link,
    .sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#D5DFFF; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    }
    /* マウスポイント時 */
    .sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff; /* 文字色 */
    background-color: #30488F; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    }

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


↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


↓yozoのブログで今回設定したCSSです。ご参考までに。
【FC2ブログ用サイドメニューの折りたたみの設定の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

2007年01月19日

サイドメニューの折りたたみの設定

 いつの間にか、ここのブログもサイドバーに色々設置していて、全部を見るためには大きくスクロールしなきゃいけなくなっていました。そこで、この記事のカスタマイズでサイドメニューをそれぞれ折りたたみできるようにしました。右サイドバーのメニューのタイトルをクリックすれば、そのメニューを折りたたむことができます。また、折りたたんであるメニューは開くことができます。これで、ここの右サイドバーもすっきりしました。

 このカスタマイズに際しては、ここのブログのテンプレートを配布してくださっている、小粋空間yujiroさんの記事小粋空間: サイドメニュー折りたたみスクリプト(cookie等改善版)を基にして、FC2ブログにこのカスタマイズを実装されているお友達showry's Blogshowryさんの記事showry's Blog: FC2ブログでサイドメニュー折りたたみスクリプト導入ととろのおもちゃ箱ととろさんの記事ととろのおもちゃ箱: サイドバーを折りたたみを参考にさせていただきました。


サイドメニューの折りたたみ


  1.  小粋空間yujiroさんの記事小粋空間: サイドメニュー折りたたみスクリプト(cookie等改善版)を開いて、1.menufolder.js ダウンロードからmenufolder.jsをダウンロードしましょう。保存するときの名前はmenufolder.jsのままにしておいてください。そして、そのファイルをアップロードします。
    なお、menufolder.jsについては、様々な設定がありますが、yozoはダウンロードしたままを使用させていただいています。細かく設定したい方は、コチラ→小粋空間: menufolder.js マニュアル
  2.  HTML編集画面で、<head>?</head>の一番下にインクルード文を追加しましょう。
    HTML編集画面

    ? 省略 ?

    <script type="text/javascript" src="menufolder.jsのアドレス" charset="utf-8"></script>
    </head>

    ? 省略 ?

  3.  続けてHTML編集画面で、折りたたみさせたいメニューの1つだけに、下のような設定をします。また、この例は小粋空間様のテンプレートでの設定になっています。
    • 1つのメニューでまずはテストして、成功してから、残りのメニューも同様に設定することをおすすめします。
    • <div class="sidetitle">のclass名をここではsidetitle2に変更しました。
      この設定をしたメニュータイトルが折りたたみのボタンとなります。
    • id名はタイトルには☆☆nameを、内容には☆☆listを追加します。
    • 3箇所の☆☆はメニューごとに重複しないように設定してください。
    • 実行スクリプトのoffは、はじめに折りたたんでおく設定です。これをonにすると、はじめからメニューが表示される設定になります。

    HTML編集画面

    ? 省略 ?

    <!-- うさも開始 -->
    <div class="sidetitle2" id="usamoname">
    yozo家の長女うさの『うさも』
    </div>
    <div class="side" id="usamolist">
    うさものスクリプトなど表示させたい内容
    </div>
    <!-- うさも終了 -->
    <script type="text/javascript">
    <!--
    FoldNavigation('usamo','off',false);
    //-->
    </script>

    ? 省略 ?

  4. ボタンとなるメニューのタイトルのCSSを設定します。なお、折りたたみで表示されたときに、スクロールバーが必要な部分のCSS設定等の詳細はこの記事の追記をご覧ください。
    CSS編集で追加するコード
    /*サイドバーの折りたたみ用の設定*/
    .sidetitle2 {
    width: auto;
    margin:3px 0px 0px 0px;
    padding: 0px;
    text-align: center; /* テキスト配置 */
    }
    .sidetitle2 a {
    width: auto;
    }
    /* 通常 */
    .sidetitle2 a:link,
    .sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#D5DFFF; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    }
    /* マウスポイント時 */
    .sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff; /* 文字色 */
    background-color: #30488F; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    }
  5. 1つのメニューの折りたたみが問題なく動作したら、残りの部分も同様に設定してください。

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


↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


↓ちょっとした工夫例です。
【サイドメニューの折りたたみの設定の続きを開く】

スレッドテーマ:カスタマイズ:ブログ

メイン Old≫


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