カスタマイズ yozoの気が向いたと記2.0

カスタマイズの記事一覧

2006年10月15日

カテゴリの記事一覧を表示させる（FC2のみ）

07/04/07 17:30追記

　のんびり前進じたばた生活のまゆびさんが一覧表示の際に、日付が記事リンクの前に出るようにして見やすく改良してくれましたので、yozoも同様に変更いたしました。まゆびさん、ありがとうございます♪m(_ _)m
まゆびさんの記事はコチラ→カテゴリ別の記事一覧を表示!! のんびり前進じたばた生活

　右サイドバーのカテゴリーをクリックすれば、カテゴリーの記事タイトルの一覧表示させるようにしました。これも月別に記事のタイトル一覧を表示させる（FC2）と同様にFC2ブログユーザーフォーラムで検索して、ヒントを得て、同じくテンプレート中で使える変数一覧を参考にして作成しました。

なお、月別のタイトルの一覧表示についてはコチラ→月別に記事のタイトル一覧を表示させる（FC2）

　訪問してくれた人が記事を探しやすいように、検索とほぼ同じくらいよく使われる、カテゴリ記事のタイトル一覧です。これで過去記事の検索がしやすくなって、過去記事で役に立つものがあるかどうか調べやすくなったと思います。また、yozoは１ページの表示件数を5記事としてますから、それにあわせて５記事ずつタイトルを表示することになります。

残念ながら、2006/10/10現在、１ページの表示件数と一覧のタイトル件数は、同じにするしかできません。（たぶん(ﾟｰﾟ;Aｱｾｱｾ）悪しからずご了承ください。

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

カテゴリの記事一覧を表示させる（FC2のみ）

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにと入力して、検索してください。
- 必ずバックアップしましょう！
　いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
のすぐ上に、


<div class="category_area">
　～省略～
</div>

を追加してください。
～途中省略～


<div id="content">
<div class="blog">


<div class="category_area">
<div class="textcenter"><span style="color:#ff3300; font-size:15px;"><%sub_title> の記事一覧</span></div>
<ul>

<li><%topentry_year>/<%topentry_month>/<%topentry_day> <a href="<%topentry_link>" title="<%topentry_title>へ"><%topentry_title></a></li>

</ul>
<p class="content-nav">
<a href="<%prevpage_url>" title="前のページへ" id="category_nav_previous" name="category_nav_previous">≪新しい記事一覧へ </a>
<a href="<%url>" title="メインへ" id="category_nav_main" name="category_nav_main">メイン</a>
<a href="<%nextpage_url>" title="次のページへ" id="category_nav_next" name="category_nav_next"> 古い記事一覧へ≫</a>
</p></div>



～以下省略～
「スタイルシートの編集[テンプレート名]を編集しています。」の欄の一番下に次のコード追加して、タイトル一覧の体裁を整えます。ここは自由に設定してください。
- 必ずバックアップしましょう！
　いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「css_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
/* カテゴリ一覧表示部分 */
.category_area {
margin: 12px 10px 0px;
padding: 15px;
color: #444444;
font-size: 11px;
line-height: 140%;
background: #ffeebf;
border: 1px solid #666666;
}
/* 中央揃え */
.textcenter
{
text-align:center;
margin-top:5px;
margin-bottom:5px;
}
[更新]をクリックして動作を確認しましょう。

yozoからのお願い

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

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

【カテゴリの記事一覧を表示させる（FC2のみ）の続きを開く】

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

2006年10月14日

月別に記事のタイトル一覧を表示させる（FC2）

07/03/30 19:00追記

　のんびり前進じたばた生活のまゆびさんが一覧表示の際に、日付が記事リンクの前に出るようにして見やすく改良してくれましたので、yozoも同様に変更いたしました。まゆびさん、ありがとうございます♪m(_ _)m
まゆびさんの記事はコチラ→月別の記事一覧を表示!! のんびり前進じたばた生活

　右サイドバーの月別アーカイブをクリックすれば、選択した月の記事タイトルを一覧表示できるようにしました。FC2ブログユーザーフォーラムで検索して、ヒントを得て、同じくテンプレート中で使える変数一覧を参考にしました。このFC2ブログユーザーフォーラムのことはお友達のROOM-Mのmioさんから薦めていただきました。とても勉強になってます。ありがとーございまっす♪m(_ _)m
※注意：このカスタマイズはFC2ブログの独自タグを使ったものですから、FC2ブログの方だけにしか使用できません。

月別に記事のタイトル一覧を表示させる（FC2のみ）

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにと入力して、検索してください。
- 必ずバックアップしましょう！
　いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
のすぐ上のあたりの記事部分の始まりに、下のコードを追加してください。
　

　～省略～


　※yozoの場合は、のすぐ上に追加しましたが、テンプレートによっては、のすぐ上だったり、またコメントがなく、<div class="blogbody">のすぐ上に追加する場合もあります。
～途中省略～



<div class="entry-content">
<div class="entry-body">
<div class="date_area">
<span style="color:#ff3300; font-size:15px;"><%now_year>年<%now_month>月の全記事一覧</span>
<ul>

<li>
<%topentry_month>/<%topentry_day>  
<a href="<%topentry_link>#CommentHeader" title="<%topentry_title>へ"><%topentry_title></a>
</li>

</ul>
<a href="<%prev_month_link>" title="<%now_year>年<%prev_month>月の全記事一覧へ" class="n p<%prev_year><%prev_month>">≪<%now_year>年<%prev_month>月の全記事一覧へ</a>
<%now_year>年<%now_month> 月の全記事一覧
<a href="<%next_month_link>" title="<%now_year>年<%next_month>月の全記事一覧へ" class="n p<%next_year><%next_month>"><%now_year>年<%next_month>月の全記事一覧へ≫</a>
<p class="content-nav">
<a href="<%prevpage_url>" title="前のページへ" id="nav_previous" name="nav_previous">≪New </a>
<a href="<%url>" title="メインへ" id="nav_main" name="nav_main">メイン</a>
<a href="<%nextpage_url>" title="次のページへ" id="nav_next" name="nav_next"> Old≫</a>
</p>
</div></div></div>




<div id="content">
<div class="blog">

～以下省略～

<div class="entry-content">
<div class="entry-body">
　～　
</div></div>
の部分は、ご使用されているテンプレートのHTMLファイル内で<%topentry_body>を検索して、それを囲む部分にあわせてください。

～途中省略～

<div class="entry-content">
<div class="entry-body"><%topentry_body>

～以下省略～
　ここのブログの場合は上のようになっていましたので、
<div class="entry-content">
<div class="entry-body">
　～　
</div></div>としました。
を検索して、そのすぐ下に
を追加してください。
～途中省略～


</div>
</div>


～以下省略～
「スタイルシートの編集[テンプレート名]を編集しています。」の欄の一番下に次のコード追加して、タイトル一覧の体裁を整えます。ここは自由に設定してください。
- 必ずバックアップしましょう！
　いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「css_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
/* 月別一覧表示部分*/
.date_area {
margin: 20px 230px 10px 30px;
padding: 15px;
color: #444444;
font-size: 11px;
line-height: 140%;
background: #ffeebf;
border: 1px solid #666666;
}
[更新]をクリックして動作を確認しましょう。

yozoからのお願い

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

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

2006年10月10日

追記を更新せずに開閉する

　ここのブログでは、記事の一番下の左にある「追記を読む」のリンクをクリックすると、記事全体をもう一度更新して、追記部分が表示されています。それでは、「追記を読む」をクリックするのが面倒となってしまっています。そこで、追記部分を折りたたんで、記事全体をもう一度更新しなくても、追記部分が表示されるようにしました。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

　追記部分の折りたたみは、お友達のROOM-Mのmioさんの記事テンプレート、変えましたで紹介されていたアジアンビートカンケリキッズのbiscoさんの記事追記の展開・折りたたみ及びHere and There BlogのHiroさんの記事エントリー、コメントの折りたたみ-2を参考に以下の手順で設置しました。なお、このスクリプトは海外のブログscriptygoddess様の記事Collapsing entries AND COMMENTSよりお借りしました。
　mioさん、biscoさん、Hiroさん、scriptygoddess様、本当に、ありがとうございました。m(_ _)m

追記を更新せずに開閉する

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の</head>の直前にスクリプトを追加します。
- 必ずバックアップしましょう！
　いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
～途中省略～

<script type="text/javascript">

</script>
</head>
～以下省略～
[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに<%topentry_title>と入力して、検索してください。そして、<%topentry_title>を囲んでいるタグにある、id="<%topentry_no>"の前にaをつけて、XHTML準拠のエラーを回避します。
※id="<%topentry_no>"がない場合は、下の例のように、id="a<%topentry_no>"を追加するようにしてください。これがないと、追記部分を閉じたときに記事のはじめに戻れなくなります。
～途中省略～


<h3 id="a<%topentry_no>" class="entry-header">●<%topentry_title></h3>
～以下省略～
次に、で検索して、～のコードを下のように変更してください。
～途中省略～




<span id="varP<%topentry_no>">
<a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" onkeypress="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;">【<%topentry_title>の続きを開く】</a></span>
<div id="varXYZ<%topentry_no>" style="display: none">
<%topentry_more><br style="clear:both;" />
<a href="#a<%topentry_no>" onkeypress="showMore(<%topentry_no>,0);return true;" onclick="showMore(<%topentry_no>,0);return true;">【<%topentry_title>の続きを閉じる】</a>
</div>



<%topentry_more>

～以下省略～
[更新]をクリックして動作を確認しましょう。

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

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

↓追記の見本　(*^-^)この軽さを体感してください♪

【追記を更新せずに開閉するの続きを開く】

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

2006年10月06日

各記事に編集画面へのリンクを設置する

　過去の記事を見ていて、記事の誤字脱字や、不適切な表現に気付いて、修正したいと思ったことありませんか？ところがFC2ブログでは、過去記事を編集するには、まず、管理者ページの[過去の記事の管理]をクリックして、編集したい記事を検索して、それから編集画面を開くという大変な手間がかかりますね。(2006/10/06現在)　そこで各記事に編集画面へのリンクを設置すして、過去の記事の修正や追記も簡単にできるようにしてみました。
※注意：このリンクはログインしていないと有効になりません。

　各記事に編集画面へのリンクのことは、お友達ののんびり前進じたばた生活のまゆびさんの記事記事編集ボタンをつけました!!及び、まゆびさんが紹介されていた、ROOM-Mのmioさんの記事テンプレート、変えましたを参考に以下の手順で設置しました。
　まゆびさん、mioさん、ありがとうございました。m(_ _)m

各記事に編集画面へのリンクを設置する

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにentry-footerと入力して、検索してください。
※entry-footerがない場合は、topentry_categoryやtopentry_linkなどで検索してみてくださいね♪
- 必ずバックアップしましょう！
　いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
次のコードに自分のブログの[サーバ番号]、[ID]を入力して、下のように、HETMLファイルの<div class="entry-footer">の次に追加してください。
※entry-footerでなく、entry-udateだったりmainEntryDateなどの場合もあります♪
<a href="http://blog[サーバ番号].fc2.com/[ID]/admin.php?mode=editentry&no=<%topentry_no>">Admin</a>

　Adminの部分は、お好みの言葉に自由に変更してください。
　FC2ブログのURLは、
http://[ID].blog[サーバ番号].fc2.com/

　となっています。ここのブログの場合は、URLが
http://yozoblog2.blog63.fc2.com/

　ですので、追加するコードは下のようになります。
<a href="http://blog63.fc2.com/yozoblog2/admin.php?mode=editentry&no=<%topentry_no>">Admin</a>
～途中省略～


<div class="entry-footer">
<a href="http://blog63.fc2.com/yozoblog2/admin.php?mode=editentry&no=<%topentry_no>">Admin</a>
| Posted at <%topentry_hour>:<%topentry_minute>
| <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
| <a class="permalink" href="<%topentry_link>" title="<%topentry_title>の個別ページへ">この記事のURL</a>

| <a href="<%topentry_link>#comments" title="comments<%topentry_no>">Comments</a> [<%topentry_comment_num>]


| <a href="<%topentry_link>#trackbacks" title="trackbacks<%topentry_no>">Trackbacks</a> [<%topentry_tb_num>]

</div>

～以下省略～
[更新]をクリックして動作を確認しましょう。

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

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

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

2006年08月31日

ブログの壁紙（背景）を設置する

　明日から9月です。昨日(8/30)は、大阪も真夏日から開放されたようでした。久しぶりの涼しさですごしやすくなりました。そこで、以前からずっと放置してきた、ここのブログの壁紙(背景)を設置してみました。

ブログの壁紙（背景）を設置する

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定 ]をクリックします。
「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずCSSのコードをコピーして、「css_bk.txt」(例)のようにバックアップファイルを作成しておきましょうね。失敗しても、「css_bk.txt」の内容をコピペすれば、元にもどせますよ♪
「スタイルシートの編集[テンプレート名]を編集しています。」の欄にカーソルを入れて、[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにbody、entry、sideと入力して、検索して、それぞれ下のように設定します。
- bodyで、ブログの壁紙（背景）を設置する。
  /*壁紙の設置*/
  body
  {
  background-image:url(設置したい壁紙のURL);
  background-attachment: fixed;　スクロールしても画像は固定されます。
  }
- entryで、本文の背景を白色にし、枠線で囲む。
  /* エントリー */
  .entry
  {
  width: auto;
  margin: 15px 10px 15px;
  padding: 5px 10px 5px;
  color: #36414d;
  background: #ffffff;　本文の背景を白色(#ffffff)にする。
  background-position: right;
  background-repeat: repeat-y;
  font-size: 12px;
  line-height:150%;
  word-break: break-all;
  border-style: solid;　枠線を直線にする。
  border-width: 1px;　枠線の太さを1pxにする。
  border-color: #ffeebf;　枠線の色を設定する。
  }
- sideで、サイドバーの背景を白色にする。
  /* サイドメニュー */
  .side
  {
  margin: 6px 0 20px;
  background: #ffffff;　サイドバーの背景を白色(#ffffff)にする。
  border-color: #ffd19e;
  color: #444444;
  font-size: 10px;
  _font-size: 9px;
  line-height: 150%;
  }
[プレビュー]で確認してから、[変更]をクリックしましょう。

今回使用させていただいた壁紙は、いつも掲示板のカレンダーをお借りしている、柚莉湖♪風と樹と空と♪のYurikoさんの記事秋の背景素材－柿・林檎・赤とんぼ・ススキと秋の虫よりダウンロードさせていただきました。この壁紙はGIF形式です。

yozoからのお願い
私がここで紹介している方法、ただ、自分がTRYしたことを書いているだけです。もっと簡単で、すばらしい方法もあると思います。ただ、言うまでもありませんが、参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておきましょうね。もし、この記事が「役に立った」とか「わかりやすかった」というのでしたら、よろしければCommentやTrackbackしていただけたら、幸いです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

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

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