はてさて、ブログテーマをStinger7に更新し、少しずつブログ更新にやる気がでてきたところで
プロフィールの画像や文書などを追加してみた!
他のブログも参考にしたところもあるので、そちらの方がわかりやすくていいかもしれない
またsidebar.phpとウィジェットを使ってのプロフィールの追加の仕方も紹介します
sidebar.phpにプロフィールを追加するに当たって
プロフィールを追加するのですが、画像付きの方が親切設計なので、プロフィール画像を先にメディアにウップロードしておきます
ウップロードしたら、Stinger7の子テーマのsidebar.phpに以下のコードを打ち込む
※バックアップは推奨
<h4 class="menu_underh2"> プロフィール</h4> <div class="textwidget"> <span class="profile"> <img src="ここにメディアにUPしたプロフィール画像のURLを指定"> </span> <p>ここに自己PRを追加する</p> </div>
こんな感じにコピーします
んでもって、sidebar.phpに上記のコードを記載するのだが
以下のコード付近に先ほどのコードを追加する
※28行付近にあります
<?php endif; ?> </div> <?php } ?> ここに上記のコードを記述 <?php if ( $GLOBALS["stdata16"] === '' ) { ?> <!-- RSSボタンです -->
わしの場合だと以下のようにしてます
<h4 class="menu_underh2"> プロフィール</h4> <div class="textwidget"> <span class="profile"> <center><img src="画像URL" width="180" height="180"></center> </span> <p>管理人のreinyanです<p/> <p>色々役に立ちそうな情報を発信しています。暇だったら雑記でも書いてます</p> </div>
ここで少しいじっているところがあります
<center></center>と【width="180" height="180"】
この二つのコードです
- centerタグは画像を真ん中に寄せる
- width="180" height="180"は画像の大きさ指定
以下の画像のようにかっこよくサイドバーにプロフィールが追加されましたね!
ウィジェットを使ってのプロフィール追加のやり方
STINGER7のサイドバーを弄るために
「外観」→「ウィジェット」に行きます
移動した後に「テキスト」を選びコードを打ちます
テキストに先ほどの「sidebar.php」のような感じにコードをうちます
<center><img src="画像URL" width="180" height="180"></center> <br> ここに自己PRを記載する