/* Google Analytics ▽ */ /* Google Analytics △ */

WEB制作の勉強メモ / 猫脳人間

HTML CSS JavaScript ActionScript jQuery WordPress PHP Illustrator Photoshop Flash … 猫サイズの脳でも覚えるぞ と…

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

基本、無料レンタルブログはHTML部分がいじれないので、
(HTMLを部分挿入が可能な箇所はあり)
カスタマイズは全て CSSで行います。

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

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


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

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

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

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

ブログのソースから、HTMLのソースをテキストエディタにコピーし、
そのソースの中にある、CSSのURLにアクセスして、
CSSのソースをコピーしました。

<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"/>

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

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

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

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

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

Google Chrome

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

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


f:id:silentcait:20150421135333p:plain

f:id:silentcait:20150421135332p:plain

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

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

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


FireFoxWeb Developer というアドオン

addons.mozilla.jp
allabout.co.jp

ページのレイアウト構造をアウトラインで見る画面
f:id:silentcait:20150421135331p:plain
こちらも、スタイルシートを編集できるみたいです。


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

広告を非表示にする