HTMLとCSSで自作読者ボタンを作る!!

 

テーマ
オリジナル読者ボタンを設置する

 

読者ボタンを作る
 
以下のような読者ボタンを作ります。
押したくなるようにするためにマウスホバーしたときに開くようにしました。
サンプルコードはその下です。

 

サンプルコード
<div class="container">
<a class="btn-open" href="https://blog.hatena.ne.jp/あなたのHatenaID/ブログのURL/subscribe">読者になる</a></div>
<style><!--
.container {
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  text-align: center;
  padding-top: 40px;
}
.btn-open {
  display: inline-block;
  width: 180px;
  height:50px;
  text-align: center;
  background-color: #dcdcdc;
  font-size: 16px;
  line-height: 52px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #000000;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-open:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background : #FFF;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}
.btn-open:hover{
  color: #9ec34b;
}
.btn-open:hover:after{
  height: 240%;
  opacity: 1;
}
.btn-open:active:after{
  height: 340%;
  opacity: 1;
}
--></style>
読者ボタンをブログに貼り付ける

そうしたら出来たコードの動作確認をします。
このように表示され同じ動きができていれば完成です。

 

 

webdevopment.hatenablog.com

 

HTMLとjavascriptでタイマーを作る!!

 

テーマ
HTML・javescriptでタイマーを作る!!

 


今回はHTMLとjavascriptを使ってカウントダウンタイマーを作っていきます。

難しく感じるかもしれませんがコピペで作れますので、ぜひ試してみてください。

javascriptは外部ファイルではなくHTMLの後に記述する方法でもOKです。
(Blogger対応)

そのままコピペすると下のようなタイマーが設置されます。

カウントダウンタイマー
サンプルコード

 

HTML・javescript<script type="text/javascript">
var year = "2200";var month = "1";var day = "1";var hour = "0";var minute = "0";var centi = "5";
var convert = "0";var roop = "";
var cnt1 = "日";var cnt2 = "時間";var cnt3 = "分";var cnt4 = "秒";
var baseoffset = "none";var cuttime = "";
var br1 = "1";var br2 = "";var br3 = "";var br4 = "1";
var com1 = "終了まで";var com2 = "と";var com3 = "";var com4 = "終了しました";var end = "2";
var width = "400";var height = "150";
var font = "arial";var font2 = "7seg4";var size = "18";var t_size = "30";var l_height = "27";var t_height = "30";var bold = "";var italic = "";var line = "";
var space = "30px 0px 0px 0px";
var align = "2";var img = "";
var color1 = "FFFFFF";var color2 = "00FF00";var color3 = "000000";
</script>
<script type="text/javascript" src="//countdown.reportitle.com/js/neo1.js"></script><a href="//countdown.reportitle.com/">カウントダウンタイマー</a><script type="text/javascript" src="//countdown.reportitle.com/js/neo2.js"></script>



      の所でタイマーが終了する"年" "月" "日" "時刻" "秒" を指定します。


      の所でカウントダウン中に表示する文字を決めます。


      の所でカウントダウンが終了したときに表示する文字を決めます。


      の所で日本語の文字色を指定します。


      でマークした所でカウントダウンの数字の色を指定します。


      でマークした所で背景色の指定をします。

タイマーの使い道

タイマーなんてどこでつかうの?と思うかもそれませんが、使い方によっては大きなメリットを得られることがあります。

タイマーをつける目的
  1. イベント終了までのカウントダウン
  2. グッズ販売等のセール時のカウントダウン

  3. 自分の誕生日までのカウントダウン

  4. 年越しまでのカウントダウン

などの使い道があります。

得られるメリットとしては、

  1. 閲覧者に終了日を効果的に知らせれる
  2. 売上アップにつながるかも
  3. 誕生日を覚えてもらえる + 祝ってもらえる
  4. 年越しのが近づくと自分のブログを開いてくれる人が増えるかも

 このようにタイマーを設置することにより大きなメリットを得ることができます。

webdevopment.hatenablog.com

 

HTMLとCSSでタブ切り替え

テーマ
CSSを外部ファイル化せずにHTMLと一緒に書く


今回はCSSをHTMLと一緒に書き、「タブ切り替え」を作っていきます。

<完成形>


第一項目
第二項目
第三項目
Point

styleタグでCSSを書き
.〇〇〇の〇〇〇の部分をdivタグのclass="〇〇〇"で指定して使う

サンプルコード

 

 
<div class="tab-wrap">
<input checked="checked" class="tab-switch" id="TAB-01" name="TAB" type="radio" /><label checked="checked" class="tab-label" for="TAB-01">HTML</label>
<input class="tab-switch" id="TAB-02" name="TAB" type="radio" /><label class="tab-label" for="TAB-02">CSS</label>
<input class="tab-switch" id="TAB-03" name="TAB" type="radio" /><label class="tab-label" for="TAB-03">Javascript</label>
<input class="tab-switch" id="TAB-04" name="TAB" type="radio" /><label class="tab-label" for="TAB-04">結果</label>
<br />
<div class="tab-content" id="TAB-01-content">
HTML
</div>
<div class="tab-content" id="TAB-02-content">
CSS
</div>
<div class="tab-content" id="TAB-03-content">
Javascript
</div>
<div class="tab-content" id="TAB-04-content">
結果
</div>
</div>

<input class="tab-switch" id="TAB-02" name="TAB" type="radio" /><label class="tab-label" for="TAB-02">CSS</label>
<input class="tab-switch" id="TAB-03" name="TAB" type="radio" /><label class="tab-label" for="TAB-03">Javascript</label>
<input class="tab-switch" id="TAB-04" name="TAB" type="radio" /><label class="tab-label" for="TAB-04">結果</label>
<br />

<div class="tab-content" id="TAB-01-content">
HTML
</div>
<div class="tab-content" id="TAB-02-content">
CSS
</div>
<div class="tab-content" id="TAB-03-content">
Javascript
</div>
<div class="tab-content" id="TAB-04-content">
結果
</div>
</div>
<style type="text/css">
.tab-label {
color: White;
background: LightGray;
padding: 3px 12px;
cursor: pointer;
display: inline-block;
}
.tab-content {
display: none;
border-top: 3px solid green;
padding: 10px;
box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.tab-switch:checked+.tab-label {
background: green;
}
#TAB-01:checked ~ #TAB-01-content,
#TAB-02:checked ~ #TAB-02-content,
#TAB-03:checked ~ #TAB-03-content,
#TAB-04:checked ~ #TAB-04-content {
display: block;
}
.tab-switch {
display: none;
}
</style>
 
結果


HTMLとCSSの赤字の部分を見ると分かるように、文字が一致しています。

このようにすることでdivタグでCSSを呼び起せるようになります。

基本HTMLタグ

このブログではWEB制作をしていくときによく使うHTMLタグを紹介します。



テーマ
最低限覚えておくべきHTMLタグ

 


hタグ

6段階のレベルで見出しを作るタグ

最大の見出しがh1で
h2
h3
h4     ←基準値
h5
h6
の順で小さくなっていきます。

使い方

<h1>ここに文章</h1>


aタグ

href属性を使ってリンク先を指定することで、他のページに移動することができるタグ

使い方

<a href="ここにURL">表示する文字</a>


divタグ

ブロック要素の指定や、スタイルシートの適用に用いるタグ

以下のように指定することで、CSSを使ってスタイルを変更することができるようになります。

使い方

<div class="example"></div>


metaタグ

サイトの本文とは別に、付加情報を記述できるタグ

このタグを使い、情報を記述することで、ブラウザなどに対して、製作者やキーワードの情報を伝えることができます。

例えば以下のような情報を記述できます。
・author : 製作者
・date : 作成日
・keywords : キーワード
・reply-to : 連絡先 
・description : 頁の説明文
・copyright : 著作権

使い方

文書を説明

<meta name="description" content="HTMLタグの解説。">

キーワードを指定
<meta name="keywords" content="HTML,タグ,リファレンス">


hrタグ

区切り線を下に引くタグ

使い方

終了タグはなく、ただ単に記述するだけで区切り線を入れることができます。
<hr>


imgタグ

JPEGやGIF、PNGなどの形式のイメージを表示させるためのタグ

src、altのような属性があり、widthやheightを用いることで幅や高さを指定することもできます。

使い方

<img src="example.jpg" alt="example">
src : ファイル名 / 画像のURL
alt : 何らかの理由で画像が表示できなかったとき代わりに表示する文字


brタグ

改行するタグ

書いたところで改行します。

使い方

<br>

もっと詳しくWEB検索!!

新しいタブが開きます。