このブログをカスタマイズする （準備編）

基本、無料レンタルブログはＨＴＭＬ部分がいじれないので、
（ＨＴＭＬを部分挿入が可能な箇所はあり）
カスタマイズは全て ＣＳＳで行います。

全てを１からデザインするのは大変なので、
ひとまず、気に入っているスキンを元にカスタマイズします。

↓はてなブログのカスタマイズの手引きはこちらhelp.hatenablog.com

まず、スキン（ブログテーマ）に適当なものを選び、
（ここでは、『 Reach 』 というテーマを選びました）
シンプル＆ベース色が無彩色 というのが好みなので、
このままでも良いくらいｄ・・・。

もっとシンプルなカスタマイズ向けのソースは、
はてなブログのカスタマイズの手引き のページに案内されています。

はてなブログでは、無料プランでも
１つのアカウントで ３つまでブログ開設できるそうなので、
カスタマイズ専用の未公開設定で１つブログを増やしました。

カスタマイズ用のブログを作ったものの、
これでも結局、テキストエディタがあった方が良いし、
結局オフライン作業になるので、

ブログのソースから、ＨＴＭＬのソースをテキストエディタにコピーし、
そのソースの中にある、ＣＳＳのＵＲＬにアクセスして、
ＣＳＳのソースをコピーしました。

<link rel="stylesheet" type="text/css" href="https://blog.st-hatena.com/.shared.css:9a2a8efa73b6494561f5bb512eb7bfe8:/css/theme/base.css,/css/prettify.css,/css/globalheader.css?version=9a2a8efa73b6494561f5bb512eb7bfe8"/>
<link rel="stylesheet" type="text/css" href="http://blog.hatena.ne.jp/-/blog_style/8454420450088483359/994c868b57be3a6f7c67dab409506563f36ea48a"/>

ＣＳＳは２つリンクタグで添付してあり、
２つ目の方が、デザインをカスタマイズするＣＳＳです。
ＨＴＭＬとＣＳＳの ２つのテキストファイルを作ったら、
ＨＴＭＬファイルの方の、２つ目のＣＳＳへのリンクを、
自分のパソコンに保存したＣＳＳファイルに
パスを書き換えました。

<link rel="stylesheet" type="text/css" href="hatena-Reach-01.css"/>

これで、オフラインで表示確認しながら、
カスタマイズができます。

冒頭で書いたように、実際のブログのＨＴＭＬ部分はいじれないため、
ＨＴＭＬファイルは表示確認のみで、
ＣＳＳのパス以外は変更しません。

ＣＳＳに使う、id 名、 class 名を調べる必要があるので…。
ＨＴＭＬファイルの中を 検索してみる手もありですが。
ブラウザのアドオンなどの機能を使ってみる事に。

Google Chrome

の、右クリック＞『要素を検証』の画面、
かなり高機能のようで、まずこの使い方から。

↓参考にさせていただいたページwww.buildinsider.net

この画面でスタイルシートを直接編集できるんですね…。
知りませんでした…。
しかも、カラーの選択が、色が■で表示されていて、
■をクリックすると、カラー選択パレットになり、
更に、そのままサイト表示画面にマウスカーソルを持って行くと、
スポイトツールになるのですが、

このスポイトに丸い拡大鏡が付いていて、かなり便利。
ピクセルを選んで色を指定できます。

同じ画像ですが、Photoshop の
『スマートオブジェクトに変換』
にしてから、画像を拡大してみました。

FireFox の Web Developer というアドオン

addons.mozilla.jp
allabout.co.jp

ページのレイアウト構造をアウトラインで見る画面

こちらも、スタイルシートを編集できるみたいです。

両方のブラウザを見ながら、カスタマイズを進めたいと思います。