<< August 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>

▼よろしくね▼




徒然もふもふ
「徒然もふもふ」
ライ君・てんちゃん活躍中!




▼カテゴリー▼

▼月別▼

▼最新記事▼

▼最新コメント▼

▼プロフィール▼

▼携帯からもよろしく▼

qrcode

コメントのプラグインに日付をつけてみる

2009.10.26 Monday 15:40 (→昨年の記事

ずっと前に書いた記事「最新記事のプラグインに日付をつけてみる
の改良版とでもいいましょうか・・・

コメントに出たので、久しぶりに頭を使ってみました。


いつ、コメントが入ったかという目安に
日にちなどを表示してみる・・・というカスタマイズです。





管理画面→サイドバー→最新コメントの表示を開く

●画面右上あたりにある「プラグインHTML編集」を開く
(再構築 サイトの確認などの下あたり)

HTMLのところに日付の記述を追加する。


<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%>
<% if:content_recent_comment.type == 0 -%>
<% unless:list_article_child -%><br /><% /unless -%>
<% loop:list_article_child -%>
<div class="sidebody"><a class="aside" href="<% article_child.article.page_url %>#comments"><% article_child.article.subject | html %></a>&nbsp;(<% article.createstamp | date_format("%m/%d") %>:<% article_child.writer | html %>)</div>
<% /loop -%>
<% /if -%>
<% if:content_recent_comment.type == 1 -%>
<% unless:list_article -%><br /><% /unless -%>
<% loop:list_article -%>
<div class="sidebody"><a class="aside" href="<% article.page_url %>#comments"><% article.subject | html %></a><br />
<% loop:list_article_child -%>
 ⇒ <% article_child.writer | html %>(<% article.createstamp | date_format("%m/%d") %>)<br />
<% /loop -%>
</div>
<% /loop -%>
<% /if -%>
<% content.footer -%>
</div>


赤文字を追加します。
青文字の「:」や(かっこ)はお好みで。

日にちだけでなく、時間も入れたいときは「%m.%d %H:%M」とか「%m月%d日」という漢字表記もありかも。
この辺もお好みで。



ちなみに。
上半分はコメントの「ノーマル」表示を選んだときの記述。
下半分はコメントの「ツリー」表示を選んだときの記述です。


設定した後は、しばらくその設定した日時が出ちゃうかも。
新たにコメントをもらったら、そこから正しい日時にはる・・・はず・・・多分・・・モゴモゴ。

Posted by ちゅん | comments(6) | [LOVELOG]カスタマイズ | | このページの先頭へ▲

ブログカスタマイズ〜月別・カテゴリーで記事一覧 2008〜

2008.02.22 Friday 11:15 (→昨年の記事

以前(というかずっと前)に記事にした
「カテゴリーページ」と「月別アーカイブページ」に
見出しをつけて見やすくする

(該当記事はコチラ→ブログカスタマイズ〜月別・カテゴリーで記事一覧〜

・・・というカスタマイズの改良版を書いておこうと思います。

というのも。
昨日からカテゴリーページと月別アーカイブページが分割表示となったので
それによってちょっと自分でカスタマイズしたHTMLを
改良しなければならなかったので・・・

ついで・・・いやいや。
ちゃんと書いておこうと思い立ったわけです。


管理ページ→デザイン(右上)→HTML一覧(左側)
 ここでHTMLの選択をするのですが・・・

カスタマイズHTMLを使っている人→自分のいじったHTMLをさらにいじる。
デフォルトHTMLを使っている人→右上の「HTMLの追加」をクリック
「HTML名」に適当に名前をつけて何もせずに保存
 →すると、今つけた名前でHTMLがいじれるようになるのでそれをいじる。(クリック

HTMLを表示させる
 ○先ほど表示させたカスタムHTMLの画面の上のほうにある
「ページ」という欄の「過去ログ」または「カテゴリ」をクリック
HTMLが何も表示されてない(空白)の人は、下のほうにある
「標準HTMLにする(現在:カスタマイズ)」にチェックを入れて
一度保存してからまた画面を表示させるとHTMLが出てきます。

いじる
(そのままの画面でいじるのは大変なので、
メモ帳とかHTML編集ソフトなどでやるといいと思います。
有名なので「TeraPad」とか)
多分156行目あたりからの
<!-- Content -->
<div class="blog">

という部分を探します。

ここからずらーーーっと・・・多分191行目あたりの
<% /if -%>
<% loop:list_article -%>

ここまでを以下と入れ替えます
(長いので、コピー&貼り付け推奨



<div class="blog">
<h2 class="date">タイトル一覧</h2>

<div class="blogbody">
<div class="main">
<h2 align="center">「<% category.name | html %>」</h2>
<div align="right">
<br>クリックすると、ページ内の記事にジャンプできます。(カッコの数字はコメント数)<br>
各記事の最後にある「タイトル一覧▲」で、ココ(一覧)へ戻ることができます。
</div>
<br>
<% if:page_name eq 'archive' -%>
<div id="navi-top">
<% if:archive_page_name eq 'month' -%>
<div class="navi-name">
<% if:previous_archive -%><a href="<% previous_archive.page_url %>">&lt;&lt;</a> <a href="<% previous_archive.page_url %>"><% previous_archive.createstamp | date_format("%Y年%m月") %></a> | <% /if -%><a href="<% blog.page_url %>">TOP</a><% if:next_archive -%> | <a href="<% next_archive.page_url %>"><% next_archive.createstamp | date_format("%Y年%m月") %></a> <a href="<% next_archive.page_url %>">&gt;&gt;</a><% /if %>
</div>
<% /if %>
<% if:archive_page_name eq 'mday' %><% /if -%>

<% if:archive_page_name eq 'month' -%>
<% if:pager.need_pager -%>
<div class="navi-num">
<% if:pager.previous_page %><a href="<% archive.page_url(pager.previous_page) %>"><% /if %>&lt;&lt;<% if:pager.previous_page %></a><% /if %><% loop:list_pager %> <% if:current_page ne pager_number %><a href="<% archive.page_url(pager_number)%>"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% /if %>&nbsp;<% /loop %><% if:pager.next_page %><a href="<% archive.page_url(pager.next_page) %>"><% /if %>&gt;&gt;<% if:pager.next_page %></a><% /if %>
</div>
<% /if -%>
<% /if -%>
</div>
<% /if -%>

<% if:page_name eq 'category' -%>
<div id="navi-top">
<div class="navi-name">
<a href="<% blog.page_url %>">TOP</a> / <% category.name %>
</div>
<% if:pager.need_pager -%>
<div class="navi-num">
<% if:pager.previous_page %><a href="<% category.page_url(pager.previous_page) %>"><% /if %>&lt;&lt;<% if:pager.previous_page %></a><% /if %> <% loop:list_pager %><% if:current_page ne pager_number %><a href="<% category.page_url(pager_number)%>"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% /if %> <% /loop %><% if:pager.next_page %><a href="<% category.page_url(pager.next_page) %>"><% /if %>&gt;&gt;<% if:pager.next_page %></a><% /if %>
</div>
<% /if -%>
</div>
<% /if -%>

<% loop:list_article -%>
<a href="#<% article.id %>"><% article.subject | html %> (<% article.children_count | __or__ | echo('0') %>)</a> /
<% /loop -%>

</div>
</div>

青字部分はお好みでどうぞ。

これでOKヾ(≧▽≦)ノ


仕上げる
 管理画面のHTMLを上のものに変更して、保存。→必要な部分だけ再構築(「過去ログ」や「カテゴリ」だけでOK)



ちゃんと表示されたか、確認してみましょう♪
できましたか?


多分これで大丈夫だと思うのだけど・・・
カスタマイズの記事を書くのが
ものすごーーーーーーーく久しぶりなので、ちょっと不安( ̄▽ ̄;)

Posted by ちゅん | comments(0) | [LOVELOG]カスタマイズ | | このページの先頭へ▲

最新記事のプラグインに日付をつけてみる

2006.11.06 Monday 23:04 (→昨年の記事

サイドバーのプラグインである
「最新記事の表示」のところ。

記事の題名が並んでいるだけで
イマイチ、いつの記事なのかわからないので・・・

日付を入れてみましたヾ(≧▽≦)ノ

ちょこっとカスタマイズです。

管理画面→サイドバー→最新記事の表示を開く

●画面右上あたりにある「プラグインHTML編集」を開く
(再構築 サイトの確認などの下あたり)

●HTMLのところに日付の記述を追加する。
<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%><% unless:list_article -%><br /><% /unless -%>
<% loop:list_article -%>
<div class="sidebody"><% article.createstamp | date_format("%m/%d") %><a class="aside" href="<% article.page_url %>"><% article.subject | tag_break %></a> </div>
<% /loop -%>
<% content.footer -%>
</div>

赤文字を追加します。
青文字の「:」はお好みで。
(かっこ)で日付をくくりたいときは
赤文字の前後に(かっこ)を入れましょう。



例えば・・・
記事の題名の後ろに(かっこ)をつけて表示した場合は以下のようになります。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<% content.header -%><% unless:list_article -%><br /><% /unless -%>
<% loop:list_article -%>
<div class="sidebody"><a class="aside" href="<% article.page_url %>"><% article.subject | tag_break %></a><% article.createstamp | date_format("%m/%d") %> </div>
<% /loop -%>
<% content.footer -%>
</div>


これで・・・
ツリー表示の方法があれば、うれしいんだけどなぁ。

どこかにないかな〜?

Posted by ちゅん | comments(8) | [LOVELOG]カスタマイズ | | このページの先頭へ▲

ブログカスタマイズ〜長いプラグインをすっきりと〜

2006.11.03 Friday 23:11 (→昨年の記事

以前(ずーっと前)に
フリーエリアが縦長になってしまったときに
スクロールバーをつけてすっきり表示させる

・・・というのをやりましたが。

今回、どうしてもカテゴリーの表示が長すぎるので
スクロールバーをつけたくて
いろいろがんばってみたのですが

上のやりかただとうまくできなかったのです。

そこで、また・・・
検索してやり方を発見っ!


今回は・・・
弱小エンジニアの小言」さんの
サイドバーのプラグインをスクロールできるようにする」です。

これなら、フリーエリアであっても
LOVELOG公式(?)のプラグインであっても
どちらでもすっきりとスクロールバーで表示できます!


さて、やり方なのですが・・・







●管理画面→サイドバー→すっきりさせたいプラグインをクリック

●スクリプトの記述を追加する。
・フリーエリアなら、記述の最後に
・公式(?)プラグインなら「挿入テキスト(下部)」のところに・・・
以下を追加します。
<script language="JavaScript" src="http://blog.livedoor.jp/takoashi/plugin_scroll.js"></script>
<script language="JavaScript"><!--
setPluginScroll( "プラグイン名", "150px", "links" );
// --></script>

赤文字は自分でつけているプラグインの名前(私の場合「▼カテゴリー▼」など
青文字は縦の長さ(私の場合、今回は200px)
緑文字は通常はこのまま。3カラムにしている場合は
右カラムなどでは「links2」などになったりします。


これで保存して、トップページなど再構築でOK!
あーーーすっきり〜ヾ(≧▽≦)ノ



Posted by ちゅん | comments(2) | [LOVELOG]カスタマイズ | | このページの先頭へ▲

画像の拡大表示をかっこよくカスタマイズする

2006.08.19 Saturday 09:25 (→昨年の記事

060812_1131~0001.JPGまずは・・・
この写真をクリックしてみてください。

どうでしょう?
かっこよく拡大されましたか?

本家のブログ(徒然ぶろぐ)で使ったのですが
「lightbox」というプラグインがあるのです。
それを改造してくれている方がいて
LOVELOGでも使えるようになっているのです♪

早速設置方法を・・・
(適当解説なので、初心者さんには難しいかも?
分からなければ質問ください)
(以下、長文です)

●必要なファイルをダウンロードする
コチラからファイルをそれぞれダウンロードします。

●必要な画像をアップロードする
拡大表示したときに使用する画像をアップロードします。
(gif画像とpng画像)
FTPソフトでアップロードでも
LOVELOG管理画面からアップロードでもOK。
ただし、LOVELOG管理画面からの場合は
サムネイルは作成しません。

そして、アップロードした画像のURLを覚えておきます。
(後で使います)

●cssに追加する
自分の使っているcssにlightbox.css の内容を追加します。
(LOVELOGオリジナルcssを使っている場合は
カスタムに変更してから追加します)
その中で画像が2種類記述されているので
そのURLを先ほどアップロードしたURLに書き換えておきます。

●css再構築

●lightbox_plus.jsをカスタマイズする
メモ帳やエディタでダウンロードしたlightbox_plus.jsを開き
画像URL部分をそれぞれアップロードしたURLに書き換えます。

そして、私は必要ない部分は削除しました。
// === main ===
addEvent(window,"load",function() {
var lightbox = new LightBox({
loadingimg:'loading.gif',
expandimg:'expand.gif',
shrinkimg:'shrink.gif',
effectimg:'zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
closeimg:'close.gif'
});
});

この部分のgifのところ(赤字部分)のURLを変更。
私は青字部分が必要ないので削除しました。
この辺はお好みで・・・。

●lightbox_plus.jsをアップロードする
FTPでもいいし、管理画面からでもOK。
アップロード先URLを覚えておきます。

●HTMLをカスタマイズする
各ページのHTMLをカスタマイズします。

<head>〜</head>に以下を追加
<script src="http://自分のURL/lightbox_plus.js" type="text/javascript"></script>

赤字部分は先ほどアップロードしたURLに書き換えます。
トップページのほかにもそれぞれのページ
(記事とかコメントとか・・・)にすべて追加して
再構築します。
(再構築は過去記事は必要ありません。これから書く記事にだけ適用するので・・・)

●記事を書くときに専用タグを書き込む

写真や画像を記事に入れたときに
<a href="http://www.h6.dion.ne.jp/~chunn/LOVELOG_IMG/chunn-2006-08-19T08:48:17-1.JPG" target="_blank";><img src="http://www.h6.dion.ne.jp/~chunn/LOVELOG_IMG/./chunn-2006-08-19T08:48:17-1-s.JPG" alt="060812_1131~0001.JPG" width="112" height="150" border="0" hspace="5" class="pict" align="right" /></a>
こんなタグが自動的に挿入されますが・・・。

この赤字部分を以下に変更します。
<a href="http://www.h6.dion.ne.jp/~chunn/LOVELOG_IMG/chunn-2006-08-19T08:48:17-1.JPG" rel="lightbox";><img src="http://www.h6.dion.ne.jp/~chunn/LOVELOG_IMG/./chunn-2006-08-19T08:48:17-1-s.JPG" alt="060812_1131~0001.JPG" width="112" height="150" border="0" hspace="5" class="pict" align="right" /></a>


これで完了!
記事を投稿して確認してみてください。
かっこよくなりましたか?

ざーっと書いたので
出来なかったり不具合があったら教えてくださいね♪
・・・返事は遅くなる可能性がありますけど・・・(-ω-;)

Posted by ちゅん | comments(8) | [LOVELOG]カスタマイズ | | このページの先頭へ▲

3カラムにする方法〜リニューアル版〜

2006.03.04 Saturday 22:08 (→昨年の記事

今までに3カラムにする方法を記事にしてきましたが、
Javascriptを使う方法や
サイドバーのフリーエリアを使う方法を紹介しました。

LOVELOGがリニューアルしてから、
もうひとつ方法を選ぶことが出来るようになりました。

フリーエリアでの3カラム化
どうしても左サイドバーの一番下に
余計なもの(サイドバーのタイトル)が表示されてしまったのですが、
これが解決されます。

管理画面→サイドバーへ進みます。

そして、プラグイン一覧から
3カラムにした場合に左カラムの一番下に置くプラグインをクリック。
ウチのブログの場合は「最近のトラックバック」ですね。

すると・・・
画面に
・挿入テキスト(上部)
・タイトル
・表示形式
・トラックバック表示件数
・記事表示件数
・挿入テキスト(下部)
・・・とまぁ、こんなようなものが並んでいます。

その、挿入テキスト(下部)
3カラムにするためのタグを入れます。
</div></div><div id="links2"><div>


これで保存→再構築(TOPのみでOK)で反映されるはずです。

もちろん、これをやる前に
3カラム用のcssにしておきますけどね。

この方法なら、かなり簡単に出来るのではないでしょうか?
余計なものも表示されないし♪

ただし!
サイドバーの順番を変えたり、
左カラムの下にプラグインを増やすときなどは
その都度タグを移動させなくてはいけないですけどねー。


Posted by ちゅん | comments(36) | [LOVELOG]カスタマイズ | | このページの先頭へ▲

リニューアル版カスタマイズ〜コメントに絵文字〜

2006.02.10 Friday 00:14 (→昨年の記事

以前に記事にしたコメントに絵文字を使うカスタマイズですが・・・

LOVELOGの大幅リニューアルに伴って
HTMLなどがかなり変更されてしまい、
以前の記事では対応できなくなってしまいました(´Д`;)

なので、ちょっと頭を使って(?)
リニューアル後のLOVELOGでの設置方法を書いてみたいと思います。

もちろん、今回もscriptは全部
stroll::blogさんの「コメントにカスタマイズ絵文字入力機能」からいただいております。

以下、リニューアル後の設置方法です。
〜〜4月30日変更あり〜〜

●scriptを準備する
stroll::blogさんの「コメントにカスタマイズ絵文字入力機能」の記事にある、scriptを3つとも準備します。
画像のURLの間違いが多いので、気をつけましょう。
初心者の方に多いのが(何やらえらそうな文章ですが怜)URL間違いです。
URLとは画像のアップロード先のhttp://から始まり、ファイル名(例えばgazou.gifやgazou.jpgなど)で終わるものです。
管理画面からアップロードするときは特に間違えやすいので、気をつけてみてくださいね♪

●準備したscriptをHTMLに入れる。
管理画面→デザイン→HTML一覧→
カスタムHTML→記事の画面を開きます。
出てきた画面のHTMLをメモ帳やエディタにコピーしてから編集するのがいいと思います。

・1つ目「画像設定」
</head>のすぐ前に入れます。(<% /if -%>の後)

・2つ目「画像リスト出力」
キレイに表示させるために、幅などを指定してみました。
参考にどうぞ↓
<tr><td></td><td>
<div style="width:350px;"><script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能:画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comments_form.body';

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;" onClick="addCustmizeEmoji(' + textarea + ', \'' + list[i][0] + '\');"><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
}
}

// reference from jugem.jp (c)
function addCustmizeEmoji(obj, tag) {
var item = '[' + tag + ']';
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
} else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item + obj.value.substring(endPos, obj.value.length);
} else {
obj.value += item;
}
}
writeCustmizeEmojiTagList();
// -->
</script></div>

これを・・・
<td valign="top"><label for="text">コメント:</label></td>
<td><textarea name="body" rows="10" cols="45" id="text"></textarea></td>
</tr>
この部分の下に入れます。

2箇所ありますが、2箇所とも入れておきましょう。

・3個目「画像変換」
<% /if -%>
<div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a></div>
このすぐ前に入れます。


全部出来たら、保存→再構築♪

出来ましたか?
一応私が試してみたら出来たのですが・・・
「出来ないよーー說」という方は、コメントをお願いします〜。

〜〜4月30日変更あり〜〜
3個目の「画像変換」の設定部分を
リニューアル後は以下のようにしてみてください。
// コメントにカスタマイズ絵文字入力機能:画像変換
function changeCustmizeEmojiTag() {
// (1)コメント全体のタグの id 属性
var commentAreaIdName = '';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'comments-body';

// ***************** 設定ここまで *****************

mia♪さん、情報ありがとう♪

Posted by ちゅん | comments(18) | [LOVELOG]カスタマイズ | | このページの先頭へ▲

| 1/4PAGES | >>