wp_enqueue_script のススメ - dogmap.jp
WordPress で、外部 JavaScript を読み込むプラグインを作成する際、"wp-head" をフックして <head> 内に書き込むことは良くあると思う。 ただ、これだと jQuery やら prototype.js やらのライブラリが必要なプラグインを複数アクティブにした場合、同じライブラリを複数読み込んでしまうことになる。 しかも、それぞれのプラグインが読み込んでいるライブラリのバージョンが違うと目も当てられない。 で、そんな混乱を避けるために WordPress 2.1 から導入されたのが wp_enqueue_script() 関数などの一連の関数群と "wp_print_scripts" と言うアクションフック。 これらを使えば、JavaScript ライブラリのロードは簡単になる。 以下、使用方法を簡単に。 wp_enqueue_script( $handle,
『Illustratorによるイラスト制作の基本操作』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！デザイナーのマチダです。2012年４月に新卒入社し、現在はスマートフォンゲームのイラストを制作しています。 はじめに-Illustratorの仕組み-多機能によってグラフィックだけでなく文書作成などマルチに活躍できるIllustratorですが、機能の多さに最初は何をどのように使ったらいいのか戸惑うかと思います。 ＜illustratorでイラストを描く際に心がけていただきたいこと＞ 普通絵を描く時は線画を描いて着彩すると思いますがIllustratorは少々違い、"様々な形をした図形を配置"して絵を描きます。図形を上に重ねていくことで
WordPress の投稿スラッグを自動的に生成する – Simple Colors
WordPress のパーマリンク構造に %postname% が含まれていて、うっかりパーマリンクの設定をし忘れると、ブラウザのアドレス欄に日本語が表示されたり、 %e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b みたいな感じで、イミフな文字列がならんでしまったりしてあまり気持ちの良いものではありませんよね。 よく分かっているならまだしも、運営を任せていたりすると、そんなURLが大量に発生してげんなり・・・そんな状況もよくあり得ます。 先日フォーラムの 記事のスラッグ名を自動的に記事IDにしたい に回答した内容を一歩進めて、なるべく汎用的に使えるコードを書いてみました。 方針としては、 自分で設定したスラッグの場合は、変更しない 日本語などマルチバイトの場合は、{投稿タイプ}-{記事ID}に強制的に変更 記事IDのみにしていない
必読！5分でわかるレスポンシブWebデザインまとめ その2 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーの野田です。 前回書かせていただいた「必読！5分でわかるレスポンシブWebデザインまとめ」が、大変好評だったため、今回も続編を書かせていただきます。 今回は、応用編のつもりでしたが、前回だけでは足りていない事が多かったので、もう少し基本となる部分を固めていきたいと思います。 本当に基本的な事ですが、大切な事ですので、少しでも皆様のお役にたてればと思います。 レスポンシブWebデザインで必ず考えなければならない事 「レスポンシブWebデザイン」で制作する際には、必ず考えなければならない事がいくつかあります。 これは、考えていなければ制作する際に必ずつまずく事でもございます。 ■対応デバイスの確認 まずは、対応デバイスの確認をしましょう。 現在、様々な解像度を持つデバイスがございます。大体のサイズとして下記のものが挙げられます。 ※PCの解像度に関しては、今回は省略させていただきます
Webサイトに利用したい、ピクトグラムの無料アイコンフォント17個まとめ - PhotoshopVIP
海外デザインブログSixRevisionsで、商用利用も可能な無料アイコンフォント17個をまとめたエントリー「Free Icons Fonts for Web User Interfaces」が公開されていたので、今回はご紹介します。Webサイトやアプリのインターフェースデザインにいかがでしょう。 詳細は以下から。 アイコンフォントってなに？ アイコンフォントは、通常のアルファベットやひらがなとは異なり、シンボルや絵文字（矢印、フォルダー、虫眼鏡など）を収録したフォントファイルです。 アイコンフォントは、Webサイトのナビゲーションメニューなどのユーザーインターフェース(UI)デザインに利用することを想定してデザインされています。CSS @font-faceスタイリングをすることで、他のWebフォント同様に利用することが可能です。 [fancy_box] [list type=”star”
コンテンツマーケティング実践ガイド（後編） ―― オーディエンス開拓・コンバージョンと測定 | Moz - SEOとインバウンドマーケティングの実践情報
ここまでの作業で、コンテンツを発行し、マシンも順調に動き出している！ おめでとう！ しかし、コンテンツ作りは仕事の半分でしかなく、「そのコンテンツに訪問者を誘導する」というもう半分の仕事がある。どんな良いレストランでも知ってもらわなければ人が来てくれないのと同様に、良いコンテンツも見てもらって初めて価値が生まれる。そのため、「どうやって見てもらうのか」を計画して行動する必要がある。それがコンテンツマーケティングマシンのオーディエンス開拓に当たる。 オーディエンス開拓には4つの取り込み口がある。 インフルエンサー検索有料チャネルコンテンツ配信それぞれについて解説していこう。 インフルエンサー インフルエンサー（影響力のある人物）は、オーディエンス開拓で最も重要な要素だ。対象とする分野のインフルエンサーを見つけることから始めよう。 ここでいう「インフルエンサー」とは、その分野に関連するトピッ
CSSのmarginをレイアウトで使ってみる | WEBデザインファクトリー
レイアウトにネガティブマージンを使用する ネガティブマージンとは、マイナスの方向に値が入力されたマージンのことをいいます。例えば、以下のように入力をします。 そうすることで要素の位置をずらし、食い込んだような表現が可能になります。その方法も簡単で、食い込ませたい方向に対して、marginにマイナスの値を入力すれば実現できます。 ヘッダーに食い込んだ ...一般的にCSSでレイアウトする際に、marginは要素に間隔をつけるのに使用しますね。 しかし、marginは要素の位置をずらしたりすることができます。ということで、今回は、marginの応用をご紹介してみたいと思います。 レイアウトにネガティブマージンを使用する ネガティブマージンとは、マイナスの方向に値が入力されたマージンのことをいいます。例えば、以下のように入力をします。 p{ margin-top:-20px; } そうすること
CSS3のセレクタとjQueryの書き方
E[foo^="bar"] 属性セレクタ 要素名[属性名^="属性値"] 形式の属性セレクタ。 属性の値がbarで始まる要素を対象にスタイルを適用します。 a[href^="http://"]{ color:#F00; } $(function(){ $("a[href^='http://']").css("color","red"); }); E[foo$="bar"] 属性セレクタ 要素名[属性名$="属性値"] 形式の属性セレクタ。 属性の値がbarで終わっている要素を対象にスタイルを適用します。 a[href$="pdf"]{ background:url(pdf.gif) no-repeat; } $(function(){ $("a[href$='pdf']").css({ background:"url(pdf.gif)", backgroundRepeat:"no-repe
フォームで使えるおすすめのjQueryプラグイン13個 | WEBデザインファクトリー
Password Validation パスワードのセキュリティ強度のチェックをしてくれます。 デモページはこちら jQuery Show Password Plugin フォームのパスワードを見えるようにするプラグインです。たまに、パスワードを入力していてなんて入力したっけ？って時ありますよね・・・。 デモページはこちら jQuery フォームにテキストをうっすらと出すプラグイン このブロ ...今回は、formで使えるおすすめのjQueryプラグインをご紹介です。パスワードのバリデートから、見た目を変えるものまであります。ユーザーさんの事を考えて使いやすく迷いにくいフォーム作りをしたいものですね。 Password Validation パスワードのセキュリティ強度のチェックをしてくれます。 デモページはこちら jQuery Show Password Plugin フォームのパスワー
HTML/CSSでWEBを習い始めた方がつまずきやすい事3つ | WEBデザインファクトリー
普段WEBの勉強をしている方と接することが多いので、HTMLとCSSでWEBを習い始めた方がつまずきやすい点をまとめてみました。少しでも勉強のお役にたてれば幸いです。普段WEBの勉強をしている方と接することが多いので、HTMLとCSSでWEBを習い始めた方がつまずきやすい点をまとめてみました。少しでも勉強のお役にたてれば幸いです。 相対パス イメージの下に変な隙間 IE6でレイアウトが崩れた 今回は上記三つの問題を解決する方法をご紹介します。 何かと分かりづらい相対パス これは頭の中でイメージがしづらいのかもしれません。ただ、覚えてしまえばすごく簡単です。画像を挿入するときにも、リンクするときにも必要です。絶対にマスターしたいですね。 ところでパスってなに？ パスは下記のようなところで書く必要があります。 <img src="ここにパスを書きます" alt="○○" /> <a href=
ブラウザ間の見た目がどうしても同じにならない!!CSSハックと条件付コメントを使ってみる。 | WEBデザインファクトリー
CSSハックとは Webサイト制作において各ブラウザ間におけるCSSのサポートが若干違うため、出来る限り表示を同一にするためのテクニックの一つです。 古くはIE5.5以前のボックスモデルの解釈の違い等、一部のブラウザの表示を直すために使われてきました。 しかし積極的に利用するのは問題があるんです。それは、CSSハックのいくつかはバグを逆手にとった手法 ...個別CSSハック ブラウザ間での表示がことなってしまう原因が分かったところで、まずは代表的なIEの各バージョンに対応したCSSハックを見てみましょう。 IE6に適用 値の先頭にアンダースコア「 _ 」を付与 body{_color : yellow ;} IE7に適用 値の先頭にアスタリスクを「 * 」を付与 body{*color : green ; } IE8に適用 値の末尾に「 \9 」を付与 body{color :
12個のかっこいいjQueryスライドショープラグインまとめ | WEBデザインファクトリー
モニター全体に広がるメインビジュアルのサイト11つでも記事にさせていただきました。横幅いっぱいメインビジュアルですが、jqueryのスライドショーを紹介してくれているサイトをまとめてみました。簡単に実装できるのでぜひ参考にしてみてください。モニター全体に広がるメインビジュアルのサイト11つでも記事にさせていただきました。横幅いっぱいメインビジュアルですが、jqueryのスライドショーを紹介してくれているサイトをまとめてみました。簡単に実装できるのでぜひ参考にしてみてください。 Nivo Slider 下記のキャプチャと合わせて4つ紹介してくれています。 Animate Panning Slideshow with jQuery | Build Internet 斜めの動きも付いています。 デモページはこちらです。 sexyCycle 下記ページの上の方にjsファイルやCSSファイルのダウン
CSS3プロパティのグラデーション、角丸などを使ったグローバルナビ | WEBデザインファクトリー
本日は、CSS3を使ったグローバルナビの使い方について記事にします。画像を一切使わずに作ります。WEBデザインファクトリーのブログはgoogleChrome、firefoxにユーザーが多いので試しに作ってみました。本日は、CSS3を使ったグローバルナビの使い方について記事にします。画像を一切使わずに作ります。WEBデザインファクトリーのブログはgoogleChrome、firefoxにユーザーが多いので試しに作ってみました。 動作確認について 今回はCSS3グラデーション、WEBフォント、角丸、テキストシャドウを使用しています。サンプルを作成しましたが、googleChrome、firefoxについては動作確認が済んでいます。IEでご覧になっている方はgoogleChrome、firefoxで再確認していただければ幸いです。 CSS3を使ったグローバルナビのサンプル1 デモページはこちらで
画像のファイル名や、CSSのクラス名などをつけるときに注意すること | WEBデザインファクトリー
コーディングで面倒くさい作業といえば、画像などの保存するときの名前決めです。僕はめんどくさがりなのでわりと適当です。 特に、大規模なサイトでは、適当に名前を決めてしまうと、後で管理も大変になります。その結果、つまずかなくていいところで余計な時間がかかってしまいます。 これではいかんと思い、いろんなサイトを見て参考にさせていただきました。大体100サイトくらいは見たと思います。そこで参考になった名前をつけるときの命名規則をご紹介します。今回は画像について調べさせていただきましたが、CSSにも共通することです。コーディングで面倒くさい作業といえば、画像などの保存するときの名前決めです。僕はめんどくさがりなのでわりと適当です。 特に、大規模なサイトでは、適当に名前を決めてしまうと、後で管理も大変になります。その結果、つまずかなくていいところで余計な時間がかかってしまいます。 これではいかんと思
WordPress 会員制サイトの作り方 WP-Members | hijiriworld Web
2012/10/5: 記事を加筆しました 会員制サイトの主な要件 WP-Membersプラグインの仕組み 設定 WP-Membersプラグインのインストールと有効化 WordPressの設定 WP-Membersの設定 投稿記事にアクセス制限をかける すべての記事に制限をかける 特定の記事に制限をかける 記事の一部に制限をかける 固定ページに制限をかける 注意事項 – 一覧ページなどについて ログインフォームの設置 メンバーズページと新規ユーザー登録ページの設置 新規登録の流れ 登録ユーザーの管理 デザインのカスタマイズ 他要件への応用（1つのパスワードを使いまわす場合） 会員制サイトの主な要件 ・すべての記事、特定の記事、記事の一部にアクセス制限をかける ・サイト上にログインフォームを設置する ・サイト上から新規ユーザー登録ができる ・パスワード変更、パスワードリセット、登録情報の変更が
IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット｜Web Design KOJIKA17
IEでCSS3の効果を出せる。 クロスブラウザ対応 CSSスニペット 2011-02-01 影をつけたり、角丸にしたり、便利なCSS3。モダンブラウザは続々と実装されています。 しかし依然としてIEのシェア率が多い現在では、「CSS3を使うのは、ちょっと・・・」と思っている方も多いと思います。 そこでIEのfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、 実用的なCSSのスニペットを紹介致します。 Opacity 指定したボックス自体の不透明度を変えることができます。 また指定した要素の下位の要素に対しても、効果が継承されます。 imgのロールオーバーなどの使い道があります。 Opacity Sample .opacity { opacity: .5; /* FireFox, Webkit, Opera */ -ms-filter: "progi
[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ
まとめる。 webとwebデザインに関しての、WEBCRE8.jpによる 情報まとめのカテゴリです。 正直話題としてはとっくに旬は過ぎていますがｗ 一度まとめておきたいと思い。 殆どのweb制作者達がこれまで頭を悩ませてきたであろうIE対応。web制作者の方々は「もうIE6対応なんかしなくていいじゃん」「対応するからいけないんだよ」という意見をお持ちの方も多いかと思います。 特にIE6に対するコーダーの方達の恨みつらみは相当なもの。一言言いたい場合はとりあえず「爆発しろ！」とでもこちらでぶつけてみてください☆ (´・ω・｀) ie6bot – 腐った牛乳と呼ばれたブラウザ が、しかし会社で制作をやっている方々はそうもいかないのが現実。私のブログでも今は対応が中途半端でしっかり出来ていないのですが…ｗこのブログにはなるべく早めに対策を施すつもりです。あと、これに関してはそのうち独自の対応をし
![[Javascript]「こまけぇーこたぁいいんだよ！」な人の為のIE対応スクリプトまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a5e28c757d14aa768526c879eb8c989dd43aa815/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F07%2Fjavascript-ie-correspondence-01-150x150.gif)
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか？ 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6～8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
サイトの収益を上げたい方へ。すぐに出来るGoogle AdSense最適化 - アナザーディメンション
このサイトをリニューアルするに当たってのちょっとした裏ミッションは、Google AdSenseを効果的に配置しサイトの収益性をある程度アップさせることだった。というのも、レンタルサーバー時代は年間5,000円程度だったサイトの維持費が、VPSサーバーに移転すると20,000円程度までアップ。今までならそれでもまあ良かったが、来年には子供が生まれると言うことで、男には何よりも恐ろしい事態が目前に迫ってきた。 小遣い制！！(T-T) 嫁が今と同じように働けなくなる時点で世帯収入ダウンは避けられない。なので文句を言う気も無いし、むしろそうするべきだと思ってはいるが、そうなるとこのサーバー維持費が地味に痛い。というわけで、サイトの維持費と欲を言えばガジェットヲタクとしての生活を少しでも維持するべく、サイトの収益化を少しは考えてみようと思うようになった。 以来色々試していたが、先日「Google
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
今日から始めるビジネスブログ執筆の10のルール | 住 太陽のブログ
配色イラストレーターの「カラーガイド」
NameBright - Coming Soon
CSSの優先度を理解してスタイルを指定しよう | WEBデザインファクトリー