<   2004年 07月 ( 67 )   > この月の画像一覧

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
 

ローカル環境でCSS編集をする方法(ステップアップ講座)


ちょっとしたテクニックをご紹介します。
このテクニックを使用して、ステップアップしましょう(^_-)-☆
皆さんはCSSの編集をネット上で行っていると思いますが、実はローカル環境でテストすることが可能です。遅い回線を使用している方や、頼まれてCSSを見てあげる時など活躍します。
初心者の方は難しいので、レベルがアップしたら試してください。

転記禁止です、トラックバックでご紹介下さい<(_ _)>


テクニックはこちら>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-31 18:14 | │├テクニック
 

スキンのバックアップに”紙”を使用Win版

私は、スキンのバックアップに”紙”というソフトを利用しています。
以前紹介をしたので利用されている方も多いと思いますが、
今回はこの”紙”を利用したスキンのバックアップ方法です。
(ご自分のスタイルがあると思いますので参考にして気に入ったら利用して下さい。)

すでに、セットアップされていることを前提にしています。


バックアップ方法の一例



1.スキン編集画面を表示します。



a0031863_19341841.gif




2.この画面上でキーボードから、CTRL+A を押してすべてを選択します。
 (マウスの右クリックまたは、ブラウザの編集メニューからもすべてを選択が可能です。)

3. 次に、CTRL+SHIFT+G を押します。(手がつりそうな方はいますか?)
(マウスの左ボタンを押したまま右側にドラックすると紙の箱が表示されるのでこの箱に投げ込んでもOK)

以上の操作でスキンのバックアップが完了です。

4.”紙”の見出しでCTRL+Sで見出しが変更が可能ですので、何のバックアップか分かりやすい名前にしておくと良いです。ちなみに、取り込んだホームページの最後にURLと日付けが付きます。



復元方法の一例



1.”紙”から目的のバックアップしたスキン編集画面を表示します。

2.HTML、CSSなど、コピー&ペーストで復元ができます。

注意:スキンを保存して文字化けしている場合は、もう一度コピー&ペーストをすると直ります。



a0031863_102132.gif紙2001 ver.1.9
動作環境:Windows 95/98/Me/NT4.0/2000/XP搭載パソコン
取扱種別:フリーソフト


ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-30 19:26 | │├テクニック
 

最新のトラックバックのサイト名を改行しないようにしました

最近のトラックバックが追加されてトラックバックをしてもらったことがすぐに分かるのでうれしいです。

この最新のトラックバックのサイト名の部分を改行しないように、
ちょっとだけ変えてみました。

なお、長いサイト名の場合は後ろが...が付いて表示されます。
また、コメントリストのユーザ名と共通部分ですのでそちらにも影響します。

IE(Internet Explorer)専用なのでちょっと気が引けます^^;



a0031863_206671.jpga0031863_2063689.jpg











改行しないようにする方法(IE専用)



CSS編集部分です。

.SMALL {
FONT-SIZE: 11PX;

white-space:nowrap;
text-overflow:ellipsis; /*IE専用*/

}
 
 青字が追加部分です。

文字を小さく表示する方法



CSS編集部分です。

.SMALL {
FONT-SIZE: x-small;

}

赤字部分が修正部分です。
こちらは、IE専用でないので他のブラウザでも表示可能ですが文字が小さすぎて見にくい気がします。


ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-29 20:08 | │├トラックバック
 

トラックバックのバグ?(修正されたみたいです)



私だけかもしれないのですが・・・

最近、トラックバックをするとトラックバックをする相手の記事のリンク先が編集欄から消えてます。

以前はトラックバックをするとトラックバックをした相手先の記事のリンクとサイト名が表示されたと思うのですが。


トラックバックのリンク先が無いとどの記事からのトラックバックか分からないので不便です。

皆さんはどうでしょうか?





追記:04/07/29 19:39:41
今日試したところトラックバックのリンクが直っていました。
エキサイトさん、ありがとう(^_^)/

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-28 07:43 | │├トラックバック
 

コメント欄のバックグランドの色の変え方

コメント欄の色の変え方です。
CSS編集でDIV.COMMENTBACKGROUNDの色を指定することによりコメント欄の色を変えることが可能です。

いろいろ変えたのですが、デフォルトがしっくりしたのでデフォルトに戻しました^^;
でも、現在のブログの色とあわないときや、見にくいときには色を調整することにより見やすくなるかもしれません。
(私のデフォルトの色は#F7F7F7でした。)



コメント欄のバックグランドの色の替え方




DIV.COMMENT {
BORDER: 1PX #D3D3D3 SOLID;

BACKGROUND: #FFFFDE;

PADDING: 15PX;
MARGIN: 20PX 0PX;

}

赤字の部分に好きなカラーコードを指定することによりコメント欄の色の変更が可能です。


今日のポイント
  • 皆さんが書き込んで表示されているコメント欄全体はDIV.COMMENTで指定されています。したがって、DIV.COMMENTに色の指定を行うとコメント欄全体の色が変更可能です。


ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-27 21:41 | │├コメント欄
 

MacでIEの方でもコメントが出来るように・・・


 いつも訪問している流れ星の散歩道(^_-)-☆を運営している
hikkoro-dayori21 さんのブログで紹介していたのですが、MacでIE(Internet Explorer )を利用しているユーザがコメントで文字化けをして入力できないそうです。
 その解消方法をleviathを運営しているakira_kojika さんのブログで紹介しているそうです。
私も、Mac+IEユーザの方からコメントを頂きたいので記事にしました。



Mac+IEの文字化け解消法の一例




修正前(3列スキンデフォルト)
.TXTFLD {
FONT-SIZE:9PT;
COLOR:#000;
BORDER:1PX SOLID #666678;
BACKGROUND:#FFF;
}


修正後
.TXTFLD {
FONT:9PT osaka ;
COLOR:#000;
BORDER:1PX SOLID #666678;
BACKGROUND:#FFF;

}

FONT-SIZE:FONT:に置き換えて、フォントをosaka に指定します。




 今回、えこちんていすとを運営しているekochin6262 さんに私のブログでコメントが文字化けしていないかチェックをしていただきました。
ekochin6262さん、いろいろありがとうございました。そして、hikkoro-dayori21 さんekochin6262さんと連絡を取っていただいてありがとうございます。



ポイント
  • 空白を入れるときには半角空白を入れてください。間違って全角空白を入れると無効になります。

  • を忘れがちです。注意しましょう^^

  • osaka 以外のフォントについては試していません。ごめんなさいm(__)m

    CSSのフォントを用いてWindowsとMacユーザで利用可能なsans-serifでのテストをしようとして、間違って全角空白を入れてしまいNGでした。
    これ以上Macユーザの方にテストしていただくのも悪いと思い確認の取れているフォントを使用しています。



Macユーザの方で他のフォントでも利用可能なものがあれば教えてください。
お願いします。<(_ _)>




ぽっと



情報ネタ元:マック+IEの文字化け解消法 leviath


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-26 20:09 | │├コメント欄
 

ぽっと研究員のお勧め記事(当ブログ内)


記事が多くなってきたのでお役に立てる記事を整理しました。
これは記事リストの抜粋です。
みなさん、ご活用下さい。

インデックス



スキン編集

├マニュアル
│└マイスキン、3列レイアウト作成マニュアル

├投稿欄
│├付箋の改良版
│├ヘッダイメージ設置No2
│├ヘッダイメージ設置No.1
│├小窓の設置方法
│├小見出しの装飾
│├投稿欄のヘッダの立体的化
│├投稿欄の付箋紙
│├投稿にはNewの表示
│├投稿部分の修正
│├飾り付箋紙(イメージバージョン)
│├IE専用影付き付箋紙
│├さらに付箋の改良
│├投稿欄横に猫を表示
│├投稿欄ヘッダ部分にイメージを表示する方法(猫ちゃん)
│└お洒落な付箋紙(両サイドの猫ちゃんバージョン)

├メニュー
│├リンクメニューの設置方法
│├カテゴリーメニューのトップに表示
│├小見出しの装飾
│├メニュにハートを入れました
│├ユーザ管理アイコン
│├右側2列スキンの小窓の設置方法
│├プルダウンリンクメニューの設置方法
│└次のページ>をトップに持ってくる方法

├コメント欄&トラックバック
│├色の指定
│├トラックバックをお洒落に♪
│├コメント入力欄をちょっとおしゃれに♪ パート2
│├コメント入力欄をちょっとおしゃれに♪
│├コメント欄の高さに挑戦!
│├MacでIEの方でもコメントが出来るように・・・
│├コメント欄のバックグランドの色の変え方
│├トラックバックのサイト名を改行しないようにする
│├コメント欄のタイトル部分にプチアニメを入れよう!
│├見えるところのちょっとしたお洒落
│├追加された検索窓にイメージが表示されてこまったら
│├コメント欄の背景の指定方法
│└■サイドのコメントやトラックバックの表示間隔の調整(3列用)

├リンク
│├イメージリンクの外側の枠消去
│└リンクをボタンのように押し下がるように

├検索リンク
│└自分のサイトの記事検索リンクを設置する方法

├バックグランド
│├壁紙を追加しました
│└ふぅ~、やっとトップに空ができた

├スクロールバー
│└スクロールバーの模様替えをしました

├カレンダー
│├今日の日付けにイメージを
│├カレンダーのバックグランドにアイコンを表示する
│└カレンダーのバックグランドにイメージを表示する

├タイトルロゴ
│└ロゴをテキストからイメージに置き換える方法

├情報
│├背景画像の表示方法
│├私のお勧めサイト
│├リンクできない状態でしたm(__)m
│├ブログ停止をクリックしてみたら・・・
│├"rsstimes"ってなんでしょう?(設置してみました)
│├自分が思っていた通りの表示になる色は?
│└gifファイルが保存できなくて困っている方へ

├テクニック
│├コメントアウト
│└ローカル環境でCSS編集をする方法(ステップアップ講座)

└バックアップ
 └スキンのバックアップに”紙”を使用Win版

自作ソフト

HTML 特殊文字変換プログラムについて



ソフト紹介

スクラップブック
紙 2001 - スクラップブックソフト
AreaEditor - blogの入力が簡単になるソフト
アウトラインプロセッサ
スクリーンショットや画像のトリミング
フルカラーペイントソフト




検索

サイト指定検索
翻訳検索
計算できる検索サイト







CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-25 08:56
 

付箋の改良版



以前提案した付箋紙はBLOCKQUOTEを使用していました、CSSでBLOCKQUOTEスタイルの設定をしていたのですが、この方法に少し手を加えることにより、BLOCKQUOTEを付箋紙以外でも利用できます。

今まで、BLOCKQUOTEを他のことに利用しない場合は修正はいりません。




改良付箋紙




/* CSS編集部分(私は最後の部分に追加しました) */
BLOCKQUOTE.husen {
MARGIN: 5px 20px 20px 20px;
PADDING: 5px 20px 20px 20px;
BACKGROUND:#FFFFDF;  /*背景の色*/
BORDER: 1px 1px 1px 1px;
BORDER-COLOR: #00;     /*ボーダーの色*/
BORDER-STYLE:outset;    /*ボーダーのスタイルを立体的にしてます*/

}

青字の部分を追加し、利用の際には、<BLOCKQUOTE class="husen">
と指定して下さい。class="husen"が今回のポイントです。


追記
<BLOCKQUOTE class="husen">

この間に本文を書いてください。


</BLOCKQUOTE>






色を変えたい場合は、投稿欄のところで、
<BLOCKQUOTE class="husen" style="background-color:#FFEBFF;">
なんて指定するとできますよ^^


ポイント
  • クラス分け
    タグの後ろに"."を付けてクラス名前を定義することにより、そのタグをクラスごと分けて利用が可能になります。つまり簡単に言うと、色々なスタイルを適応可能ってことです。タグの後ろでCLASS="クラス名"と記述することにより、利用可能です。






ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-24 11:29 | │├付箋紙
 

私が利用しているリンクメニューの設置方法



私が利用しているリンクメニューですが、以前説明した小窓の応用です。

この小窓は他のメニューに影響しないため、設置が簡単で初心者に向いています。
よろしかったらご利用下さい。スクロールバーの色も各小窓にあわせて設定が可能です。

※左右どちらでも設置が可能で、他のメニューに影響しません。




設置方法 HTML編集


<div CLASS="winodw" style="scrollbar-face-color:#C6D3FF;
">
Link<BR>
│ <BR>
├HTML&CSS関連<BR>
│├<a href="URL">サイト名</a><BR>
│├<a href="URL">サイト名</a><BR>
│├<a href="URL">サイト名</a><BR>
│└<a href="URL">サイト名</a><BR>
└<a href="URL">サイト名</a><BR>
</div>




設置方法 CSS編集


/*小窓*/
.windows{
overflow:scroll;
height:20em;
width:150px;
text-overflow:ellipsis;
word-break:keep-all;
white-space:nowrap;
background-color:#FFFFFF;
border:1px solid #CCC;
text-align:left;
scrollbar-face-color:#FFE8F7;
line-height:93%
}


ポイント
  • スクロールバーの色を変えるには、scrollbar-face-colorで指定します。デフォルトで色を指定して有りますが、各小窓ごとに色を変えるには、style="scrollbar-face-color:#C6D3FF;"を追加することにより可能です。
  • height:20em;で、行数を指定しています。20行以上で小窓が出現しますので、内容が少ない場合は、数字を小さくしてくださいね。2004.8.14追記


追記
私はの設置場所は、<$menuleft$>の前に設置しています。


ぽっと

CopyRight(C) 2004 All rights reserved by potto37




2004年9月18日
soliloquyさんのところで、メモ欄増設について の記事を紹介されています、よろしかったらご覧下さい。
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-24 10:45 | │├メニュー
 

コメント欄の色の指定方法



コメント欄の文字の色が薄くて困っている方がいたので記事にしました。
よろしかったらご利用下さい。

CSS編集でDIV.COMMENT_BODY部分にcolor:を追加することにより文字の色を変えられます。




DIV.COMMENT_BODY {
MARGIN: 6px 0px 20px;
LINE-HEIGHT: 130%;
color:#FF0000;/*赤色に指定*/
}        



ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-24 10:24 | │├コメント欄
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。