ＣＳＳ オフラインでスキンをテスト1
[エディタソフトをインストール]
これって・・
ずっと以前から記事にしたかったんです
でも・・うまく使えるテキストエディタが見つからなくって・・
わたしが使っているのは秀丸エディタなんですが有料なんです
マクロまで使えるし絶対に手放せないエディタなんですが・・
いかんせん・・ お金がね・・
windowsを使い続ける間・・一度お金を払えばず～っとそのまま使えますので
（バージョンアップにもお金はかかりません・・お金は一度払うだけです）
シェアウェア 【4,200円（消費税込み）】は高いと思いませんし・・
10年使うとして1年420円1ヶ月35円でこの高機能なエディタが使えます
これを一度使っちゃうと他のエディタは使えなくなります・・なので・・
なかなか紹介できそうな無料で使えて特にＣＳＳがわかりやすいエディタが見つからなかったのです
でも・・
無料で使えるエディタが見つからないことには記事が始まりません・・
あっ・・・やろうとしていることは・・
オフライン上でブログのスキンをテストする方法です
自由にＣＳＳをさわってどう表示されるのかパソコン上でテストします
ネット上ではありませんのでブログにはまったく影響がなくチェックすることができます
うまくいったらＣＳＳの編集に貼り付ければテストした状態と同じ表示がされます
（macな方・・すみませんwinしか知らないんです・・携帯な方もすみません）
みなさまから「表示がおかしいんですけど」ってコメントいただいて
どうやってみなさまのブログのスキンを触っているのか不思議に思われていた方も多いと思います・・
その謎がついに解き明かされます！
↑大げさに書き過ぎましたm(_ _)m
まずはテキストエディタを用意します
テキストエディタってなに？って～方
windowsに標準で付いている「メモ帳」がそうです
ただ・・「メモ帳」は・・
他のエディタを知ってしまったらまったく使えないソフトだって思い知らされます
メモ帳に変わるエディタをインストールしておくことは便利になりますからお勧めします
すでにメモ帳以外でインストールされて使われているエディターがある場合はそれを使ってください
で・・・・
この記事を書きながらも・・まだ・・（どのソフトにするか）迷っていますが・・・
とりあえずは
YokkaSoft さまの
↑わかりやすくフレームを外していますのでここからはダウンロードできません
トップページ左メニュから download → 右ページから
汎用的(に作っているつもりの)テキストエディタです(フリーウエア)の下のNoEditorをクリック
または・・・ 窓の杜からダウンロードするのなら Vectorからダウンロードするのなら
※タブ型のUnEditor(アンエディタ)もあります Vectorからダウンロードするのなら
ダウンロードするとlzh形式で圧縮されています
回答ソフトおまだインストールされていない場合は
「+Lhaca」をお勧めします 窓の杜からダウンロードするのなら
作者様
ダウンロードしたファイルを解凍・・・
ＮEditSet.exeをクリックしてインストールします
デスクトップにショートカットができれば成功です
ついでにデスクトップにアメブロファイルを保存するフォルダーも作っておきます
デスクトップ上で右クリック→新規作成→フォルダ
アメブロＣＳＳとかわかりやすい名前をつけておきます
つづく・・・・・
インストールされているソフトやブラウザーなど環境がみなさま違っていますので・・
うまく記事にできるかすごく不安です・・
特にファイルの関連付けなど違っていますのでダブルクリックなしで説明しないといけないし・・
途中で記事がなくなったらごめんなさいって～ことで・・
あとで便利かも・・・
ツール → 他のソフトで開く → 他のソフトで開くメニューの設定
デスクトップ上にある（あると思いますが・・なければスタートメニューからでもかまいません）
ブラウザーのアイコンを「他のソフトを起動」の中に放り込みます・・
ここではいろんなブラウザーを入れちゃっていますが・・
普段いつも使っているブラウザーだけで充分です・・
入れすぎちゃったり間違ったら削除します
ソフトを削除するわけではありません・・この設定から削除するだけですのでご安心を？
週末までコメント再開してみます・・
先月質問された方でまだ回答が・・って方・・
すみませんが再度コメントください
まだ・・調子がよくないので面倒そうな質問は後になるとおもいます m(_ _)m
素材 プロフィールの最新のなう
コメントを閉じているので役に立っているのかがわからなくて不安です・・
でも・・ この画像は自分で好きに作ったらＣＳＳも設定する必要があって・・
それは画像によってバラバラなんで記事で説明できません
なので・・昨日の続きで素材をアップしておきます
使い方やＣＳＳは CSS なうがブログに表示されるようになったね
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
使い方やＣＳＳは CSS なうがブログに表示されるようになったね
文字色はＣＳＳで自由に変更ください・・・
CSS なうがブログに表示されるようになったね
今日も帰りにラーメン屋さんで鼻血を噴出してしまった・・
家でも会社でも一度もないのに・・
外食するといつも鼻血！
な～ぜ～？？？？
ご心配をおかけしてすみません
顔の腫れは何とか元に戻ることができました
でも・・
メニエールが
以前のようにグラングランと目が回ることはありませんが
今度のは
軽いめまいがず～っと続いているんです・・
なんかいつもダルかったり疲れていたり
気力もやる気も起こらなくて・・
ブログもなかなかできる状態ではありませんでした・・
何の気なしにブログを見たら・・
プロフィールに最新の「なう」が・・
あぁ～・・・・ カスタマイズ！カスタマイズ！！しなくっちゃ！！？
て～ことで・・
まずは・・ >>なうを見る は・・ 全部がボタンのようなもんだからいらないよね・・
ＣＳＳの最後に・・
/* >>なうを見るを消す*/
#AmNwQuoteAnchor{
display:none;
}
時間を左から右に位置変更・・・
#AmNwQuoteTime{
float:right !important;
}
つぎは文字色を変更します
文字色はなうの本文と何時間前の2種類があって
それぞれマウスがのったときの文字色も変えます
#AmNwQuoteTxt{/*なう本文*/
color:#ff0099 !important;
}
a:hover #AmNwQuoteTxt{/*なう本文マウスオーバー*/
color:#ff33ff !important;
}
#AmNwQuoteTime{/*何時間前*/
color:#ff0000 !important;
}
a:hover #AmNwQuoteTime{/*何時間前マウスオーバー*/
color:#66ffcc !important;
}
つぎは背景画像を変えて見ます・・
画像素材こちらにもあります 素材 プロフィールの最新のなう
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
ＣＳＳを設定してハートが動いていない場合は・・サムネイル画像のＵＲＬを使っています
オリジナルの画像のＵＲＬなら動くはずです
↓この画像をダウンロード
↓この画像をダウンロード
↓この画像をダウンロード
↑この画像・・うまくつながるようにするにはＣＳＳをさわる必要があるんですが・・
ＣＳＳ書くの面倒なのでこのまま使ってくださいm(_ _)m
ダウンロードした画像を自分のブログの画像フォルダーにアップしてから
#AmNwQuote,
#AmNwQuote p,
#AmNwQuote a{
background-image:url(画像のＵＲＬ)!important;
}
※アメブロではIE6用に2種類のpng画像を使っていますが・・
簡単にするために透過のgif画像だけでやっています
あっ・・・これ・・表示したくない場合は・・
なうの設定
http://ucsnow.ameba.jp/setting/
表示しないにすれば表示されません・・・
なかなか・・コメントを再開できません
ごめんなさい m(_ _)m