2016年2月6日

「note」で役立つ小ワザ紹介! Webフォントも作ったよ!

こんにちは! ヨス(@yossense)です。

noteという新しいSNSにハマっているのですが、今回はそのnoteで役立つ小ワザとかを紹介します。Webフォント用のSVGデータも作りましたのでこちらも要チェックです!

「note」投稿時に役立つ小ワザ

noteというのはブログ的要素の強いSNSです。構造的に検索結果に現れにくいので、深く考えずに日記的なものを投稿したりできるのが魅力です。

というわけでnoteで使える小ワザを紹介していきます。わたしのnoteアカウントは下記からフォローできますので、よろしくお願いします。

ヨスをフォロー

ではまずは、noteで記事を投稿するときに覚えておくと良い小ワザを紹介します。

テキストのヘッダー画像のサイズは?

テキストのヘッダー画像を設定していますか?

テキストのヘッダー画像はここで指定できます
テキストのヘッダー画像はここで指定できます

この上の画像の部分で指定できますよね。この画像のサイズは、akaneさんの調べでは 1280 × 531px だそうです。

サイズは1280×531px
サイズは1280×531px

調べてみると、確かに「1280 × 531 ピクセル」みたいですね。わたしの投稿を見ると、もっと小さく作ったハズなのに、勝手に拡大されてアップロードされています。

不思議なことに、実際の最大サイズは620 × 257ピクセルになっています。つまり、縮小されて表示しているんですね。

ということで、1280px × 531pxで用意するのが一番きれいに表示されるので、本気投稿にはそのサイズで用意したらいいみたい。

参考: noteのテキストのヘッダーの画像サイズ調べてみた! | AKANEIRO.me

行間の高さを調整する

noteでは、文字と文字の行間の高さはCSSで調整できません。

なので、 ShiftEnter、もしくはEnterで改行して間を空けます。

noteで書いた文章はHTMLとして残らないため、改行を連打しても問題ありません。

「Shift + Enter」と「Enter」だけの改行の違い
「Shift + Enter」と「Enter」だけの改行の違い

こんな感じで、ShiftEnterの方が空間が小さいです。Enterは広いですね。

「こちら!」を表現する矢印画像

noteで「こちら!」というふうに説明するときに「矢印画像」があると便利です。

「こちら!」の矢印画像
「こちら!」の矢印画像

こんな感じで、文字と文字の間に矢印画像をアップロードしてやると、説明文章がどの画像を指しているのかがわかりやすいですね。

矢印画像はどんなのでもいいですけど、わたしが作ったやつもご自由にダウンロードしてお使いください。

矢印上(大)

矢印下(大)

矢印上(小)

矢印下(小)

「jpg」で画像を作っているのは「png」だと画像が荒れるからです。

フッターにブログやSNSのURLを

noteのフッター(記事の下)にはブログやほかのSNSへのリンクを入れておくといいですね。定型文として。

--------------------
ヨスを気軽にフォローしてください♪
━━━━━━━━━━
■月間100万PV達成! ブログ「ヨッセンス」もよろしく!
http://yossense.com/
■Twitterでもよろしくね♪
https://twitter.com/yossense
■人気ブロガーの合同メルマガ「Edge Rank」も!
http://www.edgerankbloggers.net/wordpress/subscribe/
━━━━━━━━━━

例えば上のような感じです。リンクのURLはnote上だと勝手にリンクテキストに変換されるので楽です。

PhraseExpress(TextExpander)を使う

でも毎回毎回これをコピペするのは面倒ですので、「PhraseExpress」をお使いください。Macだと「TextExpander」が全く同じツールです。

PhraseExpressに登録しておくと、こちらの画像のように一括で段落を含む文章が入力できますので。

PhraseExpressが便利すぎる
PhraseExpressが便利すぎる

便利すぎてやばいです。

境目の水平線をテキストで

noteではスタイルシートでの装飾ができません。

なので、昔ながらのテキストを使って水平線を入れると読みやすくなります。

たとえば、こういうやつですね。

__________________
--------------------------------------------------------
━━━━━━━━━━━━━━━━━━
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
………………………………………………
///////////////////////////////////////////////
+++++++++++++++++++++++++++
**********************************************
・-・-・-・-・-・-・-・-・-・-・-・-・-・-
~~~~~~~~~~~~~~~~~~
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8888888888888888888888888888888
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
ccccccccccccccccccccccccccccccccccc
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:……:……:……:……:……:……:……:……
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*

……ね。いっぱいありますねー。まだまだいくらでもあります。

こんなのも昔、メルマガでアンケートを取るときとかに使っていたなぁ。

---------------8<  切り取り線 >8-------------

どれもnoteをスマホで見ても改行されないように調整していますので、単語登録にコピペしてお使いください。

スマホだったらに登録するワザとかオススメですよ。

スマホアプリ(iOS)から毎回同じ画像を使うとき

スマホ(iOS)のnoteアプリから投稿するときは、いろいろ不便です。例えば毎回投稿するときに使う「決まった画像」があるとき。

いつも使う画像があるときにはnote専用のアルバムを作ると便利です。

作り方はこちら。

[ 写真アプリを開いて右下の「アルバム」をタップ ] → [ 左上にある「+」をタップし、新規アルバムを作る ] →  [ 新規アルバムの名前を入力 ]
[ 写真アプリを開いて右下の「アルバム」をタップ ] → [ 左上にある「+」をタップし、新規アルバムを作る ] → [ 新規アルバムの名前を入力 ]

そして、noteのアプリを開き、写真を挿入する画面を開きます。

[ noteに写真挿入するときに上にあるプルダウン「カメラロール」をタップし、先ほど作った「note」用画像のアルバムを選択 ] → [ 保存した画像を選ぶ ]
[ noteに写真挿入するときに上にあるプルダウン「カメラロール」をタップし、先ほど作った「note」用画像のアルバムを選択 ] → [ 保存した画像を選ぶ ]

これで、いっぱいある写真の中から選ぶ作業が簡略化されますね。

URLの単語登録がオススメ

noteで投稿するたびにURLをコピペで貼り貼りするのってめんどうですよね。

そこでおすすめするのが単語登録です。

例えば「単語登録について説明したページ」である「 http://yossense.com/words-registration-howto/ 」。

このURLをこんなふうに単語登録しています。

1PCの場合

まずはPCで「ローマ字入力」の場合。

単語登録で「;(セミコロン)」を使用する例
たんごとうろく 単語登録
たんごとうろく; <a href="http://yossense.com/words-registration-howto/">単語登録</a>

「たんごとうろく;」で登録しています。ええ。「;」は入力間違いではありません。これも含んでいます。

その理由は「たんごとうろく」で登録すると、「単語登録」と普通に変換したいときにジャマになるからです。わたしは、Spaceキーを連打して漢字の候補から選ぶのが大嫌いです。

「 ; 」まで含んだ「たんごとうろく; 」という日本語は存在しないため、「たんごとうろく; 」で漢字変換すると「 http://yossense.com/words-registration-howto/ 」が必ず一発で変換されるんですね。これ、地味に便利です。

「 ; 」を付ける単語登録について、くわしくはこちらに書いていますので、ご参考に!

2スマホの場合

お次はスマホからnoteに投稿する場合。こちらもURLを単語登録するときの方法です。

結論から言うとを頭につけて登録しましょう(フリック入力の場合です)!

たとえば、「たんごとうろく」で「 http://yossense.com/words-registration-howto/ 」を出したい場合は「たんごとうろく」で登録します。

こちらも、「んたんごとうろく」という日本語が存在しないからです。なので、変換候補で競合することがなく、スムーズに入力できます。

をつける単語登録については、このページに詳しく書いています。

こちらの技はPCでの「カナ入力」や「親指シフト」でも応用できるかも!

冒頭にはオリジナル画像を

noteの記事の冒頭って寂しいですよね。

CSSもいじれないので、なんというか個性がないというか。そこで冒頭にオリジナル画像を入れてみます。

冒頭にオリジナル画像を入れると個性が出る
冒頭にオリジナル画像を入れると個性が出る

私が話しているようですね。スタイルシート(CSS)のカスタマイズのできないnoteでも冒頭から個性が出ます。

わたしが冒頭で使った画像
わたしが冒頭で使った画像

わたしことヨスの書いている記事というのが一発でわかりますね。

こういうのを入れるのもありですね。毎回毎回テキストで挨拶文章を入れる必要もなくなります。

1テンプレート: くも型のフキダシ

というわけでテンプレート画像を作ったので、ダウンロードして使ってください。

雲型のフキダシ
雲型のフキダシ

2テンプレート: まっすぐ型のフキダシ

別のデザインのも用意しました。ダウンロードして使ってください。

ストレート型のフキダシ
ストレート型のフキダシ

「マガジン」について

お次は「マガジン」の小ワザについて。

「マガジン」のサムネイルサイズ

noteのマガジンで使っているサムネイル画像のサイズについてです。

これが「note」のマガジンのサムネイル画像ね
これが「note」のマガジンのサムネイル画像ね

「note」のマガジンのサムネイル画像は1600px × 568px の長方形になっています。

「note」のマガジンのサムネイル画像は1600px × 568px の長方形
「note」のマガジンのサムネイル画像は1600px × 568px の長方形

スマホで見るときには縦幅が200ピクセルになり、横幅はそのスマホによって可変になっています。

縦は200ピクセルで横幅はスマホサイズによって変化する
縦は200ピクセルで横幅はスマホサイズによって変化する

ほかのツールへの連携

noteとほかのSNSやクラウドに連携させる技です。

「note」のバックアップはEvernoteに一瞬で送れます

note」のバックアップって取っていますか?

わたしは適当すぎる投稿以外はすべてバックアップしています。なにがあるかわかりませんからね。

サービスが終了する可能性だってありますから。

PCのブラウザ「Google Chrome」の拡張機能の1つである「Evernote Web Clipper」を使って、一瞬でEvernoteに保存しています。

1Evernote Web Clipperアイコンをクリック

Google Chromeのブックマークバーにある 「Evernote Web Clipper」のアイコンをクリックすると、こんな感じ(下の画像)みたいにメニューがでます。

[ Evernote Web Clipperのアイコンをクリック ] → [ 保存 ]

これで保存をクリックするだけ。たったこれだけで「Evernote」に自動で保存されます。

2Evernoteに保存される!

この技の素晴らしいところは画像もちゃんと保存されること!

もっと言うと、文字の装飾(太字とか)もいっしょに保存されます。

Evernoteに保存されている!
Evernoteに保存されている!

3ショートカットに登録しよう

拡張機能はショートカットに登録できるので、ぜひ登録を! 簡単にEvernote Web Clipperを起動できますよ!

もっと極めたい人向けに、Windowsの場合はマウスジェスチャーにショートカットを登録するとやばいことになります。超便利!!

補足: 記事タイトルが取得できない場合

たまに記事タイトルがちゃんと取得できないことがあります。

そんなときは、ブラウザを再読み込みしてからEvernote Web Clipperをクリックし直すと直りますよ~。

オマケ:自動でEvernoteに送る技も

noteに投稿したら自動的にEvernoteに取り込ませる方法もこちらで紹介されています。

参考: noteの投稿をEvernoteに保存する方法 * The Path

IFTTT(イフト)」を使うのですが、この方法だと画像は取得できませんのでご注意を!

「note」に投稿したらTwitterに自動投稿

noteに新しい記事を投稿した瞬間に自動でTwitterへ更新情報を自動投稿する方法です。

IFTTT」という異なるSNSを繋げていろんなことができるWEBサービスを使います。

「IFTTT」を使うと自動でTwitterに投稿
「IFTTT」を使うと自動でTwitterに投稿

簡単に言うと、noteアカウントの「RSS」を取得し、その情報をTwitterに流すという流れ。

詳しくはこちらの「ブログのちから」の記事を!

参考: note.muとfeedly、Twitter、Facebookを自動連携する方法! | ブログのちから

Webフォント用のSVGデータ

Webフォント用のSVGデータAdobe Illustratorで作りました。いい仕事してるでしょ? 褒めて褒めてー!

この下のアイコンですが「Webフォント」で作っているんですね。

ヨスをフォロー

← このアイコンもWebフォントです。

SVGデータはこちらからダウンロードしてお使いください。

SVGデータはこちら

あ、ついでに言うとnoteのテーマカラーのコードは「 #41c9b4 」です。

1Webフォントは「icomoon」で設定してね

Webフォントは「icomoon」というWEBサービスで設定できます。くわしくはこちらの記事を。

参考: 【Webフォント導入】好きなアイコンだけを選んで使えるicomoonの使い方 - Shufulife

2自作のWebフォントをicomoonに追加

自作のWebフォントをicomoonに追加する方法はこちらの記事を。

参考: 自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る)

今回は、note関係で使えるネタを集めました。

わたしのnoteでも随時新しい技を見つけ次第投稿していますので、ぜひフォローしてくださいね。

ヨスをフォロー

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!