【Gush2】個別記事下に、SNSボタン付き「書いた人情報」を置いてみました。

2015/07/14

「Stinger5 for Ladys」の雑記ブログと同様に、さらさらぶろぐも個別記事下に「書いた人情報」を入れたので、その方法を紹介します。
　

1 PHPに、「書いた人情報」用の記述を追加
2 CSSに、「書いた人情報のSNSアイコン」用の記述を追加
3 まとめ

PHPに、「書いた人情報」用の記述を追加

「名前、プロフィール画像、SNSボタンバー」をセットにした「書いた人情報」をauthor.phpというファイルにして、それを、個別記事用PHP「single.php」で呼び出す形にしました。

書いた人情報のPHPファイルauthor.phpを作成

下記のコードを記述したファイル「author.php」を作ります。

<!-- 自己紹介 -->
<div class="center">
	<span style="font-weight:bold;">書いてる人</span>　【自分の名前】<br>
	<img class="aligncenter" src="【プロフィール画像のURL】" width="150" height="150"" />
	<div class="author-sns">
	<!-- thnx! http://www.iconsdb.com/ -->
	<ul>
	<li><a href="https://twitter.com/【自分のツイッターID】" target="_blank"><i class="fa fa-twitter"></i>
	</a></li>
	<li><a href="https://www.facebook.com/【自分のフェイスブックID】" target="_blank"><i class="fa fa-facebook"></i>
	</a></li>
	<li><a href="https://plus.google.com/u/0/【自分のグーグルプラスID】" target="_blank"><i class="fa fa-google-plus"></i>
	</a></li>
	<li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i>
	</a></li>
	<li><a href='http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-logo-white_2x.png' alt='follow us in feedly' width='28' height='28' title="feedlyに登録">
	</a></li>
	</ul>
	</div>
</div>

<span style="font-weight:bold;">書いてる人</span>　【自分の名前】<br>

<ul>

</a></li>

</a></li>

</a></li>

<li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i>

</a></li>

<li><a href='http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-logo-white_2x.png' alt='follow us in feedly' width='28' height='28' title="feedlyに登録">

</a></li>

</ul>

</div>

【】で囲んでいるところ5箇所を自分用に書き換えてください。

参考までに、さらさらぶろぐの場合を載せておきます。
【自分の名前】＝さらさらり
【プロフィール画像のURL】＝http://wpblog.sara2jp.com/wp-content/uploads/2015/03/hiyo_150.png
【自分のツイッターID】＝sarasaralli
【自分のフェイスブックID】＝sarasarablog
【自分のグーグルプラスID】＝110794312530102325687

author.phpを呼び出す記述を、single.phpに追加

今回は、ソーシャルボタンの下に、「書いた人情報」を表示するようにしました。
下記のように、「書いた人情報」を呼び出す１行（水色の行）を、
「</div><!–//article_body–>」の下に入れます。

<footer>
<?php get_template_part('sns');?>
</footer>
  <?php endwhile; else: ?>
  <p>記事がありません</p>
  <?php endif; ?>
<!--ループ終了-->

</article>
</div><!--//article_body-->

<?php get_template_part('author');?>

<div id="relations">
<h3>関連記事-こちらもどうぞ</h3>

<?php get_template_part('sns');?>

</footer>

<?php endwhile; else: ?>

<p>記事がありません</p>

<?php endif; ?>

</article>

</div>

<?php get_template_part('author');?>

<h3>関連記事-こちらもどうぞ</h3>

author.phpを、single.phpと同じディレクトリに置く

author.phpは、single.phpと同じディレクトリに置きます。
ちなみに私の場合は、子テーマを作っていて、ディレクトリは
「/themes/Gush2-child」となってます。

CSSに、「書いた人情報のSNSアイコン」用の記述を追加

style.cssに、下記に水色で示した「書いた人情報のSNSアイコン用記述」を追加します。
すべての画面サイズで適用されるように「@media{}」の外側に書きます。先頭でもいいのですが、私は、「カスタマイズした分は後ろのほうに書く」ようにしてるので、一番後ろに入れました。

/*-----------------------------------
  記事下authorSNSアイコン
------------------------------------*/
.author-sns {
	margin-bottom: 12px;
	padding: 0.3em 0em;
}

.author-sns div {
	max-width:none;
}
.author-sns img {
	margin: 8px 0px 0px -8px !important;
}
.author-sns ul {
	display: table;
	table-layout: fixed;
	width: 240px;
	background-color:#7dffa0;
	margin:0 auto !important;
	padding:4px 18px 0px 30px;
}

.author-sns ul li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size:22px !important;
	margin: 0 !important;
	padding-left: 0 !important;
	text-indent: 0 !important;

}

.author-sns ul li a {
	color: #ffffff;
	text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}

.author-sns ul li a:hover {
	color: #ff7ddf;
	text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}

/*--------------------------------------
  カスタマイズおつかれさまでした！
  不具合があればご連絡ください^^

2015

2016

2017

2018

2019

2020

2021

2022

2023

2024

2025

2026

2027

2028

2029

2030

2031

2032

2033

2034

2035

2036

2037

2038

2039

2040

2041

2042

2043

2044

2045

2046

2047

2048

2049

2050

2051

2052

2053

2054

2055

2056

2057

2058

2059

2060

2061

/*-----------------------------------

記事下authorSNSアイコン

------------------------------------*/

.author-sns {

margin-bottom: 12px;

padding: 0.3em 0em;

}

.author-sns div {

max-width:none;

}

.author-sns img {

margin: 8px 0px 0px -8px !important;

}

.author-sns ul {

display: table;

table-layout: fixed;

width: 240px;

background-color:#7dffa0;

margin:0 auto !important;

padding:4px 18px 0px 30px;

}

.author-sns ul li {

display: table-cell;

vertical-align: middle;

text-align: center;

font-size:22px !important;

margin: 0 !important;

padding-left: 0 !important;

text-indent: 0 !important;

}

.author-sns ul li a {

color: #ffffff;

text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);

}

.author-sns ul li a:hover {

color: #ff7ddf;

text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);

}

/*--------------------------------------

カスタマイズおつかれさまでした！

不具合があればご連絡ください^^

まとめ

サイドバーSNSアイコンは、もともとGush2で定義されていたものなので、CSSは変更しなくて大丈夫かと思ったのですけど、article_bodyの定義を継承しちゃって表示崩れが起き、それを直そうとside-snsの定義を変えるとサイドバーのSNSボタンが表示崩れを起こし…　どうにもならないので、新しいクラスauthor-snsを作りました。
そんなわけで、「Stinger5 for Ladys」よりもずっと時間がかかっちゃいました。(^_^.)

on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。初めまして。同感です。こんなに良いのに、なんでみんな使わないの？？って思いますよね。確かにフォントは、初期状態ではちょっと… そのあたりがもうちょっと何とかなれば最高なんですけどね。ＣＳＳの解説ありがとうございます、参考にさせていただきますね♪
on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。bloggerは僕もオススメです( ´ ▽ ` )ﾉ本当シーサーブログは広告多いですね( ´ ▽ ` )ﾉ
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）TN0816さまご訪問ありがとうございます。キーワード検索の下に表示されるのは、サイド広告300pxです。外観＞ウィジェット＞サイド広告300px に、広告コードを書いているのではないでしょうか？
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）このブログとても参考になりました！１つわからないところがあるのですが、ここに書かれているとおりにやったのですが、サイドバーのキーワード検索の下にもも広告が表示されてしまい、どうしたらいいのかわからなくて困っています。アドセンスはメイン上部にレスポンシブ広告を入れて、記事下左と記事下右に300×250を入れています。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。a cattle northern さまくわしい情報をありがとうございます。なるほど。怪物レベルでなければ、ポイントで受け取る分が必ずあるのですね。「ポイントで楽天市場で買い物してね」ってことなのでしょうね。楽天市場を使ってない人は『もしも』がいいですね。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。楽天アフィですが、１ヶ月で３０００円以上は、３０００ポイントを楽天ポイントで＋超過分を楽天銀行振込１ヶ月で３０００円未満は楽天ポイントで支給となります。毎月１０万以上確実で全額銀行振込となりますが、そんな怪物は・・・・・。楽天市場を使うのでなければ、もしもの方がいいと思いますよ。

さらさらぶろぐ

アフィリエイトのことを書くつもりで始めたけど、WordPressやGush2のことを書いちゃってます。

【Gush2】個別記事下に、SNSボタン付き「書いた人情報」を置いてみました。

PHPに、「書いた人情報」用の記述を追加

書いた人情報のPHPファイルauthor.phpを作成

author.phpを呼び出す記述を、single.phpに追加

author.phpを、single.phpと同じディレクトリに置く

CSSに、「書いた人情報のSNSアイコン」用の記述を追加

まとめ

関連記事-こちらもどうぞ

この記事へのコメントはこちらコメントをキャンセル

PHPに、「書いた人情報」用の記述を追加

書いた人情報のPHPファイルauthor.phpを作成

author.phpを呼び出す記述を、single.phpに追加

author.phpを、single.phpと同じディレクトリに置く

CSSに、「書いた人情報のSNSアイコン」用の記述を追加

まとめ

関連記事-こちらもどうぞ

この記事へのコメントはこちら コメントをキャンセル

この記事へのコメントはこちらコメントをキャンセル