kumacreative

kumacreative

【nocode #29】nicepageでコンタクトフォームを作ってみよう II

さて今回は前回の続き、フォームのパターンを見ていきましょう。 結構たくさんあるので、主要なものを中心に解説していきたいと思います。 nicepageでのコンタクトフォームの作り方■基本の3つ まずはメニューの一番上の基本の3つから Input：これは短めのテキストを入力させる際に利用します。 Textarea：これは少し長めの文章を文章を入力させる際に利用し Checkbox：ここでのチェックボックスはエビデンスを取得するためというより、チェックボックスの基本として

kumacreative

    • 【nocode #28】nicepageでコンタクトフォームを作ってみよう I

      今回はサイト内にコンタクトフォームを設置してみます。 本サイト内ではGoogleformsへリンクする仕様にしているので、今回はサイト内には設置しませんが、nicepageでどんなことができるのか確認してみましょう。 nicepageでのコンタクトフォームの作り方■いろいろなパターンが作れます。 とは言え結局は入力フォームのパターンを、ポチポチっと配置していくだけなので、それほど難しいことはありません。 普段いろいろなサイトを利用していると、コンタクトフォームを利用する

      kumacreative

      • 【NoCode #27】 nicepageのバグなのかしら・・・・いやっ？？？

         さて、前回からだいぶ間があいてしまいましたが、そろそろ再開したいと思います。 久しぶりなので今回っはちょっと短めに。 実はフォームを作っている時に発見してしまったバグ。 本業もありつついろいろ調査してテストしてとどこに問題があるのか最初はさっぱりなバグ対応でしたが、なんとかフィックスしたので記事再開です。 というより終わってみればこんなことか・・・という内容ですw 完成したと思っていたけど・・・■バグ、見つかりました 作り込んでいく最初の方は大丈夫だったような気がする

        kumacreative

        • 【nocode #26】 nicepageでオブジェクトをグリグリ動かしてみよう II

          今回は、前回長くなったアニメーション設定の続きです。 いくつかのエレメントを含むBoxに、タイミングをずらしてアニメーションするという感じにしてみました。 BOXエレメントにアニメーション設定をする■今回のアニメーション設定について 前回はテキストや画像、アイコン、シェイプそれぞれ1つのエレメントに対して個別にアニメーションを設定していましたが、今回はBox内に3つのエレメントを配置して、それぞれに違う動きを設定した上でBoxエレメントで1つの動きになるようにしてみます

          kumacreative

        【nocode #29】nicepageでコンタクトフォームを作ってみよう II

        kumacreative

          【nocode #25】 nicepageでオブジェクトをグリグリ動かしてみよう II

          今回は表示するテキストや画像にちょっとした動きをつけて、すこしだけリッチな感じ？w　のサイトにしてみましょう。 それほど複雑な動きがつけられるわけでもないし設定も超絶簡単なので、今回はちょっと短めになると思います・・・たぶん。 テキストや画像に動きをつける完成したサイトのトップページや各下層ページのタイトル部分にあるテキストにすでに動きがついています。 これらは基本的に左からスライドしてくるようになっていますが、他にもいくつかの動きがありますので、この辺を簡単に解説していき

          kumacreative

          【nocode #25】 nicepageでオブジェクトをグリグリ動かしてみよう II

          kumacreative

          【nocode #24】 nicepageで表組みをつくってみよう II

          今回はいろいろなパターンで表組みを作ってみたいと思います。 それぞれの特徴を踏まえた使い方も解説していきます。 いろんな方法で表組みをつくってみよう■ド定番のテーブルエレメント 前回も書きましたが、ド定番というか最近あんまり使われないような気がしないでもないけど、単純な表組みでは一番簡単に作成できるし、ブラウザごとの差異もすくないように思います。 まぁそんなに使ってないんでわかりませんが・・・ ということでまずはテーブルエレメントにはどんなものがプリセットされているか

          kumacreative

          【nocode #24】 nicepageで表組みをつくってみよう II

          kumacreative

          【nocode #23】 nicepageで表組みを作ってみよう I

          ちょこっと体調わるかったりで1週飛ばしましたが今週から再開です。 今回でサイト内のページ作成はすべて完了！ やっと終わりました。 本番サーバーにも公開をしようと思います。 サイト最後のページを作成■ページの構成 サイト最後のページは「JOB HISTRY」のページ。 想定している構成は、 【プロジェクトタイトル｜プロジェクト概略｜担当業務】 という構成で横方向で1つのプロジェクトを記載するという形で考えてます。 これを縦方向に繰り返して複数の参画プロジェクトを紹介し

          kumacreative

          【nocode #23】 nicepageで表組みを作ってみよう I

          kumacreative

          【nocode #22】 nicepageでGridエレメントを使ってポートフォリオ的なページを作ってみようII

          さて、またもやバージョンアップして5.9.3になりました。 今回のバージョンアップは、ページのテンプレート部分やイメージギャラリーでフィルターが使えるようになってます。 まだ使ってないので構造がどうなっているかわからないけど、おそらくタブ切り替えのような構造かな。 でも、スタティックでこれが簡単にできるのはいいかも。 だんだんと使い勝手も上がってきてるし、機能も増えてきてるのは嬉しい限りです。 今回でポートフォリオページを仕上げます■と思ったのだけど・・・ うーん、失敗し

          kumacreative

          【nocode #22】 nicepageでGridエレメントを使ってポートフォリオ的なページを作ってみようII

          kumacreative

          【nocode #21】 nicepageでGridエレメントを使ってポートフォリオ的なページを作ってみようI

          Portfolioページの構成■Portfolioのページ構成案 ページのイメージを簡単に書くとこんな感じです。 プロジェクトごとの画像サムネイルとプロジェクト名がならんで、クリックすると拡大表示して関連画像をすべて見れる、というまぁよくあるインターフェースです。 ■Gridエレメント まずはレイアウトのベースとなるGridエレメントを配置します。 「Grid」→「Show 80 more」をクリック。 たくさんグリッドテンプレートがありますが、今回はその中から

          kumacreative

          【nocode #21】 nicepageでGridエレメントを使ってポートフォリオ的なページを作ってみようI

          kumacreative

          【nocode #20】 nicepageでSNSリンクの設置とMyLibraryを使ってみよう

          nicepageがまたアップデートされました。 5.7.4から5.8.2になって機能がいくつか追加になったり、インターフェースもちょっと良くなったりしてます。 ただまだまだ要望は尽きないけど。 ということで、これからの画面キャプチャは5.8.2がベースになります。 今回はSNSのリンク部分とMyLibraryについて■SNSリンクの作成 と言ってもこれもエレメントやブロックとしてテンプレートが用意されているので簡単です。 このブロックの下部にあるSNSのリンクの設定です

          kumacreative

          【nocode #20】 nicepageでSNSリンクの設置とMyLibraryを使ってみよう

          kumacreative

          【nocode #19】 nicepageでファイルのダウンロードリンクを作ってみよう

          前回までで一応サイトトップページは編集が終了したので、今回から下層ページの編集にとりかかります。 ここからは、これまで使ってこなかった機能や操作などを中心に、出来上がったページを見ながら解説します。 まずはAboutのページ編集から■Aboutページの出来上がり とは言うもののまだ100％完了ではないのですが・・・。 こんな感じで作ってみました。 細かいところはまだ検討中ですが、おおよそのコンテンツとレイアウトはこれで良いと思うので、いままで使ってこなかった機能やエレ

          kumacreative

          【nocode #19】 nicepageでファイルのダウンロードリンクを作ってみよう

          kumacreative

          【nocode #18】 nicepageでヘッダーの調整とサイトのパブリッシュをしてみよう

          前回1個忘れてました。 ヘッダーの位置固定はできているのだけど、透過の設定ができていない。 ただし、透過についてはどうにもうまくいかない部分もある。 ということで、この解決方法についても本文で解説します。 ヘッダーの透過とパブリッシュ■まずはヘッダーの透過設定について ヘッダーを透過させる方法はいくつかあります。 というよりどのように透過させるかということになるのですが、nicepageのヘッダーに関するプロパティでは以下の2つがあります。 ヘッダーブロックを選択して右の

          kumacreative

          【nocode #18】 nicepageでヘッダーの調整とサイトのパブリッシュをしてみよう

          kumacreative

          【nocode #17】 nicepageで各デバイスレイアウトの調整をしてみよう

          前回話がだいぶ逸れてしまったので、今回は話を戻してトップページの全体調整をしていきましょう。 ページの全体調整をする■デバイスごとのレイアウト調整 各デバイスごとのレイアウトを確認するには、ウィンドウ上部のトップバーにあるデバイス編集のボタンを選択します。 上図はモバイルデバイスが選択された状態です。 これで編集画面がモバイルサイズでの確認・編集ができるようになります。 さて、とりあえずモバイル画面でどのような状態になっているのか見てみましょう。 ちと画像長いです。

          kumacreative

          【nocode #17】 nicepageで各デバイスレイアウトの調整をしてみよう

          kumacreative

          【nocode #16】 nicepageではないけどもChatGPTを使ってテキストライティング

          前回の最後に「トップページの全体を見ての最終調整と、各デバイスでの表示の確認と調整」をしましょうと書きましたが、文字量によってもレイアウトに影響するので、テキストライティングを先に進めてしまうことにしました。 けっこう悩むテキストライティング。 ちょっと話がずれますが、今回はサクッと作りたいのであるところに外注してみました。 テキストライティングを外注？してみたの巻■テキストライティング ホームページを作っているとどうしても必要になってくるものの一つが「テキストライティン

          kumacreative

          【nocode #16】 nicepageではないけどもChatGPTを使ってテキストライティング

          kumacreative

          【nocode #15】 nicepageでブロック内にボタンやテキストを配置してみよう

          今回でサイトのトップページの編集は完了してしまいましょう。 残りはこれまで解説した内容で十分対応できるはずですので、細かい説明は省いて完了を目指します。 トップページの編集を完了させる■JOB DESCRIPTIONのブロック 次はJob Descriptionのブロック編集です。 現在のテンプレートの内容を見てみましょう。 このような構成です。 背景に画像が設定されていて、その上にテキストが乗っている状態です。 ■背景の画像はどうするか・・・ 背景の画像ですが、ど

          kumacreative

          【nocode #15】 nicepageでブロック内にボタンやテキストを配置してみよう

          kumacreative

          【nocode #14】 nicepageでテキストとボタンのデザインをしてみよう

          今回はテキスト関係の調整方法、ボタンのデザイン変更や設定方法などを作りながら見ていきましょう。 そして今週もnicepageはアップデートがあって5.6.2になりました。 またまた入力フォームの部分が中心ですが、それ以外にページやブロックのテンプレートが増えてます。 ページもそうですが、ブロックのテンプレが増えるのは使い勝手が上がるのでありがたい。 Portfolioページへの導入ブロックを完成させる・・・本当か？■Portfolioブロックの確認 まずは導入部分のブロッ

          kumacreative

          【nocode #14】 nicepageでテキストとボタンのデザインをしてみよう

          kumacreative