複数の画像を自動的に配置して1枚の画像を作成できるPhotoshopエクステンション Tych Panel 2
※2017/04/02 ダウンロードページが削除されたため、リンクを削除しました。 Tych Panel 2は複数の画像を自動的に配置して1枚の画像を作成できるPhotoshopエクステンションです。 挿入方向と画像を選択するだけで、画像を自動的に配置してくれます。 こんな配置ができます いくつか作成例を紹介します。 ↓3行 x 3列の9分割。 ↓大きさがバラバラなレイアウトも作成できます。 ↓縦画像も配置できます。 インストール方法 ダウンロード サイトにアクセスして、「Download」ボタンからzipファイルをダウンロードして、解凍しておきます。 インストール Photoshopを管理者権限で起動します。Photoshopの起動アイコンを右クリックして「管理者として実行」を選択します。 Photoshopメニューの「ファイル」から「スクリプト」 > 「参照」を選びます。 ダウンロード
Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント（アルファベット順） アクセシビリティ （英: Accessibility） Accessibility Plu
Photoshopを使ってる人に今年一番の朗報！カラーのグループ化ができるようになる便利なスウォッチパネル -Swatchoos
Photoshopのデフォルトのスウォッチはカラーが選択できるシンプルなツールですが、すこし物足りないと感じませんか？ 例えば、カラーをグループ化したり、指定したカラーを混色したり、複数のカラーの明度を変更したり、形を丸にしてみたり、そんなことが全部できるSwatchoosを紹介します。 SwatchoosはPhotoshop CC2014.2以降、Win/Mac両対応です。
Chrome拡張「Scraper」でWEBページ情報を手軽にスクレイピングしてデータ化する方法
Scraperとは Scraperは、WEBページ上の規則性のあるデータを手軽に取得することができるChrome拡張です。 例えば、テーブルデータや、Aリンクデータ、のような特定のHTML要素に入っている情報を、片っ端から取得してテーブルデータ化することができます。 また、その取得したデータをワンクリックでGoogleスプレッドシートに保存することができます。 テーブルデータのスクレイピングは以下の動画を見た方が分かりやすいかも。 以下では、その使い道などをいくつか考えてみました。 テーブルデータの取得 最もオーソドックスな使い方と言えば、動画にも出てきたテーブルデータの取得です。 例えば、信長の野望の以下のような武将データテーブルがあったとします。 これを、以下のように選択して、Chromeの右クリックメニューから「Scrape similar（似たものをスクレイプ）」を選択します。 す
Illustratorを使うとき、私が手放せない10個のスクリプト｜DTP Transit
最近、セミナーでスクリプトを紹介すると評判がよいので、10個選りすぐってみました。 これらを提供してくださっている作者さんたちに感謝します。 はまりどころを見つけると「むちゃくちゃ早く終わる」「手作業ではムリ」なことが実現できるので、「ここでこういうことができると快適になるのに」をリストアップしておいて、たまに棚卸ししてみるとよいと思います。 追記 2017更新版を公開しました。 Illustratorを使うとき、私が手放せない10個のスクリプト（2017更新版）＋ 入手できるスクリプト一覧 - DTP Transit なぜ、スクリプトを使うの？ Illustratorでの作業を効率化するには、キーボードショートカットやアクションを使う方法がありますが、そもそも次のような場合には、有償のプラグインを使うほか、スクリプトを使う方法があります。 Illustratorではできないこと できるけ
無料になった「Google Nik Collection」を使ってみました。 - フォトスク
「Google Nik Collection」の実際に使用したレビューや機能の使い方について掲載しています。 「Google Nik Collection」はPhotoshopやLightroomなどの画像編集ソフトで使えるプラグインパッケージです。「Google Nik Collection」をインストールすると、対応するソフトに「Google Nik Collection」の項目が追加されて画像を簡単に編集することができるようになります。実際にPhotoshopで「Google Nik Collection」を使用してみました。 追記(2017年5月31日)：「Nik Collection」は今後、アップデートや新機能追加の予定はないと発表されました。 「Nik CollectionはMac OS X 10.7～10.10、Windows Vista、7、8、Adobe Photosh
[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
マルチデバイス対応のウェブ開発を効率化する「Adobe Edge Inspect」の使い方
スマートフォン開発事情 スマートフォン向けウェブサイトの開発というと、どのような現場を想像するでしょうか。PCでコーディングして、ファイルを更新するごとにスマートデバイス端末（以下、端末）を操作してウェブページにアクセス、表示確認をして、またPCにもどってコーディング、端末でリロード、といったフローではないかと思います。あるいは、問題を報告するために端末ごとに画面キャプチャを撮ってメール送信…という場面もあるかもしれません。いずれにせよ、ずらりと並んだマルチデバイス環境と格闘しているのではないでしょうか。 Adobe Edge Inspect（以下、Edge Inspect）は、この煩雑なフローを効率化する支援ツールでもあり、同時に強力な開発ツールでもあります。 検査対象のページを端末に表示し、リロードからキャッシュ破棄までの操作に加えて、撮影したスクリーンショットをPCに転送するといった
APIs.io API Developer Portal
Search for APIs using the Internet's first API search engine API. Getting Started Learn what you need to get started using the APIs.io API, integrating the API search engine into your applications. Go Documentation Visit the documentation for the APIs.ioi API to learn about how you can search for APIs, properties, and maintainers. Go
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script>本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{ "
PS Auto Sitemap （サイトマップ自動表示プラグイン） の導入方法と使い方
WordPressで作成したサイトのサイトマップを自動生成できるプラグイン、「PS Auto Sitemap」の使い方を紹介します。初期設定やデザインの変更も簡単、便利なプラグインです。 2022年11月2日 追記 「PS Auto Sitemap」プラグインは一時的に公開停止となっており、利用することができない状態です。再公開されましたら、またお知らせします PS Auto Sitemap プラグインでサイトマップを自動生成 サイトマップとは PS Auto Sitemapで自動生成できる「サイトマップ」とは、サイト内の投稿や固定ページ等を一覧表示させる、「もくじ」の役割を果たすもの(HTMLサイトマップ)です。下記ページで紹介したような、検索エンジン向け(XMLサイトマップ)ではありません。 Google (XML) Sitemaps Generator の導入方法 ブログの投稿は、通
FacebookページとWordPressを連携させる[Jetpack]
まえがき WordPress.com公式プラグイン『Jetpack』がいつの間にかGoogle+ページとの連携に対応していました。 これでtwitterやfacebook等の主要ソーシャルメディアとWordPressの連携を一つのプラグインで行うということが可能になりました。 かなりテンションが上がりました。 なのでFacebookページとWordPressの『Jetpack』を使用した連携方法も解説していきたいと思います笑 『Jetpack』を利用した他のソーシャルメディア連携はこちら Google+ページとWordPressを連携させる[Jetpack] TwitterとWordPressを連携させる[Jetpack] 『Jetpack』のインストール方法 インストール方法は以前記事にした「Google+ページとWordPressを連携させる[Jetpack]」に詳しく書きました。 そ
![FacebookページとWordPressを連携させる[Jetpack]](https://cdn-ak-scissors.b.st-hatena.com/image/square/082d4e3c1cf65f22deee26aec0fe7dc55808c675/height=288;version=1;width=512/https%3A%2F%2Fkotori-blog.com%2Fwordpress%2Fwp-content%2Fuploads%2Fbko5wl1b.gif)
WP Custom Fields Search – 絞り込み検索機能を簡単に組み込めるWordPressプラグイン | ネタワン
WP Custom Fields Searchは、WordPressに絞り込み検索機能を簡単に組み込めるプラグインです。検索機能を拡張できます。 絞り込み検索は、複数の検索条件を指定して検索ができます。キーワード検索、カテゴリー検索、タグ検索、カスタムフィールドの値から価格帯検索（数値を範囲指定して検索）などを簡単に利用できます。カスタムフィールドの値から価格帯検索の機能が非常に便利です。 このプラグインを利用すると、サイト閲覧者が記事の中から自分が探したい情報を見つけやすくなります。通常の検索をさらに使いやすくしたい場合に活用しましょう。 はじめに このプラグインが優れている点 WordPressで絞り込み検索機能を簡単に利用できる。複数の検索条件で絞り込み検索を利用できる。 キーワード検索、カテゴリー検索、タグ検索を利用できる。 カスタムフィールドの値から価格帯検索が利用できる。（数値
これはヤバイ！Photoshopで目力アップ・ぷるるん唇・美肌補正する魔法のアクション -Skin Retouching
お肌のビフォー・アフター Skin Retouchingのインストール Skin Retouchingの使い方 Skin Retouchingのインストール サイトの下の方「Free Download」から「Skin - 5 Retouching Actions.zip」をダウンロードします。 5 Skin Retouching Photoshop Actions 「Skin - 5 Retouching Actions.zip」を解凍します。 Skin by SparkleStock.atn Photoshop用のアクションファイル Skin by SparkleStock.zxp Photoshop用のエクステンション Photoshopにインストールするには、.atn, .zxpのいずれかを使用します。 アクションファイルのインストール アクションファイルをインストールするには、Ph
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
いろいろな動きをするニュースティッカー(News Ticker) jQueryプラグイン - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGで滑らかなモーフィング（変形）を！SVG Morpheus の使い方 | ARAKAZE NOTE
背景画像にぼかし効果をかけることができるjQueryプラグイン「Image Blur Plugin」｜アド･エータイプ スタッフブログ
記事を複製できるWordPressプラグイン「Duplicate Post」 – ワードプレステーマTCD
http://sanride.com/blog/webdesign/wordpress.php