ブログ始めたてのときは殆どの人が自分なりのカスタマイズに憧れて、色んな所からコピペでOKと言うものを探して来ることでしょう。
見出しカスタマイズだったり、フォローボタンやシェアボタンのカスタマイズをしますよね。
そしてある程度時間が立つとCSSというものが少し分かり始めて、
「ここの色変えてみたい」とか、「線を太くしたい」とか自分だけのオリジナルに憧れてくるようになります。
だけど、いざコードをいじってみて失敗してしまい、「あ！元に戻れない！！」なんてことが怖くてなかなか踏み出せないんではないでしょうか？
そうなんです。
試しにやってみるというのを本番のブログでやるのは何かあったときが怖いです。
そんなあなたのために、手軽にCSSコードを試してみる方法をご紹介します。
スポンサーリンク
準備編
この記事は準備編から使い方編までを順番に紹介していきたいと思います。
用意するもの
ここで必要になるのはたったひとつです。（パソコンは当たり前すぎて除きます。）
それは以下の拡張子に対応したテキストエディタです。
必要な拡張子は２つ。
- html
- css
です。
Mac標準のテキストエディットやWindowsに最初から入っているメモ帳でも使えると思います。
用意するものはたったこれだけ！！
私はブログの下書きにはCotEditorを使っています。
オフラインで使えるし動きも軽いのでMacを使っているのであればとてもおすすめです。
使うテキストエディタが決まったら次に行きましょう。
cssファイルを作ろう
まずはcssのコードを書いていくファイルを作ります。
テキストエディタで新規ファイルを開き、分かりやすいファイル名を決めましょう。
「練習用」とか日本語使っても問題ありませんので好きなように決めます。
決まりましたか？
では、そのファイルにcssコードを書き込んでいきましょう。
・・・といってもいきなりゼロからやるのは難しいですね。
では、すでに自分が使っているものをこのファイルに貼り付けておきましょう。
はてなブログの場合、
デザイン → スパナマーク → デザインCSS
と進んでその中にあるもの全てコピペしてください。
関係ないのも含んでますが、必要ないものは読み込まないだけなので問題ありません。
ここで一つ修正を加える必要があります。
はてなブログの場合、例えば見出しのカスタマイズのコードは最初に「.entry-content」というのがあると思います。
これはどういう意味かとう言うと
「このブログの記事の中にあるものだけに適用するよ」
という意味なんです。
つまりヘッダ・フッタ・サイドバーなどには適用しないということです。
これからやろうとしていることには記事部分しか無いのでその「.entry-content」は消しましょう。
これでcssファイルの準備は完了です。
最後にこのファイルを拡張子「.css」にしてどこかに保存します。
次はhtmlファイルの作成です。
htmlファイルを作ろう
htmlファイルはブログの記事を書いていくファイルです。
新たに文章を書いてもいいですし、自分の過去記事をコピペしてもいいです。
過去記事を使う場合に注意するのははてなブログで言うところの「html編集」からコピペするという点です。
これで貼り付けた文章を見ると見出しのh2や太字のstrongなどのコード入りの文章になっていますね？
それでOKです。
文章は別に完成していなくてもいいです。
極端な話、本当に見出しカスタマイズをやりたいだけだったらh2で囲んだ１行だけでも良いです。
ここでその文章の最初の行に戻り、以下のコードを追加します。
私はcssファイルの名前を「練習用」にしたのでこのようになります。
「練習用」というところを自分で決めたファイル名に変えればOKです。
このコードは「練習用というファイルのcssをこのhtmlファイルに適用しますよ。」という意味です。
これを１行目に貼り付けましょう。
こんな感じですね。
ここまでできたらhtmlファイルを保存します。
ここでも注意点！！
保存場所は必ずcssファイルと同じフォルダにしましょう！
先程のコードでは省略されていますが、実はファイルの場所も指定しているんです。
違う場所に保存してあるファイルを読み込みたい場合はその場所を示すものも追加しなければいけません。
面倒くさいので同じフォルダの中に保存しましょう。
さて、私の場合こんな感じでファイルが２つできました。
次は実際に使い方を見ていきましょう。
使い方編
ここからは実際に作ったファイルをどうやって使っていくかを見ていきます。
基本操作
いきなりですが、htmlファイルをダブルクリックして開いてみましょう。
ブラウザが立ち上がって文章が表示されましたか？
ここでcssファイルにカスタマイズのコードがあればそれが反映されていると思います。
どうですか？うまく表示されましたか？
cssにコードがあるのに適用されていない場合は以下の点を再確認してみましょう。
- cssファイルの中に「.entry-content」が残っていないか
- htmlファイルの１行目のコードが正しいcssファイル名になっているか
- ２つのファイルが同じ場所に保存してあるか
これができていればうまくいくはずです。
さらに文章を追加していきたい場合はhtmlファイルをテキストエディタで開いて追加していきます。
これを上書き保存して、先程ブラウザで開いたhtmlファイルをリロード（command＋R、または、F5）すると追加した文章が反映されていますね。
これで簡易的なプレビュー画面の完成です。
カスタマイズ方法
ここからが本番です。
実際にcssのコードをいろいろいじってみましょう。
ブラウザで開いたhtmlファイルはそのままにしておいて、今度はcssファイルを開きます。
例えばh2の見出しの背景色を変えたい場合「background-color」の＃で始まる英数字を他のコードに変えます。
色のコード表は検索してみてください。
CotEditorを使用している場合はカラーコードがメニューに有るのでそれを使えばコードが分かりますよ。
私がよくいじって試してみるのはこんなところです。
コードを変えてみたら上書き保存してブラウザの方をリロードします。
うまくいっていれば変更した箇所が反映されるはずです。
（画像の文字が細かくなってすいません）
こんな感じで、コードをいじったら上書き保存→リロードという流れで使っていきます。
これで色々いじっても本番のブログには影響ないので安心ですよね。
ブログに適用する
これで試して気に入ったのが出来たら実際にブログに貼り付けます。
その時にもまた注意点が！
見出しのカスタマイズをした場合、必ず最初に「.entry-content」を追加しましょう。
本番のブログでチェックして良さそうだったら保存しましょう。
参考例
例えば太字にしたところにピンクのマーカーを引きたい場合、こんなコードはいかがでしょうか？
よくあるやつですね。
これを使うとこんな感じになります。
ピンクのマーカー
一応、コードの解説をしておくと最初の％は線の太さ、カラーコード（＃で始まるやつ）の後の％は色の濃さを設定しています。
これをベースに％の数字を変えたらどうなるかとか色々試してみると良いと思います。
ぜひ、チャレンジしてみましょう！！
おさらい
長々と順番に解説しましたが、ここでおさらいしておきましょう。
ここをおさえておけば大丈夫です。
- 拡張子「.css」のファイルを作ってcssコードを入力して保存
- デザインcssからコピペした場合は「.entry-content」を消す
- 拡張子「.html」のファイルを作ってブログの下書きをする
- cssファイルと同じフォルダにhtmlファイルを保存する
- htmlファイルをブラウザで表示させる
- cssやhtmlをいじったら上書き保存→リロード
これで本番の環境でドキドキしながらcssをいじらなくて済むようになりましたね。
テキストエディタでやることでどんなコードが書いてあるか見やすくなります（デザインcssはとても見づらい・・・）ので、その点もおすすめです。
まとめ
私はこの環境を作っただけでまだ色々試す段階には来ていません。
これからどんどんいじってみたいですね。
class指定というのもチャレンジしてみたいです。
実はまだclassとかよく分かっていないもんで・・・。
コメント