サイト名をロゴに変えると、サイトのイメージが一気に変わってきます。「Twenty Thirteen」でサイトのロゴをヘッダーに表示します。
はじめに
「Twenty Thirteen」でサイトのロゴをヘッダーに表示します。
・サイトのロゴ画像を準備
・スタイルシート(style.css)でリストマーカーを表示
サイトのロゴ画像を準備
サイトのロゴ画像を用意し、WordPressのimagesフォルダにアップロードします。
テンプレート(header.php)でロゴ画像を設定
テンプレート(header.php)でサイト名の代わりに、ロゴ画像を設定します。
<設定例>
<header id="masthead" class="site-header" role="banner"> <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <div class="site-title" id="logo"><img src="/images/site_logo.png" alt="<?php bloginfo( 'name' ); ?>"></div> <div class="site-description"><?php bloginfo( 'description' ); ?></div> </a>
スタイルシート(style.css)でロゴ画像の位置を調整
スタイルシート(style.css)でロゴ画像の位置の調整を行います。サイト説明(キャプション)も合わせて調整します。
<使用例>
.site-title { font-size: 32px; font-weight: bold; line-height: 1; margin: 0; padding: 24px 0 6px; text-shadow: 3px 6px 6px rgba(0,0,0,0.2), 0px -5px 16px rgba(255,255,255,0.3); } .site-description { font: 300 normal 14px Osaka-mono, "MS Gothic", monospace; margin: 0; padding: 3px 12px; text-shadow: 3px 6px 6px rgba(0,0,0,0.2), 0px -5px 16px rgba(255,255,255,0.3); }
おわりに
「Twenty Thirteen」でサイトのロゴをヘッダーに表示しました。サイトの顔になる部分ということもあり、ロゴの図案作成に一番時間がかかりました。
関連記事(Twenty Thirteenの各部個別の表示をカスタマイズ)
- Twenty Thirteenのメニューから検索フォームを削除
- Twenty Thirteenのフッターにコピーライトを表示
- Twenty Thirteenで見出しのデザインを変更
- Twenty Thirteenで記事に枠を表示
- Twenty Thirteenでリストマーカーに画像を設定
- Twenty Thirteenでサイトのロゴをヘッダーに表示