Webflow(ウェブフロー)でのブログ投稿を便利にする

Webflowでブログやお知らせを投稿する場合は、CMSのリッチテキストを利用しますが、このリッチテキストには少し癖があります。

1. 日本語入力の挙動が安定しない
2. ソースコードをきれいに表示させる機能がない
3. テーブル要素がない

今回はこれらの問題を解消する方法をまとめました。

日本語入力の挙動が安定しない

Webflowのリッチテキストは日本語入力の挙動が安定しません。そのため、Google Docs(ドキュメント)をエディタとして使い、完成後にWebflowのリッチテキストにコピペするのがおすすめです。

Google Docs

Google Docsをおすすめする理由は、

1. リッチテキストで使える要素が使える（画像、箇条書き、リンク、タイトル、太字など）
2. 1.の要素をそのままコピペできる
3. 誤字脱字やスペルをチェックしてくれる
4. 無料で使える

その他おすすめのサービスがあれば教えてください。

ソースコードをきれいに表示させる機能がない

Webflowには、ソースコードをきれいに表示させる機能が標準ではありません。そのため、Prism.jsというシンタックスハイライトライブラリを使用します。

Prism.js

Prism.jsがおすすめな理由としては、

1. 軽量
2. 表示がきれい

個人的には軽量というのが一番の選定理由かなと思います。

今回はカスタマイズの方法については割愛します。カスタマイズの方法は以下の記事が参考になると思います。

Prism.js 使ってみた

Prism.jsの使い方！シンタックスハイライトにおすすめ

導入方法

Prism.jsの導入方法は、プロジェクト設定のHead codeとFooter codeにコードを追加するだけです。

以下のコードを、プロジェクトの設定画面のHead codeに追加します。

以下のコードを、プロジェクトの設定画面のFooter codeに追加します。

使い方

HTML/CSS等のマークアップを追加する場合を例に使い方を説明します。

リッチテキストのカスタムコードを使用します。

以下のコードをカスタムコードに貼り付け、<!-- -->の中にHTML/CSS/Javascriptのコードを記載します。

<pre class="line-numbers"><code class="language-markup"><!--ここにソースコードを貼り付ける--></code></pre>

Save & Closeをクリックすると、以下の表示になります。

残念ながらWebflowで、サイトを公開しないとカスタムコードの表示を確認することはできません。

なお、HTML/CSS/Javascript以外のコードを書く場合、code要素のclass名を変更する必要があります。

language-以降を言語名に変える必要があります。

テーブル要素がない

Webflowにはテーブル要素が標準で備わっていないので、カスタムコードを使って実装する必要があります。

導入方法

プロジェクト設定のHead codeにCSSを追加することで、テーブル要素のdesignを行います。

本サイトの場合は以下のようにCSSを追加しています。

インターネットで検索すれば、コピペOKのデザインがいろいろあるので、自分のサイトに合うデザインを見つけられると思います。

コピペで使えるテーブル（表）のCSSデザイン＆サンプルコード17選

使い方

リッチテキストのカスタムコードを使用します。

htmlのtable要素を追加します。

テーブル要素の使い方は色んな方がわかりやすく解説しているのでそちらを参考にしてください。

HTML tableタグの使い方・テーブル 表の作り方

表（テーブル）を表す要素

また、Table Tag Generatorは、視覚的にテーブル要素を作成できるので便利です。

Table Tag Generator | HTMLの表を簡単に作成・結合ツール

Save & Closeをクリックすると、以下の表示になります。

繰り返しになってしまいますが、Webflowでは、サイトを公開しないとカスタムコードの表示を確認することはできません。

テーブルがちゃんと表示されるか不安な方は、HTMLをCodePenに貼り付けて確認できますので、活用してみてください。

CodePen

まとめ

Webflowでのブログ投稿は少し工夫が必要なのでまとめてみました。
もっと良い投稿方法があれば教えてください。

Webflowが早く日本語対応されることを願ってます。。

‍