blog-RuinDig

短かったり長かったりする。Articles are my own.

noteを使っていなくても使えるnoteの機能

2021年5月6日追記:タイトル変更

noteを使っていなくても使えるnoteの機能がある。

「noteで書く」ボタン以外にも、2つの機能がある。

help.note.com

noteとは

noteはブログのようなテキスト形式の投稿に加えて、写真や音声などを投稿できるマルチメディアプラットフォームのサービス。

note.com

noteのサービス開始は2014年4月になる。

noteの投稿の埋め込み

f:id:edgeknight:20210503230417p:plain

画像出典:https://note.com/ruindig/n/n9fd51abedeec

f:id:edgeknight:20210503230714p:plain

画像出典:https://note.com/ruindig/n/n9fd51abedeec

noteの各投稿のページ下部にある三点リーダーのアイコンで「その他」と書かれているのマークを選ぶと「サイトに貼る」ボタンが表示される。

f:id:edgeknight:20210503230817p:plain

画像出典:https://note.com/ruindig/n/n9fd51abedeec

「サイトに貼る」ボタンを押すと埋め込みコードが表示される。このコードをコピーしてブログやウェブサイトに貼り付ける事ができる。

コピーして取得できる埋め込みコードは以下の通り。height(高さ)の数値は自由に変更できる。個人的には高さを200~230辺りにしている。

<iframe class="note-embed" src="https://note.com/embed/notes/<!--noteの各投稿URLの末尾の英数字-->" style="border: 0; display: block; max-width: 99%; width: 494px; padding: 0px; margin: 10px 0px; position: static; visibility: visible;" height="400"></iframe><script async src="https://note.com/scripts/embed.js" charset="utf-8"></script>

また、note上の個々のアカウントのページが「リスト形式」の場合、「サイトに貼る」ボタンを利用する事ができる。

f:id:edgeknight:20210505023353p:plain
リスト形式|画像出典:https://note.com/ruindig

f:id:edgeknight:20210505023031p:plain
リスト(小)形式|画像出典:https://note.com/ruindig

f:id:edgeknight:20210505023202p:plain
カード形式|画像出典:https://note.com/ruindig

note:cardの設定

note:cardはnoteのテキスト記事に外部記事のカードを表示する際に、より大きく表示する機能になる。

help.note.com

このblog-RuinDigではnote:cardを設定している。

f:id:edgeknight:20210504001053p:plain
画像出典:https://note.com/ruindig/n/ndbb85b915cd8

デフォルトでは横1500px・縦1051pxの画像が設定されているが、note:cardが反映されるか把握していないので、note:cardを設定する際、何かオリジナルのアイキャッチ画像を設定しておく事を勧める。

なお、note:cardの設定に必要なアイキャッチ画像の大きさは横600px以上かつ縦314px以上になる。

f:id:edgeknight:20210504112851j:plain
横600px・縦314pxの画像:https://cdn-ak.f.st-hatena.com/images/fotolife/e/edgeknight/20210504/20210504112851.jpg

ただし、個別のブログ記事のアイキャッチ画像が横600px以上かつ縦314px以上の大きさに届かない場合はnoteのテキスト記事で以下のように表示される。

f:id:edgeknight:20210504114553p:plain
画像出典:https://note.com/ruindig/n/ndbb85b915cd8

はてなブログでは、ダッシュボードの「設定」から「詳細設定」を選んで「アイキャッチ画像」の項目で設定する。

アイキャッチ画像のURLは「設定」の画面でアイキャッチ画像を右クリックしてURLをコピーする。

f:id:edgeknight:20210504103416p:plain

f:id:edgeknight:20210505020642p:plain

f:id:edgeknight:20210503235746p:plain

note:cardのコードは、はてなブログのダッシュボードの「設定」から「詳細設定」を選んで「headに要素を追加」の項目で入力する。

<meta property="og:image" content="<!--コピーしたアイキャッチ画像のURL-->">
<meta name="note:card" content="summary_large_image">
/* または */
<meta name="twitter:image" content="<!--コピーしたアイキャッチ画像のURL-->">
<meta name="note:card" content="summary_large_image">

一例として、東京都の新型コロナウイルス感染症対策サイトもnote:cardに対応している。

github.com

f:id:edgeknight:20210504001948p:plainf:id:edgeknight:20210504002625p:plain
画像出典:https://note.com/ruindig/n/nf2f0086af948

note:cardの注意点

help.note.com

noteのヘルプページにはnote:cardを設定するサイトがhttpsでの配信をしている必要があるとしているので、httpsでの配信に切り替える必要がある。

help.hatenablog.com

また、noteクローラー(User Agent: notebot)がサイトにアクセスできる状態になっている、つまりnote:cardを設定するはてなブログの公開範囲が「すべての人に公開する」に設定する必要がある。またrobots.txtなどを外して、noteクローラーをブロックしない設定にする。

help.hatenablog.com

はてなブログ以外でも

noteの投稿の埋め込みは、はてなブログ上ではなくてもTwitterのツイートを埋め込む要領で使える。

note:cardの設定は以下の注意点に気をつければ、

  • アイキャッチ画像(サムネイル画像)のサイズは横600px以上かつ縦314px以上
  • httpsの設定
  • noteクローラー(User Agent: notebot)がサイトにアクセスできる状態になっているように、公開範囲は「全ての人がアクセスできる」「誰でもアクセスできる」といった設定と、robots.txtなどを外してnoteクローラーをブロックしない設定にする

HTMLのhead要素(headから/headの間)で設定できるので、WordPressBloggerライブドアブログMovable TypeGitHub Pagesなどでも設定できる。これらに限らず、HTMLのhead要素を編集できれば、個人・法人で開設したウェブサイトでも設定できる。

-end-