Link With Noteの使い方

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記事の連番
notekeynote記事のurlに使用されている一意の文字列、APIで取得できるcontent_key
取込日noteを取り込んだ日
titlenoteのタイトル、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
スキ数表示
コメント数表示
クリエイター表示
新しいタブで開く

コメント