タイトルのテキストを画像に変えたい

(@investwalker)

wordpress初心者です。公開テーマをお借りしてインストールをしました。
タイトルがテキストなので、画像タイトルに変更したいと思い、いろいろ思考錯誤したのですが出来ませんでした。スタイルシートとヘッダーをどのように修正したら良いでしょうか。
いろいろ事例を試したのですが判りませんでした。

——–style.css——–

#header {

	width: 960px;
	height: 110px;
	color: #888888;
	font-size: 14px;
	font-weight: normal;
	margin: 0px auto 0px;
	padding: 0px;
	overflow: hidden;
	}

#header p {
	padding: 0px 0px 5px 0px;
	margin: 0px;
	line-height: 20px;
	}

#header h1 {
	color: #FFFFFF;
	font-size: 40px;
	font-family: Times New Roman, Georgia, Trebuchet MS;
	font-weight: normal;
	margin: 0px;
	padding: 20px 0px 0px 0px;
	text-decoration: none;
	}

#header h1 a, #header h1 a:visited {
	color: #EEEEEE;
	font-size: 40px;
	font-family: Times New Roman, Georgia, Trebuchet MS;
	font-weight: normal;
	margin: 0px;
	padding: 20px 0px 0px 0px;
	text-decoration: none;
	}

#header h1 a:hover {
	color: #CCCCCC;
	text-decoration: none;
	}

.headerleft {
	width: 450px;
	float: left;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	}

.headerright {
	width: 500px;
	float: right;
	margin: 0px;
	padding: 10px 0px 0px 0px;
	text-align: right;
	}

.headerright a, .headerright a:visited {
	color: #EEEEEE;
	font-size: 11px;
	text-decoration: none;
	padding: 0px 0px 0px 3px;
	}

.headerright a:hover {
	color: #DDDDDD;
	text-decoration: none;
	}

.headerright a img {
	border: none;
	margin: 0px 0px 3px 0px;
	padding: 0px;
	}

————-header.php—————————

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="distribution" content="global" />
<meta name="robots" content="follow, all" />
<meta name="language" content="en, sv" />

<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats please -->

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
<style type="text/css" media="screen"><!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); --></style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
	if (!document.getElementsByTagName) return false;
	var sfEls = document.getElementById("nav").getElementsByTagName("li");

	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

</head>

<body>

<div id="header">

	<div class="headerleft">
		<h1><a>/"><?php bloginfo('name'); ?></a></h1>
		<?php bloginfo('description'); ?>
	</div>

	<div class="headerright">
		<p><a>"><img style="vertical-align:middle" src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Subscribe to <?php bloginfo('name'); ?>" /></a><a>">RSS Feed</a><a>"><img style="vertical-align:middle;margin-left:10px;" src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Subscribe to <?php bloginfo('name'); ?>" /></a><a>">Comments</a></p>
		<!--
		Remove arrows and place code for a 468x60 banner here
		-->
	</div>

</div>

<div id="navbar">

	<div id="navbarleft">
		<ul id="nav">

<li><a>">Home</a></li>
			<?php wp_list_pages('title_li=&depth=2&sort_column=menu_order'); ?>

	</div>

	<div id="navbarright">
		<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
		<input type="text" value="Type here to search..." name="s" id="s" onfocus="if (this.value == 'Type here to search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Type here to search...';}" />
		<input type="submit" id="sbutton" value="search" /></form>
	</div>

</div>

<div id="wrap">

————————————————–

3件の返信を表示中 - 1 - 3件目 (全3件中)

Junko Nukaga
(@nukaga)

10年前

方法のうちの一つですが

header.php側で
<h1>/"><?php bloginfo('name'); ?></h1>
のh1タグで囲まれている部分をの
<?php bloginfo('name'); ?>
を削除し差し替えたい画像のパスに変更すればできると思います。

画像のパスについては相対パスでは表示されないのでお気をつけ下さい。

template_urlもしくはstylesheet_directoryを使うと良いでしょう。
<h1>/"><img src="<?php bloginfo('stylesheet_directory'); ?>/テーマのフォルダ画像のパス" alt="<?php bloginfo('name'); ?>" /></h1>
という形になります。

Junko Nukaga
(@nukaga)

10年前

投稿頂いたソースがcodeで囲まれていないようです。
表示に崩れが出ているのでコードは 逆クォート で囲ってください。
FUKAZAWA Kojiro
(@witch_doktor)

10年前
こんにちは。
- どのテーマを利用しているかを提示してもらえると調べやすいです。
- コードを書き込むときは「逆クォート」で囲んでください。入力欄の上にある「code」ボタンを利用すると簡単です。でないと、このページのようにhtmlなどが影響して崩れます。
まず、そのテーマにタイトルを画像にする機能は備わってないのかをよくご確認ください。できないならば、header.phpの

<h1>/"><?php bloginfo('name'); ?></h1>

の部分をさわってh1の中身を画像に変えるのがてっとり早い解決法です。

3件の返信を表示中 - 1 - 3件目 (全3件中)

トピック「タイトルのテキストを画像に変えたい」には新たに返信することはできません。

トピックタグ

表示