herohoroブログ

color text/backgroundとblock colorを深堀り



🔄   2022-08-02

2022/03/11にサポートされた文字色と背景色。

つい先日アルパカ先生の解説記事が投稿されました。

それでふと思い出した過去のツイート.....

😨
全然やってなかったーーーーー

普段Notionで使うとき.....

  • テキストブロックごと装飾する場合
  • テキストの一部に装飾する場合
  • テキストブロックごと装飾した上に一部のテキストにも装飾する場合
  • 他のブロック内で丸ごと装飾する場合
  • 他のブロック内で一部を装飾する場合
  • 他のブロック内で丸ごと装飾した上に一部のテキストにも装飾する場合

6通りのシーンがあると思います。

それに加えて文字色・背景色の場合に分けると.....。

今回サポートされた文字色・背景色はどのようにeasy-notion-blogに反映されるのか......

といったことを検証してみます\(^o^)/

サポート進捗一覧

毎回追加されるとsupportされてる機能確認という記事に追記しています。

今回もいつものように追記したのですが、

どうも複雑になってしまい「もう少し整理しておいたほうが良さそうだ....」

という展開になり記事を作成することにしました。

検証結果

「サポートされている機能確認」の記事に追記した部分のスクショを並べてみます。

テキスト(paragraph)

◆ Notion上

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

◆ easy-notion-blog上

画像が読み込まれない場合はページを更新してみてください。
見出し(heading_1~3)

◆ Notion上

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

◆ easy-notion-blog上 ( 見出しをカスタムしている場合....)

画像が読み込まれない場合はページを更新してみてください。
箇条書き(bulleted_list_item)

◆ Notion上

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

◆ easy-notion-blog上

画像が読み込まれない場合はページを更新してみてください。
連番の箇条書き(numbered_list_item)

◆ Notion上

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

◆ easy-notion-blog上

画像が読み込まれない場合はページを更新してみてください。
コールアウト(callout)

◆ Notion上

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

◆ easy-notion-blog上

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

◆ Notion上

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

◆ easy-notion-blog上

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

まとめ

テキスト全体を着色する装飾に要注意!!!

表示すると.....

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

このような結果になりました。

文字を丸ごと装飾する場合に組み合わせによっては反映されないblockがあります💫

以上です\(^o^)/


後日修正しましたーーーー(私PRしたよ★)

https://github.com/otoyo/easy-notion-blog/pull/81

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

詳しくはsupport記事を覗いてみてくださいm(_ _)m

https://herohoro.com/blog/support_check

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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