カスタマイズ の記事一覧
- 2008/07/24 スポンサーサイト
- 2007/03/13 Google検索を設置する
- 2007/03/05 プラグインでブログトップのフリースペースを管理する(FC2ブログ)
- 2007/01/31 ちょっと表示を軽くしてみました
- 2007/01/28 FC2ブログ用サイドメニューの折りたたみの設定
- 2007/01/19 サイドメニューの折りたたみの設定
2007年03月13日
Google検索を設置する
ブログ内の検索を強力にしたいと思って、Googleのサイト検索をナビゲーション及び右サイドバーに設置しました。トップページの内容だけでなく、ブログの全記事、及びコメントの内容まで検索できます。FC2ブログの検索よりも強力な検索が可能となりました。
設置したGoogleのサイト検索のコードは、リンク、検索機能を追加のGoogle フリー検索 (ベーシック版) : ウェブ検索 + サイト検索で公開されています。yozoはそのコードを、許可されている範囲内で、自分なりにカスタマイズしてXHTMLに準拠させています。このコードをコピペしたい方は、３箇所(右サイドバー用では２箇所)のhttp://yozoblog2.blog63.fc2.com/をご自分URLに変更してから貼り付けてくださいね。またここのブログはFC2ブログですから文字コード(２箇所)は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からのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「フォーム改造」は自己責任で行ってください。
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
2007年03月05日
プラグインでブログトップのフリースペースを管理する(FC2ブログ)
ここのブログのトップページには、常にブログの案内が表示されていますが、これはHTMLファイルに直接書き込んでいるので、修正するときはとても面倒な作業になっていました。(って、おもいっきり言い訳なんですけど･･･(;^_^A ｱｾｱｾ･･･)
HTMLファイルに直接書き込む方法はコチラ→フリースペースを常にトップに設置する yozoの気が向いたと記2.0
そこで、FC2ブログのプラグインのうち、未使用になっているカテゴリー３をブログのトップ位置に配置して、トップに表示したい内容のメンテナンスをしやすくしてみました。
カテゴリー３を使用されている方は、カテゴリー１か２へ変更しておくようにしてください。
※このカスタマイズはFC2ブログの独自タグを使ったものですから、FC2ブログの方だけにしか使用できません。
プラグインでブログトップのフリースペースを管理する(FC2ブログ)
HTML編集画面で、カテゴリー３のコードを追加します。
HTML編集の画面で、<!--topentry-->の直前に下のようにカテゴリー３のコードを追加します。
- 必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができます♪
HTML編集画面
〜 省略 〜
<!-- フリースペース -->
<!--index_area-->
<!--plugin-->
<!--plugin_third-->
<%plugin_third_content>
<!--/plugin_third-->
<!--/plugin-->
<!--/index_area--><!-- フリースペース終了 -->
<!--topentry-->
〜以下省略〜
フリーエリアへの記入をします。
FC2ブログの管理画面で、「プラグインの設定」を開き、「フリーエリア内容の変更」部分にブログトップに常に表示させたい内容を書いて、[保存]するだけＯＫです。
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪改造が禁止されているテンプレートもありますのでご注意ください。
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
↓ここのフリースペースの設定例はコチラ
2007年01月31日
ちょっと表示を軽くしてみました
ここのブログのトップページを表示させたとき、なかなか表示されないことが多くなってきましたので、ここらで思い切ってリニューアルしてみました。
ここのブログで、表示が重い原因として考えられるものを下に並べてみました。
すべてをやめるわけにもいきませんので、以下の点をリニューアルしました。
- ドリコムRSSは、はじめての方用の記事『yozoの気が向いたと記2.0』の読み方♪に移動させました。
- キリぺたとBBSキリ番を踏んでくれたブログのサムネイル表示を最新４件のみにして、それ以前のものも含めた全ての記録記事を記事キリぺたとBBSキリ番の記録に移動させて、リンクだけにしました。
この２点のみのリニューアルですが、表示が軽くなったと思います。今まで表示が重いことも多々あって、ご迷惑かけていたと思います。申し訳ありませんでした。今後も楽しくて表示が軽いブログを目指すようにしまっす。m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
2007年01月28日
FC2ブログ用サイドメニューの折りたたみの設定
07/01/19の記事にあるように、ここのブログのサイドメニューに折りたたみ機能を設定しました。これは、訪問してくださった方が、文字通りサイドメニューを必要に応じて開閉することができるのはもちろんのこと、その方がブラウザのcookieを削除しないかぎり、次回訪問時に開閉したメニューの状態も保持されますので、訪問してくれる方にとっては便利な機能だと思います。
07/01/19の記事はコチラ→yozoの気が向いたと記2.0 : サイドメニューの折りたたみの設定
ところが、この記事では、メニューの内容をすべてHTMLファイルに書き込むという方法で紹介しましたので、この方法だと、使用しているプラグインがたくさんある方にとっては、大変な作業となりますし、その後のプラグイン内容の修正にも手間がかかるという問題がありました。
そこで、今回は、FC2ブログのプラグインを活用して、比較的簡単にサイドメニューを折りたたむ設定ができるようにしてみました。もちろん、プラグイン一つ一つに修正を加えなければいけませんので、決して楽な作業ではありませんが、設定後のメンテナンスは断然しやすくなります。不要なプラグインは管理画面で削除するだけですし、修正が必要なプラグインだけを修正すればいいようになりました。興味のあるFC2ブログユーザーの方は、お時間あるときにでも、試してみてくださいね♪
このカスタマイズに際しては、ここのブログのテンプレートを配布してくださっている、小粋空間のyujiroさん配布のJavaScriptファイルを使用させていただいています。
サイドメニューの折りたたみ
- 小粋空間のyujiroさんの記事小粋空間: サイドメニュー折りたたみスクリプト（cookie等改善版）を開いて、１．menufolder.js ダウンロードからmenufolder.jsをダウンロードしましょう。保存するときの名前はmenufolder.jsのままにしておいてください。そして、そのファイルをアップロードします。
※なお、menufolder.jsについては、様々な設定がありますが、yozoはダウンロードしたままを使用させていただいています。細かく設定したい方は、コチラ→小粋空間: menufolder.js マニュアル - HTML編集画面で、<head>〜</head>の一番下にインクルード文を追加しましょう。HTML編集画面
〜 省略 〜
<script type="text/javascript" src="menufolder.jsのアドレス" charset="utf-8"></script>
</head>〜 省略 〜
- 続けてHTML編集画面で、プラグインカテゴリー１とプラグインカテゴリー２の部分を下のように修正します。修正する前に、プラグインのタイトルのclass(見本ではsidetitle）と、内容のclass(見本ではside)を控えておきましょう。(バックアップを取っておくことを強くおすすめします。)なお、ここの見本にある修正前のプラグインのコードは、ここのテンプレートのものです。使用のテンプレートによってclass名が異なるますので、必ず控えておくようにしましょう。HTML編集画面
〜 プラグインカテゴリー１の修正前 〜
<!--plugin-->
<!--plugin_first-->
<div class="sidetitle">
<%plugin_first_title>
</div>
<div class="side">
<%plugin_first_content>
</div>
<!--/plugin_first-->
<!--/plugin-->〜 プラグインカテゴリー１の修正後 〜
<!--plugin-->
<!--plugin_first-->
<%plugin_first_content>
<!--/plugin_first-->
<!--/plugin-->〜 プラグインカテゴリー２の修正前 〜
<!--plugin-->
<!--plugin_second-->
<div class="sidetitle">
<%plugin_second_title>
</div>
<div class="side">
<%plugin_second_content>
</div>
<!--/plugin_second-->
<!--/plugin-->〜 プラグインカテゴリー２の修正後 〜
<!--plugin-->
<!--plugin_second-->
<%plugin_second_content>
<!--/plugin_second-->
<!--/plugin--> - 使用しているすべてのプラグインの修正をします。管理画面の左サイドの[プラグインの設定]を選択して、下のように修正してください。
- 「HTMLを編集する」→「FC2カウンター」や、「最新の記事」などのプラグインの修正
- 「設定を変更する」→フリーエリアの内容の修正
折りたたみを設定する場合
プラグインの内容の前後に、この色のコードを追加してください。- <div class="sidetitle">のclass名をここではsidetitle2に変更しました。
この設定をしたメニュータイトルが折りたたみのボタンとなります。 - id名はタイトルには☆☆nameを、内容には☆☆listを追加します。
- ３箇所の☆☆はメニューごとに重複しないように設定してください。例えば、「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> - ボタンとなるメニューのタイトルの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からのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪改造が禁止されているテンプレートもありますのでご注意ください。
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
参考記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
↓yozoのブログで今回設定したCSSです。ご参考までに。
2007年01月19日
サイドメニューの折りたたみの設定
いつの間にか、ここのブログもサイドバーに色々設置していて、全部を見るためには大きくスクロールしなきゃいけなくなっていました。そこで、この記事のカスタマイズでサイドメニューをそれぞれ折りたたみできるようにしました。右サイドバーのメニューのタイトルをクリックすれば、そのメニューを折りたたむことができます。また、折りたたんであるメニューは開くことができます。これで、ここの右サイドバーもすっきりしました。
このカスタマイズに際しては、ここのブログのテンプレートを配布してくださっている、小粋空間のyujiroさんの記事小粋空間: サイドメニュー折りたたみスクリプト（cookie等改善版）を基にして、FC2ブログにこのカスタマイズを実装されているお友達showry's Blogのshowryさんの記事showry's Blog: FC2ブログでサイドメニュー折りたたみスクリプト導入とととろのおもちゃ箱のととろさんの記事ととろのおもちゃ箱: サイドバーを折りたたみを参考にさせていただきました。
サイドメニューの折りたたみ
- 小粋空間のyujiroさんの記事小粋空間: サイドメニュー折りたたみスクリプト（cookie等改善版）を開いて、１．menufolder.js ダウンロードからmenufolder.jsをダウンロードしましょう。保存するときの名前はmenufolder.jsのままにしておいてください。そして、そのファイルをアップロードします。
※なお、menufolder.jsについては、様々な設定がありますが、yozoはダウンロードしたままを使用させていただいています。細かく設定したい方は、コチラ→小粋空間: menufolder.js マニュアル - HTML編集画面で、<head>〜</head>の一番下にインクルード文を追加しましょう。HTML編集画面
〜 省略 〜
<script type="text/javascript" src="menufolder.jsのアドレス" charset="utf-8"></script>
</head>〜 省略 〜
- 続けてHTML編集画面で、折りたたみさせたいメニューの１つだけに、下のような設定をします。また、この例は小粋空間様のテンプレートでの設定になっています。
- １つのメニューでまずはテストして、成功してから、残りのメニューも同様に設定することをおすすめします。
- <div class="sidetitle">のclass名をここではsidetitle2に変更しました。
この設定をしたメニュータイトルが折りたたみのボタンとなります。 - id名はタイトルには☆☆nameを、内容には☆☆listを追加します。
- ３箇所の☆☆はメニューごとに重複しないように設定してください。
- 実行スクリプトの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>〜 省略 〜
- ボタンとなるメニューのタイトルの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からのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
参考記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
↓ちょっとした工夫例です。
