サイドバーに掲示板を設置しました。
本当は自力設置のCGIにしたかったのですが、カスタマイズの余裕がないのであくまで暫定です。必要ない気もするし。
記事に関係ない話題でご用の方はお使いください。
後、検索避けタグなんぞをいれていたのですが、外してみました。ブログであんまり隠れるのもと思い出したので。サイトに戻るリンク貼ってないですし大丈夫でしょう。更新通知は外したままですけどね(^_^;そっちは、その内気が向いたら。
[2007/7/20 追記]
なんか、余りに重い気がするので、しばらく様子見て変えます(汗)
[2007/7/21 追記]
結局自力設置してしまいました(汗)
始めからそうすれば早かった・・・。
[2007/7/27 追記]
こちらのスキンを改造して使わせて頂いています。
ブログ用ミニBBSスキン「shun's apeskin」サンプル＆配布場所
ＣＧＩは「apeboard+」です。
設置方法はスクリプト配布先参照してください。
配布場所は↑にリンクあります。
カテゴリークラウドをサイドバーに入れて、
折角なので、スタイルシートでフォントの太さと色をサイズごとに設定したのですが・・・「雑記」のみ10で他が1か2なのもので余り差が分からない(汗)
一応、色の方はグラデーションかけてあるんですけどねー。
他のカテゴリーも充実させろと言うことか(笑)
タイトルの下辺りに表示されている、ラインカレンダーを表示する為のスプリクトを紹介します。 取り合えず、私は3パターン程試して現在使用しているのはこれとは違うのですが、まずは一番設置が簡単なものからという事で。
このスプリクトは、「あずスタ」様の「ココログ・カレンダーを横一列に表示させるスクリプト」をTypePad用に移植したものです。 諸注意に関しては、同様ですので、詳しくはそちらをご覧ください。 また、このカレンダーは、TypePadの通常カレンダーと同じで、現在の月のカレンダーしか表示しません。 現在、このブログで使用している様に月の遷移が出来る様にするには別のスクリプトとなりますのでご了承ください。
では、設置方法です。
まず、通常のカレンダーを表示させます。
※ラインカレンダーが表示されると、自動で通常のカレンダーは削除されます。
表示した通常カレンダーよりも後に以下の内容をサイドバーでタグを記入できる場所に記述します。
<style type="text/css">
<!--
#banner-body-bottom {
text-align: center;
padding: 4px;
}
#Line-Calendar {
font-family: verdana;
font-size: small;
text-align: center;
padding: 4px;
border: 1px dashed red;
}
#Line-Calendar a {
color: red;
}
#Line-Calendar a:hover {
color: white;
background-color: red;
}
-->
</style><script type="text/javascript" src="http://***/typepad_linecalendar.js"></script>
スクリプトは持ち帰り頂き、自分のブログにアップしてからリンクしてください。 スクリプトはこちら。 http://***/typepad_linecalendar.jsの部分にスクリプトをアップしたアドレスを記入します。
スタイルシートの部分は、独自スタイルシートのファイルに記入しても構いません。
ベーシック等、追記が実装されてないTypePadのエントリー投稿画面に、
追記フィールドを表示させるブックマークレットを作成してみた。
多分、TypePad系全般で使用可能です。
最近、ココログ用のカスタマイズ用JavaScrictを改造したりしているので、その過程でデバックが必要になってきます。
基本的にはFireFoxを使っているので、ほとんどFireFoxのエクステンションFireBugを使ってデバックをしています。 が、たまにFireBug起動時や、IEで挙動が極端に違う時があるんです。
IEではWindows Script Debuggerを使えば、どこでエラーが起こっているか簡単に分かっても、デバックが簡単に出来るソフトなどがありません。
調べてみましたが、すぐ、簡単に使えそうなものがなく、結構皆さん困っているようでした。
そこで、私はどうしているかと言うことですが、アラート表示を使っています。
コードの要所で番号を表示する様にするんです。変数の値が気になる場合は値を表示させる事もあります。
この方法だど、ブラウザに関係なく確実に表示してくれますし、どこまでちゃんと動いているかが確認出来るので以外に便利ですよ。
消し忘れは禁物ですけど(汗)
前回紹介した「TypePad：スタイルシートでコピーライトの表示」のJavaScript版です。
前回の記事ではJavaScriptでは無理だったと書いたのですが、いろいろと試している間に出来ましたので紹介します。
<style type="text/css">
<!--
#copy {
clear: both;
}
-->
</style>
<script type="text/javascript" src="http://***/typepad_copy.js"></script>
<script type="text/javascript">
<!--
typepadcopy("コピーライト");
//-->
</script>
この内容をサイドバーのどこでも良いので、タグが記入できる場所に書き込んでください。コピーライトと書かれている部分にお好きなコピーライトを書き込みます。タグも使えますので、中央に表示したい場合は、コピーライトの部分を<center></center>で囲ってください。
スクリプトは持ち帰り頂き、自分のブログにアップしてからリンクしてください。
スクリプトはこちら。
http://***/typepad_copy.jsの部分にスクリプトをアップしたアドレスを記入します。
以上で表示される筈です。
[2007/6/9 追記]
スタイルシートの記述で文字の色などを指定したい場合は、clear: both;と一緒に
#copy {
}
の中に記述すれば適用されます。
スタイルシートの部分は、独自スタイルシートのファイルに記入しても構いません。
ココログのあるサイトで、ヘッダー部にコピーライトが表記されているのを見てTypePadでもやってみたいと思い実践してみました。
方法として、2つ思いつきました。
まず、JavaScriptを使用する方法。
これは、TypePadはココログと違い、ヘッダー部にタグが存在しない為、無理やり挿入するしかありません。そこでいろいろ試してみたのですが、無理のようです。
[2007/6/6 追記]その後の実験の結果、表示出来ました。別記事にて紹介します。
そこで、2つめの方法。スタイルシートを使用する方法です。
この方法だと更に2つ考えられました。
まず、「content:」を使用してテキストを挿入する方法です。
ですが、この方法だとIEでは反映されません。
仕方ないので最後の方法です。
コピーライトの部分を画像で作成し、それをスタイルシートで配置する方法です。
では、実際に方法を記載します。
１．まず、手ごろなコピーライトの画像を作成します。
表記するコピーライトの内容については、お好きな様にどうぞ。
この辺の詳細について私に聞かれても困りますので、ご自分で調べてください。
画像サイズのお勧めは、横幅はタイトル部分の画像よりも小さいものです。
これより大きいと背景画像を設定している場合はみ出て見っとも無い感じになってしまいます。
縦幅は好きなサイズで良いと思います。
まあ、本文で使用しているフォントサイズぐらいがベターかと思います。
ちなみに、私の使用している画像サイズは、横380px × 縦33px です。
画像の保存方法は、GIFかPNGがお勧めです。
JPEGだと次第に劣化しますので。
色はご自由に。
※ちょっとした裏技
コピーライトをエントリーに書き込み、記事として表示してみましょう。
そうすると、良い感じのサイズのものが表示されると思います。
これをサイズ指定でスクリーンキャプチャするとちょうど良いサイズの画像が作成出来ます。
２．作成した画像をブログにアップします。
どこでも良いです。好きなところへ。
ただし、アップした場所のアドレスは覚えておいて下さい。
３．スタイルシートを記載します。
以下のスタイルシートをスタイルシートの書き方にそって記載してください。
場所はスタイルシートが書き込める場所ならどこでも良いです。
サイドバーとか、副題とか。
後、独自スタイルシートの中に書いてしまっても平気です。
<style type="text/css">
<!--
#container {
background-image: url(http://***/+++.gif);
background-repeat: no-repeat;
background-position: center bottom;
}
-->
</style>
background-image: url(http://***/+++.gif);
この場所には、先ほどアップした画像のアドレスを入れます。
background-repeat: no-repeat;
画像を繰り返さない指定です。
background-position: center bottom;
画像の表示場所を指定します。
ヘッダー部に表示したい場合は必ず「bottom」にしてください。
centerは左右の位置です。中央に表示します。好みで変更してください。
以上です。
何か分からない事があればコメント入れてください。
やっとこカスタマイズもひと段落ついたので、
使用したスクリプトを解説付で紹介しようかと思ったのですが、
元のスクリプトはココログ用な為、TypePadに対応させる為と、
自分の好みで機能を増やしたりでいじり倒し過ぎて
人様に渡せる状態じゃなかった(汗)ので整理しました。
順次紹介したいと思います。
あ、その前にスタイルシートの方やろうかなあ・・・。
ベ－シックでスタイルシートを対応させるのも裏技な感じですが、
更に裏技気味の事をしてJavaが有効の時と無効の時で表示を変えたりとかしています。
まあ、気が向いた順に順次紹介って事で(爆)
うちのブログで使ってるスクリプトで早く詳細が知りたい物がある方は
コメントいれてくださいませ。
出来る限り優先して紹介します。
[スタイルシート]
・TypePadベーシックへのスタイルシートの対応(簡単に)・フッダー部にコピーライトの表記
・Java有効/無効時で表示の切り替え
[JavaScript]
・表示のAjax化
・タイトル一覧
・全文検索
・全文検索ブックマークレット
・カテゴリリストプルダウンメニュー化
・月別バックナンバープルダウンメニュー化
・コメントリストをツリー化
・最近の投稿リストをツリー化
・動的カレンダー
・動的ラインカレンダー・通常ラインカレンダー
・サイドバー折りたたみ
・エントリーフッターにトップへのリンク
・ブログ内の画像一覧表示
・ブログ内の画像一覧表示ブックマークレット・フッダー部にコピーライトの表記
タイトル一覧と概要を表示するスプリクトを使っているのですが、なぜかIEだと日付の取得が出来ず表示出来ません。FireFoxならちゃんと動くのに。意味不明です。
-----------------------------------------------------------
[追記] 2007.3.19
なんとか取得できる様になりましたー。
なんだか急に仕様が変わったみたいですねー。管理画面のデザインの所ががらりと変わってました。アーカイブで件数を出せる様になったのは良い感じだと思います。
が、各記事のタイトルに個別ページへのリンクを貼るのはどうかと。強制で外せないし…。しかも、デザインでリンク部分は色が違ったので背景と一体化して凄く見づらくなってました。
とりあえず、救済処置として該当部分のクラス指定でリンクのスタイルを変えましたが…やっぱりリンク外したい。
どうせ、そこにリンクあるんだからとフッタの個別ページへのリンク消してみましたが。
うーん、微妙な仕様変更はやめて欲しいわ。
変更ついでにカテゴリーへのプルダウンメニュー付けてみましたー。後は、タイトルと概要の一覧をトップとバックナンバーでしか動かなくしてみたり。要するに、バックナンバー一覧と個別ページでは動きません。必要ないですしね。
最近のコメント