2021年3月31日水曜日

Google検索セントラルを使用してGoogle検索でウェブサイトをアピールする方法を利用する

 【Google検索セントラル】の説明では以前は「Googleウェブマスター」と言われていたもので、コンテンツが適切なユーザーに表示されるようにするためのサポートツールなのだそうです。サイト運営者の為のマニュアル的な要素があります。


簡単に説明すると、ユーザーが求めているサイトを検索エンジンに表示されやすくするためのツールで、SEO対策に効果があるのです。ホームページやブログ開設間もないサイトの運営者には必携ですね。


私も以前少し利用したことがありましたが、ずいぶんと昔のような記憶しかなくあまり利用することもなかったので今回のブログ開設にあたり詳しく見てみることにしました。


【Google検索セントラル】

Google検索セントラル


【Google検索セントラル】はこちら：Google検索セントラル


「スタートガイド」をクリックすると、Google検索の基本を学ぶためのマニュアルらしき表示になります。(笑)


少し読んでみると、気になる文章が・・

Google検索の基本を学ぶ


「ちょっとした知識があなたのサイトを見つけてもらうのに大いに役立つ可能性があります。」


ブログ開設間もない私としては凄く気にかかる、興味をそそられる文章に思えます。なので取り敢えず検索エンジンを理解するためにも読んで見ました。皆さんも一読されることをお勧めします。



以下重要な個所を抜粋


【Google検索の仕組み】


検索エンジンはクローラと言う自動プログラムがインターネットを巡回し新たなサイトや更新サイトを見つけてインデックスに登録するのですね。なので、手動によるサイト登録の手続き等は必要ないということ。


では検索表示される仕組みは、「Google は最適な検索結果を表示するために、できる限り質の高い検索結果を特定しようとして、ユーザーの所在地、言語、デバイス、以前の検索クエリ等の要素が考慮されるようになっている」のです。


検索順位を決めるのは「ランキングはアルゴリズムによって決定」される。このあたりがよくわからないところですね(笑)


【Googleに掲載】


下記の事項が最も重要なことかもしれません。


「Google 検索結果に表示されるようにするために特別な措置を講じる必要はありませんが、ウェブサイトを変更したときに Google に知らせることで、新しいページや変更したページを Google がすぐに見つけられるようになります。」とあります。


やはり更新した時などGoogleにいち早く知らせるためには必要な処置を講じる必要があるようです。


その方法として【Search Console】を利用してサイトマップを送信することが上げられます。更新のたびに送信しても問題なさそうです。


Search Console: ウェブサイトのサイトマップを Google に送信します。


【Search Console】はこちら：Search Console


【検索エンジン用にサイトを最適化する】


分かりやすい説明とタイトル、その時々の話題性を取り入れ、サイトを最新の状態に保つことを心掛ける。


【Google 検索でのパフォーマンスの測定】


Google がサイトを認識しているかどうかを確認するには、Google で「site:<サイトの URL>」と検索します。たとえば、サイトが https://fslife39.blogspot.com/ の場合は、「site:fslife39.blogspot.com」と検索します。ちゃんと表示されました。(^_-)-☆

Googleでの検索結果


サイトが開設間もない場合などは、表示されないこともあるみたいです。その場合は暫く期間を開けて検索するか、表示されない理由なども書いてありますので調べてみて下さい。


時刻: 0 件のコメント:
ラベル:

2021年3月30日火曜日

Googleが提供するアクセス解析ツールのGoogleアナリティクスを導入してみました。

 アクセス解析ツールとは、サイトを訪問してくれるユーザーが１日に何人いるとか、訪問者の傾向、行動、滞在時間、検索キーワードなどやどのページが人気でページごとのアクセス数の比較などができるものもあります。


サイトを運営するにあたりこれらの分析をすることで訪問者の傾向を掴んだり、運営の改善点を掴んだり、今後のサイト運営に生かしていけると思います。このツールはGoogleが無料で提供している為どなたでも気軽に導入することが出来ます。


さすがにGoogleのツールだけあって詳細な分析ができるのですが、外国のツールであり日本人としてはちょっと分かりずらいインターフェースのようにも感じます。多少の知識と慣れが必要に思います。私のレベルが低すぎるのも要因ですが(笑)


使い方さえ覚えてしまえば強力な解析ツールですのでとても便利なツールになりますし、しかも無料で使用できるので重宝すると思います。少しずつ機能や分析方法を学びそれをどのようにサイトに生かしていけるのかを学んでいければいいですね。


最初は理解できず、見た目で敬遠される方もおられるかと思いますが、取り敢えず設定さえしておけばデータは収集されるためこのツールについて理解を深められたら新たな使い方をされてサイト運営に役立てていけばいいと思います。



Googleアナリティクスに登録する

  1. Googleアナリティクスを利用するには、Googleアカウントが必要です。Googleアカウントの作り方はこちら：YouTubeアカウントについて-Googleアカウントを使用してログインします。

  2. Googleアナリティクスへの登録
    ブラウザを起動して「Googleアナリティクス」を検索してみて下さい。一番上に「Googleアナリティクス」へのリンクが表示されていますので、クリックしてサイトを表示します。若しくは上記リンクをクリックしても表示できます。

    Googleアナリティクス

  3. 「測定を開始」をクリックします。「アカウントの詳細」が表示されるので、「アカウント名」を入力します。

    Googleアカウントを複数お持ちの場合は、Googleアナリティクスを利用するGoogleアカウントで登録したことが判別できるアカウント名を登録されることをお勧めします。

    例えばGoogleアカウントのメールアドレス等にしておけば分かりやすいですね。どのGoogleアカウントで登録したのかが分かれば作業がしやすいと思います。

    アカウント名

  4. 「次へ」をクリックします。「チェック☑」はそのままでいいと思います。

    「次へ」でチェック項目にチェック

  5. 「プロパティの設定」画面でプロパティの詳細を入力します。「プロパティ―名」はアナリティクスで測定するサイト名やタイトル名を入力します。

    「プロパティ名」

  6. 「レポートのタイムゾーン」「時間」「通貨」を日本に設定します。当初はアメリカ合衆国の設定になっていますのでそれぞれクリックして日本に設定します。

    当初はアメリカ合衆国になっています。
    設定がアメリカ合衆国になっている


    日本を選択します
    日本を選択

    「レポートのタイムゾーン」「時間」「通貨」を日本に設定しました。

    「レポートのタイムゾーン」「時間」「通貨」を日本に設定

  7. 「詳細オプション」をクリックします。①「ユニバーサル アナリティクス プロパティの作成」をオンにします。②「ウェブサイトのURL」を入力します。入力が終ったら「次へ」をクリックします。

    詳細オプションをクリック
    詳細オプションをクリック


    ①「ユニバーサル アナリティクス プロパティの作成」をオンにします。②「ウェブサイトのURL」を入力します。他のチェック項目はそのままでいいと思います。

    必要項目を入力

  8. 「ビジネス情報」で必要項目を設定・チェック入力していきます。

    業種を選択する
    ビジネス情報

    ビジネス情報設定
    「ビジネス情報」のチェック項目

  9. 「作成」ボタンをクリックすると「Googleアナリティクス利用規約」が表示されますので同意します。

    当初、アメリカ合衆国の利用規約表示となっていますので、日本表示に変更します。

    利用規約をアメリカから日本に変更

    日本語の利用規約が表示されるので、チェック項目にチェックを入れて「同意する」をクリックします。

    Googleアナリティクス利用規約に同意する

利用規約の「同意」ボタンをクリックするとGoogleアナリティクスへの登録が完了します。最初はなかなか理解できず、使いずらいと思いますが、データーは保存されていますのでいつでも分析できます。

登録は済みましたがサイトから情報データを取得するにはトラッキングコードを取得して、そのコードをサイトの<head>～</head>の間に挿入する必要があります。


上記メニューにもありますが、トラッキングコードを取得する：Googleアナリティクス（Analytics）のトラッキングコードをサイト（ホームページやブログ）に挿入する。を参照してください。


時刻: 0 件のコメント:
ラベル:

2021年3月29日月曜日

スタイルシートCSSの記述・使用方法「スタイルシートとして独立した要素を記述し使用する」‐HTML・CSSを学ぶ

 

 スタイルシートとは

サイトのデザインを構築するために使用します。スタイルシートをマスターすると、サイトのデザインを簡単に変えることが出来るようになり、まるっきりイメージの違ったサイトにすることが出来るのでとても便利です。


既存のHTMLをスタイルシートで色や形、大きさなどを指定、変化させることでイメージ通りのサイト構築をしていきます。HTMLに対してスタイルシートをどのように絡めて適応させていくかで３種類の方法があります。


スタイルシートの記述場所

HTMLに対してスタイルシートCSSの記述場所をイメージ画像で表しています。

HTMLタグの中で直接style属性を記述付加して使用する


HTMLの中でstyle要素としてまとめて付加して使用する


  • スタイルシートとして独立した要素を記述し使用する。

スタイルシートとして独立した要素を記述し使用する


今回は「スタイルシートとして独立した要素を記述し使用する」方法について学びます。


・スタイルシートとして独立した要素を記述し使用する。

スタイルシートCSSは独立したソースファイルとして記述してサーバーにアップロードします。ソースファイルはテキストエディタ（メモ帳など）で作成し、ファイル名は「style.css」とし保存します。

スタイルシートCSSソースの一例


h1{　　　　　　　　　　　　　　・・・主見出しh1を指定
    background-colore:aqua;　　・・・文字の背景色をアクアにする。
    color:blue;　　　　　　　　　・・・文字色を青にする。
}
h3 {　　　　　　　　　　　　　 ・・・小見出しh3を指定
    border: solid 1px blue　　 　・・・小見出しh3を青の実線１pxで囲む


上記のスタイルシートCSSをHTMLに適用するためCSSファイルを読み込むコードをHTMLの中に記述します。「<link rel="stylesheet" type="text/css" href="style.css">」部分がCSSファイルを読み込むためのコードになります。<head>～</head>内に記述します。

HTMLソースの一例


<html>
<head>
   <title>タイトルtitleを入力します</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <h3>小見出しh3文字を入力します</h3>
   <p>文字を入力します</p>
</body>
</html>


タイトルtitleを入力します

小見出しh3文字を入力します

   　　文字を入力します


CSSファイルを読み込むコードの説明


<link rel="stylesheet" type="text/css" href="style.css">

relはrelation＝関係を表します

stylesheetはスタイルシートを読み込みます。

href="style.css"のhrefとはhypertext referenceの略で参照します。対象となるURLを指定したりします。

時刻: 0 件のコメント:
ラベル:

2021年3月28日日曜日

スタイルシートCSSの記述・使用方法「HTMLの中でstyle要素としてまとめて記述して使用する」‐HTML・CSSを学ぶ

 

 スタイルシートとは

サイトのデザインを構築するために使用します。スタイルシートをマスターすると、サイトのデザインを簡単に変えることが出来るようになり、まるっきりイメージの違ったサイトにすることが出来るのでとても便利です。


既存のHTMLをスタイルシートで色や形、大きさなどを指定、変化させることでイメージ通りのサイト構築をしていきます。HTMLに対してスタイルシートをどのように絡めて適応させていくかで３種類の方法があります。


スタイルシートの記述場所

HTMLに対してスタイルシートCSSの記述場所をイメージ画像で表しています。

HTMLタグの中で直接style属性を記述付加して使用する


  • HTMLの中でstyle要素としてまとめて記述して使用する。
    スタイルシートCSSの基本構造を記載しています。

HTMLの中でstyle要素としてまとめて付加して使用する


スタイルシートとして独立した要素を記述し使用する


今回は「HTMLの中でstyle要素としてまとめて記述して使用する」方法について学びます。


・HTMLの中でstyle要素としてまとめて記述して使用する。


スタイルシートの基本構造


使用例：背景色・文字色を指定する。


下記コードは<head>～</head>の間に記述します。<style>～</style>までがスタイルシートCSSになります。通常タイトルタグは<title>~</title>で囲まれ見出しタグh1となるのですが、今回は特別に「h6」タグを指定しました。


このブログで使用している見出しタグで文字の大きさや文字色等に影響が出るからです(笑)。他のページにも影響が出ないように配慮しました。


<html>

<head>

   <h6>タイトルを記入します</h6>　　・・・h1だと当ブログに影響が出るので(笑)

　　<style type="text/css">

     h6{

        background-color: red;

        color: white;

     }

     p {

        color: blue;

        margin-leftt: 1em;

     }

   </style>

</head>

</html>



HTMLのみ、スタイルシートなしの表示

タイトルを記入します


HTMLにスタイルシートCSSを付加の表示

文字を入力します。

文字を入力します。

文字を入力します。


スタイルシートCSSのタグ要素を説明します。

スタイルシートCSSの説明


時刻: 0 件のコメント:
ラベル:

2021年3月27日土曜日

スタイルシートCSSの記述・使用方法「HTMLタグの中で直接style属性を記述して使用する」‐HTML・CSSを学ぶ

 スタイルシートとは

サイトのデザインを構築するために使用します。スタイルシートをマスターすると、サイトのデザインを簡単に変えることが出来るようになり、まるっきりイメージの違ったサイトにすることが出来るのでとても便利です。


既存のHTMLをスタイルシートで色や形、大きさなどを指定、変化させることでイメージ通りのサイト構築をしていきます。HTMLに対してスタイルシートをどのように絡めて適応させていくかで３種類の方法があります。


スタイルシートの記述場所

HTMLに対してスタイルシートCSSの記述場所をイメージ画像で表しています。

  • HTMLタグの中で直接style属性を記述して使用する。

HTMLタグの中で直接style属性を記述付加して使用する


HTMLの中でstyle要素としてまとめて付加して使用する


スタイルシートとして独立した要素を記述し使用する


今回は「HTMLタグの中で直接style属性を記述して使用する」方法について学びます。


・HTMLタグの中で直接style属性を記述して使用する。

使用例：見出しや段落のタグの後に続けてスタイルシートCSSを記述します。文字の背景や文字の色などを指定します。style="~"

"color:blue;"・・・文字色を青にする。　"background-color:red;"　・・・文字の背景色を赤にする。


<p style="color:blue; background-color:red;">文字を入力します</p>


文字を入力します


ブロガーBloggerでは文字の色を変更したり文字の背景色を変えたりする機能があります。

ブロガーBloggerの機能を使って文字色を変更する。

文字の色を変えたい場合


変更したい文字を選択して「テキストの色」をクリックします。色の選択画面で色を選択します。例：文字の色を青にします。

テキストの色

色の選択



文字の色を変える　　　・・・文字の色を青にします。


文字の背景色を変えたい場合


変更したい文字を選択して「テキストの背景色」をクリックします。文字の色を変える場合と同じく色の選択画面で色を選択します。例：文字の背景色を赤にします。

テキストの背景色



文字の背景色を変える　　　・・・背景色のみ赤に変更してみました


時刻: 0 件のコメント:
ラベル:

2021年3月26日金曜日

ホームページを構成する代表的な要素「hr」「blockquote」「strong、a、img」などを組み合わせてホームページが作られる‐HTML・CSSを学ぶ。

 ホームページを構成する要素はブロックレベル要素と言われる「h1、h2、p、ul、li」、インライン要素と言われる「brまたはbr /」の要素があります。


ブロックレベル要素とインライン要素について詳しくはこちら：「h1やh2」などの見出し・段落、「divやspan」などのブロックレベル要素・インライン要素‐HTML・CSSを学ぶ


ブロックレベル要素・インライン要素はまだ、たくさんの要素があり今回はブロックレベル要素「hr、blockquote」、インライン要素「strong、a、img」について学びます。


ブロックレベル要素

「hr」要素

区切り線を引きたいときに使います。<hr>は開始タグのみで使用する。線を引きたいところにタグを使用する。


使用例

<hr>・・・区切り線

<p>区切り線を引く</p>

<hr>・・・区切り線


区切り線を引く


「blockquote」要素

引用を表します。何かの問題が発生した時に定型文を引用します。少し幅や高さが小さく表示されます。


<p>

只今問題が発生しています。機能をご利用いただけません。

</p>

<blockquote>

<p>

このまま暫くお待ちください。今係員が対応しています。

</p>

</blockquote>


只今問題が発生しています。機能をご利用いただけません。

このまま暫くお待ちください。今係員が対応しています。


インライン要素

「a」要素

リンクを表す要素でリンクを貼りたい時に使用します。<a>～</a>はこれだけでは意味を持ちません。<aの後ろにリンク先のURL属性を付加して使用します。


使用例

<p>

<a href="index.html">指定のページ</a>へリンクしたり<a href="https://fslife39.blogspot.com/">最強のスマホ・パソコンライフ</a>にリンクをすることが出来ます。

</p>


指定のページへリンクしたり最強のスマホ・パソコンライフへリンクをすることが出来ます。


「strong」要素

文字を太字にして強調します。「strong」要素で囲んだ部分のみ強調できます。見出しでも文字を太字に強調できますが、見出しはあくまでも見出し専用です。文章の中で強調したい部分には「strong」を使用します。

見出しについてもっと見てみる：ブロガーBloggerでブロックレベル要素「h1、h2、h3、h4、段落、標準」などの表示の違いを見てみます‐HTML・CSSを学ぶ。


使用例

<p>

文字を<strong>強調</strong>します。・・・「強調」部分を強調します

</p>


文字を強調します


「img」要素

画像をページ内に挿入するときに使用します。imgはこれだけでは意味を持ちません。src、width、height属性を付加して使用します。


使用例

<p>画像を挿入します。

<img src="fslife39.jpg" width="88" height="31" alt="最強のスマホ・パソコンライフ"</p>


「img」要素に付加して使用する属性

src="画像のURL・ファイル名"

width="画像の幅"

height="画像の高さ

alt="画像が表示されない時の代替文字"最強のスマホ・パソコンライフ"


画像を挿入します　　最強のスマホ・パソコンライフ


時刻: 0 件のコメント:
ラベル:

2021年3月25日木曜日

ブロガーBloggerでブロックレベル要素「h1、h2、h3、h4、段落、標準」などの表示の違いを見てみます‐HTML・CSSを学ぶ。

 h1、h2、h3、h4、段落、標準と言われても実際にどのように表示されるかイメージできないでよね。なのでブログでどのように表示されるのか検証してみたいと思います。h5、h6は省略します。

ブロガーBloggerで「見出しタグ・要素」の実際の表示


「主見出し：h1」

<h1>文字を入力します</h1>


「見出し：h2」

<h2>文字を入力します</h2>


「小見出し：h3」

<h3>文字を入力します</h3>


「準見出し：h4」

<h4>文字を入力します</h4>


「段落・標準：p」

<p>文字を入力します</p>


なんでも強調したいとh1ばかりを使用したのでは大きな文字ばかりになってブログのデザインが崩れてしまいますし、何を伝えたいのかもわかりません(笑)。


何を一番に強調したいのか、その中に含まれるものとして次に重要な位置を占めるものは何かを位置付けて明確にすることが大事です。

文字の大きさを比較


メインとサブで表現できれば見ている人に伝わりやすいと思います。目的やデザインのイメージが湧くようになれば、ブログでの使用方法も変わってくると思うので今後に生かしていきたいと思います。

時刻: 0 件のコメント:
ラベル:

2021年3月24日水曜日

「h1やh2」などの見出し・段落、「divやspan」などのブロックレベル要素・インライン要素‐HTML・CSSを学ぶ

これまでに、<p>や<br>または<br />、<ui>、<li>などの要素について学ぶ機会がありましたが、他にもホームページを構成する主な要素がありますので説明します。


見出し

ブロガーBloggerでは見出し機能があります。

通常は「標準」となっていますが、クリックすると「主見出し」「見出し」「小見出し」「準見出し」「段落」「標準」とメニューがあり、文字にカーソルを合わせて表現したい見出し種類を選択します。文字が太字になったり大きくなったり強調されます。


見出し

見出しタグ・要素

「主見出し」は文字が大きく良く目立つように表示されます。下へ行くほど文字が小さくなりインパクトが小さいです。

実際の表示を見る：ブロガーBloggerでブロックレベル要素「h1、h2、h3、h4、段落、標準」などの表示の違いを見てみます‐HTML・CSSを学ぶ。


<h1>文字を入力します</h1>・・・「主見出し」


<h2>文字を入力します</h2>・・・「見出し」


<h3>文字を入力します</h3>・・・「小見出し」


<h4>文字を入力します</h4>・・・「準見出し」


<h6>まであるのですが、私には必要ありません(笑)


<p>文字を入力します</p>・・・「段落」


<p><br /></p>・・・改行して段落を表しています



ブロックレベル要素とインライン要素


「<div>文字を入力します</div>」と「<span>文字を入力します</span>」は単体では意味を持ちません。この後に続く文字等をブロック化してスタイル等を適用することが出来ます。


<div>文字を入力します</div>

ブロックレベルの要素でグループ化ができるので、見出しや段落、リストなどと同じく前後に改行が入ります。


使用例「後に続く文字や対象の位置を指定する。」

<div align="center">文字を入力します</div>・・・文字を中央に表示する

<div align="right">文字を入力します</div>・・・文字を右に表示する

<div align="left">文字を入力します</div>・・・文字を左に表示する


<span>文字を入力します</span>

インライン要素でブロックレベル要素の中に記述して使用する。改行が入りません。


使用例「後に続く文字や対象の色を指定します」

<span style="color:blue">文字を入力します</span>・・・文字を青にします

<span style="color:white">文字を入力します</span>・・・文字を白にします

<span style="color:red">文字を入力します</span>・・・文字を赤にします


<p>文字を<span style="color:blue>入力</span>します</p>・・・「入力」の文字だけを青にします。


時刻: 0 件のコメント:
ラベル:

2021年3月23日火曜日

本文は「タグ＜body＞と＜／body＞の間」に記入する。h1、p、ul、li要素について‐HTML・CSSを学ぶ

 HTMLの基本構造

これはHTMLビューでの作業になります。


HTML・CSSを本で学ぶ


一番外側に<html>～</html>、次に<body>～</body>があります。この<body>～</body>タグの中に本文を記入します。


本でHTML・CSSを勉強してみる

Amazon
Amazonで見てみる：HTML・CSS 		楽天
楽天で見てみる：HTML・CSS



　


<html>


<body>


  <h1>見出し</h1>


   <p>ここに文字を記入します。</p>・・・段落になります。


<br>または<br />・・・改行します。


<!--リスト開始-->・・・これは作成ビューでは表示されません。メモとして使えます。


   <ul>・・・ここからリストが始まることを意味します。


     <li>リスト１</li>

     <li>リスト２</li>

     <li>リスト３</li>

     <li>リスト４</li>

     <li>リスト５</li>


   </ul>・・・ここでリストが終わることを意味します。


<!--リスト終了-->・・・これは作成ビューでは表示されません。メモとして使えます。


<br>または<br />・・・改行します。


   <p>ここに文字を記入します。</p>・・・段落になります。


<br>または<br />・・・改行します。


   <p>ここに画像を挿入します。</p>・・・段落になります。


<br>または<br />・・・改行します。


   <p>ここにリンクを挿入します。</p>・・・段落になります。


   <p>ここに文字を記入します。</p>・・・段落になります。


   <p>ここに文字を記入します。</p>・・・段落になります。


</body>


</html>


開始タグがあれば必ず終了タグがあることを念頭に入れて大まかなHTMLの構造をイメージすると良いと思います。ただし、開始タグのみの要素もあるので注意が必要です。


開始タグのみの要素：間違えて覚えてしまった「タグ」と「要素」、「空要素」、＜br＞と＜br ／＞の違い‐HTML・CSSを学ぶ。


時刻: 0 件のコメント:
ラベル:

2021年3月22日月曜日

間違えて覚えてしまった「タグ」と「要素」、「空要素」、＜br＞と＜br ／＞の違い‐HTML・CSSを学ぶ。

 私は一つのコードをタグと覚えていました。専門書によればこれはタグを含んだ要素と言うものになるのだそうです。


【タグ】

先日覚えた<p>及び</p>をタグと言います。文字の始まりのタグ＝開始タグ<p>と終わりのタグ＝終了タグ</p>です。


<p>,</p>・・・タグ


【要素】

では、要素とは文字を入力するときに、文字を<p>と</p>のタグで挟んで文字を表示します。例えば「<p>～文字を入力します</p>」となりますが、このタグと文字を組み合わせたものを「要素」と言います。


<p>～文字を入力します</p>・・・要素


【空要素-開始タグのみを使用】

タグは、通常は開始タグと終了タグの組み合わせで使用しますが、開始タグの一方のみのタグも存在します。要素が無い「空要素」と言われています。


例えば改行を意味する<br>または<br />やimgで指定される画像要素などです。<br>と<br />はどちらも「改行」なのですがブロガーBloggerでは後者の<br />が使用されています。


この<br />はネット情報では元々のHTMLの定義法はSGMLと言うものでSGMLを簡略化および改良した形のXMLが開発され新たに定義されたものなのだそうです。この辺は簡単な歴史の流れを整理しておけばいいかなと言う感じです(笑)。


  • <br>、<br />タグ

    ブロガーBloggerでHTMLビューにて<br>と入力すると、作成ビューにしてHTMLビューに戻ると<br />に自動的に変換されています。自動的に変換されるので問題はないように思いますが、そのブログサイトの仕様に沿ったタグを使用されることをお勧めします。


  • 画像要素「img」

    <a href="画像のURL"><img alt="画像のタイトル・スタイル等"></a>


時刻: 0 件のコメント:
ラベル:

2021年3月21日日曜日

野良ネコが倉庫の天井裏に赤ちゃんを産んでいました。親は近所をうろついていた「白黒」ネコ。

野良ネコが天井裏に赤ちゃんを産んでいた

野良ネコの赤ちゃん

 以前から倉庫の扉に綻びが出来て小動物なら出入りできそうな穴が開いていました。長らく放置していたのですが、やっと重い腰を上げて補修工事に取り掛かりました。


資材や工具を持って何度か出入りしているうちに何か異変を感じました。何か音がするような、見られているようなそんな感覚です。


かすかな音がした天井付近を見渡しましたが、そこは完全に塞がれた空間であり何もありません。ただ、倉庫は入り口を入って半分辺りで天井裏に続く開口部があるのです。一旦倉庫から出て脚立を用意してきました。


何かいるのだろうかと恐る恐る上がっていくと天井裏の一番奥の方にネコが居るのです。私は驚いてネコを追い出そうとして奮闘(笑)。このときはネコと分かり余裕で対処していました。


長い棒を持ってきて出入り口の方に誘導するようにするのですが、なかなか出ようとしません。何度目かに出入り口めがけて走り出し倉庫から出ていきました。私は安堵して作業を再開しました。


ほぼ工事を終えた頃だったので、まもなく終了。ですが、ネコがまだ近くにいるような気配がしていました。鳴き声もしていましたが次第にしなくなりました。作業が終った頃にその時のネコについて考えていました。


そのネコは体の色が白黒で近所を何時も徘徊している猫たちの一匹です。近所に住み着いているネコはまだ数匹いて体の色がグレー、黒、茶、そして白黒が２匹と確認しています。


この白黒の１匹は妊娠していて数日前に私が新聞を取りに行っている隙に母屋の玄関の中に入りひっそりと傘立ての陰に隠れていたのです。私がビックリして驚いたので、ネコも慌てて出ていきました。


その時のネコであればお腹が大きいはずなんだけど、今回は倉庫から出てもらうことを考えていたのでじっくりと見たわけではなく判断は難しいのですが、そんなに大きくは見えませんでした。何か嫌な予感がしてきました。(ー_ー)!!


もう一度脚立を上がっていくと、倉庫には棚がありその棚の一番上に段ボールがあってビニールホースを入れていたのですが、動物の毛が付着したりして汚れています。不安が的中かと思いながら天井裏を覗いてみました。


奥の方に何やら塊があります。暗くて離れているので見えにくいのですが、ヘッドライトを持ってきて照らしながら、よーく見ると小動物のような感じでゆっくりと動いています。野良ネコの赤ちゃんなのかと半信半疑でいました。

天井裏に野良ネコの赤ちゃん


どうしようかと迷っていたのですが、私が母ネコを追い出してしまった手前、後ろめたさもありました。このまま扉を閉めてしまうと母ネコが入れずに子供たちは餓死して死んでしまうでしょう。かといって扉を壊すことも躊躇され、開放しておくのも物騒です。


悩んだ挙句、取り敢えず子ネコを生まれた段ボールに戻しておくことにしました。おそらく私が倉庫の修復工事を始めたため、親ネコが警戒して天井裏の奥の方に移動させたのでしょう。大人では天井裏に入ることは無理で釣りで使うタモ網を持って来てすくうことにしました。

野良ネコの赤ちゃんをタモ網ですくう


タモ網は伸縮できるもので十分の長さがあるのですが、相手は生きた動物、しかも生まれたばかりの子猫の様です。無理な力は掛けられないので慎重に行いました。子ネコは２匹いました。一匹は「茶色」、もう一匹は親と同じかちょっと薄めの「薄白黒」です。

野良ネコの赤ちゃんをタモ網ですくう2


我が家では近所を徘徊している野良ネコを体表色で区別しているのです(笑)。上手く網に収まり手元まで手繰り寄せました。本当に生まれて間もない赤ちゃんの様です。倉庫の外を見回してみましたが母ネコと思われる声がしたと思ったのですが姿は見えませんでした。


何処に行ったんだろうと多少不安になりましたが、この中で生まれたと思われる段ボールに入れて日あたりの良い倉庫の外に出してみました。今日は天気が良くて暖かくて良かったです。

野良ネコの赤ちゃんを日当たりの良いところへ


眺めているとネコの鳴き声が！、また鳴き声が！！振り向くと・・・母ネコの「白黒」です。今にも近寄りたいという素振りで私を見たり子ネコを見たりして座っているのです。私は近くにいる野良ネコをみて驚きを隠せませんでした。


母ネコの「白黒」


いつもは私に近寄ってくることはなく、こちらが近づこうとすると走って逃げているのです。これも子を思う親心、母心ですね。感動しました(´;ω;｀)。私がここに居てはいけないと直感！後退ってその場を離れて家の裏側に回り、家の中から扉を少し開けて様子を見ることにしました。


母ネコの子を思う親心、母心


「うん？」どうしたんだろう？さっき迄いた母ネコの「白黒」が居ません。暫く待ってみたのですが戻って来ないので子ネコの様子を見に行きました。そうすると「薄白黒」が居ません。「茶」はまだ段ボールの中に居ました。


野良ネコ赤ちゃん「茶」


親が今日のねぐらを探して「薄白黒」を口にくわえて運んだのでしょう。まだ「茶」が居るので必ず戻ってくると判断して待つことにしました。ですがなかなか母ネコは戻ってきません。今日のねぐらが見つけられないでいるのでしょうか。


今となっては母ネコに申し訳ないという気持ちで早く倉庫の扉を修理しておけば、このようなことにならなかったはずだと後悔の念に駆られました。


２時間ぐらい経った頃でしょうか。近くの田んぼのあぜ道から子ネコの様子をうかがっている母ネコを確認していますが、子ネコの側迄寄って来ることはなくまた去っていきました。育児放棄？最悪、私が育てるしかないのだろうかと考えていました。


我が家では、犬は飼っていたことがあるのですがネコは飼ったことはありません。飼い方も分かりません。


困ったなと思案しながら１時間ぐらい経った頃でしょうか、母ネコが近くに寄ってきていました。様子を見ていたのですが何時の間にか「茶」が居なくなっていました。目を離したのは１分にも満たないと思います。


子ネコは生まれて間もないと思われ段ボールから這い出す力はなく、母ネコが口でくわえて兄弟のところに連れて行ったのでしょう。とりあえずねぐらが見つかったようで安心しました。


元気で育ってほしいと思います。

この子ネコたちの成長した姿を追いかけてみました。下記のリンクです。ご利用ください。
倉庫の天井裏で生まれた野良ネコの赤ちゃんのその後を追跡してみました


アップロードした動画：野良ネコが倉庫の天井裏に赤ちゃんを産んでいました。親は近所をうろついていた「白黒」ネコ。




時刻: 0 件のコメント:
ラベル:

2021年3月20日土曜日

ブロガーBloggerのHTMLビューでタグとタグの間にコードを挿入する。目的の挿入する場所を簡単に見分ける方法‐HTML・CSSを学ぶ。

 ブロガーBloggerのHTMLビューでパッと見て英数字や日本語文字が一列に並んでいる為、HTMLやCSSに慣れていない方は特に理解し難い表示だと思います。


HTMLビュー「タグが一列」


通常はタグの表記は見やすく整理されています。

見やすいタグ表記


通常はタグやコードを見やすく行を変えて配列してあるのですが、そのコードをブロガーBloggerのHTMLビューでは自動で一列に配列が変更されてしまうのです。なので新たにコードを追加で挿入しようとしても見分け難くいなと感じています。


例えば、アフィリエイトコードや個別のアドセンスコードなどをタグとタグの間に挿入する場合、HTMLビューにして挿入場所を探してコードを貼り付けます。記事が長くなればなるほどこの作業はなかなか難しくなってきます。


何かいい方法を無いものかと考えていたのですが、ここはやはり地道に探すしか方法はないように思われます。ですが、ポイントを押さえて探せば、何とかなるような気もしますので私のやり方を紹介します。


タグとタグの間にコードを挿入する場所を簡単に見分ける方法

  1. 作成ビューでタグを挿入したい場所を決めます。


    タグとタグの間にコードを挿入

  2. 挿入したい場所を決めたら、その場所の直ぐ前の文字を確認します。
    ここでは「難しくなってきます。」という文字を覚えておきます。

    挿入場所の直ぐ前の文字を確認する

  3. HTMLビューにします。

    HTMLビュー

  4. 挿入したい場所の直ぐ前の文字「難しくなってきます。」という文字を探します。
    有りましたね。自分で作成した文章なので順を追っていくと見つけやすいです。

    HTMLビューで挿入の位置を特定

  5. タグを挿入する場所はこの文字の後ろにある</p>の後ろに挿入します。

    挿入場所は</p>の後ろ

文字列は<p>と</p>で囲まれるという勉強をしました。詳しくはこちら：「HTMLの基本【＜P＞文字を入力する＜／P＞】タグ-HTML・CSSを学ぶ。」


文字の一部「難しくなってきます。」も「<p>～難しくなっています。</p>」で一つのタグになっているのです。なのでそのタグの終わり</p>の後ろに挿入することになります。


時刻: 0 件のコメント:
ラベル:

2021年3月19日金曜日

HTMLの基本【＜P＞文字を入力する＜／P＞】タグ‐HTML・CSSを学ぶ。

ブロガーBloggerのHTMLビューではHTMLタグが使用されています。ブログを見栄え良く自分好みにするためにはHTMLとCSSの最低限の知識が必要です。


HTML・CSSを学ぶ


少しでも良いブログを作ろうと努力はしていますが参考書もないようでは知識も深まらず、身に付かないでしょう。インターネットから部分部分で得られる知識もありますが、ここはやはり系統的に基礎をしっかりと学ぶことが向上への早道だと思います。


このHTMLとスタイルシートCSSの基礎をこのブログで実践・検証しながら学んでいきたいと思いこのカテゴリを始めることにしました。なお、このブログでは管理人の好みや必要性に基づき学んでいくため、系統的な構成になっておりません(笑)。理解不足や間違いがあるかと思いますがコメント等で指摘して頂ければ幸いです。


ホームページやブログではHTMLとCSS等コードが使用されページが作成されています。その役割・機能はというと、HTMLはページの本文を作成するためにあり、CSSはデザインの構成を担っています。


HTMLの基本構造



HTMLの基本構造について追加説明：本文は「タグ＜body＞と＜／body＞の間」に記入する。h1、p、ul、li要素について‐HTML・CSSを学ぶ

【<p>文字を入力する</p>】タグを学ぶ

ブログやサイトのページに文字を入力していくのですが、その最も基本となる<p></p>タグについて学びます。


ブロガーBloggerの作成ビューで下記のような文字を入力してみます。


文字を入力する


これをHTMLビューで見てみると


<p>文字を文字を入力する</p>


となっています。


入力文字を<p>・</p>で挟み込んでいます。HTMLビューで入力する場合は、入力文字の前に<p>を、後に</p>を記入することで文字を表示できるということです。本文全体は<body>と</body>で囲まれます。


例えば、「HTMLビュー」で下記のようなコードを入力します。

<p>文字を入力する-1</p>

<p>文字を入力する-2</p>

<p>文字を入力する-3</p>　

<p>文字を入力する-4</p>

<p>文字を入力する-5</p>


これを「作成ビュー」で見てみると下記の様に表示されます。


文字を入力する-1

文字を入力する-2

文字を入力する-3

文字を入力する-4

文字を入力する-5


この逆に「作成ビュー」で上記の文字を入力して「HTMLビュー」で確認しても同じようにタグが記載されています。


<p>文字を入力する-1</p>

<p>文字を入力する-2</p>

<p>文字を入力する-3</p>

<p>文字を入力する-4</p>

<p>文字を入力する-5</p>


CSSはこの文字の大きさを指定したり、色を付けたり、背景の色を変えたりするための「スタイルシート」と言われています。


この法則を良く覚えておくことで挿入したいコードがある場合に何処に挿入すればいいかが判断できるようになり役立ってくると思います。

時刻: 0 件のコメント:
ラベル:

2021年3月18日木曜日

ブログの表示がおかしいので修正します。コピー貼り付けで簡単に作業したのがアダとなってしまいました。

 どこかおかしいところはないかとブログを眺めていたのですが、どうも表示がおかしい(笑)。

文字の表示がおかしい


私の場合、誤字脱字が多いので何回も見直しているのですが、それでも抜けていることが多く度々修正・手直ししております。この記事を読んで頂いているブログの訪問者様に本当に申し訳なく思っています。


そして思い込みによる漢字の間違いもありお見苦しい次第です。学生時代にもっと勉強しておけばよかったなと思う今日この頃です。今になって後悔しても遅いのですが(笑)


人間の一生は生涯学習だと思っているので、これからでも遅くはない、いや遅くても今からでも始めれば先に役立つこともあるでしょう。がんばります(笑)。



さて、どんなところがおかしいかというとブログのタイトル「ブロガーbloggerブログ投稿一覧・サイトマップsitemap」での表示でメニューのところで文字の大きさが何となく違うように見える(笑)。


文字の大きさが違う


下記の画像でご覧頂いて各ラベル毎の中のメニューリストで表示されている文字が違って見えませんか？やっぱり違ってますよね。



作成画面ではなかなか分り難いのですがプレビューで見ると、ほんの少し文字の種類や大きさが違うのです。


そこでHTMLビューにしてタグを見てみると、なんと文字の大きさや種類をスタイルシートで指定しているのです。なぜこんなことになってしまったのでしょうか？


考えてみるとその原因に思い当たるところがあるのです。


私はこのブログを始めた当初、ホームページ作成ソフト「ホームページビルダー」を使用して投稿前に記事をある程度作成し表なんかも作成してブログに貼り付けていました。


そうすることで、記事作成がはかどり時間をかけずに投稿することが出来ると思っていました。


ですが、いざ実践してみると至る所で表示がおかしかったり、表が崩れたり、エラーとなっていたのです。HTMLビューで見てみるとタグが自動的に書き換えられていたりしていました。


HTMLの仕様でしょうか、ブログサイトごとの仕様でしょうか、ブログとホームページでは違うということは理解しているつもりでしたが、記事内においてHTMLが変わってしまうことに違和感を感じました。


CSSやJavaScriptも取り入れらたりなかなか難しいのですが影響を受けるようです。専門的なものは難しいとしても、基本的な勉強が必要ですね。

Amazon
【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 単行本


ホームページビルダーで作成した記事はブログでエラーになってしまうことがあると言うことで「スタイルなし」の設定にして作成したのですが・・。


ブログの方で削除したと思っていたスタイルシートのコードがまだ残っていた様です。削除したと思ってても取り残しがあるんですね。何をやってるんでしょう(笑)。


そういうことで余分なコードを削除していきます。以下の様なコードを削除しました。


HTMLビューで余分なコードを削除


修正後のメニューをプレビューしてみました。

正常に戻ってますね。良かったー(^^;)


時刻: 0 件のコメント:
ラベル:

2021年3月17日水曜日

ブロガーBloggerにYouTube動画を挿入しようとしたのですが、いつものやり方では動画を検索できず挿入できませんでした。

 YouTubeで動画をアップロードした時はブロガーBloggerで記事内にYouTube動画を挿入しているのですが、今日は私のアップロードした動画を検索することが出来ませんでした。

私の動画が表示されない


原因は良く分かりません。「なぜか？」などと疑問に思っている余裕はありません(笑)。いつもやっている動画挿入方法を紹介します。

Amazon
Amazonで見てみる：ホームページ作成・CSS 		楽天
楽天で見てみる：ホームページ作成・CSS


「動画を挿入」ボタンからYouTubeの動画を検索して挿入する方法

  1. いつものように動画を挿入したいところにカーソルを点滅させて「動画を挿入」ボタンをクリックしました。

    動画を挿入ボタン

  2. メニューから「YouTube」を選択しクリックします。

    メニューから「YouTube」を選択

  3. 動画の追加画面が表示されるので、「検索」をクリックします。

    「動画の追加」画面

  4. 動画の「キーワード」を入れて検索します。

    動画の「キーワード」

  5. 動画のキーワードは、私はいつも「動画のタイトル」を入力して検索しています。

    キーワードに「動画のタイトル」

  6. 検索結果が表示されましたが、私のアップロードした動画が表示されませんでした。もし表示されれば、その動画を選択すると記事内に動画が挿入できます。

    自分の動画が表示されない


なぜ、検索結果に表示されなかったのかは分かりません。残念ですが、仕方ありません。何か良い方法はないものかとネットで検索していると、Googleのヘルプで紹介されていました。


それは、YouTube動画で「共有」という機能を使えばブログや他のサイト等に動画を挿入できるというのです。


早速、試してみることにしました。下記にその方法を紹介します。


YouTube動画で「共有」という機能を使ってブログやサイトに動画を挿入する方法

  1. ブログやサイトに挿入したいYouTube動画を表示します。プレイヤーのすぐ下にある「共有」をクリックします。

    動画共有

  2. 共有画面が表示されるので「埋め込む」を選択しクリックします。

    動画を「埋め込む」

  3. 埋め込み用コードが表示されるので「コピー」します。

    埋め込み用コードのコピー

  4. ブログやサイトの、動画を埋め込みたいところに貼り付けます。貼り付けは勿論HTMLビューで行います。私の場合は記事の一番下に挿入しているのでHTMLビューで見ると一番下のところにコピーしたコードを貼り付けます。

    HTMLビューで埋め込み用コードを貼り付け

  5. 埋め込み用コードは次のようになっています。
    height=315が動画プレイヤーの高さを表し、width=560が動画プレイヤーの幅を表す数値です。


    埋め込み用コード


動画を「検索」から埋め込む方法と「共有」から埋め込む方法では、動画プレイヤーの大きさが違います。「検索」から挿入するとプレイヤーは小さく、「共有」から挿入するとプレイヤーは大きく表示されます。


二つのコードを比較してみると、この数値部分のみが違っており、他は同じでした。どちらの方法で動画を埋め込んでも問題はなさそうですね。やり易い方法で良いと思います。



時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)

おすすめドリンク

楽天
　 		Amazon

私にとって記念すべきブログ投稿となります

記念すべきブログ投稿 ブログ記事を書いている時、なぜか「思えば、遠くへきたもんだ～♪」と昔懐かしい歌の歌詞を口ずさんでいました。現在では、「海援隊」と言うグループ名は知らなくとも「武田鉄矢」ならご存じですよね。 武田鉄矢さんが確か３人でユニットを組んで活動しておられた時の歌なので...

  • スマホや パソコンで何ができるの？初めてのブログ投稿：はじめまして、宜しくお願い致します。
    スマホや パソコンで何ができるの？ スマホやパソコンが世の中に出回ってきて、今までやれなかったこと、処理に膨大に時間がかかっていたことが、ちょっとのスキルで格段に処理速度・能力がアップしてきました。 これまでのパソコンはトラブルが付き物で言わば不完全な機器でした。ちょっとしたこと...
  • 愛車の助手席と後部座席の下に水たまり。原因は天井から雨漏り-自分でDIY修理
     車を購入して10年を超えています(笑)。助手席とその後ろ側の床に水・た・ま・りが・・その原因と水漏れ箇所の特定に一苦労ｗ　自分で修理・補修してみました。 水漏れに気付いたのは親戚の墓参りをしたときに後ろの席に座っていた叔母と姉の様子が慌ただしく何やら騒いでいるのです。 そして「...
  • 私にとって記念すべきブログ投稿となります
    記念すべきブログ投稿 ブログ記事を書いている時、なぜか「思えば、遠くへきたもんだ～♪」と昔懐かしい歌の歌詞を口ずさんでいました。現在では、「海援隊」と言うグループ名は知らなくとも「武田鉄矢」ならご存じですよね。 武田鉄矢さんが確か３人でユニットを組んで活動しておられた時の歌なので...