見出し画像

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

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




今回でポートフォリオページを仕上げます

■と思ったのだけど・・・

うーん、失敗した・・・w

というのも、最近携わったサイトとかアプリとか守秘義務契約を結んでるものが多く、画像とか設計書とかオープンにできないものが結構あった・・・。
「携わったよ」と面前で言った、りテキストで「やりました」程度であれば大丈夫なものもあるけど、サイトキャプチャとか設計書とか外部に出せないは当然として、開発に関係したことを表に出せないというのがほとんどでした。

とりあえずそういうの結んでないプロジェクトで、特に問題にならないものだけ並べてみました。

むかーし作ったものとかはそういうの結んでないんで、問題なさそうな古いのはもしかしたらまた追加するかも。

ということでこんな感じに仕上げてみました。

す、少ない・・・

やっぱり本番リリース時には古いプロジェクトでもいいからもう少し増やしとこ。

■フッター部分について

Download & Social Linkのブロックですが、このまま全ページに配置しようかと思います。

この連載の第20回で解説してありますが、

My Libraryにこのブロックを登録してあるので、そこから選択するだけですね。

簡単に配置できます。

と、ちょっとポートフォリオページの話しではないですが、トップページにもこのブロックを配置して、トップページ、アバウト、ポートフォリオの3ページが完成しました。

■ブロックの順番を入れ替えてみる

トップページにこのDownload & Social Linkのブロックを配置したときにはたと気づいたのですが、メニューの並びとページのボディにあるブロックの並びがあっていない・・・・

なんか気持ち悪い。
っていうか分かりづらいですよね。

ということで、メニューは「ABOUT」「JOB HISTRY」「PORTFOLIO」「CONTACT」の順、ページのボディ部分は「PORTFOLIO」「JOB HISTRY」「ABOUT」「CONTACT」の順になっているので、「ABOUT」と「PORTFOLIO」を入れ替えてやれば、メニュー項目と並びがそろうので、このブロックを入れ替えます。

まず「PORTFOLIO」のブロックを「JOB HISTRY」の下にくるように調整します。

やり方はブロックをコピー(カット)して目的の位置にペーストする方法、ブロックの位置をブロックメニューの上下矢印で移動していく方法があります。

両方やってみましょう。

■ブロックをコピー(カット)して目的の場所にペーストする

ちなみになぜ「コピー(カット)」という表現を使っているかというと、ある意味バックアップというのがあります。

カットしてペーストする前に、アプリがフリーズ・・・、Macがフリーズ・・・、なんてことはまぁは最近ほとんどなりましたが、それでもそのリスクは0ではないのです。

ブラウザ版で作成している場合でも基本的には同じ考えで、「リスクがあるなら避けましょう」ということです。
無駄に同じ作業をし直す、というのが一番モチベーションが下がるのです。

ということで、まず下のほうにある「ABOUT」のブロックを一番上に持ってきましょう。

アバウトのブロックを選択したら、左にあるブロックメニューの「…」をクリックして、表示されたメニューから「Copy」を選択します。
もちろん「⌘+C」(Ctrl+C)でも同じです。

コピーしたら次に挿入したい場所にペーストします。

ポートフォリオのブロック、項目パネルの下にいれたいので、項目パネルのブロックを選択してペーストします。
すると選択したブロックの下にペーストされ、

このようになります。

これで問題ありませんね。
問題なければ安全のため残しておいたページ下部にある「ABOUT」のブロックを削除しましょう。

ブロックを選択し、ブロックメニューにあるゴミ箱アイコンをクリックするかDeletrキーを押すとブロックが削除されます。

■ポートフォリオブロックを下に下げる

さて、アバウトを上に持っていったので、現在のボディのブロック順は、「ABOUT」「PORTFOLIO」「JOB HISTRY」「CONTACT」の順番になっています。

ということで次は、「PORTFOLIO」のブロックを「JOB HISTRY」のブロックの下に、というより順番を入れ替える、という形ですね。

こちらもブロックを選択すると表示されるブロックメニューの中にある、上下矢印でブロックの位置を上げたり下げたりできます。

ポートフォリオのブロックを下に下げてみましょう。

図のようにブロックメニューの「↓」をクリックして、このブロックの下にある「JOB HISTRY」のブロックのさらに下に「PORTFOLIO」のブロックを移動します。

そして移動が完了すると、

と、こんな感じに仕上がりました。
メニューの並び順と同じように上から順番に並びました。

いいかな。

■とうとうあと1ページ

さて、このノーコードアプリ「nicepage」の連載も22回目となりましたが、とうとうサイトはあと1ページで完成です。

最後の1ページはテキストだけの想定ではあるけれど、ちょっと構造をどのようにするかまだ考えてて、ほんとならCMSとかに乗っけてしまったほうが多分良いかもしれないのだけど、それほど更新頻度も高くないしなぁ・・・という感じです。

というわけで、そんなことも含めて解説しながら、残り1ページの作成解説を3回くらいで、その後まとめ記事を作って、そんで今回のサイト作成では利用しなかった機能の紹介等など。

てな感じで考えてますが、30回まで行くかどうかという感じでしょうか。

なので、もう少しだけお付き合いくださいませ。

さて今回はちょっと短いですがこのへんで。
ゴールデンウィークなので。

それではまた次回。


Nciepageに関する質問もこちらにどうぞ!ここでお答えします!

〜本日の「余談ですが」〜

余談ですが、電話で会話しました。

英語です。
英語でです。
英語でなんです。

英語話せないのに・・・

いや、会話になっていたかどうかは、ひじょーーーーーーに怪しいですが。

oahoasdiuhnawe,的なことや、

bfqo8y4rbqwve690sdc的なこと、

3562r`78sdivuyqwgp3efb的なことまで!!

って結局自分でもなんの話ししたのかよくわかってないっていう・・・

こういうことになると
あぁもっと勉強しとけばよかった
って毎回なるのだけど

毎回喉元すぎれば・・・・

いかんな毎回こんなだな

よし、今度こそはっ!!・・・・

というのがすでに喉元過ぎてる・・・

はぁ・・・


この記事が気に入ったらサポートをしてみませんか?