サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
www.doghands.com
AdobeのUX/UIデザインソフト「XD」。先日のアップデートで追加された「CSSコード自動生成」を試してみました。 プラグインの利用を含め、SketchやFigmaなどの類型ソフト/サービスでは実装されている機能です。 ローカルのソフト内ではCSSは生成されず、共有用にクラウド上に書き出したファイルを表示した際にこの機能が使えます。 関連記事:Adobe XD新機能:テキストを変えるとボタンサイズも自動で変化!「コンテンツに応じたレイアウト」を使ってみる 試してみる 使い方はとても簡単ですが、いくつか注意点があります。 なにか作る 適当にボタンを作ってみます。「すいか」ボタンを作ってみました。 共有リンク書き出し 共有用のリンクを書き出してみます。『開発用に共有』を選択しないとCSSが書き出されません。 また、書き出し先は『Web』である事が必要です。iOSやAndroidではだめで
前回、「パワーポイントで写真にグラデーションをかける」で、パワポで画像書き出し用のファイルを作りました。 このサイズの指定方法を解説します。 パワーポイントは大きさを決める際、A4等の紙サイズで選ぶか、もしくは小数点以下2桁までのセンチメートル単位で指定します。 元々画像加工を想定しているソフトでは無いので仕方ないですが、ウェブ素材に使用する為のピクセル単位でのサイズ調整が出来ません。 ここからは少し面倒な説明になります。 —面倒な説明ここから— パワーポイントを「別名で保存」から、画像にて書きだす際、通常ウェブで使用する72dpiでは無く、96dpiで保存されます。 dpiとは、1インチ内にどれだけドット(ピクセル)があるか、と言う単位です。 この場合、たとえばパワポ上で1インチの四角形を作り、jpgで保存した場合縦横96ピクセルの図形となります。 では、100ピクセルのjpg図形が欲し
OSX環境です。 グーグルクロームブラウザを使用していると、たまに他のソフトが非常に重たくなる事が多くなり、 アクティビティモニタで確認すると、”google chrome helper”のCPU使用率が高くなっている事が分かりました。 結論としては、クロームの設定から、プラグインの項目を”クリックして再生する”に変更する事で改善しました。 アップルのこちらのディスカッションを参考にしました。 https://discussions.apple.com/thread/5572267 ステップ1 クロームの設定画面から、一番下の”詳細設定を表示…”をクリック。 ステップ2 “コンテンツの設定…”ボタンでポップアップウィンドウが表示されるので、下にスクロールして ステップ3 プラグインのチェックを”クリックして再生する”へ変更 ブラウザを一旦閉じてリスタートすると、私の環境では改善しました。
部屋をざっくりと片付ける 先日会議の議題の粒度について書きました。 要は、議題の「粗さ」を最初に決めておかないと収拾がつかない。 通販事業の大まかな収益の推移から戦略を決めようと言う時に、キャンペーンで使用する景品の色について10分以上話したり、 逆に楽天のコーディングについて話している時に、やはり自社サイトの方に力を入れたほうが良いのでは、のような話になってしまったり。 で、これは部屋片付けにも使えると思います。 私は今でこそ部屋はかなりきちんと片付けている(重要)方ですが、学生時代はそのあまりの散らかりっぷりに、知らない人まで見学に来るくらいでした。 それから今に至るまでに、部屋の片付け方法は色々考えて実行してきたのですが、 まずは基本、「物を置かない」です。幸いコレクター気質は無いので、これを徹底するだけで部屋の整頓は段違いに簡単になります。 これが断捨離とか言うのか分かりませんが、
当社はウェブサイト制作において、自社での運用のしやすさを最も重視しています。 長期間の運用、将来の変更、担当スタッフの入れ替わりを当然のものとして視野に入れ、最適な設計を提供します。 ワードプレスを活用し、お客様のビジョンを形にするお手伝いをします。 詳しくはお問い合わせください。 更新しやすい改善しやすい 作りっぱなしのホームページにしないために ビジネスサイトは更新しなければすぐに価値を失ってしまいます。 そんな事は分かっていても、ほとんどのホームページは作りっぱなしです。 修正するのも元に戻すのも面倒な環境では、ホームページはどうしても後回しになってしまいます。 当社は「運用のしやすさ」を最も重要な要素と考え、ホームページを制作します。 担当者1人の運用でも大きな成果を。
新着のワードプレス用1ページ型パララックステーマです。全てレスポンシブデザインです。 Cutting Edge 詳細はこちら 円形のサムネイルが特徴的なテーマです。マウスオン時のアニメーションが綺麗。 NEXT 詳細はこちら メトロっぽいフラットな雰囲気のテーマです。スクロール駆動で結構ぐりぐり動きます。 Sonett 詳細はこちら 女性的な、かわいい雰囲気のテーマ。bootstrapバージョンもあります。 Nervaq 詳細はこちら センス良く調整されたスクロール駆動、マウスオン時のアニメーションが小気味よいです。 Oriolus 詳細はこちら カッチリとしたシンプルなシングルページテーマ。トップはフルサイズ動画の配置も可能。 MaxMuse 詳細はこちら ※ワードプレステーマではありません。 アドビのウェブオーサリングツール、Adobe Muse用のシングルページパララックステーマです
高クオリティのワードプレステーマ販売サイト【ENVATO MARKET】の利用方法を解説します。 ENVATO MARKETはオーストラリアの会社envatoが運営する、ワードプレス含めた様々なCMSのテンプレート販売サイトです。 数多くの制作チーム、デベロッパーが所属し、アフターケアやフォーラムも充実しています。 テンプレートのユーザー数や評価、最終アップデート日、事前の質問など、購入前でもかなりの情報をチェックすることが可能です。 (テンプレートの選び方は、私が海外有料テーマを選択するときの5つのチェックポイントもご参考ください) 一度エンバト・マーケットに登録してしまえば、関連サイトも同じアカウントで利用できます。 関連サイトには、画像素材販売サイトのフォトデューンや、プラグイン販売のコードキャニオン等があります。 今回は、エンバト・マーケットに登録、テンプレートを購入してダウンロー
WEBページ全体をキャプチャ出来る、クローム拡張機能Awesome Screenshotの紹介です。 縦に長いサイトも余裕で画像化。【Awesome Screenshot】 いろいろとスクリーンキャプチャのソフトはありますが、わざわざChromeにインストールする以上、 ・(上から下までスクロールした状態の)WEB全体のスクリーンショット を撮る機能は必須ですね。見えてる範囲であれば、windowsやmacに標準で備わっているスクリーンショットのショートカットキーや、Skitch等の便利なソフトがあります。 いくつか試してみて、一番安定していたのがAwesome Screenshotでした。 Chromeの拡張機能ページか、公式ページにてインストールすると、ツールバーにアイコンが表示されます。 上から、 Capture visible part of page:ブラウザで見えている範囲 D
アマゾンの提供するクラウドサービスAWSに、シンプルなブログプラットフォームghostをインストールしてみました。 さくらサーバ(スタンダード)にNode.js環境を構築する事はすっかり諦めたので、ghost推奨のホスティングサービスを再度確認。 [browser-shot width=”300″ url=”http://docs.ghost.org/installation/deploy/”] http://docs.ghost.org/installation/deploy/ 結果として、現時点では 国内サーバでghostのクイックインストーラ的な物は無し。(さくらとかロリポとかエックスサーバとかの有名どころ) 国外有料サーバではghostのクイックインストーラーがある、Digital Ocean(5$/月)が良さそう。(解説ページはこちら) 無料プラン見つけたと思ってbitnamiに
ワードプレスのブログ投稿の下やサイドバーのウィジェット部分に【関連記事】のリストを掲載するプラグインとしては、「Related Posts」や「Similar Posts」が有名です。インストールや設定は簡単なのですが、CSSでの表示修正に手間取ったので、参考になった記事を紹介させて頂きます。 しかしこの「Similar Posts」、人気記事のリストを表示する「Popular Posts」と作者が同じらしく、また同時に解説しているサイトも多いので、検索で「Similar Posts」の事を調べていたのにいつのまにか「Popular Posts」のカスタマイズ記事を読み込み、「そんな設定画面無いですけど!」のように混乱に陥ることがあります。自分が今何を調べているのか、きちんと立ち止まって確認しましょう。 [browser-shot width=”300″ url=”http://ri-mo
“記事を書き公開する”事だけに機能を絞ったブログプラットフォームghost(ゴースト)。発案者のJohn O’Nolan氏は、WordPressを優れたCMSプラットフォームと認めながらも「ブログを書きたいだけのユーザーには、設定項目が多すぎる」と、このプロジェクトを立ち上げました。まだまだ一般ユーザーにはインストールのハードルが高く、実は私も放置中ですが、そのあたりは改善されてゆくと思います。 今はまだユーザーも少ないghostですが、テーマ(テンプレート)は幾つか掲載されています。その中からシンプルな1カラム型で、特にiPadをはじめとしたタブレットでの可読性を追求している物を紹介します。 PIXIO Nerdy SoundCloud(サウンドクラウド)コード対応です。 Moustachey こちらもデモにてSoundCloud対応しています。 Friendly Venkman
先日からChromeの起動がかなり遅く(約1分)、Macを再起動しても、キャッシュをクリアしても、使わない拡張機能をアンインストールしても改善されないので調べてみると、どうやらツールから閲覧履歴を削除するくらいではダメらしいです。 通常のキャッシュの消し方 PC・MACの場合 Googleクロームの「設定」(右上の三本線アイコン)から、 ツール→閲覧履歴を消去→ポップアップした画面の、”キャッシュ”をチェック→”閲覧履歴データを消去する”をクリック。 拡張ツールを使う場合 Clear Cacheという無料の拡張ツールがリリースされています。ボタンクリック一回で、予め設定した履歴・キャッシュがクリアされます。 iPhone版クロームの場合 右上の三本線アイコン→設定→プライバシー→「キャッシュを消去」か、 右上の三本線アイコン→履歴→下部の、「閲覧履歴データを削除」→「キャッシュを消去」 完
AJAXイベントカレンダーや、バンドによる会場の利用希望(施設予約)メール等、ライブやイベントの告知に特化したレスポンシブワードプレステーマのご紹介です。 小規模ライブバーホームページの運用にも。 公式サイトはこちら 【Eventure】は、イベント用に特別に構築された最高のWordPressテーマです。 このテーマはカスタムカレンダーシステムを採用しています。 通常のカレンダーは、活動がない日付も表示されるので無駄なスペースがたくさんあります。 【Eventure】では、実際のイベントの日付のみが表示され、ユーザビリティが向上しています。 販売サイトより抜粋 ※英文を意訳 特徴 特徴は、サイトによると Google Events markupサポート(検索結果に、下記のようなイベント詳細が表示されます。) 終了イベントの自動非表示可 レスポンシブレイアウト(もちろんiPadも) 豊富なカ
以前、簡単な記述でYouTube動画をレスポンシブ対応にするCSSを紹介しましたが、今回はプラグインのご紹介です。 2014/09/06追記ここから——— ワードプレスが4.0になり、特にプラグインを利用しなくても、アドレスをペーストするだけでレスポンシブ対応するようになりました。 詳しくはこちらの記事をご確認ください。 2014/09/06追記ここまで——— Advanced Responsive Video Embedder アドバンスド レスポンシブ ビデオ エンベッダ− YouTubeやVimeoだけでは無く、Ustream・Dailymotionその他様々な動画サービスに対応しています。 サポートフォーラムではTEDなどの要望もあり、これから対応動画も増えそうです。 スタイルシートも触る必要も無く、個人的には、動画の埋め込みはこれで決まりかなと思います。 目次 動画のレスポンシブ
映画の告知サイトや、映像作品の発表に使えそうなワードプレステーマを集めました。 通常のレイアウトと異なり、フッターの著作権表示領域が無かったり、ナビのユーザビリティよりもインパクト重視だったりと、特徴があります。 Broadside以外は全てレスポンシブデザインとなっていて、ブラウザの幅いっぱいに動画が広がります。 (ちなみに、映画予告サイトと書きましたが、実際の映画予告やゲーム告知サイトは、メイン静止画と+ティーザー予告・本予告のリンクと言う感じで、いきなり再生されるパターンは意外と少ないですね。) サーバに動画を置くタイプもありますが、YouTubeかVimeoの動画を表示する方式が多く、SD、HD画質のオプションが選択出来るテーマもあります。 chocolate サーバ内の動画かYouTubeタグの選択。サーバ内動画の方が、若干コントロールバーの反応が良いです。可変タイプのグリッドス
セール用バナーやキャンペーン情報に使用する機会の多い、無料のリボン素材を集めてみました。 40+ Free Vector Ribbons 利用規約・ダウンロードはこちらから フラットでクールな印象のデザインです。基本的な形を網羅。 くるっとしたリボンは、化粧品のチューブやボトルに回りこむような形で使えますね。 Free Vector Ribbons Vol.1 利用規約・ダウンロードはこちらから こちらも、基本的なシェイプが揃っています。 Free Chunky Web Ribbons PSD 利用規約・ダウンロードはこちらから 優しい曲線のリボン素材。 Four Colourful Ribbons 利用規約・ダウンロードはこちらから カチッとした、フラットデザインのリボン。 Golden Decorative Vector Ribbons Set 利用規約・ダウンロードはこちらから 金色
前回は、商品の原産地マップや組織マップに使える正確なベクター地図素材サイトを紹介しました。今回は、ニュースサイトなどの背景に使えそうな、シンプルに図案化された世界地図素材を紹介します。 Dotted world map vector resource by Jayhan Sim ドットで表現された世界地図のベクターAIファイル。ドットの大きさは3種類あります。 利用規約・ダウンロードはこちらから World Map 45° Lines Vector 斜めのラインで描かれた世界地図のepsファイル。 利用規約・ダウンロードはこちらから Free-Vector-World-Maps 大きめの丸ドットで描かれた世界地図。 利用規約・ダウンロードはこちらから Dot Map of the World Template(パワーポイントテンプレート) こちらはパワーポイント用のPPTデータで、画像はベ
ホームページ制作途中やメンテナンス時にはサイトを非表示にして、限られたスタッフのみが閲覧出来る用にしたいですね。 そんな時、手軽に使えるWordPress用プラグインを2種類紹介します。 このプラグインが一番手軽な印象です。メンテナンス中であることを知らせるページは至ってシンプルなので、関係者のみが知る新規サイト制作中や、リニューアル用に用意したテストサイト向いているかもしれません。 ※コンテンツのみに閲覧制限がかかり、画像などのメディアファイルのアドレスを直接入力した場合は表示されるので、リリース前の情報制限が有る極秘プロジェクトには使えません。 インストール方法 プラグイン→新規追加から”Password Protected”で検索。 ※Password Protectedは無料のワードプレスプラグインです。 主にウェブサイト制作中に使用します。 サイト全体をパスワードで保護し、パスワ
せっかくレスポンシブ対応のテンプレートでホームページを制作しても、YouTubeやVimeoなど、動画の埋め込みに対応していない場合は、下記のようにはみ出してしまいます。 2014/09/06追記ここから——— ワードプレスが4.0になり、特にプラグインを利用しなくても、アドレスをペーストするだけでレスポンシブ対応するようになりました。 詳しくはこちらの記事をご確認ください。 2014/09/06追記ここまで——— これを、スタイルシートに記述するだけでレスポンシブ対応させるコードが紹介されています。 webdesignerwall.com様 スタイルシート側 本当は子テーマを作りそこで記述が推奨だと思いますが、記述した事を覚えていられるなら(使用テーマのアップデート時に覚えているなら)、使用テーマのstyle.cssにそのままペーストで良いです。 [css] .video-contain
最近、ワードプレスを利用したファンクラブやビジネスマッチングサイトの案件が続き、WordPressのプラグインでも色々な機能を実装できる事が把握出来たので、参考になったサイトのまとめです。 WP-Members関連 投稿や固定ページを会員限定にするプラグインです。特に会員同士の情報交換が必要無い会員向け告知サイトなどはこれで十分だと思います。 会員希望に関して、自動承認や確認後の承認、その際の返信メッセージや、会員登録の際の必須項目等が詳細に設定可能です。 アーティストのファンクラブのクレジットカード自動課金などは、外部オーソリとのカスタマイズが出来れば可能だと思われます。 hijiriworld Web様-WordPress 会員制サイトの作り方 WP-Members WP-Membersの導入方法を順を追って詳細に解説しています。 ほりログ。様-WordPressで会員制サイトが作れる
このページを最初にブックマークしてみませんか?
『studioDoghands |ホームページ制作』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く