ブログ編集記 ASP ・・・個人的メモ
| blog-top |
カテゴリ:スキン編集( 23 )
22.アクセスカウンター設置法
<SCRIPT>タグを使ったアクセスカウンターは、
エキサイトのブログではこのタグが禁止されていますので使えません。
XREA.COMで提供しているカウンターは禁止タグを使っていませんので簡単です。

カウンター設置の際に必要な情報は下記の4つです。あらかじめ準備してください。
★メールアドレス(Mail)・・・記入したアドレスにID・パスワード・サンプルタグが送られます。
★サイトのURL(URL)・・・ブログのURLを記入
★サイト名(SiteName)・・・ブログの題名
★希望ID(小文字で3~12文字)・・・任意の英数字を記入します。

1.XREA (エクスリア)の登録画面にアクセスします。
   http://ct.xrea.com/
登録画面が開いたら、次の2~4は必要ありませんので、5.に飛んでください。
このURLでアクセスできない場合は、2.に進んでください。
2.先ず、XREA (エクスリア)の下記アドレスにアクセスします。
   http://www.xrea.com/
3.アクセスすると、トップページが開きますので、右上の「サービス」をクリックします。
a0087129_18451885.jpg

4.「その他のサービス画面」に変わる。→「COUNTER@XREA (無料カウンター)」をクリックすると、無料高速カウンターの登録画面が出ます。
a0087129_18455020.jpg

5.情報を入力して『お申し込み』ボタンを押すと、登録したアドレスに、すぐメールが送られてきます。
a0087129_18483158.jpg

6.メール内にある『サンプルタグ』を、設置したい場所に貼り付ければ設置完了です。
★サンプルタグ★
<A HREF="http://ct1.xrea.com/cgi-bin/link.cgi?site=あなたのID">
<IMG SRC="http://ct1.xrea.com/cgi-bin/count.fcg?site=あなたのID&img
=00000&ovlp=0&max=6&day=0&tp=0&pic=0" BORDER="0"></A>
6.上記の赤字部分を変える事で、自分好みにカスタマイズできます。
★img=00000・・・カウンター画像の変更が出来ます。
登録画面の中の「サンプルはコチラ」をクリックしてください。
★ovlp=0・・・重複カウントの設定が出来ます。
   (0:重複あり 1:3時間以内の重複無し 2:一切カウント無し)
   設定を1にすると良いでしょう。
★max=6・・・桁数を変更できます。
★day=0・・・通常は変更しないで「0」のままにします。
★tp=0・・・透過処理の有無を変更できます。
   (0もしくは指定無し:透過処理無し 1:透過処理有り)
★pic=0・・・画像種類の変更。ココは特に変更しないで「0」のままにします。
7.詳細は、登録画面内の下記説明を参照してください。
a0087129_18463155.jpg

8.設置する場所
中途半端なところでなければ、どこでも貼り付けられると思います。
例えば①~⑦印や●印のところなどです。
設定→スキン編集→編集→HTML編集
と進んで、適当なところに挿入(コピー&ペースト)してください。
例えば①②はブログタイトルの左、③は右、③<br>タイトルの下などです。
いろいろ試してみてください。

①<DIV CLASS=HEADER>②<$header$>③
<SPAN CLASS=URL>④<$blogurl$>⑤</SPAN>⑥
</DIV>⑦

<DIV CLASS=USERMENU><$adminmenu type=1$>・・・・</DIV>

●<DIV CLASS=PROFILE_TOP>●・・・・●</DIV>●
●<DIV CLASS=PROFILE_BODY>●
●<DIV CLASS=PROFILE>●<$nick$>●</DIV>●
<CENTER>●<$logoimage type=1$>●</CENTER>●
●<$description$>●</DIV>●
<DIV CLASS=PROFILE_BOTTOM>●</DIV>●
●<$calendar type=1$>●
●<$menuleft$>●
●<$banner type=1$>●
●<$xml$>●
[PR]
by yasousuki | 2008-02-13 18:33 | スキン編集
21.リンクを張る
「リンクを張る」
"ある所"から"別の所"を参照したい場合に、"ある所"を「リンク元」、"別の所"を「リンク先」として指定することを、"リンクを張る"といいます。
リンクを張るには、「リンク元」や「リンク先」に印を付ける"タグ"を使います。"タグ"とは「< >」を付けた英文字列のことです。

(1) 同一ページ内にリンクを張る
この例文の中で、"*文頭に戻る*"をクリックしたら、"ジュズダマ(数珠玉)"にジャンプさせます。短い文章なので実感はわきませんが…。
a0087129_22212420.gif
下記の赤字のように、リンク先、リンク元の文字列にタグを付けます。
a0087129_2229355.gif
ここで、< >を含めて、タグはすべて半角です。<x id, <a href の間は半角スペースです。
id="ABC"のABCは任意の文字です。全角の英数字や漢字、仮名も使えます。
<a href="#ABC">*文頭に戻る*</a> は"*文頭に戻る*"をクリックしたら、"id=ABC"にジャンプしろという意味になります。

(2)別のページにリンクを張る
基本的には、同一のページにリンクを張るのと同様です。
異なるのは、青字の"リンク先のページのURL"を"リンク元のタグの中の#の前に追加"することだけです。
a0087129_22484621.gif
ここで、target="_blank"は別ページを別ウィンドーで開く目的で追記しています。これがないと、現在のページのウィンドー表示が消えて、リンク先のページのみが開きます。
target のt の前は半角スペースです。


注意1
リンク先に、既に別のタグが付いている場合、そのタグを利用することができます。
例えば、文字を太字にするタグ<b>ジュズダマ(数珠玉)</b>が付いていたら、
<b id="ABC">ジュズダマ(数珠玉)</b>のように、開始タグ<b>の中にid="ABC"を挿入します。
注意2
リンク元に、既に別のタグが付いている場合、リンク元の文字列のみにタグを追加します。
例えば、文字に色を付けるタグ<span>*文頭に戻る*</span>が付いていたら、
<span><a href="http://borancha.exblog.jp/12345/#ABC">*文頭に戻る*</a></span>
注意3
注意1、注意2にかかわらず、リンク先の<b>ジュズダマ(数珠玉)</b>を一つの文字列とみなして、
<x id="ABC"><b>ジュズダマ(数珠玉)</b></x>
としてもかまいません。
また<b><x id="ABC">ジュズダマ(数珠玉)</x></b>でもかまいません。つまり、異なるタグを組み合わせることができます。
注意4
リンク元についても注意3の考え方を適用できます。
<span><a href="http://borancha.exblog.jp/12345/#ABC">*文頭に戻る*</a></span>を、
<a href="http://borancha.exblog.jp/12345/#ABC"><span>*文頭に戻る*</span></a>
に変えてもかまいません。
                  この方法で文頭に戻るようにしています。→  文頭に戻る
[PR]
by yasousuki | 2007-10-06 22:17 | スキン編集
19.コメントの「鍵マーク」や「コメントマーク」を消す、大きくする方法
例えば、コメントの「 」や「 」のマーク画像がうるさいと感じる場合に隠す方法です。

div.COMMENT_TAIL IMG{height:0px; width:0px; }

をCSSに追加するだけです。
どこに追加してもかまいません。
一番下に追加すると分かりやすいでしょう。

これは<DIV COMMENT_TAIL>○ △ ◇</DIV>のように囲まれた「○ △ ◇」の中の画像を見えなくすることができます。画像がいくつもある場合には、すべての画像に適用されます。

height、 width のサイズを適当に指定すれば、大きくしたり小さくしたりすることもできます。
[PR]
by yasousuki | 2006-11-22 15:44 | スキン編集
18.投稿画像サイズの設定
デジカメで撮影した画像は普通は1600x1200、1280x960、1024x768などで4:3になっています。ブログに載せる場合は、これを640x480以下に縮小して使います。撮影の目的がブログに載せることだけであれば、デジカメの設定を640x480に設定しておくと良いでしょう。

画像を中央配置で一枚ずつ載せる場合はこれで何の問題もありません。
しかし、画像を左右に並べたい場合は、二枚が整然と並ぶように、編集画面でサイズを変更しなければなりません。
この場合は、二枚とも左配置で640x480ならば、例えば220x165に変更します。
通常左画像と右画像の両方とも左配置を指定します。
また、左画像を左配置に、右画像を右配置に指定してもかまいません。
大きいサイズを小さく圧縮していますので、ブログの画像をクリックすると、元の画像サイズまで拡大して、別ウィンドウで表示されます。

これでも良い訳ですが、いちいち640x480を220x165にサイズ変更するのは面倒ですね。
以下のようにすれば、いちいちサイズ変更しなくても自動的に圧縮されます。

1.設定→スキン変更→編集→(スキン編集が初めての場合は「スキン編集を始めます」)と順次クリックします。・・・要するにスキン編集の画面にする訳です。
2.スキン編集の■各部分別横幅:本文450・・・・
  この数字をメモするか、覚えておいてください。
  ・・・・使っているスキンによって数字が異なります。
  (例)紅葉:400px、ダイアリー:450px、ナチュラル:500px、ノートパッド:550px
3.CSS編集を見て、下記のようなソースコードを探してください。
  <スキンによっては、IMG.IMAGE_RIGHT{}がCSSに欠落している場合があります。
    この場合、下記のIMG.IMAGE_RIGHT{}をコピーして、
    IMG.IMAGE_LEFT{}の下に追加してください。>

   IMG.IMAGE_LEFT{
                 MARGIN-RIGHT: 15PX;
                 MARGIN-BOTTOM: 15PX;
                 }
   IMG.IMAGE_RIGHT{
                 MARGIN-LEFT: 15PX;
                 MARGIN-BOTTOM: 15PX;
                 }
4.赤字のように変更、追加してください。
   IMG.IMAGE_LEFT{
                 MARGIN-RIGHT: 15PX; ・・・・・・・・・(1)
                 MARGIN-BOTTOM: 15PX;
                 width: 210px; height: auto; ・・・(2)
                 }
   IMG.IMAGE_RIGHT{
                 MARGIN-LEFT: 15PX; ・・・・・・・・・・・(3)
                 MARGIN-BOTTOM: 15PX;
                 width: 210px; height: auto; ・・・(4)
                 }
ここで下記のようになることを確認してください。(本文横幅=450pxの場合)
(1)+(2)+(3)+(4)=15+15+210+210=450
この450が、さっきメモした450と同じか、小さくなるように、widthの数字を設定してください。
もし、本文横幅が400pxならば、(400-15-15)/2=185 すなわち、width は 185px です。

  MARGIN-RIGHT ・・・画像の右側の余裕サイズ・・・お好みで調整可
  MARGIN-LEFT  ・・・画像の左側の余裕サイズ・・・お好みで調整可
  width  ・・・・・・・・・・・画像の横幅
  height: auto  ・・・・画像の高さを横幅に合わせて自動調整
                  (サイズが決まっている場合は数字で指定しても可)
  width height auto px は半角大文字でも可
  width:210px;などのスペース(の部分)は無くても可

追加:
画像を2枚横に並べた場合は、2枚目の最後に必ず<br clear=all> タグを入れてください。

動作確認したブラウザはInternet Explorer 6.0/7.0 および Firefox 2.0です。
なお、適用は自己責任でお願いします。
[PR]
by yasousuki | 2006-11-04 15:33 | スキン編集
17.投稿記事の文字サイズを大きくする
デフォルトの文字は小さくて、老眼の私には辛い!
そこで文字のサイズを少し大きくすることにしました。

CSS編集から下記を探します。スキンによって内容は多少違うかもしれません。

DIV.POST_BODY { line-height: 150%;
margin-bottom: 20px; padding-left: 20px;
width: 480px; overflow: hidden;
font-size:10.5pt; font-family:sans-serif; }

赤字の部分を追加します。
私の場合は、10pt ではちょっと小さくて、11pt だとちょっと大きかったので10.5pt にしました。好みのサイズに設定してください。

フォントの種類も変えたい場合には青字部分を追加します。
" sans-serif " はデフォルトで設定されている幾つかの書体のうち、ゴシック体のようなヒゲ無し文字で表示されます。
希望する特定のフォント(書体)名を"sans-serif"のところに置き換えます。

[PR]
by yasousuki | 2006-10-13 11:48 | スキン編集
16.リンクに背景色を表示する
投稿記事のなかでリンクを設定しても、閲覧者が見て、リンクの有無が分かりにくい。
そこで、リンクした文字列の背景に色をつけることにしました。

1.リンク設定のHTMLのなかに赤字のようにCSSを直接埋め込みます。

<a href="リンク先URL" style="background-color:pink;">リンクの背景</a>

2.上のように一つ一つ背景色を設定するのは面倒ですね。
投稿記事の中のリンクは全て同色の背景色が付くようにします。
CSS編集にして、下記を追加します。

DIV.POST_BODY a{background-color: pink; } /*リンク背景をピンク*/

ただし記事最下部のタグ(Tags:の右側部)にも背景色がつきます。



[PR]
by yasousuki | 2006-10-12 16:32 | スキン編集
15.ブログタイトルの文字書体を変えてみる
デフォルトの文字フォントは無味無臭で面白くない。
そこで好きなフォントに変えてみた。

★CSS編集にして、下記を探し、赤字部分を追加するだけです。
必ず TAHOMA の前に追加してください。
フォントの種類は好みで変更してください。
フォントの大きさは、"14PT"の数字を変えます。
引用符" "は基本的に不要です。(あっても良い)
ただし「MS 明朝」のように半角スペースがある場合は" "が必要です。

DIV.HEADER {
FONT : BOLD 14PT "HG行書体",TAHOMA;
MARGIN-TOP : 19PX;
}

★使用スキンによっては下記のようなものもあります。
DIV.HEADER {
FONT-FAMILY : "HG行書体",TAHOMA,;
FONT-SIZE : 30PT;
FONT-WEIGHT : BOLD;
MARGIN : 20PX 0PX 10PX 40PX;
LINE-HEIGHT : 100%;
}

★文字の色を変えるには、下記の "COLOR: #000"のカラーコードを変更します。
DIV.HEADER A:LINK {COLOR: #000; TEXT-DECORATION: NONE}

★書体の例・・・ほんの一部です。ワードやエクセルで調べてください。
パソコンにインストールされていないと表示されません。
そのときはデフォルトの標準書体で表示されます。

書体名の漢字は全角、英字は基本的に半角だが全角もある。

「HG行書体」「HGP行書体」「HGS行書体」(英字は半角。違いは?・・・)

「HGP創英角ポップ体」(HGPは半角、ポップも半角)

「CRC&G流麗行書体」(CRは半角、C&Gは全角)

「CRバジョカ廉書体」(CRバジョカ廉書体。CRは半角、バジョカは全角)

「MS 明朝」(MSは全角、明朝との間は半角スペース)

[PR]
by yasousuki | 2006-10-09 12:51 | スキン編集
14.コメントを枠で囲んで分かりやすくする
コメントがいくつも縦に並んでいると、コメント者の文が上なのか下なのか分かりにくいですね。
そこで、コメント文を枠で囲んで分かりやすくしてみました。
CSS編集の下記を探して、赤字部分を書き加えます。
青文字の部分は無くてもいいのですが、注釈として追加しておきます。

DIV.COMMENT_BODY {
/*コメント文を枠で囲む*/border:1px solid; border-color:gray; padding-left:5px;
MARGIN : 3PX 0PX 24PX;
LINE-HEIGHT : 160%;
}

周りの太い枠は違います。
solidをdottedに変えれば点線になります。
border:1pxを2pxにすれば少し太くなります。
grayをredで赤色に、greenで緑色になります。
a0087129_16303399.jpg

[PR]
by yasousuki | 2006-10-08 16:17 | スキン編集
13.メニュー全体に一括スクロールバーをつける
前回の「12.メニューにスクロールバーを付ける」の項目全体を一括してスクロールできるようにします。

HTML全体編集の中でタグ<$menuright$>を探します。a0087129_18174511.jpg

<$calendar type=1$>
<$menuright$>
<CENTER>
<$banner type=1$>
</CENTER$>

タグ<$menuright$>赤字のようにdivで囲みます。
<$calendar type=1$>
<div class=mbody1><$menuright$></div>
<CENTER>
<$banner type=1$>
</CENTER>

CSS編集の末尾に下記ソースを追加します。
div.mbody1{width:200px; height:500px;
overflow:auto; overflow-x:hidden;
overflow-y:auto; text-align:left;
padding:0px; margin:0px;}


「既存のメモ帳・最新のコメント・最新のトラックバック・以前の記事・検索・エキサイトブログ・カテゴリ・ライフログ」全体が一体になって一つのスクロールバーでスクロールします。
[PR]
by yasousuki | 2006-10-02 21:00 | スキン編集
12.メニューにスクロールバーを付ける
メニューの「最新のコメント、エキサイトブログリンク、メモ帳、カテゴリー、タグ・・・」
数が増えてくると、本文より長くなってしまって見ずらいです~
殊に、投稿一件を一ページに設定していると尚更ですね。
そこで、スクロールボックスを作りました。
やりかたは検索すればたくさんヒットしますが、結局どれも同じです。a0087129_23312422.jpg
当たり前?・・・そうですね^^

メニューの各項目にスクロールバーが付きます。(<>は半角です)
1.まず、HTML編集のメニュー部をクリックします。
2.このような2~3行のソースがありますので、
  <$mnbody$>を見つけてください。
<DIV CLASS=MNTTL><$mntitle$></DIV>
<DIV CLASS=MNBODY><$mnbody$></DIV>
 スキンによっては、
<DIV CLASS=MNTTL><$mntitle$></DIV>
<$mnbody$>
 というのもあります。
3.この<$mnbody$>を次のようにdiv で挟みます。
 <DIV CLASS=MNBODY>
 <div class="mbody2"><$mnbody$></div></DIV>

4.次にCSS編集で、一番末尾に以下を書き加えます。
div.mbody2{width:150px; height:250px; overflow:auto; overflow-x:hidden;
overflow-y:auto; text-align:left; padding:0px; margin:0px;}


スクロールボックスの横幅はwidth:150pxの数字を変えて、縦長さはheight:250pxの数字を変えて調整してください。
このスクロールボックスは、既存のメモ帳・最新のコメント・最新のトラックバック・以前の記事・検索・エキサイトブログ・カテゴリ・ライフログのうち"表示する"に設定したものに適用されます。
スクロールの長さよりも表示項目が少ない場合はスクロールボックスは生成されません。
★IE6.0以前のIEでは max- 指定ができないため、縦の長さが一律になり、項目の少ないメニューは下部が空き過ぎるのが欠点です。(このブログの"以前の記事"のように・・・)

★IE7.0ベータ版およびIE以外のブラウザでは height=250px を max-height=250px のようにmax-を追加すれば、項目が少ない場合にも空間が発生しません。


[PR]
by yasousuki | 2006-09-30 15:57 | スキン編集


« blog-top -----