Steps to Create – wordpress original-theme #memorandum

2016年03月03日

This article, for myself, is written for keep a note of the steps to create the original theme of the word press.

Contents


まずローカルにワードプレスをインストール
FTPソフト使用してサーバ内の任意の場所にフォルダごとアップロード（最初はこれの意味が分からなかったので後で記述）
アップロードしたフォルダ > wp-content > themes内に新規フォルダを作成。名前は適当に
その中にindex.php／style.cssていう名前でそれぞれファイルを作成
以下、index.php内にコードを書いていく

!

Emmetで変換するとこからすたーと。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

まずタイトルを記述

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
</head>
<body>

</body>
</html>

次にwp_headとfootを付ける

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <?php wp_head(); ?>
</head>
<body>
    <header>

    </header>
    <footer>

    </footer>
    <?php wp_footer(); ?>
</body>
</html>

次、viewportとstylesheetの指定

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <header>

    </header>
    <footer>

    </footer>
    <?php wp_footer(); ?>
</body>
</html>

header大枠（outer）作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">

        </div>
    </header>
    <footer>

    </footer>
    <?php wp_footer(); ?>
</body>
</html>

せっかくマークダウンで書いてるのにそれらしさがないので表現を工夫しよう。

次、header大枠内div作成（これh3）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">
            <div id="<?php if(is_front_page()) : ?>ft-inner<?php else : ?>inner<?php endif; ?>">

            </div>
        </div>
    </header>
    <footer>

    </footer>
    <?php wp_footer(); ?>
</body>
</html>

innerの中のsection(h4)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">
            <div id="<?php if(is_front_page()) : ?>ft-inner<?php else : ?>inner<?php endif; ?>">
                <section>
                    <h1>
                        <a href="<?php echo home_url('/'); ?>">
                        <?php bloginfo('title'); ?></a>
                    </h1>
                    <?php bloginfo('description'); ?>
                </section>
            </div>
        </div>
    </header>
    <footer>

    </footer>
    <?php wp_footer(); ?>
</body>
</html>
ナビゲーション入れる。まずHOMEだけ(h5)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">
            <div id="<?php if(is_front_page()) : ?>ft-inner<?php else : ?>inner<?php endif; ?>">
                <section>
                    <h1>
                        <a href="<?php echo home_url('/'); ?>">
                        <?php bloginfo('title'); ?></a>
                    </h1>
                    <?php bloginfo('description'); ?>
                </section>
                <div id="nav-outer">
                    <ul id="nav">
                        <li class="<?php if(is_home()){echo 'current-nav';} ?>">
                            <a href="<?php echo home_url('/'); ?>">HOME</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <footer>

    </footer>
    <?php wp_footer(); ?>
</body>
</html>
ナビメニューにこのサイトについて・contactを追加
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">
            <div id="<?php if(is_front_page()) : ?>ft-inner<?php else : ?>inner<?php endif; ?>">
                <section>
                    <h1>
                        <a href="<?php echo home_url('/'); ?>">
                        <?php bloginfo('title'); ?></a>
                    </h1>
                    <?php bloginfo('description'); ?>
                </section>
                <div id="nav-outer">
                    <ul id="nav">
                        <li class="<?php if(is_home()){echo 'current-nav';} ?>">
                            <a href="<?php echo home_url('/'); ?>">HOME</a>
                        </li>
                        <li class="<?php if(is_page('about')){echo 'current-nav';} ?>">
                            <a href="<?php get_permalink(42); ?>">このサイトについて</a>
                        </li>
                        <li class="<?php if(is_page('contact')){echo 'current-nav';} ?>">
                            <a href="<?php get_permalink(98); ?>">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <footer>

    </footer>
    <?php wp_footer(); ?>
</body>
</html>

header終わり！

次、headerとfooterの間のコンテンツ部分。ここの全体をwrapperで囲う。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">
            <div id="<?php if(is_front_page()) : ?>ft-inner<?php else : ?>inner<?php endif; ?>">
                <section>
                    <h1>
                        <a href="<?php echo home_url('/'); ?>">
                        <?php bloginfo('title'); ?></a>
                    </h1>
                    <?php bloginfo('description'); ?>
                </section>
                <div id="nav-outer">
                    <ul id="nav">
                        <li class="<?php if(is_home()){echo 'current-nav';} ?>">
                            <a href="<?php echo home_url('/'); ?>">HOME</a>
                        </li>
                        <li class="<?php if(is_page('about')){echo 'current-nav';} ?>">
                            <a href="<?php get_permalink(42); ?>">このサイトについて</a>
                        </li>
                        <li class="<?php if(is_page('contact')){echo 'current-nav';} ?>">
                            <a href="<?php get_permalink(98); ?>">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <div id="wrapper">

    </div>
    <footer>

    </footer>
    <?php wp_footer(); ?>
</body>
</html>

ていうかちょっと待った！

body全体を囲うdivも作っといた方が良くない？

ということで#allpageとかで囲んでおこう

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <div id="allpage">
        <header>
            <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">
                <div id="<?php if(is_front_page()) : ?>ft-inner<?php else : ?>inner<?php endif; ?>">
                    <section>
                        <h1>
                            <a href="<?php echo home_url('/'); ?>">
                            <?php bloginfo('title'); ?></a>
                        </h1>
                        <?php bloginfo('description'); ?>
                    </section>
                    <div id="nav-outer">
                        <ul id="nav">
                            <li class="<?php if(is_home()){echo 'current-nav';} ?>">
                                <a href="<?php echo home_url('/'); ?>">HOME</a>
                            </li>
                            <li class="<?php if(is_page('about')){echo 'current-nav';} ?>">
                                <a href="<?php get_permalink(42); ?>">このサイトについて</a>
                            </li>
                            <li class="<?php if(is_page('contact')){echo 'current-nav';} ?>">
                                <a href="<?php get_permalink(98); ?>">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <div id="wrapper">

        </div>
        <footer>

        </footer>
        <?php wp_footer(); ?>
    </div>
</body>
</html>

やっぱりコンテンツ部分を囲うタグはwrapperじゃなくてcontentsに変更。
contents > cols-wrapper > col-main > sectionという形で階層を作って
その中にwordpressの投稿ループ記述（以下）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <div id="allpage">
        <header>
            <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">
                <div id="<?php if(is_front_page()) : ?>ft-inner<?php else : ?>inner<?php endif; ?>">
                    <section>
                        <h1>
                            <a href="<?php echo home_url('/'); ?>">
                            <?php bloginfo('title'); ?></a>
                        </h1>
                        <?php bloginfo('description'); ?>
                    </section>
                    <div id="nav-outer">
                        <ul id="nav">
                            <li class="<?php if(is_home()){echo 'current-nav';} ?>">
                                <a href="<?php echo home_url('/'); ?>">HOME</a>
                            </li>
                            <li class="<?php if(is_page('about')){echo 'current-nav';} ?>">
                                <a href="<?php get_permalink(42); ?>">このサイトについて</a>
                            </li>
                            <li class="<?php if(is_page('contact')){echo 'current-nav';} ?>">
                                <a href="<?php get_permalink(98); ?>">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <div id="contents">
            <div id="cols-wrapper">
                <div id="col-main">
                    <section>
                        <?php if(have_posts()) : while(have_posts()) : the_post(); ?>

                        <?php endwhile; else : ?>
                        <?php endif; ?>
                    </section>
                </div>
            </div>
        </div>
        <footer>

        </footer>
        <?php wp_footer(); ?>
    </div>
</body>
</html>

投稿ループ内postcoverで囲んで、タイトル枠をposttitle、タイトルh2日付postmeta

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <div id="allpage">
        <header>
            <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">
                <div id="<?php if(is_front_page()) : ?>ft-inner<?php else : ?>inner<?php endif; ?>">
                    <section>
                        <h1>
                            <a href="<?php echo home_url('/'); ?>">
                            <?php bloginfo('title'); ?></a>
                        </h1>
                        <?php bloginfo('description'); ?>
                    </section>
                    <div id="nav-outer">
                        <ul id="nav">
                            <li class="<?php if(is_home()){echo 'current-nav';} ?>">
                                <a href="<?php echo home_url('/'); ?>">HOME</a>
                            </li>
                            <li class="<?php if(is_page('about')){echo 'current-nav';} ?>">
                                <a href="<?php get_permalink(42); ?>">このサイトについて</a>
                            </li>
                            <li class="<?php if(is_page('contact')){echo 'current-nav';} ?>">
                                <a href="<?php get_permalink(98); ?>">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <div id="contents">
            <div id="cols-wrapper">
                <div id="col-main">
                    <section>
                        <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
                            <div class="postcover">
                                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                    <div class="posttitle">
                                        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                        <div class="postmeta"><?php the_time('Y年m月d日'); ?></div>
                                    </div>
                                </div>
                            </div>
                        <?php endwhile; else : ?>
                        <?php endif; ?>
                    </section>
                </div>
            </div>
        </div>
        <footer>

        </footer>
        <?php wp_footer(); ?>
    </div>
</body>
</html>

うん、コード増えてきてすごく見づらい。

ファイル分割しよう

index.phpを分割。header.php／footer.phpを作成。
更にbody内をindex-header.php／index-contents.phpに分割し
また更にindex-contents.php内の投稿ループ部分をmypost.phpとする

以下、全体像

---------------------ここからindex.php---------------------

---------------------ここからheader.php（<?php get_header(); ?>で呼び出し）---------------------
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
---------------------ここまでheader.php---------------------

<body>
    <div id="allpage">
---------------------ここからindex-header.php（<?php include("index-header.php"); ?>で呼び出し）---------------------
        <header>
            <div id="<?php if(is_front_page()) : ?>fr-outer<?php else : ?>outer<?php endif; ?>">
                <div id="<?php if(is_front_page()) : ?>ft-inner<?php else : ?>inner<?php endif; ?>">
                    <section>
                        <h1>
                            <a href="<?php echo home_url('/'); ?>">
                            <?php bloginfo('title'); ?></a>
                        </h1>
                        <?php bloginfo('description'); ?>
                    </section>
                    <div id="nav-outer">
                        <ul id="nav">
                            <li class="<?php if(is_home()){echo 'current-nav';} ?>">
                                <a href="<?php echo home_url('/'); ?>">HOME</a>
                            </li>
                            <li class="<?php if(is_page('about')){echo 'current-nav';} ?>">
                                <a href="<?php get_permalink(42); ?>">このサイトについて</a>
                            </li>
                            <li class="<?php if(is_page('contact')){echo 'current-nav';} ?>">
                                <a href="<?php get_permalink(98); ?>">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
---------------------ここまでindex-header.php---------------------

---------------------ここからindex-contents.php（<?php include("index-contents.php"); ?>で呼び出し）---------------------
        <div id="contents">
            <div id="cols-wrapper">
                <div id="col-main">
                    <section>
---------------------ここからmypost.php（<?php include("mypost.php"); ?>で呼び出し）---------------------
                        <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
                            <div class="postcover">
                                <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                    <div class="posttitle">
                                        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                        <div class="postmeta"><?php the_time('Y年m月d日'); ?></div>
                                    </div>
                                </div>
                            </div>
                        <?php endwhile; else : ?>
                        <?php endif; ?>
---------------------ここまでmypost.php---------------------
                    </section>
                </div>
            </div>
        </div>
---------------------ここまでindex-contents.php---------------------

---------------------ここからfooter.php（<?php get_footer(); ?>で呼び出し）---------------------
        <footer>

        </footer>
        <?php wp_footer(); ?>
    </div>
</body>
</html>
---------------------ここまでfooter.php---------------------

---------------------ここまでindex.php---------------------

という感じ。
結果index.php内のコードは以下のようになる

<?php get_header(); ?>
<body>
    <div id="allpage">
        <?php include("index-header.php"); ?>
        <?php include("index-contents.php") ?>
        <?php get_footer(); ?>

続き。投稿ループ内をカスタムしていくのでmypost.phpを編集する。
現在の状態は以下の通り

<!-- tab4つ分左寄せ -->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <div class="postcover">
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="posttitle">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="postmeta"><?php the_time('Y年m月d日'); ?></div>
            </div>
        </div>
    </div>
<?php endwhile; else : ?>
<?php endif; ?>

tabを左に寄せたので見やすい。それに全体像も分かりやすいかも
で、postcover内を完成させる

<!-- tab4つ分左寄せ -->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <div class="postcover">
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="posttitle">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="postmeta"><?php the_time('Y年m月d日'); ?></div>
            </div>
            <div class="eyecatch-excerpt">
                <div class="eyecatch">
                    <a href="<?php the_permalink(); ?>">
                    <?php if(has_post_thumbnail()){the_post_thumbnail();}
                    else{echo '<img src="' . get_bloginfo('template_directory') . '/img/nowprinting.png' . '" width="300" height="186" alt="thumbnail">';} ?>
                    </a>
                </div>
                <div class="excerpt">
                    <?php the_excerpt(); ?>
                </div>
            </div>
        </div>
    </div>
<?php endwhile; else : ?>
    <div class="no-post">
        <h2>記事はありません</h2>
        <p>お探しの記事はありませんでした。</p>
    </div>
<?php endif; ?>

ところどころ分からない記述が出てきた…サムネのところとかぐちゃぐちゃで意味分からない何コレ

けどまあ進めよう。自分で書いたものだしなんとかなる
次はページネーション
編集ファイルはindex-contents.php。現状は以下

<!-- tab2つ分左寄せ -->
<div id="contents">
    <div id="cols-wrapper">
        <div id="col-main">
            <section>
                <?php include("mypost.php") ?>
            </section>
        </div>
    </div>
</div>

セクション内に挿入。

<!-- tab2つ分左寄せ -->
<div id="contents">
    <div id="cols-wrapper">
        <div id="col-main">
            <section>
                <?php include("mypost.php") ?>
                <?php if(function_exists("pagination")) {
                    pagination($additional_loop->max_num_pages);
                    } ?>
            </section>
        </div>
    </div>
</div>

…function系ね。はいはいやったやった。どこで拾ったか覚えてないけどやったよ

下記をfunctions.php内にコピペするとページネーション出てくるようですね。
まじ自分でしたことなのに整理できてなくて忘れてる、今回みたいに一から覚え直すのは割といいことかもしれない

//Pagenation
function pagination($pages = '', $range = 2)
{
     $showitems = ($range * 2)+1;//表示するページ数（５ページを表示）

     global $paged;//現在のページ値
     if(empty($paged)) $paged = 1;//デフォルトのページ

     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;//全ページ数を取得
         if(!$pages)//全ページ数が空の場合は、１とする
         {
             $pages = 1;
         }
     }

     if(1 != $pages)//全ページが１でない場合はページネーションを表示する
     {
     echo "<div class=\"pagenation\">\n";
     echo "<ul>\n";
     //Prev：現在のページ値が１より大きい場合は表示
         if($paged > 1) echo "<li class=\"prev\"><a href='".get_pagenum_link($paged - 1)."'>Prev</a></li>\n";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                //三項演算子での条件分岐
                echo ($paged == $i)? "<li class=\"active\">".$i."</li>\n":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>\n";
             }
         }
    //Next：総ページ数より現在のページ値が小さい場合は表示
    if ($paged < $pages) echo "<li class=\"next\"><a href=\"".get_pagenum_link($paged + 1)."\">Next</a></li>\n";
    echo "</ul>\n";
    echo "</div>\n";
     }
}

次、サイドバー作成。同じindex-contents.phpファイルにcol-mainと並列でdiv挿入

<!-- tab2つ分左寄せ -->
<div id="contents">
    <div id="cols-wrapper">
        <div id="col-main">
            <section>
                <?php include("mypost.php") ?>
                <?php if(function_exists("pagination")) {
                    pagination($additional_loop->max_num_pages);
                    } ?>
            </section>
        </div>
        <div id="col-right">

        </div>
    </div>
</div>

この中に書いていく

<!-- tab2つ分左寄せ -->
<div id="contents">
    <div id="cols-wrapper">
        <div id="col-main">
            <section>
                <?php include("mypost.php") ?>
                <?php if(function_exists("pagination")) {
                    pagination($additional_loop->max_num_pages);
                    } ?>
            </section>
        </div>
        <div id="col-right">
            <section>
                <!-- popularposts -->
                <div class="<?php if(is_single()) : ?>spnone<?php endif; ?>">
                <?php get_my_popular_posts(10, 'day'); ?>
                </div>
                <!-- sidebar（カテゴリ／検索／アーカイブのみ） -->
                <?php if(is_active_sidebar('sidebar-1')) : dynamic_sidebar('sidebar-1'); ?>
                <?php else : ?>ウィジェットは設定されていません
                <?php endif; ?>
                <!-- embedded-timeline -->
                <div class="w-box w-twitterbox spnone">
                    <h3>twitter</h3>
                    <div class="twitter-tl">
                        <a class="twitter-timeline" 
                        href="https://twitter.com/stepbystep_blog" 
                        data-widget-id="662552092544860164"
                        data-chrome="nofooter">
                        @stepbystep_blogさんのツイート</a>
                            <script>
                            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],
                            p=/^http:/.test(d.location)?'http':'https';
                            if(!d.getElementById(id)){js=d.createElement(s);
                            js.id=id;
                            js.src=p+"://platform.twitter.com/widgets.js";
                            fjs.parentNode.insertBefore(js,fjs);}}
                            (document,"script","twitter-wjs");
                            </script>
                    </div>
                </div>

            </section>
        </div>
    </div>
</div>

上から順に

  • popularposts（functions.phpで出力）
  • サイドバー（functions.phpで出力）
  • 埋め込みタイムライン（ヘッダに必要事項を追記）

まずpopularpostsの出力から。以下をfunctions.phpに追記

//popularposts
function get_my_popular_posts($limit = 5, $range = 'all', $thumbnail_sizew = 80, $thumbnail_sizeh = 60)
{
    if (function_exists('wpp_get_mostpopular')) {
        wpp_get_mostpopular([
            'limit' => $limit,
            'range' => all,
            'order_by' => 'views',
            'post_type' => 'post',
            'stats_comments' => 0,
            'stats_author' => 0,
            'stats_date' => 0,
            'stats_views' => 1,
            'stats_category' => 1,
            'stats_date_format' => 'y.m.d',
            'thumbnail_width' => $thumbnail_sizew,
            'thumbnail_height' => $thumbnail_sizeh,
            'wpp_start' => '<div class="popular-posts"><h1 class="title">* recommended posts *</h1><ol class="popular-posts-list">',
            'wpp_end' => '</ol></div>',
            'post_html' => 
            '<li>
                <a href="{url}" title="{text_title}" class="a-table">
                    <div class="thumbnail">
                        {thumb_img}
                        {category}
                    </div>
                    <div class="mycontent">
                        <p class="title"><span class="mycontent-title">{text_title}</span>  - <span class="update">{date}</span></p>
                        <span class="meta">{views}&nbsp;views</span>
                    </div>
                </a>
            </li>'
        ]);
    }
}

widget表示は以下を同様にfunctions.phpに追記

//widget
register_sidebar( array(
'name' => 'サイドバーウィジット-1',
'id' => 'sidebar-1',
'description' => 'サイドバーのウィジットエリアです。',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
) );

管理画面の外観にウィジェットが追加されるので
カテゴリ／検索／アーカイブを入れる。
ツイッターはなぜか既に表示されているからひとまずほっておく

index.php最後footer。現状以下

        <footer>

        </footer>
        <?php wp_footer(); ?>
    </div>
</body>
</html>

サイト名を追記。
フッターは後々サイトマップ的な構成に変更するよてい

        <footer>
            <div id="footouter">
                <div id="footinner">
                    <section>
                        <p>copyright ⓒ 2016 <a href="#"><?php bloginfo(); ?></a></p>
                    </section>
                </div>
            </div>
        </footer>
        <?php wp_footer(); ?>
    </div>
</body>
</html>

ひとまずindex.phpは終了。frontpageを作ってコピペ？
cssに入りたいところだけどsingle.phpとの優先度合いはどちらか
とりあえずsingle.php作ろう

その前にちょっと寄り道。

MarkdownのOmniMarkupPreviewerのフォントを変更しよう。

すたらブログさんが非常に参考になりました、ありがとうございます。
こちらはまず、使用ソフトがSublimeText3ということが前提になる
　
［目的］プレビュー画面はfont-familyにgooglefontsのRalewayを適用したい
　
………いや。まあこれはすたらさん見れば分かるしここに書く内容（備忘録）からちょっとズレるか。

寄り道（したけどココに書くのは）やめた。続きます

あ、待った。もうひとつやりたいことが

あったわ。せっかくマークダウン使うことで効率化＆プレビューしながらまとめられるのはいいけど
改行するときがどうも面倒くさいんだ。
半角に切り替えてスペース2回打ってまた全角に戻すのってちょっと効率的でないよね
あと普通の文字も好きなところでコードの表示みたいに背景色付けたりするのもカンタンにできたらいいな。
あとあと改行も場所によっては連続して2～3行開けたりしないと見づらいし
できないことないよね、たぶん
個人的にはQiitaの コレ とかできたら最高

あ、あとスニペットを覚える！これユーザ辞書的な役割の機能ってことで合ってるのかな？

・・・ということで調査

まず複数改行から発見。

コレはどうやら直接タグ書くしかないみたい。<br>とか

<br>
<br>
<br>

こうすると

行間が開く。

はい。開いてないですね。
あれ、マークダウンのプレビューだと行間開くんだけど。
　
ふーむワードプレスの投稿画面内で<br>って入力してもソース自体反映されてないみたい。
原因調べるのちょっと面倒だし、当面は全角スペース+半角スペース2個入力して行間開ける対応でいきましょう。
　
　
　
素人丸出し感は置いとく。
　
　
　

次、改行の際に半角に切り替えずにできないかについて

調べたけどなかなかコレ！っていうやり方が見当たらない。
半角スペース2回入れるしかないのかな…
スニペットがユーザ辞書的な役割を果たすのなら、”　”（全角スペース）とかをトリガーにして
改行したいところまで打ったら全角スペース→Tabで半角スペース2コと改行が打ち込まれる
なんてことを期待していたけどそんな甘くなかった。
スニペット登録はできたけど行末で全角スペース入れてTab押してもインデントが開くだけでスニペット表示されない
こちらで言及されているように何かと競合してるのかな？

こちらは一旦保留。

最後。全角文字列をコードみたいに表示する。

これはカンタンだった…ふつうにタブ１コ分右寄せするだけ。

速攻できてしまうと悩んでたのがアホみたいに思えるな

ひとまずOK。

以下、single.php作成の続き

まずsingle.phpファイルを作成してindex.phpの内容をコピペ

▼single.php

<?php get_header(); ?>
<body>
    <div id="allpage">
        <?php include("index-header.php"); ?>
        <?php include("index-contents.php"); ?>
        <?php get_footer(); ?>

で。
今回はヘッダーとか入れないで、投稿記事だけを表示する構成にしてみようと思うので
余計なものを省く。<?php include("index-header.php"); ?>これとか要らない

<?php get_header(); ?>
<body>
    <div id="allpage">
        <?php include("index-contents.php"); ?>
        <?php get_footer(); ?>

index-contents.phpの中のサイドバーも要らないので、includeでの呼び出しを
やめて直接記述しdiv#col-rightを削除。
ページネーションも削除

<?php get_header(); ?>
<body>
    <div id="allpage">
        <div id="contents">
            <div id="cols-wrapper">
                <div id="col-main">
                    <section>
                        <?php include("mypost.php") ?>
                        <?php if(function_exists("pagination")) {
                            pagination($additional_loop->max_num_pages);
                            } ?>
                    </section>
                </div>
            </div>
        </div>
        <?php get_footer(); ?>

これですっきり。
次、本文が抜粋表示になっているので全文表示。
投稿ループ部分をmypost.phpからmysinglepost.phpに変更、mysinglepost.phpファイル作成してカスタマイズ

▼mysinglepost.php

<!-- tab4つ分左寄せ -->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <div class="postcover">
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="posttitle">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="postmeta"><?php the_time('Y年m月d日'); ?></div>
            </div>
            <div class="eyecatch-excerpt">
                <div class="eyecatch">
                    <a href="<?php the_permalink(); ?>">
                    <?php if(has_post_thumbnail()){the_post_thumbnail();}
                    else{echo '<img src="' . get_bloginfo('template_directory') . '/img/nowprinting.png' . '" width="300" height="186" alt="thumbnail">';} ?>
                    </a>
                </div>
                <div class="excerpt">
                    <?php the_content(); ?>
                </div>
            </div>
        </div>
    </div>
<?php endwhile; else : ?>
    <div class="no-post">
        <h2>記事はありません</h2>
        <p>お探しの記事はありませんでした。</p>
    </div>
<?php endif; ?>

構造的に、div.postcover > div#post-ID > （div.posttitle／div.eyecatch-excerpt）という感じ。
divの（要素？属性？セレクタ？プロパティ？）をsingle.php用に変更。
eyecatch-excerptは要らないので削除、投稿本文<?php the_content(); ?>をsinposttextで囲んで
div.sinpostcover > div#sinpost-ID > （div.posttitle／div.sinposttext）とする。

<!-- tab4つ分左寄せ -->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <div class="sinpostcover">
        <div id="sinpost-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="sinposttitle">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="sinpostmeta"><?php the_time('Y年m月d日'); ?></div>
            </div>
            <div class="sinposttext">
                <?php the_content(); ?>
            </div>
        </div>
    </div>
<?php endwhile; else : ?>
    <div class="no-post">
        <h2>記事はありません</h2>
        <p>お探しの記事はありませんでした。</p>
    </div>
<?php endif; ?>

OK。たぶん

それじゃあCSS書いていこうかー！

はい。まずstyle.cssを開く

※脈絡ないけどまた寄り道

・これ、MarkdownのCSSをカスタマイズするのに使えそうなのでメモ。

・あと、ワードプレスのテンプレートタグで自分のサイトのURLを呼び出す書き方を何度やっても忘れてしまうので
　ここでまとめておく。

タグの内容 書き方 出力結果
サイトのURL echo home_url() http://sby-s.jp
スタイルシートのパス echo get_stylesheet_uri() http://sby-s.jp/wp-content/themes/sby-s2/style.css
wordpressのテーマの位置のパス echo get_template_directory_uri() http://sby-s.jp/wp-content/themes/sby-s2

随時追記。
　
※寄り道終了
　
　
　
さて続き。
まずstyle.cssに下記を記述する

/*
Theme Name: yamada-original
Description:20160302作成
Theme URI: テーマの URL
Author: yamada
Author URI: 作った人の URL
Version: 1.0.0
License: ライセンス
License URI: ライセンスの URL
*/

次、使ってるグーグルフォントとfontawesomeとリセットcssをインポート

/*
Theme Name: yamada-original
Description:20160302作成
Theme URI: テーマの URL
Author: yamada
Author URI: 作った人の URL
Version: 1.0.0
License: ライセンス
License URI: ライセンスの URL
*/
@import url(https://fonts.googleapis.com/css?family=Play);
@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Gruppo);
@import url(https://fonts.googleapis.com/css?family=Bubbler+One);
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
@import url(css/fontello.css);
@import url(css/reset.css);

で、レスポンシブ対応で@importを書いていくんだけれど…

/*
Theme Name: yamada-original
Description:20160302作成
Theme URI: テーマの URL
Author: yamada
Author URI: 作った人の URL
Version: 1.0.0
License: ライセンス
License URI: ライセンスの URL
*/

@import url(https://fonts.googleapis.com/css?family=Play);
@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Gruppo);
@import url(https://fonts.googleapis.com/css?family=Bubbler+One);
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
@import url(css/fontello.css);
@import url(css/reset.css);
@import url(css/pc.css) screen and (min-width: 769px);
@import url(css/tb.css) screen and (max-width: 768px);
@import url(css/sp.css) screen and (max-width: 640px);

今まではこうやってた。けどやり方を変更

従来はヘッダから<link rel="stylesheet" href="<?php get_stylesheet_uri(); ?>">でふつうに同階層のstyle.cssを読み込んで
そこから上記のように@importで表示デバイスの幅毎に適用するスタイルシートを切り替えてた。

ここからは想定だけど
たぶんこのやり方だとスマホ表示の際に速度が落ちる気がしてる。
ページを読み込む際に、一瞬だけ表示幅が狭まる現象がこれのせいな気がしているので
今回他の方法で試してみようと思った

※補足
下記にも書いてある。2010年の記事だし信ぴょう性は分からないけど…

CSSを小分けにして@importで読み込んで管理している方も多いかと思いますが、これではHTTPリクエストがファイルの数だけ発生して、パフォーマンス的に良くありません。

CSSの@importを動的に1ファイルにまとめて圧縮するPHPのクラス「CSS_DynamicCompressor」 – Rewish.jp

ということで、
１．javascript(useragent)で切り替え
２．@importで切り替え
３．メディアクエリで切り替え
とレスポンシブにcss切り替える方法は３通りほどあるみたいですが
３のメディアクエリで切り替える方法でトライしてみる。

で、更にstyle.cssで切り替えるのでなく
head内で幅640pxを境にPC用とスマホ用で読み込むcssを切り替えるという少々乱暴？な形にする。

え、うおー！いますごいこと気づいた。

shift押しながらスペースボタン押したら、全角入力の状態でも半角スペース出てくる。

・・・うおー！すげえ！

無知って罪。

これは改行はかどりますわ
　
　
で、headの編集に戻って
　
▼現在のheader.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="all" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>

これをデバイスの幅別にメディアクエリで分ける

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="only screen and (max-device-width:640px)" href="<?php if(is_single()) : echo get_template_directory_uri(); ?>/css/sinsp.css<?php else : echo get_stylesheet_uri(); endif; ?>">
    <link rel="stylesheet" media="only screen and (min-device-width:641px)" href="<?php if(is_single()) : echo get_template_directory_uri(); ?>/css/sinpc.css<?php else : echo get_stylesheet_uri(); endif; ?>">

    <?php wp_head(); ?>
</head>

ていうことで、この構造だと表示デバイスの幅上限640pxまではテーマの位置のパス > css > sinsp.cssを読み込んで
641px以上のときはテーマの位置のパス > css > sinpc.cssを読み込む形になる。
　
でさらに、
640px以下の場合の中にも条件分岐を付けて
single.php（記事ページ）の場合はテーマの位置のパス > css > sinsp.cssを読み込んで
それ以外のときはテーマの位置のパス > style.cssを読み込むようにしてる。
　
同様に、641px以上のときも
single.phpの場合はテーマの位置のパス > css > sinpc.cssを読み込んで
それ以外のときはテーマの位置のパス > style.cssを読み込むという形。
　

条件分岐1 条件分岐2 読み込むcss
幅が640px以下の場合 single.phpの場合 css/sinsp.css
single.php以外の場合 style.css
幅が641px以上の場合 single.phpの場合 css/sinpc.css
single.php以外の場合 style.css

…いやあかんわ。それではsingle.php以外のときはstyle.css内でまたメディアクエリ書かなあかん

それならsingle.php以外のときもそれぞれ個別css読み込ませた方がいいな。

条件分岐1 条件分岐2 読み込むcss
幅が640px以下の場合 single.phpの場合 css/sinsp.css
single.php以外の場合→ css/sp.css
幅が641px以上の場合 single.phpの場合 css/sinpc.css
single.php以外の場合→ css/pc.css

うん、こうだね。
でリセットCSSとグーグルフォントはhead内で読み込んだ方がスッキリするから

　
▼header.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">
    <link rel="stylesheet" media="only screen and (max-device-width:640px)" href="<?php if(is_single()) : echo get_template_directory_uri(); ?>/css/sinsp.css<?php else : echo get_template_directory_uri(); ?>/css/pc.css<?php endif; ?>">
    <link rel="stylesheet" media="only screen and (min-device-width:641px)" href="<?php if(is_single()) : echo get_template_directory_uri(); ?>/css/sinpc.css<?php else : echo get_template_directory_uri(); ?>/css/sp.css<?php endif; ?>">

    <?php wp_head(); ?>
</head>

これでOKかな
　
まず記事ページをちゃんとさせたいのでsinpc.cssから。
下記の順番で整えていく。
１．sinpc.css
２．sinsp.css
３．pc.css
４．sp.css
　
最初にいきなりだけど大幅コピペ。
sublimetext3のマークダウンプレビュー専用パッケージ「OmniMarkupPreviewer」に入っているデフォルトcssをそのまま適用しちゃう。
▼sinpc.css

/*以下、Markdownのデフォルトcssをそのまま適用。フォントだけRaleway入れたもの*/

html {
  font-family: 'Raleway', 'メイリオ', 'Meiryo', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
  display: block;
}

audio,canvas,progress,video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  /*display: none;*/
  /*height: 0;*/
}

[hidden],template {
  display: none;
}

a {
  background: transparent;
}

a:active,a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,kbd,pre,samp {
  font-family: 'Raleway', 'メイリオ', 'Meiryo', sans-serif, monospace, monospace;
  font-size: 1em;
}

button,input,optgroup,select,textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,select {
  text-transform: none;
}

button,html input[type="button"],input[type="reset"],input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,th {
  padding: 0;
}

* {
  box-sizing: border-box;
}

input,select,textarea,button {
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
  min-width: 1020px;
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  color: #333;
  background-color: #fff;
}

a {
  color: #4183c4;
  text-decoration: none;
}

a:hover,a:active {
  text-decoration: underline;
}

hr,.rule {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
}

hr:before,.rule:before {
  display: table;
  content: "";
}

hr:after,.rule:after {
  display: table;
  clear: both;
  content: "";
}

h1,h2,h3,h4,h5,h6 {
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1.1;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 21px;
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 12px;
}

h6 {
  font-size: 11px;
}

small {
  font-size: 90%;
}

blockquote {
  margin: 0;
}

.lead {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 300;
  color: #555;
}

.text-muted {
  color: #999;
}

.text-danger {
  color: #bd2c00;
}

.text-emphasized {
  font-weight: bold;
  color: #333;
}

ul,ol {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

ol ol,ul ol {
  list-style-type: lower-roman;
}

ul ul ol,ul ol ol,ol ul ol,ol ol ol {
  list-style-type: lower-alpha;
}

dd {
  margin-left: 0;
}

tt,code {
  font-family: /*'Raleway', 'メイリオ', 'Meiryo', sans-serif, */Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
}

pre {
  margin-top: 0;
  margin-bottom: 0;
  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.container {
    max-width: 920px;
    margin: 0 auto 20px auto;
}

#header {
    background: #FAFAFA;
    background: -moz-linear-gradient(#FAFAFA, #EAEAEA);
    background: -webkit-linear-gradient(#FAFAFA, #EAEAEA);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#eaeaea')";
    border-bottom: 1px solid #CACACA;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4),0 0 10px rgba(0, 0, 0, 0.1);
}

#markup {
    padding: 3px;
}

#markup article {
    padding-top: 30px;
}

* {/*このoverflowhiddenのせいでスクロールできなかった！！！！*/
  /*overflow: hidden;*/
  font-family: 'Raleway', 'メイリオ', 'Meiryo', sans-serif, "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-wrap: break-word;
}

.markdown-body>*:first-child {
  margin-top: 0 !important;
}

.markdown-body>*:last-child {
  margin-bottom: 0 !important;
}

.absent {
  color: #c00;
}

.anchor {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding-right: 6px;
  padding-left: 30px;
  margin-left: -30px;
}

.anchor:focus {
  outline: none;
}

h1,h2,h3,h4,h5,h6 {
  position: relative;
  margin-top: 1em;
  margin-bottom: 16px;
  font-weight: bold;
  line-height: 1.4;
}

h1 .octicon-link,h2 .octicon-link,h3 .octicon-link,h4 .octicon-link,h5 .octicon-link,h6 .octicon-link {
  display: none;
  color: #000;
  vertical-align: middle;
}

h1:hover .anchor,h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,h5:hover .anchor,h6:hover .anchor {
  padding-left: 8px;
  margin-left: -30px;
  text-decoration: none;
}

h1:hover .anchor .octicon-link,h2:hover .anchor .octicon-link,h3:hover .anchor .octicon-link,h4:hover .anchor .octicon-link,h5:hover .anchor .octicon-link,h6:hover .anchor .octicon-link {
  display: inline-block;
}

h1 tt,h1 code,h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 code,h5 tt,h5 code,h6 tt,h6 code {
  font-size: inherit;
}

h1 {
  padding-bottom: 0.3em;
  font-size: 2.25em;
  line-height: 1.2;
  border-bottom: 1px solid #eee;
}

h1 .anchor {
  line-height: 1;
}

h2 {
  padding-bottom: 0.3em;
  font-size: 1.75em;
  line-height: 1.225;
  border-bottom: 1px solid #eee;
}

h2 .anchor {
  line-height: 1;
}

h3 {
  font-size: 1.5em;
  line-height: 1.43;
}

h3 .anchor {
  line-height: 1.2;
}

h4 {
  font-size: 1.25em;
}

h4 .anchor {
  line-height: 1.2;
}

h5 {
  font-size: 1em;
}

h5 .anchor {
  line-height: 1.1;
}

h6 {
  font-size: 1em;
  color: #777;
}

h6 .anchor {
  line-height: 1.1;
}

p,blockquote,ul,ol,dl,table,pre {
  margin-top: 0;
  margin-bottom: 16px;
}

hr {
  height: 4px;
  padding: 0;
  margin: 16px 0;
  background-color: #e7e7e7;
  border: 0 none;
}

ul,ol {
  padding-left: 2em;
}

ul.no-list,ol.no-list {
  padding: 0;
  list-style-type: none;
}

ul ul,ul ol,ol ol,ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

li>p {
  margin-top: 16px;
}

dl {
  padding: 0;
}

dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

blockquote {
  padding: 15px 15px 0px;
  color: #777;
  border-left: 4px solid #ddd;
  margin: 20px 15px 30px;
}
blockquote .source:before {
  content: "引用元：";
}
blockquote .source {
  width: 55%;
  margin: 10px 0px;
  margin-left: auto;
  padding-top: 5px;
  border-top: 1px solid rgb(205, 205, 205);
  font-size: 0.7em;
  text-align: right;
}
blockquote>:first-child {
  /*margin-top: 0;引用元部分作成のため一旦削除*/
}

blockquote>:last-child {
  /*margin-bottom: 0;引用元部分作成のため一旦削除*/
}

table {
  display: block;
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
}

table th {
  font-weight: bold;
}

table th,table td {
  padding: 6px 13px;
  border: 1px solid #ddd;
}

table tr {
  background-color: #fff;
  border-top: 1px solid #ccc;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

img {
  max-width: 100%;
  box-sizing: border-box;
}

span.frame {
  display: block;
  overflow: hidden;
}

span.frame>span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid #ddd;
}

span.frame span img {
  display: block;
  float: left;
}

span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: #333;
}

span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}

span.align-center>span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}

span.align-center span img {
  margin: 0 auto;
  text-align: center;
}

span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}

span.align-right>span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}

span.align-right span img {
  margin: 0;
  text-align: right;
}

span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}

span.float-left span {
  margin: 13px 0 0;
}

span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}

span.float-right>span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}

code,tt {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}

code:before,code:after,tt:before,tt:after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

code br,tt br {
  display: none;
}

del code {
  text-decoration: inherit;
}

pre>code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

.highlight {
  margin-bottom: 16px;
}

.highlight pre,pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f7f7f7;
  border-radius: 3px;
}

.highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

pre {
  word-wrap: normal;
}

pre code,pre tt {
  display: inline;
  max-width: initial;
  padding: 0;
  margin: 0;
  overflow: initial;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

pre code:before,pre code:after,pre tt:before,pre tt:after {
  content: normal;
}

kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #555;
  vertical-align: middle;
  background-color: #fcfcfc;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #bbb;
}

むっちゃ長いな。

途中変更点は３点。
１．フォントをRaleway（とメイリオとsansserif）に変更。※pre code内だけはRaleway入れてない
２．途中のoverflow:hidden;を解除。これがあると画面スクロールできない
３．blockquote周辺のデザインを少し変更。引用元部分（.source）とかの構成のため
　
で、更にsingle.php > mysinglepost.phpの構成に合わせていくつか追記してく

.sinpostcover {/*全体のカバー*/
  /*background-color: red;*/
  max-width: 920px;
  margin: auto;
  margin-top: 0px;
  margin-bottom: 30px;
}
.sinposttitle {/*タイトルのカバー*/
  padding-top: 2.5rem;
  padding-bottom: 0.6rem;
  font-size: 1.4rem;
  /*line-height: 3.6rem;*/
  border-bottom: 1px solid #eee;
}
.sinposttitle .sinpostmeta {
  font-size: 1.7rem;
  line-height: 2.2rem;
}
.sinposttext {/*本文のカバー*/
  margin-top: 20px;
  font-size: 1.3rem;
  line-height: 2rem;
}
.sinposttext img:first-child {
    display: block;
    margin: 30px auto;
}
img {
    max-height: 300px!important;
    width: auto;
}
.midashi3 {/*薄いグレー背景*/
  width: 95%;
  margin: auto;
  margin-bottom: 16px;
  padding: 20px;
  background-color: rgb(245, 245, 245);
}
.mokuji {
  width: 65%;
  /*margin: auto;*/
  margin-top: 26px;
  margin-bottom: 36px;
  padding: 20px;
  padding-bottom: 30px;
  line-height: 2.5em;
  background-color: rgb(245, 245, 245);
  border: 1px solid skyblue;
}
.mokuji h3 {
  margin: 20px 0px 15px;
  /*padding-bottom: 10px;*/
}
.mokuji ul {
  list-style: none;
  margin-bottom: 0px;
}
.mokuji ul li {
  line-height: 2em;
}

ひとまずこれでsinpc.cssは完了（めっちゃ端折ったけど）。
　
次、sinsp.css。
こちらもまずOmuniMarkupのデフォルトcssをコピペ

/*以下、Markdownのデフォルトcssをそのまま適用。フォントだけRaleway入れたもの*/

html {
  font-family: 'Raleway', 'メイリオ', 'Meiryo', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
  display: block;
}

audio,canvas,progress,video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  /*display: none;*/
  /*height: 0;*/
}

[hidden],template {
  display: none;
}

a {
  background: transparent;
}

a:active,a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,kbd,pre,samp {
  font-family: 'Raleway', 'メイリオ', 'Meiryo', sans-serif, monospace, monospace;
  font-size: 1em;
}

button,input,optgroup,select,textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,select {
  text-transform: none;
}

button,html input[type="button"],input[type="reset"],input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,th {
  padding: 0;
}

* {
  box-sizing: border-box;
}

input,select,textarea,button {
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
  /*min-width: 1020px;*/
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  color: #333;
  background-color: #fff;
}

a {
  color: #4183c4;
  text-decoration: none;
}

a:hover,a:active {
  text-decoration: underline;
}

hr,.rule {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
}

hr:before,.rule:before {
  display: table;
  content: "";
}

hr:after,.rule:after {
  display: table;
  clear: both;
  content: "";
}

h1,h2,h3,h4,h5,h6 {
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1.1;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 21px;
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 12px;
}

h6 {
  font-size: 11px;
}

small {
  font-size: 90%;
}

blockquote {
  margin: 0;
}

.lead {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 300;
  color: #555;
}

.text-muted {
  color: #999;
}

.text-danger {
  color: #bd2c00;
}

.text-emphasized {
  font-weight: bold;
  color: #333;
}

ul,ol {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

ol ol,ul ol {
  list-style-type: lower-roman;
}

ul ul ol,ul ol ol,ol ul ol,ol ol ol {
  list-style-type: lower-alpha;
}

dd {
  margin-left: 0;
}

tt,code {
  font-family: 'Raleway', 'メイリオ', 'Meiryo', sans-serif, Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
}

pre {
  margin-top: 0;
  margin-bottom: 0;
  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.container {
    /*max-width: 920px;*/
    margin: 0 auto 20px auto;
}

#header {
    background: #FAFAFA;
    background: -moz-linear-gradient(#FAFAFA, #EAEAEA);
    background: -webkit-linear-gradient(#FAFAFA, #EAEAEA);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#eaeaea')";
    border-bottom: 1px solid #CACACA;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4),0 0 10px rgba(0, 0, 0, 0.1);
}

#markup {
    padding: 3px;
}

#markup article {
    padding-top: 30px;
}

* {/*このoverflowhiddenのせいでスクロールできなかった！！！！*/
  /*overflow: hidden;*/
  font-family: 'Raleway', 'メイリオ', 'Meiryo', sans-serif, "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-wrap: break-word;
}

.markdown-body>*:first-child {
  margin-top: 0 !important;
}

.markdown-body>*:last-child {
  margin-bottom: 0 !important;
}

.absent {
  color: #c00;
}

.anchor {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding-right: 6px;
  padding-left: 30px;
  margin-left: -30px;
}

.anchor:focus {
  outline: none;
}

h1,h2,h3,h4,h5,h6 {
  position: relative;
  /*margin-top: 1em;*//*これのせいでタイトルの上にマージンついてた。。*/
  margin-bottom: 16px;
  font-weight: bold;
  line-height: 1.4;
}

h1 .octicon-link,h2 .octicon-link,h3 .octicon-link,h4 .octicon-link,h5 .octicon-link,h6 .octicon-link {
  display: none;
  color: #000;
  vertical-align: middle;
}

h1:hover .anchor,h2:hover .anchor,h3:hover .anchor,h4:hover .anchor,h5:hover .anchor,h6:hover .anchor {
  padding-left: 8px;
  margin-left: -30px;
  text-decoration: none;
}

h1:hover .anchor .octicon-link,h2:hover .anchor .octicon-link,h3:hover .anchor .octicon-link,h4:hover .anchor .octicon-link,h5:hover .anchor .octicon-link,h6:hover .anchor .octicon-link {
  display: inline-block;
}

h1 tt,h1 code,h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 code,h5 tt,h5 code,h6 tt,h6 code {
  font-size: inherit;
}

h1 {
  padding-bottom: 0.3em;
  font-size: 2.25em;
  line-height: 1.2;
  border-bottom: 1px solid #eee;
}

h1 .anchor {
  line-height: 1;
}

h2 {
  padding-bottom: 0.3em;
  font-size: 1.75em;
  line-height: 1.225;
  border-bottom: 1px solid #eee;
}

h2 .anchor {
  line-height: 1;
}

h3 {
  font-size: 1.5em;
  line-height: 1.43;
}

h3 .anchor {
  line-height: 1.2;
}

h4 {
  font-size: 1.25em;
}

h4 .anchor {
  line-height: 1.2;
}

h5 {
  font-size: 1em;
}

h5 .anchor {
  line-height: 1.1;
}

h6 {
  font-size: 1em;
  color: #777;
}

h6 .anchor {
  line-height: 1.1;
}

p,blockquote,ul,ol,dl,table,pre {
  margin-top: 0;
  margin-bottom: 16px;
}

hr {
  height: 4px;
  padding: 0;
  margin: 16px 0;
  background-color: #e7e7e7;
  border: 0 none;
}

ul,ol {
  padding-left: 2em;
}

ul.no-list,ol.no-list {
  padding: 0;
  list-style-type: none;
}

ul ul,ul ol,ol ol,ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

li>p {
  margin-top: 16px;
}

dl {
  padding: 0;
}

dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

blockquote {
  padding: 0 15px;
  color: #777;
  border-left: 4px solid #ddd;
}

blockquote>:first-child {
  margin-top: 0;
}

blockquote>:last-child {
  margin-bottom: 0;
}

table {
  display: block;
  width: 100%;
  /*width: 100px!important;*/
  overflow: auto;
  /*word-break: normal;*/
  /*word-break: keep-all;*/
}

table th {
  font-weight: bold;
}

table th,table td {
  padding: 6px 13px;
  border: 1px solid #ddd;
}

table tr {
  background-color: #fff;
  border-top: 1px solid #ccc;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

img {
  max-width: 100%;
  box-sizing: border-box;
}

span.frame {
  display: block;
  overflow: hidden;
}

span.frame>span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid #ddd;
}

span.frame span img {
  display: block;
  float: left;
}

span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: #333;
}

span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}

span.align-center>span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}

span.align-center span img {
  margin: 0 auto;
  text-align: center;
}

span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}

span.align-right>span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}

span.align-right span img {
  margin: 0;
  text-align: right;
}

span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}

span.float-left span {
  margin: 13px 0 0;
}

span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}

span.float-right>span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}

code,tt {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}

code:before,code:after,tt:before,tt:after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

code br,tt br {
  display: none;
}

del code {
  text-decoration: inherit;
}

pre>code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

.highlight {
  margin-bottom: 16px;
}

.highlight pre,pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f7f7f7;
  border-radius: 3px;
}

.highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

pre {
  word-wrap: normal;
}

pre code,pre tt {
  display: inline;
  max-width: initial;
  padding: 0;
  margin: 0;
  overflow: initial;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

pre code:before,pre code:after,pre tt:before,pre tt:after {
  content: normal;
}

kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #555;
  vertical-align: middle;
  background-color: #fcfcfc;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #bbb;
}

2～3？変更箇所あり。
更にpc同様いくつかカスタマイズ

* {
    word-wrap: break-word;
}
.sinpostcover {/*全体のカバー*/
    margin: 0px 10px;
    /*background-color: blue;*/
}
.sinposttitle {/*タイトルのカバー*/
  /*padding-top: 1rem;*/
  padding-bottom: 0.6rem;
  /*font-size: 1.4rem;*/
  /*line-height: 3.6rem;*/
  border-bottom: 1px solid #eee;
  /*background-color: red;*/
}
.sinposttext {/*本文のカバー*/
  margin-top: 20px;
  /*font-size: 1.3rem;*/
  /*line-height: 2rem;*/
}
.sinposttext img:first-child {
  display: block;
  margin: 20px auto;
}
img {
  max-height: 200px!important;
  width: auto;
}

PCより少なめ。
ひとまずこれで完了
　
次、pc.cssを整形していく

 ≪  前の記事
IMG_2079About tax and social insurance
次の記事  ≫ 
crayon5wordpressのオリジナルテーマ作成時に最初に作るindex.phpファイルの作成手順メモ（自分用）のついでに投稿記事内にソースコードを表示するプラグインCrayon Syntax Highlighterをテスト