Sass：連番付きid・classをゼロパディング（ゼロ埋め）で出力する方法 - NxWorld
Sassを利用してて連番付きのidまたはclassを一気に出力したいときに、item1, item2, item3 ... のように単純に1から始まる連番をつけて出力するのではなく、item01, item02, item03 ... のようなゼロパディング（ゼロ埋め）な連番で出力させる方法です。 ゼロパディングとは ゼロパディングとは、足りない桁数の分だけ「0」を追加して埋めるというものです。 具体的な例としては、1, 2, 3, 4, 5という数字の場合であっても桁数を2桁にする必要があるときは01, 02, 03, 04, 05にするというものになります。 単純な連番付きで出力する 違いを見るために、まずは単純な連番付きで出力してみます。 今回はサンプルとして.item ＋ 連番のようなclassを出力するというもので、連番は1～10まで出したいという場合は@forを利用してSCSS
WordPress：get_the_category()でカテゴリー名やスラッグを取得する方法 - NxWorld
普段からWordPressを利用している人なら使ったことある人も多いと思いますが、get_the_category()を使うことでカテゴリー名やスラッグを簡単に取得・表示させることができます。 例えばカテゴリーによって詳細記事のデザインを変更したい場合などに、カテゴリースラッグを用いたクラスを付加させ、そのクラスを用いてスタイルを指定するといったことができます。 カテゴリーID・カテゴリー名・カテゴリースラッグをそれぞれ取得・表示したい場合は下記のようにそれぞれ記述します。 <?php $category = get_the_category(); $cat_id = $category[0]->cat_ID; $cat_name = $category[0]->cat_name; $cat_slug = $category[0]->category_nicename; // カテゴリーI
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ - NxWorld
個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し手を加えるだけでもデフォルトに比べて大幅に使いやすくすることも可能です。 管理画面に任意のCSSやJavaScriptを適用する CSSであればフロントのデザインに近い感じで管理画面を装飾したりデフォルトのレイアウトを使いやすい形に調整するなど、JavaScriptであればデフォルトにはない動きをちょっと付けたり逆にデフォルトで実装されている動きを無効化するといったように、管理画面をカスタマイズす
gulp：タスクやインストール済みプラグイン・モジュールの一覧を表示する方法 - NxWorld
gulp使用時に現在どのようなタスクが定義されているか確認したり、どのプラグイン・モジュールをインストールしているかをコマンドで確認する方法です。 すごく使用頻度が高いというわけではないですが、ざっくりと定義されてるタスクを見たいときにやpackage.jsonを見に行くのが面倒なときに使えます。 定義されたタスクを確認する 定義されているタスクやどのようなタスクが組み合わさっているかなどを手っ取り確認する方法です。 例えば、自分が作成したものだけど久しぶりに触るのでどんなタスクがあったか確認したい時や他の人が作成したものでどのようなタスクを用意しているのかざっくりと確認したい時、gulpfile.jsだけで完結せずタスクがファイル分割されていてそれらすべてに目を通すのが面倒な時などに使え、下記コマンドを実行することで確認できます。
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
jQuery：スクロールで表示されるページトップの実装方法 - NxWorld
数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
開発者向けプラグイン 25＋
WordPressには便利なプラグインが沢山あり、それらを使うことであまり知識がない方でも様々な機能を実装して自分好みのブログやサイトを作ることができます。 ソーシャルボタンやページネーションを簡単に設置できたり、関連記事や人気記事を手軽に表示できるといったような見栄えを変えたりするユーザー向け（表向き）の機能を実装するタイプのプラグインはよく見かけるのでご存じの方も多いと思いますが、WordPressにはこういったプラグインだけでなく、何かと捗る開発者向けの裏方タイプのプラグインも便利なものが数多くあるので、それらの中から自分が覚えておいて損はないと思うものを紹介します。 全部のプラグインを普段の開発時に使用しているというわけではありませんが、以下で紹介しているものはいずれも個人的に開発時に便利だと思ったプラグインです。 有名なデバッグ系プラグインをはじめ、テンプレートファイルやIDを容
WordPress：プラグインの作成方法とスニペットをプラグイン化して管理する方法 - NxWorld
プラグインの作成とか開発って聞くと凄く難しそうなイメージがあったんですが、実際にやってみると簡易的なものであればかなり手軽に作成できたので、触りだけですが備忘録兼ねて紹介します。 また、いろいろとカスタマイズしている場合にカオスになりがちなfunctions.phpですが、それをプラグインを使って少しでも管理しやすくする方法も併せて紹介します。 プラグインってなに？ そもそもプラグインとは... プラグインは、WordPressの機能を拡張するためのツールです。 WordPressのコアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。ユーザーそれぞれが特定のニーズに合ったプラグインを利用して、カスタム機能を取り入れられるように作られています。 プラグイン – WordPress Codex 日本語版 上記のようにCodexにも載っていますが、要はWor
WordPress：テーマやプラグインのテスト・開発時に便利なプラグイン - NxWorld
WordPressを使用していて、既に公開されているサイトをいろいろいじりたい場合に便利なプラグインをいくつか紹介します。 別のテストサーバー用意するとかXAMPPなどのローカルサーバーでやる方法もありますがいちいち環境を用意するのは面倒ですし、こういったものを使えばその手間も省けます。 テーマのテスト向け「Theme Test Drive」 「Theme Test Drive」は、通常のユーザーには現在公開されているテーマを表示し、管理者などのログインしているユーザーに関してはテスト中のテーマを表示させるプラグインです。 使い方は以下。 「Theme Test Drive」からダウンロードとアップロード、もしくは管理画面から検索してインストール・有効化します。 プラグインを有効化するとサイドの「外観」に「Theme Test Drive」が追加されるので、そこでテストするテーマの設定など
WordPress：functions.phpでJSやCSSを一元管理する方法とバージョン表記を消す方法 - NxWorld
CSSやJavaScriptなどの外部ファイルを読み込む際、全ページ共通で且つよく見かける方法だとheader.phpのhead内に記述するということが多いと思いますが、例えば投稿ページでは使うけど固定ページでは必要ないので読み込ませたくない場合があります。 head内で条件分岐させる方法もありますが、それをfunctions.phpを使って一元管理する方法です。 また、その際に追記されてしまうバージョン表記を消す方法も合わせて紹介します。 JavaScriptを管理する 例としてIDがそれぞれ1～3まで設定されている固定ページに、以下の4つのjsを適応させるという想定で説明していきます。 jquery-1.7.2.min.js（全ページに適応） common.js（全ページに適応） slide.js（固定ページ1のみに適応） lightbox.js（固定ページ2と3に適応） 上記のような
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page Not Found - NxWorld
WordPress：カスタムメニュー（wp_nav_menu）について - NxWorld
WordPressの管理画面カスタマイズ時に使えるハック #1 - NxWorld