【Sublime Text 2】ダミー画像をめっちゃ簡単に挿入できるパッケージ 「Placehold.it Image Tag Generator」 | バシャログ。
[WordPress]カスタムフィールド画像からオリジナルサムネイルを生成して表示させる | バシャログ。
知人にエイプリルフールネタを言った所、一切のツッコミもなく終わってしまった可哀想な私、Latinです。 さて今回ですが、WordPressのカスタマイズ要件でもよくあるサムネイル周りの取り扱いについて。 オリジナルのサムネイルサイズを定義する事自体は割と簡単なんですが、 カスタムフィールド絡んで来ると結構、「訳わからん･･･」みたいな状態になったりします。 え？私だけ？ とりあえず、フロントエンドで表示する所までをまとめてみようかと思います。 元々WordPressでは、画像フィールドに画像を入れ込むと、 管理画面の「メディア設定」で設定したサイズを元にサムネイルが自動生成されますが、 これらの設定とは別に、オリジナルのサイズを定義したいケースがあるかと思います。 例えば、既にこれらの設定を使用している状態で、さらに別のサイズのサムネイルを作成・表示させたい場合などです。 function
![[WordPress]カスタムフィールド画像からオリジナルサムネイルを生成して表示させる | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b53dec6a802a8894496962b618bea8a7e8829438/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_wordpress.png)
チェック作業の時間短縮！文字コード/改行コードの判定・変換ツール「FCChecker」 | バシャログ。
仮面ライダーウィザードのウィザードリングが5つ集まりました ishida です。 コレ以上あつめると嫁さんに怒られるので、リング集めはもう辞めます。でもベルトがほしいよぉー さてさて、本日はファイルも文字コードと改行コードチェックに便利なツールのご詳細です。 プロジェクトではそれぞれコーディングルールも異なります。 HTMLのバージョンだったり、文字コード、改行コード、対象ブラウザなど。 複数プロジェクトが同時進行の場合は、注意が必要です。 特に改行コードについては、目に見えるものではないので分かりにくいですよね。 Dreamweaverは環境設定で改行コードを変更できますが、プロジェクトごとに変更はできないので、改行コードをつい前回作業したままの状態になっていることも多いです。 そこで、便利なツールがこれ。 FileCode Checker ファイルの文字コードと改行コードを一覧表示して
jQuery Zoom で画像の拡大機能を実装する | バシャログ。
チャットモンチーの新作早く聴きたーい！みなさん、こんにちは nakamura です。 よくウェブカタログ等で画像の拡大表示機能を見掛けますが、とあるプロジェクトで似たような要件を満たす必要がありました。ただし FLASH は NG。ということで JS ベースのものを探していた所、中々シンプルで使いやすいプラグインがあったので今回紹介してみたいと思います。 jQuery Zoom プロジェクトページはこちら。Jack Moore さんって Colorbox とかも作ってる人なんですね～。いつもお世話になってます！ 使い方 とりあえずダウンロードして適当な場所に展開しましょう。ソースコードは Github で公開されているので、以下からどうぞ。 jackmoore/zoom 一緒にくっついてくる demo.html やプロジェクトページを見ればだいたいの使い方は分かると思いますが、最低限必要な
Dreamweaverで画像サイズをリセットするコマンド＆半分にするコマンド（Retina対応に便利） | バシャログ。
あけましておめでとうございます。hakoishiです。 本年もよろしくお願いいたします。 正月休みはコタツと闘っては連日連敗を喫しておりました。 眠りへの誘惑危険すぎる。 さて、本日はDreamweaverの画像サイズのリセットが一気にできちゃうコマンドと、半分にリサイズするコマンドのご紹介を。 画像サイズをリセットするDreamweaverコマンド Dreamweaver 画像の幅と高さをリセットするコマンド « きんくまデザイン http://www.kuma-de.com/blog/2009-01-27/298 既存のソースを使いまわしてコーディングする時や、修正を重ねるうち微妙にサイズの違った画像が多発した時。 1つずつクリックして修正していくのは手間ですね。 と、そんな時にこのコマンド。 ソースを全選択した状態で、「コマンド」メニュー⇒「画像サイズをリセット」を適用すると、ページ
リアルタイムに入力チェック - jQuery Inline Form Validation Engine - | バシャログ。
こんにちは、nakamura です。すっかり秋めいてきましたね。みなさんの今年の夏の思い出は何だったでしょうか。僕の思い出は叔父がやっている家庭菜園で膨大な量のきゅうりが取れてしまい、家のおかずが2週間ほどきゅうりづくしだった事でしょうか。自分、鈴虫かと思いました。 とあるプロジェクトで、入力フォームのバリデーションを javascript で実装したいという要件がありました。なおかつ最近よくみる submit ボタンを押さずともリアルタイムでエラーメッセージを表示してくれるおしゃれなアレです。そんな要件に添う為今回使ったのが Jquery Inline Form Validation Engine です。元々 sakai が見つけてきたものなのですが、仕組みも簡単で分かりやすく中々動作も軽快だったのでここでご紹介したいと思います。 ファイル構成 まずはスクリプトをダウンロードしましょう。
スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
長い画像を分割して印刷したいときはエクセルが便利 | バシャログ。
夜中に家に帰ったら食卓の上に宅配ピザが置いてあって、気がついたら丸々 1 枚食べきっていた sakai です。ブヒ。 今回はちょっと便利な小ネタをご紹介します。 WEB サイトのキャプチャやデザインカンプなど、縦に長ーい画像を印刷する場合は分割して印刷することになるかと思います。 ただ、ブラウザやアプリによっては分割印刷に対応していなかったりして、意外と面倒だったりします。 分割印刷する場合は画像をエクセルに貼り付けて印刷すると簡単に上手いこといきます。 例えば、以下のような長い画像。 これをエクセルに貼り付けます。（画像はエクセル 2003 です。他のバージョンでも手順はだいたい同様だと思います） 「挿入」→「図」→「ファイルから」を選択し、画像を指定して貼り付け。 続いて、「ページ設定」できちんと分割されるように改ページを調整します。 今回は縦長の画像なので「ページ設定」で「横：1 ペ
[EC-CUBE カスタマイズ日誌] 第 8 回 商品名・検索ワード以外の項目でも検索可能にする | バシャログ。
最近、冷えは万病の元だなと改めて感じています、ichikawaです。 さて、EC-CUBEカスタマイズの連載第 8 回目は、検索ワード以外の項目でも検索可能にする方法を紹介します。 今回のカスタマイズは、今までの連載中にご紹介したカスタマイズの中でも簡単な部類に入りますので気軽にチャレンジしてみて下さいね。 カスタマイズの概容 「商品検索時に、商品名と検索ワード以外の項目でもヒットするようにする。」 デフォルトでは、商品検索の際の対象項目は、商品情報テーブル（dtb_products）の商品名（name）と検索ワード（comment3）のみです。 今回は、この対象に各種コメント（main_list_comment と main_comment）を追加してみます。 ロジックの修正 商品一覧を取得する際の SQL 文の WHERE 句に、検索対象にしたいカラムを追加するのみで可能になります。
![[EC-CUBE カスタマイズ日誌] 第 8 回 商品名・検索ワード以外の項目でも検索可能にする | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
【Fireworks】テキストボックスの大きさを変更する | バシャログ。
台風に対する JR の弱さはなんなんでしょう、火属性でもついてんのかしら。toyama です。 相変わらず Fireworks の小技です。 Fireworks でテキストを打って、色やらフォントやら行間を設定して、これと同じスタイルでもう1ブロック書こうと思ったら、テキストブロックそのままコピペしてテキストを上書きするのが人情ってもんですよね。楽だし確実だし。 よくあるのが、[1]みたいな長文のテキストブロックそのままコピペして[2]を書いたら、[2]の文章が思いのほか短くてテキストボックスの端があまってしまったりする状態。 こんなアンバランスな状態でも、整列コマンドなどはテキストの部分だけを見て働いてくれるのでなんら問題ないと思っていたのですが「こういうのキライ！」と社内のデザイナーに言われてしまったので（名前は伏せます）、これを解消する方法をご紹介します。 1. テキストボックスを選
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
jQueryプラグインでクールなプルダウンメニュー | バシャログ。
お仕事で JavaScript によるプルダウンメニューを実装する必要があり、色々試してみて一番お手軽だったのが「droppy」です。 「droppy」 は jQuery のプラグインです。 パッケージをダウンロードすると色々とファイルが入っていますが、必要なのは src ├ javascripts │ └ jquery.droppy.js └ stylesheets └ droppy.css の 2 ファイルです。 プルダウンメニューの実装は、HTML に以下のコードを貼りつけて CSS を適用すればオッケーです。 ■JavaScript … 外部ファイル化がお勧め <script type='text/javascript'> $(function() { $('#nav').droppy(); }); </script> ■HTML … とてもシンプル <ul id='nav'> <
【Fireworks】地味に便利な矩形スライス | バシャログ。
4月頃からダイエットを開始して、大して減ってもないのに早速リバウンドしてきているシーブレインの toyama です。多少減ってから戻れよ！ 今日はスライスのお話です。 こんな感じのコンテンツがあるとします。 バシャログ。のロゴを書き出してください、と言われたら、選択するのは「スライスツール」でしょうか。 それも普通にアリですが、それよりもカンタンな方法が、メニューの中に隠れている「矩形スライス」です。 1.バシャログ。のロゴをスライスして書き出す--ひとつのグループとしてスライス ロゴを選択して「編集」→「挿入」→「矩形スライス」（もしくはオブジェクトを選択して右クリック→「矩形スライスの挿入」）。 メッセージが「複数のオブジェクトが選択されてるけど、ひとつ分としてスライスする？個別にスライスする？」と聞いてきます。 ロゴは複数のオブジェクトでできていますが、欲しいスライスは1つだけなので
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
すこしズルしてリアルなアイコンを作る方法 | バシャログ。
猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
