herohoroブログ

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



🔄   2022-08-02

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

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

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

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

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

ひつじさんについて

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

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

画像が読み込まれない場合はページを更新してみてください。

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

画像が読み込まれない場合はページを更新してみてください。

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

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

画像が読み込まれない場合はページを更新してみてください。

画像が読み込まれない場合はページを更新してみてください。

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

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

ダウンロード方法

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

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

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

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

【使い方】

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

画像が読み込まれない場合はページを更新してみてください。

【プラグインの作り方】

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

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がおかしな動きをするので、

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

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

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

blockの確認
画像が読み込まれない場合はページを更新してみてください。

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

画像が読み込まれない場合はページを更新してみてください。

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

画像が読み込まれない場合はページを更新してみてください。

DBのプロパティはどうか

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

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

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

画像が読み込まれない場合はページを更新してみてください。

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

画像が読み込まれない場合はページを更新してみてください。

まとめ

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

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

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

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

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

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


後ばなし....

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

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

画像が読み込まれない場合はページを更新してみてください。

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

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

画像が読み込まれない場合はページを更新してみてください。

画像が読み込まれない場合はページを更新してみてください。

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

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

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

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

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

豆知識

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

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

ニヤニヤ🎊

随時ひらめく改造過程

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

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

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

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

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

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

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

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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