TitleロゴにWeb fontを利用してみました-WordPress Twenty Twelveカスタマイズ

Twenty Twelveを使うにあたって、タイトルロゴをどうするかとても悩みました。HTML5+CSS3らしくウェブフォントを使おうとしたのですが、日本語で無料で安心して使えるWebフォントの中には、お気に入りのデザインがなかったからです。

編集すべき部分

今回はロゴの部分だけをいじるので、header.phpとstyle.cssをいじることになります。特に注目すべきところは以下の通り。なお、テストはhttp://localhostで行っています。

header.php

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

style.css

/* Header */
.site-header {
    padding: 24px 0;
    padding: 1.714285714rem 0;
}
.site-header h1,
.site-header h2 {
    text-align: center;
}
.site-header h1 a,
.site-header h2 a {
    color: #515151;
    display: inline-block;
    text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
    color: #21759b;
}
.site-header h1 {
    font-size: 24px;
    font-size: 1.714285714rem;
    line-height: 2;
}
.site-header h2 {
    font-weight: normal;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #777;
}
.header-image {
    margin-top: 24px;
    margin-top: 1.714285714rem;
}

カタカナロゴを画像化

本来「ウェブシュフ」というカタカナを、フリーの日本語ウェブフォントでテキストデータとして表現したかったのですが、好みのものが見つかりませんでした。

そこで、「フリーフォントで簡単ロゴ作成」を利用してロゴを作ってみました。

色んな字体の日本語ロゴを吟味するならここが一番ではないでしょうか。

実際にやった作業

透過PNGでロゴ作成
ファイルをダウンロード
ファイルの名前をtitle.pngに変更
子テーマファイルの中にアップロード

そして、最後に、header.phpの

<?php bloginfo( 'name' ); ?>

を

<?php /**bloginfo( 'name' );**/ ?><img src="<?php echo get_stylesheet_directory_uri(); ?>/title_logo.png" />

に変えました。

結果は以下のような感じです。

英字ウェブフォントに手を出してみる

上のロゴにまあまあ満足したのですが、やっぱりウェブフォントを使いたいので、タイトルを「ウェブシュフ」から「webshufu」に変えて、英字ウェブフォントを使うことにしました。

フリーウェブフォントは日本語のものはすごく数が少ないですが、英字のものはとても豊富で迷うほどです。しかし、ウェブシュフは迷わず安心のグーグルブランドを選びました。
[img-link url=”https://fonts.google.com/” title=”Google Fonts”]
使い方はとても簡単です。Preview Textとして自分がデザインしたい文字（私の場合はWebShufu）を入力して、後はひたすらしたスクロールで自分の感覚に合うフォントを探します。

気に入ったフォントがあったらQuick-useをプッシュ。すると、Quick Useの画面に飛びます。自分の選んだフォントに複数の書体がある場合は、「1. Choose the styles you want:」で、使いたい書体にチェックを入れます。

「2. Choose the character sets you want:」はスルーし、以下のようなコピペ作業2回とほんの少しの作業で導入完了します。

header.phpとstyle.cssの変化の具合は以下の通りです。

header.php

<?php wp_head(); ?>

の直後に

<link href='http://fonts.googleapis.com/css?family=Sevillana' rel='stylesheet' type='text/css'>

を挿入します。

そして、画像ロゴを使うときにいじった部分をもとに戻します。具体的には

<?php /**bloginfo( 'name' );**/ ?><img src="<?php echo get_stylesheet_directory_uri(); ?>/title_logo.png" />

を

<?php bloginfo( 'name' ); ?>

に戻します。

style.css

/* Header /と/ Navigation Menu */の間にある

.site-header h1 {
    font-size: 24px;
    font-size: 1.714285714rem;
    line-height: 2;
}

に、font-family: ‘Sevillana’, cursive;を加え,font-size・line-heightを調整して

.site-header h1 {
    font-size: 56px;
    font-size: 4rem;
    line-height: 1;
        font-family: 'Sevillana', cursive;
}

にします。

画面出力

結果、以下のようになりました。

結論

ウェブフォントのほうがデータ的に軽いので色々都合がよさそうです。日本語フリーウェブフォントがもっと沢山出るといいんですけどね。

（後日、結局ウェブフォントを変更して現在のロゴに落ち着きました。）

投稿日

2012年11月21日

カテゴリー:

未分類

投稿者:

webshufu

　最終更新日:

2024年3月2日

タグ: