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

カスタマイズの記事一覧

2008/11/19 スポンサーサイト
2006/08/27 コメントプレビューを設置
2006/08/15 DrecomRSSを使って他のブログ名／最新記事を表示する
2006/08/14 フリースペースを常にトップに設置する
2006/07/06 リストを表示しましょう♪
2006/05/29 右サイドバーのメニューのツリー化する。(2)

≪新しい記事一覧へメイン古い記事一覧へ≫

2008年11月19日

スポンサーサイト

Admin | Posted at 16:54 | | この記事のURL

2006年08月27日

コメントプレビューを設置

2006/09/13　XHTML対応のため修正

　コメント投稿時に、見やすいようにレイアウトして入力しても、実際投稿されたコメントはせっかくのレイアウトが崩れていることが多くて困っていました。またコメントプレビューがあっても、プレビューで見たとおりのレイアウトとは違って投稿されるものばかりでした。
　ところが、先日、お友達ののんびり前進じたばた生活のまゆびさんのブログへお邪魔したとき、コメントプレビューは、プレビュー通りに、投稿されるすぐれものでした。さっそく本日(8/27)、まゆびさんの記事コメントプレビューを付けてみた!!で紹介されていた、stroll::blogのstrollさんの記事コメントをプレビュー表示及びコメントプレビューを必要なときだけ実行するには？を参考に以下の手順で設置しました。
　まゆびさん、stroll、ありがとうございました。m(_ _)m

コメントプレビューを設置

FC2ブログにログインして、管理者ページの左サイドの「環境設定」の項目[テンプレートの設定]をクリックします。
「現在設定されているスタイル」の表の「編集」の欄の[ 修正 ]をクリックします。
「テンプレートの編集」にある、「HTMLの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これにtextareaと入力して、検索してください。
必ずバックアップしましょう！
いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「html_bk.txt」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「html_bk.txt」の内容をコピペすれば、元に戻すことができますよ♪
の下のtextareaであると確認して、下のようにコードを追加すれば、コメントプレビューの完成です。
　textareaは、の下にもあるので注意しましょう。今はコメント投稿のプレビューを設置します。
　
- <%comment_body>を囲んでいる<div>のclassと
  <div class="comment-content" id="comment_preview">のclassを
  同じにします。(yozoの場合はcomment-contentでした。)
  プレビュー通りに、コメントが投稿されるようにするために、
  <div class="comment" id="c<%comment_no>">となっている部分の
  classと<div class="comment" id="comment_preview">のclassを
  同じにします。(yozoの場合はcommentでした。)
- <textarea id="comment"～>のid(yozoの場合はcomment)と
  下に貼り付ける、JavaScriptの次の部分のidを同じにします。
<div class="comment" id="c<%comment_no>">
となっていたら、
<div class="comment" id="comment_preview">とします。

// コメント入力テキストエリアのid属性
var textAreaId = 'description';→var textAreaId = 'comment';


～途中省略～

<dt><label for="comment">コメント:</label></dt>
<dd><textarea id="comment" name="comment[body]" tabindex="12" accesskey="c" rows="10" cols="30" onkeyup="doCommentPreview()" onmouseup="doCommentPreview()" onblur="doCommentPreview()" onfocus="if (comment.innerHTML =='お気軽にカキコしてください。') comment.innerHTML = '';">お気軽にカキコしてください。</textarea></dd>
<dt><label for="secret">Secret:</label></dt>
<dd><input id="secret" type="checkbox" name="comment[himitu]" tabindex="12" accesskey="p" />サイト管理者にのみ通知する</dd>
</dl>
<input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" onkeypress="changeCommentPreview()" tabindex="40" accesskey="l" /> コメントをプレビューしますか？<br />
<label for="comment_preview">comment preview:</label><br />
<div class="comment" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div><br />
～途中省略～


<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
[更新]をクリックして動作を確認しましょう。

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

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

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

2006年08月15日

DrecomRSSを使って他のブログ名／最新記事を表示する

　yozoは2006/08/15現在、6つのブログを管理しています。そして、原則一日一記事を目標に日々更新しています。メインブログはここのブログですから、ここのブログが更新されていなければ、残りのどこかのブログを更新しているというわけなんです。そのことを訪問してくださるみなさんに伝えるために、6つのブログの新着情報をブログに表示させたいと思って、ネットで検索してみました。
そこで見つけた、気が向いたときとかのsenchouさんの記事ドリコムRSSで、『ブログ名／最新記事』を記事に表示していました。また、お友達のグリーティングカードのモンビッケさんの記事カードに株にパチスロに。でも紹介されていた、ドリコムRSSに登録して、ここのトップのフリースペースに『ブログ名／最新記事』を表示させました。モンビッケさん、senchouさん、ありがとうございました。m(_ _)m

DrecomRSSを使って他のブログ名／最新記事を表示する

ドリコムRSSはJavaScriptが使えるブログだったらどこでも使用できます。

ドリコムRSSの[新規登録・ログイン]をクリックして登録してください。

登録完了したら、ログインして、[RSS]-[RSSリーダー]で、表示したいブログのURLを登録します。

[BLOGLIST]-[カテゴリ設定]-[ブログリスト設定]-[コード生成] で貼り付けるコードを作成して、表示させたい場所に貼り付けるだけです。
yozo関連ブログの最新の記事紹介
カーソルをあてると記事内容の一部が表示されます。

なお、ブログリスト設定ではyozoは以下のように設定しました。参考にしてくださいね。
- 表示方法: 新着順
- エンコード: 自動
- タイトル装飾テキスト　新着終端:<font color="#ff0000">new!</font>
- 新着表示時間: 3時間
- 時間の表示方法: 日付+時間
- メイン表示項目: ブログ名記事タイトル
- メイン表示項目の最大表示文字数: 45
- ポップアップ表示項目:著者名／日時＆概要
- 表示するロゴ: Powered By DrecomRSS

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

スレッドテーマ:おすすめ:ブログ

2006年08月14日

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

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

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

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


<div class="freespace">
ここに記入します。
<div align="center"><h4><span style="color:#007495;">最新の記事紹介</span></h4></div><br />

<ul>
<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>
</ul></div>


～以下省略～

※～は、最新の記事紹介部分です。記事数は、[環境設定の変更]-[ブログの設定]の画面で、一番上の「記事の設定」の「最近の記事リストの表示数」で好みの数にしてください。
※変数の解説
<%recent_link> - URLを表示、
<%recent_body> - 本文の要約を表示
<%recent_title> - タイトルを表示
<%recent_year> - 年を表示
<%recent_month> - 月を表示
<%recent_day> - 日を表示
<%recent_hour> - 時を表示
「スタイルシートの編集[テンプレート名]を編集しています。」の欄の中でクリックします。（この中であればカーソルはどこでも構いません。）
[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに.blogと入力して、検索してください。
.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で背景色をお好みのものに変更してください。
[プレビュー]で確認して、[更新]をクリックしましょう。

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

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

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

2006年07月06日

リストを表示しましょう♪

yozoはブログの記事で箇条書きを多用しています。行頭に「数字」、「abc」、「・」などを手入力しても、問題はないのですが、箇条書きの内容が長くなって、２行になったときに、インデントをつけるのに苦労してました。

手打ちの場合(上)とリストを使った場合(下)

・yozoはブログの記事で
箇条書きを多用しています。
yozoはブログの記事で
箇条書きを多用しています。

HTMLのリスト表示のタグを使えば行頭文字の後ろでインデントが入るので見やすく表示できますね。タグを使うのですから、これはどこのブログでも可能です。

<ul type="行頭マーク"><li>～</li></ul>
で行頭マークつきのリストを表示できます。

行頭マークが『黒丸』はtype="disc"
type="disc"は省略できます

行頭マークが『白丸』はtype="circle"

行頭マークが『四角』はtype="square"

<ul type="disc">
<li>「このソフト警告したら理想かも」
  うさも - 2006/06/26 07:00:25</li>
<li>「背景に発表すればモンビッケ」
  うさも - 2006/06/25 16:22:23</li></ul>
と記述すれば下のようになります。
「このソフト警告したら理想かも」
  うさも - 2006/06/26 07:00:25

「背景に発表すればモンビッケ」
  うさも - 2006/06/25 16:22:23

<ul type="circle">
<li>「この絵かき導入されるエンジニア」
  うさも - 2006/06/25 12:17:47</li>
<li>「会員に思っていますもみじだね」
  うさも - 2006/06/25 12:16:05</li></ul>
と記述すれば下のようになります。
「この絵かき導入されるエンジニア」
  うさも - 2006/06/25 12:17:47

「会員に思っていますもみじだね」
  うさも - 2006/06/25 12:16:05

<ul type="square">
<li>「情報を切り替わりますクロアチア」
  うさも - 2006/06/24 13:43:29</li>
<li>「全力をリンクされたし美しい」
  うさも - 2006/06/24 13:41:14</li></ul>
と記述すれば下のようになります。
「情報を切り替わりますクロアチア」
  うさも - 2006/06/24 13:43:29

「全力をリンクされたし美しい」
  うさも - 2006/06/24 13:41:14

<ol type="行頭文字"><li>～</li></ul>
で行頭文字つきのリストを表示できます。

行頭文字が『数字』はtype="1"
type="1"は省略できます

行頭文字が『abc』はtype="a"

行頭文字が『ABC』はtype="A"

行頭文字が『小文字のローマ数字』はtype="i"
iは小文字のiで入力します。

行頭文字が『大文字のローマ数字』はtype="I"
Iは大文字のIで入力します。

<ol type="1">
<li>「その選手試合したればテレビなり」
  うさも - 2006/06/24 13:34:56</li>
<li>「友達にブログされたし同士だね」
  うさも - 2006/06/24 13:34:28</li></ol>
と記述すれば下のようになります。
「その選手試合したればテレビなり」
  うさも - 2006/06/24 13:34:56

「友達にブログされたし同士だね」
  うさも - 2006/06/24 13:34:28

<ol type="a">
<li>「大会に見ていたのです西ドイツ」
  うさも - 2006/06/24 13:32:41</li>
<li>「エアコンに使用したれば画像なり」
  うさも - 2006/06/22 14:17:08</li></ol>
と記述すれば下のようになります。
「大会に見ていたのです西ドイツ」
  うさも - 2006/06/24 13:32:41

「エアコンに使用したれば画像なり」
  うさも - 2006/06/22 14:17:08

<ol type="A">
<li>「衝撃を管理されたる種類かも」
  うさも - 2006/06/21 11:00:34</li>
<li>「条件や代表するとベッドかも」
  うさも - 2006/06/20 20:25:20</li></ol>
と記述すれば下のようになります。
「衝撃を管理されたる種類かも」
  うさも - 2006/06/21 11:00:34

「条件や代表するとベッドかも」
  うさも - 2006/06/20 20:25:20

<ol type="i">
<li>「飼い主を見ていたのです日記かも」
  うさも - 2006/06/20 13:15:17</li>
<li>「このコチで進出したら相手かな」
  うさも - 2006/06/19 21:24:55</li></ol>
と記述すれば下のようになります。
「飼い主を見ていたのです日記かも」
  うさも - 2006/06/20 13:15:17

「このコチで進出したら相手かな」
  うさも - 2006/06/19 21:24:55

<ol type="I">
<li>「このママが訪問したらクロアチア」
  うさも - 2006/06/19 21:24:38</li>
<li>「会員や発表したる選手なり」
  うさも - 2006/06/19 21:04:05</li></ol>
と記述すれば下のようになります。
「このママが訪問したらクロアチア」
  うさも - 2006/06/19 21:24:38

「会員や発表したる選手なり」
  うさも - 2006/06/19 21:04:05

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

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

2006年05月29日

右サイドバーのメニューのツリー化する。(2)

「Recent Comments」(最近のコメント)、「Monthly Archives」(最近のトラックバック)を記事別にツリー化します。

このカスタマイズは、小粋空間のyujiroさんの記事コメントリストを記事別にまとめて表示する for FC2 ブログを参考にさせていただきました。yujiroさん、どうもありがとうございました　m(_ _)m

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

<div class="sidetitle">
Recent Comments
</div>
<div class="side" id="commentlist">

<span><a href="<%rcomment_link>"><%rcomment_etitle></a></span><ul><li><a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_name></a> <%rcomment_month>/<%rcomment_day></li></ul>

</div>


<div class="sidetitle">
Recent Trackbacks
</div>
<div class="side" id="trackbacklist">

<span><a href="<%rtrackback_link>"><%rtrackback_etitle></a></span><ul><li><a href="<%rtrackback_link>#c<%rtrackback_no>" title="<%rtrackback_excerpt>"><%rtrackback_title></a><br /><%rtrackback_blog_name> <%rtrackback_month>/<%rtrackback_day></li></ul>

</div>
この「テンプレートの編集」画面はそのまま残しておいて、yujiroさんの記事コメントリストを記事別にまとめて表示する for FC2 ブログを別ウィンドウ開いて、「2.」のスクリプトをコピーします。
[Ctrl]＋[F]([Ctrl]キーを押しながら[F]キーを押す意味です。)で、検索ダイアログが開きますから、これに/boxと入力して、検索してください。
の下にスクリプトを貼り付けます。
<br class="clear" />

<div id="footer">Copyright ©2005-2006 yozoの気が向いたと記2.0 by FC2 BLOG All Rights Reserved.</div>
</div>
<script type="text/javascript">
function deleteTextNode(node) {
if(node.parentNode != undefined){
// node.parentNode.removeChild(node);
}
}
function collateData(id) {
var data = '';
var counter = 0;
var ul = new Array('');
var li = new Array('');
var flag;
var elements = document.getElementById(id).getElementsByTagName('span');
for (i = 0; i < elements.length; i++) {
flag = false;
for (j = 0; j < ul.length; j++) {
if (ul[j] == elements[i].innerHTML) {
flag = true;
deleteTextNode(elements[i].nextSibling);
li[j] += elements[i].nextSibling.innerHTML + '\n';
}
}
if (!flag) {
ul[counter] = elements[i].innerHTML;
deleteTextNode(elements[i].nextSibling);
if(li[counter] == undefined){
li[counter] = elements[i].nextSibling.innerHTML + '\n';
} else {
li[counter] += elements[i].nextSibling.innerHTML + '\n';
}
counter++;
}
}
for (i = 0; i < counter; i++) {
data += '<span>'+ul[i]+'</span>';
data += '<ul>'+li[i]+'</ul>';
}
document.getElementById(id).innerHTML = data;
}
collateData('commentlist');
generateNormalTree("commentlist");
collateData('trackbacklist');
generateNormalTree("trackbacklist");
</script>
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
～省略～

</script>
</body>
</html>

※collateData('commentlist');の下に、この3行を追加してください。
collateData('commentlist');
generateNormalTree("commentlist");
collateData('trackbacklist');
generateNormalTree("trackbacklist");
[プレビュー]で確認して、[更新]をクリックしましょう。

yozoからのお願い

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

なお、このテンプレートは、小粋空間のyujiroさん作成のFC2ブログテンプレートからお借りしたものです。

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