フッター部をリッチテンプレート風に
フッター部をリッチテンプレート風にカスタマイズしてみました。
ライン画像を表示し、文字を右寄せにしました。
お花のライン画像は、700kmさまにお借りしました。
ソースは以下の通りです。
URLは、ご自分でアップロードしたファイルに変更してください。
.content p.posted {
color: #666666;
font-family: Verdana, Arial, sans-serif,'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka;
font-size: x-small;
font-weight: normal;
text-align: right;
margin-bottom: 25px;
line-height: normal;
padding-left: 3px;
padding-ritht: 3px;
padding-bottom:3px;
padding-top: 3px;
}
.post-footers {
display: block;
background-image: url(http://xxxxx.cocolog-nifty.com/blog/images/footerline.gif);
background-repeat: no-repeat;
background-position: right bottom;
padding-bottom: 35px;
}
ちょっとくどいかなぁ^^;
「最近のトラックバック」「コメントを書く」を文字入れした画像に差し替えるには、JavaScriptを使用しているのですね。
このスクリプトファイルは、Headタグの中で呼び出されているようなので、テンプレートをいじらないと出来ないのでしょうか。
【追記】
下位になるためか、コメント欄の投稿者名が右寄せになってしまいました。
「コメントごとにアイコンと区切り線を表示する」でミニアイコンを表示していることもあり、以下の1行を追加して左寄せに戻しました。
.comment-content p.posted { text-align: left; }
| 固定リンク
「ウェブログ・ココログ関連」カテゴリの記事
- 特定の記事が保存(再構築)できなかった覚書(2008.04.09)
- CSSでココログの画像をポラロイド風にアレンジ(2006.05.23)
- ココログ公式絵文字のみ、ポラロイド風枠を外す方法(2008.02.10)
- テンプレートをいじらずにコメント欄で絵文字を使う方法(2005.01.14)
- このサイトについて(2004.02.01)
トラックバック
この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/7313/2552381
この記事へのトラックバック一覧です： フッター部をリッチテンプレート風に:
» KOROPPYの本棚: フッター部をリッチテンプレート風に [此処録ANNEX：ココログTIPS]
KOROPPYの本棚: フッター部をリッチテンプレート風に [続きを読む]
受信： 2005.01.13 22:39
コメント
こんにちは。
いつも参考にさせて頂いてます。
このテクも早速使わせて頂きました。ありがとうございます♪
素材に統一感があると全然くどくないと思います。
Koroppy さんのお陰でリッチテンプレートに頼らなくてもかなり自分好みにカスタマイズできて嬉しいです(^^)
投稿 kana | 2005.01.12 23:15
★kanaさん
コメントありがとうございます。
おかげで「投稿者」の1行が、
右寄せになっていることに気がつきました!
上位の設定を変えると、下位にも影響してしまうのですね^^;
慌てて記述を追加しました。
リッチテンプレート対応の仕様変更で、
サイドバーが折りたためなくなったりしましたが、
逆手にとってこちらも楽しんでみました♪
投稿 KOROPPY | 2005.01.13 07:38
やってますね(^^)
.content p.posted じゃなくて .entry p.posted にすれば、追記の .comment-content .posted は不要になりますよ。
投稿 facet | 2005.01.13 18:59
★facetさん
ちょっとリッチテンプレートにも興味がありまして(*^^*ゞ
本当は本文にも愚痴っちゃいましたけど、
マイリストのタイトルを画像に差し替えたかったんです。
でもプロじゃないと無理っぽいので諦めました。
コメント欄で絵文字を使うのもやりたいんですが、
これもテンプレートをいじらなきゃいけないんですよね。
そこまで望むと、プロにするか、
他のサービスに移行するかになるのでしょうね。
それから、アドバイスありがとうございます!
「.content p.posted」を「.entry p.posted」に差し替えました。
私はCSSを勘でいじっているので、どうも適当でいけませんね^^;
でも「text-align: left;」を消すと、
投稿者が右寄せになってしまうんですよ～。
もしかしてやり方間違ってますか?
それともIEだけというオチ...?
投稿 KOROPPY | 2005.01.13 19:22
わ。よく見たら .comment-content は .entry の中ですね。ということは、結局 .comment-content .posted での指定は必要ですね。ごめんなさい。_(._.)_
ところで。
＞ちょっとリッチテンプレートにも興味がありまして(*^^*ゞ
実は私もチャイナにしようとしたんですが、折り畳みが変になっちゃうので、対応版を作るまでお預け状態(^^;
＞マイリストのタイトルを画像に差し替えたかったんです。
そうそう。これが問題の一つで。リッチテンプレでは記事読み込み最後にjavascriptでこれをやられるので、作った折り畳みボタンが消されちゃって、折り畳まれたまま開かないという...(^^; なので、今のままだと、画像になるところは閉じないようにしないといけないんですよ。。。
それから、本文の折り畳みの方も、やっぱりテンプレによってはぐちゃぐちゃになっちゃって、使用不能(^^;
ということで、やはり、新HTMLにあわせたものを作る必要がありそうです。
ところで、この画像への差し替えですが、ベーシックでもできますよ。たぶん。
リッチテンプレ自体がそれをjavascriptで実現しているので、そこに入っている関数を使いまわせば可能なはずです。
しかも、今のテンプレでも、リッチテンプレ内のソースに書いてあるURLからstyles.jsをDL&ULして、それを、たとえば右サイドの一番最初のマイリストで呼び出すようにしてやれば、使えるはずです。
置き換える関数の書式は、こんな↓感じでした。
replaceidHTML('recent-entries', 'h2', '<img src="http://template.cocolog-nifty.com/000003/three_column/component/recent-entries.gif" width="181" height="24" alt="最近の記事" />');
しかも、この関数を見る限り、idが付いている所ならどこでも画像に（というかどんなタグにでも）置き換えられそうですね。
逆に、idが付いてないとこの関数は使えないので、テンプレ付属のリスト（「最近の〜」など）は画像に置き換えられるんですが、idの付かないマイリストは、この関数だけでは無理ということになります。
が。今のサイドバー折り畳みみたいにタイトルから特定してidを付けてやるjavascriptを作ることは可能なので、マイリストのタイトルを画像に差し替えることも可能だと思います。
# 今度の折り畳みではそういう方式を使おうと考えているところなので、このマイリストにidを付けるjavascriptは、そのうち作る予定です。が、もう誰かが作ってるかもしれませんね。
＞コメント欄で絵文字を使うのもやりたいんですが、これもテンプレートをいじらなきゃいけないんですよね。
これ、strollさんが作ったやつですよね。あれなら、ちょっと工夫すればベーシックでも使えるはずですよ。どこでしたっけ？
＞そこまで望むと、プロにするか、他のサービスに移行するかになるのでしょうね。
ということで、まだまだベーシックでもいけますよ(^^)
# ただし、さらに重くなりますけどね(^^;
＞「.content p.posted」を「.entry p.posted」に差し替えました。
_(._.)_
＞もしかしてやり方間違ってますか?
＞それともIEだけというオチ...?
_(._.)_ _(._.)_ _(._.)_
投稿 facet | 2005.01.13 22:42
★facetさん
＞.comment-content は .entry の中ですね。
こういう関係って、ソースを見て把握できるのでしょうか。
それとも以前どちらかでまとめられていた、
相関図を参考になさってます?
私はCSSをいじってみて反応をみる、
という原始的＆感覚的な方法を取っているので...。
マイリストのタイトル差し替えスクリプトは、
HEAD部じゃなくてもよかったんですね。
faviconはサブタイトルで上手く行かなかったので、
これも駄目かなぁって諦めていたのです。
＞idが付いている所ならどこでも画像に
＞（というかどんなタグにでも）置き換えられそうですね。
そんな気がしたので、全てのマイリストを、
文字入れした画像に差し替えようと狙ってたんです♪
でも折りたためなくなっちゃうのは困りますね。
対応版を待って、チャレンジすることにします。
（え、プレッシャー?）
＞これ、strollさんが作ったやつですよね。
あ、そうです～。
「コメントにカスタマイズ絵文字入力機能」です。
プロのお友達がテンプレートいじったと言っていたので、
ベーシックでは無理なのかなぁって諦めてました。
出来るかもしれないんですねo(^^o)(o^^)oワクワク♪
でも重くなるんですね。
今でも充分重いのにね(^^ゞ
投稿 KOROPPY | 2005.01.14 08:16
おはようございます(^^)
＞＞.comment-content は .entry の中ですね。
＞こういう関係って、ソースを見て把握できるのでしょうか。
把握できますが、判りにくいので間違えちゃうというわけで(^^;
＞それとも以前どちらかでまとめられていた、相関図を参考になさってます?
今、折り畳みスクリプトのために、HTML構造を抽出しつつあるところです。固定リンクのページはまだだったので間違えちゃいました(^^;
新HTMLになってからの詳しい図が出てくれていると楽なんですけどね...
＞マイリストのタイトル差し替えスクリプトは、HEAD部じゃなくてもよかったんですね。
HEAD部じゃないとダメな場合も確かにありますね。
faviconはよく知らないのですが、たぶんその口でしょう。
差し替えスクリプトは、ざっと見た感じでは動きそうに思いました。
＞（え、プレッシャー?）
今は他ごとをやってるので、もっとプレッシャーがないと作らないかもしれませんよー（笑）
＞「コメントにカスタマイズ絵文字入力機能」です。
あー、そうそう、puyoyonさんちでしたね＜ココログプロ。
ベーシックでは、まず、strollさんちの1),2),3)をいつものように右サイドバーのメモ欄に続けてコピペ。
次に、2)で
var textarea = 'document.comments_form.text';
とし、
window.document.write('〜');
のところを
document.getElementById('comment-text-field').getElementsByTagName('label')[0].innerHTML += '〜';
にアレンジ。
（puyoyonさんちのように「コメント本文：」の横に絵文字ボタンを出す場合）
そして、3)で
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'center';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comment-body';
とすれば、あとはstrollさんちの通りにすればいけそうに思います。
画像を用意する気力がなくて試してませんのでダメかもしれませんが、その時はまた聞いてください。
投稿 facet | 2005.01.14 17:32
★facetさん
教えていただいた手順どおり記述したところ、
無事表記に成功しました[ハート]
ありがとうございます[♪]
以下、全部画像変換できるかテスト。
[・・・][ハート][涙][がーん][怒][♪][?][!][汗][ひらめき][失恋][ミニハート]
絵文字を表示するようにしたところ、
コメント欄の設定を表示していた文章が、
見えなくなっちゃったんです[がーん]
もしかして同時には使えないのでしょうか[?]
投稿 KOROPPY | 2005.01.14 19:29
うまくいきましたね(^^)[♪]
ところで、コメント設定明示用スクリプトの件ですが、これは絵文字スクリプトとの干渉ではないと思います。
# 前回のコメントを書く時点ですでに働いていなかったような気もするので。
とりあえず、下の方法で試してみてもらえますか？
commentNotice('〜');の直前に、以下のコードを追加：
function commentNotice(html){
var ref = getRefNode4ComNotice();
if (!ref) return;
var div = document.createElement('div');
ref.parentNode.insertBefore(div,ref);
div.innerHTML = html;
}
function getRefNode4ComNotice() {
var n = document.getElementById("comment-separator")
if (n) n.style.marginBottom="-2em";
return n;
}
投稿 facet | 2005.01.14 22:44
直りました、ありがとうございます[!]
いつから表示されていなかったのかしら。
facetさんのところは、今も表示されてますよね。
絵文字についての説明文も入れてみようかな。
絵文字の方ですが、個別ページ以外だとエラーが出るんですよ。
追記のような回避方法を取ってみたのですが、
記述的にOKだと思います[?]
以前「このページの記事」の時に教えていただいたif文を、
そのままかませてみたのですが、自信がなくて[汗]
投稿 KOROPPY | 2005.01.14 23:08