Ararami

投稿

【CSS】marginが親要素からはみ出して適用される？

スタイルシートでデザインを作り込んでいく時、思った通りに margin が効いてくれない事があります。 marginは 0px なはずなのに・・・以下の例を見てください。 <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <style type='text/css'></style> </head> <body> <div class='div1'> <h1>タイトル</h1> <p>テスト</p> </div> </body> </html> <div>要素は背景色を黄色にしています。 <body>要素も<div>要素も margin は 0px に設定しているので、余白なく黄色い四角が表示されるように思いますが実際は隙間が空いてしまいます。隙間の正体この隙間は <h1>要素の margin です。 <h1>要素の margin が親要素である <div>要素を超えて適用されています。このような現象は <div>要素の padding と border が共に 0px の場合に起こります。 margin には接する要素の margin を相殺するという仕様があります。相殺されるケースは以下のような場合です。親要素の margin-top と先頭の子要素の margin-top 親要素の margin-bottom と最後の子要素の margin-bottom 同階層の最初の要素の margin-bottom と次の要素の margin-top

Bloggerでページを作成しよう

Bloggerには投稿とは別にページという機能があります。ページの機能をうまく活用して分かりやすいサイトを作りましょう。ここでは Bogger でページを作る方法を解説します。ページとはページとは投稿と同じように文章や画像などで構成された記事を作って公開する仕組みです。投稿はラベルで分類分けされたり日付でアーカイブされる機能があります。ページにはそれがありません。代わりに全ての投稿の上部または横側にページのリンクを表示させる事が出来ます。ページは「概要」や「プライバシーポリシー」などのような、どの投稿からもすぐにアクセスできるようにしておきたい情報を作る場合に便利な機能です。新しいページを作成しよう右側のメニューから「ページ」を選択します。「新しいページ」ボタンをクリックすると編集画面へと移ります。ページタイトルに注意！投稿ではパーマリンクという機能からページのURLを後から変更する事ができますが、ページではURLを変更する手段がありません。 URLはタイトルを元に自動で作成される仕組みですが、タイトルが日本語の場合<blog_page_xx.html>のようなページの内容とは関係ないものが付けられてしまいます。先ずはページ内容を表す英語でタイトルを付けるのが良さそうです。一度公開してURLが確定したら、その後でタイトルを日本語に編集してもURLは変わりません。少し面倒ですがこのような手順なら思い通りのページを作れそうです。本文の作成や公開手順本文の作り方は投稿の場合と同じです。見出しを付けたり画像を入れたりリンクを貼ったりがページでも同じ操作で行えます。下書きの保存や公開の流れも投稿と同じです。ページへのリンクを表示しよう投稿の場合は公開するとトップページ（ホーム）に概要が表示されますが、ページの場合は公開しただけではどこからもリンクされておらず作ったページにたどり着く手段がありません。トップページや各投稿からページへアクセスする為のリンクを表示させる設定を行ないましょう。右側のメニューから「レイアウト」を選択します。「ページリンク」ガジェットを見つけましょう。 ※使用して

Bloggerの統計で自分がアクセスしたカウントを除外しよう

Bloggerには統計機能がありブログへのアクセス数などを確認できる機能があります。ですが、確認のために自分でサイトへアクセスするという事は多いと思います。そのアクセスが統計にカウントされると正確な値が分からなくなりますよね。ここでは Bloggerの統計で自分がアクセスしたカウントを除外する方法について解説します。自分のページビューを統計情報に含めない設定設定は「統計」→「概要」から行います。「自分のページビューの追跡を管理」をクリックします。「このブログの自分のビューを追跡しない」にチェックを入れましょう。この設定はブラウザ毎に行う必要があります。複数のPCを使っている場合や複数のブラウザで確認している場合はそれぞれで設定を行なってください。

Google Search Consoleでページが検索エンジンに登録されているか確認しよう

Googleの検索結果に自身のサイトのページが表示されるためには、まず検索エンジンにそのページが登録されている必要があります。 Google Search Consoleを使えば Googleの検索エンジンに登録されているか確認する事が出来ます。 Google Search ConsoleでURL検査 Google Search Console にログインします。上部にある検索欄に確認したいページのURLを入力してみましょう。 Googleに登録されている場合既に登録済みであれば「 URLはGoogleに登録されています」と表示されます。 Googleに登録されていない場合まだ登録されていない時は「 URLがGoogleに登録されていません」と表示されます。検索エンジンは定期的にサイトを巡回して登録作業を行いますが、出来たばかりのページなどはまだ登録されていない場合があります。このような時は「インデックス登録をリクエスト」をクリックすると優先的に登録作業を行ってもらう事が出来ます。

Google Search Consoleにサイトマップを登録しよう

Google Search Consoleにサイトマップを登録する事で自身のサイトを検索エンジンに見つけてもらう事が出来ます。ここでは Google Search Consoleにサイトマップを登録する方法について解説します。サイトマップとはサイトマップとはサイトを構成する各ページのURLや最終更新日などをリストアップしたものです。検索エンジンから扱いやすいようにXMLファイルで記述するXMLサイトマップ(sitemap.xml)という形式が多く使われています。検索エンジンはこのファイルを見て新たに作られたページや更新されたページを見つけて検索ランキングに反映させていきます。サイトマップがあれば更新情報をいち早く検索エンジンに伝える事ができます。 Search Consoleへサイトマップを登録 sitemap.xmlの作成 Search Consoleへ登録する為にはまず sitemap.xml が必要なわけですが、Bloggerではこの sitemap.xml を自動で生成してくれています。生成されるサイトマップは以下のようなURLになります。 https://[ブログのアドレス]/sitemap.xml このブログの例） https://ararami.blogspot.com/sitemap.xml Search Consoleへ登録 Google Search Console へログインします。「サイトマップ」を選択して「新しいサイトマップの追加」の欄に sitemap.xml と入力して「送信」ボタンをクリックします。送信がうまくいくと「送信されたサイトマップ」に追加されステータスに「成功しました」と表示されます。

Google Search Consoleを導入しよう

Google Search Consoleは自分のサイトが検索エンジンに登録されているかやどのような掲載順位で表示されるかなどを閲覧する事が出来るツールです。ここでは Google Search Console の導入の仕方について解説します。 Google Search Consoleとは Google の検索エンジンに関する設定やレポートを行うツールで無料で利用する事が出来ます。最も重要なのは、自分のサイトやブログが Googleの検索エンジンに登録されているかという事です。検索エンジンはサイトのリンクをたどりながら世界中のサイトの情報を収集していますが、作ったばかりのサイトは他のサイトからリンクされていません。つまり検索エンジンには見つける事が出来ません。先ずは検索エンジンにサイトの存在を知らせる必要があります。 Google search Consoleではサイトを登録する機能や登録されたページがどのくらい検索されたかといったレポートを見る事が出来ます。 Google Search Consoleの始め方ログイン Google Search Console にアクセスします。「今すぐ開始」をクリックしましょう。 Search ConsoleにログインするGoogleアカウントが必要です。 Bloggerを利用している場合は同じアカウントでログインするとその後の設定が楽になります。サイトの登録続いて自身が管理しているサイトを登録します。プロパティという単位で複数登録する事が可能ですが、その１つめの登録を行います。登録方法は２種類用意されています。どちらかを選んでサイトURLを入力して「続行」ボタンをクリックしましょう。ドメインドメインまたはサブドメインを指定して登録する方法です。 URLプレフィックスの方では、複数のサブドメインがある場合や http とhttps では別々のプロパティで管理する必要がありましたがそれらをまとめて管理する事が出来ます。但し、こちらの方法ではこの後行うサイト所有者の確認作業でDNS確認が必要となります。独自ドメインを取得している人はこちらの方が管理しやすそうです。 URLプ

Bloggerの記事にハイパーリンクを付けてみよう

ハイパーリンクは文章の一部をクリックすると別の記事や別サイトへ移動する機能です。観覧者はこの機能を使って関連する情報へ次々と渡り歩いていくことが出来ます。ここでは Bloggerでのハイパーリンクを貼る方法について解説していきます。リンク先のURLを取得しようハイパーリンクはURLを使って移動先を指定します。ブラウザで移動先に指定したいサイトを開いてURLを取得しましょう。文章にリンクを設定しようハイパーリンクを設定するにはツールバーの「リンク」をクリックします。「表示するテキスト」の欄にはリンクが設定される文章を入力します。「リンク先のURLを指定してください」の欄には上記で取得した移動先のURLを入力します。「このリンクを新しいウィンドウで開く」にチェックを入れると、今開いているウィンドウとは別に新しくウインドウ（もしくはタブ）が開いてリンク先サイトが表示されます。チェックをしない場合は今開いているウィンドウでリンク先サイトが表示されます。リンクを編集や削除するには？ハイパーリンクを設定した部分をクリックすると以下のように表示されます。「編集」をクリックすると「リンクを編集」画面が表示されます。「削除」をクリックすると設定したリンクが解除されて通常の文章に戻ります。