WordPressとXFreeで無料でWebページを作ろう！

2022年8月28日 21:37

この度、Webページを開設いたしました。

色々なメディアを更新しているので、案内板的にWebページが欲しいなと思っていました。

あと、GooglePlayにアプリを掲載するときに、プライバシーポリシーを掲載するWebページが必要なのも理由です。(今までは、昔開設して放置しているブログのURLでごまかしていましたが…)
以下、簡単に解説までの流れと参考にしたページを紹介していきます。

１．無料サーバーに申し込む

とりあえずで作るWebページなので、無料で作りたいところです。

XFreeでは、無料でレンタルサーバを使用することが可能です。

使用感としては、やはり無料だからか、ページを更新するときに遅かったり、接続エラーが出てしまうことがあります。それでも、Webページはできましたので、初心者には十分じゃないでしょうか。
なお、Xfreeは更新を3か月おきに行う必要がありますのでご注意ください！

無料のWeb制作ソフトウェアのWordPressを使って、Webページを作っていきます。

今回は以下の記事を参考に作りました。

記事では「Simplicity」というテーマを使用していますが、現在は後継のテーマの「Cocoon」がありますので、そちらを使います。
あとは、基本的には記事のとおりにやっていけば良いです(ﾏﾙﾅｹﾞｰ)。

ただし、補足事項や注意点もありますので、以下に記載していきます。

テーマ「Cocoon」の機能に高速化がありますが、これをイジると、Webページどころか、管理ページにも入れなくなって詰みます(実際は以下の方法で復旧できますが)。

サーバとの相性等もあるのかもしれませんが、私の環境では100％発生しました。

無料サーバだからだと思いますが、ページの読み込みや更新が遅かったり、止まることがよくありました。
負荷はあまりかけずに、でも更新はこまめに行うようにしましょう。

記事を書くときに、過去の記事を引用することがありますが、引用する記事にアイキャッチを設定していないとNO IMAGEと表示されて、格好悪いです。アイキャッチはできるだけ設定しましょう。

YouTubeの動画を記事に埋め込む機能は標準搭載されていますが、ニコニコ動画の埋め込み機能は~~当然のように~~搭載されていません。しかし、カスタムHTML機能を使用することで、ニコニコ動画の記事への埋め込みも可能になります。

以下の画像のようにトップメニューに外部サイトへの直リンクを入れたい場合は、カスタムリンクという機能を使います。

以下がカスタムリンクの作成方法です。カスタムリンクはサイト内のリンクでもいいため、自分のWebページではメニューを分岐させるためだけに作っている「作品一覧」のリンクは投稿ページですし、「活動報告（HOME）」のリンクも投稿ページです（別にトップページを用意するのが面倒くさいため）。

ヘッダー画像はなんでもいいので、作った方がいいと思います。

以下の方法でTwitterのタイムラインをWebページに表示することができますが、そのままでは物凄くタイムラインが長く表示されます。

以下の方法で、長さを調節してください。

ヘッダー画像にサイトのタイトルを入れているので、テキストでのタイトルを非表示にしました。

この記事を書くときに、自分のWebページを引用すると以下のようになりました。

これでは、あまりにも恰好悪すぎですし、誰の何のサイトなのか分かりません。

これは、以下の記事を参考にプラグイン『All in One SEO Pack』を入れる事で解決しました。

記事の情報から少し仕様が変わっていますが、「セットアップウィザード」を順番に進めていけば問題ありません。
そして途中の「ホームページのタイトル」と「デフォルトのソーシャルシェア画像」を忘れずに設定してください。

↑このように表示されました。

初期設定では改行した際に次の行との間隔が空きすぎなので、以下のサイトを参考に調節しました。

『CSSで「行の高さ」を設定する』のところです。自分をmargin-bottom: 0.5em;とし、間隔を記事の数値より詰めました。

この記事が気に入ったらサポートをしてみませんか？