opera:hige このページをアンテナに追加

 | 

2006-05-11

ソースビューアで行うスタイル変更 07:41 ソースビューアで行うスタイル変更 - opera:hige を含むブックマーク はてなブックマーク - ソースビューアで行うスタイル変更 - opera:hige

今回、はてなダイアリーのスタイル変更を行うにあたってOpera9から採用された内蔵ソースビューアが大いに役にたった。このソースビューアの優れていることは編集したところをキャッシュに保存し即適用できるところである。この機能を用いて今回のスタイル変更を行った。つまり、編集したHTMLが即座に適用されるということだ。

そこで、このソースビューアを使ったスタイル変更方法をはてなダイアリーを例に説明する。

手順

まず、スタイルを変更したいページを開き,"Ctrl+F3"を押して内蔵ソースビューアを開く。次に編集&確認をしやすくするために,"Shift+F6"を押して分割表示する。

f:id:higeorange:20060511073541p:image


これで準備完了。


はてなの場合だと<head>内にスタイルを記述するようになっているのでそのままソースビューア内の

<style type="text/css">
<!--
 
-->
</style>

部分にCSSを記述し、記述したスタイルを適用し確認したい場合は、ソースビューアの左上にある"Reload from Cache"ボタンを押せば即座に変更したスタイルが適用され確認できる。この操作を繰り返し、スタイルを決定していく。


外部スタイルシートなページの場合だと,<head>内に

<style type="text/css">
<!--
 
-->
</style>

を作り記述していけばよい。またCSSをソース表示して編集することでもスタイルの反映もできる。しかしこの場合だとリロードボタンを押さないとスタイルがてきようされない。


ちなみに,slayeroffice | tools | Mouseover DOM Inspector v2.0 Helpも大活躍でした。

 |