WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

wordpress Chapter2-4 webフォントを付けてデザインする

Chapter2-4ではwebアイコンフォントを使用しています。

最近よく見かけるwebアイコンフォントですが、

  • フォントなのでテキストとのベースラインが合わせやすい
  • フォントなので拡大縮小はcssのfont-sizeで指定出来る
  • フォントなのでcssで簡単に色を変えられる
  • ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。

などのメリットがあるのでレスポンシブデザインなどでよく使われます。
使用するアイコンフォントをダウンロードして使用するものもあれば、CDNで利用可能の物もあります。

fortawesome.github.io

genericons.com

webiconfonts.appspot.com


index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body <?php body_class(); ?>>
<?php if(have_posts()): while(have_posts()): 
the_post(); ?>

<article <?php post_class(); ?>>
<h1><?php the_title(); ?></h1>

<div class="postinfo">
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<i>abcdefg</i>abcdefg
<?php echo get_the_date(); ?>
</time>
<span class="postcat">
<?php the_category( ', ' ); ?>
</span>
</div>

<?php the_content(); ?>
</article>

<?php endwhile; endif; ?>
</body>
</html>