herohoroブログ

テキストを可愛くアレンジできるColor Paletteが激アツだ_equation



🔄   2023-03-14

Notionは十分おしゃれで使いやすいツールだと思っていましたが、

まだおしゃれにする機能が隠れていたようです。

そんなことが分かったのはこのツイート。

crossさんこと「ひつじさん」と勝手に呼ばせていただいているこの方。

実はeasy-notion-blogの大先輩で、一方的に「きっとすごい人」カテゴリーに登録させていただいておりました。

ひつじさんについて

ご本人から紹介を受けたわけではなく、

ただただ一方的に調べて「ひつじさんってこういう方なのか」と認識している情報をシェアすると....

image block

easy-notion-blogをForkしたメンバーの中で最も古株。

私がForkしたのは2021/12/10頃だったので、それより前。

easy-notion-blogの最初のcommitが2021/11/03となっているので、

わずか1ヶ月経つか立たないかの時期にForkを済まされていた方。

😵
絶対すごい人でしょ......

一度だけ、Notionを便利に使えるChromeの拡張機能についてやりとりしたこともありました。

😽
教えていただいた拡張機能は今では無くてはならないくらいお世話になっています。

私が得られている情報はここまで。

そんなひつじさんがある日さらっと「Templeteを作成しました〜」とツイートされたもんだから、

中身を見ずにブックマーク印としてイイネ❤️ボタンを押し、

「ひつじさんのテンプレを使ってみる時間」というスケジュールを組むことにしました。。。。

😅
スケジュール化しておいてよかった...。

テンプレ_Color Palette

https://crossn.gumroad.com/l/Color-Palette

image block

テキストに\color{#FFFFFF}\colorbox{#c71585}{\textsf{Sample Fill Color}} といった内容を打ち込み、

そのテキスト全てを選択した後【equation】という装飾をすると......

image block

image block

背景付きの装飾ができます。

背景無しは\colorbox{} の部分を削って入力すると作ることができます。

ダウンロード方法

ひつじさんが説明ツイートをされていたのて添付すると.....

簡単に自分のNotionへ取り込むことができます\(^o^)/

たくさん使うためのプラグイン

数式を毎回打ち込むのは億劫だなと感じた私はデータベースをrelationさせてプラグインDBを作ることにしました。

【使い方】

  1. Input_textに表示させたい文字を入力
  2. name_colorboxで背景色を選ぶ
  3. name_colortextで文字色を選ぶ
  4. Largeで大きさを設定
  5. valueに完成した数式が表示されるのでretuenにコピペしてequation化する

image block

【プラグインの作り方】

簡単にどんな機能を設定しているかを説明すると.....

Input_textname_colorboxcode_colorboxsample_colorboxname_colortextcode_colortextsample_colortext
relationでひつじさんのDBを紐付けrollupでCode列を表示させるrollupでSample Fill列を表示させるrelationでひつじさんのDBを紐付けrollupでCode列を表示させるrollupでSample Text列を表示させる

ここまでの列がひつじさんのDBから紐付けている部分です。

この後の列は実装するために必要な数式を作成するための列になります。

【Large?列】は単純にチェックボックスを設定し、

複雑に見えてしまうのがvalue列。

formulaで以下の関数を設定しておきます\(^o^)/

prop("Input_text") ? (prop("Large?") ? concat("\\Large{", format("\\color" + "{" + prop("code_colortext") + "}"), format("\\colorbox" + "{" + prop("code_colorbox") + "}"), format("{\\textsf" + "{" + prop("Input_text") + "}}}")) : concat(format("\\color" + "{" + prop("code_colortext") + "}"), format("\\colorbox" + "{" + prop("code_colorbox") + "}"), format("{\\textsf" + "{" + prop("Input_text") + "}}"))) : ""
value列に埋め込む関数

使用した関数

  • ifの代わりに三項演算子
  • concat
  • format

使えるか検証してみた

基本、テキストで入力する場所に使うことができますが、なにせ数式。

文中に数式を混在させてしまうと後々修正するときにちょいとNotionがおかしな動きをするので、

文頭・文末で使用する方が良さそうです。

🔄 2023/01/13

数カ月後確認したところ、

文中に数式を混在させてもおかしな動きにならず余裕でした\(^o^)/Notionさんアリガトウ

\Large{\color{#696969}\colorbox{#ffd700}{\textsf{Herohoro}}} という数式を

いろんなblockに入れてみました。

blockの確認
image block

ただ、/page で作成すると表示できませんでした。(メンションページリンク❎)

image block

でも、ページを開くとタイトルとしては表示されます。

image block

DBのプロパティはどうか

マルチセレクト・通常のセレクトプロパティは表示されませんでしたが、

  • データベースのタイトル
  • page名
  • textプロパティ

これらはOKでした\(^o^)/

image block

ただ、ここでもデータベースをメンションリンク名にすると表示してくれませんでした....

image block

まとめ

背景の□の大きさは、\Largeだけでなく大文字・小文字によっても変化して可愛らしい装飾ができます。

※ 2行目の*H*e*r*o**以外の文字全て\Large モードですが、文字自体の大きさで□が変化しています★

通常のテキストカラーや背景カラーだけでは物足りなくなってきた方にはうってつけ。(私だ....www)

何か人さまの目に触れるようなページをNotionで作る時に活躍しそうです。

このテンプレを使うと絶対「これどうやって作ったの?」と質問されそうですね☺️

これからどんどん使っていこうと思います〜〜〜〜〜🤸🤸🤸🤸🤸🤸🤸🤸


後ばなし....

このプラグインがひつじさんに使っていただけることとなりました\(^o^)/ヤッター

ダウンロードサイトのスライドをめくると....

image block

プラグインのスクショが\(^o^)/\(^o^)/

テンプレートのNotionを開くと.....

image block

image block

ひつじさんがいい感じに追加実装してくださっています\(^o^)/

Largeか否かではなく細やかな設定がセレクトできるようになりました★スゴイ!!!!!!!

おかげさまでいい感じの作業ページになりました(*´ڡ`●)

ダウンロードはこちらです——

https://crossn.gumroad.com/l/Color-Palette

豆知識

パレットとスマホで変換すると「pallet」となりますが....

Color-Paletteの【Palette】はフランス語らしいです(*´∀`*)

ニヤニヤ🎊

随時ひらめく改造過程

こちらのスレッドにどんどん追加していきます★

まだまだつづくスレッド......www

「これいいかも」と感じるツイートを見つけたら、

是非是非スクショを参考に、

ご自身で作ってみてくださいね(*^^*)🎶

sort・filter・formula・relation・rollupの練習になり、

とっても楽しいです★☆★☆

🥰
フォントもequationで作れることを発見!

続編:
Equation-blockをsupportして広がるテキスト表現

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/