投稿したブログのHTMLソースを見るには | パソコンが好きになるブログ〜表技・裏技・便利技伝授!

パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

こんにちは、パソコンワンポイントレッスン!

PCインストラクターの川上雄大です。


基本的に、このブログやホームページのWebページは

HTMLとCSSで作られています。
(初心者の方向けにざっくりとした解説になっていますのでご了承を)

むかーしむかーしはHTMLだけでWebページが作られていたものです。
そう、HTML(えいち・てぃー・えむ・える)っていうのが、Webページの本体なのです。

そして、デザインやレイアウトはCSS(しー・えす・えす)で指定するのです。

アメブロの場合、HTMLを直接書き換えて編集することができないようになっています。
その代わり、プラグインの追加やフリースペース編集などで追加編集するようになっているのです。

しかし、CSSの編集に関しては、「デザインの変更」で「CSS編集」を選択すれば、自由にできるようになっています。

既定のデザインではCSS編集ができません。
CSS編集をしたい場合は、「カスタム可能」をクリックして、

川上雄大のワンポイントレッスン

「カスタム可能」デザインから左上の「CSS編集用デザイン」を選択しておく必要があります。

<注意!>
ただし、すでにアメブロを運営していて、たくさん記事をアップされている方は注意が必要です。今までのデザインが一気に消えて、突如殺風景なデザインになってしまいますから。

川上雄大のワンポイントレッスン


そう・・・
アメブロを自由自在にカスタマイズするには、

フリープラグインの追加
フリースペース編集
CSSの編集


が基本になります。

HTMLソースを見るには?
※ちなみに・・・
この見出し↑のソースは

<div style="border-left: #000066 8px solid; border-bottom: #000066 2px solid; padding:0px 0px 1px 5px;font-size: 1.2em;font-weight:bold;">HTMLソースを見るには?</div>

になります。HTMLタグにコピー&ペーストしてご利用ください^^


・・・ところで、

このブログの本体であるHTMLソースをまだ一度も見たことがない方は、ぜひご覧になってみるとよいです。

パソコンで見るのですが、

●インターネットエクスプローラー(IE)であれば、
[表示]-[ソース]
(メニューバーが表示されていない場合はAltキーを押すと表示されます。)

●グーグル クロム(Google chrome)であれば、
[Google chromeの設定](右上にある)-[ツール]-[ソースを表示]

●ファイアフォックス(Firefox)であれば、
[ツール]-[Web開発]-[ページのソース]
(メニューバーが表示されていない場合はAltキーを押すと表示されます。)

●Macのサファリ(Safari)であれば、
まず、[Safari]-[環境設定](Windows版は[編集]-[設定])で、「詳細」内の一番下にある「メニューバーに”開発”メニューを表示」にチェックを入れて、[開発]メニューを表示させます。

その後、[開発]-[ページのソースを表示]



でHTMLソースが表示されます。

実際にHTMLソースを表示してみましょう!

それでは実際に試してみましょう!
(インターネットエクスプローラー10(IE10)で進みます。)

まず、ブログのタイトル通りインパクトのあるこちら↓のブログを表示してみます。


インパクトのある広告の作り方「1.73倍売る!集客の教科書」
(2016/7/24現在ブログ削除されていますので、リンクを外しました↑)


そして、[表示]-[ソース]をクリックします。

川上雄大のワンポイントレッスン

すると、HTMLソースのウィンドウが表示されます。
なにやら英語ばっかりですよね・・・^^;(まぁ、ガマン・・・ガマン・・・^^;)

川上雄大のワンポイントレッスン

まず、上から10行目を見てみますと、

<title>インパクトのある広告の作り方「1.73倍売る!集客の教科書」</title>

川上雄大のワンポイントレッスン

と表示されています。
そう、これがこのブログのタイトルなのです。

そして、さらにあるモノを探します・・・

ずーっと下方向にスクロールして、地道に探していいのですが、ここでは検索機能を使います。

[編集]-[検索]をクリックします。

川上雄大のワンポイントレッスン

そして、「検索(F)」欄に「読者数」と入力し、「次へ」ボタンをクリックします。

川上雄大のワンポイントレッスン

すると、お目当てのモノが発見することができます!
(記事中に「読者数」と書かれている箇所は飛ばして「次へ」を押していきます。)

川上雄大のワンポイントレッスン


そうです、このブログには読者数が表示されていないのですが、

川上雄大のワンポイントレッスン

でも、このようにHTMLソースを読むことができれば、この方の読者数が何名なのかがわかってしまうのです、ハイ!

過去に「開発者ツール(デベロッパーツール)」を使って、調べることができますよ、と

こちらの記事『たかが読者数、されど読者数・・・』でお伝えしましたが、HTMLソースから調べることもできるのです。
(ただし、サイドバーの配置設定で「読者一覧」をはずしているブログはHTMLソースでも読者数を知ることはできません)



<参考>
実は、HTMLソースを見れるといいこともありますので、こちらもご覧ください↓↓↓

HTMLソースを見てみると、アメブロで重要なことが何かわかります



以上、ワンポイントレッスンでした。


LIDS・ライフデザインスクール
川上 雄大