求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

記事のデザインを指定する - カスタムテーマ

記事のデザインを指定する

  • 「style.css」を編集する

f:id:web-0220:20190407012141j:plain

スタイルシートを適用する
  • get_stylesheet_directory_uri()
  • 現状のテーマで使われているスタイルシートURI を返す関数です
  • URIは、(http:// or https:// 等の完全な形の)ウェブアドレスです
  • スタイルシートのファイル名は get_stylesheet_directory_uri() のパスに対して付与される 'style.css' となります
  • URI は、値だけで出力はされません
  • 出力をする場合は、echo文で出力します
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
CSSの記述
  • 本来は、resetから記述しますが、今回はテキストにそって記述します
@charset "UTF-8";

/*
Theme Name: MY THEME
Author: TRAVEL SKETCH
Description: This is my original theme.
Version: 1.0
*/

body {
  font-size: 16px;
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Noto Sans JP",
    "Helvetica Neue", YuGothic,
    "Yu Gothic", Verdana, Meiryo,
    sans-serif;
  color: #333;
}

/* 記事 */
article h2 {
  margin: 0;
  font-size: 32px;
  font-weight: normal;
}
Web Fonts(Google Fonts)設定

f:id:web-0220:20190407013635j:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&amp;subset=japanese" rel="stylesheet"> 
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<article <?php post_class(); ?>>
  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>
</article>
<?php endwhile; endif; ?>

</body>
</html>