WordPressで○分前や○日前といったように、記事が投稿されてからの経過時間を表示させる方法です。 よくある2017/01/01のような年月日の表記だけでなく、ちょっとした補足としてこういったものを出したいときに。 Codex（Function Reference/human time diff « WordPress Codex）に掲載されているサンプルコードそのままですが、human_time_diff()を使って表示させたい箇所へ下記のように記述することで、記事が投稿された時間を○分前や○日前といった経過時間で表示させることができます。 echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . '前に投稿されました。'; コード後半にある「前に投稿されました。」の部分は経過時間表示に続けて表示させ

CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介する第1弾です。 以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特にこれからCSSを学びたいという人や学び始めたばかりでもう少しレベルアップしたいという人は是非試してみてください。 サンプルコードは基本的にプレフィックスを省略しています。 デモが用意されていないものについては、自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して実際の動きを確認してください。 継承するbox-sizing指定 ボックスモデルのルールを変更できるbox-sizingを使用時にその指定が継承される形にしたい場合は、リ

以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と

見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -

CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。 以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。 また、position: relative;とdisplay: inline-block;の指定は使用箇所によっては別の値に変更したり不要なら削除してください。 疑似要素とdata属性を使う このデモで表示されているようにテキストのカラーが中央を境に半々になっているのを疑似要素とdata属性を使って実装する方法です。 まずHTMLは下記のようなものを使用し、その際に中に記述する内容と同じテキストをdata属性（data-split）にも記述します。

ラジオボタンとCSSを使って、レイアウト表示を切り替える動きを実装したサンプルです。 実際に案件とかで使うとなると選択値の保持とかで結局JavaScriptやらを組み合わせたりしそうですが、何かの機会で使いそうなので備忘録。 このサンプルの場合は「シングル」「カラム（2カラム）」「カード」の3種類のレイアウトに切り替えるというもので、それぞれ選択肢をクリックすると下に配置されている要素のレイアウトが変更されます。 切り替えの動きにJavaScriptは使わずにCSSのみを使用して下記のように実装しています。 <div class="switch-contents"> <input id="layout-single" type="radio" name="layout" checked><label for="layout-single">Single</label> <input id=

これだけで事足りそうと思うぐらいな大容量セット、高級感あるデザインやとにかく目立たせたいという時に使えそうなゴールド・シルバー系セット、空・海・夕日といった自然の中にある美しい配色をモチーフにしたもの、淡いパステルカラーを集めたセットなど、デザイン制作時に使えるグラデーション素材のまとめで全42セットです。 いずれもPhotoshopで使用するgrd形式となっています。 紹介している中には作成されたのがちょっと古いものもあるので、最近よく使われる（見かける）ようなグラデーションとは少し違った感じなのも多いですが、以下にあるように様々なカラーのグラデーションがあるので、普段からグラデーションをよく利用するという人はこういったものを組み合わせてオリジナルのセットを作っておいたり、こういったグラデーション素材があることを頭に入れておくと使いたい時にすぐ利用できますね。 紹介している素材を使用する

Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.

ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 .button { position: relative; display: inline-block; padding: .5em 4em; border: 2px solid #fff; color: #fff; text-align: center; text-decoration: none; outline: none; transition: all .3s; } .button::before, .button::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: 2; content: ''; transiti

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ

ウォーターカラーエフェクト（水彩画風）を取り入れているwebデザインのまとめです。 ウォーターカラーはふわっと優しい雰囲気のサイトによく使われている印象があり、以下で紹介させていただくのもそういった感じのサイトが多めですが、それ以外にもクールなデザインや幻想的な雰囲気を持つデザインなどもあります。 また、特にこれから水彩画風デザインをやってみようと思う方には参考になると思うチュートリアルエントリーも併せて紹介します。

気になってメモしてたものが溜まってきたので整理兼ねてシェアします。 デザイン制作時に頻繁に使用される要素だと思うボタン・リボン・バッジ素材あわせて40セットで、中には商用利用の際に許可や報告がいるものもありますが、自由に使用できるものがほとんどです。 全体的にフラットデザインのものが多いですが、少し手を加えれば容易に他のテイストにも変更できるかと思います。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。

スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に