ウィジェット: ミヨウミマネ


ウイジェットを作成してみた。

単純なもの。

意味不明なタグとかは使わない。

ただ「Profile」と題した単純な文章を書けるウィジェット。

このブログの左上の「Profile」です。



デザイン>テンプレート>スタイルシート

に下記を加える。どこでも自分のわかりやすいところに。
/*----*/の直前か、"}"の直後、で切りの良いところがいい。
サイズ、色はご随意に。

下記を追加したら、保存と再構築
--------------------------

/* ウィジェット profile用*/
.prof {
    font-size: 12px;
    color: #333333;
    padding: 10px 0;
}

--------------------------

次に
デザイン>ウィジェット>

ウィジェットテンプレートのタイトル下の「+ウィジェットテンプレートを作成

タイトルは適当に。
例)Profile (このタイトルは表にはでないがこの下のタイトルは出る。)

そして下記を記入する。
---------------------------

<dt class="sidetitle">
Profile
</dt>

<dd class="prof">
ここにメッセージを書きます。
</dd>

---------------------------

「テンプレートの設定」は無視して、保存

画面右の「ウィジェット」か上の「デザイン>ウィジェット>」でもう一度ウィジェットに戻ります。

次にするのは、サイドバーに今作ったProfileウィジェットを埋め込む作業。

無料ブログサービスを使ったことがあるなら、同じようなサービスがあったはず。

「サブ」が左「メイン」が右のサイドバーとなるらしい。

このブログは3カラムなので素直に悩む必要も無いが、2カラムの場合は上記を覚えておくと良い。

今回このプロフィールを左(サブ)のカテゴリーの上に持って行きたかったのでサイドバー(サブ)を選択。


左のインストール済みというのは、今自分のブログに組み込まれているウィジェット。(自分のブログを開いて見れる分)

右の利用可能欄から必要なウィジェットをドラッグして左に持っていけばいいだけ。


変更と保存

再構築

ブログを見て確認。


文字サイズ、色や余白が気に入らなければ追加した「スタイルシート」の値を微調整する。

-----------------------------------------

ウィジェットに記述した内容、タグなどは、他のウィジェット(例えばリンクとか)から拝借してきた。
"dt", "dd"はよくわからないが、"div"で書くと他のレイアウトに影響があったので素直に他のまねをしてみたら成功したと言うわけ。

この調子でただ貼り付けていただけのGoogleAdsenceやMTなどの広告などをウィジェットに収めてみようと思う。









トラックバックURL

このエントリーのトラックバックURL:
http://lavidalenta.com/mt/mt-tb.cgi/100