CODEではPageFlyのページ作成代行サービスを提供しています。料金は1ページ1万円です。デザイン等もこちらで行いますので、気になる方はこちらをチェック!サービス詳細ページはじめにShopifyにはホーム、商品ページ、コレクションページなどは用意されていますが、会社概要ページなどといったページは用意されていません。それらは自分で用意する必要があります。Shopifyの管理画面からも作成することはできますが、このようにシンプルなデザインになってしまいます。そこで、今回はプログラミングはせずにもっと凝ったページを作成できるアプリ「PageFly」を解説します!Shopifyアプリ「PageFly」とはPageFlyとはShopifyでページをノーコードで作成できるアプリです。料金は以下のようになっています。機能は上の料金表の通りです。料金の高いプランになるにつれてセクションの保存数やページの作成数が変わってきます。「PageFly」の使い方それではPageFlyの使い方を解説していきますアプリのインストールまずはアプリのインストールをします。こちらからダウンロード可能です。today!下記記事にアプリのインストール方法をまとめてあるので参考にしてみてください。page」をクリックしましょう。page」をクリックしましょう。ページタイトル、ページURLを入力してください。続いてページタイプを選びます。Pagesを選択します。続いてヘッダーとフッターを表示するかを選びます。基本的にはShowで大丈夫です。続いてページのテーマを決めます。自分の作成したいイメージに近いものを選びましょう。今回はまっさらな状態から作ってみようと思うので左上の白いページをクリックします。ページをカスタマイズしようページ選びが完了するとこのような画面に移ります。画面の左上に4つのアイコンがあります。こちらは上から順に基本的なブロック、テキスト、ボタン、画像などの追加Shopifyの要素の追加(コレクションや商品を表示できます)他のアプリ(レビューアプリなど)の要素を追加テンプレートの追加このようになっています。基本的な動作それでは要素を追加してみます。overlay」のものをドラッグアンドドロップで画面の方に持ってきましょう下記のように表示されます。右側のメニューに「General」とあります。こちらではブロックの基本的な編集ができますまずはタイトルを変更してみました。続いてボタンをクリックした際のリンクを作成してみましょう。下の画像のように、ボタンをクリックした後に2、3番のボタンを押していきます。するとこのような画面が出てきます。下の方の選択する方を選べば、簡単にコレクションや商品のページに飛ばすことができます。今回はコレクション一覧のページに移動させたいのでURLのところに記入します。これでリンクは完了です。ボタンに限らず、他の要素にもリンクを作成することが可能です。2カラムのブロックを作成しよう続いてWenサイトによくある「2カラム」のブロックを作成します。下記画像のように「左上のプラスボタンをクリック▶︎Layout▶︎1/2」をドラッグ&ドロップしてください(背景を追加しました。)続いて、左側のブロックにImageを、右側にParagraphを設置します。画像や文章を設定するとこんな感じになりました。アニメーションを付けよう続いてアニメーションをつけてみます。アニメーションをつけたい部分をクリックし、「General」の一番下まで行くと「ANIMATION」というのがあります。Setting」をクリックすると下記のように出てきます。Overはマウスを当てたタイミングのアニメーションを設定することができます。これで基本的なカスタマイズ方法は終了です。今回のページはこのように完成しました!https://agata-furniture.com/pages/aboutセクションの保存セクションは保存も可能です。自分でセクションを作成し、それをもっといろんなところで使用したい!というときに便利です。あるブロックを選択し、このダウンロードボタンを押すと保存可能です。sectionsから使用可能です。変更した場合、履歴が保存されます(無料だと3つまで)左下の時計アイコンから履歴を表示することができます。「変更してみたけど前の方が良かったな」と思った時などに使ってみましょう。ページを表示しようそれではページを表示してみましょう。右上の「Pubulish」をクリックしましょう。その後、Shopifyの管理画面に戻ると、このようにページの部分に追加されていました。CODEではPageFlyのページ作成代行サービスを提供しています。料金は1ページ1万円です。コメントをキャンセルメールアドレスが公開されることはありません。Shopifyにはブログ機能がついています。...[画期的]CSSのhover時に別のタグの処理をする方法こんにちは。Masayukiです。