プライバシーポリシー

 

当サイトに掲載されている広告について

当サイトでは、第三者配信の広告サービスを利用しています。
このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 『Cookie』(氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。
またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。

当サイトが使用しているアクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。
このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。
このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。
この規約に関して、詳しくはこちら、またはこちらをクリックしてください。

当サイトへのコメントについて

当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。

これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。

また、メールアドレスとURLの入力に関しては、任意となっております。
投稿された全てのコメントは管理人がその内容を確認し、スパム・荒らしと判断した場合コメントを削除することをあらかじめご了承下さい。

加えて、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。

  • 特定の自然人または法人を誹謗し、中傷するもの。
  • 極度にわいせつな内容を含むもの。
  • 禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。
  • その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。

免責事項

当サイトで掲載している画像の著作権・肖像権等は各権利所有者に帰属致します。権利を侵害する目的ではございません。記事の内容や掲載画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、対応させて頂きます。

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

プライバシーポリシーの変更について

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。

【HTML】ページ内リンクの仕組み/作り方

 

テーマ
◆ページ内リンクの仕組みを理解する
◆目次が作れるようになる

ページ内リンクとは?

外部のページに移動するリンクとは違い、同じページ内で移動するリンクのことを「ページ内リンク」といいます。

 

ページ内の特定の場所に移動したり、目次として使うことができ、非常に便利なリンクです。

ページ内リンクの作り方

<li><a href="#ID名">見出し名</a></li>

 

このように<li>で囲み、<a>のhrefでID名を適当に書きます。

 

<h1 id="ID名">見出し名</h1>

 

移動先の見出しは id= で上で適当に書いたID名を書きます。

 

このようにすることで上のリストのリンクをクリックすると、下のH1見出しに移動することができます。

 

目次を作ってみよう‼

ページ内リンクの主な用途は「目次」です。

 

このページの一番上にも目次がありますが、目次の設置はページのユーザビリティーを上げます。

 

では簡単な目次を作ってみましょう。

 

~~~移動元~~~

<ul>

<li><a href="#N1">見出し名1</a></li>
<li><a href="#N2">見出し名2</a></li>
<li><a href="#N3">見出し名3</a></li>
<li><a href="#N4">見出し名4</a></li>

</ul>

~~~移動先~~~

<h1 id="N1">見出し名1</h1>
<h1 id="N2">見出し名2</h1>
<h1 id="N3">見出し名3</h1>
<h1 id="N4">見出し名4</h1>

~~~表示例~~~

見出し名1

見出し名2

見出し名3

見出し名4

番号付き目次を作ってみよう‼

先ほどの目次に番号をつけてみます。

<ul>を<ol>に変えてみましょう。

 

~~~移動元~~~

<ol>
<li><a href="#N1">見出し名1</a></li>
<li><a href="#N2">見出し名2</a></li>
<li><a href="#N3">見出し名3</a></li>
<li><a href="#N4">見出し名4</a></li>
</ol>

~~~移動先~~~
<h1 id="N1">見出し名1</h1>
<h1 id="N2">見出し名2</h1>
<h1 id="N3">見出し名3</h1>
<h1 id="N4">見出し名4</h1>

~~~表示例~~~

  1. 見出し名1
  2. 見出し名2
  3. 見出し名3
  4. 見出し名4

見出し名1

見出し名2

見出し名3

見出し名4

目次の入れ子

目次を作っていると、目次1の中に目次2と3をまとめたい ということがあります。

目次の入れ子をやってみましょう。

入れ子にしたい場所を<ul>で囲みます。

 

~~~移動元~~~

<ol>
<li><a href="#N1">見出し名1</a></li>

<ul>
<li><a href="#N2">見出し名2</a></li>
<li><a href="#N3">見出し名3</a></li>

</ul>
<li><a href="#N4">見出し名4</a></li>
</ol>

~~~移動先~~~
<h1 id="N1">見出し名1</h1>
<h1 id="N2">見出し名2</h1>
<h1 id="N3">見出し名3</h1>
<h1 id="N4">見出し名4</h1>

~~~表示例~~~

  1. 見出し名1
  2. 見出し名4

見出し名1

見出し名2

見出し名3

見出し名4

あわせて読みたい

webdevopment.hatenablog.com

HTMLとCSSでエンドロールアニメーションを作る!!

 

テーマ
◆エンドロールアニメーション

エンドロールアニメーション

WEB DEVELOPMENT's blog
made by
WEB DEVELOPMENT
@WebDevelop8107
最新ブログ
ピックアップ記事
ツイート中!

サンプルコード

HTML/CSS

<div class="end">
<div class="anime">
<div class="text1">WEB DEVELOPMENT's blog</div>
<div class="text2">made by</div>
<div class="text3">WEB DEVELOPMENT</div>
<div class="text2">Twitter</div>
<div class="text3">@WebDevelop8107</div>
<div class="text2">最新ブログ<br />ピックアップ記事<br />ツイート中!</div>
</div>
</div>

<style>
.end {
text-align: center;
overflow: hidden;
position: relative;
margin: 2em auto;
width: 100%;
height: 340px;
background:#eeeeee;
}
.anime {
position: relative;
top: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-animation: anime14_text 60s linear infinite;
animation: anime14_text 60s linear infinite;
text-align: center;
color: #616161;
}
.anime .text1 {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 50px;
}
.anime .text2 {
font-size: 1em;
margin-bottom: 5px;
}
.anime .text3 {
font-size: 1.4em;
margin-bottom: 50px;
}
@-webkit-keyframes anime_text {
0% { top: 100%; }
100% { top: -200%; }
}
@keyframes anime_text {
0% { top: 100%; }
100% { top: -200%; }
}
</style>

あわせて読みたい

webdevopment.hatenablog.com

【HTML】時間差で別のページに移動させる

 

テーマ
◆一定時間後に既定のページに移動するページを作る

○○秒後に次のページに移動

ログイン後や外部リンクをクリックすると「○○秒後に次のページに移動します。」というページが表示されることがありますよね。

 

今回は一定時間経過後にページに移動する仕組みをみていきます。

HTML仕組み


<head>
<meta http-equiv="refresh" content="時間(秒);URL=移動先URL">
</head>
<body>
<p>○○秒後に指定のURLへジャンプします。</p>
</body>


ヘッダーにメタデータとして移動先のURLと content= で何秒後に表示するかを指定します。

 

このように書くことで一定時間後に指定のページにユーザーを送ることができます。

動作がよくわかるページ

時間差表示の動作が分かるページを作ったので見てみてください。

 

「脱出ボタン」でここに戻って来れます。

 

5秒サイクルのページです。

デモページに移動

あわせて読みたい

webdevopment.hatenablog.com

HTMLとCSSでメニューバーを作る!!

 

テーマ
◆メニューバーを作る‼
◆スライドメニュー

縦メニューバー完成品

縦メニューバーサンプルコード

HTML/CSS

<ul class="sidenav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<style>
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: relative;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #000000;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #1f2f54;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {
margin-left: 0;
}
}
@media screen and (max-width: 480px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>

スライドメニューバー完成品

スライドメニューバーサンプルコード

HTML/CSS

<div class="cp_navi">
<div id="cp_sidenav" class="sidenav">
<a href="#" id="home">Home</a>
<a href="#" id="news">Form</a>
<a href="#" id="contact">Contact</a>
<a href="#" id="about">Add</a>
</div>
</div>

<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_navi {
position: relative;
overflow: hidden;
width: 360px;
height:360px;
}
.cp_navi #cp_sidenav a {
font-size: 20px;
position: absolute;
left: -95px;
width: 110px;
height: 54px;
padding: 12px 15px;
transition: 0.3s;
text-decoration: none;
color: #ffffff;
border-radius: 0 5px 5px 0;
}
.cp_navi #cp_sidenav a:hover {
left: -10px;
}
.cp_navi #home {
top: 20px;
background-color: #da3c41;
}
.cp_navi #news {
top: 80px;
background-color: #1b2538;
}
.cp_navi #contact {
top: 140px;
background-color: #2e9b72;
}
.cp_navi #about {
top: 200px;
background-color: #a62e7a;
}
</style>

あわせて読みたい

webdevopment.hatenablog.com

HTMLとCSSでハンバーガーメニューを作る!!

 

テーマ
ハンバーガーメニューを作る‼

完成品

デモページに移動

サンプルコード

HTML/CSS

<header>
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input"><span></span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">ここに中身を入れる</div>
</div>
</header>
<style>
header {
padding:10px;
background: black;
}

#nav-drawer {
position: relative;
}

.nav-unshown {
display:none;
}


#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}


#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #fff;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}


#nav-close {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}


#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 90%;
max-width: 330px;
height: 100%;
background: #fff;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}


#nav-input:checked ~ #nav-close {
display: block;
opacity: .5;
}

#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
</style>

あわせて読みたい

webdevopment.hatenablog.com

HTMLで自作のバナーを作る!!

 

テーマ
◆バナーの必要性
◆バナーの作り方

バナーの必要性

サイトのアクセス数を上げる方法として、閲覧者に1つの記事を読んでもらったら、次の記事も読んでもらうというのがあります。

 

こういうことをサイトの回遊率といいます。

 

回遊率を上げるとサイトがGoogleから評価され、全てのページの検索ランクが少しずつ上昇していき全体のアクセス数アップに繋がっていきます。

 

回遊率を上げるために、おすすめ記事や特集を書いてオリジナルバナーを作り、サイドバーなどに設置するといいでしょう。

 

インパクトある画像を使って思わずクリックしてしまうようにすれば回遊率はアップします。

バナーの作り方

画像を用意・作成する

まずバナーに使う画像を用意または、作成します。

 

移動先のサイトに関連した画像やペイントなどで作成したオリジナルの画像を用意します。

 

バナーに使われる画像の大きさの目安は次の通りです。

 

468 x 60
234 x 60
88 x 31
120 x 90
120 x 60
120 x 240
125 x 125
728 x 90

画像にリンクを持たせる

画像に移動先のリンクを持たせていきます。

 

<a href="移動先のURL"><img src="画像URL.拡張子" alt="" border="0" /></a>

 

という風に書いていきます。

 

しかしHatenaブログやBloggerを使っている人は画像URLがないので次のように取得します。

 

Hatenaブログ

Googleフォト貼り付けか写真を投稿で画像を記事に張り付ける

 

HTML編集に切り替えるとimageタグとともに画像URLが生成される

 

imageタグをaタグで囲み移動先URLを書き込む

 

Blogger

画像貼り付けで画像を張り付ける

 

上記のHatenaブログと同様

完成品

f:id:imuimuimu:20200213215335p:plain

あわせて読みたい

webdevopment.hatenablog.com

【容量無制限?!】Googleフォトにバックアップ

 

テーマ
Googleフォトについて

Googleフォトでできること

  • 画像・動画の自動バックアップ
  • ムービーの作成
  • アニメージョンの作成
  • コラージュの作成
  • アルバムの作成

その他細かい機能がたくさんあります。

 

画像・動画のバックアップはバックアップしたいフォルダを選択することが出来ます。

バックアップできる容量に制限はあるのか

スマホの容量を減らしクラウド上にアップしてバックアップするGoogleフォトですが、容量制限はあるのでしょうか?

 

GoogleフォトはGoogleドライブとは別のクラウドサービスで容量制限はありません。

 

ただし写真は1枚当たり75MB、動画は10GBという制限のもとで容量無制限です。

利用上の注意

Googleフォトを使う上で注意しなければいけないことがあります。

 

Google児童ポルノに対して厳しい姿勢を取っています。

 

アップロードした写真にその類のものがあると、アカウント停止になってしまうことがあるかもしれません。

 

アカウントが停止されると、Gmailやドライブなど他のサービスも利用不可能になってしまうので注意しましょう。

あわせて読みたい

webdevopment.hatenablog.com

【はてなブログ初心者】これで大丈夫!!記事の公開までの流れ

 

テーマ
◆Hatenaブログ ~ブログ投稿までの手順~

手順

  • Hatenaブログのトップページにある「記事を作成」をクリックして記事の内容を完成させます。

 

  • 記事が完成したら左の編集サイドバーにある「カテゴリ」で記事のカテゴリを追加します。

 

  • サイドバーの編集オプションで「アイキャッチ画像」を選択します。

 

  • 同じく編集オプションで「記事の概要」を書きます。←←←ここで書いた内容はSNSで記事を紹介するときなどに表示されます。

 

  • 記事と投稿設定が完了したら記事を「公開する」をクリックして投稿します。