==教えることは自分育て==

陣中お見舞い申し上げます。

陣中御見舞

ふ~。暑いですね~。
皆様宿題頑張ってありますね。
15日は日曜日の追い山です。
チャンス到来。
台風が心配ですが、
熱気の迸りを肌で感じてきます。
今日から早寝しましょう。
でもご質問はドンドンどうぞ。
       by Otomi

[PR]
# by otomi7771 | 2007-07-15 02:33 |TOPに戻る
スキン編集ヘルプ
スキンの内部CSS(窓はCSS編集)を書き換え、または書き加えることで自分風にカスタマイズする前に、まずスキン編集ヘルプ(←クリック)を読みましょう。

特に3)、4)については最初はわからないと思いますが、テキストを進むうちに次第に理解できるようになると思います。

要点を箇条書きします。(ヘルプより抜粋)
1)背景イメージとBGMの使用
  遅いロードスピードと読みづらい本文によって不便を与える場合もあります。
  背景イメージとBGM使用をできるだけ控えてください。
  エキサイトブログがおすすめするイメージ使用容量は1スキン当り60KBです。

2)適当なスキンの横幅
  モニターが大きくなり解像度が高くなっても多くのユーザーがウィンドウを最大化
  して見るわけではありません。

  私どもがおすすめするスキンの総横幅は800ピクセル以下です。
  本文の場合400~700ピクセルの間の値をおすすめし、ロゴおよびメニューの場合
  100~300ピクセルの間の値をおすすめします。

3)普通スキンを構成するセクションを大きく分けると次のようになります。
このような構成要素はexblogタグという特殊な機能および値を持っているタグによって表示されます。 エキサイトブログタグは <$タグ名$> 形式に表示されますので カテゴリーのエキサイトブログタグを参照してくだい。
b0063421_0403727.jpg


4)部分別横幅とは?
HTML/CSS編集画面上段にある各部分別横幅が何かがよく理解できない方もいるかと思います。

部分別横幅を指定することとは本文に含まれるイメージ、ロゴイメージそしてメモ帳およびメモ帳にアップされるイメージの横幅をあらかじめ指定することで、サイズを指定しておくと本文、ロゴ、メモ帳などにアップされるイメージや動画などのオブジェクトが自動でリサイズされます。
例えば、本文の横幅を500pixelに指定しておけば、ポスト登録時添付するイメージの横幅が1000pixelであっても自動で500pixeに表示されます。
従ってこの数値は編集するHTMLおよびCSSでの各部分別横幅にあわせてあらかじめ指定しておく必要があります。

5)ほとんどのエキサイトブログスキンは次のような構造を持っています。
CSS FILE
DIV#TOP {属性}
DIV#LEFT {属性}
DIV#RIGHT (属性)

DIV.POST {属性}
DIV.HEADER {属性}
.....

HTML FILE
<DIV ID=TOP>
<DIV CLASS=HEADER><$header$></DIV>
</DIV>

<DIV ID=LEFT>
<DIV CLASS=POST><$post$></DIV>
</DIV>

この図式はとても簡略に表現したものです。
つまりCSSでは大きいセクションを#(ID)に指定して、小さいボックスを.(CLASS)に指定した後HTMLファイルでDIV(ボックスタグ)でそれぞれエキサイトブログタグを囲む形式になっています。

[PR]
# by otomi7771 | 2007-07-14 21:01 | ├スキン編集ヘルプ |TOPに戻る
Jtrimのダウンロード
Googleで「Jtrim」と検索します。【Jtrim】をクリック。
b0063421_23321998.jpg
Trim1.53bは Windows Vistaに正式対応してはいませんが、概ね良好に動作します。

下へスクロール。今回は、解凍ソフトのいらないセットアップ版でダウンロード。
b0063421_2342150.jpg

このファイルを実行または保存しますか。→【保存】をクリック。
b0063421_018255.jpg

保存先を聞いてくるので、私は、Dドライブの中に「downloads」というフォルダを作り、フリーソフト類はいつもここを選択→保存。【jt153b.exe】をWクリック
b0063421_2351948.jpg

「このソフトウェアを実行しますか」→【実行】
b0063421_0494423.jpg

「セットアップウィザードへようこそ」→【次へ】

インストールフォルダの選択。CドライブのProgramFilesのまま【次へ】。
ショートカットがJtirmのまま【次へ】
b0063421_1105545.jpg

追加タスク→【次へ】

インストールの準備が出来ました→【インストール】
セットアップの終了→【終了】
b0063421_111743.jpg

デスクトップにJtrimのアイコンが出来ました。
b0063421_1214158.jpg

[PR]
# by otomi7771 | 2007-07-10 13:00 | ├Jtrim(画像作成) |TOPに戻る
トップ画像の作り方
このスキン『ナチュラル』の場合のTOP画像の変更を説明します。
まず、トップ用の画像をJtrimで作ります。 →Jtrimの使い方。

まずデジカメで撮った原画がかなり大きいので、1024×768にリサイズします。

b0063421_12464112.jpgファイル→開く→写真を選択→開くで原画をだします。

イメージ→リサイズ(ツールのリサイズでもよし)→サイズを記入・縦横の比率を保持するにチェックを入れる→OK。

このチェックが大事。




b0063421_12531090.jpg
イメージ→座標指定切抜き→

座標1  X:0   Y:0
座標2  x:746 Y:170(これはナチュラルのサイズ)を入力。
これでサイズの枠がでます。
b0063421_13103812.jpg


座標指定切抜きのウインドウを出したまま、枠を切り取りたい場所に移動→OK。
b0063421_13301068.jpg


これで希望のサイズ、希望の場所を切り取れました。
b0063421_13224023.jpg

ファイル→名前を付けて保存。名前は英数半角で。
[PR]
# by otomi7771 | 2007-07-10 12:09 | ├TOP画像の変更 |TOPに戻る
画像のないTOPの場合のサイズの取り方
まずブログを立ち上げ、キーボードのPrintScreenをクリック。
これでデスクトップ画面がコピーされます。

Jtrimを立ち上げ、編集→貼り付け。
b0063421_16513257.jpg


イメージ→切り取り。

グレーの部分ピッタリに選択枠を合わせ→OKで切り取ります。

b0063421_16462689.jpg
イメージ→リサイズでサイズがわかります。
座標2から座標1を引いた数値ですね。
b0063421_16542686.jpg

[PR]
# by otomi7771 | 2007-07-10 10:58 | ├TOP画像の変更 |TOPに戻る
ポラロイド風写真のサインの作り方
ソフトはフリーの「Trtrim」を使います。

b0063421_13422157.jpgツールの【新規作成】→【キャンバスの色】を下やじるしで【白】を選び、OK。

ツールの【A】。サンプルとして、例えば「Otomi」と入力。
下の画像を参考にいろいろ設定→OK。
b0063421_21575215.jpg

b0063421_2222910.jpgドラッグで囲み→【編集】から【切り取り】→【編集】から【貼り付け】。


b0063421_22141561.jpgb0063421_2211712.jpg【イメージ】→【透過色設定】→鉛筆マークでサインの周りをクリック→透過(背景市松模様)になる。


【ファイル】→【名前を付けて保存】→【ファイルの種類】はGIFを選び、名前を付けて【ブログでCSS】の【image】に保存で完了です。
[PR]
# by otomi7771 | 2007-07-10 09:12 | ├Jtrim(画像作成) |TOPに戻る
基本的な枠を使って・・・
基本的な枠をいろいろ使って、作って見ました。
HPの台紙の感覚で使って見るのも、面白いですね。

草野町椿ウォーキングに行ってきました。
b0063421_3465969.jpg
岩根椿

[PR]
# by otomi7771 | 2007-07-07 02:42 |TOPに戻る
万華鏡の作り方
お使いの画像ソフトが対応していれば、どれでもよいのです。

サンプル画像↓

b0063421_16432437.jpgb0063421_176229.jpg

ウェブアートデザイナー

編集→ファイルの貼り付け→画像を選んでキャンバスに貼り付け→画像を選択した状態で→ツールから効果→効果パレットの効果から万華鏡をクリック→適用。b0063421_16442928.jpgb0063421_17444853.jpg


ペイントショップ

開く→画像を選んでWクリック→効果から反射効果→万華鏡。

b0063421_1649081.jpgb0063421_175613.jpg


ソフトに寄り、随分違いがあり、面白いですね。
多彩な色使いの画像が面白くできるとおもいますよ。

Jtrimで手作り→紹介サイトでどうぞ。

メニュー→加工から作り方が覗けます。余裕のある方はどうぞ。
アニメーションのフリーソフトGiamの紹介もありますよ~。

PhotoShopELEMENTで手作り→紹介サイトでどうぞ。

下は、Jtrimで作って、アニメーションにしてみました。↓
アニメーションの作り方は、カテゴリーをどうぞ。
b0018441_210942.gif

[PR]
# by otomi7771 | 2007-07-06 16:32 | ├万華鏡 |TOPに戻る
SNF「ブログでCSS」講座第1回目(6/18)
1.復習編が終わりました。

(1)Webページの基本構造
(2)Webページのソースの見方
(3)タグのおさらい

タグのおさらいの意味で、宿題で一つのサムネイルを作っていただきました。
本来は下のように多数の写真を一覧表示するための手法です。
クリックすると大きく表示されます。デフォルトでは大きい画像は左隅に配置されます。



次回は、2.準備編はカスタマイズのときにするとして後に回し、本日は3.CSS編に入ります。
事前にテキストに目を通されておいてくださいね。m(__)m
[PR]
# by otomi7771 | 2007-06-25 12:56 |TOPに戻る
絶対パスと相対パス
パス(PATH)というのは、道順と言う意味です。

絶対パスと言うのは、その名の通りURLを先頭からすべて記述した絶対アドレス(http://ではじまるURL)の事で、 現在地に関係なく、フルパスでアドレスを示します。 ブログがこれですね。

相対パスは、リンク元となるファイルの現在地を基準として、リンク先ファイルの位置を指定する方法です。

サーバー上のファイル構造とローカル(自分のPC)でのファイル構造を同じにしておけば、 相対パスでの記述でメンテナンスが楽になります。 普通のHPでは、相対パスが使われています。

★但し、サイト外部へのリンクやドメインの違うサーバーへのリンクは、常に絶対パスです。

わかったかな~?
??という方→説明サイトへ
[PR]
# by otomi7771 | 2007-06-23 21:52 | ├絶対パスと相対パス |TOPに戻る