HTML Coder Akira Shibata's Website

My Works


2024年4月制作
アドベンチャーズ ・ウィズ・ フレンズの ホームページ
adventures withfriends. gracepages220 .com

2024年4月制作、相互語学学習のホームページです。 パスワードを使ってメンバーたちのリストが載っているサイトを閲覧できます。


2023年10月制作
SCC 簿記クラスの ホームページ
bookkeeping. gracepages220 .com

2023年10月制作、SCC 簿記クラスのホームページです。 以前制作したスペイン語クラスのフォーマットを再利用して制作したので、 すぐに完成しました。


2023年8月制作
スペイン語クラス アミーゴスの ホームページ
clasedeespanolamigos .gracepages220 .com

2023年8月制作、スペイン語クラス・アミーゴスのホームページです。 以前制作したスペイン語クラスのフォーマットを再利用して制作したので、 すぐに完成しました。


2023年6月制作
春日部 グレイスチャーチの ホームページ
kasukabegrace .org

2023年6月制作、春日部グレイスチャーチのホームページです。 特別な技術を実装しているとは言えませんが、 これまで培ってきた多くの技術が使われています。 当教会のイメージがオリーブであるということで、 オリーブの果実やオリーブ色を多様しています。 整った構造とオリーブのデザインを重視して作りました。


2023年4月制作
キリスト教の団体の インフォメーション サイト
jcoginfo. de-cristo.org

2023年4月制作、日本チャーチオブゴッド教団のインフォメーションサイトです。 毎年5月に大きなイベントが開催されますが、その時の道順などをTop画面に置いています。 しかし、メンバーたちが見るための内部情報(チラシやスケジュールやレクチャーの内容)は、 パスワードを使って見れるようになっています。

このパスワード・ボタンをクリックします。

パスワード入力アラートが出現。

パスワードを入力してエンターキーを押すと、このページに入れます。


2023年2月制作
不動産会社の 女性スタッフの プライベートサイト
www.adrianaskoloda .com

2023年2月制作のアメリカの不動産会社の女性スタッフのプライベートサイトです。 不動産物件を紹介するサイトで、英文もすべて当方の制作です。 フロントは、10枚ほどの写真がぼんやりと映り変わります。 写真が3枚以上の場合はJavaScriptコードが複雑ですが、 HTML方式ではさまざまなプラグインが利用できるのが大きな利点です。
サーバーは、FC2-Rentalserver-Liteという有料サーバーに載せました。 動作も素早く、大きな写真も載せられます。 このサーバーはアメリカ西海岸にあるデータセンターにあります。

普通のカルーセルではなくて、スピナータイプのカルーセルを使いました。このような特殊なカルーセルも、HTML方式では自由に利用できます。WordPressやWixなどのCMSではできないこともできるのがHTML方式の利点です。


2022年12月制作
「Excelで複式簿記をするブログ」のブログ
excelbk. .html.xdomain.jp

2022年12月制作の「Excelで複式簿記をするブログ」のblogです。 これは、レンタルサーバー会社のxserverが運営する無料サーバーに載せました。ドメインは .html.xdomain.jp/ となっています。 無料なので、SSL(暗号化のセキュリティー)は使えず、http:// となっています。この点は無料サーバーのFC2の方が勝っていると言えるでしょう。

中央にブログ本文を記載します。左の枠はこのブログで作成されるたくさんの記事をインデックスで見やすくする予定です。私は経理も専門なので、このような記事が書けるだろうと見込んで始めました。徐々に記事を増やしていきたいです。


2022年11月制作
「スペイン語クラス Puentes de Amistad」のHP
puentesdeamistad .web.fc2.com

2022年11月制作の「スペイン語クラス Puentes de Amistad」のWebページです。 ささやかなホームページですので、この程度なら制作費2万円で承っております。

ささやかですが、ロゴマークを制作しました。色使いや文字の形などは、できるだけヒスパニックっぽいものにしたのですが、どうかな?ともあれ、このようなロゴマークがあるとホームページらしくなり、クリックでフロントページのトップ画面に戻るためのスイッチでもあります。


2022年10月制作
「イワサワ・ミュージック・クラス」のHP
iwasawamusicclass. gracepages220.com

2022年10月制作の「イワサワ・ミュージック・クラス」のWebページです。 タイトルが左側から移動してきたり、 下の各セクションが上がってくるのはJavaScriptによって作りました。 なお、Topイメージは当方の所属するPhoto-ACよりダウンロードしました。

動画をホームページ内に保存しないで、YouTubeにある、 エレクトーン教室の講師自らの演奏を画像とともにリンクさせました。


2022年9月制作
「マナこども食堂」のHP
manakidscafe. de-cristo.org

2022年9月制作の「マナこども食堂」のWebページです。 画面を開くと左上や中ほどにある、料理や食事の絵が動きます。 これはJavaScriptによって作りました。

スマホやタブレットで画面を見ると、メニューがハンバーガーメニューに変ります。 そのハンバーガーメニューをクリックすると、プルダウンメニューが現れます。 さらにその中の「イベント」というアイテムをクリックすると、 さらなるプルダウンメニューが現れます。これらはすべてJavaScriptで制作しました。 プラグインではありません。

簡略地図を作成しました。GoogleMapよりも見やすくなっています。 また、スマホから電話番号のボタンをクリックすると、 自動でスマホの電話機能から電話ができるようになります。

こちらの問合せフォームもFormSubmitをプラグインして作りました。 角を丸めたり、色を付けたりして体裁をよくしています。


2022年8月制作
「長後・美容室LABO」のHP
chogolabo. web.fc2.com

2022年8月制作の「美容室LABO」のWebページです。 TOPページには提携デザイナーさん制作の画像を2枚交互に入れ替わるようにしました。これは1枚目です。

これは提携デザイナーさん制作の2枚目の画像です。提携デザイナーさんて、私の妻です。

このサイトにはクーポンがあり、クリックするとクーポン画像になるというしくみです。この仕組みはJavaScript(jQuery)を用いました。

クリックすると、このようなクーポン画像に変化します。これを店員さんに見せるとクーポンとして使えるというものです。

メニュー・プライスの表には、imageというボタンがそれぞれついています。このボタンを押すと、イメージ画像が現れるというものです。このような仕組みもJavaScriptのjQueryを用いました。


2022年4月制作
「川井勝太郎宣教師を支援する会」のHP
supportkawai. de-cristo.org

2022年4月制作の「川井勝太郎宣教師を支援する会」のWebページです。 ナビバーのメニューだけでなく、話題ごとのインデックスを設けた配置になっているので、 話題インデックスをさらに増やしていくことができます。

ルーマニアのクルージュナポカを拠点とする宣教師なので、 その土地の写真をPexels、Pixta、Unsplash、MorgueFileなどの有料無料素材サイトから探し出しました。

コンタクト・ページには、上部にルーマニアの特別美しい街の画像を載せ、 また、現地のGoogleマップを載せました。


2022年1月制作
「グルーポ・アンデス」のHP
grupoandes. web.fc2.com/

2022年1月制作の「グルーポアンデス」のWebページです。 Grupo Andesの字体はGoogle Fontです。 Topイメージのすぐ下には文字が自動で流れるようにしました。


2021年11月制作
「大槌ジョイフルハウス」のHP
joyfulhouse. de-cristo.org

2021年11月制作の「大槌ジョイフルハウス」のWebページです。 今はJavaScriptにより、サイトを読み込むと、 2つの背景画面がぼんやり交互に入れ替わるようになっています。


2021年10月制作
「春日部ケーナクラブ」のHP
graciaandina. kasukabegrace.org

「春日部ケーナクラブ」のWebサイトは、2021年10月に制作しました。 アンデスの山々を背景に、GoogleFontによる装飾文字を使いました。 画面を読み込むとJavaScriptによって、 文字の位置が変わるアニメーションがあります。

ナビ・メニューでは、項目をクリックするとドロップダウンされます。 BootStrapのドロップダウンメニューをプラグインしています。

いろいろな写真を使っていますが、これらはすべて、 無料画像を使っています。PixabayやPhoto-ACなど、 たくさんの有料無料画像サイトから良い写真を探して利用しています。

お問合せフォームは、通常PHPというプログラミング言語で書かれるものですが、 PHPを使わないで、豊富なプラグインの中からFormSubmitというプラグインを選んで利用しました。