画像

今回はホームページやブログを作成するときに役に立つ、オシャレなロゴや背景画像を無料でダウンロードすることのできる、私もよくお世話になっているフリーサイトさんをご紹介させていただきます！ フリー素材サイト Sosa :: Ten by Twenty URL: https://tenbytwenty.com/?xxxx_posts=sosa 「Sosa」という様々なロゴを追加するフォントを配布しているサイトです。 ペンやPC・カメラなど多種多様なロゴがあり、サイトのボタン等の装飾を行う際に非常に役に立ちます。 ...

ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを施して、 下に各スライドの画像が表示される"サムネイル付き"のスライドショーにする方法について解説します！ ▼実装例（このようなデザインのスライドショーが設置できます） 既にjQueryによるスライドショーが設置できている事が前提となりますので、初めてスライドショーを設置する方は、以下の記事を参考にスライドショーを設置しておいてください。 htmlへの記述 すでに「bxslider」のスライドショーが設置出来てる方はh ...

ホームページの背景に画像を設置することにより見栄えが良くなりますが、場合によっては 画像の色合いが強すぎて閲覧者にとって目障りになってしまうこともあります。 そこで今回は、無料画像編集ソフトの「GIMP2」を用いて、画像に斜線を入れることによってオシャレに 色合いを抑える方法について解説します！ 斜線適用のためのレイヤーを作成 今回の解説では以下の、横：700px 縦:350px の画像を使用します。 白地のキャンパスを作成 まずGIMP2を開き、「新しい画像」から白地のキャンパスを作成してください。この ...

画像合成などでよく用いられる、画像の特定の箇所を透明にする透過処理を画像編集ソフト「GIMP2」を用いて簡単に行う方法について紹介します！ ちなみに透過処理するとどのようになるかというと、下の例をご覧ください。 ▼ 透過処理前 ▼ 透過処理後 といった感じに、透過処理を行うと背景色が透明になります。これにより他の画像と合成することで 以下のような画像を作ることも可能になります。 ▼ 透過処理を施した画像と他の背景画像を合成した例 この透過処理の技術は動画制作で画像を用いる際、邪魔な背景色を消して特定の物体 ...

画像をクリックすると、 別ページに飛ぶことなくその場で拡大表示してくれるjQueryの有名プラグイン「LightBox」を ホームページに実装する方法について、簡単に解説します！ ▼ 実装例（画像をクリックすると拡大します） ①「LiteBox Plus+」プラグインのダウンロード 「LightBox Plus+」のダウンロードサイトへ行き、下の方にスクロールすると見える Downloadボタンを押して「lightbox_sample.zip」という.zipファイルをダウンロードしてください。 ダウンロー ...

「画像を送信したいけど容量が重すぎて時間がかかる！」「ホームページにスライドショー機能を付けたはいいけど、ページの読み込みが遅くなった」 なんてお悩みを抱えた方々に今回、画質はほとんど変わらないまま、画像の容量だけを削減してくれるおススメのサイトをご紹介します！ 画像の重さはマイナスにしかならない "画像"データの容量というのは、"動画"データに比べると個々では大したことの無いデータ量ですが、 油断してホームページやブログなどにバンバン貼りまくっていると、気づいたら思いもよらぬ容量になってしまい、 ページ ...

自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい！ という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します！ ちなみに導入に成功すると↓このようなスライドショーが実装されます(GoogleChrome, IE11, IOS動作確認) ▼こちらのスライドショーもおすすめ！ スライドショーの簡単な設置方法 まずは「bxSlilder」さんのサイトで配布されている JQueryのプラグインファイルをダウンロードしてください（画像の赤枠部分からダウンロード ...