暇人社会人の徒然日記

あまり暇ではないですが、徒然なるままに日記を書いています。 Yahooブログから移転しました。

カテゴリ: ホームページ関連

ホームページ更新関連で備忘録として残しておきます。
私と同じく弱小ホームページをお持ちの方は、何か参考になるかもしれません。

ゲーム攻略の歩き方
https://gamekoryaku.okoshi-yasu.net


最近サイトのレスポンシブ化にお熱な私。
現在のサイトは3カラム構成。
メインコンテンツの中央のカラムを表示、左右のカラムを非表示にすることで、レスポンシブ化を狙っていました。当然、メインカラムや親のdiv要素の表示幅は100%以下に設定。

しかし、スマホで見るとなぜか横が収まりません。
横幅が少し表示画面からはみ出しているようです。

cssとにらめっこすること数十分。
見つけました。
bodyタグにwidth 100%の指定が入っていました。
謎です。意味不明です。
なんでこんなことをしたのか…思い出せません。

この表記を削除したところ、めでたくはみ出しがなくなりました。
何が言いたいかというと、人の記憶はあいまいなので、
やはり備忘録は必要ということです。

突然、ふと攻略サイト以外にもサイトを作ってみよう!と思い立ちました。
やるならアフィリエイトで儲けたいですよね笑
そして今はやりのwordpressを使ってみたい!

ということで、まずは準備段階。
ドメインの取得先とサーバーをどうやって選んだか書いていきます。



ドメインの取得先

結構悩みました。
決め手としては、ドメ
インを取得するための費用更新費が重要になってきます。
なるべく安いところで購入したいと探していたら、
Value-domainで期間限定セールをやっていました。
「.com」が646円(税込)で購入できるので、即決定。
更新費も1400円ほどで特に他と変わらないので問題ありません。



サーバー選択

ではサーバーはどうするか?

Xrea(エクセリア)Coreserver(コアサーバー)で悩みました。
この2つはValue-domainの系列なのでそのまま簡単に手続き可能です。
両方ともwordpress対応無料SSL対応
かつ独自ドメイン可、SSDサーバー、初期費用無料などメリット多数。

Xreaは無料プランがあるものの、サーバーが不安定など評判はそこまで良くない様子。
無料プランは広告も出るのでちょっと微妙。

Coreserverは有料プランしかないものの、月額は198円から。
一番安いプランでもwordpressを始めるにあたって不足はなさそうでした。

とりあえずCoreserverのminiプランの1か月無料お試しをスタートしてみました。


他の選択肢

・Xserverは独自ドメイン無料だが、月々の費用が1000円ほどと高い。
・他のサーバーはHDDサーバーであったり、安いプランだとwordpress非対応だったりと微妙。



悩んだ結果、いい選択が出来たと思います。
何にも考えずXserverを選んでいたら、きっと維持費で後悔するでしょう。

作ったサイトはここのブログでも紹介したいと思います。

ホームページ更新関連で備忘録として残しておきます。
私と同じく弱小ホームページをお持ちの方は、何か参考になるかもしれません。

ゲーム攻略の歩き方
https://gamekoryaku.okoshi-yasu.net



Google serch consoleでカバレッジの項目を見ていると、
重複しています。ユーザーにより、正規ページとして選択されていません」
と表示されていることに気づきました。

詳しく見てみると、
httpから始まるサイトとhttpsから始まるサイトが重複しているようでした。
httpsはhttpと比べて安全に接続できる?ようです。


現在私が利用している忍者ホームページを見てみると、
去年からhttpsに対応した旨が掲載されていました。
知らなかった汗

『忍者ホームページ』SSL(https)対応のお知らせ

https://www.ninja.co.jp/information/all_category/topic/12408/




てなことで、まずはhttpsで自分のホームページに入ってみました。
するとアドレス欄に、
「このページは承認されていないソースからのスクリプトを読み込もうとしています」
の表示が!

どうやらjqueryの読み込み部分が、
<SCRIPT src="http://code.jquery.com/jquery-2.2.4.min.js"></SCRIPT>
と記述しているのが原因らしく、
<SCRIPT src="https://code.jquery.com/jquery-2.2.4.min.js"></SCRIPT>
に書き換えたところ、だいたい上手くいきました。

加えて、忍者ツールのアクセス解析用タグのアドレスがhttpになっていたため、
ところどころ修正が必要なようです。


httpsに対応できるようにまずは変更し、
その後Google serch consoleで確認したいと思います。

ホームページ更新関連で備忘録として残しておきます。
私と同じく弱小ホームページをお持ちの方は、何か参考になるかもしれません。

ゲーム攻略の歩き方
http://gamekoryaku.okoshi-yasu.net



Google Search Consoleに登録してみました。
すると、お前のサイトはモバイルユーザビリティに欠けていると言われました。

「ビューポートが設定されていません」

ビューポート?なんじゃそりゃ?と思い、ググりました。
こいつを設定していないとスマホで見たときに、
スマホ画面の横幅に合わせて縮小表示されるようで。

とりあえずheadに、
<META name="viewport" content="width=device-width,initial-scale=1">
をぶち込みました。
これでこの問題は解決。

後は、「テキストが小さすぎる」、
「コンテンツの幅が画面の幅を超えている」、
などを指摘されています。

今時はレスポンシブデザインでスマホの画面に合わせて、
サイトが最適表示されるように設定するらしいです。

とは言えども、
スマホ用のサイトの最適なwidthについては、
みなさんバラバラなご様子。

とりあえず、うちのサイトは、
スマホは750pxで固定にしました。
攻略サイトという性質上、
大きな表があるので横幅はそれなりにほしかったです。

その代わり、
スマホでは左のカラムと右のカラムは非表示にしました。
メインコンテンツのみを載せています。

試行錯誤でやっていますが、
こんなんでアクセス数が伸びるのかはわかりません…。


ホームページ更新関連で備忘録として残しておきます。
私と同じく弱小ホームページをお持ちの方は、何か参考になるかもしれません。

ゲーム攻略の歩き方
http://gamekoryaku.okoshi-yasu.net



戦場のヴァルキュリアの攻略ページを更新しました。
更新したのはtitleタグの内容とmeta descriptionの追加です。


titleはそのページの内容を反映するようにしました。
ポテンシャル一覧を掲載している場合は、
titleの最初に「ポテンシャル一覧」を表記しました。

meta descriptionは今まで入れていなかったのですが、
検索時にどんなサイトかわからないため、追加しました。


これらは検索上位に出てくる攻略サイトさんを参考にしました。
が、SEO対策として効果があるのかはわかりません…。

本当は内容を充実させることが大事なのですが、
今回は小手先の変更を優先しました。
その他細かいところを修正しています。

↑このページのトップヘ