CSSでのフォント指定

CSSでのフォント指定

いかのような基準で作っています。

通常のなんでもないサイトの場合

  • ゴシック : win メイリオ、mac : ヒラギノ
font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif
  • 明朝 : win HG明朝 or MSP明朝、Mac : ヒラギノ明朝
font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif

すっきりしたデザインの場合

  • ゴシック : mac,winとも 游ゴシック体
font-family : "游ゴシック体", YuGothic, "游ゴシック Medium", "YuGothic M", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
font-weight : normal;

(POINT : font-weightを明示)

  • 明朝 : mac,winとも 游ゴシック体
font-family : "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" ,"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
font-weight : normal;

※IEのバグに注意

游明朝、游ゴシックでIEで文字の上下の揃えがずれるバグがります。

どっちが読みやすいとかも考えると。

特に意図しない普通のサイトの場合ユーザーの読み慣れているフォントが読みやすいことも考えられたりするかもなども気になる。

Sass記法,FlexBox,Compassでよく使う書き方メモ

Sass記法,FlexBox,Compassでよく使う書き方メモ

世の中SCSS記法がありふれてるのですが、小規模一人Web開発がおいので、より効率的なSASS記法+Compassをつかっています。あまりサンプルも落ちていなくよく忘れがちなので記法をメモ。

CSS(SASS記法)

@import compass
.row
    +flex-wrap(wrap)
    +flexbox((display: box,box-orient: horizontal), $version: 1)
    +flexbox((display: flexbox,flex-direction: row), $version: 2)
    +flexbox((display: flex,flex-direction: row))
.row.row-nowrap
    +flex-wrap(nowrap)

HTML

<!-- 折り返し有り -->
<ul class="row">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
</ul>
<!-- 折り返しなし -->
<ul class="row row-nowrap">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
</ul>

jQueryでページ内リンクへスムーズにスクロールする方法

jQueryでページ内リンクへスムーズにスクロールする方法

いつも忘れるのでメモ。

$("a[href^='#']").click(function(e) {
    e.preventDefault();
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $('body,html').stop().animate({scrollTop:position}, 400);
});

PHPStorm,Bower,Gulpを使ったHTMLコーディング環境設定メモ(超個人的、小規模サイト用、sass記法)

PHPStorm,Bower,Gulpを使ったHTMLコーディング環境設定メモ(超個人的、小規模サイト用、sass記法)

個人的にライトに使っているgulpの使い方メモ
小規模〜中規模のWebコーディング、システム開発をメインにしています。
(以下 HomeBrewはインストール済を想定)

続きを読む

nginxでBasic認証の設定方法

nginxでBasic認証の設定方法

Apacheのhtpasswdはインストールせずにopensslでパスワードファイル作成する方法です。

ユーザーファイルの作成とパーミッション設定

$ sudo echo "ユーザ名:$(openssl passwd -apr1 パスワード)" > /usr/share/nginx/html/user_passwords
$ sudo chmod 400 /usr/share/nginx/html/user_passwords
$ sudo chown nginx /usr/share/nginx/html/user_passwords

ここでは、nginx(Nginxの実行しているシステムユーザー)のみのパーミッションに設定しています。
また簡易なプレビューサイトを想定して、ドキュメントルート以下においてますが、
実際の運用では適時DocumentRootより上位ディレクトリなどへの配置に変更ください。
(まぁ運用の場合、そもそもBasicな認証で良いのかというのは、)

Nginxのコンフィグファイルの設定

server {
    listen       80;
    server_name  example.com;
    root   /usr/share/nginx/html/example.com;
    index  index.php index.html;
    auth_basic "preview site";
    auth_basic_user_file /usr/share/nginx/html/user_passwords;
    location / {
        〜略〜
    }
}

server { ~ } のコンテキストに記載してこのドメイン全てに反映。
http{ ~ } , location { ~ } に書いて、サーバーのhttp全体、特定ディレクトへの反映も可能

nginxでのワードプレスのパーマリンク設定

nginxでのワードプレスのパーマリンク設定

すこしはまったのでnginxでのwordpressのパーマリンク設定のメモ

ポイントとしては、“try_files $uri @wordpress;”と try_filesディクレティブでURLが見つからないファイルはすべて location @wordpress { ~ } ブロックに回す。
@wordpress { ~ } ブロックでは、リクエストのURIにかかわらずすべて index.phpを実行する設定とする。
以下設定全部。

server {
    #ポート80番をlisten
    listen       80;
    #マルチドメインのサーバー名
    server_name  cycling-course.okinawa;
    #ドキュメントルート
    root   /usr/share/nginx/html/cycling-course.okinawa;
    # ApacheでいうDirectoryIndex
    index  index.php index.html;
    # ロケーションドメイン/に適用ブロック
    location / {
        # 左側からマッチするかチェックしていく 
        # http://cycling-course.okinawa/2017/10/ だったら、$urlは、2017/10/
        # チェック1 '2017/10/' があるか
        # チェック2 '2017/10//' があるか
        # 適合がないので、@wordpressブロックを適用する
        try_files $uri $uri/ @wordpress;
    }
    # 拡張子が .phpにマッチした場合に適用されるブロック
    location ~ .php$ {
        # 前のブロック同様にマッチしなければ @wordpressブロックを適用する指定
        try_files $uri @wordpress;
        fastcgi_index index.php;
        fastcgi_split_path_info ^(.+.php)(.*)$;
        fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
        # 先に include しておかないと次の$fastcgi_script_nameが無効になって
        include  fastcgi_params;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    }
    # ファイルがマッチしない場合に適用する@wordpressブロック
    location @wordpress {
        fastcgi_index index.php;
        fastcgi_split_path_info ^(.+.php)(.*)$;
        fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
        include  fastcgi_params;
        # ※ここがミソ。リクエストに関係なくすべて、index.phpを実行する
        fastcgi_param  SCRIPT_FILENAME  $document_root/index.php;
    }
}

参考サイト

http://qiita.com/egnr-in–6matroom/items/a08f4851bf16d0131e60

http://qiita.com/kotarella1110/items/f1ad0bb40b84567cea66

MagnificPopupでYoutubeを指定時間から再生する方法

MagnificPopupでYoutubeを指定時間から再生する方法

コールバック関数のiframeのpatternsで引っ掛けてコールバック関数で分解してURL(src)を生成しました。無理矢理なのでもっとスマートにできるはず。><


$('.popup-media').magnificPopup({
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 200,
    preloader: false,
    iframe: {
        patterns: {
            youtube: {
                index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
                id: function(url){
                    var url = 'v='+url.split('v=')[1],
                        pair= url.split('&')
                        ,arg = {}
                        ,ret = '';

                    for(var i=0;pair[i];i++) {
                        var kv = pair[i].split('=');
                        arg[kv[0]]=kv[1];
                    }
                    ret = arg['v'] + '/?autoplay=1';
                    if(typeof arg['t'] !== 'undefined'){
                        ret += '&start='+ arg['t'].replace('s','');
                        }
                        return ret;
                },
                src: '//www.youtube.com/embed/%id%' // URL that will be set as a source for iframe.
            },
        }
    },
    callbacks: {
        open: function () {
            $('.mfp-close').html('');
        }
    }
});

古いAndroidの標準ブラウザへの簡単な対応

古いAndroidの標準ブラウザへの簡単な対応

ふるいAndroid標準ブラウザはCSSなどの対応がひどいので対応は基本しないのですが、
もしかしたらアクセスがあるかもしれないため簡単に対応はしたいので以下の用にしています。

(もう少し丁寧に表示することもできそうですが、JSのコードのみで判定してHTML側はクリーンに保ちたいこともあり。)

var app = {};
    app.ua = (function (u) {
        return {
            Tablet: (u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1)
            || u.indexOf("ipad") != -1
            || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
            || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
            || u.indexOf("kindle") != -1
            || u.indexOf("silk") != -1
            || u.indexOf("playbook") != -1,
            Mobile: (u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
            || u.indexOf("iphone") != -1
            || u.indexOf("ipod") != -1
            || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
            || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
            || u.indexOf("blackberry") != -1,
            Android: (u.indexOf("android") != -1),
            AndroidBrowser: (/android/.test(u) && /linux; u;/.test(u) && !/chrome/.test(u))
        }
    })(window.navigator.userAgent.toLowerCase());

    if(app.ua.AndroidBrowser){
        $('body').prepend('<p style="margin:0;padding:10px;font-size:14px;background:#ffe;color:red;position:relative;z-index:99999">現在お使いのAndroid標準ブラウザはGoogleのサポートも終了しており動作保証外となります。<br>セキュリティ上の危険もありますので別のブラウザアプリ(GoogleChrome等)の利用を推奨いたします。</p>');
    }

参考サイト

https://plus.google.com/+AdrianLudwig/posts/1md7ruEwBLF
http://internet.watch.impress.co.jp/docs/news/685459.html
http://blog.bridge-net.jp/2017/04/okashi_android
http://www.flexfirm.jp/blog/article/402
http://www.chaordic.co.jp/memorandum/2016/06/android.html

http://qiita.com/narikei/items/ada44891cb0902efc165

robot.txt とかカノニカルタグとか、sitemap.xml とか

いつも入れる必要?いれない不要?入れたほうがSEO的に(迷信だよ)?いや、もしものために念のために、
ってなるので再度調べてまとめておくことに。

robot.txt

登録したくないコンテンツが含まれる場合のみ必要で、基本必要ない。
ただし、以下の参考サイトにあるとおり、

サイトに robots.txt ファイルが存在するがアクセスできない(言い換えれば、HTTP ステータス コード 200 または 404 が返されない)場合は、クロールすべきでない URL をクロールすることにならないよう、クロールを延期します。

つまりサーバーで何かしらの不具合などで robots.txtが404,200も返さない状態になったらクロールしないよ。とのこと、常にSeachConsoleなどでサイトを管理している場合は問題ないがそれ以外の放置している系のサイトは入れていたほうが無難っぽいです。あと最近のWordPressの場合は以下のようなrobots.txtを仮想で生成してくれます。(※注意パーマリングの設定が?p=123とか、サーバーのリライト設定が有効でないと生成されない)
(WordPress自動生成のrobots.txt 管理画面を除外してくれている)

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

参考サイト : Google Search Console ヘルプ
https://support.google.com/webmasters/answer/2409682?hl=ja

カノニカルタグ(canonical)

  • 複数あるURLを正規化、www有、無などあるので基本入れたほうが良いっぽい、
  • ただ静的(Static)なコンテンツの場合はメンテナンス性も落ちたりURL変更時の編集コストなどが高そう。なにか変更の際のうっかり変更もれは注意。
  • スマホがページ別等の場合は必須かな。
    GogoleのSearch Console ヘルプでの説明は以下。このページ自体もちゃんと入ってますね。
    参考 : Search Console ヘルプ
    https://support.google.com/webmasters/answer/139066?hl=ja

動的サイトなどの場合はヘッダーは共通のはずなので入れて置くほうがよいかも

環境変数などで簡単に設定できるはずなので、入れておけば無難かな。

静的サイトは入れなくてもよいのかも

基本SEOアクセスを気にするようであればAnalyticsで気づくはず、気付かないれべるの気合なら入れないほうが皆幸せかも。

サーバー側で、

www 有り無しの統一などはしてあげてあげると良いかも。

sitemap.xml

こちらは基本的には、サイトマップが必要かどうかを検討する必要もありそうです。
他のページからリンクされているページは基本クロールされそうだけどそもそもリンクが無いページをインデックスさせるケースとか設計的にかなり特殊そうな気もする。
あとは初期公開のサイトや、リニューアルでURLが変更になったりなどのばあいは、クロール漏れなどは怖いので念のために入れておきたい気もする。(合わせてページ変更の302リダイレクトなども)

以下のGoogleのヘルプページの、‘サイトマップが必要かどうか’ 部分が参考になります。

参考 : サイトマップについて Search Console
https://support.google.com/webmasters/answer/156184?hl=ja&ref_topic=4581190

ページが多いサイトでのメンテナンスも大変なので、基本はなしで、必要な際に設置、ボリュームが莫大なら自動生成プログラムや、WordPressだとプラグインで自動生成が楽そう。

Search Consoleの登録

検索キーワードがAnalyticsでほとんど見れなくなっているので、こちらでアクセスに繋がったキーワードの表示順位や実際のアクセスになったかなど非常に有益な情報をみれたり、クロールのエラーなども検知できるので必須といえます。
(そういえば昔、Bing – Web マスターツールって登録したけど全然みなくなったな、なにか有益な活用方法など教えて欲しい)
あと、AMPのエラー検知なども便利。

Evernote Mac Version 6.11.1でコードブロックを入力する方法 は ”“`[Emter]”と入力

いろいろ調べた方法でためすもどうしてもできなかったのですが、"[Emter]"と入力するとできました。

1 / 24ページ

Powered by WordPress & Theme by Anders Norén