pukupuku+

**4歳&0歳児子育て日記 in 福岡**

説明しよう!(タイムボカン風w)

2006年05月25日 | puku話
えと、皆さん興味があるか分かりませんが・・・
別ブログで”ブログの編集について”の話題が出たので、これを機に
素人が、手探りでイジっている、現在の「pukupuku+」ブログの
テンプレなどについて多少ご説明をしようかと。
#gooブログご利用の方には参考になるかしら?
#使用するブログ会社、テンプレートで詳細は異なります。


1)ベース

  まず、gooブログの無料サービス範囲内で使える、「CSS編集」が
  できるテンプレートを使用しています。
  私が使っているのはカスタム用の「クリアパープル(左メニュー)」。
  そこのCSS編集ページ
背景とタイトル背景、文字色、本文背景色、
  リンク貼りの設定
など、自分にしか分からないような細かい
  設定をしています。
  #すっごい凝って作っても気付かれなかったり、逆に見づらくて
  ウザくなったりするトコロです。(笑


2)背景を変える
  タイトル背景のましゃ(仮名)の写真は、意識して横に広い写真を
  撮影し、Photoshopソフトで加工しています。
  タイトル欄の大きさにあわせて切り取って、カンパスサイズを変え、
  色を変えたりぼかしたり、レイヤーを何枚か重ねていったり。。。
  完成したら最後にWeb用に容量を軽くしています。
 
 (全て初歩的な処理です
  素材集のHPから頂いた背景のコブタちゃんとましゃの編集画像は
  一度自分のブログの「画像フォルダ」に取り込み、そのURLを
  CSS編集の背景画像設定部分に貼り付けています。
  (方法が合っているかは不明デス)
  現在のコブタちゃんは、更に背景色も本文背景色に合わせて
  うすーい紫?を入れてますね。

3)本文(日記内容)の入力
  HTMLエディターの方で入力。gooは加工した分がリアルタイムで
  プレビューできるので非常に使いやすいです。
  で、基本の文字の大きさを「-1」で固定し、色つけやリンク、画像貼り
  は上に並ぶメニューボタンを使用。
  色つけなど装飾をした後に文章を加えると、色つけしたくないところ
  までカラーになったりするので、「HTMLのソースを見る」(一番右の
  <>ボタン)でHTMLを使って手直しをしています。

4)テーブルを使って・・・(各社共通?)
  写真の横に文字を何行か入れるときや、表の形で作りたいときは
  「HTMLのソースを見る」画面でテーブルをプログラムしています。
  その名のとおり、HTMLで出来ます。テーブルの基本1行目は↓
  <TABLE borderColor=#ccccff cellSpacing=0 cellPadding=2 border=1>
  以下<TBODY><TR><TD>・・・と続きます。(一例です)
  テーブルのプログラミングはベースができれば使いまわしが可能。
  モノによって、枠幅(border=)を”0”にしてなくしたり、枠線と画像・文
  との間隔を変えたりしてます。

  #サンプルは
コチラ
  上の表は枠線アリ間隔広め、下の画像のトコは枠線ナシです。
  
※画像に文字を回り込ませる方法は他にもあります♪

***
そんな感じで、ブログを始めた当初(昨年8月)よりは、多少個性的で
見やすく?なっているかと思います。(注:あくまで自己満足w)
まあ、普通に使っても十分な機能なのですが、多少知識があると
試したくなるのが人のサガで・・・w

HTMLの基本部分は簡単に習得できるし、結構おもしろいですよ。
ネット上に文章を公開していく生活に慣れたら、是非
誰にも気付かれないこだわりで(笑)遊んでみてくださいね~♪


※ココをもう少し詳しく!とか もっといい方法があるよ!ここは違うよ!
  などアドバイスがあったら気軽にコメント↓ください