ゲームサイトを作りながら、WordPressを学ぼう!

 前回は、ホームページの作り方を紹介しました。

今回はゲームを公開するペ特設ージを作りながらWordPressの使い方を説明しようと思います。

自分のホームページがこれよりダサかったり、ショボイと感じたら乗り換え時です。

 

当記事は、無料で自分のホームページを持とう!(WordPress)の続きになります



最終目標

 home50

目指すホームページはコチラ⇒http://yesman.opengameseeker.com/



0:初期段階

home2

 前回のテーマを入れた状態のホームページから開始します。



1:ホームページを動かし始めよう!

home1

 前回作成した自分のホームページにアクセスします。
ホームページの内容を弄りたいので、管理者としてアクセスしなければいけません。
そこで、自分のホームページのアドレスに/wp-loginを加えてください。上記の画面が移ります。
この画面でお気に入り登録をしておくと便利です。



ダッシュボードの項目の説明をします。

home3

 ログインに成功するとこの画面が表示されます。WordPressでの操作はほぼこのインターフェイス上で行うことが出来ます。


home12

 各項目の簡易説明です。
投稿はページを作成できます。固定ページとの違いは日時が記録されないと言う点です。
ブログの感覚で用いる場合、普段の記事は投稿。作者についてなどの記事は固定ページなどで使い分けます。



投稿

home5

 投稿を見ていきます。まだ何も書いていないので当然ながら投稿は見られません。
適当に1つキャラクター紹介のページでも書いてみるとしましょう。新規追加を押します。


home6

 投稿のページです。ここに本文やタイトルを書くことが出来ます。


home7

 キャラクター紹介のページですので画像を入れてみましょう。メディアを追加のボタンを押します。


home9

 メディア(jpeg,png,bmp,mp3,zipなどなど)を挿入できる画面になりました。


home8

 レンタルサーバーに上げたい画像を直接ドラッグ&ドロップで突っ込みます。


home10

 画像がサーバーに保管されました。(場所は /サイト名/wp-content/upload に保存されます)
投稿に挿入を押せば、記事に画像が追加されます。詳細設定では画像の配置の設定を弄れます。
表示設定の配置は「無し」にすると、画像の横に文章がかけなくなります。「左」にすると、画像の右に文章が書けるようになります。
今回は「左」にしておきましょう。入れる画像を困った方はコチラをどうぞ(CC0 画像を右クリックで保存してください)


home11

 配置を左にしたので右側に文章を打つことが出来ます。簡単に自己紹介分でも書いておきます。


home13

 ページが実際にどのように表示されるのか見たいので、下書きとして保存をおして、プレビューボタンを押してみます。


home14

 ページが表示されました。実際の表示とプレビューは異なる場合が多いので、
ある程度書いたら確認して、手直しするようにしましょう。


home15

 投稿にアイキャッチ画像を付けてみましょう。アイキャッチ画像を設定を押して、画像を挿入します。
入れる画像を困った方はコチラをどうぞ(CC0 画像を右クリックで保存してください)
このテーマでのアイキャッチ画像の解像度の初期設定は600×400となっています。
他の解像度についても知りたい場合、テーマ内のfunction.phpに記されています。


 home16

 本文を書き終わったら、誰でも見られる状態にしてみましょう。
公開ボタンを押すことで誰でも見ることができるようになります。


home17

 ホームに戻ってみると先ほど作ったページが表示されています。
アイキャッチ画像も表示されていていい感じです。



4:メディア

home18

 メディアではアップデートしたデータを見ることが出来ます。
wordpressの初期設定では2MBまでのデータをアップロードできます。
それ以上のサイズのファイルをアップロードしたい場合、FFFTPを起動し、/サイト名/wp-content/uploadに直接突っ込んでください。

 設定の変更を頑張りたい人はterapadなどの文字コードを変更することなく内容を変更できるテキストソフトをダウンロードします。
FFFTPでレンタルサーバーと繋げて、/サイト名/の場所にUTF-8の文字コードで下記のコードを書いた.htaccessかphp.iniをぶち込んでください。
なお、この方法でもレンタルサーバーによって設定が失敗する可能性があります。

php_value upload_max_filesize 100M
php_value post_max_size 100M
php_value max_execution_time 100
php_value max_input_time 100


固定ページ

home19

 固定ページは投稿とやる内容は変わりません。
初期でサンプルページが入っているので内容を読んだら消しておきましょう。
このテーマの場合、固定ページで書かれたページはホームのページで表示されません。





コメント

home20

 何もコメントがない状態だと説明の仕様がないため、OpenGameSeekerのコメント欄を拾ってきました。
このように、コメントを一覧で見ることが出来ます。気に入らないコメントを消したりすることも出来るので、サイトが炎上した場合、コメントを消すことで油に火を注ぐことができます。



外観

home21

 外観はテーマを変更するページです。初期ではTwenty Thirteen と Twenty Twelveが入っています。
今回はMinimaticaを使用していますが、他のテーマを使うことも当然可能です。
ネットにはテーマが山ほど落ちています。FFFTPで/wp-content/themesの中に入れることでテーマを有効化することが出来ます。


home22

 カスタマイズの項目では、画面を見ながらテーマの内容を操作することが可能です。
本当に細かい内容はテーマのコードを変更しないといけませんが……。


home23

 背景画像が寂しいのでテクスチャーに変更します。背景画像の部分に画像をアップロードして、”変更して公開”のボタンを押せば更新されます。


 home24

 外観のウィジェットを操作します。ウィジェットとはサイドバーやフッターに何をおくかドラッグ&ドロップで簡単に操作できるものです。


home25

 OpengameSeekerの場合Headerは青枠の部分、SideBarは横の赤枠の部分を示します。footerは一番下にある部分を指します。
無限スクロールと言うプラグインを使っているため、footerは見えません……。


home26

ゲームサイトの場合、サイドバーなど必要ないので全部外します。ドラッグ&ドロップで大丈夫です。


home35

今度は外観のメニューの部分です。このテーマのメニューは追加したものがfooterに配置されます。
ここに、ホーム、キャラクター、ストーリー、サンプルCG、システム、などのメニューを置いていきます。


home37

 先ほど作成したCharactorの記事を追加します。最初にあったものは全て消しましょう。
URLに投稿したページのURLとリンクテキストに表示したい名前を書き、メニューに追加を押します。


home37

あると便利なホームもリンクで追加しておきます。完成したらメニューを保存のボタンを押しましょう。


home28

外観⇒ヘッダーではヘッダー部分のタイトルを変更できます。今回は画像を作成しましたのでそれに移してみます。(CC0)


home29

どうなったかホームページを確認してみます。タイトルは綺麗に表示されましたが、
投稿の内容が背景と合わさって読めなくなってしまいました。この状況を直す為にスタイルシートを変更します。


home30

スタイルシートはテーマのコードの変更は全て外観のテーマ編集で行うことが出来ます。
ここに書かれていることが全部読めれば、同じテーマを作ることも夢ではありませんが、今は夢です。今回はcssと呼ばれるカスタムスタイルシートの部分を変更します。


home31

スタイルシートは全てのテーマに存在します。スタイルシートは文字の大きさや画面の色などのデータを扱うパーツです。


home32

スタイルシートの#containerの中に上の画像のように下記のコードを追加しましょう。

background-color: #ffffff;

これは、投稿(conteiner)の中の背景色(background-color)を(#ffffff)にしろと言う意味です。
#ffffffは色で白を表します。#000000は色で黒を表します。
最初の2つの数字がレッドの強さ、次の2つの数字がグリーンの強さ、最後の2つの数字がブルーの強さを決めます。(RGB)
光の三原色を操るので、色が強いほど白くなります。16進数表記ですので次の記号が使えます。0123456789abcdef
色の一覧はコチラのURLへ⇒http://www.colordic.org/

コードを追加したらファイルの更新ボタンを押しましょう。


home33

 投稿の部分の背景色がコードで書いたとおり白色になっています。


home38

同様に外観⇒メニューの文字が黒で見づらくなっているので、スタイルシートの一番下に書かれている.nav ul li aのカラーも白に変えます。
#252525 ⇒ #ffffffに変えてみましょう。


home39

ホームページを確認すると、しっかりとメニューの部分が白文字に変わっています。
このようにスタイルシートを変更することで文字の色やサイズを変更することが出来ます。



8:プラグイン

home40

プラグインではホームページに役立つツールを有効化、無効化することが出来ます。
試しにひとつ入れてみることにしましょう。今回はfancy-boxを今回入れてみます。
このプラグインは投稿した画像をクリックすると、画像をポップアップ表示にしてくれます。
サイトを訪れると、右側にDownloadボタンがあるので、ダウンロードして解凍しましょう。


home41

 FFFTPを起動し、サイト名/wp-content/pluginsの中に解凍したfancy-boxのファイルを挿入します。


home42

プラグインのページを更新するとFancyboxが追加されていますので有効化のボタンを押します。


home43

画像をクリックするとポップアップウインドウで上の画像のように表記されるようになりました。
このように便利なプラグインがWordPressには山ほどあります。



9:ユーザー

home44

ユーザーは、複数人でホームページを管理する際に使うことが出来ます。
権限が五種類あり、それぞれの権限ごとに出切る行動が異なります。共同で作業することも可能です。


home45

 ユーザーの細かい設定も行えますが、余り弄る事はないです。



10:ツール

home46

 ツールの項目はプラグインを加えない限り用いません。
新たなプラグインを入れた際にプラグインの設定をいじることが出来るものもあります。



11:設定

home47

 サイトのタイトルやキャッチフレーズなどの基本的な設定をいじることが出来ます。
あなた自身が好きな設定に変更していきましょう。



12:終わり

home48

 赤い部分が必要なかったので削除しました。使いたい場合はコチラをダウンロードしてテーマに被せて下さい。あとは、同様に投稿を増やしていけばゲームページの完成です。

 これでWordPressの機能は大体使えるようになりました。あとは自身の手でゲームサイトを作り出しましょう。
以上、ゲームサイトを作りながら、WordPressを学ぼう!でした。




“ゲームサイトを作りながら、WordPressを学ぼう!” への1件のフィードバック

  1. めせた より:
    凄く見やすいです^^ ワードプレスについて全くわからなくて困ってたのですが… ここのサイトで勉強させていただきますね^^

コメントを残す

Return to Top ▲Return to Top ▲