ガジェニュー

~iPhone・格安スマホとか~

【STINGER5カスタマイズ】サイドバーにプロフィール設置

       後で読む

今回はSTINGER5カスタマイズのお話です。サイドバープロフィールを追加してみましたのでそちらのやり方をメモしていきたいと思います。なぜ、プロフィールを追加したのかは一番下にでも書いておきますので興味があれば。

プロフィールを追加するにあたってsidebar.phpのファイルを編集します。子テーマ側のにコピーして作成しておくのがいいと思います。

SPONSORED LINKS

【STINGER5カスタマイズ】プロフィールをサイドバーに入れる

サイドバーに関してはデフォルトは上からAdSenseの広告枠・RSS・検索BOX・NEW POST・・・のような形になっているかと思います。今回はAdSenseとRSSの間にプロフィールを入れてみよう。ということでやっていきます。この部分はsidebar.phpで制御されています。そのうち該当する箇所は下記になります。

 <div class="ad">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) : else : //アドセンス ?>
    <?php endif; ?>
  </div>
<?php } ?>

 <!-- ここにプロフィールを入れてみます。 -->

 <!-- RSSボタンです -->
  <div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i>&nbsp;購読する</a> </div>
  <!-- RSSボタンここまで -->

ちょうどRSSボタンの上の部分にコードを書けばいいだけですね。ということでコードとにらめっこをしながら今回は下記のようなコードを入れてみました。

<h4 class="menu_underh2">このブログを書いている人</h4>
<div id="kanren"><div>
<dl class="clearfix">
 <dt><img src="ここに画像のURL" ></dt>
 <dd><h5> ここに名前</h5>
<p>ここは簡単なコメント<br><a href="固定ページへのリンク" >→プロフィール</a></p></dd>
</dl>
</div></div>

特に難しいことは有りませんね。今回は、新着記事と同じ形式の見せ方をしたかったので下記のことを考えてコードを書いています。

  • サイドバーのタイトルにはh4の「”menu_underh2″」のクラスを設定
  • 名前の部分は記事名と同じ「h5」を設定
  • 抜粋文の部分は<p>で囲んであげる
  • imgに関してはaside部分は別途設定をしてある模様だったのでそのまま

そうするとこのような形の見た目になります。asideでサイドバー自体を定義していてくれているみたいだったので結構簡単にできますね。
scap上と下で合わせてみてもらうと分かりますが、しっかりと「NEW POST」の部分と同じ見た目になっているかと思います。一安心です。

大本のコードを見ているとちょうど抜粋文に当たる部分には「smanone」というスマホだけ非表示のclassがあたっています。これは、スマホで見た時に「タイトル」と「抜粋」が来ると間延びしてしまうために非表示にしているようでしたが、今回は文字数が不変でボリュームの調整ができるので削除しています。

プロフィールを入れた理由

何回か書いているかもしれませんが、今後の世の中を考えると個人がメディア化、ブランド化していかないとこのコモディティ化する世の中じゃ仕事がなくなる、色々辛い事になりそうという個人的な考えがあるので

  • 読者への安心感が増す
  • 個人のブランド力強化

という意味で今回はプロフィール欄の追加と、サイト・筆者紹介ページをざっくし作りました。

あんまし、深く考えてないよって人に関しても、個人のパーソルな部分を晒すことによってファンが付く可能性もあるのであったほうが良い要素かなと。顔が見えない人が書いているよりも、顔が見える人が書いていたほうが信頼感・安心感があるでしょ。

てな感じで。

 - STINGER5, WordPress , ,

  関連記事

icon_1r_192
【アクセス数報告】2015年5月のPVとアフィリエイトの収益とか

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

wpop
WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

sum2
Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

icon_1r_192
【アクセス数報告】2015年2月のPVとアフィリエイトの収益とか

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

sicon_1r_192_120214_095619_AM
【アクセス数報告】2014年11月のPVとアフィリエイトの収益を公開します

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

access201503
【アクセス数報告】2015年3月のPVとアフィリエイトの収益とか

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

sum1
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

photo-express-for-google-tb
Picasa and Google Plus ExpressからPhoto Express for Googleに変更しました。【WordPressプラグイン】

前に書いたエントリーで利用していたプラグインがGoogleの認証方法の変更によっ …

sum1015
サムネイル付きで外部サイトを紹介できる「ShareHtmlメーカー」をカスタマイズしました

今回はこのサイトで使用してる、外部サイトをサムネイル付きで綺麗に表示する「Sha …

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

Loading Facebook Comments ...

Message

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