WordPress：更新・公開された日付をもとに記事へ「New」を付ける方法 - NxWorld
普段から案件などでかなりの頻度で使う、WordPressを使ったサイトで最近の記事に対して「New」を付ける方法の備忘録です。 一般的によく使うのは「記事が公開されてから～」というものだと思いますが、「記事が更新されてから～」という場合のコードや非常に参考になるエントリーも併せて書き残しておこうと思います。 記事を公開してから○日間「New」を表示 表示させたい所に下記を記述し、「New」が表示される日数に関してはサンプルコード上部のハイライト部分にある$days = 3;を任意で変更してください。 また、表示されるタグや文言を変更したい場合はサンプルコード下部のハイライト部分にあるechoに任意で指定してください。 下記のコードをそのまま使用した場合は、記事を公開してから3日間は<span class="new">New</span>が表示されるというものになります。 $days = 3
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
操作説明時などに利用できる、フリーのジェスチャーアイコンセット 10 - NxWorld
アプリの操作方法やサービスの使い方を説明するときなどに利用することがあると思うジェスチャーアイコンのまとめです。 シンプルなデザインのものが多めですが、中には100種類以上が詰まった大容量なものや手だけでなくデバイスも込みで作られているもの、タップ・スワイプ・ピンチインといったようにそれぞれの動作がどのような呼び名なのかわかりやすくしてくれているものもあります。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン - NxWorld
サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインをいくつか紹介します。 案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :) サイトにコナミコマンドを埋め込む「Cheat Code」 サイトで↑↑↓↓←→←→BAのようなコナミコマンドを入力するとメッセージを表示できるプラグイン。 使い方は「Cheat Code」よりjquery.cheat-code.jsをダウンロードし、jQueryと合わせて読み込みます。 例としてコードは下記のようになります。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.c
フラットデザインUIキット Part 2 - NxWorld
前回に引き続きフラットデザインを採用したUIキットなどの素材まとめです。 今回も一式揃ったものからちょっとしたパーツまであります。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSグラデーションで作った背景パターンのサンプル - NxWorld
table周りで便利なスニペットやプラグイン - NxWorld
CSSやSVGで実装するローディングアニメーション - NxWorld
Page Not Found - NxWorld
Page Not Found - NxWorld