【Stinger7】右サイドバーでプロフィールをカッコよく表示させる方法

   

Stiger7右サイドバーにプロフィール

@yuichico_です。StingerシリーズにGoogleAdsenceを入れるにはプロフィールがないとGoogleAdsenceの審査に通らないらしいので、右サイドバーの自分のプロフィールをカスタマイズしました。最初はGoogle +で自分のプロフィールをとってきてという手段も取りましたが、ほんの少しですが、重くなりました。ですのでhtmlとCSSをいれるのがベストだと思います。他ブログでは見られないプロフィールのカスタマイズになりました。

最終的には右サイドバー一番上にこんな形で表示されるようになります。

Stinger7プロフィールカスタマイズ

スポンサードリンク

子テーマのダウンロードとインストール

リンク  Stinger7親テーマと子テーマのダウンロードとインストールのやり方

まずは子テーマをダウンロードしてインストールしてしてください。カスタマイズしていくにあたり重要なことです。

親テーマにある特定のファイルを子テーマへアップロード

sidebar.phpを子テーマへアップロードしてください。

リンク Stinger7で特定の親テーマのファイルを子テーマへアップロードする方法

カスタマイズ

順に説明していきます。

sidebar.php

外観→テーマ編集→sidebar.phpの26行目の <?php } ?> の下へ以下をコピペ。見ているPCにもよりますので、26行目で見つかなければその近辺25行目や27行目にある<?php } ?>を探してください。コピペしたら ファイルを更新 をクリックします。

英語プロフィールへのリンク↓

は、あってもなくても問題ないですが、リンクをどこかへ飛ばしたい時はご自身が指定するリンクを入れれば飛びます。

プロフィールにしたい画像をアップロード

メディア→新規追加

Stinger7の右サイドバーでプロフィールをカスタマイズ メディア新規追加

ファイル選択

Stinger7の右サイドバーでプロフィールをカスタマイズ メディアファイル選択

プロフィールにしたい画像をダブルクリック

Stinger7の右サイドバーでプロフィールをカスタマイズ 画像選択

ファイルがアップロードされました。一番右にある編集をクリック

Stinger7の右サイドバーでプロフィールをカスタマイズ 編集

画面右にあるファイルのURLを すべてコピー
Stinger7の右サイドバーでプロフィールをカスタマイズ すべてをコピー

sidebar.phpへ戻り すべてコピー したものをsidebar.phpにある <img src=""> のダブルクォーテーションの間に 貼り付けてください。貼り付けたら ファイルを更新 をクリックします。

 

Stinger7プロフィール反映

ご自身のブログを見てみてください。反映されました。ですが、これだと画像が大きくて個人的にあまり好きではありませんので、これで問題ない方は以下のCSSを記述しなくても問題ございませんので、これで終わりです。

CSS

Stinger7プロフィールカスタマイズ

反映されました。左上に自身の画像の枠を border-radius で丸くして、その右に float: left; でプロフィール文章を表示しました。

まとめ

一般的なブログではないプロフィール画像のカスタマイズでした。プロフィール画像を大きくするとすごい自分をアピールしている感が強いと思ったので、好きではありません。それはそれでいいんですが、画像を少し小さくするだけでもサイト訪問者にとって、印象は大きく変わってきますので、ぜひ、参考にしてください。

シェアしていただけると助かります。

 - Stinger7, カスタマイズ