comments trackbacks you may also like

noteが「noteで記事を書く」ボタンのカスタマイズ方法を追加で発表!

2019年05月28日
#note #ソーシャルボタン #noteを書くボタン #noteシェアボタン #FC2ブログ #noteロゴデータ #noteを書くボタンカスタマイズ方法 #ブロガーお役立ち #ウェブデザイン #シェアボタン設置方法

ソーシャルプラグイン「noteで書く」ボタンが公開されたことを記事で紹介したばかりですが、その続報です。「noteで書く」ボタンは、自由にカスタマイズ出来ることが分かりました。

これは、noteの運営サイドが、ブログやそれぞれのWebサイトのデザインにあわせて「noteで書く」ボタンを設置できるようにカスタマイズする方法を追加発表したことで明らかにされたものです。

▼前回の記事

【新機能】noteのソーシャルボタン「noteで書く」をFC2ブログに設置する方法

FC2ブロガーのMです。noteが、コピペでブログに設置できる「 note で書く」ボタンを初公開しました。1クリックで記事を引用しつつ、noteの投稿画面を開くことができるというものです。シェアボタンはSNSなどでお馴染みですが、いよいよnoteでも気軽にシェアする時代が到来したのですね。さっそく、ソーシャルボタン「noteで書く」を、FC2ブログ『ゆうらりHappySmile』でも設置してみようと思いました。「 note で書く」ボタンは、...

当初、noteの発表では、下の画像のような長方形タイプのシェアボタンのみでした。

ソーシャルプラグイン「noteで書く」ボタンのイメージ画像

ところが、ボクのブログのように丸型のソーシャルボタンを並べて設置している場合は、デザイン的にいって不向きな面があります。

ボクは苦肉の策として、Facebookのシェアボタンで同じ形のものをたまたまもう一つ設置していたので、その下に縦並べで貼り付けたのです。

ソーシャルプラグイン「noteで書く」ボタンの設置例

これで何とか「noteで書く」ボタンを違和感なく設置することが出来ました。しかし、「融通性が無いよなぁ…」と感じたのは事実です。通常なら何通りかのパターンが用意されますからね。

きっと、noteの運営サイドには多数の要望が寄せられたはずです。今回は、それを受けての追加発表なのだと思いました。

スポンサードリンク

note、Webサイトにあわせて「noteで書くボタン」のカスタマイズする方法を追記

さっそく気になったボクは、noteが発表した「本日より、ソーシャルプラグイン「本日より、ソーシャルプラグイン「noteで書くボタン」を、Webサイトの雰囲気にあわせてカスタマイズして設置できるようになりました。設置方法は、こちらをご覧ください。https://note.pie|note公式|note」というアナウンスを覗いてみました。

すると、「noteで書く」ボタンの設定方法 – noteヘルプセンターの中に、「ボタンのデザインをカスタマイズする場合」として新たな設置方法が追加されていました。

「noteで書くボタン」はWebサイトにあわせてカスタマイズして設置することもできます。

下記のコードのようにリンクタグを追加すると、画像やテキストを「noteで書く」ボタンにできます。

要するに、上の記事で紹介されたリンクタグを記述すれば、カードタイプ形式によって元記事が引用されつつ、アーユーレディな状態の投稿画面に移動できるということです。

「noteで書く」ボタンをクリックした後に表示される投稿画面

「noteで書く」ボタンをカスタマイズするポイントは『noteロゴデータ』

肝心の、「noteで書く」ボタンをカスタマイズする方法ですが、ポイントとなるのは『noteロゴデータ』です。

noteのロゴマークは、いまだFont Awesomeにないもんですから、自分でボタンを作るとなるとちょっと大変です。

そこで、noteでは素材データを公開しており、 noteロゴデータ – noteヘルプセンターからダウンロードすることが出来ます。

おわりに

実際のカスタマイズ方法は、それぞれのウェブサイトのブログデザインによって異なりますが、noteのリンクタグとロゴデータを組み合わせればお好きなようにカスタマイズすることが可能です。

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する47歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール

この記事が気に入ったら
いいねとシェアしよう!

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!

コメント(0)

There are no comments yet.
未分類 (0)
今日のエッセイ (177)
ニュース-話題 (1168)
┣  芸能 (436)
┣  ハロプロ系 (102)
┣  日常-雑談系 (34)
┣  海外-地方ネタ系 (8)
┣  政治-経済-事件系 (58)
┣  テレビ-CM-映画系 (55)
┣  スポーツ-格闘系 (26)
┣  SNS系 (19)
┣  仕事-転職-キャリアアップ (33)
┣  漫画-アニメ系 (25)
┣  IT系 (10)
┣  おもしろグッズ (13)
┗  ニュースまとめ (30)
恋愛-人間関係 (33)
Amazon (185)
┣  Amazonセール (4)
┗  Kindleセール (177)
グルメ (141)
┣  低糖質レシピ (31)
┗  お酒の飲み方 (2)
シン・胃がん闘病記 (51)
┣  AVANT:癌の余命宣告~共存 (38)
┗  セントラルドグマ:父親の胃癌 (13)
胃がん闘病記録まとめ (85)
┣  ステージ3B-多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
胃がん-Stomach_cancer (5951)
┣  胃がんブログ (287)
┣  よりぬき胃がんブログ (16)
┣  胃がん闘病記-日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (36)
┗  がん治療のクラウドファンディング (10)
がんのこと-ガン情報全般-cancer (586)
┣  がんブログ (337)
┗  がんニュース (249)
胃がん障害年金ブログ (71)
┣  障害年金-準備編 (23)
┣  障害年金-審査から年金受給まで (12)
┣  障害年金-審査請求-不服申立 (26)
┗  障害年金-再審査請求 (10)
占い-心理テスト (6)
終活ブログ (12)
胃切除後の食事レシピ (672)
┣  ご飯-おかゆ-和食 (174)
┣  おかず (140)
┣  味噌汁-スープ (75)
┣  カレー関係 (66)
┣  パン-洋食 (63)
┣  麺類 (112)
┗  その他-簡単レシピなど (39)
ブログ (265)
┣  FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (189)
┣  FC2ブログ日記-カスタマイズの所感など (34)
┣  GoogleAdsense-アドセンス (8)
┗  趣味や将棋のこと (34)
ファッション (11)
┗  美容-コスメ系 (2)
iPhoneの使い方-アプリなど (34)
司法書士 (26)
┣  仕事-実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (28)
┣  家電 (11)
┣  ホーム&キッチン (5)
┣  ビューティー&ヘルスケア (5)
┣  QOL改善&ヘルスケア (2)
┗  お酒 (5)
ABOUT (1)