投稿者: rye

  • GTmetrix Grade:A A

    GTmetrix Grade:A A

    Latest Performance Report for:

    ミライを探しています。

    Report generated: Fri, Jan 31, 2014, 10:27 PM -0800
    Test Server Region: Vancouver, Canada
    Using: Firefox (Desktop) 25.0.1, Page Speed 1.12.16, YSlow 3.1.7

    Summary
    APage Speed Grade:A(98%)
    AYSlow Grade:A(99%)
    Page load time: 1.64s
    Total page size: 74.3KB

  • 読みやすいフォントとサイズ

    文字が小さくて読みにくかったので
    フォント:メイリオ
    フォントサイズ:16pxに変更しました。

    CSS変更メモ

    body {
      font: 16px/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, arial, helvetica, clean, sans-serif;
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, arial, helvetica, clean, sans-serif;
      font-size: 16px;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      line-height: 1.5;
    }

    Before

     吾輩は猫である。名前はまだ無い。
     どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いてゐた事だけは記憶してゐる。吾輩はここで始めて人間といふものを見た。しかもあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。この書生といふのは時々我々を捕へて煮て食ふといふ話である。

    After

     吾輩は猫である。名前はまだ無い。
     どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いてゐた事だけは記憶してゐる。吾輩はここで始めて人間といふものを見た。しかもあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。この書生といふのは時々我々を捕へて煮て食ふといふ話である。

    参照:夏目漱石「吾輩は猫である」

    読みやすくなりました。
    雰囲気も変わって大変気に入っています。

  • 「早見表」すぐわかる1分~100年まで何秒なのか一覧表

    最近よく使うので一覧にしました。
    1時間は3600秒 1日は86400秒 1ヶ月(30日)は2592000秒 1年は31536000秒
    ※1ヶ月は30日で計算しています。うるう年は計算に入っていません。

    時間
    1分 60秒
    1時間 3600秒
    12時間 43200秒
    24時間 86400秒
    1週間 604800秒
    2週間 1209600秒
    1ヶ月(30日) 2592000秒
    2ヶ月(60日) 5184000秒
    3ヶ月(90日) 7776000秒
    4ヶ月(120日) 10368000秒
    5ヶ月(150日) 12960000秒
    6ヶ月(180日) 15552000秒
    7ヶ月(210日) 18144000秒
    8ヶ月(240日) 20736000秒
    9ヶ月(270日) 23328000秒
    10ヶ月(300日) 25920000秒
    11ヶ月(330日) 28512000秒
    12ヶ月(360日) 31104000秒
    1年(365日) 31536000秒
    時間
    1年(365日) 31536000秒
    2年(730日) 63072000秒
    3年(1095日) 94608000秒
    4年(1460日) 126144000秒
    5年(1825日) 157680000秒
    6年(2190日) 189216000秒
    7年(2555日) 220752000秒
    8年(2920日) 252288000秒
    9年(3285日) 283824000秒
    10年(3650日) 315360000秒
    20年(7300日) 630720000秒
    30年(10950日) 946080000秒
    40年(14600日) 1261440000秒
    50年(18250日) 1576800000秒
    60年(21900日) 1892160000秒
    70年(25550日) 2207520000秒
    80年(29200日) 2522880000秒
    90年(32850日) 2838240000秒
    100年(36500日) 3153600000秒
  • <LINK REV=”MADE” HREF=”mailto:?”> が含まれていません。を消す方法

    Another HTML-lintで100点を採っても最後に残るエラー
    [php]<link rev="made" href="malto:~" />[/php]が含まれていません。
    このエラーは減点されませんが一個だけ残ってるとなんだか気になりますね。
    ここまで来たらすべてエラーを消したいのが人情ってものです。
    自分のメールアドレスを入れればいいだけの話なのですがスパムが来る可能性があります。

    アドレスをエンティティ化すれば多少はマシかもしれませんが
    最近のスパムは進化しているのであまりアドレスを乗せたくありません。

    ですので,
    困ったときのexample.comを使わせていただきます。

    このままでは芸がないのでエンティティ化(madeもエンティティ化してみました。)
    <link rev=”m&#97;&#100;e” href=”m&#97;&#105;lt&#111;&#58;ho&#103;e&#64;&#101;xam&#112;le&#46;&#99;&#111;m” />
    HTMLエンティティ化

    チェックの結果は以下のとおりです。

    http://rougebleu.net/ を XHTML1.0 Strict としてチェックしました。
    エラーは見つかりませんでした。?(^o^)/ このHTMLは 100点です。タグが 29種類 141組使われています。文字コードは UTF-8 のようです。

    完全な100点 たいへんよくできましたをいただきました!

  • Sublime Text 3 既定のプログラムに設定出来ないときの対処方法

    Sublime Text 3 既定のプログラムに設定出来ないときの対処方法

    Windowsキー + Rを押してファイル名を指定して実行画面に「regedit」と入力しEnter。レジストリエディタが起動します。

    コンピュータ/HKEY_CLASSES_ROOT/Applicationsの中に sublime_text.exe を見つけて削除します。

    これで既定のプログラムとして設定出来ます。

  • php splitは非推奨

    debugモードにしたらエラーが出たのでメモ。
    wp.vicuna functons.php
    361,449
    $arr_content = split("\n", $content);

    split
    array split ( string $pattern , string $string [, int $limit = -1 ] )
    string を、正規表現によって配列に分割します。

    警告
    この関数は PHP 5.3.0 で 非推奨となりました。 この機能を使用しないことを強く推奨します。

    どうやらexplodeを使うのが今回は一番良さそうです。

    361,449
    $arr_content = explode("\n", $content);

  • Xrea.com(無料サーバー)においてHTMLソース一行が改行される不具合の改善

    Xrea.comの無料サーバーでWordPressなどを使うと
    HTMLソース一行目に空欄ができてしまいます。

    一行目でXML宣言をしなければいけないXHTML 1.0 Strictでは致命的です。
    Feedを拾ってくれなくなったりもして色々不具合がでますし、W3Cにも怒られます。

    色々調べた結果、自動無料広告が悪さをしているっぽいです。

    xフォルダを作ってインストールしなおせば直りますが、再インストールも面倒ですし
    Urlに/x/と余分なものがつくのはみっともないので他の方法を探します。

    [code]<!–nobanner–>[/code]

    を使って広告を消しても一行目が空欄の不具合は改善されませんでしたので、
    .htaccessを使って広告を消します。

    [sourcecode]LayoutIgnoreURI *[/sourcecode]

    の一行の.htaccessファイルを作ってWordPressがインストールされているフォルダにアップロード。
    (すでに.htaccessファイルがある場合は一行追加)

    これで広告が消えます。広告を消した後は手動広告を挿入してください。
    それしないと契約違反になり最悪の場合はアカウント削除されてしまいます。

    広告の位置にこだわらないのならばheader.phpに手動広告のコードを書くのが手っ取り早いです。

    [sourcecode lag=”html”]
    <script type="text/javascript" src="http://imgj.xrea.com/xa.j?site=xxx.sxxx.xrea.com"></script>
    <noscript><iframe height="60" width="468" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="true" src="http://img.xrea.com/ad_iframe.fcg?site=xxx.sxxx.xrea.com"><a href="http://img.xrea.com/ad_click.fcg?site=xxx.sxxx.xrea.com" target="_blank"><img src="http://img.xrea.com/ad_img.fcg?site=xxx.sxxx.xrea.com" border="0" alt="xreaad"></a></iframe></noscript>
    [/sourcecode]

    手動広告用のコードは人それぞれ違うのでxrea.comの管理画面からコピーして使ってください。

  • wp.Vicuna グローバルナビを導入

    wp.Vicuna.Extにはグローバルナビが搭載されていますが
    WordPress純正のものを使いたいので導入してみます。

    functions.php

    まず、functions.phpに以下のコードを追加

    [sourcecode language=”php”]<?php
    //G-Navi
    register_nav_menus();
    ?>[/sourcecode]

    各ページにコードを追加

    index.php
    page.php
    single.php
    archive.php
    category.php
    .etc
    にグローバルナビを表示したい位置に以下のコードを追加。

    [sourcecode language=”php”]<?php wp_nav_menu(); ?>[/sourcecode]

    標準のメニューを新規作成

    WordPress標準のメニューをwordpressコントロールパネルにて新規作成(外観→メニュー)

    cssを追加

    cssでお好みに装飾
    以下style-flat用

    [sourcecode language=”php”]body.gt ul.menu {
    margin-bottom: 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }
    body.eye-h ul.menu {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    }
    ul.menu {
    margin: 0 0 30px 0;
    padding: 0;
    border: 1px solid #eee;
    line-height: 1;
    list-style-type: none;
    background-color: #fff;

    }
    ul.menu li {
    margin: 0;
    padding: 0;
    float: left;
    /*
    width: 110px;
    */
    text-align: center;
    }
    ul.menu li a {
    border-right: 1px solid #eee;
    padding: 8px 20px;
    display: block;
    position: relative; /* for IE6 */
    color: #333;
    background-color: #fff;
    text-decoration: none;
    }
    ul.menu li a:hover,
    ul.menu li.current a {
    color: #fff;
    background-color: #333;
    }
    ul.menu {
    _height: 1px;
    min-height: 1px;
    /*
    height: 1px;
    overflow: hidden;
    */
    }
    ul.menu:after {
    height: 0;
    visibility: hidden;
    content: ".";
    display: block;
    clear: both;
    }[/sourcecode]

    参考リンク
    WordPressのカスタムメニューを使用してグローバルナビゲーションを作成する

  • wp.Vicunaにパンくずリスト設置

    wp.Vicuna 1.5.9のパンくずリストはカスタム投稿タイプに対応していないので新たにパンくずリスト(breadcrumb/topicpath)を設置します。

    すべてのページで使えるように作ってみました。

    使い方

    以下のコードをfunctions.phpに追加する。

    require_once(dirname(__FILE__).’/breadcrumb.php’);

    breadcrumb.phpをテーマフォルダにアップロード。

    テンプレートのお好みの位置に<?php breadcrumb(); ?>を追加。

    breadcrumb.php

    [sourcecode language=”php”]<!–?php function breadcrumb($divOption = array("class" =–> "topicPath")){
    wp_reset_query();

    $get_link_html = function ($url, $title) {
    return ‘<a href="’.$url.’">’.$title.'</a>’;
    };
    $get_current_html = function ($title) {
    return ‘<span>’.$title.'</span>’;
    };

    $s_str = ‘?>?’;

    global $post;
    $str =”;
    if(!is_admin()){ /* !is_admin は管理ページ以外という条件分岐 */
    $tagAttribute = ”;
    foreach($divOption as $attrName => $attrValue){
    $tagAttribute .= sprintf(‘ %s="%s"’, $attrName, $attrValue);
    }
    $str.= ‘<p’. $tagAttribute .’>’;
    $str.= $get_link_html(home_url(),’Home’);
    $cpt = get_post_types(array(‘_builtin’ => false));
    if(is_front_page()){

    } elseif(is_home()){
    $str.=$s_str;
    $str.= $get_current_html(wp_title(”,false));
    } elseif (is_singular($cpt) && $cpt!=FALSE) { //カスタム投稿の個別記事ページ
    $pt=get_post_type();
    $str.=$s_str;
    $str.= $get_link_html(get_post_type_archive_link($pt), get_post_type_object($pt)->label);
    $str.=$s_str;
    $str.= $get_current_html(get_the_title());
    } elseif(is_category()){ //カテゴリーのアーカイブページ
    $cat = get_queried_object();
    if($cat -> parent != 0){
    $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, ‘category’ ));
    foreach($ancestors as $ancestor){
    $str.= $s_str;
    $str.=$get_link_html(get_category_link($ancestor),get_cat_name($ancestor));
    }
    }
    $str.=$s_str;
    $str.= $get_current_html($cat -> name);
    } elseif(is_single()){ //ブログの個別記事ページ
    $categories = get_the_category($post->ID);
    $cat = $categories[0];
    if($cat -> parent != 0){
    $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, ‘category’ ));
    foreach($ancestors as $ancestor){
    $str.= $s_str;
    $str.=$get_link_html(get_category_link($ancestor),get_cat_name($ancestor));
    }
    }
    $str.= $s_str;
    $str.= $get_link_html(get_category_link($cat -> term_id),$cat-> cat_name);
    $str.= $s_str;
    $str.= $get_current_html($post -> post_title);
    } elseif(is_page()){ //固定ページ
    if($post -> post_parent != 0 ){
    $ancestors = array_reverse(get_post_ancestors( $post->ID ));
    foreach($ancestors as $ancestor){
    $str.= $s_str;
    $str.=$get_link_html(get_permalink($ancestor),get_the_title($ancestor));
    }
    }
    $str.= $s_str;
    $str.= $get_current_html($post -> post_title);
    } elseif(is_attachment()){ //添付ファイルページ
    $str.= $s_str;
    $str.= $get_current_html($post -> post_title);
    } elseif(is_date()){ /* 日付アーカイブ */
    $year=get_query_var(‘year’);
    $monthnum=get_query_var(‘monthnum’);
    $day=get_query_var(‘day’);
    if(is_day()){ /* 日別アーカイブ */
    $str.= $s_str;
    $str.= $get_link_html(get_year_link($year),get_post_time(‘Y’));
    $str.= $s_str;
    $str.= $get_link_html(get_month_link($year, $monthnum),get_post_time(‘F’));
    $str.= $s_str;
    $str.= $get_current_html(get_post_time(‘js’));
    } elseif(is_month()){ /* 月別アーカイブ */
    $str.= $s_str;
    $str.= $get_link_html(get_year_link($year),get_post_time(‘Y’));
    $str.= $s_str;
    $str.= $get_current_html(get_post_time(‘F’));
    } elseif(is_year()){ /* 年別アーカイブ */
    $str.= $s_str;
    $str.= $get_current_html(get_post_time(‘Y’));
    }
    } elseif(is_search()){ //検索結果表示ページ
    $str.= $s_str;
    $str.= $get_current_html(‘「’.get_search_query().’」で検索した結果’);
    } elseif(is_author()){ //投稿者のアーカイブページ
    $author= get_query_var(‘author’);
    $str.= $s_str;
    $str.=$get_current_html(‘投稿者 : ‘. get_the_author_meta(‘display_name’, $author));
    } elseif(is_tag()){ //タグのアーカイブページ
    $str.= $s_str;
    $str.= $get_current_html(‘タグ : ‘. single_tag_title( ” , false ));
    } elseif(is_404()){ //404 Not Found ページ
    $str.= $s_str;
    $str.= $get_current_html(‘404 Not found’);
    } elseif ( is_post_type_archive() ) {
    $posttype = get_post_type();
    $str.= $s_str;
    $str.= $get_current_html(post_type_archive_title(‘None’, false));
    } else{ //その他
    $str.= $s_str;
    $str.= $get_current_html(wp_title(”,false));
    }
    $str.= ‘

    ‘;
    }
    echo $str;
    // クエリをリセット
    wp_reset_query();
    }
    ?>[/sourcecode]

  • WordPressにFavicon設置

    WordPressにFavicon設置

    WordPressにFavicon設置するには色々ありますが、今回はfunctions.phpを編集する方法とheader.phpを編集する方法の2種類を紹介します。

    favicon画像を制作したら、ルートディレクトリにfavicon.icoをアップロードする。

    方法1
    functions.phpに以下のコードを追加

    [sourcecode language=”php”]function add_favicon_link(){
    echo ‘ <link href="’.home_url().’/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />’;
    echo "\n";
    echo ‘ <link href="’.home_url().’/favicon.ico" rel="icon" type="image/vnd.microsoft.icon" />’;
    }
    add_action(‘wp_head’, ‘add_favicon_link’);
    [/sourcecode]

    方法2
    header.phpの<head>~</head>の間に以下のコードを追加

    [sourcecode language=”html”] <link href="<?php echo home_url(); ?>/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
    <link href="<?php echo home_url(); ?>/favicon.ico" rel="icon" type="image/vnd.microsoft.icon" />
    [/sourcecode]

    shortcut iconのみでも効果はありますが、shortcut iconとicon両方指定する方がいいです。