個人サイト制作:サイトマップへ戻る

このサイトのシンボルマークとバナー

これが当サイトのシンボルマークです。

このサイトのシンボルマークとバナー

下にあるバナーでは、この魚マークに透過を施したものを使っています。

fein's personal siteのバナーです

このサイトのシンボルマークとバナー fein

fein's personal site

This site is built using Google Cloud's App Engine.
'fein's portal' is my personal portal site.

https://portal.feinatelier.org/

こんな風にして、当サイトのバナーができました。
もしくは名刺と言い変えてもいい。
魚の画像は私のオリジナルで、他は全てhtml+cssで調整しています。
大部分をhtml+cssとすることで、色合いやグラデーション、余白の大きさも簡単に後から調整可能です。

バナーの画像版

html+cssで調整すると、それなりのデメリットもあります。
このサイトはレスポンシブデザインになっていることもあり、閲覧者のスマホによっては余白が違ってきてしまうのです。
そこで、次のように画像も別途用意しました。

このサイトとポータルサイトのバナー

下にあるのはパソコンで当サイトを閲覧した時のバナーです。
こういうところでレスポンシブデザインの難しさがあると思うけど、この横に長いバナーも…
これはこれで悪くないよね?
せっかくだから飾っておきましょう。

このサイトとポータルサイトのバナー

バナーを活用した年賀状

昔は相互リンクの時などにバナーを使っていたようですが、私としては名刺やロゴのようなイメージなんですよね。
例えば、次のような「Web年賀状」もおもしろいと思います。

あけまして
 おめでとうございます。

ASフィーネ縦長

変化のない年などありませんが、2024年も忙しかったですね。
SNSもアナザーエデンも環境が大きく変わりました。
2025年もいろいろあることでしょう。
今年もどうぞ、よろしくお願いいたします。

banner

私が何者であるかも、明かしてしまったね😆
こういう人物です
でも引き続きアナデンアカウントのままですよ🎵

HTMLとCSSで書かれており、sectionタグで領域指定しています。
年に1度しか使わないものだから、CSSはインラインとしていますね。

サイト制作者について

このWebサイトを書いているのは「fein」という人物です。
不具合の多いX (旧:Twitter) への抜本的な対策として、このWebサイトを作成しました。
簡単に自己紹介をさせていただきます。

趣味やハマっていること
フェードアウト効果の草花写真
略歴というか、人物像
フェードアウト効果の草花写真

学生時代、中二病的承認欲求+買った文房具を使いたいという気持ちから病的な資格魔へ変貌。
例えばパソコンなら、Web開発・ネットワーク・データベース・Office・ITビジネスなどの資格を片っ端から取得しました。
ちなみに文系出身です。
決して褒められた動機ではありませんでしたが、履歴書に書き切れないほどの資格が今の私の暮らしを支えています。
もともと事務職だったのですが、ひょんなことからSE職へ異動となりました。
今は海辺の港町で小さく暮らしつつ、システム管理者してますね。

この個人サイトを作った経緯
フェードアウト効果の草花写真
  1. 社会人生活が落ち着いてからスマホゲーにハマった。
  2. Twitterで遊びながら、Webサイトの下書きをしていた。
  3. Eロン😷が登場してTwitterがおかしくなった。
  4. 超特急で下書き状態のWebサイトを稼働させて逃げ込んだ。

現在は、この個人サイトが私のインターネット上での居場所となっています。
言葉通りの「ホームページ」となります。

使っているツールと資格者証について

モロに合格証書とか貼っちゃうとアレだから、こんな感じですよーという体験談っぽく書いて済ませましょうか。
プライベートのパソコン遊びは基本原則として全てクラウドなので、せっかくだからさ。
「セキュリティ+Microsoftのクラウド+Googleのクラウド」という形で、一気に資格取得しちゃいました🧑‍🎓

情報セキュリティマネジメント

上の画像は 情報セキュリティマネジメント の合格証明書(の写真撮影したもの)です。
KADOKAWAがランサムウェアで大きな被害を受けたニュースなんかもあったし、インターネットで楽しく遊び続けたいので。
情報セキュリティの復習もしてみたかったのですよ。
ちなみにWebサイトの著作権関連も試験範囲です。
そういう法律や業界のルールとかも聞かれるから、受験する人は気を付けてね!

microsoft365

上の画像は Microsoft 365 Certified Fundamentals の資格証明画面(の見本)です。
文書を作るのはMicrosoft 365でやります。
Microsoftのクラウドも凄い機能ですよ?
こちらを使って個人サイトを作っていく選択肢も、十分にアリだと思います。

googledigitalleader

上の画像は Google Cloud Certified ‐ Cloud Digital Leader の合格通知メール(を飾ったやつ)です。
今後も静的Webサイトをいろんな形で拡張していきますが、Google Cloudのソリューションを活用する方向性は注目すべきものです。

ちなみにこのWebサイトの下のほうに、サイトの作者名とツール名および合格者専用のデジタルバッジが表示されています。
CIWというのは、Certified Internet Web Professionalのことで、米国の資格です。
Internet Business、Site Development、Network Technology の3試験に合格すると Certified Internet Web Professional Associate という資格になります。
ただ、今は少し体系が変わっているようですけどね。

crow_feather

たまたま綺麗な状態を保っている羽根を見つけたから、拾ってきました。
カラスの羽根にはスピリチュアル的な意味があるみたいですよ?
カラスは昔から神聖な存在とされていますよね。
神による庇護、予知能力による幸運、成功の前兆…我が家の幸運の印として、この羽根は大切にしようと思います。
あるいは私の資格取得がうまくいったのも、何かの御利益だったのかもしれません。

SNSポリシーというか、余談
フェードアウト効果の草花写真

Eロン😷がTwitterをXに変えてからというもの、スパムアカウントが増えました。
あのようなスパムアカウントは相互フォローの関係性を利用して次々とフォロー数を増やしていきます。
ゆえに、スパムアカウントにフォローされたらブロック等の手段で排除するのが賢明と言えます。
しかし、日々Twitterを使う中で自分のアカウントに来るフォロワーを100%把握するのも難しいものです。

私はスパムアカウントを気付いたときにブロックしていますが、そのような作業をフォロワーさんに求めることはありません。
分かりやすく言うと、「私のところにスパムアカウントが来るから、あなた達もスパムアカウントをしっかりブロックしておきなさい!」などということを求めてはいません。
けっこうな負担を強いることになるからね。

フェードアウト効果の草花写真

数日間Twitterをログアウトすることもあるでしょうし、四六時中Twitterに貼り付いている人もいません。
各自の生活スタイルがある中で、スパムアカウントの完全排除は現実味がありません。
スパムの定義というのも難しいものがありますが、話題になることが多いので。


サイトマップ

全ページをリスト化したサイトマップも用意していますが、けっこうなページ数があります。
下記の「カテゴリー分けサイトマップ」のほうが使いやすいでしょう。

アナザーエデン関連ページ・サイトマップ

アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成

個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア

ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。