TwentyTwelve・パーツ部分のカスタマイズ

wordpress-parts

サイトタイトルの調整

サイトタイトルはサイトの顔だ。初期設定ではこのように表示される。

wordpressのサイトタイトルの調整をする

TwentyTwelveのサイトタイトルを綺麗に見やすく変更しよう。

サイトタイトルを綺麗に調整する

サイトタイトルの調整をするにはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* サイトタイトルの調整 */
.site-header h1 a {
color:#000000;/* 色の指定 */
}
.site-header h1 a:hover {
color: #7a8285;/* カーソルが乗った時の色の指定 */
}
.site-header h1 {
font-size: 28px; /* 文字の大きさ */
line-height: 2; /* タイトル部分の高さ */
background-color: #fff; /* 背景に色を使う場合に記入 */
}

サイトタイトルを見出し風なデザインに調整する

違う方法を説明する。今度は見出し風なデザインにしてみる。以下のコードをstyle.cssの下部に追加しよう。

/* サイトタイトルの調整 見出し風*/
.site-header h1 a {
color:#000000;/* 色の指定 */
}
.site-header h1 a:hover {
color: #7a8285;/* カーソルが乗った時の色の指定 */
}
.site-header h1 {
font-size: 28px; /* 文字の大きさ */
line-height: 2; /* タイトル部分の高さ */
background-color: #fff; /* 背景に色を使う場合に記入 */
padding: 0 0 0 10px ; /* 中身の文字を右に10pxずらす */
border-top:1px solid #000000; /* 上の線 */
border-right:1px solid #000000; /* 右の線 */
border-left: 5px solid #04B404; /* 左の線 */
border-bottom:1px solid #000000; /* 下の線 */
}

背景画像を繰り返し表示したサイトタイトルデザインに調整する

次に画像を使用する場合について説明する。サイトタイトルの背景に画像を繰り返して表示する。”画像のURL“の部分はアップロードした画像のURLだ。使用する画像は自分で作成して欲しい。

画像作成ソフトでお勧めはpaint.netだ。無料で使いやすいデザインソフトだと思う。

以下のコードをstyle.cssの下部に追加しよう。

/* サイトタイトルの調整 画像リピート */
.site-header h1 a {
color:#000000;/* 色の指定 */
}
.site-header h1 a:hover {
color: #7a8285;/* カーソルが乗った時の色の指定 */
}
.site-header h1 {
font-size: 28px; /* 文字の大きさ */
line-height: 2; /* タイトル部分の高さ */
padding: 0 0 0 10px ; /* 中身の文字を右に10pxずらす */
background-image:url(http://www.画像のURL);
background-repeat: repeat-x;/* 繰り返し有り */
}

 画像を左に設置したサイトタイトルデザインに調整する

次に画像をサイトタイトルの左に設置する方法を説明する。

以下のコードをstyle.cssの下部に追記しよう。

/* サイトタイトルの調整 画像を左に配置 */
.site-header h1 a {
color:#000000;/* 色の指定 */
}
.site-header h1 a:hover {
color: #7a8285;/* カーソルが乗った時の色の指定 */
}
.site-header h1 {
font-size: 28px; /* 文字の大きさ */
line-height: 2; /* タイトル部分の高さ */
background-color: #fff; /* 背景色 */
padding: 0 0 0 20px ; /* 背景画像が15pxくらいの場合、中身の文字を右に20pxずらす */
background-image:url(http://www.画像のURL);
background-repeat: no-repeat; /* 繰り返し無し */
background-position: left center; /* 背景画像を左に配置 */
}

文字のサイズや色の変更は自由に調整して欲しい。

グローバルナビを見やすく調整する

wordpressはページ上部にグローバルナビがある。Twenty Twelveのグローバルナビの表示を見やすく調節する。

↓これがグローバルナビだ。

wordpressのグローバルナビの表示調整

グローバルナビの表示調節はstyle.cssを使用する。style.cssの下部にこれから説明するコードを追加して欲しい。

  1. まず文字の文字の大きさや色、そして高さの調節をする。
    /* ナビメニュー */
    .main-navigation li a {
    color: #fff; /* 文字色(白) */
    font-weight:bold; /* 太字にして */
    line-height: 25px; /* 高さ */
    font-size: 15px; /* 文字の大きさ */
    }
    
  2. 次に文字の左に余白をつくり背景色の設定をする。
    /* ナビメニュー2 */
    .main-navigation ul {
    margin: 0; /* 余白をなくす */
    padding-left: 10px; /* 文字の左に余白 */
    background: #04B404; /* 背景色 */
    }
    
  3. 最後にグローバルナビの文字部分のリンクにマウスが乗った時の色、既に訪れたリンクの色の設定をする。
    /* ナビメニュー3 */
    .main-navigation li a:visited {
    color: #fff;
    }
    .main-navigation li a:hover{
    color: #7a8285;
    }
    

これでグローバルナビの表示が綺麗になった。

サイトタイトル、グローバルナビ、ヘッダー画像の位置調整をする

wordpressのヘッダー要素であるサイトタイトル、グローバルナビ、ヘッダー画像の位置調整をする。

先にヘッダー画像の挿入方法を説明する。ヘッダー画像を挿入する必要のない方はこの操作を実施しなくても大丈夫だ、②から読んで欲しい。

①ヘッダー画像の挿入

まずwordpressのダッシュボードから”外観“を選び”ヘッダー“をクリックする。

開いたページの”カスタムヘッダー“の部分で”ファイルを選択“をクリックしてヘッダー画像として使いたい画像ファイルを選択し”アップロード“をクリックする。

※ヘッダー画像用の画像ファイルは、横幅のサイズをコンテンツ全体の横幅と同じにしておくと編集がしやすくなる。ちなみにTwentyTwelveの初期状態ではコンテンツ全体の横幅が960pxだ。コンテンツ全体の横幅を変更する方法は、

TwentyTwelve・全体のカスタマイズ

の”コンテンツ全体、記事やサイドバーの幅の調整をする“を参照して欲しい。

wordpressのサイトタイトル、グローバルナビ、ヘッダー画像の位置調整をする

次に開いた画面で”切り取って公開する“を選択するとヘッダー画像が挿入される。

wordpressのサイトタイトル、グローバルナビ、ヘッダー画像の位置調整をする

②ヘッダー要素の位置を調整する

Twenty Twelveでは、初期状態ではヘッダー要素がこのように配置されている。

wordpressのサイトタイトル、グローバルナビ、ヘッダー画像の位置調整をする

この”サイトタイトル“、”グローバルナビ“、”ヘッダー画像“の表示位置を入れ替えるにはheader.phpを操作する。下記がそれぞれを表示しているコードだ。このコードの位置を入れ替えることにより表示位置を入れ替える事ができる。

【サイトタイトルを表示するコード】

<hgroup>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </hgroup>

【グローバルナビを表示するコード】

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
            <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
        </nav><!-- #site-navigation -->

【ヘッダー画像を表示するコード】

<?php if ( get_header_image() ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
        <?php endif; ?>

また”サイトタイトル“と”グローバルナビ“と”ヘッダー画像“と”記事“、それぞれの間の間隔の調整をする事もできる。その場合にはstyle.cssを使う。style.cssの下部にこれから説明するコードを追加して欲しい。

/* ヘッダー要素の位置調整 */
hgroup {margin-bottom:10px;} /* タイトル下に余白 */
.header-image {margin-bottom:10px;} /* ヘッダー画像下に余白 */
.main-navigation {margin-bottom:10px;} /* ナビメニュー下に余白 */

今回はそれぞれの要素の下に10ピクセルの余白を入れる設定にしたが、このピクセル値は好みに合わせて変えても大丈夫だ。

これでヘッダー要素の位置調整ができた!

カテゴリー別アーカイブの表示をかっこよく見やすく調整する

Twenty Twelveでは、カテゴリーページを見ると”カテゴリ-別アーカイブ“という文字がこんな風に表示される。

wordpressのカテゴリー別アーカイブの表示を調整する

少し見づらいので、このカテゴリー別アーカイブの文字表示をかっこよく、そして見やすく調節する。

カテゴリー別アーカイブの文字の調節はstyle.cssを使用する。style.cssの下部にこれから説明するコードを追加していって欲しい。

  1. まず文字の大きさを変えてその周囲をかっこうよく枠で囲む。
    /*カテゴリー別アーカイブの表示を調節*/
    .archive-title {
    border-left: 5px solid #04B404;
    border-bottom:2px solid #04B404;
    padding: 0 0 0 15px ;
    color:#000000;
    line-height: 2;
    font-size: 18px;}
    
  2. カテゴリー別アーカイブに表示されるカテゴリー名は全て大文字に変更されてしまう。大文字に変更されないように指定しよう。
    /* カテゴリー別アーカイブで勝手に大文字にしない */
    .main-navigation li a {text-transform: none;}
    .archive-title {text-transform: none;}
    .widget-title {text-transform: none;}
    
  3. カテゴリー別アーカイブと記事の間に薄い線がある。これを削除する。
    /*カテゴリー別アーカイブの下の線を無くす*/
    .archive-header{ border-bottom: none}
    
  4. カテゴリー別アーカイブと記事の間の間隔の調節をする。
    /*カテゴリー別アーカイブと記事の位置の調節*/
    .archive-header {margin-bottom: 10px;}
    

これでカテゴリー別アーカイブの表示が、かっこよくて見やすい表示になった!

wordpressのカテゴリー別アーカイブの表示を調整する

Proudly powered by WordPressを独自の表示に変更しよう

Twenty Twelveではページの下のコピーライト部分に”Proudly powered by WordPress“と表示される。この表示を変更する。

コピーライトの変更はfooter.phpを操作する。footer.phpのコードから下記を探して欲しい。

<div class="site-info">
        <?php do_action( 'twentytwelve_credits' ); ?>
        <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'S    emantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ),     'WordPress' ); ?></a>
    </div><!-- .site-info -->

この部分をそっくりそのまま

<div class="site-info">
       <p>© 2014 - <?php echo date('Y '); bloginfo('name'); ?> All rights reserved.</p>
   </div><!-- .site-info -->

に書き換えよう。

どうなるだろうか?

wordpressのコピーライトの表示を調整する

こんな風に表示される。

サイトの名前“の部分にはサイト名が表示される。これでコピーライトの変更が完了だ!

サイドバータイトルの調整

wordpressには右側にサイドバーがある。

初期状態ではサイドバーのタイトルはこのように表示される。

wordpressのサイドバータイトルの表示調整をする

TwentyTwelveのサイドバータイトルを綺麗に見やすく変更しよう。

サイドバータイトルを綺麗に調整する

サイドバータイトルの調整をするにはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* サイドバータイトル部分の調整 */
.widget-area .widget h3{
line-height: 20px; /* 高さ */
font-size: 15px; /* 文字の大きさ */
color: #fff; /* 文字色 */
background-color: #04B404; /* 背景色 */
border-radius: 3px; /* 角に丸みをつける */
padding: 2px 10px; /* 左と上下に余白 */
}

サイドバータイトルを見出し風なデザインに調整する

違う方法を説明する。今度は見出し風なデザインにしてみる。以下のコードをstyle.cssの下部に追加しよう。

/* サイドバータイトル部分の調整 見出し風 */
.widget-area .widget h3{
line-height: 20px; /* 高さ */
font-size: 15px; /* 文字の大きさ */
color: #000; /* 文字色 */
background-color: #fff; /* 背景色 */
border-radius: 3px; /* 角に丸みをつける */
padding: 2px 10px; /* 左と上下に余白 */
border-top:1px solid #000000; /* 上の線 */
border-right:1px solid #000000; /* 右の線 */
border-left: 5px solid #04B404; /* 左の線 緑色の太い線にする*/
border-bottom:1px solid #000000; /* 下の線 */
}

背景画像を繰り返し表示したサイドバータイトルデザインに調整する

次に画像を使用する場合について説明する。サイドバータイトルの背景に画像を繰り返して表示する。”画像のURL“の部分はアップロードした画像のURLだ。使用する画像は自分で作成して欲しい。

画像作成ソフトでお勧めはpaint.netだ。無料で使いやすいデザインソフトだと思う。

以下のコードをstyle.cssの下部に追加しよう。

/* サイドバータイトル部分の調整 画像リピート */
.widget-area .widget h3{
line-height: 20px; /* 高さ */
font-size: 15px; /* 文字の大きさ */
color: #000; /* 文字色 */
border-radius: 3px; /* 角に丸みをつける */
padding: 2px 10px; /* 左と上下に余白 */
background-image:url(http://www.画像のURL);
background-repeat: repeat-x;/* 繰り返し有り */
}

 画像を左に設置したサイドバータイトルデザインに調整する

次に画像をサイドバータイトルの左に設置する方法を説明する。

以下のコードをstyle.cssの下部に追記しよう。

/* サイドバータイトル部分の調整 画像を左に配置する */
.widget-area .widget h3{
line-height: 20px; /* 高さ */
font-size: 15px; /* 文字の大きさ */
color: #000; /* 文字色 */
background-color: #fff; /* 背景色 */
border-radius: 3px; /* 角に丸みをつける */
padding: 0 0 0 20px ; /* 背景画像が15pxくらいの場合、中身の文字を右に20pxずらす */
background-image:url(http://www.画像のURL);
background-repeat: no-repeat; /* 繰り返し無し */
background-position: left center; /* 背景画像を左に配置 */
}

文字のサイズや色の変更は自由に調整して欲しい。

サイドバーの調整

wordpressには右側にサイドバーがある。

TwentyTwelveのサイドバーを綺麗に見やすく変更しよう。

サイドバーを綺麗に調整する

サイドバーの調整をするにはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* サイドバーの調整 */
.widget-area .widget a {
color: #000000; /* リンク部分の文字色 */
text-decoration: underline; /* リンク部分にアンダーライン */
font-weight: normal; /* 文字の太さはノーマル */
}
.widget-area .widget a:visited {color: #000000; /* リンク訪問済みの文字色 */
}
.widget-area .widget a:hover{color: #7a8285; /* リンクにマウスが乗った時の文字色 */
}
.widget-area .widget li {
line-height: 28px;/* 行間 */
font-size: 14px; /* 文字の大きさ */
background-color: #fff; /* 背景に色を使う場合に記入 */
}

 画像を左に設置したサイドバーデザインに調整する

次に画像を使用する場合について説明する。”画像のURL“の部分はアップロードした画像のURLだ。使用する画像は自分で作成して欲しい。

画像作成ソフトでお勧めはpaint.netだ。無料で使いやすいデザインソフトだと思う。

画像をサイドバーの左に設置する方法を説明します。

以下のコードをstyle.cssの下部に追加しよう。

/* サイドバーの調整 画像を左に配置する*/
.widget-area .widget a {
color: #000000; /* リンク部分の文字色 */
text-decoration: underline; /* リンク部分にアンダーライン */
font-weight: normal; /* 文字の太さはノーマル */
}
.widget-area .widget a:visited {color: #000000; /* リンク訪問済みの文字色 */
}
.widget-area .widget a:hover{color: #7a8285; /* リンクにマウスが乗った時の文字色 */
}
.widget-area .widget li {
line-height: 28px;/* 行間 */
font-size: 14px; /* 文字の大きさ */
padding: 0 0 0 20px ; /* 背景画像が15pxくらいの場合、中身の文字を右に20pxずらす */
background-color: #fff; /* 背景に色を使う場合に記入 */
background-image:url(http://www.画像のURL);
background-repeat: no-repeat; /* 繰り返し無し */
background-position: left center; /* 背景画像を左に配置 */
}

文字のサイズや色の変更は自由に調整して欲しい。

“コメントをどうぞ”の表示を削除する

wordpressの記事には”コメントをどうぞ“という文字が表示される。こんな感じだ。

wordpressのコメントをどうぞの表示を削除する

この表示を消してしまおう。

“コメントをどうぞ”の表示を消すには2つ方法がある。非表示に設定する方法と表示するコード自体を削除する方法だ。

 “コメントをどうぞ”を非表示にする

まず非表示に設定する方法を説明する。style.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* 「コメントをどうぞ」を非表示 */
.comments-link {display: none;}

これで”コメントをどうぞ”が非表示になる。

 “コメントをどうぞ”を表示するコードを削除する

次に”コメントをどうぞ”を表示するコード自体を削除する方法だ。非表示にする方法で表示はされなくなるが、そうではなく完全に削除したい、という場合に実行して欲しい。

“コメントをどうぞ”を表示するコードをを削除するにはcontent.phpを編集する。content.phpで下記のコードを探そう。

<?php if ( comments_open() ) : ?>
                <div class="comments-link">
                    <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
                </div><!-- .comments-link -->
            <?php endif; // comments_open() ?>

このコードを削除すると”コメントをどうぞ”を削除する事ができる。

コメント欄を編集したりタグ表示を削除する

TwentyTwelveの記事のコメント欄は初期設定では下のようになっている。

wordpressのコメント欄を編集する

これを編集していく。

ウェブサイト入力欄を削除してタグ表示も変更する

ウェブサイト入力欄を削除する方法を説明する。ついでにタグ表示も”内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。“という文字に変更する。

コメント欄を編集するにはcomments.phpを使用する。

comments.phpで

<?php comment_form(); ?>

を探そう。

見つかったらこの<?php comment_form(); ?>を削除してその場所に

<?php
$comments_args = array(
    'fields' => array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
        'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
        'url'    => '',
    ),
    'title_reply'          => 'コメントをどうぞ',
    'comment_notes_before' => '<p class="comment-notes">メールアドレスが公開されることはありません。</p>',
    'comment_notes_after'  => '<p class="form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',
    'label_submit'         => 'コメントを送信する',
);

comment_form($comments_args);
?>

を挿入しよう。

するとコメント欄がこのようになる。

wordpressのコメント欄を編集する

メールアドレス入力欄とウェブサイト入力欄を削除してタグ表示も変更する

メールアドレス入力欄とウェブサイト入力欄を削除する方法を説明する。ついでにタグ表示も”内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。“という文字に変更する。

comments.phpで<?php comment_form(); ?>を削除してその場所に

<?php
$comments_args = array(
    'fields' => array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
        'email'  => '',
        'url'    => '',
    ),
    'title_reply'          => 'コメントをどうぞ',
    'comment_notes_before' => '',
    'comment_notes_after'  => '<p class="form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',
    'label_submit'         => 'コメントを送信する',
);

comment_form($comments_args);
?>

を挿入しよう。

するとコメント欄がこのようになる。

wordpressのコメント欄を編集する

コメント欄のタグ表示を削除する

この場合はstyle.cssを使用する。style.cssの下部にこのコードを追加するとタグ表示が非表示になる。

 

/* コメントの下のタグ表記を消す */
.form-allowed-tags {display:none;}

するとコメント欄がこのようになる。

wordpressのコメント欄を編集する

これでコメント欄の編集が完了した!

wordpressのコメント欄の表示を調整する

TwentyTwelveの初期状態では、コメント欄はこのように表示される。

wordpressのコメント欄の表示を調整する

少し見づらい。このコメント欄を見やすく調整する。

コメント枠の調整をするにはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* コメントの調整 */
div.comments-area{background-color:#F7F2E0;padding: 10px 10px 0 10px ;border-style: solid;border-width: 2px;}/* コメントエリア全体 */
ol.commentlist{background-color:#fff;padding: 10px 10px 0 10px ;}/* 投稿されたコメントの表示部分 */
h2.comments-title{font-weight:bold;}/* フィードバック表記部分 */

これでコメント欄がこのように見やすくなる。

wordpressのコメント欄の表示を調整する