ブログ

ワードプレスのデフォルトテーマtwentyelevenは、レスポンシブデザインでとてもよく出来たテーマです。ただ、そのままではあまりにモノトーンです。ちょっと見出しに色を付けて、オリジナル色を出してみました。

style.cssでスタイルを決めている場所の特定

まず、style.cssで見出しのスタイルを決めている部分を特定しないといけません。

ソースを見ると、投稿タイトルを決めている見出しには漏れなく「entry-title」というクラスが宛てられています。これに注目してstyle.cssをいじります。

具体的には、以下の場所をいじるとかなりカラフルに変えられます。

.entry-title,
.entry-header .entry-meta {
/****** padding-right: 76px;*********/
}
.entry-title {
    clear: both;
    color: #222;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5em;
    padding-bottom: .3em;
    padding-top: 15px;
}

ウェブシュフ好みのアレンジ

まずは、私好みのアレンジから。boxのborderに幅と色をつけただけですが、これだけでかなりメリハリがつきます。（ウェブシュフはそう思っています。）

これで、このページの冒頭の画像のような投稿タイトルの表示が出来ます。

.entry-title,
.entry-header .entry-meta {
/****** padding-right: 76px;*********/
}
.entry-title {
    clear: both;
    color: #222;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5em;
    padding:0 0 0.3em 10px;
    border-color:deeppink;
    border-style:solid;
    border-width:0 0 2px 15px;
}

そのほかボーダーをいじるパターン

このように変えると、

.entry-title,
.entry-header .entry-meta {
/****** padding-right: 76px;*********/
}
.entry-title {
    clear: both;
    color: #222;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5em;
    padding:0 0 0 10px;
    margin:0 0 3px 0;
    border-color:deeppink;
    border-style:solid;
    border-width:0 0 0px 15px;
}

こんな表示になります。

CSSを勉強すれば、見出しの背景をグラデーションにしたり、色んな見出しが作れます。

興味がある方は勉強してチャレンジするのもいいかもしれません。

無名なブロガーが記事を読んでもらうためには、キャッチーな記事タイトルを一人でも多くの人に見てもらう必要があります。記事を読んでもらえるかどうかはタイトルにかかっているのです。そこで、人を引きつけるタイトルに必要な要素をまとめました。

自分のための記事だという適合性

ブログを読むとき、手当たり次第に読もうとしている人はあまりいません。

自分に関係なさそうな記事や、自分の知らない言葉が出てくる記事はスルーしがちです。

少なくとも自分に関係ありそう・役に立ちそうだから貴重な時間を割いてその記事を読むのです。

そこで、自分に関係ありそう・役に立ちそうな感じを出すために、タイトルには以下の形式を取り入れます。

専門用語・ブランド名・製品名は使わない

これは必須条件です。知らない言葉が短いタイトルに出るようだと自分に関係ない記事と判断されてしまいます。

「あなたは～」「みんな～」「私たち～」と呼びかけてみる

これは出来れば取り入れたい要素です。自分を含む集団に対して呼びかけがあると、人は一瞬注意を惹かれます。「あなたは～」の場合「～ですか」と質問の形にするとなお効果的です。

• 「あなたは今の成績に満足?成績が上がる7つの工夫」
• 「成績が上がる7つの工夫」

この二つを比べてみると実感できるのではないでしょうか。

流行のキーワードを入れる

これも出来れば取り入れたいです。しかし、記事内容と相反する言葉は入れてはいけません。たとえば、とても大雑把な勉強法を提示するとき、

• 「成績が上がるとてもワイルドな勉強法」

というのは、アリのような気がします。

利益や動機を提示する内容

人が貴重な時間を割いて記事を読むのは、そこに何かのメリットを求めているからです。求められているメリットとはほとんどの場合ノウハウやモチベーションです。

記事を読むことによる利益をはっきり提示することで、より強い注意を引きつけることができるようになります。

「絶対に多くの人に読んでもらいたい」という記事には、以下のどれか1つは取り入れたいものです。

楽な方法

これは、「直ぐに○○できる方法」という形式です。何か困った問題が起きてネットで調べ物をするときは、こういう情報を探しますよね。

• 「直ぐに成績が上がる方法」

というタイトルを、悩み多き受験生が見たら、とりあえず記事まで飛んできてくれるんじゃないでしょうか。

優秀な方法

• 「オール5を取るための方法」

など、何かとてもレベルの高いところに到達させてくれそうな情報も、多くの人に望まれている情報です。

動機付け

これは、上の二つの項目でも満たされています。挫折しかかっているとき、何かをするための方法とか、そうしなければならない理由のようなものが提示されると、それらをモチベーションにしてもう一頑張りする力が沸いてきます。

これを利用して、記事タイトルを「～方法」「～理由」の形式で締めると、それだけでかなりキャッチーになります。

• 「成績を上げなければならない10の理由」

など、成績があがることによるメリットが具体的に書かれていれば、勉強するモチベーションが上がります。

実際、ノウハウ本とか自己啓発本（動機付け本）は、本のジャンルの中でも常に売れ筋ですよね。

秘密の暴露

秘密を覗きたいという欲望は誰にでもあるものです。それが、何かをするノウハウやモチベーションと結びつくとかなり強い関心を持ってもらえます。

かなりオリジナル色の濃いノウハウ記事には「～秘密の方法」「～マル秘マニュアル」等というタイトルをつけると効果的です。

簡単で分かりやすい表現

タイトルに知らない言葉が含まれていないことは、関心をひきつけるためにとても大事なことです。でも、引きつけた関心をさらに増幅するために、メリットがより分かりやすい言い回しが必要です。

虚偽にならない程度の誇張

これはもう定番ですね。

• 「成績を劇的に上昇させる方法」
• 「成績を上昇させる方法」

明らかに前者が魅力的です。「劇的」と「少し」とを区別する明確な基準はないので、書き手の主観で少々大げさに書いても問題はありません。

カタカナの擬態語

カタカナの擬態語も有効です。

先ほどの成績の例で言うと、

• 「成績をアッという間に上昇させる方法」
• 「成績がグングン上がる方法」
• 「成績がドカーンと上がる方法」

などが考えられます。

数字の利用

方法や理由を述べるときに「○個の方法」のような形で数字を使うと、論点数がはっきり提示されているため、読みやすい記事を連想しやすいです。

また、記事を読むことによるメリットをより客観的に表し、タイトルだけで記事内容にある程度の信頼性を持たせることが出来ます。

• 「成績をアッという間に上昇させる方法」
• 「3から5へ!成績をアッという間に上昇させる7つの方法」

この二つでは、下のほうが信用できて読みやすそうですよね。

記事を読み直しながら的確なタイトルをつける

記事タイトルが記事の内容とずれていると、せっかく記事を読みに来てくれた人も直ぐに離脱してしまいます。

タイトルで関心を引こうとするあまり、記事の内容とずれたタイトルをつけてしまわないように、十分注意しましょう。

ワードプレスのデフォルトテーマtwentyelevenのトップページには、各記事ページのコメントフォームへのリンクがあります。ウェブシュフとしては、このコメントフォームへのリンクは余計です。撤去することにしました。 (さらに…)

以前、管理バーを常時表示させてメニューバーに転用する改造作業を行いました。ところが、各項目の幅が文字数によって決まるためタップしにくい項目があるので、スマホでは使いにくいです。

そこで、メニューの各項目を、40×40の正方形で表示するべく頑張ってみました。

ページ上部に高さ40pxの空白を作る

メニュー項目を1辺40pxの正方形にするということは、メニューバーの幅も40pxということです。そこで、function.phpに以下を追加します。

function mytheme_admin_bar_callback() {
    echo '<style type="text/css">
    html { margin-top: 40px !important; }
    * html body { margin-top: 40px !important; }
    </style>';
}
add_action( 'wp_head', 'mytheme_admin_bar_callback' );

各メニュー項目を40×40サイズに設定

以前の記事でも、メニューバーにメニュー項目を登録しました。

今回はそのときのfunction.phpへの書き込みを少しアレンジして、’title’に40×40の画像やCSSで40×40に整形した文字列などを入れます。具体的には次のようにしました。

function mytheme_add_about_and_login( $wp_admin_bar ) {
    $wp_admin_bar->add_node(array(
    'id' => 'HOME',
    'title' => '<img style="width:40px;" src="https://webshufu.com/top/wp-content/uploads/2012/04/e11754b14653955f5bd853089f01fb2c.jpg" alt="ウェブシュフ" />',
    'href' => home_url('/'),
    'meta' => array('class' => 'admin_bar_home')
    ));

    $wp_admin_bar->add_node( array(
    'title' => 'Menu',
    'href' => '#categories-2',
    'meta' => array('class' => 'admin_bar_menu')
    ));
    $wp_admin_bar->add_node(array(
    'id' => 'pagetop',
    'title' => '<div style="height:20px;
    color:white;
    background:purple;
    font:bold 16px/20px sans-serif;">Page</div><div style="height:20px;
    color:white;
    background:purple;
    font:bold 16px/20px sans-serif;">TOP</div>',
    'href' => '#',
    'meta' => array('class' => 'admin_bar_pagetop'),
    ));

}
add_action( 'admin_bar_menu', 'mytheme_add_about_and_login', 1000 );

管理バーのスタイルを変える

今作っているのはメニューバーですが、もともと管理バーだったものを転用しています。

そのため、スタイルは管理バーと同じくwp-includes/css/admin-bar.cssがあてられています。

これを直接いじると、管理画面の見た目が崩れる恐れがある上、wordpressのアップデート時に上書きされて、コツコツ頑張ってきたカスタマイズが水泡に帰す恐れがあります。

専用.css作成

そこで、メニューバー専用の.cssファイルを新たに作ります。

まず、wp-includes/css/admin-bar.cssをコピーして、今いじっているテーマファイル内に貼り付けます。

たとえば、twentyelevenを直接いじっているならwp-content/theme/twentyeleven/内に、hogehogeという子テーマフォルダーを作っていじっているならwp-content/theme/hogehoge/内に貼り付けます。

次に、header.phpの</head>の直前に以下のコードを挿入します。

<link rel="stylesheet" 
type="text/css" 
media="all" 
href="<?php bloginfo( 'wpurl' ); ?>/wp-content/themes/(twebtyelevenまたは子テーマフォルダー)/admin-bar.css" />

これで、メニューバー専用のcssファイルが出来ました。

28px→40px

次に内容を書き換えていきます。もともとの管理バーは高さ28pxなので、これを40pxに変えます。

テキストエディタの検索機能などを使って、admin-bar.cssで「28px」となっている部分を全て「40px」に書き換えてください。

メニュー項目のpadding調節

項目同士のpaddingは、admin-bar.css内の以下の部分で12pxに設定されています。

#wpadminbar .quicklinks a,
#wpadminbar .quicklinks .ab-empty-item,
#wpadminbar .shortlink-input{
height:40px;display:block;
padding:0 12px;margin:0
}

12pxだと隙間が開きすぎるので、好みの数値に変えます。

私はスマホで標準的な幅320pxの画面でメニュー項目が最大7つ並ぶように12pxを2.5pxに変えました。

0にすると、幅320pxの画面でメニューが8つ隙間なくぎっしりと並びます。

メニュー項目のpadding調節

最後に、メニューバーの全項目の文字を大きくして太くします。admin-bar.cssに2箇所ほど、以下の記述があります。

font:normal 13px/40px sans-serif;

これを下のように変えます。

font:bold 16px/40px sans-serif;

以上で、完成したつもりですが、画像を使った項目は見た目があまり美しくないので、CSSで整形した文字列で行こうと思います。

追伸

その後こんな感じに変えたりもしました。

ワードプレスのデフォルトテーマtwentyelevenでは、個別記事ページのタイトルの上に、何かしら余計なリンクが並んでしまいます。赤で囲んだ3箇所のリンクを全て取り除いていきます。

前後の記事へのリンクを外す

コレをはずすのが一番簡単でした。single.phpで以下の部分を探します。

<nav id="nav-single">
    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&amp;larr;</span> Previous', 'twentyeleven' ) ); ?></span>
    <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&amp;rarr;</span>', 'twentyeleven' ) ); ?></span>
</nav><!-- #nav-single -->

これを、全てコメントアウトするだけです。

<!-- <nav id="nav-single">
    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&amp;larr;</span> Previous', 'twentyeleven' ) ); ?></span>
    <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&amp;rarr;</span>', 'twentyeleven' ) ); ?></span>
</nav>#nav-single -->

とても簡単です。

日付のリンクを外す

まず、content-single.phpで以下の部分を探します。

<div class="entry-meta">
    <?php twentyeleven_posted_on(); ?>
</div><!-- .entry-meta -->

これを以下のように書き換えます。（コメントアウトです。）

<!-- <div class="entry-meta">
    <?php twentyeleven_posted_on(); ?>
</div>.entry-meta -->

編集画面へのリンク

まず、content-single.phpで以下の部分を探します。

<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>

例によってコレもコメントアウトします。

<?php /******* edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' );*******/ ?>

不自然な余白除去

これでタイトル上部のリンクはなくなりましたが、そこに不自然な空白が出来てしまいました。これを何とかします。

style.cssで以下のような部分を探します。

/* Singular content styles for Posts and Pages */
.singular .hentry {
    border-bottom: none;
    padding: 4.875em 0 0;
    position: relative;
}
.singular.page .hentry {
    padding: 3.5em 0 0;
}

これを以下のように書き換えます。

.singular .hentry {
    border-bottom: none;
    padding: 0;
    position: relative;
}
.singular.page .hentry {
    padding: 0;
}

すると

空白はだいぶ少なくなりました。

ワードプレスでは、デフォルトのtwentyelevenをはじめとするほとんどのテーマで、ログインしてる状態では常にAdmin barが表示されます（上図）。これを改造して、どんなに下にスクロールしても常に表示されるナビゲーションメニューバーに早変わりさせることが出来ます（下図）。
(さらに…)

twentyelevenをカスタマイズしていたら、ヘッダの右側にある検索窓の位置に不都合が生じました。style.cssをいじって検索窓の位置を調節したのでメモ。 (さらに…)