< HTMLのページへ戻る

好きを、好きなだけ

ポートフォリオサイト制作に当たって

このページでは、このポートフォリオサイト制作に当たって、どのような思いで制作したのかを綴っていきます。
以下にセクション分けしていますので、ごゆっくりとご覧ください。

1.計画を立てる
2-1.ポートフォリオサイト制作着手開始
2-2.どんな構成にするか？
2-3.functions.php、JavaScript着手開始
2-4.Two weeks later
3.結局、このサイトって何が出来るの？
4.あとがき的な何か。

1.計画を立てる

2-1.ポートフォリオサイト制作着手開始

色々な講義や自主練、勉強のお陰で、html、cssは書けるようになりました。はい、ではここからWordPressを始めます。開きます。

パニックです。

最初の印象「待って待って、ブロック積み上げるだけならhtmlの知識使わないのでは？？？操作性悪い！難しい！」
今の印象「htmlもcssもphpも分かってないと、まともに使えないのでは？？？自由度高い！けど難しい！」

はい、難しいです。
初心者でも簡単？大嘘です。断言しますが、仕組み分かってないとまともに使えません。
そもそも固定ページと投稿ページというシステムが、より複雑化させてるような気がしませんか？僕だけ？
と思ったので、「自分のポートフォリオサイトは、投稿ページと、外部プラグインにあまり依存しない形を取ろう」と思い立ちました。これが始まり。

2-2.どんな構成にするか？

では、そもそも「投稿ページに依存しない形」とはなんぞや？？と試行錯誤が始まります。
個人的には、webページ内でどんどんページ遷移して、深い階層まで行ってしまって、何を見ているか分からなくなってしまう、という複雑化は好きではない。
そこで、

1.ページ遷移を少なくする。
2.誰が見ても分かりやすい階層しか作らない。
3.ただひたすらに「シンプル」にする。

この３つを重点として作成開始。
まずはデザイン。これはwebクリエイター試験対策の練習時にすでに考案していたため、半日で完成。
問題は、固定ページ内での挙動をどうするか。illustratorでデザインカンプを作り、どこにjsを使うかを考えました。
ロゴやバナー、メディアのページでの挙動がそうですが、

・固定ページの左30%をサムネイル欄とする
・サムネイルをクリックすると、拡大画像が左70%に表示される

これが理想でした。こうすると、投稿ページに飛ばずに拡大画像を見ることが出来る。
ただ、いちいちサムネイルとして入力するのは大変だし、imgファイルが増えてしまう。
よし、ではこうだ。

・wordpressのメディアライブラリに画像をアップロードして、その画像をカテゴリ分けして、それぞれの固定ページにサムネイルとして表示させる。
・メディアライブラリに保存した物にはキャプションもつけられるから、それも拡大画像と一緒に表示させる。
・差分だけは投稿ページを使って、差分があるものだけにリンクを表示させるようにする。

これなら思った通りの挙動がいけるはず。ただ、画像のカテゴリ分けは通常では出来ない…じゃあどうすれば…？と調べてみることに。

外部プラグインを使いましょう。
プラグインで解決！
便利なプラグイン５選！

嫌　で　す

そもそも外部プラグインに頼らない作りにしたいんだ、何かないかなぁ…と探しつつ、ChatGPTも大いに活用。

Ｑ．「こんな挙動にしたいんだけど、何かありませんか」
Ａ．「functionsで出来ます！」

出来るんかい！

ということでfunctions.phpに着手開始。

2-3.functions.php、JavaScript着手開始

やりたいことは大体決まってるので、ひたすらに調べながら入力開始。まずはこれだ。

・メディアライブラリのメディアをカテゴリ分けする。
・カスタムフィールドを表示させて、リンクを張れるようにする。

なるほど、まずはWordPressの管理画面にメディアタクソノミー(メディアのカテゴリ分けが出来る機能)を表示させる必要があると。ChatGPTと相談しながらポチポチと記入。

無事にタクソノミーが表示されたので、各項目を設定。imgファイルをメディアライブラリに追加し、カテゴリを入力、挙動を確認。ＯＫ、問題なし。
では続いて、カスタムフィールドでリンクを設定。ちょっと最初の操作に手間取ったけど、とりあえずクリア。無事にリンクも付けられた。
ここからが問題。表示されたサムネイルをクリックして、拡大表示して、キャプションやらリンクやらをどう付けるか？
この挙動は動的だから、jsでの管理になるなぁ、でもjs分からないなぁ。教えてChatGPTくん。

ChatGPT「Ajax使ってください」

えぇ…？いきなり難易度上げるじゃないですか…さすがにそれはしんどいっす…

※ちなみに実装しようとして、内部データへの干渉が上手くいかなかったので諦めました（wordpress側に弾かれた）

すいません、まだjsも理解が浅いので、jsだけでどうにかなりませんか…？

ChatGPT「仕方ない、ならこれで」

ということでChatGPTが出してきたjsをちょこちょこっとカスタマイズして、動作確認。拡大画像は…
あ、cssで大きく表示すれば解決ですね。
リンクURLがある場合はリンクを表示して、なければ何も表示しないようにしてと、ポチポチ。

2-4.Two weeks later

ということで、あれやこれやとやろうとして上手く動かず、最初の目標「シンプル」を忘れないようにしよう！と原点回帰。
気が付いたら２週間経ってました。早い。その間に、htmlページのコード表示＋css表示ボタンも設定。ここもjsで挙動制御。
あとは、仮で設定していたnavの画像やトップページのリンクサムネやロゴなどを作成して、レスポンシブも整えて、完成と。
@media(max-width: 768px)だと、自分のiPhoneXsではちょっと体裁が崩れてしまったので、３段階に分けて調整。

レスポンシブもちゃんと勉強しないと…と考えてたところでＬＰページの講義が開始。
日程調整もどんぴしゃり。
ということで、作成から３週間で大体完成、ここからブラッシュアップを進めながら、１２月頭に完成となりました。

計画通り。

3.結局、このサイトって何が出来るの？

長々つらつらと書いてきましたが、じゃあ結局このサイトって何が出来るの？というお話し。

①メディアライブラリに制作物をアップロードして、カテゴリ分けするだけで固定ページに表示されます。
②差分は投稿ページを活用して見ることが出来ます。投稿ページのurlを、メディアのカスタムフィールドに紐付ければ勝手にリンクが出ます。
③投稿ページは、カテゴリ内（ロゴ、バナー、メディア、htmlそれぞれ）で紐づいてるので、そのカテゴリ内のみの移動が可能です。(functionで自動入力)
④投稿ページから、カテゴリの固定ページに戻ることが出来ます。(functionで自動入力)
⑤htmlページは、ページ内だけでソースやcssを見ることが出来ます。紐づけはfunctions.phpで行う。投稿ページのページIDが必要です。
⑥使ってるimgファイルを変更したい場合は、phpで変更出来ます。知識が必要。ここはカスタマイズで出来るようにしておきたい。

サムネイルをimgタグで埋め込むような単純なことはしてません。

管理画面のメディアに必要なファイルをアップロードしてカテゴリ分けするだけで、それぞれの固定ページに表示させられるシステムは、全ポートフォリオサイトに導入してほしいレベルの快適さです。余計なページ数を増やす必要がないので、管理が楽。
また、リンクを貼ることで、差分を投稿ページで表示させられるので、サムネイルの見た目もスッキリ。
動画も、直リンクを貼ってしまえば、メディアライブラリの容量やサーバー容量も圧迫しないので便利です。これならスターサーバーフリーで容量は十分足ります。
動画ページのリンクで、別タブで遷移するようにしたかったな、というのが惜しいところですが、今回はこれでヨシ。

2-1でも書きましたが、私の最初のWordPressに対する印象は「使いにくい」です。これは今でも変わってません。
使いにくいなら、使いやすくすればいいんです。htmlとcssとphpが書けるなら、作ることは理論上可能ですよね。じゃあやりましょか(ﾆｯｺﾘ)
ということで、「ちょっとした操作を覚えてしまえば、誰でも簡単に使えるポートフォリオサイト」を最終着地点として制作したわけです。

4.あとがき的な何か。

このポートフォリオサイトは、必死に背伸びをして制作しましたが「何事においても無理に背伸びをする必要はない」というのが自分の考え方です。
昨今、あまりに無理を重ねた結果、精神や身体の調子を崩してしまい、やりたいことが出来なくなってしまう人が多いですよね。
実際私もそうです。無理をして、やりたいことが出来なくなるのはもったいないです。
自分の能力を見定めて、能力にあった計画を立てて、日々一つずつ積み重ねていった方が良いです。

「これなら出来そうだな」「ここまでならがんばれるかも」「難しそうだけどやってみたい」と思えたなら、チャレンジすることは大切です。
挑戦しないと得られない物は沢山ありますが、決して無理をしてやるものではありません。何度でも言います、無理はしちゃいけない。
私は、「やってみたい」と自分の心が言ったので、その声に従って作っただけです。ある意味、自分自身に対しての挑戦です。

お前はどこまで出来るんだい。

と、自分自身に問われれば、そりゃまぁ「やれるだけやるさ」と言うしかないでしょう。

自分で選んだ道、進み方は自分次第。

走るのか、歩くのか、色々スキップして行くのか、立ち止まるのか、戻って別の道を選ぶのか。
全て自分次第です。忘れちゃいけないのはたった一つ。初心です。

私の初心は「好きを、好きなだけ」やること。これだけです。

音楽でもイラストや動画でも、ゲームでも仕事でも運動でも、「好き」と思える物に対して、誰かに遠慮することは何もありません。
好きなものに対して一所懸命になって向かってる人は、いつか誰かの「目標」になります。
私は、そんな人たちを見てきて、本当に素敵だなと心底感動し、自分もそうなりたいと思い、このサイトを制作しました。

いつか私の作ったものが誰かの目に止まって、誰かにとっての目標や原動力となれれば、それだけで幸せです。