FC2ブログ

Chromeの「要素の検証」で直接HTML等を編集出来る機能がすごいです。

ねこぎじです。

Chromeの「要素の検証」で直接HTML等を編集出来る機能について書いてみます。

なお、過去の記事も参照ください。要素の検証について概要を説明しています。

FC2ブログのカスタマイズにChromeの「要素を検証」という機能が便利です(^o^)丿

ブログの表示が遅くなっている理由をChromeの「要素の検証」機能で調査しました。

Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿


Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿">Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿で、解説した「要素の検証」機能を利用すると、いま表示しているWebサイトを編集することが出来ます。

ねこぎじも、へ?っと思ったのもです。

たとえば、「Edit as HTML」で、あるDIVの要素をごっそり削除すると、削除された要素が「消えてしまう」のです。

 

要素の編集マウス右クリック

では、ねこぎじのこのブログで実際に操作してみます。

その1 → このブログのメニューバー(リンクボタン)を消してみたいと思います。

まず、メニューバーの要素を選択します。

画面が消える1

その2

マウスの右クリックで「Edit as HTML」を選択

消える2

その3

HTML編集モードに突入!!(^O^)ノ

消える3

その4

li要素をごっそり選択!(^O^)ノ

消える4

その5

そのままごっそり削除します。(^O^)ノ

消える5

その6

メニューバーは消滅しました。d(-_-)ビシッ

消える6

その7 

再表示を行うと、やっぱり削除されていませんでした。

消える7

なんちゃって(^O^)ノ

実は、編集というのは、ブログの元データというこのブログの作者 ねこぎじのブログデータそのものを削除(編集)した訳ではないのですね。

あくまでも、自分の目の前にあるパソコンにダウンロードされたHTMLデータを自分のパソコン上のメモリ内で、編集しているのです。

ですので、そのまま自分のパソコンにサイトを保存しブラウザで表示すると、メニューバーが消えてしまったサイトを表示することが出来ます。

消える8

このように、パソコン上で皆様が見ているサイトはFC2のサーバーからブログのHTMLとCSSがパソコンのメモリ上にダウンロードされて表示されているだけなのです。

この意味でいえば、サーバーのデータを直接覗いている訳ではないということです。

このChromeの要素を検証という機能はあくまでも自分のPC上にあるHTMLを参照&編集しているだけなのです。

ですから、参照している元のブログなりサイトなりには影響が無いと言えるでしょう。


さて、この機能。上手に使えばHTMLとCSSのテクニックを分析することが出来るわけです。

ただし、昨今はWordPress等のCMSと呼ばれるフレームワークのようなシステムでサイト構築されています。このWordPressはPHPという言語によって、構築されています。

PHP言語上でHTMLを吐き出されたものを、見ているというケース増えています。とはいえ、作られたHTMLを見ることもテクニック上達には必要だと思っています。


何事も、上達するには達人のテクニックを学ぶことが大切だと信じています。


ところで、ねこぎじも持っているホームページビルダー16がバーッジョンアップしてVer17が発売されたとジャストシステムからメールが来ました。

特筆する機能はWordPressのテンプレートを編集できるようです。
※ WordPressビュー 見たままの画面(WYSIWYG画面)でページ編集 こういう機能が搭載さたそうです。

かなり気になります。ねこぎじは実は!! ホームページビルダーを使いこなせてないのです(´・ω・`)


機能は豊富すぎて、自分がやりたいことを、どのように実現してよいかに手間を食ってしまい結局は直接HTML編集するという旧態然な作業をしていました。それと今はWordPressというCMSを利用していますので新しいサイト&blogはこれで作業しています。


ここに「見たままの画面(WYSIWYG画面)でページ編集」が出来るとなればありがたいですね。それとホームページビルダーのGUIがもっと扱い易い画面構成になってくれたらありがたいですね。



ホームページ・ビルダー17 バージョンアップ版ホームページ・ビルダー17 バージョンアップ版
(2012/10/05)
Windows

商品詳細を見る



それでは皆様のお仕事が捗ります様にお祈りしています。
ではでは。
スポンサーサイト



テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

FC2テンプレートカスタマイズにおいてHTML挿入位置を確認する方法

ねこぎじです。

FC2のテンプレートに新しくHTMLを挿入する場所を確認するにはChromeでは「要素の確認」を利用します。



サイトの画面上で、マウスの右ボタンを押下で表示される「要素の確認」という機能を利用して、サイトのHTMLを分析します。

text5697.png



この要素の検証を選択すると、Chromeの画面構成が変化します。



要素の懸賞 top01

ここまで書くとなんとなくお解りになられたのではないでしょうかヽ(^◇^*)/

ChromeなどのブラウザではCSSとHTMLの解析が可能な機能が提供されています。これらの機能を利用して、目的とするHTMLをテンプレートのどこに挿入すればよいかが解析出来れば、あとはHTMLで要素を挿入し、CSSでデザインを整えることで、意図するWebサイトデザインが完了します。

それでは今日は、ここまでと致します。

皆様のお仕事が捗ります様にお祈りしています。

ではでは。

テーマ : ホームページ作成
ジャンル : コンピュータ

FC2ブログテンプレートカスタマイズはこうやりました。

ねこぎじです。

テンプレートにナビゲーションボタンと呼ばれるリンクボタンを追加しました。


イメージは前回の記事を参照ください。
hyuga16.blog46.fc2.com/blog-entry-199.html

HTMLのソースは下記のとおりです。
(いろいろなサイトを参考にさせて頂きました)


<ul id="mave_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-186.html">Zoho CRM目次</a></li>
<li><a href="<%url>blog-entry-185.html">Zohoアプリ</a></li>
<li><a href="<%url>blog-entry-196.html">HTML/CSS</a></li>
<li><a href="<%url>blog-entry-197.html">TOOL</a></li>
<li><a href="<%url>blog-entry-198.html">プログラミング</a></li>
</ul>

HTMLのリスト ulを利用しています。

これにスタイルシートを適用させますと、みごとにナビゲーションボタン(メニューボタン)の完成です。

スタイルシートのソースです。
ソースは下記のとおりです。
(いろいろなサイトを参考にさせて頂きました)

/* ナビゲーションボタン */
#mave_bar {
font-size: 80%; /* 文字サイズ */
height:32px; /* ボタンの高さ */
background-color:#999077; /* 背景色の指定 */
border-bottom:4px solid #c0c0c0; /* アンダーラインの指定 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔(マージン) */
margin-bottom:8px; /* 下の間隔 (マージン)*/
}

#mave_bar li {

/* リストは縦に並ぶのですが、下段に記述されている「float:left;」で */
/* 縦のリストが、横に並ぶリストに変化します。 */

list-style-type:none;
float:left; /* floatプロパティの値をleftとし、左から順に回り込ませる */

/* この「回り込ませる」という表現が理解を困難にしていますが、*/
/* floatプロパティは一つ目のliを左寄せにして次のliをその横に表示さてゆきます。 */

line-height:32px; /* 高さ+ */
margin:0px;
padding:0px;

}

#mave_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #c0c0c0; /* 区切り線を1pxの色で表現 */
border-bottom:4px solid #c0c0c0; /* アンダーLineを4pxの色で表現 */
color:white; /* リンク文字の色 */
background-color:#999077; /* メニューボタンの背景色を指定*/
text-decoration:none;
}

#mave_bar li a:hover{
color:white; /* マウスが乗ったときのリンク文字の色を指定 */
background-color:#222; /* マウスが乗ったときの背景色を指定 */
text-decoration:none;
}
/* ナビゲーションボタン */

HTMLはただのリストですが、これにデザインをスタイルシートで指定することでナビゲーションボタン(メニューバー)に変化してしまうのがHTMLの面白さではないでしょうか。

デザイン的な指定はすべてスタイルシートに負わせて記述していくようにしたいものです。

次回は、ここに記述したHTMLとスタイルシートを元のテンプレートに、どの位置に記述するのか?

この点について見ていきたいと思います。

それでは皆様のお仕事が捗ります様にお祈りしています。
ではでは。

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ビジネスマンでも知っておいて損はないHTMLとCSSの指定方法!

ねこぎじです。

前回に続き、Chroem上でマウスを右クリック→「要素の検証」を利用して、HTMLとCSSについて解析していく小技を紹介します。> 


前回の記事
Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿

要素の検証では、ブラウザ上で表示されているサイトのHTMLとCSSを細かく解析する手助けとなるTOOLです。

では早速下記の画像を確認ください。
FC2ブログ→0629 Fc2 CSS研究
HTMLが表示されている部分に、赤枠にて囲われた"headblock1"というDIV要素があります。

DIV要素とは、ブロック要素の一つで、レイアウト要素でいえば一つのまとまったブロックを構成しています。

このID名=headblock1にデザイン的要素を指示しているのがCSS(スタイルシート)と呼ばれているモノです。

画像の左下に、赤枠にてDIV要素要素ID=headblock1のCSSと書いた部分がります。

内容は下記の画像をご覧下さい。

FC1 CSS01
と、このようになっています。

このCSS(スタイルシート)は、下記の1.の各DIV要素headBlock1に対してデザイン的要素の指示をしているのです。

DIV要素要素ID=headblock1のHTMLは、
1.div id="headBlock1要素 <div id="headBlock1">
2.div id="BlogName"要素  <div id="BlogName">ねこぎじ ビジネス資料作成のお手伝い (^o^)丿</div>
3.div id="headIntroduction"  <div id="headIntroduction">コンピュータで作成するビジネス資料を作成するときにちょっとしたイラストや、小ネタをお伝えします。 ほんとにちょっとしたネタです.</div>
4.</div>
このような構成になっています。

HTMLは、例<DIV>で始まり、</DIV>で終ることになっています。
DIV~/DVIがひとつのブロックとなっています。そして、ブロックは入れ子方式が可能です。

入れ子とは、親要素の下に子要素を持つ形式のことです。
ですので、親は、
1.div id="headBlock1要素 となり、その下に入れ子として
  2.div id="BlogName"要素
  3.div id="headIntroduction"
という構成になっています。

よって、headblock1という要素に対してのデザイン要素を指定しているCSSの記述ということになります。

よって、2.div id="BlogName"要素や3.div id="headIntroduction"に対しては、BlogNameならBlogNameに対して、個別にCSSを指定するということになります。

この様にCSSを見て行くと、HTMLにおいてCSSが果たすデザイン要素の醍醐味が理解できるようになります。
今日はここまでと致します。

それでは皆様のお仕事が捗りますようにお祈りしています。
ではでは。

テーマ : ホームページ作成
ジャンル : コンピュータ

Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿

ねこぎじです。

このブログはビジネス文書作成の小技紹介を目的で書いているのですが、HTMLとCSSのノウハウに着目しているこの頃でして(^o^)丿

なぜかと言いますと、昨今ブラウザでプレゼンテーション資料を作成するというテクニックがにわかに注目を浴びてきています。

実績のあるTOOLで言えば、Googleプレゼンテーションや、ZohoShowがオススメです。

どちらもブラウザでプレゼンテーション作成TOOLとしてそれなりの機能を備えています。ねこぎじは下書きにいつもZoho Showを利用させて頂いてます。

ところでこれらのTOOLでHTMLとCSSを利用してオブジェクトを正確に配置できたら嬉しいなと考えています。

長くなりましたが、今日は備忘録的に前回に続きChromeの要素の検証を使ってWebサイトのHTMLとCSSがどうなっているかを覗いて見たいと思います。

現在、ねこぎじのFC2ブログは下記の構成になっています。

3カラムの構成説明

1.フッタ
2.1カラム
3.2カラム
4.3カラム
5.フッタ

大きく言えばこの5つです(^o^)丿
前回の記事をちょっと参照ください。
http://hyuga16.blog46.fc2blog.net/blog-entry-191.html

Chromeの要素の検証機能でねこぎじのFC2ブログを見て下さい。

要素の検証01

FC2のねこぎじのブログ画面の下にHTMLが表示されています。
赤く囲った部分をマウスでクリックしてみてください。

image10_20120627002526.png

すると、ブログのヘッダ部分を赤く囲った中に青くなっている部分が分かると思います。

image13.png


これが先ほどのHTMLに該当するDIV要素部分なのです。
<div id="sh_fc2blogheadbar">...</DIV> というわけです。

さらに他のDIV要素を見てみましょう。

image14.png

同じようにクリックすると(^o^)丿

image15.png

<div id="headBlock1">...</DIV> このDIV要素に該当する訳です。

このように細かく見ていくのですが、さらに小技がChromeの要素の検証には準備されています。

<div id="headBlock1">...</DIV> このDIV要素をマウスで右クリックすると(^o^)丿

image16.png

このメニューの中に、「Copy as HTML」をクリックしてみてください。

そして、適当なエディターまたはメモ帳に貼り付けてみてみましょう。

<div id="headBlock1">
<div id="BlogName"><a href="http://hyuga16.blog46.fc2.com/" title="ブログタイトル" id="pagetop">ねこぎじ ビジネス資料作成のお手伝い (^o^)丿</a></div>
<div id="headIntroduction">コンピュータで作成するビジネス資料を作成するときにちょっとしたイラストや、小ネタをお伝えします。 ほんとにちょっとしたネタです。</div>
</div>

<DIV>~</DIV>というブロック要素と呼ばれる一つのまとまった単位として利用するDIV要素。

このDIV要素単位に、CSSで細かく指定することでデザイン的要素を加えていくことになります。

長くなりましたので本日はここまでと致します。

皆様のお仕事が捗りますようにお祈りしています。
ではでは。

テーマ : Webサービス
ジャンル : コンピュータ

最新トラックバック

月別アーカイブ

カテゴリ

PDF (2)
広告
くろック ALL STARS
リンク
全記事表示リンク

全ての記事を表示する⇒ここをクリック頂くと記事リストが表示されます。

フリーエリア
カレンダー
09 | 2019/10 | 11
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
RSSリンクの表示
プロフィール

ねこぎじ

Author:ねこぎじ
FC2ブログへようこそ!

最新記事
最新コメント
メールフォーム

名前:
メール:
件名:
本文:

ねこぎじと申します。Twitterやっています。宜しければフォローください