ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

【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 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

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

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

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

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

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

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

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

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

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

blogcard-custamize-tb
サイト内リンクをブログカード風にカスタマイズ!【WordPressカスタマイズ】

2回連続でWordPressのカスタマイズのお話です。 今回はサイト内リンクを画 …

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

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

最近ずいぶん涼しくなって来たのに、今日は蒸し暑いですね。今年は残暑が続くのだろう …

Loading Facebook Comments ...

Message

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