2007年09月05日
カスタムプラグインのデザイン
今回はカスタムプラグインのデザインを、他のサイドバー項目と同じデザインに設定する紹介をしてみたいと思います。
カスタムプラグインには、みなさんそれぞれブログペットなど、いろんなツールを設定されていることと思います。
でもカスタムプラグインには他のサイドバーの項目のようにスタイルシートが適応されません。
これはいろんなツールのデザインへの配慮や、javascriptを用いる場合に枠だけ表示されるのは変だということへの配慮ではないか
っと勝手に思っています
ってことで、スタイルシートを用いたデザインの設定を紹介します。
その前にまず、一応カスタムプラグインの設定場所の確認です。
↓の画像を御覧下さい。

カスタムプラグインの設定は、管理画面TOPからブログ環境設定へと進み、下にスクロールしていくとあります。
1~3のお好きな欄をご使用下さい。
設定
今回はスタイルシートで設定してある「sidetitle」、「side」のクラスを用います。
まずは↓の例を御覧下さい。
1行目の「<div class="sidetitle">~</div>」はタイトルです。
これで他のサイドバーのタイトルと同じデザインになります。
みなさんが設定される内容に合ったタイトルをつけてくださいね。
2行目の「<div class="side">」から最後の「</div>」までがサイドリストです。
設定したい内容を、この間に入力してください。
例えばプチ情報付きのホームページへのリンク集にする場合、
っというようなかんじになります。
※ここで登場したタグの簡単な説明は下の追記に書いておきます。
これで他のサイドバー項目と同じデザインに設定できました。
まとめ
どうでしたか
難しいようで簡単でしょ
でも小さなミスが多いと思います。
例えば「<br>」で改行しなくて文章がつながっちゃったとか、「</div>」などで要素を閉じてなくて表示がおかしくなっちゃったとか
まぁ僕がしょっちゅうするミスなんですけどね・・・
でも簡単に修正できますから、慌てずミスのチェックをしましょう
それではお疲れ様でした
プラグインを用いて楽しいブログにしてくださいね
カスタムプラグインには、みなさんそれぞれブログペットなど、いろんなツールを設定されていることと思います。
でもカスタムプラグインには他のサイドバーの項目のようにスタイルシートが適応されません。
これはいろんなツールのデザインへの配慮や、javascriptを用いる場合に枠だけ表示されるのは変だということへの配慮ではないか
っと勝手に思っています
ってことで、スタイルシートを用いたデザインの設定を紹介します。
その前にまず、一応カスタムプラグインの設定場所の確認です。
↓の画像を御覧下さい。

カスタムプラグインの設定は、管理画面TOPからブログ環境設定へと進み、下にスクロールしていくとあります。
1~3のお好きな欄をご使用下さい。
設定
今回はスタイルシートで設定してある「sidetitle」、「side」のクラスを用います。
まずは↓の例を御覧下さい。
| <div class="sidetitle">項目のタイトル</div> <div class="side"> リスト1<br> リスト2<br> リスト3 </div> |
1行目の「<div class="sidetitle">~</div>」はタイトルです。
これで他のサイドバーのタイトルと同じデザインになります。
みなさんが設定される内容に合ったタイトルをつけてくださいね。
2行目の「<div class="side">」から最後の「</div>」までがサイドリストです。
設定したい内容を、この間に入力してください。
例えばプチ情報付きのホームページへのリンク集にする場合、
| <div class="side"> <a href=http://customshichao.shiga-saku.net/" target="_blank">カスタムしちゃお♪</a><br> <span style="font-size:10px">私のブログです。</span> </div> |
っというようなかんじになります。
※ここで登場したタグの簡単な説明は下の追記に書いておきます。
これで他のサイドバー項目と同じデザインに設定できました。
まとめ
どうでしたか
難しいようで簡単でしょ
でも小さなミスが多いと思います。
例えば「<br>」で改行しなくて文章がつながっちゃったとか、「</div>」などで要素を閉じてなくて表示がおかしくなっちゃったとか

まぁ僕がしょっちゅうするミスなんですけどね・・・

でも簡単に修正できますから、慌てずミスのチェックをしましょう

それではお疲れ様でした

プラグインを用いて楽しいブログにしてくださいね

「<a href="~" target="_blank">~</a>」
リンクの設定です。
「target="_blank"」は、新しいページで開くという設定ですので、同ページで開く場合は設定しなくて構いません。
「<br>」
改行です。
「<span style="font-size:10px">~</span>」
デコ文字の設定です。
この場合、文字の大きさは10pxと設定してあります。
他にも設定が可能ですので、詳しくはみなさんが記事を書かれる際に、デザインモードをコードモードに切り替えたりしてご確認下さい。
リンクの設定です。
「target="_blank"」は、新しいページで開くという設定ですので、同ページで開く場合は設定しなくて構いません。
「<br>」
改行です。
「<span style="font-size:10px">~</span>」
デコ文字の設定です。
この場合、文字の大きさは10pxと設定してあります。
他にも設定が可能ですので、詳しくはみなさんが記事を書かれる際に、デザインモードをコードモードに切り替えたりしてご確認下さい。
この記事へのトラックバックURL
http://customshichao.shiga-saku.net/t50971
この記事へのコメントを書く




