シリウスで○フー知恵袋なサイトを作るの巻

拙者また、つまらんアフィサイトを作ってしまった。。。

シリウスで作るワルー知恵袋サイト
ワルー知恵袋サイトの作り方
スマホ表示
まとめ

シリウスで作るワルー知恵袋サイト

前回のシリウスネタが好評のようで、シリウスネタをもう一個ぶっこんでみます。

がんちゃん、調子乗っちゃって

今回は、○フー知恵袋みたいなワルー知恵袋サイトです。

質問部分

それっぽく作ってます。

これをどこまで崩すかはおまかせします。あまり本家に近いと怒られそうですしね～。

人の画像もフリー素材で作りました。hito.pngって名前にしています。

ベスト○ンサー部分

ベストマスターっていう画像作りました。だって怒られそうだもん。

上画像のようにテキストリンクを付けると効果的かなと。

その他の解決方法部分

ここはいくつあってもいい部分なのでコピペで増やすなりしてください。

ワルー知恵袋サイトの作り方

実際にサンプルサイトを作ってみたのでそちらをご覧ください。

404 NOT FOUND | がんちゃんブログ

エントリー部分はこっち

404 NOT FOUND | がんちゃんブログ

サイトオプション設定

サンプルサイトのトップに、シリウスの推奨設定を掲載しています。これ通りにしたほうが見栄えが知恵袋に近づきます。

カテゴリページ

カテゴリページも作ってみたんですが、テンプレートを配布するのは禁止されているので、CSSを見て見まねで作ってみて下さい。まぁカテゴリページまでこだわる必要もないかな～とは思います。

エントリーページ

ここがメインになりますね。コードを貼っときます。

↓　HTML部分

<span class="hito"><img src="<% pageDepth %>img/hito.png" alt="" /></span><span style="color:#1D00C5">ユーザー１</span>さん

<iframe src="http://www.facebook.com/plugins/like.php?href=<% pageUrl %>&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

文章挿入箇所


<strong>ベストな解決方法</strong>
<div class="anwer"><span class="hito"><img src="<% pageDepth %>img/hito.png" alt="" /></span><span style="color:#1D00C5">回答１</span>さん
</div>
回答文章挿入箇所

<h4>そのほかの解決方法</h4>
<span class="hito"><img src="<% pageDepth %>img/hito.png" alt="" /></span><span style="color:#1D00C5">回答２</span>さん

回答文章挿入箇所

↓　CSS部分

/*
==================================================
人シルエット
==================================================
*/
.hito img {
 	border-radius: 20px;
 	height: 40px;
 	width: 40px;
	vertical-align:middle;
	margin-right: 10px;
}

.hito:before {
	right: 0;
	background-image: url(img/goodanwer.png);
	background-repeat: no-repeat;
	background-size: 74px 74px;
	background-position: 0 0;
}


.anwer{
	width: 100%;
 	height: 100px;
	right: 0;
	background-image: url(img/bestmaster.png);
	background-repeat: no-repeat;
	background-size: 74px 74px;
	background-position: top right;
}

多分これでうまくいくと思います。

HTML部分は、エントリーを追加して、記事１にそのままぶっこんでください。

あと見出しタグも若干CSSを変更しているのでまとめて載せときます。これは変えなくてもいいかもしれないけど。

/* 見出し
==================================================
*/
#main h2, #main h3 {
	background-color: #FFF;
	margin-bottom: 5px;
	margin-left: auto;
}
#main h2 span, #main h3 span {
	display: block;
	color: #3C1818;
	font-size: 18px;
	text-shadow: 0 0 1px rgba(255,255,255,.3);
	margin: 2px 8px;
	padding: 4px 0 0 8px;
}
#main .text h3, #text1 h3, #text2 h3, #text3 h3, #text4 h3, #text5 h3, #text6 h3, #text7 h3, #text8 h3, #text9 h3, #text10 h3, #space1 h3, #space2 h3 {
	margin: 0 0 5px -10px;
}
#main h4 {
	padding-bottom: .5em;
	border-top: 2px solid #922FB3;
	background-color: #EBD7FA;
	margin: 5px auto;
	position: relative;
}
#main h4 span {
	color: #3C1818;
	display: block;
	padding: 6px 0 0px 12px;
	position: relative;
}
#main h5 {
	background-image: url(img/h5.png);
	background-position: left top;
	background-repeat: no-repeat;
	color: #333333;
	text-shadow: 0 0 1px rgba(51,51,51,.1);
	font-size: 16px;
	line-height: 150%;
	margin: 3px auto;
	padding-left: 28px;
}
#main h6 {
	background-image: url(img/h6.png);
	background-position: left 1px;
	background-repeat: no-repeat;
	color: #333333;
	text-shadow: 0 0 1px rgba(51,51,51,.1);
	font-size: 16px;
	margin: 3px auto;
	padding-left: 22px;
	line-height: 140%;
}
#main .atn02 {
	background-color: #f2f2f2;
	background-image: url(img/atn_02.gif);
	background-position: 14px 14px;
	background-repeat: no-repeat;
	margin: 20px 0 10px;
	overflow: hidden;
	padding: 20px 20px 20px 50px;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
	#main .atn02 {
		background-image: url(img/atn_02@2x.gif);
		-webkit-background-size: 22px 32px;
		background-size: 22px 32px;
	}
}
#main .atn02 span {
	border-bottom: 1px dashed #c2c2c2;
	color: #4d4d4d;
	font-weight: bold;
	padding-bottom: 3px;
}
@media screen and (max-width: 640px) {
	#main h2, #main h3 {
	margin-left: auto;
	}
	#main .text h3, #text1 h3, #text2 h3, #text3 h3, #text4 h3, #text5 h3, #text6 h3, #text7 h3, #text8 h3, #text9 h3, #text10 h3, #space1 h3, #space2 h3 {
		margin: 20px -10px 10px;
	}
}

あと、CSS足りなかったらコメントくださいｗ

テンプレート配布が出来たらあっという間に出来るんですけどね。もう面倒くさいので今回だけで勘弁してください。

スマホ表示

一応スマホではこんな感じになります。

まとめ

シリウス、久しぶりに使ってみると意外と楽しい。

でも、次からはWordpressネタに戻ります～

最後まで読んでいただいてありがとうございました！