WordPressにwp_headを入れてトップに空白ができてしまったときの対処 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ある案件で、ヘッダーにwp_head();を入れたら、ページのトップに28pxの隙間が空いてしまいました。今までにない現象で驚きましたが、どうやらバージョン3.1から導入された新機能の影響によるものらしいです。 現象 WordPressのテンプレートを作成する場合、プラグイン等を使うためにwp_headというタグを入れると思いますが、今回、このタグを入れたことによって、ログインした状態でページを見るとトップに28pxの隙間が空いてしまいました。（ちなみに、ここでいうトップとはホームページのトップのことで、管理画面のトップではありません。今回のバグを調査する中で管理画面のトップに空白が出るバグもあるということがわかったのですが、そのバグについては触れていません。） で、今回の現象ですが、cssでhtmlタグにマージンが指定されていて、ついでに!importantまでついていました。 html
【商用利用も可！】著作権保護期間が終了したパブリックドメインの画像サイトまとめ6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、編集部のナッツ（@nuts612）です。 先週末、編集部のメンバーと「ひたすら記事を書く」というライティング合宿をしてきました。 僕は、男性の巨根を「ウタマロ」と呼ぶ理由を調べてみたり、金を払っても遊べない吉原遊郭の事情を調べて、シコシコと個人ブログに記事を書いていたのですが、ブログ記事ってアイキャッチや挿絵などの画像探しに困ったりしますよね。 そこで今回は、僕が記事中に入れる春画探しに使ったサイトを含め、著作権保護期間が終了したパブリックドメインの画像をまとめているサイトをご紹介いたします。 【パブリックドメインとは】 知的財産権が発生していない、もしくは著作権の保護期間が終了した知的創造物のこと。日本の場合は、著作者の死後50年までが保護期間となっている。パブリックドメインの画像は改変、再配布、商用利用などが自由。 参考：公益社団法人著作権情報センター CRIC パブリック
競合サイトを丸裸に！SEO対策や検索順位などがわかるWeb分析ツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Pooleリーダーの鮫島です。 競合、丸裸にしてますか？（ライバル視しているサイトの、アクセス数やどこからトラフィックがあるのか、どういったキーワードを選定しどのくらいの検索数があるのかなど、SEO周りの対策を分析していますか？） 私は、主に提案資料を作成するときや、サイト設計をするときなどにします。 そういうときは、競合分析ツールを使うと効率的に情報を取得することができます。 というわけで、今回は私が普段使用している競合分析ツールを厳選して7ツールご紹介します。 無料で使える！ 競合サイトを分析できる7つのツール 1. Dockpit（ドックピット） https://www.valuesccg.com/dockpit/ 最近、認知度が高まりつつある競合分析ツールです。 機能の一部が無料で使えるのがかなり助かりますね。 無料登録で取得できる指標はざっと下記の通り。 自社サイトと競合サイトの
プログラミング初心者でも大丈夫！Processingでデジタルアートを作ろう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、店長です。 秋ですね。秋といえば芸術の秋。ということで、今回はProcessingを使ってアートなプログラミングをしてみたいと思います。 今回はものすごくシンプルなコードで作るので、プログラミングをしたことない人もこの機会にぜひチャレンジしてみてください！ Processingとは https://processing.org/ Processingとは、電子アートとビジュアルデザインのためのプログラミング言語とその総合開発環境を指します。Javaをベースとしていて、グラフィックを書くためのメソッドなどが豊富に用意されているため、比較的簡単にビジュアルプログラミングを楽しめます。 実際にProcessingを使ってこのような作品が作られています。 見てるとワクワクしますね！ 今回は初めてプログラムを触る人にもわかりやすいように、簡単に図形を動かすプログラムを書いてみました。 そ
Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
LIGデザイナーが厳選！使えるフリーのピクトグラム（ピクトグラフ）まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
（編集部注：2013年12月4日に公開された記事を再編集したものです。 ※無料で商用利用可のところばかりですが、中にはアイコン1個1個でライセンスが違うものやコピーライト記載が必要なものもあるので、ご使用の際には随時ご確認ください。） こんにちは。デザイナーの白浜です。 フラットデザインが流行りなこともあり？最近何かとピクトグラムアイコンを探す機会が増えました。（余裕があれば自作モノも増やしたいところですが！） でも、いつも同じところだとマンネリになりがち……。 他のデザイナーさんはみんなどこみてるんだろう？？とアンケートをとってみたところ……今まで知らなかったところが結構出てきました！ メモがてら、まとめてみたいと思います。 【こちらもおすすめ】 ☞ 質高すぎ！ベクター素材をフリーでダウンロードできるサイトまとめ LIGデザイナーが厳選！使えるフリーのピクトグラムまとめ Endless
Webデザインでも気にしたい。「みんなに伝わる」ユニバーサルデザイン入門 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのあゆみです。いきなりですが、 クライアント「いろいろな人が閲覧できるサイトに」 ええ、わかります。でも、これだけ多種多様な環境がある中で、全てに対応するのは無理な話で……。って経験、ありませんか？ ありますよね。 ぶっちゃけてしまうと、IE9以下はできるだけ対応ブラウザに入れたくないのですが、（Web制作に携わるみなさんの頷く声が聞こえる……）わたしがそう感じてしまうのは、「その人がアップデートしたら問題なく見られる」という、ユーザ側の対策案があるからです。 JSアニメーションやCSS3に影響があるかもしれませんが、もちろんサイト自体は見れるようにはなっていますし。（プログレッシブエンハンスメント対応での許可をいただいています） ただ、もっと別の環境で閲覧する人もいるわけです。 例えば、耳が遠かったり、色覚異常だったり、老眼だったり、近視だったり。 今回はそれらの
MacbookにiPhoneも！Apple社のかっこいい無料モックアップ素材10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。モックアップ素材って便利ですよね。 制作の素材としてはもちろん、デザインをはめてイメージを固めたり、プレゼン用資料に使えば短時間で質の高い資料を作ったりできちゃいます。 ということで今回は、そのままでもかっこいいアップル製品のモックアップ素材をまとめました。 Apple Responsive Screen MockUps Apple Responsive Screen MockUps 洗練された印象を受ける、リアルなモックアップです。レスポンシブデザインに最適なデバイスが揃っています。iMac、MacBook Pro、MacBook Air、iPad、iPhoneの4デバイスをダウンロードできます。 Free Apple devices mockup Free Apple devices mockup ※現在このページは表示できません。 こちらもリアルな
SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ こんにちは、じつかわです。ナイルという会社でSEOコンサルタントをやっています。 さて、いきなりですが、皆さんがSEOを勉強し始めたとき、一番最初に覚えたことはどんなことでしょうか。おそらく「titleに対策キーワードを入れる」ことではなかったでしょうか。 「title」「meta description（メタディスクリプション）」「h1」というあたりのHTMLタグは、SEOでは非常に重要な役割を果たします。 とくに「titleに対策キーワードが入っていなければ、SEOはほとんどできない」といっても過言ではないほど、検索エンジンの評価において主要HTMLタグにキーワードが含まれていることは重要です。 SEOに取り組んでいる人であれば「そんなの普通にやってるよ！」と言われ
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
photoshopで画像や文字を回転させる（画像の変形、回転ビュー機能） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※編集部注：この記事は、2011年に公開された記事を元に再構成しました。 Photoshopで画像や文字を回転させる方法 今回はこの画像を回転させます。テキストレイヤーも、やり方は同じです。 自由に回転させる場合 [編集]→[変形]→[回転]を選択。 画像の右下あたりにカーソルを合わせると矢印が出現するので、その状態でクリックしながら回転したい方向に画像を動かします。 角度を指定して回転させる場合 [編集]→[変形]→[回転]を選択。ここまでは先ほどと同じです。 オプションバーの角度マークの数字を指定すると、角度を指定して回転できます。 例えば「30」を入力すると、右に30度回転します。 90度、180度ならワンクリックで回転できる [編集]→[変形] から、以下のうち任意の角度を選択します。 180°回転 90°回転（時計回り） 90°回転（反時計回り） 回転ビューで見た目だけを回転させ
PhotoshopとIllustratorで画像をポリゴン風に加工する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの白浜です。 今回は人気のポリゴンスタイルの画像をPhotoshopとIllustratorで作成する方法をご紹介したいと思います。 参考サイト まず初めに今回の参考サイトから。 【Photoshop講座】人物をポリゴンスタイル風に加工する https://www.youtube.com/watch?v=Ao0XRwFaoE4 こちらの動画を参考にしました。 パペットワープのキャプチャを撮って塗り分けに使うというかなり斬新なやり方で、サクサクっとポリゴンスタイルを取り入れることができる素晴らしいチュートリアルです。 今回パペットワープは使っていませんが、アクションを使った塗り分けの手法を参考にさせていただきました。 それでは具体的な製作過程をご紹介したいと思います。 写真を元にIllustratorでポリゴンのラインを描く 1. 塗り分けの準備 まず初めに元になる
"Amazon"に学ぶ、4つの観点で考察するUXデザイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様こんにちは、シリコンバレーでUXデザイナーをしているライターのYUKIです。今回はあるひとつのサイトについてUXデザイナーとしての立場からレビューをしてみようと思います。 はじめに 私は友人らと作っていたスタートアップ会社を軌道に乗せるために数年前シリコンバレーにやって来て、現在は某米国の大企業でデザイナーとして働いています。公式な肩書きはヴィジュアル・デザイナーなのですが、実質的にはインタアクションやヴィジュアル両方に携わるユーザー・エクスペリエンス・デザイナーというところです。 LIGでは、かなり個人的な見解で、ユーザビリティに優れていると思ったサイトを説明もふまえながらレビューしたいと思います。 ただ、私が現在持っている知識は本格的にユーザビリティやデザインを学校で学んで得たものではなく、あくまでも実際の現場で働いて得たものばかりなので、「これが絶対に正しい」と思うのではなく、「
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
読書の秋に最適！本が好きな人に役立つ書籍関連サイト8選＋α | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆さま、こんにちは。メディア事業部のまゆです。だんだんと肌寒い日が多くなってきましたね。夏バテで毎年天に召されそうになっていた私にとっては、待ちわびた季節がやってきました。 さて、秋といえば読書の秋、食欲の秋、芸術の秋などといった有名な言葉がありますが、今回は本好きにはたまらない、本を読みたくなる便利な書籍関連サイト8選＋αをご紹介させていただきます。 本好きの人に役立つサイト8選 まずは、本を読んだり、借りたり、探したりなど、本好きの人にはとても役立つサイトを8つ紹介させていただきます。 1. カーリル https://calil.jp/ 「日本最大の図書館検蔵書検索サイト」として、全国の図書館からリアルタイムで貸出状況を確認することができるサイトです。 「読みたいリスト」というサービス（別途登録が必要）を使えば、図書館に行くときに読みたい本の貸出状況をまとめて確認することができます。
世界に1つだけのオリジナルアイテムを作ることができるお店6選※ワークショップあり | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。メディア事業部のあかねです。さて、みなさん、オリジナルのアイテムは好きですか？ 私は自分でつくった自分だけのオリジナルなアイテムが大好きで、週末にはよくワークショップに行ったりしています。 そこで今回は、オリジナルのアイテムを作ることができるお店を紹介していきたいと思います。 以下、ワークショップも豊富なカフェ、工房、レンタルスペースを紹介します。 Fabcafe http://fabcafe.com/tokyo/ 渋谷駅からちょっと離れたところにあるクリエイティブ感あふれるカフェ。ノマドカフェとしても利用している方も多く、発想力が刺激される場所でもあります。 3Dプリンターやレーザーカッターなど「一度は使ってみたかった」と思う機械がそろっており、予約すれば利用も可能です。「使ってみたいけど、使い方が…」という人のためにワークショップも行っています。 アクセス 東京都渋谷区道玄
プラグインまとめ20選 | 株式会社LIG
1月が終わってしまった・・・・・ どうも正月が恋しい段田です。 今回はWordPressサイトを構築している時に役に立つプラグインを紹介したいと思います。タイプ別で分けて紹介します。 目次 デバッグ系プラグイン 記事操作系プラグイン パーマリンク系プラグイン データ移行・操作系プラグイン その他 デバッグ系プラグイン WordPress構築時にWordPress内の情報を確認したい場合に利用すると便利なプラグインです。 Debug Bar 開発時のデバッグで利用するとても有名なプラグインです。パラメータ情報やエラー情報を確認できたりします。 また、このプラグインの拡張用プラグインもいくつかあるので、多機能です。 必須プラグインと言っていいでしょう。 Debug Bar Debug-Bar-Extender 先ほど紹介したDebug Barを拡張するプラグインになります。利用するときはDeb
Wordpressでクライアントのためにできる6のこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
WordPressはCMSとして大変多機能で便利な反面、普段パソコンを使い慣れないクライアントにとっては難易度が高め。 メニューや編集画面がごちゃごちゃしていると、記事をひとつ投稿するだけでも一苦労です。 誤動作がないように、出来るだけ使う機能だけを表示させたシンプルな状態にしてあげたいですね。 クライアント側の更新がスムーズに出来るように、納品前にこちらでやってあげたい6つのことをまとめました。 01 カスタムフィールドを設定する ご存知カスタムフィールド。 こちらはいろいろなサイトで詳しく解説されている上、使い方も様々なので、詳しい説明は省かせて頂きます。 下記リンクは、あまりにも有名な機能拡張プラグイン。私も使用時には必ず入れています。 Custom Field GUI Utility 02 記事の複製を出来るようにする WordPressの七不思議。デフォルトでは記事のコピー投稿が
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
