2021年5月6日追記：タイトル変更
noteを使っていなくても使えるnoteの機能がある。
「noteで書く」ボタン以外にも、2つの機能がある。
noteとは
noteはブログのようなテキスト形式の投稿に加えて、写真や音声などを投稿できるマルチメディアプラットフォームのサービス。
noteのサービス開始は2014年4月になる。
noteの投稿の埋め込み
noteの各投稿のページ下部にある
のマークを選ぶと「サイトに貼る」ボタンが表示される。
「サイトに貼る」ボタンを押すと埋め込みコードが表示される。このコードをコピーしてブログやウェブサイトに貼り付ける事ができる。
コピーして取得できる埋め込みコードは以下の通り。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上の個々のアカウントのページが「リスト形式」の場合、「サイトに貼る」ボタンを利用する事ができる。
note:cardの設定
note:cardはnoteのテキスト記事に外部記事のカードを表示する際に、より大きく表示する機能になる。
このblog-RuinDigではnote:cardを設定している。
デフォルトでは横1500px・縦1051pxの画像が設定されているが、note:cardが反映されるか把握していないので、note:cardを設定する際、何かオリジナルのアイキャッチ画像を設定しておく事を勧める。
なお、note:cardの設定に必要なアイキャッチ画像の大きさは横600px以上かつ縦314px以上になる。
ただし、個別のブログ記事のアイキャッチ画像が横600px以上かつ縦314px以上の大きさに届かない場合はnoteのテキスト記事で以下のように表示される。
はてなブログでは、ダッシュボードの「設定」から「詳細設定」を選んで「アイキャッチ画像」の項目で設定する。
アイキャッチ画像のURLは「設定」の画面でアイキャッチ画像を右クリックしてURLをコピーする。
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に対応している。
note:cardの注意点
noteのヘルプページにはnote:cardを設定するサイトがhttpsでの配信をしている必要があるとしているので、httpsでの配信に切り替える必要がある。
また、noteクローラー(User Agent: notebot)がサイトにアクセスできる状態になっている、つまりnote:cardを設定するはてなブログの公開範囲が「すべての人に公開する」に設定する必要がある。またrobots.txtなどを外して、noteクローラーをブロックしない設定にする。
はてなブログ以外でも
noteの投稿の埋め込みは、はてなブログ上ではなくてもTwitterのツイートを埋め込む要領で使える。
note:cardの設定は以下の注意点に気をつければ、
- アイキャッチ画像(サムネイル画像)のサイズは横600px以上かつ縦314px以上
- httpsの設定
- noteクローラー(User Agent: notebot)がサイトにアクセスできる状態になっているように、公開範囲は「全ての人がアクセスできる」「誰でもアクセスできる」といった設定と、robots.txtなどを外してnoteクローラーをブロックしない設定にする
HTMLのhead要素(headから/headの間)で設定できるので、WordPressやBlogger、ライブドアブログ、Movable Type、GitHub Pagesなどでも設定できる。これらに限らず、HTMLのhead要素を編集できれば、個人・法人で開設したウェブサイトでも設定できる。
-end-
