Illustratorで画像を埋め込む方法！埋め込み配置とリンク配置の違い | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナーのカイトです！ 僕はLIGに入社する前、アルバイトでグラフィックデザインを少しだけ作ったことがあるのですが、そのときに入稿データの作成で悩んだことがあります。 印刷会社のサイトからIllustratorデータ（以下Aiデータとします）を入稿しようと思ったところ、注意書きで「リンク切れにご注意ください」とサイトに書かれており、リンク切れのリの字も知らず頭を抱えたことです。 チラシやポスターのように写真の入ったデザインを印刷依頼する場合、画像の配置方法を「埋め込み配置」と「リンク配置」のどちらかで作成しなければなりません。 これらをそれぞれ正しい方法で配置をしないと印刷の際に「リンク切れ」という不具合が発生し、正しく写真が印刷されません。 今回はグラフィックデザインの入稿前に確認しておきたい画像の「埋め込み配置」と「リンク配置」の違いと方法について説明しようと思います。
Vue 3の新しい機能と変更点・全11件
さてさて、前回「Bootstrap v5がどうなるのか調査してみた」という記事を公開しましたが、実は今後のリリースでもうひとつ気になるものがあります。 それは、JavaScript開発の強力な味方、 「Vue.js」の新バージョン（v3） です。 Vue 3については、以前からたびたび情報が出てましたがついにアルファ版が利用できるようになりました。（2020.3.26現在） そこで❗ 今回は、近い将来リリースされるであろう Vue 3の使い方をまとめてみることにしました。 ぜひ参考にしていただけると嬉しいです😊✨ 【追記：2020.09.20】2020年9月18日に正式リリースされ、変更点があったので、記事を加筆・修正しました。 【追記：2020.10.30】「refの使い方が変わった」を追加しました。 「ついに来ました Vue 3 🎉」 Vueインスタンスの作り方が変わった これまで
ワイ「何でそんな小っさいコンポーネント作ってるん？ｗ」 - Qiita
とあるWeb制作会社にて ワイ「ハスケル子ちゃん」 ハスケル子「はい」 ワイ「今日ワイは何の仕事するんやったっけ？」 ハスケル子「確か今日からは」 ハスケル子「Nuxt.jsとVuetifyを使って管理画面を作る案件が始まるんじゃなかったでしたっけ？」 ワイ「おお、せやった」 ワイ「とある管理画面のフロントエンド開発をするんやったな」 ハスケル子「もうFigmaのデザイン見ましたか？」 ワイ「ヒグマ？」 ワイ「ヒグマなんて、写真でしか見たことないけど」 ハスケル子「Figmaです」 ハスケル子「ブラウザ上でも使えるデザインツールですよ」 ワイ「ああ、そっちな」 ワイ「Higumaのほうね」 ハスケル子「じゃあ、さっそくデザイン見ながら」 ハスケル子「コーディングしていきましょう」 ワイ「おお、頑張っていこか！」 デザインを見てみる ハスケル子「↑このキャンセルボタンとOKボタン」 ハスケル
Windowsでconfig.sysのFILESを変更する
config.sysのFILESを変更する方法を紹介します。 １．問題点 PCで色々なプログラムを起動しすぎたせいか、「16ビットプログラムを使いすぎです。CONFIG.SYSのFILESを変更してください」 という風なダイアログが表示されてしまいました（キャプチャ取り損ねたので正式なメッセージは失念）。 「CONFIG.SYS」というのは、ファイル名から推測するにWindowsの設定ファイルと思われますが、フォルダを探してもファイルがみつかりません。 ということで、config.sysのFILESを変更する方法を紹介します。 ２．config.sysの配置場所 config.sysはCドライブ直下に配置されていると思います。 ただ、エクスプローラーでCドライブを表示しても、CONFIG.SYSが表示されていないと思います。 （クリックで拡大） エクスプローラーでconfig.sysを表示
フォトショップで写真の色を置き換える７つの定番テクニックまとめ
フォトショップでの写真の色の置き換え、変更は特に要望の多い重要なテクニックのひとつです。 しかし、用途に応じてツールを使い分け、色の置き換えを行っているひとは、どれだけいるでしょう。 今回は、どんな写真にも応用できる、色の置き換え・変換のお手軽Photoshopテクニックを、実践のデザインサンプル例と一緒にまとめてご紹介します。 これらの方法を試してみることで、どんなデザインでもお手軽に色の置き換えを行うことができるようになります。 コンテンツ目次 色を変換・調整する方法 特定の色だけを置き換える方法 「モデルが着用しているドレスの色を変更したい。」 「車の色を背景に合わせて変更したい。」 「白色のドレスの色を変更したい。」 「背景の壁の色を変更したい。」 「ブランドカラーに合わせてソファーの色を変更したい。」 さいごに、 どんな写真にも応用できる、色の置き換え・変換のお手軽Photosh
Google Chromeの背景（テーマ）がグレーに変わったときの対処
Google Chromeの背景（テーマ）がグレーに変わったときの対処方法を紹介します。 問題が発生した環境は、Windows7+Chrome 53.0.2785.116mです。 １．問題点 いつものようにGoogle Chromeを起動すると背景（テーマ）がグレーに変わっていました。 ということで、背景（テーマ）を元に戻す方法を紹介します。 ２．背景（テーマ）を元に戻す 背景（テーマ）を元に戻すには、アドレスバーに「chrome://flags」を入力。 試験運用のページが表示されます。 スクロールして、「ブラウザのトップ chrome 部分でマテリアル デザインを使用する」の項目を「マテリアルを使用しない」を選択。 ページ一番下にある「再起動」をクリック。 これで元の背景に戻ります。
WordPressのサイトアドレスを別ドメインにする方法
WordPressのサイトアドレスを別ドメインにする方法を紹介します。 １．はじめに さくらインターネットで運用している既存のウェブサイトを、WordPressでリニューアルすることにしました。 で、既存のウェブサイトとは別のディレクトリにWordPressをインストールし、そこでウェブサイトを構築して、さくらインターネットの「ドメイン設定」の「指定のフォルダ」を変更することで元のURLをWordPressのサイトに振り替える作戦にしました。 さくらインターネットの「ドメイン設定」の「指定のフォルダ」 ウェブサイトのURLと新旧ディレクトリは次のとおりです。 ウェブサイトのURL：http://hoghoge.com ウェブサイトのディレクトリ：/home/hoghoge/www/info WordPressのURL：http://hogehoge.sakura.ne.jp/wordpre
PowerPointやExcelの図形を別の図形に変更する方法
PowerPointやExcelの図形を別の図形に変更する方法を紹介します。 １．問題点 PowerPointやExcelで図形オブジェクトを置き、その中にテキストを書くことがあります。 が、途中でこの図形を変更したいこともあると思います。 図形を変更するには下記のような手順で変更しています。 図形の中のテキストをコピー。 図形を削除。 新しい図形を配置。 図形にテキストをペースト。 実際にはこれだけではなく、テキストの配置位置やフォントサイズも修正する必要があります。 図形の形を直接変更できれば手間が省ける気がするのですが、方法が分かりません。 ということで、PowerPointやExcelで図形を変更する方法を紹介します。 ここではExcelを利用していますが、PowerPointでも同じ操作で行えます。 ２．図形を変更する 図形を変更するには、まずオブジェクトを選択。 「描画ツール」
Excelで数値を百万単位で表示させる方法
Excelで数値を百万単位で表示させる方法を紹介します。 １．問題点 会社によっては金額を百万円単位で表示するケースがあると思います。 で、たとえば「12,300,000(1千2百30万)」をExcelのセルで「12.3」と表示させたいのですが、方法が分かりません。 ２．数値を百万単位で表示させる 数値を百万単位で表示させるには、表示を変更したいセルを右クリックして「セルの書式設定」を選択。 「表示形式」タブの「ユーザー定義」をクリック。 「種類」のテキストボックスに「0.0,,」を入力して「OK」をクリック。 これで100万単位の「12.3」と表示されます。 ３．ユーザー定義の説明 設定した「0.0,,」の意味ですが、まずカンマ1つは数値を1000で割って表示することを意味します。 ここではカンマを2つ並べているので1000000（百万）で割って表示します。 そして「.0」は小数第一位を
フォトショップの作業が楽になる、覚えておきたい小技テクニック29選
2018年8月5日に公開された記事を、サムネイル画像など再編集、アップデートしています。 フォトショップの作業が速くなる秘訣は、ずばりショートカットキーによる時短テクニック。 その理由は、「もっと早く知りたかった」と思うほど、ラクラクな手軽さで、面倒な作業をすぐに片付けてしまうから。 「レイヤーの重なり順を変えたい」 「細かい部分の作業を行いながら、同時に全体表示で確認したい」 「不要なレイヤーを非表示にしたい」 そんな普段からよく行う作業も、効率アップさせる時短テクニック18個が揃いました。 フォトショップがもっとうまくなりたいと思っている人こそ、まずは試してみませんか。
何コレすごい！Photoshopの勉強になる！調整レイヤーがどのように機能しているかがまるっと分かる -Live_Curves
Photoshop自体も便利ですごいソフトウェアですが、今回紹介する仕組みというかPSDを作った人もすごいです！ 一見「ふーん」と思いましたが、実際にやってみると「おおおおお！」と驚きました。 やり方は簡単なので、ぜひお試しください。 This PSD Reveals What Every Photoshop Adjustment Layer Does via Curves 「Live_Curves」はPhotoshopの調整レイヤーがあなたの写真にどのように機能しているかが分かる新しい方法で、特別なPSDファイルを使用することで、ドキュメントのカーブをリアルタイムに表示します。
Google Analyticsの「カスタムディメンション」の機能と設定方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのエリカです。 突然ですが、この記事のURLを見ていただけますか？ https://liginc.co.jp/187767 リニューアル前までは、https://liginc.co.jp/カテゴリー/記事IDのような形だったのですが、リニューアルを機にURLがシンプルになりました。 URLが長かった頃は、記事公開後にカテゴリーを変更すると記事のURLが変わり、LIGブログの指標であるSNSの拡散数「ソーシャルカウント」が変わってしまうという問題が起きていました。それを回避すべく、現在のシンプルなURLにしたのですが、今度はアクセス解析時に、記事URLから「それがどのカテゴリーの記事か」を判別ができなくなりました。 ですが、GoogleAnalyticsには「カスタムディメンション」という機能があり、その機能を使えば、URLとは別にカテゴリーなど任意の情報を計測できる
Premiere Pro CCのLumetriカラーで動画素材をさくさくカラーグレーディング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのあゆみです。 ありがたいことに、日々いろいろなWeb制作のお仕事の相談をいただいているのですが、傾向としては「メディアサイト」「コーポレートサイト（採用サイト含む）」が多いかな〜という印象です。（実際、現在わたしが担当しているのって採用サイトばかりですし） 一概には言えませんが、コーポレートサイトあるあるとして「会社・社員のビジュアルをメインにもってくる」が、思い当たる方多いんじゃないでしょうか。 下記の記事でまとまっているようなサイトも、ここ1〜2年でたくさん見かけるようになりました。 技術の進歩を感じます……。もはやCSSだけで背景実装できるとかもう……。 もちろん、流行りにのってとりあえずメインビジュアルは動画でしょ！とするのではなく、会社としてのブランディングや伝えたいメッセージなどによって構成するべきです。そして、雰囲気やフローを伝えるのに動画はとても効
Chromeの右上にあるボタンを消す方法＆タイル形式のブックマークを無効化する方法
「Google Chrome」のバージョンはすでに42になっており、さまざまなアップデートや変更が行われていますが、バージョンアップされたものの中には、バージョンアップ前のものを引き続き使用したいと思うものもあります。その中で「Chromeの右上に置かれたアバターメニュー」や「タイル形式のブックマーク」はアップデート前のものに戻すことが可能となっています。 Chrome ブラウザ https://www.google.com/chrome/ ◆ブラウザ右上にあるアバターメニューを消す方法 Chromeの右上にある1番左側のボタンは「アバターメニュー」と呼ばれるもので、Chromeへのログイン・ユーザの切り替え・シークレットモードへの変更ができるものです。 人によっては最小化ボタンをクリックしようと思ってアバターメニューを間違ってクリックしてしまったり、Chromeに全然ログインしなかったり
photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。 | バニデザノート
photoshopの「レイヤーからの画像アセット」機能。 前から気になっていたのですが、やっと試せました。 これは速いですねー。photoshop CC 2014.2.2リリースのバージョンでの 使い方をすこし解説します。 今までは、psdカンプを作成したあと、「スライス」ツールを使って スライス枠を作り、書き出し用のファイル名を別ウィンドウで書き込み、 「Web用に保存」ウィンドウを開き、出力設定を行い、 さらに背景などを切り出し・・と、htmlでコーディングするためのパーツを書き出すためにはたくさんの手順が必要でした。 「レイヤーからの画像アセット」機能でも、ウェブ用のパーツを書き出すのですが 上記手順に比べるとすごく少ないステップでパーツが書き出せるようになります。
WordPressのパーマリンク設定を変更して、SEOや日本語URLの対策をしよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディア事業部のエリーです。 みなさん、「パーマリンク」というものをご存知ですか？ 生きていく上でおおよそ必要のなさそうな単語ですが、WordPressでブログを書いている人やこれからブログを始めようとしている人には、とても重要なものです。 またブログに限らず、Webサイトの根幹に関わる要素の1つとして、初期段階で構成を決定した方が良いと言われています。 そこで今回は、一体どんなパーマリンクが理想的なのか、なぜ重要なのかをWordPressに最適化した超高速サーバー「Z.com for WordPress」さんにお聞きしました。 ▼目次 パーマリンクってなに？ 理想的なパーマリンクは？ 上記パーマリンクが理想的な4つの理由 なんでシンプルなURL構造が良いの？ 日本語URLはダメなの？ パーマリンクとSEOの関係は？ 解析しやすいパーマリンクって？ パーマリンクの設定の仕方 1
Googleカレンダーのデザインをカスタマイズして埋め込む方法 | 東京上野のWeb制作会社LIG
こんにちは、デザイナーのサリーです。 LIGが運営するシェアオフィス「いいオフィス」では連日イベントが行われており、お客様からイベントに関するお問い合わせも多く頂くようになりました。 そこで、いいオフィスサイトにイベントカレンダーを表示しよう！ということに。 しかし、Googleカレンダーのデザインが、サイトのデザインに合わなかったんです(´･_･`) Googleカレンダーは2011年に新しいデザインになりましたが、埋め込むときは青い枠のついた旧デザインしか選べません。あまり時間もかけられないし、難しいことはせずCSSだけ上書きしたい……。 何かいい方法はないかググってみたところ、「gcalendar-wrapper.php」というスクリプトを見つけたので使ってみたら、まさに求めていた挙動を実現できました！ 今回は、gcalendar-wrapper.phpの使い方についてご紹介します。
チェックボックスやラジオボタンを大きくする方法
チェックボックスやラジオボタンを大きくする方法を紹介します。 １．はじめに デフォルトのチェックボックスとラジオボタンのサイズは小さいです。 デフォルトのチェックボックスとラジオボタン で、jQueryなどで独自デザインに変更して大きく見せているサイトは多いと思いますが、CSSで簡単に大きくできないか調べてみました。 ２．CSSでチェックボックスやラジオボタンを大きくする まずサンプルのHTMLを示します。 <input type="checkbox" id="foo" name="foo" /><label for="foo">チェックボックス</label> <input type="radio" id="bar_1" name="bar" /><label for="bar_1">ラジオボタン1</label> <input type="radio" id="bar_2" name=
CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス
2021年12月6日 CSS フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ ↑私が10年以上利用している会計ソフト！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトではJavaScriptにより色の移り変わりを実装しているようですが、CSS3のキーフレームアニメーションだけでも表現できます！ CSS3 キーフレームアニメーションの基本 まずは要素を徐々に変化させるアニメーションについて覚えていきましょう！CSS3の animation プロパティでは、キーフレームを設定して細かい動き
Chrome拡張インストール後の格納先フォルダと拡張を修正する方法
Chrome拡張インストール後の格納先フォルダと拡張を修正する方法を紹介します。 １．はじめに これまでのChrome拡張の開発に関するエントリーでは新規開発の方法を紹介しましたが、Chromeの公式サイトからインストールした拡張を修正したいケースについて紹介します。 ２．Chrome拡張の格納先フォルダを探す まず、拡張一覧画面でインストールした拡張のIDを調べます。 「ツール」→「拡張機能」をクリック。 修正したい拡張のIDとバージョンを確認。「1」の部分がバージョンです。 次に、拡張本体のディレクトリを探します。 Windowsの場合、拡張は下記のフォルダにインストールされます。 C:\Users\ユーザー名\AppData\Local\Google\Chrome\User Data\Default\Extensions\拡張ID\バージョン番号 今回の例では、 C:\Users\ユ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
