BLOG

R3 Cloud Journey

Life & Work

Webflowのカスタムコードでシンタックスハイライトのコードブロックとテーブルを追加してみた

2020-06-19

こんにちは、デザイナーのくーらです!

やっと弊社のコーポレートサイトの移行が落ち着いたので、Webflowでもうちょっとリッチなカスタマイズができるかと思って色々いじってみました〜!

自分はプログラマーではないので、もし専門用語の扱いやコードの書き方がずさんだったら目を瞑っていただければと思います…(*ノω・*)テヘ

まず、Webflowのカスタムコードで何ができるかを見てみましょう〜!

Webflowでカスタムコードが使えるところは以下の3箇所

1,プロジェクトの設定画面(<head>と<body>のみ)

こちらは全ページに反映されるカスタムコード

2,各ページの設定画面(<head>と<body>のみ)

こちらはページ別に設定できる該当ページに反映されるカスタムコード

1と2について、こちらのページで使える言語とタグの説明がありますのでご参考ください。

https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

基本、<link>、<meta>、<style> </style>、<script> </script>のタグが使えるのと、HTML、CSS、JSは使えて、サーバーサイドの言語は使えないです。

3,ページや、CMSのリッチエディターに埋め込むカスタムコード

こちらのページに詳しい説明がありますのでご参考ください!

ブログのシンタックスハイライトを早速作ってみよう

弊社のブログ「R3 Cloud Journey」は、一応テック系のブログなのでシンタックスハイライトのコードブロックの表示がないとどうしても気が済まないので、最初から着手したのはこちらのほうでした。

Webflowブログの本文はリッチテキスト+HTML埋め込みなので、コード本体をHTMLを埋め込むことにして、外部スクリプトを追加というかたちにしました。

色々調べた結果、 Prism.jsが非常に優秀で使いやすいということがわかり、早速入れてみました。

https://prismjs.com/

サイトのデザインによって自由に選べる8テーマが提供されていうち、Defaultのテーマを使うことにしました。

また、使い方としてダウンロードして使うのと、CDN、Bundler、Nodeで使うことも可能ですが、WebflowではCSSやJSファイルをアップロードする機能がないので、CDN利用が一番良いかと。

<head>タグに

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css" integrity="sha256-cuvic28gVvjQIo3Q4hnRpQSNB0aMw3C+kjkR0i+hrWg=" crossorigin="anonymous" />


</body>タグの前に

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js" integrity="sha256-9h14mWYYiQGkeAKg2JtijbqApb56kgw57WN6sI6dwH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha256-3S2PESHNt0YNL65z57WuHPHIv12fibpBDXepyCGHftw=" crossorigin="anonymous"></script>


ブログ本文の編集画面で、埋め込みコードのエディタから以下のように書けばきれいなコードブロックができちゃいます、言語名はprism.jsの対応言語から参考すれば良いかと〜

 <pre><code class="language-言語名">表示したいコード</code></pre>


ちょっといい感じのコードブロックができたでしょう?↑

ちなみに行を表示したい場合は埋め込みコードをこうすれば大丈夫です!

 <pre class="line-numbers"><code ...


テーブルを作ってみる

とある同僚から、ブログでテーブルを書きたいんだけど良い感じにスタイリング出来ないかとリクエストがあったので、やり方を調べてみました。

残念ながらWebflowが提供されているモジュールからテーブルを作ることは無理なので、HTMLで書くしかないのです(´・ω・`)…

幸いMarkdownからHTML変換ツールが使えるので、埋め込みコードにテーブルのHTMLをコピペしましょう。

(以下、同僚のブログより引用)

<table>
<tr>
<th>フィールドコード</th>
<th>フィールド名</th>
<th>タイプ</th>
</tr>
<tr>
<td>name</td>
<td>名前</td>
<td>文字列(1行)</td>
</tr>
<tr>
<td>latitude</td>
<td>緯度</td>
<td>文字列(1行)</td>
</tr>
<tr>
<td>longitude</td>
<td>経度</td>
<td>文字列(1行)</td>
</tr>
</table>


そして、ブログのページ設定で</body>タグにテーブルのスタイル要素を定義すればいい。ここは好きに書いていいよ!

<style>
table{
border: 2px solid #292929;
border-collapse: collapse;
margin:20px;
text-align: center;
letter-spacing: 1px;
}
td, th {
border: 1px solid #292929;
border-collapse: collapse;
padding:10px;
}
th{
background-color: #FFDF74;
border-bottom: 2px solid #292929;
</style>


実際にブログを公開したらこう見えます

残念ながらWebflowのエディタは、ドラフト状態でのプレビューが出来ないので、公開してからじゃないと実際の表示はどうなってるのが分からないのはネックですね…わたしもテストサイトで何回も公開→修正→公開を繰り返してやっと出来たので、どうにもならないかなWebflowさん〜〜!!!

他にもっと良いやり方があれば教えて下さい!

Web
Webflow
Design

UX Designer / Hackathon idol / Amateur manga&Doujin Otaku/

R3のご提供サービス
自社のシステム開発・移行などをご依頼したい方
お客様とともに作りながら考える
新しいシステム開発
kintone導入・アプリ開発・カスタマイズにお困りの方
kintoneをもっと使いやすくする
gusukuシリーズ