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

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



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

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

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

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

質問部分

それっぽく作ってます。

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

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

ベスト○ンサー部分

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

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

その他の解決方法部分

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

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

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

(サイト名)がんちゃんの悪知恵袋

エントリー部分はこっち

エントリー名1

サイトオプション設定

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

カテゴリページ

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

エントリーページ

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

↓ HTML部分

<span class="hito"><img src="<% pageDepth %>img/hito.png" alt="" /></span><span style="color:#1D00C5">ユーザー1</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">回答1</span>さん
</div>
回答文章挿入箇所

<h4>そのほかの解決方法</h4>
<span class="hito"><img src="<% pageDepth %>img/hito.png" alt="" /></span><span style="color:#1D00C5">回答2</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部分は、エントリーを追加して、記事1にそのままぶっこんでください。

あと見出しタグも若干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足りなかったらコメントくださいw

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

スマホ表示

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

まとめ

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

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

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

がんちゃんのおすすめアフィリエイト塾

アフィリエイトを1年やってきて感じることは、先生や師匠がいる環境が大事ってこと。
アフィリエイトのノウハウも大事だけど、心の支えになってくれる友人たち、先生、師匠の存在はとても大切です。

僕の場合、友人にアフィリエイト塾AMCを紹介してもらい今は無料会員として、たまに各地セミナーに遊びにいって交流しています。

トレーニングジムと同じでジムに1人で行く人は意外と続かない。しかし仲間と行くと継続率が高くなります。アフィリエイトも仲間が増えるとアフィリエイトを辞めてしまうことはほぼなくなるでしょう。

続ければ必ず成果が出るアフィリ。僕のおすすめアフィリエイト塾は、AMCです。
もしAMCに申し込みされた方がいらっしゃったら、AMCのSNSで「がんちゃん」で日記書いていますのでご一報ください。
色んなご相談にお答えいたします。

→ アフィリエイト塾AMC申込み

シェアしてくれるとチョーうれしいです!

フォローする