TwentyTwelve・記事部分のカスタマイズ

twentytwelve-article

記事タイトルの調整

記事タイトルは大切だ。初期設定ではこのように表示される。

wordpressのtwentytwelveの記事タイトルの調整

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

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

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

/* 記事タイトルの調整 */
.entry-header .entry-title a {
color:#000000;/* 色の指定 */
}
.entry-header .entry-title a:hover {
color: #7a8285;/* カーソルが乗った時の色の指定 */
}
.entry-header .entry-title {
font-size: 18px; /* 文字の大きさ */
line-height: 2 ; /* タイトル部分の高さ */
padding: 0 0 0 10px ; /* 左に余白を入れて文字を右にずらす */
background-color: #fff; /* 背景に色を使う場合に記入 */
}

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

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

/* 記事タイトルの調整 見出し風*/
.entry-header .entry-title a {
color:#000000;/* 色の指定 */
}
.entry-header .entry-title a:hover {
color: #7a8285;/* カーソルが乗った時の色の指定 */
}
.entry-header .entry-title {
font-size: 18px; /* 文字の大きさ */
line-height: 2 ; /* タイトル部分の高さ */
padding: 0 0 0 10px ; /* 左に余白を入れて文字を右にずらす */
background-color: #fff; /* 背景に色を使う場合に記入 */
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の下部に追加しよう。

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

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

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

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

/* 記事タイトルの調整 画像を左に配置する*/
.entry-header .entry-title a {
color:#000000;/* 色の指定 */
}
.entry-header .entry-title a:hover {
color: #7a8285;/* カーソルが乗った時の色の指定 */
}
.entry-header .entry-title {
font-size: 18px; /* 文字の大きさ */
line-height: 2 ; /* タイトル部分の高さ */
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の見出しの設定方法

記事の投稿を編集する画面で”ツールバー切り替えボタン“を押そう。

wordpressの見出しの調整

するとツールバーに表示されるツールが増えた、と思う。

ここで”段落“から”見出し2“を選んで内容部分に文字を書こう。

wordpressの見出しの調整

これで”見出し2″での文字入力ができました。

wordpressの見出しの調整

サイト上ではこのように表示される。

wordpressの見出しの調整

これが初期設定時の見出し2の表示だ。

見出しを綺麗に調整する

この見出し2の表示を変更する。今回は代表として見出し2の表示を変えるが見出し3でも見出し4でもやり方は同じだ。style.cssを使用する。以下のコードをstyle.cssの下部に追加しよう。

/* 見出しh2の調整 */
.entry-content h2 {
color:#000000;/* 色の指定 */
font-size: 18px; /* 文字の大きさ */
line-height: 2 ; /* 見出しの高さ */
padding: 0 0 0 10px ; /* 左に余白を入れて文字を右にずらす */
background-color: #fff; /* 背景に色を使う場合に記入 */
}

 見出しを見出し風なデザインに調整する

違う方法を説明する。今度は見出し風なデザインにしてみる。見出しを見出し風にする、という日本語も変だが(汗)。以下のコードをstyle.cssの下部に追加しよう。

/* 見出しh2の調整 見出し風*/
.entry-content h2 {
color:#000000;/* 色の指定 */
font-size: 18px; /* 文字の大きさ */
line-height: 2 ; /* 見出しの高さ */
padding: 0 0 0 15px ; /* 左に余白を入れて文字を右にずらす */
background-color: #fff; /* 背景に色を使う場合に記入 */
border-top:1px solid #000000; /* 上の線 */
border-right:1px solid #000000; /* 右の線 */
border-left: 5px solid #04B404; /* 左の線 緑色の太い線にする*/
border-bottom:1px solid #000000; /* 下の線 */
}

 背景画像を繰り返し表示した見出しデザインに調整する

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

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

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

/* 見出しh2の調整 画像リピート*/
.entry-content h2 {
color:#000000;/* 色の指定 */
font-size: 18px; /* 文字の大きさ */
line-height: 2 ; /* 見出しの高さ */
padding: 0 0 0 10px ; /* 左に余白を入れて文字を右にずらす */
background-image:url(http://www.画像のURL);
background-repeat: repeat-x;/* 繰り返し有り */
}

  画像を左に設置した見出しデザインに調整する

次に画像を見出し2の左に設置する方法を説明する。

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

/* 見出しh2の調整 画像を左に配置する */
.entry-content h2 {
color:#000000;/* 色の指定 */
font-size: 18px; /* 文字の大きさ */
line-height: 2 ; /* 見出しの高さ */
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はもともと英字用のフォントで設定されている。そこでTwentyTwelveの記事の文字を日本語環境でも見やすいフォントに設定する。

記事の文字スタイルを変更するにはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* フォントと文字の大きさ、色 */
body {
font-family:
"メイリオ", Meiryo,
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
"MS Pゴシック",
"Lucida Grande",
"Lucida Sans Unicode",
Arial,
Verdana,
sans-serif;
text-rendering:optimizeLegibility;
color: #000000; /* 文字色 */
font-size: 14px; /* 文字の大きさ */
}
body.custom-font-enabled {
font-family: "メイリオ", Meiryo,
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
"MS Pゴシック",
"Lucida Grande",
"Lucida Sans Unicode",
Arial, Verdana, sans-serif;
}

文字色“や”文字の大きさ“の部分は自由に変更して欲しい。

これで記事の文字スタイルの設定が完了だ!

記事のリンクをクリックされやすいフォントに変更する

リンクのフォントは大切だ。どのような色、どのような大きさ、それによってクリック率が変わってくる。

記事のリンクのフォントの変更にはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* 記事内のリンク */
.entry-content a {
text-decoration: underline;/* リンク部分にアンダーライン */
font-weight:bold; /* リンク文字を太字 */
color: #0489B1;} /* リンクの色 */
.entry-content a:visited {color: #0489B1;} /* 訪問済みの色 */
.entry-content a:hover{color: #7a8285;} /* カーソルが乗った時の色 */

リンクにアンダーラインが必要なかったり、リンク文字を太字にしない場合はこのコードに変更すれば大丈夫です。

/* 記事内のリンク */
.entry-content a {
text-decoration: none; /* アンダーライン無し */
font-weight: normal; /* 普通の太さ */
color: #0489B1;} /* リンクの色 */
.entry-content a:visited {color: #0489B1;} /* 訪問済みの色 */
.entry-content a:hover{color: #7a8285;} /* カーソルが乗った時の色 */

これで記事のリンクのフォントをクリックされやすいフォントに変更できた!

記事の行間を見やすく調節する

行間は詰めすぎても開きすぎても見づらいものだ。Twenty Twelveの行間をちょうどよく見えるように調節する。

行間の調節にはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* 本文中の行間 */
.entry-content p {
line-height: 30px;
}

少し行間が広がった。今回は行間を30pxで指定したが、自分の書く記事のスタイルに合わせて自由に行間を調節して欲しい!

ページの下にあるページネーションを非表示にする

Twenty Twelveの記事にはその記事から見て前に投稿された記事、後に投稿された記事のページネーションがページ下部に表示される。

便利ではあるが、もっと分かりやすくユーザーをナビゲートしたい場合には必要が無い事がある。そんな時にはこれを非表示にする事ができる。

前に投稿された記事、後に投稿された記事のリンクを非表示にするにはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/*前の投稿、次の投稿の表示を消す*/
.nav-next{
display: none;
}
.nav-previous{
display: none;
}

これで前に投稿された記事、後に投稿された記事のページネーションを非表示にする事ができた!

記事下のメタ情報の表示を見やすく、もしくは削除する

TwentyTwelveには記事下にメタ情報がある。

これだ。

wordpressのメタ情報の表示調整

メタ情報を見やすくしよう!

メタ情報を見やすくするにはstyle.cssを使用する。リンクが貼られていない”カテゴリー”と”投稿日”という文字と、リンクが貼られている”カテゴリー名”と”投稿日時”の部分があるので、それぞれを別々にスタイル指定する。style.cssの下部にこのコードを追加しよう。

/* メタ情報:カテゴリー、投稿日の部分 */
footer.entry-meta {
margin-top: 24px; /* 記事との間隔 */
font-size: 14px; /* 文字の大きさ */
color: #000000; /* 文字の色 */
font-weight: bold; /* 必要あれば太字に */
}
/* メタ情報:リンクが貼られている部分 */
.entry-meta a {
font-size: 14px; /* 文字の大きさ */
color: #000000; /* 文字の色 */
font-weight: bold; /* 必要あれば太字に */
text-decoration: none; /* 下線がいらない場合に記述 */
}
/* メタ情報:リンクが貼られている部分にカーソルが乗った時、訪問済みの色 */
.entry-meta a:visited {
color: #000000;} /* 訪問済みの色 */
.entry-meta a:hover{
color: #7a8285;} /* カーソルが乗った時の色 */

文字の色や大きさ下線は自由に変更して欲しい。

メタ情報を削除するには

メタ情報を削除する事もできる。

メタ情報を削除するにはcontent.phpを使用する。content.phpで下記のコードを探そう。

<footer class="entry-meta">
            <?php twentytwelve_entry_meta(); ?>
            <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
            <?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries. ?>
                <div class="author-info">
                    <div class="author-avatar">
                        <?php
                        /** This filter is documented in author.php */
                        $author_bio_avatar_size = apply_filters( 'twentytwelve_author_bio_avatar_size', 68 );
                        echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );
                        ?>
                    </div><!-- .author-avatar -->
                    <div class="author-description">
                        <h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
                        <p><?php the_author_meta( 'description' ); ?></p>
                        <div class="author-link">
                            <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
                                <?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'twentytwelve' ), get_the_author() ); ?>
                            </a>
                        </div><!-- .author-link    -->
                    </div><!-- .author-description -->
                </div><!-- .author-info -->
            <?php endif; ?>
        </footer><!-- .entry-meta -->

このコードをそっくり削除しよう。するとメタ情報が削除される。

これでメタ情報の調整が完了した!

記事の下の二重線を削除する

TwentyTwelveには記事の下に二重線がある。

これだ。薄くて見えずらいと思うがうっすらと境界を示す二重線があるのだ。これがあると二重線の上と下が分かれているようなイメージを持ってしまう。そこで、この二重線を削除する。

wordpressの記事の下の二重線を削除する

この二重線を削除するにはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。

/*記事下の薄い二重線の削除*/
.site-content article {
border: none;
}

これで記事の下の二重線の削除が完了した!

アイキャッチ画像の表示位置、サイズ調整をする

アイキャッチ画像とは、その名のとおり、ユーザーの目を惹きつけるための、記事1つ1つの印象付けのための画像の事だ。

アイキャッチ画像をページに挿入する

アイキャッチ画像を記事に表示させるには、記事を投稿する時の”投稿ページ“に”アイキャッチ“という項目があるので、そこで画像を指定する事により記事に追加する事ができる。

アイキャッチ画像の表示位置の調整

アイキャッチ画像は初期状態ではこのように表示される。一番上にアイキャッチ画像が配置され、その下に記事タイトル、その下に記事、という並び順だ。

wordpressのアイキャッチ画像の位置やサイズの調整をする

アイキャッチ画像の調整にはcontent.phpを操作する。

content.phpのコードを見るとこのようなコードがある。

<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail();
endif; ?>

これがアイキャッチ画像を表示しているコードだ。

次にこれが記事タイトルを表示しているコードだ。

<h1 class="entry-title"><?php the_title(); ?></h1>

そしてこれが記事を表示しているコードだ。

<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->

初期状態では【アイキャッチ画像を表示しているコード→記事タイトルを表示しているコード→記事を表示しているコード】という順番で配置されている。

そこで【記事タイトルを表示しているコード→アイキャッチ画像を表示しているコード→記事を表示しているコード】と順番を入れ替えてみようと思う。

アイキャッチ画像の表示位置を変えよう!

このアイキャッチ画像を表示しているコードを、

<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail();
endif; ?>

記事を表示しているこのコードの直前に持ってこよう。

<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->

するとこのように表示順序が入れ替わる。

wordpressのアイキャッチ画像の位置やサイズの調整をする

アイキャッチ画像のサイズ調節をしよう!

次にアイキャッチ画像のサイズ調節をする。
アイキャッチ画像を表示するコードを次のように書き換えよう。これはアイキャッチ画像を200pxで表示する事を意味する。

<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail(array(200, 200));
endif; ?>

するとこのように表示される。アイキャッチ画像が小さくなった。

wordpressのアイキャッチ画像の位置やサイズの調整をする

この他にもアイキャッチ画像をサムネイルサイズや中サイズや大サイズで表示する事もできる。

サムネイルサイズ、中サイズ、大サイズに関しての説明はこちらを参考にして欲しい。

wordpressの基本設定、コメントとメディアの設定をしよう!

【サムネイルサイズ】

<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail(‘thumbnail’);
endif; ?>

【中サイズ】

<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail(‘medium’);
endif; ?>

【大サイズ】

<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail(‘large’);
endif; ?>

これはアイキャッチ画像をサムネイルサイズで表示した時の例だ。

wordpressのアイキャッチ画像の位置やサイズの調整をする

これでアイキャッチ画像の調節ができた!