人気ブログランキング | 話題のタグを見る

○○さんの為のエキサイト・スキン編集ブログ
by skin_dasu
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
カテゴリ
skin編集
投稿&表示方法
コメント欄
背景の変更
メモ帳
その他
タグについて
skin付属
スキン解体
はじめに
以前の記事
2010年 12月
2009年 06月
2009年 05月
2006年 08月
2006年 07月
2006年 05月
2006年 04月
2006年 02月
2006年 01月
2005年 12月
2005年 11月
メモ帳
ご訪問有り難うございます。
なるべく分かり易いように
努力致します。
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧


タイトル部分に枠(罫線)を追加する オマケ編 -その3-
ハイー、今回は「タイトル部分に画像を追加する」のオマケ編 -その3-で、
前回の続きと云うよりはオマケ-その1-のオマケと云った感じです。

(画像が見えにくい場合は、画像を直接クリックしてください。
別ウィンドウが開きます。
また、実際に作業を行う前に、軽く全体に目を通して下さい。)

何がしたいかと申しますと、ずばり当blog本家のTOP枠!!
「画像にタイトルを組み込んで、その一部だけにリンクを貼る」です。
画像にタイトルを組み込むことでTOPの画像もスッキリしますし、
タイトルの一部だけにリンクを貼ることで、マウスも手の指さしマークが減ります。

使用した画像はタイトルの一部でリンクを貼った画像と、↓
タイトル部分に枠(罫線)を追加する オマケ編 -その3-_a0064894_0185080.gif

TOP枠内の背景画像となる↓の2枚だけです。
タイトル部分に枠(罫線)を追加する オマケ編 -その3-_a0064894_0195991.gif


HTML枠内の全体枠内にリンクの指示を行い、
その詳細指示をCSS編集枠で行っただけです。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

HTML枠内の全体枠内に入力したタグは↓

<CENTER>
<DIV ID=BODY>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=740>
<TR><TD VALIGN=TOP WIDTH=740>
<DIV ID=TOP>
<DIV CLASS=HEADER><a href="http://bbjim.exblog.jp/"><img src="http://pds.exblog.jp/pds/1/200603/08/46/2ca_3.gif" width="267" height="92" border="0"></a>
</DIV>
<DIV CLASS=URL><$blogurl$></DIV>

</DIV>

全体の雰囲気が分かりやすいように1行目から記載していますが、
変更入力した部分は太字の箇所だけです。
(これも変わらず <> は表示の都合で全角ひらがなで表記してますが、
実際は半角英数で入力します。)


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
CSS編集枠内では

まず、TOPの詳細指示として↓

DIV#TOP {
background-image: url("http://pds.exblog.jp/pds/1/200603/08/46/top_7.gif"); background-repeat : no-repeat;
BACKGROUND-COLOR: #FF6600;
BORDER-BOTTOM : 2PX SOLID #000;
PADDING : 1PX 0PX 25PX;
WIDTH : 745PX;
HEIGHT=200PX;
}

TOP枠内の背景画像の指示、余白を埋めるオレンジのカラー指定、
画像を囲むラインのサイズとカラー、
背景画像の位置調整、背景画像のサイズ を入力してます。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
次にマイブログのURLの位置調整は↓

DIV.URL {
MARGIN-LEFT : 600PX;
MARGIN-TOP : 1PX;
FONT-FAMILY : VERDANA,TAHOMA ;
FONT-SIZE : 9PT;
}

とURLの位置調整(左隅からの距離)、URLの位置調整(上からの距離)、
URLのフォント(書体)、フォントのサイズ、 となっています。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

以上です。
今回まで続いたオマケ編はあくまで、オマケですので、重要性はございません。
ただ、タグについては少しは以前よりは詳しくなったと思います。

次回はそうですね~、サイドバーのカラー変更かRSSの表示の何れかを予定してます。
# by skin_dasu | 2006-05-03 00:10 | skin編集 | △TOP
タイトル部分に枠(罫線)を追加する オマケ編 -その2-
ハイー、今回は「タイトル部分に画像を追加する」のオマケ編 -その2-で、
前回までのTOP枠(罫線)の下にもう1つTOP枠(罫線)を追加する方法をします。

(画像が見えにくい場合は、画像を直接クリックしてください。
別ウィンドウが開きます。
また、実際に作業を行う前に、軽く全体に目を通して下さい。)


さらに今回も切り張りや自己入力が幾つかありますので、
メモ帳は必需ですよん


では早速始めます。
最初はHTML枠内の全体の <DIV CLASS=URL><$blogurl$></DIV> を
切り取ってメモ帳にペーストします。↓
タイトル部分に枠(罫線)を追加する オマケ編 -その2-_a0064894_19403922.jpg


<DIV CLASS=URL><$blogurl$></DIV> は
マイブログのURL表示のタグです。
詳細は編集ページ内のエキサイトブログタグヘルプをご参考になさって下さい。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

次にメモ帳内で新たに枠を表示させる指示を入力して行きます。
大まかに枠、枠のサイズ、TOPをもう1つ増やすタグ(指示)、
枠内に表示するタグ(指示)←タイトルと上記で切り取ったタグ、
枠の指示を閉じるタグ と云った感じです。

枠(罫線) は

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING= ALIGN=CENTER WIDTH=740>
<TR><TD VALIGN=TOP WIDTH=740>



この間に表示させたい各指示を入力します。

</DIV>
</TD></TR>

(これは相変わらずまるっとコピーして使用出来ません。
各 <> は表示の関係で全角ひらがなで投稿してます。
実際に編集する際は「半角英数」で入力してください)


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
これをHTML枠内に全体枠の<DIV ID=TOP>で始まる枠の
閉じる指示の</DIV>
</TD></TR></TABLE> の下に入力もしくはペーストします。↓
タイトル部分に枠(罫線)を追加する オマケ編 -その2-_a0064894_2084574.jpg

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
次はCSS編集枠内の指示です。

まだまだ続きます。←をクリック
# by skin_dasu | 2006-05-02 19:43 | skin編集 | △TOP
タイトル部分に枠(罫線)を追加する オマケ編 -その1-
どうも画像のUPの調子が悪いんだけど、ここだけ??

ハイー、今回は「タイトル部分に画像を追加する」のオマケ編で、
前回までの枠(罫線)内に表示させて画像に「リンクを貼る」です。
リンクを貼って一体何になるのか、と云う方は暫くお休みしてて下さいませ。


(画像が見えにくい場合は、画像を直接クリックしてください。
別ウィンドウが開きます。
また、実際に作業を行う前に、軽く全体に目を通して下さい。)

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
今回は色々と書き直しがありますので、メモ帳は必需です。
まずマイブログのURLをコピーして、メモ帳にペーストします。↓
タイトル部分に枠(罫線)を追加する オマケ編 -その1-_a0064894_23542196.jpg


ペーストしたURLをリンクの指示に入力し直します。↓
<a href=http://マイブログのURL.exblog.jp/></a>
ここでは↓
<a href=http://skindasu.exblog.jp/></a>
(これはまるっとコピーして使用出来ません。
指示の前後の <>は全角ひらがなになっています。
実際には半角英数で入力します。


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
次に前回使用した画像のURLをマイイメージからコピーしてメモ帳にペーストします。↓
今回はサイズ(width=720 height=220)までコピーして下さい。


タイトル部分に枠(罫線)を追加する オマケ編 -その1-_a0064894_0245143.jpg


メモ帳にペーストしたイメージURLをJ上記のリンク指示に加えるように
入力し直します。↓
<img src=http://pds.exblog.「使用する画像」.jpg width=横サイズ height=縦サイズ border=0>

ココでは
<img src=http://pds.exblog.jp/pds/1/200604/29/94/tcar_1.jpg width=720 height=220 border=0>

(これはまるっとコピーして使用出来ません。
指示の前後の <>は全角ひらがなになっています。
実際には半角英数で入力します。


↑これをまたコピーして上記のリンクの間にペーストします。↓
<a href=http://マイブログのURL.exblog.jp/><img src=http://pds.exblog.「使用する画像」.jpg width=横サイズ height=縦サイズ border=0>
</a>

ココでは↓
<a href=http://skindasu.exblog.jp/><img src=http://pds.exblog.jp/pds/1/200604/29/94/tcar_1.jpg width=720 height=220 border=0></a>


↑これをまたまたコピーしてHTML枠内の全体枠の
<DIV CLASS=HEADER> の後ろににペーストします。
タイトル部分に枠(罫線)を追加する オマケ編 -その1-_a0064894_035111.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
ここで一旦プレビューすると、画像が複数表示されます。↓
タイトル部分に枠(罫線)を追加する オマケ編 -その1-_a0064894_0343155.jpg

これは前回の画像表示指示で、CSS編集枠内に同じ指示があるためです。

画像が複数表示されてますが、マウスを画像当てて、
矢印が「手の指さし表示」に変わっていればリンクは成功です。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
では複数表示を解決していきます。

まだまだ続きます。←をクリック
# by skin_dasu | 2006-05-02 00:09 | skin編集 | △TOP