記事で使用できるパーツの紹介

コラムで使用できるパーツの紹介です。
入稿時やカスタマイズの参考にしてみてください。

吹き出し

このパーツのmicroCMSでの設定は以下のようになります。

設定項目はアイコンとなる画像と吹き出しに入るテキスト、アイコンを右と左どちらに配置するかの選択肢です。
アイコンは正方形にトリミングされるようにCSSで調整をかけていますが、中央が切り抜かれるのでこだわりがあれば最初から正方形でアップロードすることをおすすめします。

スタイルシートは/assets/css/component/balloon.cssで管理されているので、カスタマイズはこのファイルをいじるだけでOKです。

ボタン

このパーツのmicroCMSでの設定は以下のようになります。

設定項目はシンプルでボタンテキストとリンク先を入力して、新しいタブで開くかどうかを決めるだけです。

こちらのスタイルシートは/assets/css/component/button.cssです。

チェックパネル

このパーツのmicroCMSでの設定は以下のようになります。

こちらも見出しと本文を入れていくだけのシンプルな設定です。
スタイルシートは/assets/css/component/check-pannel.cssになります。

カルーセル（スライドショー）

このパーツの設定は以下のようになります。

アニメーション周りでアニメーションの種類、スライドを切り替える速さ、アニメーションの速さの設定が可能で、あとはナビゲーションボタンやページネーションなどを表示するかどうかの設定ができます。

Swiperを使用していて設定項目もSwiperがベースになっています。
馴染みのある方もそうでない方も、ポチポチいじってみてください。

リッチエディタ

リッチエディタではできることが多いので主要なスタイルや機能を紹介します。
なお、microCMSのリッチエディタはマークダウン記法に対応しており、決められた記号を入力するだけで太字にしたりリストや見出しを簡単に入力することができます。
マークダウン記法についてはGoogle先生が詳しいので検索してみてください。

また、以下の記事で実際のリッチエディタのスタイルを確認することができます。

見出し

h1見出しは投稿のタイトルにあたるため、リッチエディタで設定できる見出しの範囲をh2〜h5に設定しています。
それぞれスタイルは以下のようになります。

テーブル（表）

ヘッダーなし、ヘッダーあり、ヘッダー＋1列目ヘッダー（複合表）に対応しています。
ヘッダーがあればセル幅固定で横スクロールするようにスタイリングしているので、横長の表でも崩れず表示できます。

引用

クォーテーション付きの囲みで表示します。
クォーテーション自体はsvg画像を使用しているので色の変更もファイルを直接変更することで可能です。

色の変更は以下のファイル内のfill属性にカラーコードを指定するだけです。
/assets/images/icon_quote_left.svg
/assets/images/icon_quote_right.svg

また、同じファイル名で置き換えるとクォーテーションの画像自体もお好きなものに変更できます。

コードブロック

ファイル名を入れると左上に表示します。
また、右上のアイコンを押すとコピーできるので、記事内でコードやコピーしてもらいたいテキストがあればコードブロックを使うのがおすすめです。

本番公開時はURLがhttpsになっていないとコピー機能が動作しないのでご注意ください。

リスト

デフォルトのスタイルになっているので、必要に応じてスタイルをあててください。