yuichi.co

ゆういちのノートブック

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

 2576

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

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

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

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



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

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

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

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

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

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

カスタマイズ

順に説明していきます。

sidebar.php

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

<h4 class="menu_underh2"> プロフィール</h4>
	<div class="textwidget">
		<span class="profile">
			<img src="https://yuichi.co/wp-content/uploads/2016/02/me.png">
		</span>
	<p>暇人の雑記です。20代後半、男、某大学体育学部武道学科→商社→自営業→セブへ留学→独学でWebの勉強→自営業→今に至る 中学校体育教論免許、高等学校体育教論免許、身体障害者2級取得。クラウドワークスやCoconalaでHP製作したり、修正したりしています。英語プロフィール→<a href="http://iam.yuichi.co">Hi. I am Yuichi.</a></p>
	</div>

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

<a href="http://iam.yuichi.co">Hi. I am Yuichi.</a>

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

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

メディア→新規追加

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

ファイル選択

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

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

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

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

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

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

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

 <img src="ここに すべてコピー したものを貼り付ける">

 

Stinger7プロフィール反映

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

CSS

span.profile img {
    margin: 0px 15px 10px 15px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: start;
    float: left;
}

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

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

まとめ

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

Stinger7 カスタマイズ