2019-04-29

はてなブログにグローバルナビゲーションを導入する方法

はてなブログ技術 javascript

f:id:herrscherinnen:20190429174057p:plain

前回、グロナビを作りました。

記事はこちら。

h-s-hige.hateblo.jp

今回は、グロナビをつけてみたい人のための紹介です。

手順

HTMLを貼りつけます
HTMLをカスタマイズします
CSSを貼りつけます
CSSをカスタマイズします

項目ごとに説明します。

念のため、元に戻せるように、
コピー先のHTMLとCSSを保存しておいてください。

HTMLを貼りつけます

ブログ管理画面から、
デザイン > カスタマイズ > ヘッダ > タイトル下のところに貼りつけます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<ul id="gnav">
<li><a href="https://url/example"><i class="fas fa-paw"></i><span>にゃんこ</span></a></li>
<li><a href="https://url/example"><i class="fas fa-paw"></i><span>にゃんこ</span></a></li>
<a href="https://url/example" style="position: relative; top: -40px;"><img src="https://url/example.png" style="height: 96px;" /></a>
<li><a href="https://url/example"><i class="fas fa-paw"></i><span>にゃんこ</span></a></li>
<li><a href="https://url/example"><i class="fas fa-paw"></i><span>にゃんこ</span></a></li>
</ul>

HTMLをカスタマイズします

貼り付けたHTMLを、ブログに合わせて変更します。

span タグは表示する文字にしてください。
- 「にゃんこ」のところです。

i タグは font-awesome のアイコンから選んで、置き換えてください。
- <i class="fas fa-paw"></i> のところです。
- PRO のマークのあるアイコンは有償なので注意してください。

a タグの href 属性を移り先のURL にしてください。
- https://url/exampleのところです。

img タグの src 属性を画像のURL にしてください。
- https://url/example.png のところです。

CSS を貼りつけます

ブログ管理画面から、
デザイン > カスタマイズ > デザインCSS のところに貼りつけます。

#gnav {
  display: flex;
  font-family: "quicksand";
  font-weight: bold;
  justify-content: space-between;
  list-style:none;
  max-width: 1000px;
  margin:0 auto;
  padding: 0;
}

#gnav > a:hover {
  transform: scale(1.1, 1.1);
}

#gnav li {
  background-color: #ffffff;
  margin: 0 auto;
  text-align: center;
  width: 25%;
}

#gnav li i {
  font-size: 24px;
}

#gnav span {
  padding-left: 16px;
}

#gnav > li > a {
  border-bottom: 2px solid #dddddd;
  color: #eb6ea5;
  display: block;
  line-height: 40px;
  margin: 8px 0;
  text-decoration: none;
  vertical-align: baseline;
}

#gnav > li > a:hover {
  border-bottom: 2px solid #69B8D2;
  color: #69B8D2;
}

@media (max-width: 767px) {
  #gnav span {
    display: none;
  }
}

CSSをカスタマイズします

ブログに合わせて、文字や下線の色や大きさを変更します。

プレビューで確認して、変更を保存したら、完成です。

ありがとうございました ٩(ˊᗜˋ*)و

2019-04-29

【ブログ】( ๑╹ω╹๑ ) グローバルナビゲーションを導入しました

はてなブログ技術

グローバルナビゲーションとは

基本的にすべての画面に表示されます。
サイト内を移動するのに、利用頻度の高いリンクがまとめられています。

ざっくりは、そんなメニューのことのようです。

詳しくはこちら。

グローバルナビゲーションとは何？ Weblio辞書

やること

グロナビを作って、導入する。

やったこと

成果がこちらです。
（画面の上のほうにも、同じものが表示されています。）

f:id:herrscherinnen:20190429174057p:plain

真ん中に、ねこさんを配置しました。
- ポチると、トップページに移ります。

左右に、 2つずつのメニューを配置しました。
- ポチると、そのカテゴリのページに移ります。

ヘッダの画像をグラデーションにしました。
- 境界をぼかして、ねこさんが自然に突き抜けるようにしました。

次回のおはなし

次は切株おやじさんに教えていただいた、 404 ページのカスタマイズをやってみたいと思います (๑˃̵ᴗ˂̵๑)

親切な切株おやじのブログはこちらです。
きれいな写真とルンバの動画が印象的です ⁺⸜( •̥௰•̥ )⸝⁺

www.happablog.com

今日もありがとうございました ٩(ˊᗜˋ*)و

【追記】グロナビの導入の仕方はこちら

h-s-hige.hateblo.jp

2019-04-28

【ねこ】( ๑╹ω╹๑ ) はたらいたし、癒されて眠ろう

ねこシアン

おつかれさまです |ω･)و ̑̑༉

お仕事だったこともあり、癒しがほしいです。

短いですが、ゆっくりしていってください。

おかえりなさい

f:id:herrscherinnen:20190428220211j:plain

f:id:herrscherinnen:20190428220033j:plain

シアンくん、きみはラッコのように生きているね (⁎˃ᴗ˂⁎)

元気でた！ ₍๐•ᴗ•๐₎
（単純）

今日も、ありがとうございました ( ˙꒳˙ )

GW中に、グロナビつけたいな～。

2019-04-27

【AdSense】2019年に Google AdSense の審査に合格するまでのこと

はてなブログメモ

Google AdSense を導入しました

Google AdSense の審査に合格しました。
（合格したのは 4/21 です。）

審査の合格には、いろんな記事で、やるべきことが紹介されていますが、
意外と「必須」なことは少ないかもしれません。

何度も不合格になりながらリトライしたので、
合格までにやったことと やらなかったこと を紹介します。

特に、やらなかったこと は合格に「必須」ではないです。
_{（※2019/04/21 時点に合格した結果からの推測です）}

やったこと

プライバシーポリシーを設置しました

こちら。プライバシーポリシー - Nekonote

文字数の少ない記事を下書きにしました

1000文字以下の記事を下書きに戻しました。

カテゴリの数を減らしました。

記事の数が 1 や 2 のカテゴリを消しました。

審査中も記事を書きました。

1日か2日に、記事を1つ書くぐらいのペースです。
合格したときの記事数は 30 でした。

やらなかったこと

これらは必須ではなかったです。
_{（もちろん、やったほうが合格しやすい可能性はあります）}

はてなブログを Pro にはしていません。

独自ドメインにはしていません。

お問い合わせフォームは作っていません。

それでもうまくいかないときは ↷( ó╻ò)

公式で違反しているページを見つける方法が紹介されていました。

support.google.com

その後

いま、合格して、7日目です。

導入を考えられている方は、収益が気になりますよね。

広告を設定してみて、うまい棒 20 本ぐらいの収益がありました ( ˙꒳˙ )
_{見積り収益は正確な公開ができない利用規約なので、うまい棒などで例えるのが慣例(?)のようです。}

ありがとうございました、なにかのお役に立てれば幸いです。

2019-04-27

【頭のすみっこ】テキストファイルを結合する方法

windows cmd 技術

おはようございます。

今日はたくさんのテキストドキュメントを１つに結合して、
まとめてしまう方法を紹介します。
_{テキストドキュメントは拡張子が txt のファイルです。}

ファイルが 2つや 3つのときは困りませんが、
ファイルが 100 や 1,000 になると、
1つ1つ手作業でまとめるのは大変 ↷( ó╻ò)

簡単な方法があることだけ、頭のすみっこにあると、
どこかで役に立つかもしれません ( ˙꒳˙ )

手順

コマンドプロンプトまたは PowerShell を開きます。
コマンドを実行します。

手順ごとに、やり方を説明していきます。

コマンドプロンプトまたは PowerShell を開きます。

スタートメニューから起動することもできますが、
ここでは、指定のフォルダで簡単に起動できる方法を紹介します。

フォルダを開きます。
- まとめるテキストドキュメントのあるフォルダを開いてください。
Shiftキーを押しながら、右クリックします。
- 右クリックメニューが開きます。
Windows 8.1以前の方
- 「コマンドウィンドウをここで開く」を選択します。
Windows 10 の方
- 「PowerShell ウィンドウをここで開く」を選択します。

コマンドを実行します。

開いたウィンドウで、次のコマンドを実行します。

type *.txt > result.txt

このコマンドでは、
フォルダにあるすべてのテキストドキュメントを 1つに結合して、
result.txt に保存しています。

ほかの種類のファイルにも使えます。

txtファイルでの紹介でしたが、ほかの種類でも応用できます。

たとえば…

csvファイルをまとめる
- type *.csv > result.csv
tsvファイルをまとめる
- type *.tsv > result.tsv
logファイルをまとめる
- type *.log > result.log

たくさんのファイルを扱うようになったら、
思い出してみてください (∩･∀･∩)

さらっとできれば、きっとカッコイイです。

その頃、遊んでもらえるのを待つシアンさん。

コタツがお気に入り、いつまでも片付けられない ↷( ó╻ò)

f:id:herrscherinnen:20190427093541j:plain

今日もありがとうございました ٩(ˊᗜˋ*)و

2019-04-26

【HTML/JavaScript】よくある canvas要素に画像を表示する対応【テンプレート付】

javascript 技術

おつかれさまです。

記事の前に、まずはにゃんこ成分を充電します ( ˙꒳˙ )

f:id:herrscherinnen:20190426001013j:plain

いい寝顔で疲れが癒されるぅ(๑˃̵ᴗ˂̵๑)

前回の記事はこちら

h-s-hige.hateblo.jp

canvasでは、画像やアニメーションが魅力的です。

○や□といった図形や、文字もかけますが、ぱっと見栄えがよくなりそうなことをやるほうが楽しいです (｡･-･｡)

そこで今回は、canvas に画像を描画します。

canvas に画像を表示するには、大まかに次の手順が必要です。

Image オブジェクトを作る
Image オブジェクトに onload で実行されるイベントハンドラを登録する
Image オブジェクトに src プロパティを設定する

onload に登録する処理は、画像を描画する処理です。
src プロパティを設定すると、画像の読み込みが始まります。

そのため、srcプロパティよりも先に、onloadの登録が必要です。
_{逆にすると、onload が呼ばれないことがあります。}

ソースコードはこちらが、参考になりました。

developer.mozilla.org

わかりやすいですが、すぐに壁にあたります。

画像が複数のときはどうすればいいのか…↷( ó╻ò)

やること

複数の画像を canvas に描画する。
canvas への描画は、すべての画像を読み込んだあとに行う。

やったこと

ロードを待ち合わせて描画するロジック。

  // 画像のパス一覧
  // https://picsum.photos/
  var sources = [
    "https://picsum.photos/240/360",
    "https://picsum.photos/240/320",
    "https://picsum.photos/240/280",
    "https://picsum.photos/240/240",
  ];

  // 画像のロードを待つ
  var waiting_for_load = sources.length;
  var images = Array.apply(null, Array(sources.length)).map(() => new Image());
  images.map((image, i) => {
    image.onload = () => --waiting_for_load == 0 && draw(); // 画像のロードが終わったら draw を呼んで描画します
    image.onerror = () => console.log("failed to load.");
    image.src = sources[i];
  });

  context.textBaseline = 'middle';

  var draw = () => {
    // キャンバスに画像を描画する
    // http://www.html5.jp/canvas/ref/method/drawImage.html
    images.forEach((image, i) => context.drawImage(image, image.width * i, canvas.height / 2 - image.height / 2));
  };

前回のソースに組み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Title</title>
<style>
html, body {
  height: 100%;
  margin: 0;
}

#canvas {
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -480px; // canvas の width/2
  margin-top: -360px; // canvas の height/2
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var canvas = document.getElementById('canvas');
  var styles = canvas.getAttribute('style') || '';
  var context = canvas.getContext('2d');

  // canvasが見えるように、色を付けます
  context.fillStyle = 'rgba(0,0,16, 0.66)';
  context.fillRect(0, 0, canvas.width, canvas.height);

  var onResize = canvas => {
    var scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
    var transform = 'scale(' + scale + ',' + scale + ');';

    canvas.setAttribute('style', styles + 
      '    -moz-transform: ' + transform + 
      '     -ms-transform: ' + transform + 
      '      -o-transform: ' + transform + 
      '         transform: ' + transform + 
      ' -webkit-transform-origin: center center;' +
      '    -moz-transform-origin: center center;' +
      '     -ms-transform-origin: center center;' +
      '      -o-transform-origin: center center;' +
      '         transform-origin: center center;'
    );
  }

  onResize(canvas);
  window.addEventListener('resize', () => onResize(canvas), false);


  // 画像のパス一覧
  // https://picsum.photos/
  var sources = [
    "https://picsum.photos/240/360",
    "https://picsum.photos/240/320",
    "https://picsum.photos/240/280",
    "https://picsum.photos/240/240",
  ];

  // 画像のロードを待つ
  var waiting_for_load = sources.length;
  var images = Array.apply(null, Array(sources.length)).map(() => new Image());
  images.map((image, i) => {
    image.onload = () => --waiting_for_load == 0 && draw(); // 画像のロードが終わったら draw を呼んで描画します
    image.onerror = () => console.log("failed to load.");
    image.src = sources[i];
  });

  context.textBaseline = 'middle';

  var draw = () => {
    // キャンバスに画像を描画する
    // http://www.html5.jp/canvas/ref/method/drawImage.html
    images.forEach((image, i) => context.drawImage(image, image.width * i, canvas.height / 2 - image.height / 2));
  };
});

</script>
</head>
<body>
  <canvas id="canvas" width=960 height=720 style="position: relative; left: 50%; margin-left: -480px; top: 50%; margin-top: -360px;">
  </canvas>
</body>
</html>

これで canvas を急に使うことになっても、ざっくり安心 ( ˙꒳˙ )

1file で動かせるのでお手軽です。

今回使ったダミー画像はこちら。

picsum.photos

画像を表示する drawimage メソッドはこちら。

www.html5.jp

今日もありがとうございました ٩(ˊᗜˋ*)و

2019-04-24

【HTML/JavaScript】よくある canvas要素のフルスクリーン対応【テンプレート付】

javascript 技術

おつかれさまです。

記事の前に、まずはにゃんこ成分を充電します ( ˙꒳˙ )

f:id:herrscherinnen:20190424191332j:plain

すこし大人っぽく写ったかな?

canvas とは

canvas要素は、JavaScript で画像や図形を描画できる HTML要素です。

例えば、動画やカメラ映像を取り込んで加工したり、ゲームを作ったりできます。

詳しくはこちら。

ja.wikipedia.org

canvas要素では、画像やアニメーションが使えることがわかりました。

画像やアニメーションを使うときは、それを画面いっぱいに表示したいことがあります。

結構あります。

_{たとえば、動画を再生するプレーヤーは、ほぼフルスクリーンにする機能があります}

大きさを設定するには

canvas要素には、widthとheightという属性があり、HTML内での描画可能な領域になります。

width は要素の横幅、height は要素の高さを示してます。

_{canvas の大変さを説明するために、}

例えば、img要素を横幅いっぱいにするには、
width を 100% にすることで実現できます。

詳しくはこちら。

www.sejuku.net

簡単です。

ですが、canvas のサイズ( width と height )は、固定値しか使えず、
簡単に画面いっぱいに表示することはできません ↷( ó╻ò)

毎回こまるので、ここに記録します。

やること

canvas の縦横比を崩すことなく、canvas ができるだけ大きくなるよう拡大縮小します。
canvas の縦横比が画面と異なる場合、空き領域が上下または左右で同じになるように canvas を中央に配置します。

やったこと

これで canvas をフルスクリーンで表示できるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Title</title>
<style>
html, body {
  height: 100%;
  margin: 0;
}

#canvas {
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -480px; // canvas の width/2
  margin-top: -360px; // canvas の height/2
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var canvas = document.getElementById('canvas');
  var styles = canvas.getAttribute('style') || '';
  var context = canvas.getContext('2d');

  // canvasが見えるように、色を付けます
  context.fillStyle = 'rgba(0,0,16, 0.66)';
  context.fillRect(0, 0, canvas.width, canvas.height);

  var onResize = canvas => {
    var scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
    var transform = 'scale(' + scale + ',' + scale + ');';

    canvas.setAttribute('style', styles + 
      '    -moz-transform: ' + transform + 
      '     -ms-transform: ' + transform + 
      '      -o-transform: ' + transform + 
      '         transform: ' + transform + 
      ' -webkit-transform-origin: center center;' +
      '    -moz-transform-origin: center center;' +
      '     -ms-transform-origin: center center;' +
      '      -o-transform-origin: center center;' +
      '         transform-origin: center center;'
    );
  }

  onResize(canvas);
  window.addEventListener('resize', () => onResize(canvas), false);
});
</script>
</head>
<body>
  <canvas id="canvas" width=960 height=720 style="position: relative; left: 50%; margin-left: -480px; top: 50%; margin-top: -360px;">
  </canvas>
</body>
</html>

これで、毎回の調査から卒業 (´>∀<`*)

続きはこちら

h-s-hige.hateblo.jp

今日もありがとうございました ٩(ˊᗜˋ*)و

手順

HTMLを貼りつけます

HTMLをカスタマイズします

CSS を貼りつけます

CSSをカスタマイズします

グローバルナビゲーションとは

やること

やったこと

次回のおはなし

おかえりなさい

Google AdSense を導入しました

やったこと

プライバシーポリシーを設置しました

文字数の少ない記事を下書きにしました

カテゴリの数を減らしました。

審査中も記事を書きました。

やらなかったこと

はてなブログ を Pro にはしていません。

独自ドメインにはしていません。

お問い合わせフォームは作っていません。

それでもうまくいかないときは ↷( ó╻ò)

その後

手順

コマンドプロンプト または PowerShell を開きます。

コマンドを実行します。

ほかの種類のファイルにも使えます。

前回の記事はこちら

やること

やったこと

今回使ったダミー画像はこちら。

画像を表示する drawimage メソッドはこちら。

canvas とは

大きさを設定するには

やること

やったこと

はてなブログを Pro にはしていません。

コマンドプロンプトまたは PowerShell を開きます。