サポート » 使い方全般 » Blogタイトルを画像化

Blogタイトルを画像化

  • kikuti

    (@kikuti)


    13年、 10ヶ月前

    wp.vicunaのテーマ+monoスキンを使用しております。
    http://wp.vicuna.jp/download/apply-vicuna/

    ブログタイトル部分を現在のテキストから画像に変更したく、
    title.pngというファイル名でサーバーの上げました。

    index.phpの中に

    <div id="main">
		<p class="topicPath"><a href="<?php bloginfo('home')?>" title="<?php _e('Home', 'vicuna')?>"><?php _e('Home', 'vicuna')?></a></p>
		<h1><?php bloginfo('name')?></h1>
<?php while (have_posts()): the_post()?>
		<div class="section entry" id="entry<?php the_ID()?>">

    の記述があり、その中の
    <h1><?php bloginfo('name')?></h1>
    の部分を

    <h1>
<img src="<?php bloginfo('template_url'); ?>/images/title.png" />
</h1>

    に変更してみましたが、画像が表示されません。

    私の記述が間違えているのか、記述場所が違うのかわかりません。
    なんとか画像を表示させたいのですが、
    どなたか詳しい方がいらっしゃいましたらお教えいただけると幸いです。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • shokun0803

    (@shokun0803)

    13年、 10ヶ月前

    私の記述が間違えているのか、記述場所が違うのかわかりません。

    まずはですね、表示されない時のソースを実際に見てみるのです。
    そこに<h1><img></h1>タグがちゃんとあれば記述場所の間違いではないでしょう。なければ記述場所、方法などが間違っています。

    次に、その<img>タグにちゃんと画像までのURLが記述されているか、されていなければ同じく記述の間違いです。

    最後にその画像までのURLを実際にブラウザにコピペしてみて画像が表示されるか、されなければそこに画像がありません。もしくはURLの間違いですね。

    ここまで確認して画像が表示されない場合、案外cssとかで消されてるかもしれません。ソースコードとにらめっこしてみましょう;)

    トピック投稿者 kikuti

    (@kikuti)

    13年、 10ヶ月前

    shokun0803　さま

    ご回答ありがとうございます。
    ソースを見ると
    <h1>ブログタイトル</h1>
    で、imgが入っておらず、ただのブログタイトルだけが<h1>で囲まれています。

    以下の感じで
    http://ブログタイトル/wp-content/themes/wp.vicuna/images/title.png
    ブラウザでタイトルイメージは表示されます。

    shokun0803

    (@shokun0803)

    13年、 10ヶ月前

    ソースを見ると
    <h1>ブログタイトル</h1>
    で、imgが入っておらず、ただのブログタイトルだけが<h1>で囲まれています。

    それは変ですね。ちゃんとファイル（index.php）はアップロードされていますか？
    コードを確認した所、別に分岐とかも行っていないようですので、<h1>タグの中身が変わらないはずはないと思います。

    普通に<h1>何かタイトルをじか書き</h1>とかしても変わりませんか？

    トピック投稿者 kikuti

    (@kikuti)

    13年、 10ヶ月前

    失礼いたしました。

    サーバーにはキチンとアップロードされているのを確認しました。

    改めてソースを確認すると、
    <h1><img src="http://ブログタイトル/wp-content/themes/wp.vicuna/images/title.png" /></h1>
    ときちんとイメージが認識されているようです。

    shokun0803

    (@shokun0803)

    13年、 10ヶ月前

    解決ですか？解決なら*解決済み*にしていただけると助かります。

    もしまだ表示されていないと言うのであれば、おそらくwp.vicuna/skins/style-monoにあるcore.cssあたりが関係しているのではないでしょうかね。

    body.mainIndex h1 {
	display: none;
}

    の記述が見受けられます。

    トピック投稿者 kikuti

    (@kikuti)

    13年、 10ヶ月前

    いろいろ調べていただきまして感謝致します。

    まだ解決には格っていない状況です。

    ご指摘のnoneの部分をactiveに変更してみたのですが、
    まだ表示されておりません。

    もう少しねばってみます。

    shokun0803

    (@shokun0803)

    13年、 10ヶ月前

    ご指摘のnoneの部分をactiveに変更してみたのですが

    displayにそんな指定ありましたっけ？

    トピック投稿者 kikuti

    (@kikuti)

    13年、 10ヶ月前

    まちがえました、activeではなくblockです。

    shokun0803

    (@shokun0803)

    13年、 10ヶ月前

    FirefoxのFirebugで何のcssが摘要されているか調べれば一発ですよ。

    トピック投稿者 kikuti

    (@kikuti)

    13年、 10ヶ月前

    こちらの解説を見つけまして、
    http://vicuna.jp/storage/document/customize/image-replacement/

    その中の説明で、

    まず、お使いのスキンファイル、3-context.cssを開き、3-1-1付近にサイトタイトルに関しての次の定義を見つけます。

div#header p.siteName a {
.
.
}

この部分を次のように編集します。

div#header p.siteName a {
  display: block;
  width: 200px; /* 画像の幅 */
  text-indent: -9999px; /* textを飛ばす */
  outline: none; /* クリック時の枠線を消す */
  background-image: url(images/hogehoge.gif);
  background-repeat: no-repeat;
  background-position: 0px 0px; /* point 位置調整 */
  border-bottom: none;
  padding-bottom: 10px; /* 画像の高さに合わせて調整 */
}

上記の指定により、a要素内のテキストは表示されなくなり、変わりに背景画像としてサイトタイトルが表示されます。

    の通りやってみようと、最初に編集をしたindex.phpをデフォルトに戻し、
    かつ、先ほど編集したh1部分もデフォに戻し、
    上記説明を当方使用のスキンに置き換えて割り当ててみましたが、
    どうしても変更できない状態が続いております。

    やはり、wp.vicunaのテーマ+monoスキンを使用してタイトルに画像を使っている方の
    記述を教えてもらわないとダメなのかもしれませんね。
    同じ環境のサイトは沢山見かけるのですが・・・・・。

    showBOO

    (@showboo)

    13年、 10ヶ月前

    background-image: url(images/hogehoge.gif);の部分を、

background-image: url(http://ブログタイトル/wp-content/themes/wp.vicuna/images/title.png);

    としたら出ませんか？

    トピック投稿者 kikuti

    (@kikuti)

    13年、 10ヶ月前

    ご回答ありがとうございます。

    少し進展しました。

    showBOO　さまのご指摘の通り、

    background-image: url(http://ブログタイトル/wp-content/themes/wp.vicuna/images/title.png);
    に変更してみましたところイメージ画像が表示されるようになりました。
    しかし、イメージの上に従来のテキストタイトルが覆いかぶさっているような感じで
    二重に表示されてしまいます。

    まさか完全URLでイメージが表示されるようになるとは、まさに灯台下暗しで、
    かなりの進展なのですが、また新たな問題と格闘中です。

    shokun0803

    (@shokun0803)

    13年、 10ヶ月前

    div#header p.siteName a {って、そもそも<h1>の部分じゃないんですけどねぇ。
    以前のdisplayをnone;に戻すといいかもです。

    ソースを見る限り<h1>タグは便宜上置いておいて、タイトル画像は別の方法で上に乗っけているだけですね。SEO対策でしょうか。
    cssをちゃんと理解できていればそんなに難しくない修正のようです。がんばってみましょう;)

    cssはcssファイルのある場所から階層をたどります。指定が面倒ならルートから指定してみましょう。（”/”スラッシュからURLをはじめればルートから指定できます）

    showBOO

    (@showboo)

    13年、 10ヶ月前

    私もvicunaのテーマを使ってますが、
    http://wp.vicuna.jp/download/apply-vicuna/
    にあるテーマは最近アップグレードした高機能なものになってますよね。
    （管理画面からいろいろ変更ができるとか）

    以前のテーマディレクトリに新しい物を上書きされたとかないですか？
    上書きして、新しいテーマと古いテーマが混在してしまっているとか。

    3-context.cssというのは、以前の形式だったような気がします。
    （間違いだったらすみません・・・）

    トピック投稿者 kikuti

    (@kikuti)

    13年、 10ヶ月前

    ご回答ありがとうございます。

    確かに私の使っているvicunaは最近アップグレードされたもののようです。
    管理画面（ダッシュボード)上からスキンの適用やレイアウト変更の出来るタイプです。
    ただ、この部分には今回の問題の解決になるような設定項目はないようです。

    以前から他のテーマでWordPressは使っているのですが、今回は新しく開設したブログの為、
    テーマディレクトリは、デフォルトのテーマと当該テーマ以外、入れておりませんので、
    上書き等の問題はないと思います。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「Blogタイトルを画像化」には新たに返信することはできません。

トピックタグ

表示