ボクステ公式ブログ

投稿年月
2024年
カテゴリ
当ブログにカテゴリを追加しました
昨日3月13日、各記事の最下部に「カテゴリ」を追加しました。例えば当記事では「Web開発」となっております。リンクをクリックすることで、同じカテゴリを持つ記事の一覧が表示されます。

現在は、1記事-1カテゴリですが、今後1つの記事に複数のカテゴリを付すかもしれません。タグ代わりにもなります。

その他変更点は以下の通りです。
・「投稿年月」ごとに記事が見られるようになった
・ 前後の記事へ移動できるようになった
・ ブログ一覧を10記事区切りでページ分けした
・ ブログ内に含まれるリンクを青文字からオレンジに変更した

どれも、「ブログ」という体裁としては基本的な項目ですがそれすらなかったものを実装しました。

HTMLベタ打ちとCSSにより制作されているWebページであるため、phpやデータベースを用いた他のブログサービスとは異なり全手動となっております。

phpで自動的にページを分けるページネーションや、記事の構成項目をデータベースから呼出し整列させる技術ならすでに持っているのです。それは手書き短文投稿サービス 「手記の森」 でも使われております。

しかし、バックエンド(裏=サーバサイドで動く仕組み)のないことによるエラーの少なさ、構築の気軽さを優先してHTMLベタ打ちでやっております。
デザインを他のページと揃えることが容易ですし、全てbocsteドメイン下で動かせるのも利点です。
今後、特殊形態の記事、固定記事、記事外へのバナー貼り付けが必要、ということがあればそれらを自由に配置できます。

それ以外は全てデメリットと言っても良いのですが。

現在のメイン業務であるゲーム制作がひと段落着いたら、この素朴なブログを本格的に作り直すかもしれませんし、既存ブログサービスを利用してそこだけ独自ドメイン外で動かすかもしれません。

カテゴリ Web開発
エックスサーバーで引っ越し先の新サイトURLにリダイレクトする方法
【リダイレクトとは何か】

サイトのドメインやURL、レンタルサーバーなどを引っ越した際、古い方のURLにあったアクセスをそのまま新しいURLに転送することです。

また、上記のような恒久的な転送の他、メンテナンス中表示など一時的な転送もリダイレクトと言います。

【エックスサーバー(Xserver)でリダイレクトする具体的な方法】

以下、エックスサーバー以外のサービスをご利用の方には参考になりませんのでご注意下さい。

1. エックスサーバーで「Xserverアカウント」にログインし、「サーバー管理」からサーバーパネルを開きます。

エックスサーバーにログイン
エックスサーバーにログイン

サーバーパネルを開く
サーバーパネルを開く

2. サーバーパネルの「ホームページ」から「サイト転送設定」を開きます。

サーバーパネル画面
サイト転送設定

3. リダイレクトを行う「元」の、または、「古い」「移転前の」ドメインを選択します。
メンテナンスなどの一時的転送であれば、通常表示されるページが含まれるドメインを選択します。

ドメイン選択
リダイレクト元のドメインを選択

4. 既に存在するリダイレクトの一覧が表示されます。

リダイレクト設定一覧
リダイレクト設定一覧

リダイレクト元ドメインの始まりは「http://」固定で、「https://」ではありませんが、両方分が同時に設定されているようです。

5. 「リダイレクト設定追加」のタブを開き、「アドレス」にリダイレクト元を、その下にダイレクト先URLを入力します。

リダイレクト設定追加
リダイレクト設定追加

ドメイン単位のリダイレクト先は「https://●●●●●.com/」と最後に/を入れた方が良さそうです。
リダイレクト元、先ともに、ドメイン以下も細かく指定できます。

「ステータスコードを選択する」に☑を入れると、コードを選べるようになります。
サイト移転などの恒久的な移動なら「301」、メンテナンスのための一時的な移動なら「302」を選択し(画像には入っていませんが)「確認画面に進む」 を押して問題なければ確定してください。

以上、エックスサーバーでリダイレクトする方法でした。リダイレクト先はエックスサーバーでなくても大丈夫なはずです。

この記事を書いていて、「サーバー管理」のボタンを押すと「サーバーパネル」が開いたり、「サイト転送設定」を押すと「リダイレクト設定」ページが開いたりと用語の統一されていないことが気になりましたが、 かく言う私も本記事内で「転送」「リダイレクト」「移動」を全て使っていましたし、画像内の文字表記もバラバラでございました。一部は揃えましたがくどくなるので全部「リダイレクト」に統一することはしませんでした。

カテゴリ Web開発
Google検索結果にサイトのアイコン(ファビコン)を出す方法
【ファビコンとはなにか】

ブラウザのタブに表示されるボクステ株式会社のアイコン
ブラウザタブのファビコン

グーグル検索結果に載ったアイコン付きのボクステ株式会社の公式サイト
Google検索結果のファビコン

Webブラウザでサイトを閲覧した時のタブや、検索サイトで検索した時の一覧でサイト名の左側に出るアイコンをファビコン(favicon)と言います。お気に入りアイコン(favorite icon)の短縮語です。

ファビコンは、語源通りPCでのWebブラウザ「お気に入り」一覧や、iOS上のお気に入り(スタートページ)などにも表示されます。

【ファビコンの作り方と設置方法】

ファビコンを作るのに便利なのは、ファビコン一括生成Webサービスに画像(png、jepg、gifなど)を1枚アップロードすることでしょう。

以下のリンク先は外部、かつ、他社様のサイトです。(プライバシーポリシーについては運営会社様のサイトでご確認下さい)

様々なファビコンを一括生成。favicon generator

PC、iOS、Android用のファビコンを様々な大きさで一括生成できます。また、合わせて<head>と</head>との間にコピペできるmetaタグとmanifest.jsonも生成されます。

htmlファイルだけでなくphpファイル等でも内部にhtml記述があって<head>タグがあれば同じように記述できます。

当サイトの場合ですが、生成されたパスに"/apple-touch-icon-57x57.png"とある場合、最初の/を消して"apple-touch-icon-57x57.png"とした方が安定して表示されます。

一括生成された画像群はドキュメントルート(サーバー上で「index.html」が置いてあるのと同じ、ドメイン内「public_html」ディレクトリ)にバラバラのまま直置きしています。

(ローカルホストでのサイト開発時にXAMPPを用いているならhtdocs直下がドキュメントルートに該当)

【ファビコンを設定したのに反映されない時の対処法】

ブラウザの設定で古いキャッシュ(インターネット一時保存ファイル)が残っていてファビコン設定前の状態で表示されている可能性が高いです。

【キャッシュの消し方】 (Google Chromeの場合)

ブラウザ画面右上などにある「縦に点が三つ並んだアイコンをクリック」>「設定」>「プライバシーとセキュリティ」>「閲覧履歴データの削除」>☑「キャッシュされた画像とファイル」>「データを削除」

【Googleの検索結果だと地球アイコンになってしまう】

ファビコン未設定 デフォルトの地球アイコン
Google検索結果の地球アイコン

ここからが本題でございますが、結論から申しますと、拡張子が.icoであるファビコンのURLを相対パスではなく絶対パス(http://https://から始まるもの)に変更すれば検索結果にも反映されます。

 
<head>
(他のコード類)
  <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="https://●●●●●.com/favicon.ico">
  <link rel="icon" type="image/vnd.microsoft.icon" href="https://●●●●●.com/favicon.ico">
  <link rel="icon" href="https://●●●●●.com/favicon.ico">
(他のコード類)
</head> 
    

上記は https://●●●●●.com/index.htmlファイル内のヘッダー部分です。 .ico以外のパスについては変更していません。●●●●●.comは、ドメイン名です。●●●●●.ne.jpや●●●●●.co.jp等でも同様。
【Googleの検索結果に反映させるためには独自ドメインが必要?】

不要のようです。レンタルサーバーの初期ドメイン(例:xs695261.xsev.jp)にあるサイトでも、metaタグ内の記述を絶対パスに変更したら独自ファビコンが表示されました。

当サイトを作りたての頃、「地球アイコンから独自ファビコンに変えるためには独自ドメインが必要なのではないか?」と考えていましたが、実際に独自ドメインbocste.comを取得し、また、GoogleSerchConsoleでURL検査をし、 インデックスに登録されても地球アイコンのままでした。そこで、ファビコン(.ico)のmetaタグを絶対パスにしたら解決したのです。

現にこの記事を書いている途中まで、独自ドメイン取得前のxs695261.xsev.jpにある運営サイト「手記の森」は地球アイコンでした。(現在はbocste.comにリダイレクトしている)

Google検索結果で地球アイコンになっている旧「手記の森」
地球ファビコンの旧「手記の森」

metaタグを絶対パスに書き換えた後は次のようになりました。

Google検索結果でボクステアイコンになっている旧「手記の森」
独自ファビコンになった旧「手記の森」

ただ、最初にbocste.comにあるボクステのファビコンをリンク先に指定してしまったため、Googleではボクステアイコンになっています。
時間が経てば、xs695261.xsev.jpに置いた「手記の森」専用ファビコンに変わるかもしれません。

今でも「手記の森」で検索した結果の中に地球アイコンの物がございます。こちらは、http://から始まるもので、開発初期にテストしていたものがキャッシュとして残っているようです。

そのためか、このサイトにアクセスしてもbocste.com下にある最新の「手記の森」にはリダイレクトされません。こういった古いページを消すリクエストも可能とのことですがxs695261.xsev.jpはGoogleSerchConsoleに登録していないのでやりにくいですね。

カテゴリ Web開発
スマホ・タブレット用のレイアウトを変更しました
スマートフォン・タブレットから当サイトへアクセスした場合、上部のメニューバーだけでページの約3分の1を占め、本文の表示領域が圧迫されていたため、レイアウトを変更いたしました。

PCからのアクセスでは、変化がございません。

ここで、当サイトがHTMLとCSSのみで記述された力業プリミティブファイル群である弱点が出ました。

phpを用いるなどしてナビゲーションバーを共通化していれば、1ページ修正するだけで全ページ修正できていたのです。 しかし、当サイトは、ブログの1エントリーごとにhtmlページを作成してhead内記述もハイパーリンクも手動で変更するような荒々しい作りをしております。

このような完全静的サイトですと一括で修正できません。

最初にナビゲーションバーやヘッダー・フッターは共通部品とし、また、ブログも編集パネルにログインした上でフォーム入力にて記事の作成・編集ができるつくりにしていれば、 現在発生している様々な手間が省けていたのです。

カテゴリ Web開発
独自ドメインを取得しました
独自ドメイン「bocste.com」を取得し、

ボクステ株式会社 公式WebSite
手記の森(無記名版)
手記の森ID
「〇〇で検索」ジェネレーター

を新ドメイン(bocste.com)に引っ越しました。

大まかな手続き順

・新ドメイン「bocste.com」を取得
・FFFTPで旧ドメイン「xs695261.xsrv.jp」からダウンロード
・絶対パスに含まれる「xs695261.xsrv.jp」を「bocste.com」に一括置換
・FFFTPで新ドメイン「bocste.com」にアップロード
・Tere Tremでシンボリックリンクを張る
・旧ドメインから新ドメインにリダイレクト設定

今回は同じレンタルサーバー内で独自ドメインの取得とサイト引っ越しを行ったため、データベース(MySQL)には変更なし、接続設定も同じままで無事に動作しました。

独自ドメインに引っ越してよかった点

・URLが書きやすく覚えやすくなった
・レンタルサーバー丸出しでなくなり信頼性アップに期待
・一見して同じ運営のサービスと分かる

なぜもっと早く独自ドメインの取得を行わなかったのか

・Whois(ドメイン登録者情報)で住所・氏名・電話番号を公開したくないので法人設立まで待った

後で知った事実

エックスサーバーが「Xserver.Inc」名義でWhoisを代理公開してくれるから無用な心配だった

カテゴリ Web開発