はてなブックマーク

ミニマルなデザインが主流になってきてますますフォントのチョイスって重要だとつくずく感じております。 僕のフォントライブラリも古くなってきて、パッケージでなにかいいフォント欲しいなぁと最近はフォントを探しまくっております。 源柔ゴシックをサブセットしてWebフォントとして使う そんな僕の最近のお気に入りフォントの一つが自家製フォント工房さんが公開してくれている源柔ゴシックです。 源柔ゴシックはNotoSansを丸ゴシックに改良したフォントだそうです。詳細とダウンロードは自家製フォント工房さんWebサイトよりお願いします。 ライセンスに目を通したところ改変もWebフォントとしての利用も問題ないとのことで、サブセット化してWebフォントとして使ってみます。 なぜサブセットを行うか？ 日本語フォントは欧文フォントに比べて文字数が多く、データとしても大きくなります。 重い画像の読み込みに時間がかかる

Sketchは直感的に操作できるのでWebサイトのデザインカンプなどは、Photoshopでデザインするよりも、かなり速く仕上げることができます。 Sketchには予め便利なショートカットがセッティングされていますが、Sketchを更に便利に使い倒してやろうではないか！ということでSketchのショートカットで足りないものを独自に設定します。 SketchのショートカットはMacのシステム環境設定から行う Sketch本体にショートカットを設定する項目はないので、Macのシステム環境設定から行います。 システム環境設定＞キーボード＞ショートカット＞アプリケーションで設定項目までアクセスします。 ショートカット設定手順 +ボタンで新しくショートカットを追加する アプリケーションはSketchを選択 メニュータイトルにショートカットを設定したいメニュータイトルを正しく記述 キーボードショートカ

カスタム投稿タイプの一覧系ページを固定ページで作成する方法を紹介します。コード例はよく使われるパラメーターを使用しています。 WP_Queryを使ってページネーションに対応させる ページネーションに対応させるために、WP_Queryを使って情報を取得する例です。 アーカイブ一覧を固定ページに設置する <?php $paged = get_query_var('paged') ? get_query_var('paged') : 1 ; //ページの判定 $args = array( 'posts_per_page' => 20, //表示件数 'orderby' => 'date', //ソートの基準 'order' => 'DESC', //DESC降順　ASC昇順 'post_type' => 'post', //投稿タイプ名postは通常の投稿 'post_status' => 'p

投稿タイプでの条件分岐です。ちなみに通常の投稿はpostが投稿タイプ名です。 <?php if (get_post_type() === '投稿タイプ名'): ?> //処理 <?php endif; ?> カスタム投稿タイプのアーカイブ アーカイブページの判定 <?php if (is_post_type_archive('投稿タイプ名')): ?> //処理 <?php endif; ?> タクソノミーアーカイブ タクソノミーアーカイブページの判定 <?php if (is_tax('タクソノミー名')): ?> //処理 <?php endif; ?> タームアーカイブページ 指定したタクソノミーに属するタームアーカイブページの判定 <?php if(is_tax('タクソノミー名', 'ターム名')): ?> //処理 <?php endif; ?> ターム情報 ターム情報を持って

<?php register_post_type( 'projects', //投稿タイプ名 array( 'label'=> 'プロジェクト', //ラベル名 'labels' => array( 'menu_name' => 'プロジェクト' //管理画面のメニュー名 ), 'description'=> 'ディスクリプション�', 'public' => true, //公開状態 'query_var' => true, // スラッグでURLをリクエストできる 'hierarchical' => false, //固定ページのように親ページを指定するならtrue 'rewrite' => array('slug' => 'projects'), //スラッグ名 'has_archive' => true, //パーマリンクがデフォルト以外、アーカイブページを表示する場合はtrue

2016年04月05日更新2016年04月23日 CSSで要素の順序が変更できるFlexboxのorderでレスポンシブデザインの幅を広げよう Flexbox前々から気にはなっていましたが、対応ブラウザ的に厳しいかなぁと思って使ったことが無かったのですが最近は結構頻繁に使っています。Flexboxを使った方がレイアウトを組むのも速いですし、orderプロパティで要素の順番を操作できるので、スマホでもデスクトップでも無理なくレスポンシブ�デザインを再現できます。 まぁ最悪無理にデスクトップにFlexbox使わなくても、スマホ使うだけで従来のコーディングよりザインの幅が広がります。 Flexboxはレスポンシブのスマホにだけでも利用価値はある レスポンシブデザインでスマホのときだけこのパーツ入れ替えたい、ってことがよくあります。特に一覧系ページです。僕的には一覧系ページってスマホとデスクトップ

最近Flexbox使いまくりです。便利ですよね。特にレスポンシブでは大人の事情をかますことなくワンソースで見事にレイアウトを再現してくれます。 EI9や8にも対応してくるflexibility.js 僕は個人的にはFlexboxはデスクトップでは使わず、モバイルの時に使います。ブラウザの対応状況とか考えるとその方が安全だと考えたからです。 しかし！flexibility.jsってjsを使えばIE9やIE8に対応するというじゃありませんか！ これで、デスクトップの時も気にせずFlexboxつかってやるぜ！って思ったのも束の間、効いてない・・・・ SVGが原因でflexibility.jsが効かなかった 読み込まれているjsを全て削除しても効かなくて、何が原因なんだ〜と悶えながらSVGの読み込みを削除すると効きました。 色んなケースでの検証はまだなので、SVGが絶対無理とは言えませんが、当ブロ

2016年02月24日更新2016年03月05日 Advanced Custom Fieldsの関連が便利すぎてヤバい WordPressのカスタムフィールドプラグインは沢山ありますが、当サイトではAdvanced Custom Fieldsをつかっています。フィールドタイプの「関連」機能が便利すぎるからです！ 手軽に投稿情報を読み込むことができる Advanced Custom Fieldsの「関連」を使えば手軽に投稿情報を読み込むことができます。当サイトでは、特に関連性の高い記事に対して「あわせて読みたい記事」としてリンクしています。 アイデア次第で様々な使い方ができる Advanced Custom Fieldsの関連は投稿タイプを、またいで使用することができます。アイデア次第でWordPressのCMS機能を強化することができます。例えば「事例」「技術」というコンテンツがあって「事

游ゴシックはMacではOSX Mavericksから、Windows8.1から標準でインストールされている、待望の共通のフォントで、これからのWeb制作のフォント指定はメイリオじゃなくて游ゴシッックで決まりだ！とか思っていたのですが、やっぱりIEさんが足を引っ張ります。 游ゴシックでフォント指定するとIEで文字下に謎の余白ができる 游ゴシックでフォント指定するとIEで文字の下に謎の余白ができちゃいます。Chromeは問題なしです。 パンくずとかすごいことになってました。 対応策を考える 早速問題解決のためにググってみると、どうもIE固有のバグじゃないか？的な結論に達しました。で、僕のサイトのIEシェアは16%です。16%のために84%を犠牲にするのは、間抜けな手段なので、手っ取り早くIEのみfont-familyを変更します。全バージョン対象です。 IEの条件判定 SASSでIEハックを行