ebtf.netのトップページを作りました

https://ebtf.net のトップページを作りました。

今までは上のアドレスだとblogにリダイレクトされていましたが、ポートフォリオを主体としたトップページになりました。

右上のメニューからHomeを押していただいてもトップページに移動できます。

目的

たまに3Dモデルとかを作ったりするんですが、Twitterだけだとすぐ流れてしまうこともあり、ある程度長期的に残る記録を残そうと作りました。(大学時代にこれをやりました!!!と言い張れるように…)

~省略~

サイト構成
今の所、このブログ部分は blog. のサブドメインを付けています。というのも、
・いわゆるポートフォリオサイトのようなものを作ってみたい
・(www.とかなしの) ebtf.netでまずSNSなりこのブログなりのリンクを貼るトップページを作る予定
なんか調べてたらWordpressで普通のホームページチックなのも、ポートフォリオサイトみたいなのもできるみたいなんですね…
まぁページ制作のお勉強も兼ねて作ろうとは思っています。

https://blog.ebtf.net/2019/04/03/%e3%83%96%e3%83%ad%e3%82%b0%e3%81%af%e3%81%98%e3%82%81%e3%81%be%e3%81%97%e3%81%9f%e9%af%96%e3%83%ac%e3%83%b3%e3%82%bf%e3%83%ab%e3%82%82/

ブログを作成した際のエントリから引っ張ってきました。

個人のホームページで、何かを作りました!という記録を残すのが目的であるため、このポートフォリオのページをトップページに据えました。

目標/計画

ポートフォリオのサイトを作るにあたっていくつかの目標を作りました。

おしゃれなのがいいな

これいい!と思えるテンプレートを探しました。

ポートフォリオを簡単に管理したい

WordPressを使いました。

このサーバーは(スターサーバーライト)はデータベースが一つしか作れないのですが、複数Wordpressを入れることができると知れたのが幸いでした。

作った3Dモデルをぐるぐる閲覧できるようにしたい

three.jsとかを使うんですかね…?みたいに一瞬思ったんですが、sketchfabというすごく便利なサービスがありました。しかもwordpress上でリンクを貼るだけで勝手に埋め込んでくれるという至れり尽くせり…

作成

WordPress導入編

まず、自分のサーバーの契約はライトプランというもので、データーベースが一つしか作れません。

blogはスターサーバーの簡単インストール機能を用いてWordpressをインストールし、作成していました。

その勢いでもう一度同じデータベースで簡単インストールをしようと思ったんですが、「空のデーターベースでしかインストールできないよ」みたいなデータが出てあえなく失敗しました。

データーベースをもう一つ作らないかんのか…と思っていたんですが、ググっていたらどうやら一つのDBでwordpressを複数導入できると知りました。

次に既存のblogのDBでの接頭詞を変更しました。今思うとこれはいらなかったですね。接頭詞の変換がされてない所があったりはしましたが解決してちゃんと動いているので良かったです。

WordPressのテーブル接頭辞を変更する方法と注意点 | KA Partner

WordPressの接頭辞を変更する方法をご紹介いたします。引越などにより1つのデータベースで複数のサイトを運営する必要が生じたときはユニークな接頭辞を使用する必要があります。

そのため、Wordpressを手動で導入しました。手動で導入の際もサーバーさんの公式でドキュメントがあって嬉しいです。

上記のような変換の抜けと言ったところで不具合が出たり出なかったりしたのですが、そのたびにググったりしてなんとか解決しました。

RTMのパック作成で必要となるjsonファイルを作っている時のことを思い出していました。(jsonの記入ミスがあるとminecraftごと起動しなくなる仕様でした。地味にツライ)

テーマは、abilewebさんの、minimal-portfolioを導入しました。

テーマはCSSのコードを調べたりして、ストライプ模様を入れたりしました。

最終的にFirefoxのインスペクターツールを見ながら改造したい場所の、CSS上の該当箇所を見つけて「追加CSS」でコードを打つ…と言った流れに落ち着きました。phpに関しては、クラス名などからプラグインフォルダその他場所から関連しそうなphpの中身を見てコードをいじる…という流れになってます。

blogのみの状態から、wp設置→テーマ導入・改造→テスト記事投稿 あたりまでの流れを夜から深夜くらいの時間で作ることができました。

(実際その後の見た目の変更やポートフォリオの追加等で今日までかかっているんですが…)

一晩である程度形になるとは、WordpressもさることながらGoogle先生、またその先の導入から設定まで多種多様な情報を公開してくれる方々の賜物ですね…

お問い合わせフォームは当初せっかくなので独自ドメインのメールアドレスを置こうと考えていました。しかしわざわざwebメール機能みたいなのにアクセスすることがめんどくさく、gmailを置いてもそこから迷惑メールを送られるのが怖く、Googleフォームを設置しました。

初めて使いましたけど、そりゃサークルからネット上の何かしらの募集でも使うなあと思いました。使いやすかったです。

独自ドメインでもgsuiteやoffice365とかに登録すれば相当gmail,outlookに近い管理ができるのかな…?

わかったこと

・ぐぐったらどうにかなった

インターネット様様です…

・大昔1日坊主だったプログラミングの本やRTMのjson作成等の経験が役立った(特にコードからなんとなく意味を理解していじる点において)

記事を管理するDBからhtmlを出力するphp、デザインを指定するcss…みたいな形でウェブサイトは様々なもので成り立っているんだなと思いました。 よく考えつくしできるなあ…

今後の課題

ページ表示が遅いです。特にカスタムフォントあたりをどうにかしないといけないようです。(GoogleのpageSpeed Insitesにそう言われた)

ネットサーフィンする側だとたまに『無駄に凝った動きしおった上に、フォントを変えてて重いんじゃ!』みたいなことがあったんですが(とくにスマホで見てるとき)、いざ作ってみるとカスタムフォント欲しくなりますね…

ページ表示前のゆっくりロゴ表示アニメーションで数秒食われる…みたいなのはまだやったことないですね… 技術習得的な意味ではやったほうがいいんでしょうけど

終わりに/閲覧したサイト様(一部)

本当にメモ書きみたいなものになってしまいました。

最後に閲覧したサイトのリンクを貼ろうと思います(手抜き)

本当は参考にしたサイト様を記録すべきだったんですけど、多分一部履歴から掘り起こせていないかなと…(ごめんなさい)

font-familyの書き方まとめ:CSSでフォント種類を指定しようサルワカ

HTML&CSS初心者の方でも分かるように「font-familyの書き方の基本」と「Font-familyメーカーの使い方」を解説します。

CSS Border Generator

generate border style properties of border color, size and shape around HTML element.

CSSセレクタにワイルドカードや正規表現を使いたいとき | 西沢直木のIT講座

style.cssなどにスタイルを定義する場合、同じような名前を持つCSSセレクタをまとめて定義するため、ワイルドカードや正規表現を使いたくなる場面があります。 たとえば、WordPressで画面に表示するアイキャッチ画像のスタイルを変更する場合を考えてみましょう。

【WordPress】テーブル接頭辞の変更方法 | 車いすなコーダー

WordPressのデータベース内各テーブル名には、その始まりに決まった文字列が付与されています。例えばwp_optionsやwp_postsというテーブル名を例に挙げますと「wp_」この文字列部分をテーブル接頭辞(テーブルプレフィックス)…

WordPressで管理画面のメニューが表示されないとき | 西沢直木のIT講座

なぜか、自分のWordPressサイトに限って、重要なメニューが表示されないとか、制作を依頼した業者から納品されたサイトのメニューが極端に少ないことがあります。WordPressの入門書で見たメニュー構成と全く異なるため「このサイト、壊れてる?」と不安になるかもしれません。 メニューが表示されないのは管理者ではないから