【コピペでOK】Simple author boxプロフィールにSimplicityのフォローボタンを合体する方法

スポンサーリンク

ライブドアブログからWordpressに移行して、デザインのカスタマイズも一段落したところで少しずつ整理していきたいなと思っているゆうちき(@youchiki_99m)です。

ブログのファンになってもらうために、「その記事をどんな人が書いているのか?」という人となりを知ってもらうのが効果的ということで、このブログでも「Simple author box」プラグインを使って記事下にプロフィールを設置しています。

テーマ「Simplicity」の初期カスタマイズで設置できる「フォローボタン」が色々なSNSのものを簡単に表示できて、デザインもキレイなのでプロフィール下に合体したいなと思ってやってみました。

スクリーンショット 2016-04-13 21.27.28
こんな感じで、「Simple author box」のプロフィールの中に「Simplicity」のフォローボタンを設置するイメージです。

どのように設定したかコピペで出来るようにご紹介します。

まずは「Simplicity」のフォローボタンを設置

スクリーンショット 2016-04-13 21.30.16
サイドメニューの「外観」から「カスタマイズ」に行きます。

スクリーンショット 2016-04-13 21.33.12
「カスタマイズ」から「SNS」と開いて、

スクリーンショット 2016-04-13 21.35.29
「フォローメッセージ」から下にそれぞれのSNSの情報を入力します。

「Simplicity」では、ここで入力したものがフォローボタンとして表示される仕組みとなっています。

赤線の部分がフォローボタンの上にタイトルとして表示されるので、デフォルトの「フォロー」というメッセージから変更したい人は設定して下さい。

スクリーンショット 2016-04-13 21.47.53
一番下でフォローボタンの色をつけるか、白黒にするか設定して完了です。

スクリーンショット 2016-04-13 21.50.13
白黒バージョンのボタンはこんな感じ。

スクリーンショット 2016-04-13 21.51.27
白黒バージョンだとマウスオーバーするとカラー版に切り替わります。

「Simple author box」プラグインの設定をする 

「Simple author box」プラグインを追加した後は下記のように設定して下さい。

管理画面サイドメニューの「設定」>「Simple author box」から設定を行うことが出来ます。

「Simple author box」の各設定項目が何のことか詳細を知りたい人はこちらの記事を参照して下さい。
自分の好きな場所に著者表示できるWordPressプラグイン「Simple Author Box」

General options

「General options」は下記2つを必ず設定して下さい。

  • 「Manually insert the Simple Author Box」は「Yes」(任意の場所に設置するため)
  • 「Hide the social icons on author box」は「Yes」(今回はSimplicityのフォローボタンを表示するため)
スクリーンショット 2016-04-13 22.42.53

上のように設定します。

Color options

特に設定は変更しなくて大丈夫です。

Typography options

「Author name font size」「Author website font size」「Author description font size」のサイズをサイト全体のフォントサイズと変更したい場合は設定します。

このブログでは、

  • 「Author name font size」=18px
  • 「Author website font size」=14px
  • 「Author description font size」=14px

と設定しています。

Miscellaneous options

特に設定は変更しなくて大丈夫です。

「style.css」にデザインを指定する

スクリーンショット 2016-04-13 21.27.28

下記を「style.css」にコピーして貼り付けると上のデザインと同じ、薄緑の点線で囲われたデザインとなります。

/*フォローボタン周り*/
p.sns-follow-msg {
border-bottom: dotted 1px;
font-weight: bold;
margin:0;
padding-top: 8px;
}

/*Simple author boxプロフィール*/
#prof{
border: 3px dotted #9bbf9d;
}
.saboxplugin-wrap .saboxplugin-gravatar{
padding: 20px 20px 0 !important;
}
.sns-pages{
padding: 8px;
}
.sns-pages ul.snsp{
margin: 10px 0 0;
}

「#9bbf9d」の部分を好きな色に変更すると点線部分の色も変更できるので、サイトのデザインに合わせてアレンジしてみてください。

色のコードは下記の様なサイトが参考になります。

色の名前と色見本

「entry-body.php」を編集する

続いてテーマファイルの「entry-body.php」を編集します。

「entry-body.php」は投稿ページの表示に関するファイルとなります。

※間違った部分を編集してしまうとブログの表示が崩れてしまうので、必ずバックアップをとって元に戻せるようにしておいてください。

「Simplicity」の子テーマを使っている人は「entry-body.php」のファイルはもともと入っていないので、親テーマからファイルをコピーしてきて子テーマにアップロードしてください。

編集する箇所は90行目から94行目の部分を下記の様に置き換えます。

<div id=”sns-group” class=”sns-group sns-group-bottom”>
<?php if ( is_single() && is_bottom_share_btns_visible() )
get_template_part(‘sns-buttons’); //SNSシェアボタンの取得?>

<?php if ( is_single() &&
is_body_bottom_follows_visible() ) //記事下フォローボタン表示のとき
get_template_part(‘sns-pages’); //SNSフォーローボタンの取得?>
</div>

<div id=”sns-group” class=”sns-group sns-group-bottom”>
<?php if ( is_single() && is_bottom_share_btns_visible() )
get_template_part(‘sns-buttons’); //SNSシェアボタンの取得?>
<div id=”prof”>
<?php if ( function_exists( ‘wpsabox_author_box’ ) ) echo wpsabox_author_box(); ?>
<?php if ( is_single() &&
is_body_bottom_follows_visible() ) //記事下フォローボタン表示のとき
get_template_part(‘sns-pages’); //SNSフォーローボタンの取得?>
</div>
</div>

太字の箇所を追加することで「Simple author box」のプロフィールが追加されます。

以上でカスタマイズは完了となります。

スクリーンショット 2016-04-13 23.35.17
ベースは「Simple author box」なので、このようにスマホ版でも崩れずに表示することが出来ます。

まとめ

以上、「Simple author box」のプロフィールに「Simplicity」のフォローボタンを合体する方法でした。

やってみてうまくいかないなどありましたら出来る限り解決したいと思いますので、SNSやコメントでお知らせ下さい。

では、また!

スポンサーリンク

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です