サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
www.sriproot.net
今週末はお花見ですか？ 僕は下の子と散歩がてら見に行こうかと思ってます。 さて、以前に『ショートコードを使って、更新を楽にしよう』的な記事を書きました。 今回はそれの応用というか、カスタムフィールドの内容に、別のカスタムフィールドの値をショートコードとして入力する必要がありまして。 最初はわけわからなかったんですが、わかってしまうと意外と簡単だったのでそのメモです。 目次 使いドコロ カスタムフィールドでショートコードを書いてみると カスタムフィールドでショートコードを使うには まとめ 使いドコロ カスタムフィールド内でショートコードを使う方法ですが、かちびとさんも言っているように、そうそう使いドコロはないかもしれません。 WordPressのカスタムフィールドでショートコードを使う – かちびと.net 『A』というカスタムフィールドがあって、それをショートコードを使って投稿内に表示して
お問い合わせなどで、郵便番号を入力すると自動的に住所まで入力補完してくれる機能『ajaxzip3』。 使ってますか？便利ですよね。 数週間先にはなるんですが「ajaxzip3が動かない！」という状況になる人もいるかと思うので、早めに対応しておきましょう。というお話です。 目次 動かなくなったらここを確認 GoogleCodeからGitHubへ まとめ 動かなくなったらここを確認 今まで普通に動いてたのに、急にajaxzip3が動かなくなった！と思ったら、まず一番最初に疑うのは、Javascriptの読み込み先です。 もしかしたら、何のことやらさっぱり…な方もいるかもしれませんが、ajaxzip3を使うページのHTMLソースを確認して、<head>タグ内、もしくは</body>タグ直前に <script src="http://ajaxzip3.googlecode.com/svn/trun
今日は上着を厚手のにしました。 部屋にいても冷えますよねぇ。 さて、今日はAdvanced Custom Fieldのデイトピッカーを使った時の話。 大変便利なAdvanced Custom Fieldですが、その中のデイトピッカーを使っても曜日までは表示されません。 通常あんまり必要ないのかもしれませんが、今回必要となったのでそのやり方をメモしておきます。 目次 Advanced Custom Fieldのデイトピッカーの設定 曜日の取得 まとめ Advanced Custom Fieldのデイトピッカーの設定 まずはAdvanced Custom Fieldの設定です。 『date_res』という名前で作成しました。 一応『フォーマットを保存する』欄はハイフンついていません。 チュートリアルなんかには、ハイフン付きの日付が多いんですが、結果的にはハイフンがあってもなくても同じ結果が得ら
2月ももうおしまいですね。 もう1年の6分の1が終了ですよ。驚きです。 さて、一昔前によく見たような「文字サイズを変えるJavascript」覚えてますか？ 「大」「中」「小」とボタンがあって、それを押すことでコンテンツのボタンが大きくなるやつです。 そして「一昔前に見たような」と言っておきながら、先日それをつくりましたので、覚え書き程度に残しておきます。 目次 出来上がり HTMLとcssとjQuery HTML css Javascript jquery.cookie.js まとめ 出来上がり もうさっさと完成品を見たほうがいいかと思います。 jQueryを使った文字サイズの変更デモ HTMLとcssとjQuery この機能はjQueryでcssを操作して、文字サイズを変更しています。 HTML HTMLでは単純に文字サイズを変えるボタンを表示しているだけです。 <h1>文字サイズ変更
お客さん側で更新しやすいようにということで、WordPressを導入するのはよくあることです。 ただ、間に入っていただくディレクター、もしくは営業の方の力不足だったりもあって、更新が楽になるかどうかは別物。 そんな中で、最近特に好んで使っているカスタマイズです。 お客さんにとっては「更新が簡単 = 更新箇所が明確」ということだと思うので、こちらで「ここ更新したらいいよ」ってのをわかりやすく教えてあげるといいと思うんです。 その一つの方法として、カスタムフィールドを使って、更新できるようにしています。 目次 こういう時に向いてます ショートコードを使う カスタムフィールドの値を取得して表示 まとめ こういう時に向いてます あまり具体例が多いわけではないんですが、例えばASPのカートなんかを使っている場合。 「カートに入れる」の部分だけHTMLコード書き出すから、それを商品ページに貼り付けて下
今日はお散歩に出かけて、桜の花と梅の花を満喫してきました。 気温も結構暖かく、もう春着てますね～。 さて、最近知ったプラグインなんですが『SiteGuard WP Plugin』というもの。 WordPress › SiteGuard WP Plugin « WordPress Plugins きっかけは、ヘテムルでWordPressを自動インストールした時に、最初から入っていました。 Akismetは商用利用は有料なので使えず、かといって他にいい感じのセキュリティプラグインを見つけきれてなく、このプラグインが国産ということもあって、とりあえずお試しで使ってみました。 使ってみるともうAkismetなんか使わなくても、十分有り余るくらいのプラグイン。 いやぁ、これは使ってみるべきですよ。 目次 SiteGuard WP Pluginの機能 各種設定方法 管理ページアクセス制限 ログインペー
ホームページWordPress「Never Let Me Go」を使って退会機能を追加し、プロフィール編集ページにリンク設置してみた 今もちょっと関わっているんですが、とある（廃れた）会員サイトの制作からお手伝いさせていただく機会がありまして。 そのサイトは「誰でもユーザー登録できる」状態になっていまして、会員になるのに管理者の承認がいらない会員サイトです。 そこに「退会」させる機能をつけたかったんだけど、WordPressの通常機能だとどうしていいものかわからなかったので、便利なWordPressプラグイン「Never Let Me Go」（GREEよりひどいWordPressの退会機能をなんとかするプラグイン | 高橋文樹.com）を利用して、プロフィール編集ページに退会ページヘの誘導リンクをつけてみました。 目次 Never Let Me Goの導入 Never Let Me Goの
会員制サイトを作った時に実装した画像とテキストの見せ方。 真新しい方法ではなくてよく見るやつです。 メリットとしては、限られたスペースの中でテキスト情報を与えることができるのと、レイアウトが崩れにくい点ですかね。 デメリットとすれば、マウスオーバーしてもらわないとテキスト情報がわからない。 ざっとした確認ですが、一応iPhoneならワンクリックでテキスト表示、ツークリック目でリンク移動となるようです。 では、以下そのやり方。 目次の前に、とりあえずデモ。 デモはこちら 目次 HTMLを準備 CSSを準備 jQueryを準備 完成 おまけ HTMLを準備 まずは基本となるHTMLを準備します。 テキストと画像があればいいんですが、今回はブログに掲載されている画像とそのタイトルという設定でいきます。 適当にコーディングしてもらえばいいんですが、僕は一応関連性あるものはdlで囲むのが好きなのでそ
手書きフォントとか良い味だすことありますよね。 でも、線が微妙にぐにゃぐにゃしてたり、鉛筆で塗りつぶしたような微妙な空白があったりと、なかなか難しそうなイメージ。 別の探しものしていて、たまたま見つけたのでやってみたら意外と簡単だった落書き効果のやり方を、いつか使う日が来ると思うのでメモ。 参考サイト Turn Any Font Into a Sketch Font in Illustrator | Vectips 仕様ツール Adobe illustrator CS5 目次 字を書く 色を一旦抜いてまた塗る 落書き効果を与える 線をふやふやにする グラフィックスタイルに登録する 字を書く 字はなんでもいいんですけど、後で効果を与えることを考えると、なるべく大きめに作っておくのがよさそうです。 ちなみにこれは60ptです。 色を一旦抜いてまた塗る 今作ったテキストのアピアランスパネルを見る
現在携わっている会員制サイトがあるんですが、これが僕が最初にまともに作ったWordPressサイトです。 もちろん怪しい部分は盛りだくさんなんでしょうけど… できること、できないことが不明なまま始めたようなもんですが、なんとか出来上がっています。 プラグインもそれほど特殊なものは入れていませんが、参考にしたいサイトのソースを見ながら、どのプラグインを使っているのかいろいろと探した記憶があります。 不必要なものは極力除外していますが、最低限これくらいのプラグインがあれば会員制サイトが作れるよ。という感じの内容です。 紹介が超長いです。 目次 入れてるプラグイン こういうのが欲しい 終わりに 入れてるプラグイン ほんとはどういったサイトで、どういった機能があって、というところから説明するほうがいいんでしょうが、書いてたら長くなったのでまたいつか。 とりあえず入れてるプラグインを並べてみます。
会員制サイトなどに訪問した際に、ユーザーにどういう順番でリンクを踏んで欲しいか、どうすれば作り手が考えるように動いてもらって会員登録してもらうかは、非常に考えるところだと思います。 そのために、まずは、Webサイトツアーなどを見せたり、手順ページへ誘導したりすることが多いんじゃないかと思います。 そのWebサイトツアーを簡単に作れるJavascript「Intro.js」をご紹介。 目次 Intro.jsを使うとこうなる Intro.jsの使い方 終わり Intro.jsを使うとこうなる Intro.jsを使うと、この元々のサイトに こうやって番号と説明が表示されます。 次のステップに行くと わかりやすいですね。 Intro.jsのgithubに色々とサンプルが載っているので、そっち見たほうが早い気もします。 「usablica/intro.js · GitHub」 Intro.jsの使い
数多く出ているLightbox系のスクリプトですが、WordPressに設置するのはどれがいいのか悩んでいました。 これまでは「Lightbox-2 for WordPress」を使っていることが多かったんですが、カスタムフィールドに値が入るのが気持ち悪くて…。 そして今回「WP jQuery Lightbox」を使ってみているわけです。 WP jQuery Lightboxにした理由 「シンプル」 ただこれだけです。 大元の設定でイメージリンクが付くものには勝手にライトボックス効果を与えてくれるようにできるし、もちろんその逆も。 グループ化も簡単だったのでこれにしたんです。 もちろん、他のプラグインでも、もしかすると「Lightbox-2 for WordPress」でも出来たのかもしれないんですが、カスタムフィールドに… グループ化とかはちょっとだけ手間はかかるけど、それは投稿の際にや
Googleサービスのチートシートいろいろ 2010年07月11日 今年のはじめに、Googleのサービスをいろいろと使ってるなぁ。と再認識したわけですが、livedoorリーダーを使ってた頃から、キーボードショートカットが非常に便利で。 もちろん、Googleリーダーでもキーボードショートカット使ってるわけですが、それ以外にもGoogleのサービスにはショートカットがあるわけです。 Googleさんのいろんなチートシート集めてみました。
Free Social Bookmark icon sets（フリーのソーシャルブックマークアイコンセット） 2010年01月27日 あえて英語タイトルにしてみた。 （日本語タイトルも加えてみた） ソーシャルブックマークのアイコンセットです。 ほんとは国内に限りたかったけど、そうするとかなり減っちゃうので、海外のも少し含めました。 あと、ソーシャルブックマークって言ってるけど、違うのもあります。 特に僕が普段使ってるWebサービスのアイコンを作ってたのでそうなったわけですが…。 アイコンセットには GoogleブックマークYahoo!ブックマークはてなブックマークBuzzurllivedoorクリップ@niftyクリップFC2ブックマークgooブックマークSphinn JapanPOOKMARK AirlinesnewsingFacebooktumblrtwitter が入ってます。 サイ
簡単！Photoshopでシャボン玉を作る9ステップ 2009年08月07日 たまには仕事で役立ったことも書いときます。 今日はPhotoshopでのシャボン玉の作り方。 あの透明感があって、不思議な色をしているシャボン玉をどうやって作るのか。 いろいろ調べたら、海外サイト（どこだか忘れた）にやり方が載ってたので、それを僕流にご紹介します。 出来上がるとこんな感じになります。 では、その手順。
imgを縦に並べると隙間が… 2006年07月03日 知ってました？ img画像をリスト（<li>）で縦に並べようとすると、微妙に隙間ができちゃう。 これを解除する方法なんですが。 imgのスタイルシートに border:0; ってやれば、Firefoxでは正常に隙間がなくなりました。 でも、この方法だと、IE6.0ではまだ隙間が･･･。 で、FirefoxでもIEでもちゃんと隙間なくimgを並べる方法。
dt、dd要素で表組みを作る 2007年08月27日 たまには仕事がらみのお話も。 最近は、dt、ddを使って、擬似的な表組みを作ることがあります。 別にテーブルでもいいんですけどね。 表組みだったら、テーブルでもいいんだけど、ちょっと違うかな。ってときは、dt、ddを使ってます。 で、その方法。 HTMLソース <dl> <dt>項目1</dt> <dd>項目1の内容です。</dd> <dt>項目2</dt> <dd>項目2の内容です。</dd> <dt>項目3</dt> <dd>項目3の内容です。項目3の内容です。項目3の内容です。</dd> </dl> で、CSS dl,dt,dd { margin: 0; padding: 0; } dl { border: 1px solid #333; border-top: none; width: 300px; background: #e
このページを最初にブックマークしてみませんか？
『www.sriproot.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
