TypePad：スタイルシートでコピーライトの表示
ココログのあるサイトで、ヘッダー部にコピーライトが表記されているのを見て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は左右の位置です。中央に表示します。好みで変更してください。
以上です。
何か分からない事があればコメント入れてください。
コメント