Link With Noteの使い方

link with noteは「リンク一覧」と「デザイン」のシンプル構成です。具体的な使い方の流れは、

1. 「リンク一覧」タブからnote記事を取り込む
2. 「デザイン」タブからnoteリンクの表示設定を行う
3. 記事にショートコードを張り付ける

だけで使えます。

リンク一覧

note記事の取り込み処理と取込済みのnote記事の情報を一覧表示します。

note取り込み

note記事のurlをnote取り込みの入力欄に張り付けて実行ボタンを押します。

取込が正常に行われると下部に取込済みのnote一覧が表示されます。

処理結果

noteの取込が正常に行われない場合、エラーコードとメッセージが表示されますので原因を調べて対応して下さい。

エラーパターンは下記の通り。

エラーコード	メッセージ	対応
400	データを取得出来ませんでした、入力値を確認して下さい。	urlを確認する
403	アクセスが許可されていません、理由は管理者に問い合わせて下さい	noteからアクセスが拒否されている
404	指定したページが見つかりませんでした、URLが間違っているかサーバーが落ちている可能性があります	urlを確認する、復旧まで待つ
500	指定したページのサーバーにエラーがあります、管理者による復旧をお待ち下さい	noteサーバーの復旧を待つ
503	サービスは利用できません、しばらく経ってからアクセスして下さい	noteの復旧を待つ
999	タイムエラー or URLが間違っています	サーバーの処理待機時間を延ばす、urlを確認する
not_found	指定のnoteが見つかりません、入力値を確認して下さい	urlを確認する
その他	何らかのエラーによって処理が完了できませんでした	エラーコードをググって調べる

note記事一覧

note取り込みで正常に情報が取得できた場合、このリストに追加されます。表示されている各項目の内容は下記の通り。

項目	内容
ID	取り込んだnote記事の連番
notekey	note記事のurlに使用されている一意の文字列、APIで取得できるcontent_key
取込日	noteを取り込んだ日
title	noteのタイトル、note記事にリンクが張られているので簡単に移動できます。
ショートコード	エディタに張り付けるコード、[lwn key=〇〇〇〇〇〇]と構成されており〇の部分はnotekeyで表示するリンク情報を識別してます
処理	取り込んだnoteを消す時の押すボタン

デザイン

noteリンクの見た目を制御する設定ページです。

noteリンクデザイン

「lwn-blog-card」「lwn-img-left」「lwn-img-right」の3つから選択できます。 「lwn-blog-card」 は記事エリアの横幅いっぱいに広がるので、エディタのカラム機能と合わせて左右に置くといい感じになります。

サムネイル表示

チェックを入れるとnoteリンクにサムネイルが表示されます。

タイトル文字数

noteリンクに表示されるタイトルの表示文字数を指定できます。タイトルが指定文字数より多い場合、超過文字は「…」で省略されます。「0」を入力すると非表示になります。

目次行数

noteリンクの見出しを表示する行数を指定できます。 「0」を入力すると非表示になります。

本文文字数

noteリンクに表示される本文の表示文字数を指定できます。本文が指定文字数より多い場合、超過文字は「…」で省略されます。「0」を入力すると非表示になります。

ハッシュタグ個数

note記事に付けられたハッシュタグを表示する個数を指定できます。 「0」を入力すると非表示になります。

スキ数表示

チェックを入れるとnote記事に付けられたスキ（ハート）の数が表示されます。

コメント数表示

チェックを入れるとnote記事に付けられたコメントの数が表示されます。

クリエイター表示

チェックを入れるとクリエイターアイコンの画像とニックネーム、記事の公開日が表示されます。

新しいタブで開く

チェックを入れるとnoteリンクをクリックした際、新しいタブを開いてnote記事が表示されるようになります。

記事にショートコードを張り付ける

取込済みnote一覧に表示されているショートコードをコピーする。

エディタでショートコードを張り付ける。

デザインの設定に応じてnoteリンクが表示されます。

デザインサンプル

良く使われそうなオススメデザイン設定パターンをご紹介します。

デフォルトのnoteリンク風

note記事下の「サイトに貼る」コードと似たようなデザインですが、見出し・コメント・ハッシュタグが増えてnoteのロゴが消えています。

項目	設定
noteリンクデザイン	lwn-img-right
サムネイル表示	レ
タイトル文字数	20
目次行数	3
本文文字数	60
ハッシュタグ個数	10
スキ数表示	レ
コメント数表示	レ
クリエイター表示	レ
新しいタブで開く	レ

ブログカード風

エディタのデザイン > 2カラムを使って表示を二つに分けて、それぞれにショートコードを埋め込む事でブログカード風のリンクにしてみました。スマホから見ると縦に2個並びます。

項目	設定
noteリンクデザイン	lwn-blog-card
サムネイル表示	レ
タイトル文字数	20
目次行数	3
本文文字数	60
ハッシュタグ個数	10
スキ数表示	レ
コメント数表示	レ
クリエイター表示	レ
新しいタブで開く	レ

シンプルリンク

余計な要素を排除してシンプルな記事リンクっぽくしてみました。

項目	設定
noteリンクデザイン	lwn-blog-card
サムネイル表示	レ
タイトル文字数	20
目次行数	0
本文文字数	200
ハッシュタグ個数	0
スキ数表示
コメント数表示
クリエイター表示
新しいタブで開く	レ

個人開発プログラマーを応援するメンバーシップを始めました('ω')ノ

質問・要望・共同作業など、みんなのやりたい事をスマイルがお手伝いします。立ち上げたばかりでよく分かってないので、とりあえず何でもありやってみます。

趣味のプログラミング教室｜スマイル@DIYプログラミング

【挨拶不要＆初月無料！有料記事だけ読みたい方でもOK！】 趣味のプログラミングで300万円稼いだ筆者が個人開発プログラマーを応援するメンバーシップを始めました('ω')ノ あなたが当メンバーシップに加入・閲覧・退会されても、管理者の僕以外は確認できませんのでこっそり情報収集が可能です。 メンバーシップでは下記のコンテン...

note.com