ブログのタイトルをテキストから画像に変更する

!

2015-03-14現在は WordPress.com の標準機能でロゴ画像を設置することができるようになっています。

最近、ブログのタイトルをテキストから画像に変更したので、その覚書です。

adsfafadfdas

rect3015

sadfadf

画像は、iPadUPAD というアプリで描きました。このアプリは普段、ブログのネタ帳として使っているもので、その流れで描いてみたのですが、描いている終盤あたりは結構、動作が重くなりました。そういうわけで、このアプリはお絵かきにはあまり向いていないようです。

adsfafdas

描いた画像を WordPress.com のメディアへアップロードし、以下の CSS を CSS スタイルシートエディターへ追加しました。

#site-title span a {
    text-indent: -9999px;
	background-image: url('https://comemo508.files.wordpress.com/2013/07/img_0556-png.jpg');
	background-position: left 70%;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	width: 50%;
	height: 60px;
	margin-left: -3%;
	margin-bottom: 0 !important;
}

#site-title a:hover {
    opacity: 0.6;
}

「#site-title」の方へ画像を設定すると、画像にリンクがつかなくなるので、「#site-title span a」の方へ画像を設定しました。

労力のほとんどは各ブラウザでの位置調整でした。

#2013