• 解決済 pippe

    (@pippe)


    超初心者です。気分を害してしまったら申し訳ないですが、是非おしえてください。

    現在、テーマはSupemiを使用しており、ブログのタイトル部分を画像に変更しようと思ったのですが、どこにタグを入れていいのかまったくわかりません。
    ヘッダー部は以下の通りです。

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”http://www.w3.org/1999/xhtml&#8221; <?php language_attributes() ?>>
    <head profile=”http://gmpg.org/xfn/11″&gt;
    <title><?php wp_title(); ?> ¶ <?php bloginfo(‘name’); ?> </title>
    <meta http-equiv=”content-type” content=”<?php bloginfo(‘html_type’) ?>; charset=<?php bloginfo(‘charset’) ?>” />
    <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_url’) ?>” />
    <?php wp_head() // For plugins ?>
    <link rel=”alternate” type=”application/rss+xml” href=”<?php bloginfo(‘rss2_url’) ?>” title=”<?php printf( __( ‘%s latest posts’, ‘sandbox’ ), wp_specialchars( get_bloginfo(‘name’), 1 ) ) ?>” />
    <link rel=”alternate” type=”application/rss+xml” href=”<?php bloginfo(‘comments_rss2_url’) ?>” title=”<?php printf( __( ‘%s latest comments’, ‘sandbox’ ), wp_specialchars( get_bloginfo(‘name’), 1 ) ) ?>” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’) ?>” />
    </head>

    <body>

    <div id=”header_supemi”>

    <div id=”subheader_supemi”>

    <div id=”subheadernav_supemi”>

    <?php
    if(function_exists(‘bcn_display’))
    {
    bcn_display();
    }
    ?>

    </div>

    <div id=”subheaderforms_supemi”>

    <form method=”get” action=”<?php bloginfo(‘url’); ?>/”>
    <label class=”hidden”><input type=”text” value=”<?php the_search_query(); ?>” name=”s” />
    <input type=”submit” value=”Where?” /></label>
    </form>

    </div>

    </div>

    <h1 id=”blog_title_supemi”>/” rel=”home”><?php bloginfo(‘name’) ?></h1>

    <?php bloginfo(‘description’); ?>

    </div>

    フォーラムや他サイトも参考にしたのですが、
    このテーマにはもともと画像がついておらず、それらの該当箇所が理解できませんでした。

    お力添えいただけたらありがたいです、、、。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック投稿者 pippe

    (@pippe)

    すみません。ところどころめちゃめちゃでした。

    <!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" <?php language_attributes() ?>>
    <head profile="http://gmpg.org/xfn/11">
    	<title><?php wp_title(); ?> &para; <?php bloginfo('name'); ?> </title>
    	<meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
    	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>" />
    <?php wp_head() // For plugins ?>
    	<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url') ?>" title="<?php printf( __( '%s latest posts', 'sandbox' ), wp_specialchars( get_bloginfo('name'), 1 ) ) ?>" />
    	<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'sandbox' ), wp_specialchars( get_bloginfo('name'), 1 ) ) ?>" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url') ?>" />
    </head>
    
    <body>
    
    <div id="header_supemi">
    
    <div id="subheader_supemi">
    
    <div id="subheadernav_supemi">
    
    <?php
    if(function_exists('bcn_display'))
    {
    	bcn_display();
    }
    ?>
    
    </div>
    
    <div id="subheaderforms_supemi">
    
    <form method="get" action="<?php bloginfo('url'); ?>/">
    <label class="hidden"><input type="text" value="<?php the_search_query(); ?>" name="s" />
    <input type="submit" value="Where?" /></label>
    </form>
    
    </div>
    
    </div>
    
    <h1 id="blog_title_supemi"><a id="blog_title_text_supemi" href="<?php bloginfo('home') ?>/" rel="home"><?php bloginfo('name') ?></a></h1>
    
    <?php bloginfo('description'); ?>
    
    </div>

    下から3行目ぐらいの、<h1>タグの部分がタイトルになりますので、<a>タグで囲まれている間の、<?php bloginfo(‘name’) ?>を消して<img>タグで画像を張り込めばOKです。
    CSSでの微調整は必要かもしれませんが。

    トピック投稿者 pippe

    (@pippe)

    早速ありがとうございます!
    試してみたのですが、タイトル部に全く何も表示されない状態になりました、、、。
    画像をアップロードしたのはThemeの中の使用しているテーマのフォールダーの直下です。
    アップロードした場所にも問題があるのでしょうか。

    トピック投稿者 pippe

    (@pippe)

    たびたびすみません、CSSも一部のせておきます。

    */
    
    /* ####################
    GENERAL
    #################### */
    
    body
    {
    background-color:white;  /*  I normally wouldn't set this, but my screengrabber doesn't take if I don't define a color.  */
    margin:0;
    }
    
    img {
    border: 0;
    }
    
    #fourohfour_supemi {		/*  Body of 404.  */
    font-size: xx-large;
    text-align:center;
    margin-bottom:25px;
    }
    
    #fourohfour_nav_supemi {	/*  Header nav of 404.  */
    text-align:center;
    margin-top:60px;
    margin-bottom:60px;
    font-family:serif;
    }
    
    /* ####################
    EVERYTHING INSIDE
    #################### */
    
    #everything_inside_supemi {	/*  Everything inside, all the content between header and footer.  */
    margin:0 auto;
    padding-bottom:60px;
    overflow:hidden;
    width:800px;
    }
    
    /* ####################
    TOP (POSTS)
    #################### */
    
    #top_container_supemi {		/*  Div containing 1.  Date positioning div, 2.  Blog post positioning div.  */
    overflow:hidden;
    }
    
    .date_supemi {			/*  1.  Date positioning div.  */
    width:130px;
    float:left;
    text-align:right;
    }
    
    /*  Nothing here.  */		/*  2.  Blog post positioning div is actually an inline style.  Why?  See: http://wordpress.org/support/topic/270619  */
    
    /* ####################
    BOTTOM (SIDEBARS)
    #################### */
    
    #bottom_container_supemi {	/*  Div containing 1.  Left sidebar positioning div, 2.  Right sidebar positioning div.  */
    margin-right:150px;
    margin-left:150px;
    }
    
    #left_sidebar_supemi {		/*  1.  Left sidebar positioning div.  */
    width:49%;
    float:left;
    margin-left:-40px;
    }
    
    #right_sidebar_supemi {		/*  2.  Right sidebar positioning div.  */
    width:49%;
    float:right;
    margin-right:40px;
    }
    
    /* ####################
    HEADER/FOOTER
    #################### */
    
    #header_supemi {		/*  Positions header.  */
    text-align:center;
    margin-bottom:60px;
    }
    
    #subheader_supemi {		/*  Positions extra-title bits of the header.  */
    overflow: hidden;
    width: 100%;
    }
    
    #subheadernav_supemi {		/*  Positions breadcrumb.  */
    width: 48%;
    float: left;
    text-align: left;
    padding:5px;
    }
    
    #subheaderforms_supemi {	/*  Positions forms (search, etc.)  */
    width: 48%;
    float: right;
    text-align: right;
    padding:5px;
    }
    
    #footer_supemi {		/*  Positions footer.  */
    clear:both;
    text-align:center;
    padding-top:15px;
    padding-bottom:1px;
    }
    
    /* ####################
    FIXES (CORRECTIONS FOR GLITCHES)
    #################### */
    
    .go_up_supemi {			/*  Makes sure post titles align to top with dates.  */
    margin-top:0;
    }
    
    .navigation {			/*  Positions navigation.  */
    text-align:center;
    width : 500px;
    margin-left : 150px;
    margin-right : 150px;
    padding-bottom : 60px;
    }
    
    #comment {			/*  Adjusts width of comment box.  */
    width:500px;
    }
    
    /* ####################
    READABILITY
    #################### */
    
    .date_supemi {			/*  Date typography.  */
    font-weight:bold;
    font-size:1.5em;
    }
    
    #meta_info_supemi {		/*  "single.php" meta info typography.  */
    font-size:x-small;
    font-weight:bold;
    }
    
    #top_container_supemi {		/*  Justifies text around pics.  */
    text-align:justify;
    }
    
    .go_bold_supemi {		/*  Bolds things and spaces them apart when needed.  */
    font-weight:bold;
    margin-top:60px;
    margin-bottom:15px;
    }
    
    .avatar {			/*  Spaces avatars in relation to comments.  */
    float:right;
    padding-left:5px;
    }
    
    .each_comment_supemi {		/*  Spaces comments apart.  */
    border-top:1px solid;
    margin-bottom:15px;
    padding-top:15px;
    }
    
    #respond_supemi {		/*  Spaces response fields down from rest of the page.  */
    margin-top:60px;
    }
    
    .sticky {			/*  Sticky post typography.  */
    font-size:x-large;
    }
    
    /* ####################
    OPTIONAL
    #################### */
    
    #blog_title_supemi {			/*  Typography and spacing of blog title to stand out.  */
    font-size:3em;
    text-transform:uppercase;
    margin-top:60px;
    }		
    
    a:link#blog_title_text_supemi {		/*  Styles link if blog title is text.  Comment this entire section out if your title isn't text, such as a graphic.  */
    color:black;
    text-decoration:none;
    }
    a:visited#blog_title_text_supemi {
    color:black;
    text-decoration:none;
    }
    a:active#blog_title_text_supemi {
    color:white;
    text-decoration:none;
    background-color:black;
    }
    a:hover#blog_title_text_supemi {
    color:white;
    text-decoration:none;
    background-color:black;
    }
    
    #everything_inside_supemi {		/*  Typography everything inside.  Distinguishes it from header/footer.  */
    font-family: sans-serif;
    }
    
    #subheadernav_supemi, #subheaderforms_supemi, #footer_supemi, .navigation {	/* Typography of header/footer div. Distinguishes it from everything inside.  */
    font-family:garamond, georgia, "times new roman", serif;
    }
    
    .comment_text_supemi {			/*  Pretties up comment-to-avatar spacing by justifying.  */
    text-align:justify;
    }
    
    #left_sidebar_supemi,#right_sidebar_supemi {		/*  Sidebar typography.  */
    font-size:x-small;
    color: gray;
    }

    アップロードした場所の問題じゃなくて、タグの書き方の問題ではないですか?
    img タグをどのように記述したのか書いていただけると解決が早いと思います。

    例えばこんな感じになると思います。

    <img src="<?php bloginfo('template_directory') ;?>/images/sample.jpg" alt="画像" width="468" height="200" />

    トピック投稿者 pippe

    (@pippe)

    ありがとうございます。
    imgタグですが
    <img src="images/top.jpg" alt="top" width="640" height="300" />
    と書き込みました。

    それじゃダメですね

    <img src="<?php bloginfo('template_directory') ;?>/images/top.jpg" alt="top" width="640" height="300" />

    こうです。

    トピック投稿者 pippe

    (@pippe)

    ありがとうございます!
    解決しました。

    自分なりにももっと勉強します。
    本当にありがとうございました。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「ヘッダーのブログタイトル部分を画像にしたいのですが」には新たに返信することはできません。