Library仕様書

目次

  1. クライアントの要望
  2. はじめに
    1. サイトの目的
    2. 対象
    3. 使用するツール
  3. 基本事項
    1. データ管理
    2. 動作確認
    3. ディレクトリ管理
    4. 命名規則
  4. 技術規定
    1. ターゲットブラウザ
    2. JavaScriptの利用
    3. 文字コード
  5. デザイン規定
    1. 使用フォント
    2. 配色
    3. 画面サイズ
    4. リンク
    5. 文字参照
    6. 画像ファイルの形式
  6. タグ規定
    1. マークアップ規定
    2. 記事入力規定

1.クライアントの要望

2.はじめに

2-1 サイトの目的

Webサイト制作の途中でタグの意味やスペルを忘れてしまったり、わからないタグを調べる時に利用してもらいたい

2-2 対象

PCサイト、スマートフォンサイト
URL http://969work.net/

2-3 使用するツール

  • WordPress
  • WordPressプラグイン
  • Google Analytics

2-3-1 WordPressプラグインの説明

All In One SEO Pack
SEO対策の設定を総合的に管理できるプラグイン
Google Analyticator
高機能のアクセス解析Google AnalyticsをWordPressで使えるようにしてくれるプラグイン
Google XML Sitemaps
Googleウェブマスターツールにサイトマップを登録するプラグイン
Multi Device Switcher
デバイスによって自動的にテーマを切り替えてくれるプラグイン
PS Auto Sitemap
WordPressで作成したサイトのサイトマップを自動表示させるためのプラグイン
WP Social Bookmarking Light
共有ボタンを表示するプラグイン

3.基本事項

3-1 データ管理

  • 新規にWebコンテンツを制作する場合はデータのバックアップを取る
  • 既存のWebコンテンツに対する変更を行う場合、必ずサーバーから新たにダウンロードしたデータで作業を行う
バックアップ方法例
日付をファイル名に付ける
例) index_20140120.html

3-2 動作確認

  • 動作確認は本番サーバと同じ環境のテストサーバ環境を用意して行う
  • 本番サーバを使用してテストをおこなう場合は、本番サイト用とは別のディレクトリを作成してテストする
    テスト用ディレクトリ例
    http://969work.net/TEST

3-3 ディレクトリ管理

PCサイト
http://969work.net/clockwork/wp-content/themes/Library
スマホサイト
http://969work.net/clockwork/wp-content/themes/Library-Mobile
3-3-1 Library内部
フォルダ
css
cssファイルを格納する
images
画像を格納する
js
JavaScriptを格納する
ファイル
comment.php
コメント部分
footer.php
フッター部分
functions.php
関数を記述する
header.php
ヘッダー部分
index.php
コンテンツ部分
page.php
固定ページ
searchform.php
検索部分
sidebar.php
サイドバー部分
single.php
単一ページ
style.css
スタイルシート
scrrenshot.png
テーマ選択時のイメージ画像
3-3-2 Library-Mobile内部
Libraryを親テーマにしているので、下記のみとなる
style.css
スタイルシート
scrrenshot.png
テーマ選択時のイメージ画像

3-4 命名規則

  • ディレクトリ名およびファイル名は全て半角英数字(小文字)にする
    なお、先頭の文字はアルファベットにする
  • ローマ字英語表記は原則として禁止する
    使わざるを得ない場合は責任者の確認をとってから使用する
    例)
    ✕ gyouji → ○ event
  • わかりやすく、規則的な名称をつける
    例)
    商品: products
    サービス: services
    会社案内: access, location
    よくある質問: faq

4.技術規定

4-1 ターゲットブラウザ

  • Google Chrome
  • Firefox
  • Safari

4-2 JavaScriptの利用

Javascriptの機能が使えない環境においても情報へアクセスできるように、代替テキストや代替画像を用意する

4-3 文字コード

文字コードは「UTF-8」を使用する

5.デザイン規定

5-1 使用フォント

タイトル
Google Fonts: Josefin Sans
全体
  • Verdana
  • sans-serif
  • ヒラギノ角ゴ Pro W3
  • Hiragino Kaku Gothic Pro

5-2 配色

5-2-1 PCサイト
ベースカラー
#D07895
#555
サブカラー
#F4B4BD
アクセントカラー
#FF9966
#805E90
5-2-2 スマホサイト
ベースカラー
#805E90
#D07895
サブカラー
#F4B4BD
アクセントカラー
#FF9966

5-3 画面サイズ

5-3-1 PCサイト
全体幅
1000px
ヘッダー
1000px × 90px
グローバルナビのメニューの一つ
115px × 35px
コンテンツ幅
720px
サイドバー幅
250px
フッター
1000px × 60px
5-3-2 スマホサイト
全体幅
720px
ヘッダー
720px × 90px
グローバルナビのメニューの一つ
115px × 35px
コンテンツ幅
720px
サイドバー幅
720px
フッター
720px × 60px

5-4 リンク

  • リンクテキストは太字にする
  • マウスオーバーで色を変える

5-5 文字参照

機種依存文字、半角カナは使用しない
記号については文字参照コードを使用する

主な文字参照コード
「 & 」
&
「 " 」
"
「 < 」
&lt;
「 > 」
&gt;
「 « 」
&laquo;
「 » 」
&raquo;
「 © 」
&copy;

5-6 画像ファイルの形式

GIF, JPG/JPEG, PNGを使用する

6.タグ規定

6-1 マークアップ規定

header.php - <head>内
言語属性の指定
<html <?php language_attributes(); ?>>
文字コードの指定
<meta charset="<?php bloginfo('charset'); ?>">
文書の表示領域を設定
スマートフォン用の設定
<meta name="viewport" content="width=device-width">
サイトの説明
50〜70文字くらいに収める
<meta name="description" content="サイトの説明">
サイトのキーワード
5〜7つに絞る
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5,">
サイトの作成者
<meta name="author" content="作成者">
サイトのタイトル
記事タイトル | サイトのタイトルと表示する
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
スタイルシートのリンク先

ベースのスタイルシート

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">

サブのスタイルシートはcssフォルダに格納する

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/css/xxx.css">

ファビコンを表示させる
256px × 256pxでfavicon.ico画像を用意し、imagesフォルダに格納する
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
スマートフォン用のホーム画面に画像を表示させる
256px × 256pxでapple-touch-icon.png画像を用意し、imagesフォルダに格納する
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon.png">
投稿や固定ページにコメントをつける
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
Google Analyticsの設置
Google Analyticsでアカウントを作成し、トラッキングコードを埋め込む
JavaScriptがOFFのブラウザ対応
<noscript>
<p>このページではJavaScriptをONにしてください。</p>
</noscript>
header.php - <body>内上部
bodyに異なるclass属性をつける
<body <?php body_class(); ?>>
サイト名をh1にしてWordPressタグ対応させる

h1にid="logo"をつける

<h1 id="logo">
<a href="<?php echo home_url('/'); ?>"><span class="mobile"><?php bloginfo('name'); ?></span></a>
</h1>

スマートフォンで閲覧時にサイト名の後ろにMobileを表示させる

CSS
.mobile:after {
content: " × Mobile";
}
サイトの説明を表示させる
<?php bloginfo('description'); ?>
検索フォームを右端に用意する
<p id="description">
<?php bloginfo('description'); ?>
</p>
header.php - <body>内ナビゲーション
カスタムメニューを追加し、表示する
functions.php内に記述
// カスタムメニューを有効化
add_theme_support('menus');

// カスタムメニューの設定
register_nav_menu('header-navi', 'ヘッダーのナビゲーション');
header.php内に記述
<nav>
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
</nav>
index.php
header.phpを読み込む
<?php get_header(); ?>
投稿記事を読み込むPHP処理
<?php
if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始
?>
記事タイトルの設定
<header>
<h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
</header>
新規投稿から3日間NEWを点滅表示させる
<?php
$days = 3;
$today = date_i18n('U');
$entry = get_the_time('U');
$elapsed = date('U',($today - $entry)) / 86400;
if( $days > $elapsed ){
echo '<span class="new">New</span>';
}
?>
投稿した日付を表示する
<?php echo get_the_date(); ?>
カテゴリーを表示する
Category -<?php the_category(', ') ?>
コメント件数を表示する
<?php comments_popup_link('Comment : 0', 'Comment : 1', 'Comments : %'); ?>
画像を表示する
<?php the_post_thumbnail(); ?>
続きを読むを表示する
<?php the_content('続きを読む »'); ?>
class="tags"をつけたタグを表示する
<?php the_tags('Tag : <span class="tags">','</span> <span class="tags">', '</span>'); ?>
« PREV , NEXT »を表示する
<?php
if ( $wp_query -> max_num_pages > 1 ) : ?>
<section class="navigation">
<aside class="alignleft">
<?php next_posts_link('« PREV'); ?>
</aside>
<aside class="alignright">
<?php previous_posts_link('NEXT »'); ?>
</aside>
</section>
<?php
endif;
?>
sidebar.phpを読み込む
<?php get_sidebar(); ?>
footer.phpを読み込む
<?php get_footer(); ?>
page.php&single.php
index.phpを元に編集する
sidebar.php
サイドバーを追加し、表示する
functions.php内に記述
// サイドバーウィジットを有効化
register_sidebar( array(
'name' => 'サイドバーウィジット-1',
'id' => 'sidebar-1',
'description' => 'サイドバーのウィジットエリアです。',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
));
sidebar.phpに記述
<div id="sidebar">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) :
dynamic_sidebar( 'sidebar-1' );
else:
?>
<div class="widget">
<h2>No Widget</h2>
<p>ウィジットは設定されていません。</p>
</div>
<?php
endif;
?>
</div>
comment.php
コメントがあった場合の処理
<?php
if(have_comments()):
?>
コメント一覧を表示する
<h3 id="comments">Comment</h3>
<ol class="commets-list">
<?php wp_list_comments('avatar_size=55'); ?>
</ol>
コメントが多い場合はページャーを表示する
<div class="comment-page-link">
<?php paginate_comments_links(); ?>
</div>
コメントフォームの設置
<?php
endif;

$args = array(
'title_reply' => 'Leave a Reply',
'label_submit' => 'Submit Comment'
);
comment_form($args);
?>
footoer.php
コピーライト表示
<footer id="footer">
<p id="copyright" class="wrapper">© <a href="http://969work.net/"><?php bloginfo('name'); ?></a> All Rights Reserved.</p>
</footer>
wp_head()タグを読み込む
表示スピードアップのためフッターに設置
不具合が起こる場合は</head>の直前に記述する
※JavaScriptの読み込みはこのタグの後でないと読み込めないので注意する
<?php wp_head(); ?>
PAGE TOPへ戻るボタンの設置
<p id="page-top"><a href="#wrap">PAGE TOP</a></p> <script src="<?php echo get_template_directory_uri(); ?>/js/top.js"></script>
wp_footer()タグを読み込む
</body>の直前に記述する
<?php wp_footer(); ?>

6-2 記事入力規定

紹介するタグ
<h3 class="title_tag">
続きを読むをクリックするとアコーディオンが開閉する
<dl id="acMenu">
<dt class="menu-dt">続きを読む »</dt>
<dd class="menu-dd">
内容を記述する
</dd>
</dl>

PAGE TOP