ポートフォリオサイトのヘッダーにロゴ画像を置く

WordPress 制作実習 授業

ひと足ずつ。今頃、ってツッコミは言わない方向で。

今日実現したこと

  • ヘッダーにロゴ画像を置く

参考にさせていただいた記事→http://www.coralreference.com/archives/156

まずスタイルシート (style.css)に下記を記述。

#titlelogo {
	float:left;
	width:250px;
	height: 150px;
	text-align: left;
	margin: 0  0 30px 30px;
}

#blogtitle {

中略

}

#blogdescription {

中略

}

ヘッダーの画像用にタグid「titlelogo」の設定をする。
そして気づいたのが、
タイトルに「h1」使ってないってこと。

この文書構造なのも当然か。

<div id="title">
<div id="titlelogo"><a href="<?php echo esc_url( home_url() ); ?>"><img src="http://calluson.main.jp/wp-content/uploads/calluson_logo.png" width="250" height="150" /></a></div>
<div id="blogtitle"><a href="<?php echo esc_url( home_url() ); ?>"><?php echo bloginfo('name'); ?></a></div>
<div id="blogdescription"><?php echo bloginfo('description'); ?></div>
</div>

ひとまずこれで、こう並べたいんだ、は実現。

残りはいよいよnivo実装…。
「難しいよ！」
とすでに宣告されているので、
たいへん敷居が高い感じ…。

フッターも何とかしないと、です。

OverStudy

  • リンクホバー時のアクション

マーカーラインぽく背景色つけました。

  • サイト幅を現行最多の960pxに変更

とりたてて狭く感じないので、最初の設定が1080pxだったことの方が信じられない（笑）。