WordPressのブログタイトルを画像化する方法　【Twenty Fourteen,Twenty Twelve,Twenty Eleven対応】

2012/09/102014/05/15

WordPress

code

WordPress3.9の標準テーマの「Twenty Fourteen 1.1」で確認しました。
WordPress3.5の標準テーマの「Twenty Twelve 1.1」で確認しました。
WordPress3.4の標準テーマの「Twenty Eleven 1.4」で確認しました。

Twenty Fourteen,Twenty Twelveの場合

style.cssに以下を追加する

.site-description {display:none;}
.site-title a {
  height: 0px;
  display: block;
  overflow: hidden;
  width: 160px; /*画像の横幅*/
  padding-top: 45px; /*画像の縦幅*/
  margin-top:0px; /*表示位置の縦の調整*/
  background: url(https://3.bp.blogspot.com/-tYLotoPZTKY/VgVeCNE9aEI/AAAAAAAAeZ4/Tw6wyuh23xY/s1600/twenty-eleven_9469-01.png) no-repeat left top;   
}

画像は横幅300pxよりも小さいもののほうが良いかと思います。
スマートフォンで見た時の横幅よりも小さい方がしっくり収まります。

Twenty Fourteenの場合は、160x45ぐらいのサイズがよいかと思います。
※サンプルは、Twenty Fourteen向けに書いています。
※最終行の「background: url(画像)」を置き換えたい画像に置き換えてくださいね

Twenty Elevenの場合

style.cssに以下を追加する

/* タイトルを画像に変更 追加*/
#header #site-title{ padding-left: 0px; }
#site-description {display:none;}
#site-title a {
 height: 0px;
 display: block;
 overflow: hidden;
 width: 400px; /*画像の横幅*/
 padding-top: 100px; /*画像の高さ*/
 background: url(images/logo.png) no-repeat left top; 
}