当サイトには広告が含まれております

twentyfifteenの子テーマを作る フォント指定と固定メニュー

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

Image [6]

先日WordPressのバージョンが4.1になったのに伴い、デフォルトテーマがtwentyfifteenになりました。このblogではデフォルトテーマを使いたいなと思うので、twentyfifteenでの子テーマを作ろうと思います。

今現在は、twentyfourteenの子テーマを使って色々カスタマイズしていますので同じものをtwentyfifteenでというのは、簡単にはいかないと思いますので少しずつ進めます。

記事をざっと見る

twentyfifteenの子テーマを準備する

何はともあれ、twentyfifteenでの子テーマを作っていく入れ物を準備します。新しく作る子テーマは twentyfifteen-ryus というものにします。

WordPress子テーマの作り方

を参照します。

wp-contents\themes\ に twentyfifteen-ryus というフォルダを作ります。そこに空のファイルstyle.cssを作ります。そのファイルを開いて、

/*
Theme Name: Twenty Fifteen Ryus
Template: twentyfifteen
*/

@import url('../twentyfifteen/style.css');

このように記述して保存します。この時点でダッシュボード 外観>テーマ を見ると

Image [1]

新しいテーマ Twenty Fifteen Ryus が追加されているので、有効化してみます。

Image [3]

twentyfifteenと全く同じ状態で表示されました。ここから色々カスタマイズしていきます。

フォントを変更する

今のblog詳細画面

Image [2]

twentyfifteenでのblog詳細画面

Image [3]

と、ぱっと見て違うなと思うのは基本的なフォントです。twentyfifteenからNotoフォントが採用されたので日本語がいい感じ、と前回のblogで書いたのですが勘違いしていたようでした(^_^;。この辺のフォントは Noto Serif で指定されていますが、この日本語フォントはどうやら存在しないようです。ですので Noto Serif と Noto Sans で指定してあるところを全て Noto Sans Japanese にしたいと思います。

新しく作った子テーマ twentyfifteen-ryus の style.css を開いて、

@import url('../twentyfifteen/style.css');
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: "Noto Sans Japanese", sans-serif;
}

このようにしてみました。既にあった @import行の下Noto Sans Japanese を使うためのCSSを読み込み、一つ一つ指定しようと思ったのですが大変だったので(^_^;、全てのフォントの指定を Noto Sans Japanese にしてしまいます。これで表示すると、

Image [4]

このように全体的に Noto Sans Japanese になりました(^^)/。

しかし、もしかすると今のblogのフォント表示の方がなじみ深い気もするので後になってからまた元のstyleと同じ指定にしちゃうかもしれません(^_^;。その場合は

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

今と同じこんな指定にして、

Image [5]

こんな表示にするかもです。フォントはイメージを大きく左右するので慎重に考えたいと思います。

固定メニューが表示されなくなっちゃった!?

Image [8]

今はこのように about us お問い合わせ 過去1ヶ月の投稿 読まれた順表示 が上部に表示されています。twentyfifteenに切り替えるとこれが、

Image [13]

こんな感じにトップ付近にもないし、ページ全体を見ても表示されていません。

twentyfourteenダッシュボード 外観>メニュー を見ると、

Image [9]

トップメインメニュー というところにチェックが入っています。

twentyfifteenでは

Image [10]

トップメインメニュー というものが無くなり、メインメニューというものがあります。

Image [11]

とりあえずここにチェックを入れて保存します。

Image [12]

すると左ブロックに今まで上部に表示されていたメニューが表示されました。うーん、場所はここでない方がいいかなと思うんですが上部に表示するにはカスタマイズが必要そうですね。これはおいおい考えていきたいです。

twentyfourteenの子テーマでのカスタマイズを継承していきたい

このblogを書きながらtwentyfourteenの子テーマでは色々カスタマイズをしてきました。このblogに新しいテーマを適用するにあたっては今までのカスタマイズを継承しないと記事がおかしな事になってしまいます。ということで今使っているtwentyfourteenの子テーマでやっているカスタマイズを少しずつ新しい子テーマでもできるようにしていきたいと思います。

見た目ですぐに違いが分かるのが h2 の表現です。

今は、

Image [14]

こんな感じですが、twentyfifteenでは

Image [15]

こんな感じです。この部分は、

fontawesomeで簡単にかっこいいアイコンを使おう!

でカスタマイズをしました。修正するのは3カ所です。1つめはheader.phpです。twentyfifteenからheader.php子テーマのtwentyfifteen-ryusにコピーします。

そして、

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>

</head> の前に上記のように font-awesome のリンクを追加します。

2つめは style.css

h2 {
    font-size:20px;
    padding:10px 0px 10px 1px;
    border-top:1px dotted #5e4390;
    border-bottom:1px dotted #5e4390;
}

を追加します。

3つめは twentyfifteen-ryusに新しく functions.php を作成します。そして

<?php
// h2にfontawesomeを追加する
function ryus_h2_add($text ) {
    $text = str_replace('<h2>', '<h2><i class="fa fa-smile-o" style="margin-right:7px;"></i>', $text);
    return $text;
}
add_filter( 'the_content', 'ryus_h2_add' );

このように記述して保存します。これで表示すると、

Image

今と同じように上下に点線が入って、頭にスマイルマークが入りました。

まとめ:まだまだ先は長そう…

今までたくさんのカスタマイズをtwentyfourteenの子テーマで行ってきました。これからはtwentyfifteenの子テーマでカスタマイズをしていきたいと思いますがかなりの量のカスタマイズをしてきたのでまだまだ先は長そうです。

この次は画面の幅を拡げるのとフォントの大きさをもう少し小さくするあたりからやっていこうと思っています。

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

記事をざっと見る