プレイ無料!ブラウザで遊べるHTML5ゲームサイト!

TOP> 記事一覧> サイドバーに色々追加しました

2017/03/30

サイドバーに色々追加しました

タグ: 更新情報 技術 サイト改修

このエントリーをはてなブックマークに追加

サイトの右サイドを賑やかにしてみました。
とはいえスマホ向けゲームサイトなので、スマホの方はメインコンテンツの下に表示されていると思います。

平たく言えば、ちゃんとテキストで認識出来るしミニサイトマップとしても機能するので、
ユーザービリティを上げてアドセンスの審査通過を目指すためのコンテンツ拡充計画の内の一つです(笑)

ちなみにPCの方がアクセスされると、サイドバーの方のスポンサーリンクが
何も表示されずにスペースだけ空いているかと思われます。

スペース確保されてるし、提示されたコード通りに組み込んでいるのですが表示されないので、
問い合わせてみたんですが音沙汰なしです。
1週間経って返事がなかったら再度お問い合わせ下さいと書いてあったので、現在2度目の問い合わせ中です。

とはいえいつまでも空欄にしとくのもナンセンスなので、今回の問い合わせスルーされたら別の広告に変えます。


・でサイドバーに何を追加したの?

まあ現段階では実物見た方が早いんですが、恐らく今後微修正増えていくと思うのでsantmove.自身の備忘録も兼ねてます。

新着ゲーム一覧

とりあえず新着順にゲームを5件ずつ並べました。まだ7個しかないのでほぼ全部ですが、、、

TOP画面やゲーム一覧でのゲームリンクのサイズだと大きすぎるように思えるので、
サイドバー用にテンプレートを作ってそっちで吐き出すようにしてあります(後述)

新着記事一覧

こっちも同等の仕組みで新着順に記事を5件ずつ並べました。
タグ機能が実装されたらタグで絞ってカテゴリみたいに表示するのが良いかと思います。

Twitterアカウント(@santmove_com)のTL

現状更新報告しか書いてないので全く意味ないような気もするんですが、
なんか日常っぽいツイートとかもするようになったら意味が出てくるかと思います。

メンバー

とりあえずサイト自体を誰が作ったかくらいはわかるようにしておこうかなぁという試みです。
ここ長文にしても誰も読まないと思うので名前と役割だけ書きました。


・サイドバー自体の技術仕様

ひたすらにテンプレートを読み込んでいる

管理的に不便なのはナンセンスなので、テンプレ変えれば全ページ変わる仕様にしました。
そんなの当たり前だろWordpressでやれというのは百も承知ですが、、、

サイドバー自体のテンプレートと、新着ゲーム、新着記事、メンバーにそれぞれ使われている「リスト一つ分」のテンプレートを用意しています。

この「リスト一つ分」のテンプレですが、抽象化した結果以下が表示できれば良いなぁと思いました。
・サムネ
・タイトル
・テキスト(物によって書くもの変える)

で、汎用化したテンプレファイルが以下です。

リスト一つ分のテンプレ(html)


<div id="sub_item">
	<div class="sub_item_image">
		<a href="{アイテムのURL}">
			<img src="{サムネ画像のURL}" alt="{タイトル}">
		</a>
	</div>
	<div class="sub_item_summary">
		<a href="{アイテムのURL}">
			<h3 class="sub_item_title">{タイトル}</h3>
		</a>
		<span class="sub_item_text">{テキスト}</span>
	</div>
</div>

あとはphp側でデータを取得して、上記テンプレを上手いこと使ってやれば
なんとなくそれっぽい感じのリストが出来るイメージです。(しょぼいけど)

ただ、リストを抽象化して作って~の一連の作業より、
そもそも新着順に5個取得する!というSQL文を考えるのに時間がかかってます。
SQLが苦手なだけです。

詳しい解説は省略しますが、一応cssも載せておきます。
今は結構使いまわしてますが、左にアイコン右に文章みたいなcssを作るのに最初苦労した記憶があるので、、、

リスト一つ分のテンプレ(css)


/*リストそのもののCSS(とりあえずゲームのやつだけ)*/
#side_game_list {
	background-color: #EEEEFF;
	padding:10px;
	margin:0px 10px;
	text-align:left;
	margin-bottom:10px;
	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#sub_item {
	background-color: #FFFFFF;
	padding:5px;
	margin-bottom:3px;
	overflow: hidden;
	text-align:left;
	position:relative;
	height:auto;
	/*width:100%;*/
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
}

.sub_item_image {
	float: left;
	min-width:60px;
	max-width:100px;
	margin-right: 5px;
	width:20%;
	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.sub_item_image img {
	width:100%;
	height:auto;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.sub_item_summary {
	overflow: hidden;
}

.sub_item_title {
	font-weight: bold;
	font-size:20px;
	margin: 0px;
}

.sub_item_text {
	font-size:16px;
}

・今後サイドバーに何を載せるか

SNS共有

いつまで経ってもFacebook連携が完成していないのですが、
一応Facebookページやアプリ登録などは出来ているので、もう少しで、、、

サイドバーに置くのはその後になるかと思います

最近人気のゲーム

過去1週間くらいでプレイされてる順上位3ゲームとかあると良いのかなぁと思います。
この機能できたら新着順も3ゲーム位で良いのかなとは思います。


・サイト更新以外の近況

嬉しいことにsantmove.の個人アカウント宛にゲームのリクエストがありました。
商品名は伏せますが、黒いココア味のクッキーで白いクリームを挟んだお菓子の落ち物パズルがリクエストでした。

もうパ寿ル司があるので、落ち物パズルかどうかは置いておいて、
黒いココア味のクッキーで白いクリームを挟んだお菓子」ならではのゲームは作ってみたいなぁと思います
変に期間決めて微妙なゲームになってもアレなので、「いついつリリース!」とかはやめときます。

>モンデリーズ オレオ ビッツサンド バニラ 65g 10コ入り

価格:1,080円
(2017/3/30 18:28時点)


感想・リクエストなどは公式Twitterアカウント(@santmove_com)まで是非ご連絡よろしくお願いいたします!
また、ゲームの感想なども励みとなりますのでよろしくお願いいたします!

ではまた!

santmove.

矢印Fever

矢印Fever

ノリノリでフリックしてフロアを沸かそう!手持ちの音楽を聴きながらのプレイがオススメ!


当サイトはブラウザで遊べるゲームサイトです。

最新のゲームです!
Rotate Number Panels

Rotate Number Panels

ロテパネって呼んでね!キレイなパネルをクルクル回して数字を並べよう!相当頭をつかうよ!

人気のゲームです!
避けて食べてペンギンタワー

避けて食べてペンギンタワー

ペンギンだって暖を取りたい!氷を避けて登って、アツアツ料理を食べよう!

よかったら遊んでいって頂けると幸いです!面白かったら是非シェアしてください!

また以下のリンクよりお買い物頂けるとサイト運営の助けとなりますので、もしよろしければ是非よろしくお願いいたします!

楽天市場

amazon

良ければ是非いいね・シェアしてください!

このエントリーをはてなブックマークに追加

この記事のコメント

この記事にはまだコメントがありません。
はじめてコメントしてみませんか?


ログインするとコメント出来ます!
ログイン
無料アカウント作成

ログインしていません!

アカウントを作るとスコアの保存・閲覧が可能です!(無料です)
アカウントを作る!

サイト運営者

運営:サントムーブ

案件の依頼や問い合わせなどはコチラ!

メンバー

santmove.

プログラマー(代表)

最近更新されたゲーム

夜景と炒飯

2019/10/15 更新

リーマン登山

2019/09/02 更新

うなかぞえ

2019/07/17 更新

新着公開ゲーム

Rotate Number Panels

2019/03/10 公開

記憶丼

2019/02/24 公開

スシバタケ

2019/02/17 公開