WordPress：add_theme_support( ‘title-tag’ ); 使用時にタイトルからキャッチフレーズを削除したりセパレータを変更する方法 - NxWorld
WordPres Ver 4.1以降、functions.phpにadd_theme_support( 'title-tag' );と記述するだけで簡単にタイトルを出力してくれるようになりましたが、その出力内容を変更する方法です。 内容を変更といってもがっつりと変えるのではなく、具体的にはサイト名とともに表示されるキャッチフレーズを削除したり、デフォルトでは「-」となっているセパレータを任意のものにするといった簡易的な変更です。 add_theme_support( 'title-tag' ); を使用する これまでタイトルタグを出力されるようにしたい場合は、例えばheader.phpなどに書かれているhead内にwp_title()を記述するなどしていましたが、4.1以降はこのようなタグをhead内に書かずにfunctions.phpへ下記のように記述することでタイトルが出力されるように
slickのページングにjQueryを使ってイメージを設定する方法 - NxWorld
引き続きjQueryプラグイン「slick」に関するTipsで、ページングにイメージを設定したいときにjQueryを使ってメインスライドのイメージをそのまま使い回したり、ページング部分のHTMLを記述する手間を省いて少しでも楽して設定する方法です。 slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 ページングをイメージに変更 #1 上のイメージのように、メインスライドの各イメージをそのままスライドを切り替えるページング部分に使用するもので、メインもページングも同じイメージを使う想定なのであれば、この方法で実装しておくことでスライドが増減する度に両方いじる手間を省くことができます。 まず、HTMLは下記のようにメインスライド部分のみ記述します。 <div id="slick"> <div><img src="img01.jpg" alt=
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
WordPress：get_the_posts_pagination()をカスタマイズして、現在のページ数と全ページ数を表示させる方法 - NxWorld
WordPressで記事一覧などにページネーションを設置したい場合、特別な機能など必要なければプラグインなどを使用しなくてもget_the_posts_pagination()やthe_posts_pagination()を使うことで表示させることができますが、これをもう少し自分好みにカスタマイズして表示させる方法です。 ここではデフォルトだとスクリーンリーダー用テキストとして「投稿ナビゲーション」と表示されている部分を、現在のページ数と全ページ数を表示させるようにしてみます。 実装にはfunctions.phpへ下記のように記述し、get_the_posts_pagination()の出力内容を一部変更させます。 具体的には関数内で現在のページ数と全ページ数をそれぞれ取得し、デフォルトで「投稿ナビゲーション」と表示されるスクリーンリーダー用テキスト部分をpreg_replace()を使っ
WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ - NxWorld
個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し手を加えるだけでもデフォルトに比べて大幅に使いやすくすることも可能です。 管理画面に任意のCSSやJavaScriptを適用する CSSであればフロントのデザインに近い感じで管理画面を装飾したりデフォルトのレイアウトを使いやすい形に調整するなど、JavaScriptであればデフォルトにはない動きをちょっと付けたり逆にデフォルトで実装されている動きを無効化するといったように、管理画面をカスタマイズす
デザイン制作を助けてくれる国内外の素材サイトまとめ - NxWorld
見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -
医療・ヘルスケア関連のデザインアイコンセット 30 - NxWorld
医療器具からお医者さんまで、様々な医療・ヘルスケア関連のデザインアイコンセットのまとめです。 可愛らしい見た目や色合いのものが多く、その他にもシンプルなものやフラットデザインなものまであります。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
CSSグラデーションを使ったデザインパーツサンプル - NxWorld
わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSのlinear-gradient。 未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。 よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろいろ使用用途があるのでいくつか紹介します。 以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスなどは必要に応じて追記・変更してください。 ここでは全て見た目を画像で紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 テキストが徐々に見えなくなる #1 イメージ（右）のようにテキストの上にグラデーションを重ねることで徐々にテキス
バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました - NxWorld
バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。 デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも...。 そこで今回は、バナーデザインをするにあたって覚えておきたいレイアウトやデザインパターンをはじめ、効率良く制作していくことができる制作フロー、特に新米デザイナーさんなどには非常に参考になると思うので是非目を通して欲しいエントリー、インスピレーションをもらえるバナー関連のデザインギャラリーといった、バナーデザインの制作に関連することをまとめてみました。 バナーデザインの制作フロー 後ほど紹介するエントリーでこのような内容に関
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の見栄えに関するフォント
フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8 - NxWorld
いずれもテキストがフェードや回転といったアニメーション付きで表示されたり、一文字ずつタイピングされているような見せ方を実装することができるjQueryプラグインです。 同じようなプラグインが並んでいる感じですが、軽量なものやオプションが豊富に揃っているもの、日本語にもしっかり対応しているかなどそれぞれ特徴もあるので、こういったものを使いたい時に少しでも選択肢が広がるよう良さそうなものを備忘録兼ねてまとめました。 Letter by Letter JS Letter by Letter JS はテキストを徐々に表示させる効果を簡単に実装でき、1KBという軽さも特徴のjQueryプラグインです。 デモ画面などでは全て英語が使われていますが、日本語でも動くのは確認できました。 オプションとして表示スピードと表示タイプを指定することができ、表示タイプでは単純に表示させる'show'とフェード表示さ
jQuery Snippets - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの一覧です。 May 08, 2017 追記 「jQuery Snippets #10」を追加しました。 May 07, 2017 追記 「jQuery Snippets #9」を追加しました。 September 16, 2016 追記 「jQuery Snippets #8」を追加しました。 April 25, 2016 追記 「jQuery Snippets #7」を追加しました。 February 04, 2016 追記 「jQuery Snippets #6」を追加しました。 January 05, 2016 追記 「jQuery Snippets #5」を追加しました。
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20
スマートフォンやタブレットが絡むサイト制作時に実装することが多い、レスポンシブ対応やスワイプ（フリック）などといった機能を簡単に実装できるスライダー・カルーセルのプラグインやチュートリアルのまとめです。 いずれかひとつの機能のみ実装するだけでなく、中にはひとつのプラグインで複数の機能を同時に実装できるのもあります。 普段からよく使うものは大体決まっていたりするんですが、見せ方、対応ブラウザ、一部の機種で挙動が怪しいなどの理由で他のものを探すということもたまにあるので、そういった時の手間を省くためにメモしていたものです。 全てのプラグインをじっくり使ったことがあるわけではないのと、僕はiPhone持ちなので特にAndroidで上手く動作してくれるかわからないものも正直幾つかありますが、いずれもPCやiPhoneで確認した際には問題なく動作してたものです。
ポートフォリオ制作時のポイントと参考になるサイトやデザイン - NxWorld
最近時期的なこともあってか求人情報などを多く見かけるのと、知人がwebデザイナーになるためにポートフォリオを制作中ということで少し前にいろいろ聞かれたので、前回、前々回とポートフォリオについてのエントリーを書いてきました。 両エントリーとも制作時に役立つアイコンや素材のまとめだったのですが、今回はポートフォリオ制作時のポイントや参考になるサイトやデザインをまとめてみました。 紹介しているサイトによってはデザインが変更されています。 また、クローズされていたサイトはリンク解除してあります。 ポートフォリオとは ポートフォリオとは簡単に説明すると自分の作品集のことを言います。 面接官やクライアントなどに自分のプロフィールやスキルなどを知ってもらうために有効なアイテムで、WebデザイナーやプログラマーなどのWeb業界だけではなく、服飾、建築、写真、ゲームなど、様々な業界でポートフォリオを制作され
WordPress：プラグインの作成方法とスニペットをプラグイン化して管理する方法 - NxWorld
プラグインの作成とか開発って聞くと凄く難しそうなイメージがあったんですが、実際にやってみると簡易的なものであればかなり手軽に作成できたので、触りだけですが備忘録兼ねて紹介します。 また、いろいろとカスタマイズしている場合にカオスになりがちなfunctions.phpですが、それをプラグインを使って少しでも管理しやすくする方法も併せて紹介します。 プラグインってなに？ そもそもプラグインとは... プラグインは、WordPressの機能を拡張するためのツールです。 WordPressのコアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。ユーザーそれぞれが特定のニーズに合ったプラグインを利用して、カスタム機能を取り入れられるように作られています。 プラグイン – WordPress Codex 日本語版 上記のようにCodexにも載っていますが、要はWor
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page Not Found - NxWorld