TCDテンプレート「AN」をカスタマイズして内部SEOを行う
このブログは、TCDテンプレートを使っているのですが、テンプレートのソースで少し気になる点があったので、SEOの内部対策というと大げさかもしれませんが、簡単なカスタマイズをして使っています。
気になった点というのは、主に<h>タグの使い方で、特に<h1>がキャッチフレーズに、<h2>がブログタイトルにあてられていたことには気持ち悪さを感じました。
なので、キャッチフレーズを<p>にして、ブログタイトルから<h1>で始まるようにして、あとは残り全体の見出しレベルを1つずつあげました。
個別記事ページで、記事タイトルをh1にする方法は、～TCD～AN(tcd014)で投稿ページや固定ページの記事タイトルをH1に変更する を参照してください。
それとCSSで、site description がスマホでは display:none; と指定されていて表示されないようになっていたこと、ウィジェットのサイト内検索の「検索」という文字が、text-indent:-9999;で遠くに飛ばされているのも気になりました。
キャッチフレーズは、スマホ用のCSSに display:none; が設定されていて、スマホから見たときに表示されないようになっていました。
Twenty Fifteen や Twenty Sixteen などのWordPressの公式デフォルトテーマでも同じようになっていあるので大丈夫だとは思うのですが、私は単なるキャッチフレーズとはいえ、テキスト隠しのように感じて気持ち悪いので、スマホのときもちゃんと表示されるようにしています。
Before(ANのサンプルサイト)
上図のような見出しタグがついていましたので、下図のように変更します。
After(ANのサンプルサイト)
- ブログタイトルを<h1>に変更する
- キャッチフレーズを<p>に変更する
- TOPページのメインカラムの見出しを調整する
- TOPページの右サイドバーの見出しを調整する
- スライダーに表示される記事タイトルを<p>に変更する
- 左サイドバーの見出しタイトルを調整する
- アーカイブページの記事タイトルを<h3>に変更する
- ページナビゲーションを<h3>に変更する
- フッターロゴ（ブログタイトル）を<p>に変更する
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。
ブログタイトルを<h1>に変更する
ブログタイトルは、<h2>になっていましたので、<h1>に変更しました。
変更する箇所は、header-logo.php にあります。フロントページにロゴを表示するの中にある全ての<h2>を<h1>に変更します。
変更前
/**
* フロントページにロゴを表示する
*/
function the_dp_logo(){
$logo = dp_logo_to_display();
if($logo){
$option = get_desing_plus_option(); //オプションの値を取得
$title = get_bloginfo('name');
$url = home_url();
echo <<<EOS
<h2 id="logo" style="top:{$option['logotop']}px; left:{$option['logoleft']}px;">
<a href="{$url}/" title="{$title}" data-label="{$title}">
<img src="{$logo['url']}" alt="{$title}" title="{$title}" />
</a>
</h2>
EOS;
}else{
echo '<h2 id="logo_text"><a href="'.home_url().'/">'.get_bloginfo('name')."</a></h2>\n";
}
}
変更後
/**
* フロントページにロゴを表示する
*/
function the_dp_logo(){
$logo = dp_logo_to_display();
if($logo){
$option = get_desing_plus_option(); //オプションの値を取得
$title = get_bloginfo('name');
$url = home_url();
echo <<<EOS
<h1 id="logo" style="top:{$option['logotop']}px; left:{$option['logoleft']}px;">
<a href="{$url}/" title="{$title}" data-label="{$title}">
<img src="{$logo['url']}" alt="{$title}" title="{$title}" />
</a>
</h1>
EOS;
}else{
echo '<h1 id="logo_text"><a href="'.home_url().'/">'.get_bloginfo('name')."</a></h1>\n";
}
}
これだけで、ブログタイトルがh1になります。
キャッチフレーズを<p>に変更してスマホでも表示させる
WordPressの一般設定にあるキャッチフレーズに、<h1>があてられていました。<h1>はブログタイトルにあてたので、キャッチフレーズに使われていた<h1>は<p>に変更しました。そして、スマホから見た時は非表示になっていたので、表示されるようにCSSを書き変えました。
まずキャッチフレーズを<p>に変更
一般設定で入力するキャッチフレーズは、ブログタイトルの上に表示されているテキストで、meta description として使われます。
ブログタイトルを<h1>にしたので、<h2>でもいいのでは？と思われるかもしれませんが、<h2>はメニューの見出しに使う方がいいと思ったので、見出しタグは使わず<p>にしました。
変更する箇所は、header.php の </head> の少し下にある、<!– site description –> の部分です。
変更前
</head>
<body class="<?php if(!is_page()&&is_home()) { echo 'index'; }; if (!has_nav_menu('global-menu')) { echo ' no_nav'; }; ?> default">
<div id="header" class="clearfix">
<!-- site description -->
<h1 id="site_description"><?php bloginfo('description'); ?></h1>
変更後
</head>
<body class="<?php if(!is_page()&&is_home()) { echo 'index'; }; if (!has_nav_menu('global-menu')) { echo ' no_nav'; }; ?> default">
<div id="header" class="clearfix">
<!-- site description -->
<p id="site_description"><?php bloginfo('description'); ?></p>
これで、一般設定で入力するキャッチフレーズは、ブログタイトルの上に存在するだけの単なるキャッチフレーズになりました。深く考えずに書いて大丈夫です。
ちなみに、私はプラグインのAll in One Seoでdescriptionを設定しています。
All in One SEOでdescriptionを設定した場合
site descriptionをスマホでも表示させる
キャッチフレーズは、スマホ用のCSSに display:none; が設定されていて、スマホから見た時に表示されないようになっていました。公式テーマでも、スマホでは「display:none;」が指定されていて表示されないので大丈夫だとは思いますが、私は表示してほしいと思ったので表示されるようにしました。
変更前
/* description */
#site_description { display:none; }
変更後
/* description */
#site_description { margin:0; font-size:11px; position:absolute; bottom:10px; left:25px;}
この変更は、私のこのブログの場合なので、表示位置や font-size はお好みで決めるといいと思います。
スマホでの表示 Before
スマホでの表示 After
これでちゃんと表示されるようになりましたね。
TOPページのメインカラムの見出しを調整する
TOPページのメインカラムの「最近の記事」というタイトルと、最近の記事内に表示される記事タイトルを調整しました。
ブログタイトルを<h1>にしたので、最近の記事という見出しは<h1>の次の階層ということで<h2>に、最近の記事の記事タイトルはさらにその次の階層で<h3>に変更しました。
TOPページは、index.php で変更します。その中で、メインカラムを変更するのは、index_center_col の <!– recent post –> の部分です。
メインカラムの見出しを<h2>に変更
「最近の記事」という見出しは、<h3 class="headline1"> の部分を変更します。
変更前
<!-- recent post -->
<div id="index_post_list">
<h3 class="headline1"><?php _e('Recent post', 'tcd-w'); ?></h3>
<ol class="first_list clearfix">
変更後
<!-- recent post -->
<div id="index_post_list">
<h2 class="headline1"><?php _e('Recent post', 'tcd-w'); ?></h2>
<ol class="first_list clearfix">
最近の記事に表示される記事タイトルを<h3>に変更
最近の記事に表示される記事タイトルは、<h4 class="title"> の部分を変更します。
変更前
<li class="clearfix">
<a class="image" href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail()) { echo the_post_thumbnail('small_size'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image3.gif" alt="" title="" />'; }; ?></a>
<?php if ($options['show_date']) { ?><p class="date"><?php the_time('Y.n.j'); ?></p><?php }; ?>
<h4 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
<div class="excerpt"><p><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(40);}; ?></p></div>
</li>
変更後
<li class="clearfix">
<a class="image" href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail()) { echo the_post_thumbnail('small_size'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image3.gif" alt="" title="" />'; }; ?></a>
<?php if ($options['show_date']) { ?><p class="date"><?php the_time('Y.n.j'); ?></p><?php }; ?>
<h3 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<div class="excerpt"><p><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(40);}; ?></p></div>
</li>
これで、最近の記事に表示される記事タイトルがh3になります。
TOPページの右サイドバーの見出しを調整する
TOPページの右サイドバーの「カテゴリ」や「オススメ記事」といった見出しタイトルは、デフォルトで<h3>になっていました。これを<h2>に変更しました。
ちなみに、右サイドは、TOPページだけに表示することができるサイドバーで、カテゴリとアーカイブしかありません。
変更する箇所は、index.php の index_right_col の部分です。168行目が Category、177行目が Archive です。
変更前
<div id="index_right_col">
<?php if ($options['show_side_category']) { ?>
<div class="index_side_widget">
<h3 class="index_side_headline"><?php echo $options['side_category_headline']; ?></h3>
<ul class="index_side_category">
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>
</div>
<?php }; ?>
<?php if ($options['show_side_archive']) { ?>
<div class="index_side_widget">
<h3 class="index_side_headline"><?php echo $options['side_archive_headline']; ?></h3>
<ul class="index_side_archives">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
<?php }; ?>
変更後
<div id="index_right_col">
<?php if ($options['show_side_category']) { ?>
<div class="index_side_widget">
<h2 class="index_side_headline"><?php echo $options['side_category_headline']; ?></h2>
<ul class="index_side_category">
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>
</div>
<?php }; ?>
<?php if ($options['show_side_archive']) { ?>
<div class="index_side_widget">
<h2 class="index_side_headline"><?php echo $options['side_archive_headline']; ?></h2>
<ul class="index_side_archives">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
<?php }; ?>
スライダーに表示される記事タイトルを<p>に変更する
TOPページのスライダーに表示される記事タイトルは、デフォルトだと<h3>です。このままだと、ブログタイトル<h1>の直下に<h3>が来てしまいます。かといって<h2>にして、他の見出しと同じレベルになってしまうのもどうかと思うので、<p>に変更しました。
変更する箇所は、index.php です。スライダーに関する記述は、<!– gallery –> の部分です。
変更前
<?php $i =1; foreach ($recommend_post as $post) : setup_postdata ($post); ?>
<div id="caption<?php echo $i; ?>" class="nivo-html-caption">
<h3 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<div class="excerpt"><p><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(70);}; ?></p></div>
<a class="link" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php _e('Read more', 'tcd-w'); ?></a>
</div>
変更後
<?php $i =1; foreach ($recommend_post as $post) : setup_postdata ($post); ?>
<div id="caption<?php echo $i; ?>" class="nivo-html-caption">
<p class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p>
<div class="excerpt"><p><?php if (has_excerpt()) { the_excerpt(); } else { new_excerpt(70);}; ?></p></div>
<a class="link" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php _e('Read more', 'tcd-w'); ?></a>
</div>
左サイドバーの見出しタイトルを調整する
左サイドバーは、サイドウィジェットが使われています。TOPページや詳細記事ページなど、ページ毎に表示できるものを変える事ができます。
私は、ウィジェットの見出し全てを<h3>から<h2>に変更しました。使用していないウィジェットもありますが、それを使用したとしても<h2>として表示してほしいので。
変更する箇所は、function.php のウィジェットの設定という部分です。よく見たらわかると思いますが、’name’ => の部分にどこで表示されるウィジェットかが書いてあります。
| name | ウィジェット |
| single page side widget | 詳細記事ページの左側 |
| index side widget | トップページ左側 |
| index bottom widget | トップページ中央下部 |
| side widget | アーカイブページ左側 |
| footer widget | フッター |
| index widget(for mobile) | トップページ（スマホ） |
| archive widget(for mobile) | アーカイブページ（スマホ） |
| single page widget(for mobile) | 詳細記事ページ（スマホ） |
変更前
// ウィジェットの設定 ------------------------------------------------------------------------------
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<div class="side_widget clearfix %2$s" id="%1$s">'."\n",
'after_widget' => "</div>\n",
'before_title' => '<h3 class="side_headline">',
'after_title' => "</h3>\n",
'name' => __('Single page side widget', 'tcd-w'),
'id' => 'side_widget2'
));
'before_title' => '<h3 class="side_headline">',
'after_title' => "</h3>\n",
'name' => __('Index side widget', 'tcd-w'),
'id' => 'index_side_widget'
));
'before_title' => '<h3 class="side_headline">',
'after_title' => "</h3>\n",
'name' => __('Index bottom widget', 'tcd-w'),
'id' => 'index_bottom_widget'
));
'before_title' => '<h3 class="side_headline">',
'after_title' => "</h3>\n",
'name' => __('Side widget', 'tcd-w'),
'id' => 'side_widget'
));
'before_title' => '<h3 class="footer_headline">',
'after_title' => "</h3>\n",
'description' => __('Two widget are recommended', 'tcd-w'),
'name' => __('Footer widget', 'tcd-w'),
'id' => 'footer_widget'
));
'before_title' => '<h3 class="side_headline">',
'after_title' => "</h3>\n",
'name' => __('Index widget (for mobile)', 'tcd-w'),
'description' => __('This widget will be replaced with normal widget when a user accesses the site by smartphone.', 'tcd-w'),
'id' => 'mobile_widget_index'
));
'before_title' => '<h3 class="side_headline">',
'after_title' => "</h3>\n",
'name' => __('Archive widget (for mobile)', 'tcd-w'),
'description' => __('This widget will be replaced with normal widget when a user accesses the site by smartphone.', 'tcd-w'),
'id' => 'mobile_widget_archive'
));
'before_title' => '<h3 class="side_headline">',
'after_title' => "</h3>\n",
'name' => __('Single page widget (for mobile)', 'tcd-w'),
'description' => __('This widget will be replaced with normal widget when a user accesses the site by smartphone.', 'tcd-w'),
'id' => 'mobile_widget_single'
));
}
変更後
// ウィジェットの設定 ------------------------------------------------------------------------------
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<div class="side_widget clearfix %2$s" id="%1$s">'."\n",
'after_widget' => "</div>\n",
'before_title' => '<h2 class="side_headline">',
'after_title' => "</h2>\n",
'name' => __('Single page side widget', 'tcd-w'),
'id' => 'side_widget2'
));
'after_widget' => "</div>\n",
'before_title' => '<h2 class="side_headline">',
'after_title' => "</h2>\n",
'name' => __('Index side widget', 'tcd-w'),
'id' => 'index_side_widget'
));
'before_title' => '<h2 class="side_headline">',
'after_title' => "</h2>\n",
'name' => __('Index bottom widget', 'tcd-w'),
'id' => 'index_bottom_widget'
));
'before_title' => '<h2 class="side_headline">',
'after_title' => "</h2>\n",
'name' => __('Side widget', 'tcd-w'),
'id' => 'side_widget'
));
'before_title' => '<h2 class="footer_headline">',
'after_title' => "</h2>\n",
'description' => __('Two widget are recommended', 'tcd-w'),
'name' => __('Footer widget', 'tcd-w'),
'id' => 'footer_widget'
));
'before_title' => '<h2 class="side_headline">',
'after_title' => "</h2>\n",
'name' => __('Index widget (for mobile)', 'tcd-w'),
'description' => __('This widget will be replaced with normal widget when a user accesses the site by smartphone.', 'tcd-w'),
'id' => 'mobile_widget_index'
));
'before_title' => '<h2 class="side_headline">',
'after_title' => "</h2>\n",
'name' => __('Archive widget (for mobile)', 'tcd-w'),
'description' => __('This widget will be replaced with normal widget when a user accesses the site by smartphone.', 'tcd-w'),
'id' => 'mobile_widget_archive'
));
'before_title' => '<h2 class="side_headline">',
'after_title' => "</h2>\n",
'name' => __('Single page widget (for mobile)', 'tcd-w'),
'description' => __('This widget will be replaced with normal widget when a user accesses the site by smartphone.', 'tcd-w'),
'id' => 'mobile_widget_single'
));
}
アーカイブページの記事タイトルを<h3>に変更する
アーカイブページには、カテゴリページも含まれます。変更する箇所は、archive.php です。
「アーカイブ」や「カテゴリ」といった見出しが<h2>なのに、何故か記事タイトルは<h4>でした。この記事タイトルを<h3>に変更しました。
Before(ANのサンプルサイト)
After(ANのサンプルサイト)
変更前
<ul id="post_list" class="clearfix">
<?php while ( have_posts() ) : the_post(); ?>
<li class="clearfix">
<h4 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
<a class="image" href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail()) { echo the_post_thumbnail('mid_size'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image2.gif" alt="" title="" />'; }; ?></a>
変更後
<ul id="post_list" class="clearfix">
<?php while ( have_posts() ) : the_post(); ?>
<li class="clearfix">
<h3 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<a class="image" href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail()) { echo the_post_thumbnail('mid_size'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image2.gif" alt="" title="" />'; }; ?></a>
ページナビゲーションを<h3>に変更する
アーカイブページの下に表示される、PAGE NAVI というナビゲーションの見出しが<h4>になっていました。<h4>のままだと、アーカイブページの一番最後に表示される記事の階層に入ることになるので、<h3>に変更しました。
変更する箇所は、navigation.php です。
変更前
echo '<div class="page_navi clearfix">'. "\n";
if (show_posts_nav()) {
echo '<h4>';
_e("PAGE NAVI","tcd-w");
echo '</h4>' . "\n";
} else {
変更後
echo '<div class="page_navi clearfix">'. "\n";
if (show_posts_nav()) {
echo '<h3>';
_e("PAGE NAVI","tcd-w");
echo '</h3>' . "\n";
} else {
PAGE NAVI デフォルト状態
<h4> を <h3> に変更した状態
<h3>にしたことで、文字のサイズが大きくなってしまいますが、CSSを修正すれば小さい表示に戻せます。
変更するファイルは、style_pc.cssで、/* — archive — */に、/* page nav */という部分があります。
変更前
/* page nav */
.page_navi { margin:5px 20px 15px; }
#archive_navi .page_navi { margin:5px 15px 15px; }
.page_navi h4 { font-size:10px; font-weight:normal; margin:0 0 10px 0; color:#888; }
「.page_navi h4」を「.page_navi h3」に変更します。ちなみに私は、font-size もデフォルトより少し大きくして、12pxにしました。
変更後
/* page nav */
.page_navi { margin:5px 20px 15px; }
#archive_navi .page_navi { margin:5px 15px 15px; }
.page_navi h3 { font-size:12px; font-weight:normal; margin:0 0 10px 0; color:#888; }
これで、h3でも文字が大きくなりすぎず、font-weight も normal なので、太字にもなりません。
<h3> で font-size を 12px にした状態
フッターロゴ（ブログタイトル）を<p>に変更する
フッターに表示されているブログタイトルは、<p>に変更しました。変更するのは、footer-logo.phpです。
変更前
/**
* フロントページにロゴを表示する
*/
function the_dp_footer_logo(){
$logo = dp_footer_logo_to_display();
$option = get_desing_plus_option(); //オプションの値を取得
if($logo){
$title = get_bloginfo('name');
$url = home_url();
echo '<h3 id="footer_logo" style="top:' . $option['logotop2'] . 'px; left:' . $option['logoleft2'] . 'px;">' . "\n";
echo '<a href="'.home_url().'/" title="'. get_bloginfo('name') .'"><img src="' . $logo['url'] . '" alt="'. get_bloginfo('name') . '" title="' . get_bloginfo('name') .'" /></a>' . "\n";
echo "</h3>\n";
}else{
echo '<h3 id="footer_logo_text"><a href="'.home_url().'/">'.get_bloginfo('name')."</a></h3>\n";
}
}
変更後
/**
* フロントページにロゴを表示する
*/
function the_dp_footer_logo(){
$logo = dp_footer_logo_to_display();
$option = get_desing_plus_option(); //オプションの値を取得
if($logo){
$title = get_bloginfo('name');
$url = home_url();
echo '<p id="footer_logo" style="top:' . $option['logotop2'] . 'px; left:' . $option['logoleft2'] . 'px;">' . "\n";
echo '<a href="'.home_url().'/" title="'. get_bloginfo('name') .'"><img src="' . $logo['url'] . '" alt="'. get_bloginfo('name') . '" title="' . get_bloginfo('name') .'" /></a>' . "\n";
echo "</p>\n";
}else{
echo '<p id="footer_logo_text"><a href="'.home_url().'/">'.get_bloginfo('name')."</a></p>\n";
}
}
最後に
見出しダグは、h1の下にh2、h2の下にh3というように、順番に気をつけて使ってくださいね。
個別記事ページでは、記事タイトルをh1にしたいという方も多々いると思います。その際は、サイトタイトルを p タグに変更することもできます。
～TCD～AN(tcd014)で投稿ページや固定ページの記事タイトルをH1に変更する
関連記事
コメント
- トラックバックは利用できません。
- コメント (39)
１からやり直しが嫌でしたので、
非常に助かりました＾＾
デザインは秀逸なんですが
ソースとしては気になる箇所が多かったので
色々と参考になりました。
ありがとうございました！
SHUNさん、コメントありがとうございます。
私の拙い記事がSHUNさんのお役に立てて、
また「助かった」と言っていただいて嬉しいです♪
問い合わせフォームからメールが送信で着ませんでしたので、
こちらから失礼いたします。
ANを使用しているのですが、
SEOチェキで投稿記事を見てみますと
TitleとDescripitonが同じになってしまっております。
文章だと伝えづらいので
サンプル用のテストブログを作成しました。
http://xn--ickwa2hxb9cu272agc9apx9abs5b.biz/?p=9
上記の場合、
Title：テスト投稿の記事です
Descripiton：テスト投稿の記事です
となってしまっております。
どうすれば修正出来るのでしょうか？
よろしくお願い致します
SHUNさん、メールできなかったんですね(>_<)
申し訳ありませんでした。
titleとdescriptionが同じになってしまっているのは、
元々のdescriptionと、All in One SEOのdescriptionが重複している
からだと思います。
元々のdescriptionを削除すれば、大丈夫だと思います。
All in One SEO Packでできるパンダアップデート対策の初歩の初歩という記事の、
「All in One SEOでdescriptionを設定した場合」というところに書いていますので、
一度、元々のdescriptionを削除してみてはどうでしょうか？
はじめまして。
ANのカスタマイズについて調べていたらこのサイトに辿り着きました。
ソースは気にしていなかったのですが、内部SEO的にあまり好ましくないのですね。
こちらのページを参考にして私も変更しました。ありがとうございます。
ちなみに一点質問ですがロゴはどのように設定しているのでしょうか？
ANのヘッダーロゴはスマホで表示する際にテキストになってしまいますが、
ロゴが表示されるようになっていますよね。
もしお差し支えなければスマホでのロゴの表示方法について教えていただけませんか？
よろしくお願いいたします。
ちーさん、コメントありがとうございます。
ヘッダーロゴは、テーマオプションで挿入すると、スマホでもロゴとして表示されるはずです。
一度やってみてもらってもいいですか？
外観→テーマオプション です。
ヘッダー幅は992pxですが、右側に468×60サイズの広告バナースペースがあるので、
ヘッダー画像の幅は、500pxぐらいじゃないと入らないと思います。
お返事ありがとうございます。
テーマオプションからロゴを挿入しているのですがロゴではなく、
テキストが表示されるようです。
原因はわからないですがもう少し調べてみたいと思います。
ありがとうございました。
ちーさん、テーマオプションから挿入されてたのですね。
ごめんなさい(>_<) それでしたら、#logo img が display:none; になっているので、 この display:none; を消して、CSSを書けばOKです。 style_sp.css の /* header */ の部分に ロゴについてのCSSが書かれています。 私の場合は、以下の2行を書き変えて、ロゴの横幅を変更しています。 #logo_text, #logo { margin:5px 0 0 15px; line-height:120%; float:left; font-size:16px; font-weight:normal; width:90%; overflow:hidden; } #logo img { max-width:100%; height:auto; } ロゴの横幅は、ちーさんのサイトに合わせて設定してくださいね。 あとは、#logo a:before の1行を削除しています。
ヘッダーロゴの画像をスマホでも表示させるという記事をエントリーしました。
よければ参考にしてください。
はじめまして。
本日、初めてＴＣＤをインストールした者です。
さっそくつまずいてしまったのでご教示頂ければ幸甚です。＾＾；
子テーマを作り（functionファイルは削除しました）
カスタマイズをしていこうとしていた矢先に出てきた問題が
メイン画像の設定の仕方が分からないということでした。
本ページの「気ままなテレビドラマの。。」及びその左にある
ＡＮバナー＋検索窓をどこで選択、設置するのかが分からないので
教えていただけますでしょうか。
もしかしてfunctionを消してしまったことが原因でしょうか？
お忙しい中恐縮ですが、教えていただけると助かります。
（メールにご返信を頂けると尚助かりますm(__)m）
宜しくお願いします。
にゃおさん、コメントありがとうございます。
メールで返信させていただきましたので、
ご確認ください。
こんにちは＾＾
見出しのカスタマイズがこちらのサイトにしか記載がなかったので
参考にさせていただきました！！
わからないことがでてきましたので
ご質問させてください。
【スライダーに表示される記事タイトルをに変更する】
ここの記載内容とぼくの使っているゴージャス013の中身が違っているので
どこのhをいじればいいか困っています。
返信おまりしております
yuさん、メールにてお返事をさせていただきました。
ご確認いただけますでしょうか。
まりー
はじめまして。anのデザインは素敵なんだけど、本文中見出しのコードが不思議だなーと思っていたところにこの記事に出会いました。
内部SEO、良く分かっていなかったので、anのコードのような書き方もあるんだくらいにしか感じてませんでした。
記事内部の小見出しをh5h6にして誤魔化してましたが…
この記事本当に分かりやすく、とても助かりました！
ありがとうございました♪
泰子さん、はじめまして♪
コメントありがとうございます。
本当にANのデザインは素敵ですよね。
泰子さんのお役に立てて、嬉しいです♪
詳細記事ページでも、h1の下にh2、h2の下にh3…と
見出しタグが順番になるように気をつけてくださいね。
tcd013を使っているのですが、いつも大変参考にさせてもらっています。
質問ですが、投稿ページをSEOチェキ！とういサイトで確認したところ、h1がトップページと同じになってしまいます。投稿ページのタイトル部分をh1に設定してるはずなのですが。
もしよろしければ、ご教授願います。よろしくお願いします。
yukiさん、こんばんは。
コメントありがとうございます。
＞h1がトップページと同じになってしまいます。
これは、記事タイトル(h1)より先にサイトタイトル(h1)があるからだと思います。
yukiさんのサイトのソースを見させていただきましたが、
記事タイトルは、ちゃんとh1になっているので、問題ないと思いますよ♪
さっそくのご返信ありがとうございます！安心しました。
初心者なもので、日々試行錯誤しながら運営しています。
また、参考にさせてくださいね！
こんにちは。
何度もコメントすみません。先日コメントさせてもらったyukiです。
TCD013を使用しているのですが、スライダーの記事タイトルをに変更したいのですが、どこを変更していいかわかりません。よろしければ、教えてください！
検索してもなかなかでてこないもので、まりーさん頼りになってしまい申し訳ないですー
スライダーの記事タイトルをpに変更でした
yukiさん、こんばんは♪
サイトのソースを確認させていただきました。
TCD013のスライダーの記事タイトルは、pタグになっているようですが…。
TCD013を持っていないので、はっきりとはわかりかねますが、
index.php ＜!– gallery –＞と書かれた部分があると思います。
そこで、変更することができます。
こんばんは、まりーさん。
久しぶりにTCDテーマを使おうと思い、またまたお邪魔してしまいました。
内部SEOのこの記事は凄くわかりやすくて、かなり参考になりました。
拝見する限りですと、TCDさんのテーマってhタグの使い方が変わっている？ということなのでしょうか？
うーん、読んでいて不安になってきたので他のブログもcheckしてみようと思います。
ちなみに、マリーさんは他のブログなどもやっているのでしょうか？
是非拝見したいです！！
もし教えても差し支えないサイトがあればお願いします！
まりブロの更新も時間があれば是非お願いしたいです。
意味不明で恐縮ですが、応援しています！
GENKIさん、こんにちは。ご無沙汰しております。
いつも応援ありがとうございます♪
hタグですが、やはり”見出し”として使うのがいいと思うので、
“description”にh1があてられているのは、「んー…」となってしまいますね。
SEOはむずかしいです(; ･`д･´)
それと、申し訳ないのですが、
今のところ、公開しないつもりで作ったサイトしかないです(>_<) いずれは、公開できるようなサイトも作りたいと思っています。 また何かあればお声かけください。
まりーさん、早々にお返事ありがとうございます！
こちらこそ無理なお願いをしてしまい申し訳ありません。
SEOも難しいですが、やはり僕みたいな人間にはCSSのほうが未知の領域です。
僕も勉強して頑張りまーす！
こんにちは！
TCDテンプレートはデザインが良いのですが、hタグの使い方が微妙なので、購入を迷っておりました。
しかし、こちらのサイトで詳しく紹介されていて、購入に踏み切ることができました＾＾
ありがとうございます！
ANじゃないですが、こちらのリンクから購入させていただきました♪
やなきちさん、こんばんは。
コメントありがとうございます。
ご購入ありがとうございます♪
ANではないとのことですが、TCDのテーマはどれも、
基本的な事は同じように作られているそうなので、
私の拙い記事で良ければ、参考にカスタマイズしてみてくださいね♪
メッセージを再送いたします。
こんにちは！以前こちらでTCD購入したものです。ありがとうございます。
ようやく時間ができて、使ってみているのですが、
個別ページ下にある「トップページに戻る」が、どうやらトップページではなく
WP本体を置いているURLになってしまっています。
ちなみに、トップページのURLは、WPおいてあるところと同じではなく、ルートドメインにしています。WPは、下にWPフォルダを作っています。
ブログ
↓
→WPフォルダ
トップに戻るがこのフォルダのアドレスになっています。。対処方法をお教えいただけませんでしょうか？
さつきさん、こんにちは。
コメントありがとうございます。
まず、管理画面の一般設定で、サイトアドレスの部分に
トップページのURLを入力して、navigation.php を変更します。
navigation.php に書いてあるリンク先を、
bloginfo(‘wpurl’); から bloginfo(‘url’); に変更してみてください。
echo ‘<p class="back"><a href="’;
echo bloginfo(‘wpurl’); ←この部分です。
echo ‘/">’;
参考URL
WordPress Codex テンプレートタグ/bloginfo
まりーさん、ありがとうございます！
早速解消されました。お手数をお掛けしました。
今後共、ブログ楽しみにしています！！またブログで勉強させてください。
上手くいってよかったです♪
また何かあればお声かけください(*´∀｀*)
まりーさんはじめまして。
けんと申します。
突然のコメント失礼いたします。
スゴク丁寧でわかりやすいカスタマイズの説明ありがとうございます！
とても参考にさせていただきました！
私は「AN」を買ったばかりで、PHPには正直疎いのですが、
コードを見てみると「オカシイな？」と思うところがあり、
色々と調べていたら、まりーさんのサイトにたどり着きました。
現在はローカル環境でワードプレスを色々と弄っているのですが、
どうしてもわからないことがあります。
それは、ワードプレスの「一般設定」でキャッチフレーズ
（ディスクリプション）を設定すると、ソースコード上で
ディスクリプションが重複されてしまうようなのですが、
これはどうすれば、解消することができますでしょうか。
例えば、まりーさんのサイトのソースコードを見ると、しっかりと、
下記のようになっているので、私も同じようにしたいですが、
—————————————————————–
何をしてあげられるという訳じゃないBlog
—————————————————————–
私のソースコードを見ると、以下のようになってしまいます。。。
————————————
サイト名 | 説明文
————————————
大変お手数なのですが、どうすればまりーさんのように
できるのかご教示いただけますでしょうか。
どうぞ、よろしくお願いいたします。
けん
まりーさん、
何度もすみません、先ほど上記の
ご質問をさせていただいた、けんです。
補足を少し追加させてください。
メタディスクリプションの重複問題を避けるために、
プラグインで「All in One SEO」を入れており、
テーマのheader.phpに元々記載されていた
「」を
削除しているのですが、やはり問題解決にはなりませんでした。
わかりづらいご質問で申し訳ございません。。。
ご返信いただけると、とても助かります！
よろしくお願いいたします！
けん
けんさん、コメントありがとうございます。
meta description が重複しているというのは、<title> の部分でしょうか？
サイト名 | 説明文 となっているということですが、
header.php の、<title> は以下のようになっていますか？
<title><?php seo_title(); ?></title>
もう一度、確認していただけますでしょうか？
まりーさん、
ご返信ありがとうございます。
質問の内容がわかりづらく申し訳ありません。
「header.php」には、ご指摘いただいた通りの記述がありました。
また、meta descriptionが重複しているというよりか、ブラウザで
htmlのソースコードを確認してみると、titleタグにサイト名と、
管理画面で設定したキャッチフレーズが、囲われており、
サイト名とキャッチフレーズが、サイトタイトルのように
なってしまいます。
なお、「header.php」を子テーマで使用していて、それが原因なのかと思い、
子テーマから同ファイルを削除してみたのですが、解決にはなりませんでした。
もし、わかりましたらご教示いただけますでしょうか。
大変お手数ですが、よろしくお願いいたします。
けん
けんさん、ご確認ありがとうございます。
調べてみたところ、WordPressでは、デフォルトで
「タイトル | キャッチフレーズ」となるようです。
ですので、All in One SEO Pack の設定をしてみてください。
Home Page Settings の中にある、
Home Title と Home Description を書きこみます。
ここに書きこんだタイトルとディスクリプションが
表示されるようになると思います。
まりーさん、
上記でご教示いただいておりました、けんです。
返事が遅くなり申し訳ありません。
お手数をおかけしております。
お時間を取らせてしまい、誠に申し訳ございません。
また、ご返信ありがとうございます。
>> 調べてみたところ、WordPressでは、デフォルトで
>> 「タイトル | キャッチフレーズ」となるようです。
なるほど、そうだったんですね。どうりで解決しないワケですね。
また、まりーさんからのご返信を参考に「All in One SEO Pack」の設定を見直したり、
色々と試した結果、以下のようにすることで、なんとか解決（？）できました！
1）ワードプレスの管理画面の一般設定はサイト名のみ入力しキャッチフレーズは削除。
2）All in One SEO Packの「Home Title」と「Home Description」には、検索結果で表示させたいサイト名と、ディスクリプション（しっかりした文章）を入力。
3）header.phpの中にページ最上部に設定したかった短文のキャッチフレーズを直接記述。
※ディスクリプションを定義しているタグを書き換えました。
これでやっと、イメージ通りになりました＾＾
このたびは何度もご対応いただき、ありがとうございました！
とても助かりました♪
もし、また次回わからないことがあれば、まりーさんの
ブログを参考にお勉強させていただきます！
今後とも、どうぞよろしくお願いいたします。
けん
お久しぶりです。いつもお世話になっております。
以前、まりーさんに色々と教えて頂きました山本と申します。
今回、ご教示頂きたい事がありましてご連絡させて頂きました。
昨日までテーマオプションの[サイド上の広告]を
画像にしていたのですが以下の通り広告に変えてみました。
● 変更前
[サイド上の広告]
画像
● 変更後
[サイド上の広告]
画像を削除してアドセンス広告 300×250を追加
[スマホ用の広告]設定2 ページ下部のみ
アドセンス広告 300×250を新たに追加
上記修正をしたところ、スマホの個別ページのみ
サイト名下に破損した写真の画像が出てしまいます。
別のブラウザでも見てみましたが、同じ表示になります。
思い当たる原因があればご教示頂けませんでしょうか。
お忙しい中恐縮ですが、ご教示頂けると幸甚です。
宜しくお願いします。
山本
山本さん、こんばんは。お久しぶりです。
いつもありがとうございます。
破損した写真の画像というのは、変更前に表示させていた画像のことでしょうか？
サイド上部の広告は、「スマホでは表示しない」という意味のコードが、PHPファイル(index.php)に記述されています。
ですので、ご自分でindex.phpを変更してない限りは、表示されないと思うのですが…。
キャッシュの削除をしたり、F5でページを更新するなどして、
もう一度確認していただけますでしょか。
まり―さん
いつもお世話になっております。
この度もお忙しい中、ご返信頂きありがとうございます。
破損した画像は数時間に設定したアドセン広告に切り替わっていました。しかし、広告が表示された後に別の問題が出てきてしまい。。
お問い合わせに詳細をお送りさせて頂きましたので、ご教示頂けると幸いです。
何卒宜しくお願い致します。