ちょっとしたテクニックをご紹介します。
このテクニックを使用して、ステップアップしましょう(^_-)-☆
皆さんはCSSの編集をネット上で行っていると思いますが、実はローカル環境でテストすることが可能です。遅い回線を使用している方や、頼まれてCSSを見てあげる時など活躍します。
初心者の方は難しいので、レベルがアップしたら試してください。
転記禁止です、トラックバックでご紹介下さい<(_ _)>
テクニックはこちら>>
私は、スキンのバックアップに”紙”というソフトを利用しています。
以前紹介をしたので利用されている方も多いと思いますが、
今回はこの”紙”を利用したスキンのバックアップ方法です。
（ご自分のスタイルがあると思いますので参考にして気に入ったら利用して下さい。）
すでに、セットアップされていることを前提にしています。
バックアップ方法の一例
１.スキン編集画面を表示します。
２.この画面上でキーボードから、CTRL+A を押してすべてを選択します。
（マウスの右クリックまたは、ブラウザの編集メニューからもすべてを選択が可能です。）
３. 次に、CTRL＋SHIFT+G を押します。（手がつりそうな方はいますか？）
（マウスの左ボタンを押したまま右側にドラックすると紙の箱が表示されるのでこの箱に投げ込んでもOK）
以上の操作でスキンのバックアップが完了です。
4.”紙”の見出しでCTRL＋Sで見出しが変更が可能ですので、何のバックアップか分かりやすい名前にしておくと良いです。ちなみに、取り込んだホームページの最後にURLと日付けが付きます。
復元方法の一例
１.”紙”から目的のバックアップしたスキン編集画面を表示します。
２.HTML、CSSなど、コピー＆ペーストで復元ができます。
注意：スキンを保存して文字化けしている場合は、もう一度コピー＆ペーストをすると直ります。
紙2001 ver.1.9動作環境：Windows 95/98/Me/NT4.0/2000/XP搭載パソコン
取扱種別：フリーソフト
最近のトラックバックが追加されてトラックバックをしてもらったことがすぐに分かるのでうれしいです。
この最新のトラックバックのサイト名の部分を改行しないように、
ちょっとだけ変えてみました。
なお、長いサイト名の場合は後ろが...が付いて表示されます。
また、コメントリストのユーザ名と共通部分ですのでそちらにも影響します。
IE（Internet Explorer）専用なのでちょっと気が引けます＾＾；
→
改行しないようにする方法（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
私だけかもしれないのですが・・・
最近、トラックバックをするとトラックバックをする相手の記事のリンク先が編集欄から消えてます。
以前はトラックバックをするとトラックバックをした相手先の記事のリンクとサイト名が表示されたと思うのですが。
トラックバックのリンク先が無いとどの記事からのトラックバックか分からないので不便です。
皆さんはどうでしょうか？
追記：04/07/29 19:39:41
今日試したところトラックバックのリンクが直っていました。
エキサイトさん、ありがとう(^_^)/
コメント欄の色の変え方です。
CSS編集でDIV.COMMENTのBACKGROUNDの色を指定することによりコメント欄の色を変えることが可能です。
いろいろ変えたのですが、デフォルトがしっくりしたのでデフォルトに戻しました＾＾；
でも、現在のブログの色とあわないときや、見にくいときには色を調整することにより見やすくなるかもしれません。
（私のデフォルトの色は#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
いつも訪問している流れ星の散歩道(^_-)-☆を運営している
hikkoro-dayori21 さんのブログで紹介していたのですが、MacでIE（Internet Explorer ）を利用しているユーザがコメントで文字化けをして入力できないそうです。
その解消方法をleviathを運営しているakira_kojika さんのブログで紹介しているそうです。
私も、Mac＋IEユーザの方からコメントを頂きたいので記事にしました。
Mac＋ＩＥの文字化け解消法の一例
修正前（３列スキンデフォルト）
.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ユーザの方で他のフォントでも利用可能なものがあれば教えてください。
お願いします。<(_ _)>
情報ネタ元：マック＋ＩＥの文字化け解消法 （leviath）
記事が多くなってきたのでお役に立てる記事を整理しました。
これは記事リストの抜粋です。
みなさん、ご活用下さい。
インデックス
スキン編集
│
├マニュアル
│└マイスキン、３列レイアウト作成マニュアル
│
├投稿欄
│├付箋の改良版
│├ヘッダイメージ設置No2
│├ヘッダイメージ設置No.1
│├小窓の設置方法
│├小見出しの装飾
│├投稿欄のヘッダの立体的化
│├投稿欄の付箋紙
│├投稿にはＮｅｗの表示
│├投稿部分の修正
│├飾り付箋紙（イメージバージョン）
│├IE専用影付き付箋紙
│├さらに付箋の改良
│├投稿欄横に猫を表示
│├投稿欄ヘッダ部分にイメージを表示する方法（猫ちゃん）
│└お洒落な付箋紙（両サイドの猫ちゃんバージョン）
│
├メニュー
│├リンクメニューの設置方法
│├カテゴリーメニューのトップに表示
│├小見出しの装飾
│├メニュにハートを入れました
│├ユーザ管理アイコン
│├右側２列スキンの小窓の設置方法
│├プルダウンリンクメニューの設置方法
│└次のページ>をトップに持ってくる方法
│
├コメント欄&トラックバック
│├色の指定
│├トラックバックをお洒落に♪
│├コメント入力欄をちょっとおしゃれに♪ パート２
│├コメント入力欄をちょっとおしゃれに♪
│├コメント欄の高さに挑戦！
│├MacでIEの方でもコメントが出来るように・・・
│├コメント欄のバックグランドの色の変え方
│├トラックバックのサイト名を改行しないようにする
│├コメント欄のタイトル部分にプチアニメを入れよう！
│├見えるところのちょっとしたお洒落
│├追加された検索窓にイメージが表示されてこまったら
│├コメント欄の背景の指定方法
│└■サイドのコメントやトラックバックの表示間隔の調整（３列用）
│
├リンク
│├イメージリンクの外側の枠消去
│└リンクをボタンのように押し下がるように
│
├検索リンク
│└自分のサイトの記事検索リンクを設置する方法
│
├バックグランド
│├壁紙を追加しました
│└ふぅ～、やっとトップに空ができた
│
├スクロールバー
│└スクロールバーの模様替えをしました
│
├カレンダー
│├今日の日付けにイメージを
│├カレンダーのバックグランドにアイコンを表示する
│└カレンダーのバックグランドにイメージを表示する
│
├タイトルロゴ
│└ロゴをテキストからイメージに置き換える方法
│
├情報
│├背景画像の表示方法
│├私のお勧めサイト
│├リンクできない状態でしたm(__)m
│├ブログ停止をクリックしてみたら・・・
│├"rsstimes"ってなんでしょう？（設置してみました）
│├自分が思っていた通りの表示になる色は？
│└gifファイルが保存できなくて困っている方へ
│
├テクニック
│├コメントアウト
│└ローカル環境でCSS編集をする方法（ステップアップ講座）
│
└バックアップ
└スキンのバックアップに”紙”を使用Win版
自作ソフト
│
└HTML 特殊文字変換プログラムについて
ソフト紹介
│
├スクラップブック
├紙 2001 - スクラップブックソフト
├AreaEditor - blogの入力が簡単になるソフト
├アウトラインプロセッサ
├スクリーンショットや画像のトリミング
└フルカラーペイントソフト
検索
│
├サイト指定検索
├翻訳検索
└計算できる検索サイト
CopyRight(C) 2004 All rights reserved by potto37
以前提案した付箋紙は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
私が利用しているリンクメニューですが、以前説明した小窓の応用です。
この小窓は他のメニューに影響しないため、設置が簡単で初心者に向いています。
よろしかったらご利用下さい。スクロールバーの色も各小窓にあわせて設定が可能です。
※左右どちらでも設置が可能で、他のメニューに影響しません。
Link
│
├HTML＆CSS関連
│├とほほのWWW入門
│├HTMLｸｲｯｸﾘﾌｧﾚﾝｽ
│├CYBER@GARDEN
│└１からわかるおもしろ日記書き方講座
│
├エキサイトブログ
│├流れ星の散歩道(^_-)-☆
│├めざせマイスキン
│├王様の耳は猫の耳
│├日常茶飯事なＬＥＴＴＲE
│├★うららんのアレコレDiary★
│├ブログ試用記
│├Access Granted
│├MVワールド
│├FOOTBALL STYLE
│└川北NOW
│
├素材関連
│├イラそよ
│├アトリエ フリー
│├★フリー素材BEVEL★
│└ぴこらんど
│
└その他
├All About Japan
├Delta
└Windows.FAQ - ウィンドウズ処方箋
設置方法 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]記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
コメント欄の文字の色が薄くて困っている方がいたので記事にしました。
よろしかったらご利用下さい。
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
