gulp：ビルド時にcharsetやファイルエンコードをShift_JISに変換する方法 - NxWorld
普段は基本的にファイルの文字コードはUTF-8を使用していますが、稀にShift_JISなど別の文字コードを使用する必要があります。 ただ、そういった場合でもgulpは使いたいってときに使える方法のひとつで、今回はUTF-8のファイルをビルド時にShift_JISに変換するというのを備忘録兼ねて紹介します。 プラグインのインストール 「gulp」は既にインストール済みという想定で、まずは下記をコマンドに入力して「gulp-replace」と「gulp-convert-encoding」という2つのプラグインをインストールします。 それぞれ用途としては「gulp-replace」は特定の文字列を置き換え、「gulp-convert-encoding」は別のエンコードに変換できるというものになり、この2つのプラグインを利用して実装していきます。 タスクの記述 ここではgulpfile.jsに記
gulp-ejs使用時に拡張子を変更してdestする方法 - NxWorld
EJSをgulpで使用してdestさせる際、単純に.pipe(ejs())だと拡張子が.ejsのままになってしまうのを任意の拡張子に変更してdestさせる方法です。 紹介する方法はgulpとgulp-ejsを使用して実装する方法になりますので、予めそれらが使用できる環境を用意してください。 まず、単純にgulp.src()で指定されたファイルをgulp.dest()に出力しその間でEJSの処理を行う場合は下記のようなタスクになると思います。 var gulp = require( 'gulp' ), ejs = require( 'gulp-ejs' ); gulp.task('ejs', function() { return gulp.src(paths.src) .pipe(ejs()) .pipe(gulp.dest(paths.dest)); }); この状態で$ gulp ej
いざというときに便利そうな、ちょっと変わった珍しいアイコンセット - NxWorld
汎用性が高いUIアイコンなどと比べると使う場面は少ないものの、いざ使いたいときに便利そうなものやあまり見かけないタイプだと個人的に思ったアイコンセットのまとめで、過去に紹介してきたものをひとまとめにしました。 既に公開・配布終了しているものも一部あるのですが、ファイルダウンロード自体はできなくともデザイン的にはそのまま参考になることもあるので、そういったものはキャプチャが小さめではありますがリンク設定のみ解除する形で紹介します。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 リンクが未設定で配布形式も記載されていないものは公開・配布終了しているものです。
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15 - NxWorld
ホバーやクリックした際の動きを中心に、CodePenで公開されているCSSを使ってちょっとしたエフェクトやアニメーションを付けたいときに参考になりそうなデモを紹介します。 いずれも目新しい感じのものではないのですがひと通りの動きがまとめられているデモが多めなので、エフェクトをどんな感じにするか悩むことが多い人はこういったものをメモしておくのがおすすめです。 CodePenで公開されているので実際の動きやコードを見るだけでなく、それらをベースに自分好みに変更して動きを確認したりも容易にできます。 また、例えばクライアントなどからアニメーションを付けたいというざっくりな要望があったときなどにも、こういったものを利用することで大体のイメージをお互い認識できたりするのに利用できそうですね。 紹介しているものはホバーやクリック時のエフェクトが主になるので確認はPC推奨です。 Stacked Card
WordPress：投稿画面のカテゴリー選択部分で「新規カテゴリーを追加」と「よく使うもの」を非表示にする方法 - NxWorld
投稿画面のカテゴリー選択部分でデフォルトで表示されている「新規カテゴリーを追加」と「よく使うもの」を非表示にする方法です。 また、「よく使うもの」を非表示にすることで必要がなくなるタブ切り替えも併せて非表示にします。 デフォルトのカテゴリー選択部分は、下のイメージのように「カテゴリー一覧」と「よく使うもの」というのがタブで切り替えられるようになっており、下には「新規カテゴリーを追加」でその場で新たにカテゴリーを追加できるという機能がついています。 基本的には便利な機能なのでそのままということが多いですが、もともとのカテゴリー数が少ないなら「よく使うもの」は必要なくてタブ切り替えも邪魔だから消したい、勝手にカテゴリー増やさないでほしいから「新規カテゴリーを追加」を消したいということがあります。 そこで、それらをCSSを使って全て非表示にし、同時にタブ切り替えを非表示にしたことで必要ないかなと
WordPress：投稿一覧の日付部分に予約投稿の公開時刻を表示させる方法 - NxWorld
WordPressでダッシュボードのアクティビティにはデフォルトでも予約投稿した記事の公開時刻が表示されていますが、投稿一覧（日時の項目）には年月日だけで公開時刻までは表示されていないので、この部分にも予約投稿の公開時刻を表示させる方法です。 下記をfunctions.phpに記述することで、イメージ左のようにデフォルトでは年月日しか表示されていない部分へイメージ右のように公開時刻も表示させるようになります。 add_filter ( 'post_date_column_time', 'add_scheduled_posts_date_column_time', 10, 2 ); function add_scheduled_posts_date_column_time( $h_time, $post ) { if ( $post->post_status == 'future' ) {
漢字も使えて高品質！商用利用も可能な日本語フリーフォント 20 - NxWorld
数年前まで少ない印象だった日本語フリーフォントですが、最近では少し探すだけでひと通り漢字も利用できて高品質なのにも関わらず商用利用可能というフォントも数多く出てきます。 今回はそんな数ある日本語フリーフォントの中から、商用利用も可能で個人的によく利用させてもらっていたり覚えておきたいと思ったものを紹介します。 紹介しているフォントはいずれもエントリー公開時点では商用利用可能となっているものですが、今後変更される場合もあるので、実際に使用する際はライセンス等を各自で再度確認してください。 ロゴたいぷゴシック ロゴデザインや見出し向けのフリーフォントで、漢字も含まれています。 文字の角が多少丸まっていることで、キッチリしすぎてないのも特徴です。 スマートフォントUI 全体的に長体（約90%のコンデンスド）になっており、グリッドを意識したシステマチックなデザインになっています。 漢字もIPAex
WordPress：メタボックスの開閉機能やドラッグ機能を無効化する方法 - NxWorld
WordPressの管理画面にあるメタボックスが、デフォルトで開閉して中身の表示・非表示を切り替えたりドラッグして表示位置を変更できるのを無効化する方法です。 メタボックスとは、例えばWordPressの記事投稿画面で抜粋やカテゴリーの入力・選択を表示しているボックスのことで、これはボックスを開閉したりドラッグして移動させることができるようになっています。 ただ、この開閉できる機能やドラッグできる機能があることによって、入力欄が消えてしまったとか勝手にボックスが移動しているみたいな連絡を（そんなわけないと思いつつ...）まれにですが受けることがあるので、そういったクライアント向けの対策としてメタボックスの開閉機能やドラッグ機能を無効化していきます。 実装にはfunctions.phpに下記を記述します。 add_action( 'admin_footer-post-new.php', 'd
WordPress：ログイン後にダッシュボードには移動せずに、他ページヘリダイレクトさせる方法 - NxWorld
フォーラムで見かけて個人的にも覚えておきたいと思う内容だったので備忘録。 デフォルトのWordPressはログイン後にダッシュボードに移動しますが、それを任意のページにリダイレクトさせる方法です。 また、ダッシュボードへ移動できないのにメニューに「ダッシュボード」の項目が表示されているのはアレなので、これを非表示にする方法も併せて紹介します。 ログイン後に任意のページヘリダイレクトさせる 「ダッシュボード」にアクセスしようとした際に別ページへリダイレクトさせるには、functions.phpに下記のように記述することで実装できます。 add_action( 'admin_init', 'redirect_dashiboard' ); function redirect_dashiboard() { if ( '/wp-admin/index.php' == $_SERVER['SCRIPT
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
CSSのみで実装するシンプルなドロップダウンメニュー - NxWorld
JavaScriptは使用せず、CSSのみで展開時にちょっとしたアニメーションも加えたシンプルなドロップダウンメニューのサンプルです。 最近ではスマートフォンやタブレットに対応させたりレスポンシブ対応したりで、クリック時にも対応とかウィンドウサイズによって見栄えを大きく変えるといったものが多いとは思いますが、こちらは主にPCで使用するような単純にhoverで展開されるタイプのものになります。 はじめに 以下で紹介しているドロップダウンメニューは、全て下記のようなHTMLとベースとなるCSSが指定してあります。 <ul> <li><a href="#">nav</a></li> <li> <a href="#">nav</a> <ul> <li><a href="#">sub nav</a></li> <li><a href="#">sub nav</a></li> <li><a href=
CSS：角丸のテーブルを作成する方法 - NxWorld
テーブルをCSSを使って角丸にする方法です。 以前は角丸部分に特定のクラスをそれぞれ記述して、場合によってはJavaScriptと併用して実装していたり、特定のブラウザの為に画像を使うとか親要素にdiv要素を幾つか記述するとかいろいろ面倒なことしてたのですが、最近はそれらをしないでも実現できる機会も増え、使用頻度も割と高いので備忘録として残しておきます。 角丸テーブルの完成イメージ 以下ではこのようなデザインの角丸テーブルを実装する想定で説明しています。 実際の表示用デモなどは用意していないので、ちゃんとブラウザで動きを見たい場合は以下で紹介しているコード使って自身の環境で確認してください。 あるプロパティが指定されていると角丸にならない CSSで角丸と言えばborder-radiusを思い浮かべ、これをtableに指定するだけではと思いがちですが、結論から言うとあるプロパティが指定されて
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ - NxWorld
自分用に一覧化したものがほしくて作ったのでシェアします。 あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。 いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども容易にできます。 閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。 基本的に必要だと思う記述は全て掲載しておりますが、例えばfont-familyやfont-sizeなどのように環境によって大きく記述が異なるようなものは省略して紹介しているので、場合にはよって実装してみたものと紹介して
背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました - NxWorld
バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。 デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも...。 そこで今回は、バナーデザインをするにあたって覚えておきたいレイアウトやデザインパターンをはじめ、効率良く制作していくことができる制作フロー、特に新米デザイナーさんなどには非常に参考になると思うので是非目を通して欲しいエントリー、インスピレーションをもらえるバナー関連のデザインギャラリーといった、バナーデザインの制作に関連することをまとめてみました。 バナーデザインの制作フロー 後ほど紹介するエントリーでこのような内容に関
WordPress：ログイン画面をオリジナルにカスタマイズする方法 - NxWorld
WordPressのログイン画面のカスタマイズは過去にもロゴを変更する方法など書いたことがありますが、いろいろ試していたらまた幾つか覚えておきたいことが出てきたりしたので、既出しているものも含めてWordPressのログイン画面をオリジナルにカスタマイズする方法をまとめました。 October 01, 2020 追記 ここで紹介している内容は、WordPress Ver 3.9.0で試したものになります。 内容によっては現バージョンでは非推奨のタグが使用されていたり、フック名が変更されている可能性がありますのでご注意ください。 デフォルトのログイン画面 イメージはWordPressのデフォルトのログイン画面をキャプチャしたもので、これをfunctions.phpを使ってオリジナルのログイン画面にしていきます。 カスタマイズ後のログイン画面 イメージは簡単にですが実際にここでまとめているカス
Sass(SCSS) mixin Snippets - NxWorld
普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。 特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。 特にこれまでSassやmixinをあまり使ってこなかったという人は、全体的に紹介しているものは内容もシンプルですし、そのまま試しに使ってみるだけでなく自分好みにカスタマイズしたりもしてみてください。 以下で紹介しているものは、それぞれ「mixin」はmixinコード、「usage」はmixin使用時のサンプルコード、「output」はコンパイル後のコードとなります。 プレフィックスに関する記述に関してはAutoprefixerなどを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress：管理画面の各ページのbodyに任意のclassを追加する方法 - NxWorld
手書き風デザインに使えるベクター素材 8 - NxWorld
