ガジェニュー

~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 , ,

  関連記事

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

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

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

images_112014_115155_AM
【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ

STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

simages_011615_064354_PM
【STINGER5カスタマイズ】AdSenseをiPhone6/6s Plus対応のレスポンシブにカスタマイズ。

久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle A …

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

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

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

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

早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …

Loading Facebook Comments ...

Message

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