ホームページ作成日記
2018年
1月26日
もう１つのサイト 50km旅行 in 美濃 の話ですが、今まで非常に原始的なHTMLしか使っていなかったこのサイトにもとうとう、最新のWeb技術を導入しました。
そう！ BBSです！！
どこが最新のWeb技術だ！！（笑）
僕は 1995年～2005年 くらいのパソコンが普及し始めた当時の、古き良き時代のホームページにあこがれがあり、今までその時代っぽいデザインとかを意識してきました（このサイトのトップページは、棋書ミシュランというサイトを参考にしてます）。当時のホームページっぽい要素をさらに取り入れるため、BBSの設置に至ったのです。
みなさんも、ぜひ"カキコ"してください！
2016年
8月28日
結局ワードプレスも諦めて、非常に簡単な構成でブログを作り直しました。
include しか使わないという、素人がよくやる（らしい）やつです（笑）
まぁ一応これで個別ページをつくるって言う目的も達成できました。ついでにページ全体的に作り直したので、URLがいろいろ変っています。
8月22日
PHPメチャクチャ難しい。予想以上に難しい。トホホ…。
なんとかWordpress以外の方法で楽に作れないかと思ったけど、ちょっと無理そうですね。てかそもそもすでにHTML+CSSで原型があるんだから、これをWordpress化しちゃった方が早いみたいです。やっぱりWordpressを勉強するって結論になるんですねー。
すでに原型がある自分には、昨日のサイトはいまいちみたいなので、こっちのサイトで勉強します。
8月21日
PHPを勉強し始めました。理由は、ブログの個別記事を表示できるようにしたいからです。
このへなちょこホームページにも少ないながらも検索流入があり、その半分くらいはブログに引っかかってくれているようです。別にアクセス数を増やすつもりはないのですが、下手クソなりに週に1回くらいは頑張って書いているので、せっかくだから読んでほしい（特にブログ）。それで、検索流入で来てくれる人のためには、ブログの個別記事があった方がいいですよね。でも、今はサイトの構成上、ブログ記事の個別ページを作るのは厳しい。やっぱりHTMLだけだと限界があるのです。
そういうわけで、PHPをやってみます。ちょっとHTMLとは全く別物のようなので大変そうなのですが、1週間あればブログの個別記事くらいなら作れるんじゃないかな？って高をくくってます。まぁできなかったとしても、いつかPHPの知識は役に立つでしょう。
使っているのはこのページ。順番にやればPHPのことはマスターできる、という言葉を信じて…。
6月3日
スマホ対応頑張ってます。Syncer ってサイトのこのページがめちゃくちゃ分かりやすいので、このページを見ながら作り直してます。最初の頃はHTMLのことを全く知らずに行き当たりばったりにやってたので、結構無駄な記述が多かったのですが、全部イチから作り直しているので全体的にスマートなHTMLになりつつあり、一人で喜んでます。
まずはブログの方から。スマホだと右カラムが下に来るようにしました。一晩で完成～！
本ホームページの方も作り直さなければ。
→ 翌日、スマホ対応完了しました！！ヽ(･∀･)ﾉ
5月9日
今までほとんど放置していた「将棋」のページ。僕が高校生の時に作った詰将棋の画像を貼っていただけなのですが、「駒を動かして答えを見れるようにしたいな」と思い、Flashを設置してみました。
ボタンを押せば、一手一手進めることができます。
将棋界では有名な柿木の将棋ソフトウェアの「Kifu for Flash」を使ってます。初めてのFlashだったから仕組みがよく分からなかったですが、なんとかできました。
本当はPHPとかJavascriptとかFlashとか知っておいた方がいいとは思うのですが、そこまで勉強しているとキリがないので、必要に迫られるまでは放置します！
4月10日
トップページに戻るとhttp;//shibayamatakeshi.com
ではなく
http://shibayamatakeshi.com/index.html
になってしまう問題がありました。どうやら、この二つは同じページなのに、別々のものとして認識されてしまうらしいです。
「日々これMuse」ってサイトのこの記事 と 「教えて!goo」のこの質問 を見たら解決しました。
特に「教えて!goo」の解答No.3については言及してるサイトが他にあまりなかったので、助かりました。
こんな報告、のイチイチ書く必要あるかの？って感じは否めませんが、久しぶりに仕様をいじってテンションが上がっているので、書かせてください(*´ー｀*)
そういえばこの前、フォントを「メイリオ」に変えました。
さすが「メイリオ」って名前は「明瞭」から来てるだけあって、非常に読みやすいです。
自分でフォントとか気にしだしてから気づいたけど、このフォント使ってるサイトって結構多いですね。
3月29日
昨日も書いたように、ちゃんとブログ作った方がいいと友達（別に隠す必要ないので、航平さんです）に言われたので、作りました！これで Livedoor Blog からは完全移行です。
こちらからどうぞ！
カ、カッコいい…
こっちは癒し系のデザインにしたので、ブログの方はシックな大人な雰囲気にしました。
こうやって、緩急を使い分けられる男はモテますからね～（こういうことを言っちゃうところがモテない原因だと自覚してますorz）
本当はもっと細部のデザインを詰めたかったのですが、細かいところはそんなに見てる人多くないと思うので、とりあえず公開してこれから少しずつイジります。
それと、今日朝起きたらグーグル先生からメールが来てて、僕のホームページが adsense の2次審査を通ったらしいです。マジかwww こんなへなちょこサイトが審査通ると思ってなかったよ。
以前に adsense のことを調べてたら、最低でもページ数は20は必要とか、文字の量が大事とか書いてあったから慌ててブログを移管してたのに、その前にＯＫがもらえてしまった。ラッキーなのかアンラッキーなのか。
これからは、こういう広告をサイトの好きなところに出せるようになりました。
でも正直言うと、この広告があるサイトって安っぽく見えるんですよね～。品が下がるって言うか。
別にそんなにお金が欲しいわけじゃないし、あんまり設置しないと思います。せっかく審査を通してもらったから、もうある分はそのままにするけど。
3月28日
友達に「ブログやるなら広告が出るところはやめた方がいい」と言われたので、ライブドアブログから自分のサイトへ移している最中です。とりあえずこんな感じになりました。
うーん。これだと読みにくいぞ。あんまり「じっくり読んでもらおう」って雰囲気ではない。
ライブドアブログの方が、文字のフォントとか、レイアウトとか、背景の色とか、全体的にしっくりくる感じがする。
ブログ用に、新しくデザインのページを作ってしまおうか。それかもういっそのこと、ブログだけ Wordpress にしてしまおうか。また色々試してみます。
…と書いた直後にお風呂を入って瞑想していたら、ブログ用のページのデザインが頭に浮かびました！
今から一晩かけてでも作りたい！
他にもやらなきゃいけないことがあるんだけどな……ま、いっか(笑)
とりあえずヘッダーだけは作りました
無駄にカッコいいぜ！！
3月26日
練習のためにWordpressを設置したら、なんかいろいろおかしなことが起きて1時間くらい対応に追われてました。どうやらWordpressの自動アップロードと、僕がやってる手動アップロードの足並みがそろわなかったみたいです。完全にチグハグで、思ったようにデータをアップロードできなくなりました。
万能薬「パソコンを再起動」すら効果なしだったから、もう大変。
結局、いつも使ってるのとは違うアップロードのソフトを使って無理矢理足並みをそろえたら、なんとかなりました。ふー。よかった。
結局 Wordpress は諦めました。また気が向いたら挑戦します。
それと昨日、TOEICのページを作りました。
問題集の紹介の所にアマゾンへのリンクを貼ったので、ついでにアフィリエイトやってみようと思います。
別にお金を稼ぐのが目的ではなく、「どうせホームページ作るなら、アフィリエイトくらい知っとかないとね」くらいの軽いノリで。
が、よくシステムが分からない…。
GoogleのAdsense と Amazon アフィリエイトの違いって何？
分かりやすく解説をしてるサイトもあるんだけど、「月一千万円」とか言ってるから怪しいなー。なんとなくあのサイトの言う通りにやりたくない。
色々見たところ、とりあえずはAdsenseがいいらしいので、これから登録とかして貼ってみます。うまくいくといいな～。I wish I could
3月21日
トップページですが、こだわりだすとキリがない！！ということで、もう見切りをつけて簡単なデザインにしました。
いい加減見た目だけにこだわるのはやめて、中身の方に重心を移したいと思います。
文章も下手ですし、人のためになるような内容が書けるかどうかわかりませんが
お付き合いいただけると嬉しいです。よろしくお願いします。
お問合せフォームを設置して、「最低限これだけはやりたい」ということは一通り終わったように思います。
本当はPHPを勉強したかったのですが時間がかかりそうですし、とりあえずテンプレをコピペして問い合わせフォームの設置は出来ました。
また必要に迫られたときに勉強したいと思います。
3月18日
今日はトップページの写真を撮るために、本棚のものを1回全部どかして（意外と時間がかかった）、モノを配置して、撮ってみました。そのあと、簡単な編集も終わり、とりあえず完成したのがこちら。
センスない！なんか思ってたのと違う！（泣）
自分としては、なんていうか、こう、もっと幻想的で、ごちゃごちゃしてる中にもキラッと光る美しい秩序が見え隠れするような、頭の中ではそういうイメージだったのに。
全然違う！(泣）
この写真をトップに持ってくるのは、なんかいやだなー。どうしよう。
それと、グーグルアナリティクス埋め込んでみたら、ちゃんと作動してくれました。よかった！
意外とアクセスしてくれてる人が多いみたいでありがたいです。まぁ、半分近くは自分なんですけど。
でも、アメリカからのアクセスが多いのはなんで？(笑)
もしかして俺の命が狙われてるのかな？←スパイ映画の見すぎ
それにしても、グーグルアナリティクス難しいっす。噂には聞いてたけど、ここまで分からないとは。
とりあえず「セッション」と「PV」の違いを理解しないと。
それと、どのページからここに来てくれてるのか、リンク元も分かるようにしたい。
3月17日
新しいトップページ ver.1 が完成しました！( ´∀｀)人(´∀｀ )
文字をクリックすると、ちゃんとそのページに飛びます！
昨日ぶち当たった「map要素」「area要素」ですが、ネットで調べてみたら結構簡単でした。
たったの4時間で終わりましたよ（最近時間の感覚が狂ってきてます）
こうやって、勉強したことが目に見えて反映されるって、いいですね～。
本当は、背景の本棚はイラストではなくて、本物の本棚の写真に変えたいので、
ここで身につけた生かした知識を使って、明日以降は背景を写真に変えたいと思います。
それと、グーグルアナリティクスを埋め込んでみました。
が、よく分からない！(´；ω；｀)
この埋め込み方で正しいのかすら、結構怪しいです。
あと、背景画像変えましたー。フリー素材 今日もわんパグってサイトから、かわいい犬の画像を頂きました。ありがとうございました。
3月16日
昨日ペイントで作った「完成イメージ図」を目指して、新しいトップページを作っています。
しかし難しい！ 「写真の一部をクリックできる」っていうのは、難易度が高いらしい
とりあえず、今の自分が持ってる知識でできないか試してみました。
途中経過↓
ここで問題発生！
「自己紹介」などを囲んでいる四角ですが、「画面の左からこれだけ」という設定をしているため、画面の大きさによってズレてしまうらしい。ということは、自分のパソコンでは成功しても、違うパソコンで見ると本棚と一致しない！
なるほど。それじゃー、ちょっとこの方法はあきらめるしかないよねー（ここまで3時間）
ネットで調べてみると、map要素とarea要素を組み合わせればイケるらしい。ふむふむ。
ってどっちも知らねー！！( TДT)
またイチから出直してきます。はい。
3月15日 進展を見る
とりあえず、昨日画像を中央に配置できない理由が分かりました。
align:"center"; が間違いで
align: center; が正しいんですね。
これが分かるまでに１時間半もかかってしまったよ。トホホ。
まぁ、HTMLなんてこんなもんですよね。
もう絶対に同じ間違い繰り返さないぞ！
見やすくするのとHTMLの練習を兼ねて、ちょこちょこHTMLをいじっているのですが、そろそろ基礎は身についたと思います。
他のサイトを見ても「多分こんな感じでHTML打ち込んでるんだな」って見当がつくようになりました。
そろそろオリジナリティーを出していかなければ。
というわけで、トップページのレイアウトを大幅に変えてみたいと思います。HTMLの練習も兼ねて。
いくつか案はあって、例えばこんな感じを考えています。
僕が本当に使っている本棚の写真を撮って、それをクリックできるようにする、と。
ただ、どうすれば作れるのか、今の僕のHTMLの技術ではわからないので、また色々調べてみたいと思います。
3月14日 進展を見る
上の部分（ヘッダー）に画像を配置して、これをクリックしたらトップページに行けるようにした。
が！画像が中央に来ない！なんでだ…。
テキストシートに「align:"center";」って書いてるのに…。
これは明日以降の宿題に。
3月13日
飲み過ぎて頭が痛いので進展なし（レモンサワー２杯orz)3月12日 進展を見る
3日で作るホームページ～中級編～から、サンプルをダウンロード。
サンプルをパクりながら左メニューを作ろうと悪戦苦闘。
しかし、スタイルシートに分からないタグが多すぎる・・・
3月11日 進展を見る
・「スタイルシート」をつくることで、背景の色を変えられるようになる。
・ファビコン（タブの左に表示されるアイコン）を作成。
" alt="ファビコン" >・HTMLからXHTMLに変更。違いがよくわからないけど、仕様が若干違うらしい。
こういうのは後になって全部書き換えるのは大変だから、最初のうちにやっておかないと。
3月10日 進展を見る
・サイトを立ち上げるため、ロリポップでサーバーを借り（250円/月＋初期費用1500円）、ムームードメインで自分のURLをゲット（842円/年）。FFFTPをインストール
・おまじないの部分はネットからコピペしつつ、中身の部分は「改行」「水平線」「見出し」「外部リンク」だけを使った簡単な構成。
・写真の挿入の仕方をネットで勉強
メインコンテンツ
