スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

No.18 カスタムテンプレートの方だけのスタイルの活用

 今日は難しくて息抜きにはならないかもしれませんが、本来のスタイルの用い方を使って、ちょっと裏技的なブログの小技を書いてみました。


 Gooブログのほとんどの方が、関係ないかもしれません。この記事は、Gooブログのカスタムテンプレートを使っている人だけの人、あるいは、テンプレートを自分でカスタマイズ変更することのできるブログを利用されている方だけに有用です。

 今まで、画像やテキストをタグと、開始タグに記したスタイルでブログ上に表示することをやってきました。しかし、スタイルを長々と書いていると、開始タグが長くなって、ソースの見通しが長くなります。そこで、いつも使うスタイルは、テンプレートの中で自作しておいて、ソースをシンプルに表記する方法です。
 まず、編集画面からテンプレートの編集を選択します。現れた場面で、テンプレートのテキストボックスが出ない方は、この記事のサポートがいになります。

 テンプレートのテキストボックスが出ましたら、まず、テキストボックス内のすべてを選択してコピーし、テキストエディター等に張り付けて、ブログテンプレート保存.txt などのファイル名で保存します。もしテンプレートの変更に失敗したときに、元の状態に戻せるようにしておくわけです。

 次に、テンプレートの自分で判り易い所に、自分のスタイルを定義します。たとえばdonguriというスタイルで、画像の4ピクセルの枠線を表示して、右寄せフロート表示をして、テキストとの間隔を10ピクセルとるというスタイルを追加します。周りのスタイルをまねてなってください。

.donguri {
border : solid 4px;
float : right;
margin : 10px;
}

追加書き込みが終わりましたら、テンプレートを保存します。

 そして、画像にそのスタイルを適用します。
テンプレートの定義を利用しない場合は

<:img src="画像のURL" style=" border : solid 4px; float : right; margin : 10px;" />

となるところを、donguriというスタイルを適用すれば

<:img src="画像のURL" class="donguri" />

と簡単に記述できます。

また、編集画面中の etbody というスタイルを検索して、そこに、

position : relative;

というスタイルを追加してやれば、記事の中で画像やDIV領域を絶対配置すると、記事中にしっかり絶対配置されるようになります。

 とソースをシンプルにして見やすくするためには、テンプレートというスタイルシートを上手に書き換えることで実現できます。

スタイル名は、いくらでもつけることができますので実験してみてください。

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。