photo credit: silgeo via photopin cc
CSSとかPHPがよく分かっていないまま適当な感じに触ってる凛(@rin_wan)です。
よく分からないまま触って表示を崩してを繰り返してなーんとなく分かってきたので、なーんとなくのお話をお裾分けします！今回はブログの顔であるブログタイトル周りのお話ですよ！
ブログタイトル横に画像！
まずはブログタイトル横にお気に入りの画像を表示してみましょー！！
ブログタイトル横というのはりんろぐ。で言えば2匹のわんこの事です。
そう、可愛いもふもふとしたわんこなんですよねー。こちらは可愛く描いていただいたアイコンですヾ(o´∀｀o)ﾉ
ソースを確認！
今回確認するのは「header.php」ですよ。テキストエディタで開いてくださいねー！
現時点での最新テーマ”Stinger２ 20130815ver”では131行目付近にあるコードがブログタイトル周りに関する部分です♪
凛さんのざっくり解説コーナー！
ざっくり言っちゃうと「タイトルはトップページのURLにリンクさせるからね！」という部分（A）と「ブログのサブタイトルはページによって衣装を少し変えるよ！」という部分（B）という感じです。
それぞれのパーツを解説してみますよ。
Aパーツ
部分Aはこちら。
1行目：もし表示しているページがブログのトップページだったら…という仮定のお話。
2行目：衣装はdescrを着ますよ！そして表示はh1タグだよ！の意味。
3行目：Wordpressの設定＞一般設定＞キャッチフレーズで設定したブログのサブタイトルや説明を表示するよ！の意味。
4行目：h1表示はここまでだよ！の意味。
6行目：1行目のもし…がそうじゃなかったら…の別の選択肢のお話。
8行目：descrの衣装を着る段落だよ！の意味。
9行目：表示する文字は3行目と同じサブタイトルや説明だよ！の意味。
10行目：段落はここまで。
11行目：PHPの魔法はここまで。
13行目：Aパートで宣言していたh-1エリアはここまで。という意味。
いやー脳が疲れましたね…ｗまぁこれでブログタイトルがどこに表示されているのかが分かりましたねー♪
次はいよいよブログタイトルの両脇に画像を表示してみましょう！
ブログタイトル脇に画像を置いてみる！
要はAパートの4行目のブログタイトルの前後に画像タグを挿入すればいいってことですよーヾ(*´∀｀*)ﾉ
ということでAパートの部分をこんな風に変更してみましょ。
※書き方によってはブログタイトルが残念な感じになったり表示が恐ろしい事になる事も。必ず作業前にバックアップをお忘れなく！！
/*タイトル画像 左側 /*ブログタイトル /*タイトル画像 右側
4行目と6行目を全く同じ内容にすればタイトル両側に同じ画像が出てきます。わんこは2匹でもっふもふもふ！！
あら簡単〜ｖ(*´∀｀*)ｖ
もし画像が表示されなかったり、変な×印が出てきたら
・画像のURLが間違っている
・widthとheightのサイズが画像ファイルと大幅に違う
なんて可能性があります。再度確認してみましょー！！ちなみに私はどちらも体験済みです！！ふふふ。応用編！
Bパートを見てなーんとなく分かる方は、トップページとそれ以外のページで表示されるブログの説明表記を変更が可能です。
style.cssで「descr」を探して色々変えてみると違う感じになるかも( ●´艸`)
凛的まとめ
・ブログタイトルのタグを探せ！
・ブログタイトルの左右に画像タグを置く！！
・サイズやURLに気をつけて！！！いかがでしたかー？呪文に見えても1つずつバラすと意外と怖くない♪
でもこれ1人でやると体力と気力と目の潤いが奪われるんですよね…休憩入れつつ挑戦してみてくださいねー！
いやいや、ここ説明違うしｗｗとニヤニヤした先輩方、どうかこっそり凛(@rin_wan)まで教えてやって下さいｗ
次の記事もお楽しみに〜(*｀･ω･)ゞ
