<< StepUp!JUGEMがバージョンアップしました!! | main | スパム(荒らし)対策をしよう!! >>

フキダシブログにチャレンジしよう!

今日のカスタマイズ講座は、JUGEMユーザーの方からのリクエストに応えるよ!

どんなリクエストだったの??

うん。StepUp!JUGEMを見てくれている方から、このブログみたいにフキダシ風にブログを作ってみたい!っていう質問があったんだ。

あー、私たちがまさに今しゃべっている、このフキダシね。

おっけおっけー!ゼロからやるのは難しいから、まずは 仕組みを理解することと、サンプルを用意したので、それで始めてみたらどうかな??

シラッキー先生!!

================



まずは画像の準備が必要だよ。自分で用意してもいいし、 用意したサンプルを見本に作ってみてね!!

フキダシ画像を作る時は、以前特集した「トップ画像の作り方」も参考になるからチェックしてね。

作った画像は忘れずに「画像の管理」にアップロードだよ。

サンプル画像はこちら!!

フキダシ画像:上部
フキダシ画像:下部


  


▼CSSのサンプルソース

※画像のURLは、管理者ページ「画像の管理」で確認してね!

実際にテンプレートをカスタマイズするよ。用意したサンプルのソースを使っているテンプレートに挿入するんだ!

場所は「CSS編集」内なら、どこでもOKなんだよね。

ほかのソースを上書きしないように気をつけて!



▼記事投稿用のサンプルソース

※「HTMLモード」か「シンプルエディタ」で投稿してね!


実はもう準備は整っているんだ。あとは実際に記事を書くだけだよ!

え!もうおしまい!?

うん。ただ記事を書くときに、普通に書くだけじゃフキダシは表示されない。

何か特別な書き方があるの??

さっきCSSに追加したソースを呼び出すためのソースコードを書かなくちゃいけないんだ。

「ウィジウィグエディタ」を使っている場合は、「HTMLモード」に変更しないと書けないわね。要チェック!!


ざっくりとした仕組みはこんな感じだよ。 どのソースがどこの部分に該当しているか書いてあるからじっくり研究してみてね!!

うう!頭がパンクしそうだけど頑張ってみるよ!!

まあ、あれだね、難しかったら、用意したサンプル画像の 「好きなキャラクタを入れてください」の部分に好きな画像を当て込んで、あとはそのまま使ったらいいよ。

まずはチャレンジしてみろってことね!

そうねー。

さっきまでと勢いが違う・・・・

じゃあ、ちょっと難しいかもしらんけど「千里の道も一歩から」精神でがんばってくださーい。

は、ハーイ!!


コメント
リクエストで、
次は1件1件の記事の周りを囲む枠の作り方を教えて頂きたいです。
  • ミズキ
  • 2010/03/10 9:12 PM
管理者の承認待ちコメントです。
  • -
  • 2010/04/29 2:14 AM
コメントする
※JUGEMの機能に関するご質問などはお問い合わせフォームまでお願いします。









この記事のトラックバックURL
トラックバック
関連の記事

最新の記事
StepUP!JUGEMからの
お知らせ
■ お勧めブログ投稿フォーム■
プロフィール
カテゴリーから記事を読む
月別で記事を読む
Stepup!JUGEM内で検索