【初心者必見!】kintoneプラグイン「kViewer」のデザインをカスタマイズしてみた！

「kViewerの公開フォームデザインを自社のホームページデザインに寄せたい。」
「フォームブリッジも寄せたい…。」

そんなわけで…

kViewerの公開フォームデザインを、CSSでカスタマイズしてみました！

※kintoneポータルのカスタマイズはコチラ！！

kintone連携サービス、kViewerとは

kViewerについては、以前記事にしたものがありますので
コチラをご参照ください。

~kViewerデザインのカスタマイズの仕方~

では、さっそくkViewerの公開フォームデザインをCSSを使い、
準備・カスタマイズしていきます！

※kintoneアプリの作成、kViewerの設定についてはコチラ！！

Step1 kintoneアプリとkViewerの準備

kintoneアプリは以下のように作成しました。

kViewerは以下のようなものを用意しました。

Step2 kViewerの簡単なカスタマイズ

kViewerの公開フォームの背景を変更してみます！

まずCSSファイルを作成し、以下のソースを書き込みます。

/*背景変更*/
body{
    background:url("お好きな画像アドレス！");
  }

このソースの“”の間にあるお好きな画像アドレス！を変更するとお好きな画像に変更できます！

つまり…

/*背景変更*/
body{
    background:url("https://○○××□□/img/mv01.jpg");
  }

このような形ですね！

CSSファイルを作成したら、kViewerの以下の場所にCSSファイルを読み込ませます。

確認

CSSを読み込ませ、保存、編集が完了したら背景が変更されているか確認してみましょう！

公開中のビューを見るッ！

背景が変更されました！

まとめ

今回はkViewerの公開フォームの背景のみ変更しましたが、
背景以外の多くのデザインを変えることでよりイメージに近いフォームの作成ができると思います。

kViewerは無料でコチラからお試しできます！

今回はCSS初心者の方には難しいかもしれませんが少しずつ一緒にレベルアップしていきましょう！

今回の記事についての質問や疑問、ほかにも「この機能を使ってみたい！」
「こんな機能を実装できる？」などご質問などございましたら、ぜひお気軽にご相談ください！

以上となります！お読みいただきありがとうございました！