ブログ

CSSだけでInstagram風のフィルターが使えるcssgramが便利

  • 2016-06-25  最終更新日:2016-06-25

インスタグラムはやってますね、私も1年ほど前に登録したもののあまり使っておりません。。。さてそんなインスタグラムの写真フィルターのようなライブラリがありましたのでご紹介します。

簡単に言えば、CSSgramはCSSで画像をInstagramのようなフィルターっぽく編集できるライブラリです。

ここでやっているのは、基本的に画像にグラデーションオーバーレイ、フィルタやブレンド機能を使って似せているような機能です。

簡単にInstagram風のフィルターが使うことができます。

対応ブラウザはIE(インターネットエクスプローラー)は対象外となっております。Google Chrome、Firefox、Opera、Safariが対応しているようです、edgeは対応しているのかな、cssの問題なのでおそらく対応していると思われますが。。

こちらは公式サイトです。⇒CSSgram test sheet

もっと見る


特定のサイトにアクセスできなくなった対処法

  • 2016-06-19  最終更新日:2016-06-19

なぜか特定のサイトだけにアクセスができないということがありませんか?

私はありました。すごく重用なサイトでもなかったので特に気にしていなかったのですが、どうもこのパソコンだけがアクセスできないということがわかったとき、原因を調べてみました。

原因はいろいろあると思いますが今回はウィルスソフトでした。ESET NOD32というソフトを長年使ってきたのですが今までこんなことなかったのですが、Macだとうまくいかないようですのでその対処法をご紹介します。

今回の設定はMac版に限ります。

もっと見る


顧客目線と自己目線

  • 2016-06-12  最終更新日:2016-06-12

さて、今回は顧客目線について考察してみたいと思います。

自分の商品を売るために一生懸命相手にアピールしますよね。ただここで自分の考えを相手にたたみかけるように話してもおそらく伝わりません。

この商品ってこんなに良いのですよ、すごいんですよ、こんなことも出来るんですよ。etc…

普通引いちゃいますよね。あったばかりの人にガンガン押されても。。。これってあまり顧客のことを考えてないからだと思うのです。まずは自分が顧客だったらと思うことが大事なのです。

もっと見る


WindowsのIMEの入力切り替えをMac風な「変換」と「無変換」キーに割り当てる方法

  • 2016-06-05  最終更新日:2016-06-05

WindowsマシンとMacマシンを使っていて入力変換に悩まされます。私はだいたいMac風変換で打っているのでWindowsの変換方式だとイライラします。

それはひとつのキーで切り替えている点です。これって結構な確率で間違えてしまいます。日本語入力のつもりで打っていたら英数になっていたり、英数のつもりで打っていたら日本語入力だったりと。。まあ、それは間違えますよね。あー、こっちじゃないー!!と

だけどMac風の入力変換だとそれがかなり減ります。スペースキーの両隣にある無変換と変換キーに割り当てると何度そのキーを押しても変わることがないので間違えることはありません。

例えば無変換キーを何度押しても英数になりますし、変換キーを何度押しても日本語入力のままです。

そこで今回は主要なIMEのキーの割り当て方をご紹介いたします。OSのバージョンはWindows7は割と紹介している記事が多かったのでWindows10でやってみたいと思います。

もっと見る


Feedlyのインポートエクスポートする方法

  • 2016-05-28  最終更新日:2016-05-28

さて、先日購入したLogicool ロジクール ワイヤレスマウス MX Master Bluetoothマウスでトラブルがありました。クリックできなくなったんですね。あれ?なんで?早速壊れたか?と思ってトラックパッドのクリックも効かない!アレアレ?どういうこと?これはまずい、全く作業できないぞと思ったんです。

再起動したりしても治らない。。。そこでハッと気がつきました。 ひょっとしてもう一台のBluetoothマウスが感知しているんじゃないかと、案の定マジックマウスが鞄の中でONになっていたんですね。結構離れていたのにこっちを感知するんだと思った今日この頃です。余談でした。こちらをオフにしたら普通に使えるようになりました。

もっと見る


CSShakeの使い方と紹介

  • 2016-05-21  最終更新日:2016-05-22

今回はブルブル震えて注目してしまう動きCSShakeをご紹介します。

jQueryのプラグイン jRumble とかでもありますが今回は簡単に導入できて実装できるCSSでのご紹介です。

CSSShake公式サイトからダウンロードして使います。こちらの公式サイトにも使い方は載っておりますが、簡単に説明します。

インストールはnpmかbowerよりできます。公式サイトからダウンロードしても良いです。

もっと見る


Google Apps for Workのススメ

  • 2016-05-14  最終更新日:2016-05-14

さて今回はGoogleAppsについてです。Googleアカウントは持っている方も多いですし、Gmailも利用されている方も多いと思います。私も利用している一人です。Gmailも使い始めて今年(2016年)で10年になります。

もっと見る


HOVER.CSSの使い方

  • 2016-05-07  最終更新日:2016-05-07

今回は手軽にhoverアニメーションできるhover.cssのご紹介です。hoverしたら動きが実装できます。

以前 CSS3でのアニメーションライブラリanimate.cssの使い方のご紹介しましたが、今回はhoverに特化していますのでcssを読み込んでクラスを付加するだけでhoverするときに限りますが簡単にアニメーション実装できます。

Hover.css公式サイトにもサンプルがあります。デモページの内容はこちらの公式サイトと同じです。

もっと見る


ワードプレスをバージョンアップしてCSSが崩れる現象について

  • 2016-04-30  最終更新日:2016-04-30

今回はワードプレスについてです。

ワードプレスでアップデートしたらなぜかスタイルが崩れたということはありませんでしたでしょうか?

いろいろと原因があると思いますが今回はfunctions.phpにwp_enqueue_styleで読み込ませている場合に限りますがその対象法をご案内します。

もっと見る


Bootstrap3のアコーディオンメニューを縦から横列に表示

  • 2016-04-23  最終更新日:2016-04-23

CSSのフレームワークを使って制作されている方、特に手っ取り早く良い感じのデザインが出来るBootstrapを使っている方は多いと思います。私もその一人です。

Bootstrap1.4の段階から便利に使わせてもらっております。使いやすくてカスタマイズしやすいです。当初はLESSだったのですが最近になってSASSになりとても便利になりましたね。

さて本題です。Bootstrap3のCollapse collapse.jsの項目にアコーディオンメニューのサンプルがあります。このサンプルはひとまとまりにしてありますが、どうにかカラムにいれて列にしたいと思って調べました。中々無いんですね。

海外のFAQで同じような質問をしている方がいらしたので同じようにしたらうまくいきましたのでその設定を載せておきます。

もっと見る


  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
HomebrewでMySQL8をインストールした時の問題点

さて、今回はお手軽にMySQL8をインストールしたときの問題点などをご紹介します。MacOS用パッケージマネージャーHomebrewを使ってインストール、そしてphpからアクセスしたときの問題点...

13 Feb 2019

アイキャッチ
ローカル環境を外部アクセス可能にする方法

さて、今回はお手軽テストサーバ構築のお助けngrok (エングロック)をご紹介します。どういうサービスかといいますと自分のローカル環境を外部アクセスで確認できるサービスになります。 本来は自分...

04 Feb 2019

アイキャッチ
複数のwebサービスを一元管理するアプリStationのご紹介

さて今回はwebサービスの一元管理アプリのご紹介です。よく使うサービスをまとめて管理できるアプリです。 以前Franzというアプリをご紹介しましたが(結局Franzは不安定状態になってそれから...

22 Jan 2019

アイキャッチ
島根県安来市の清水寺の展望台は絶景スポット

先日清水寺にお参りに行って参りましたが春にはとても良いスポットがありましたのでご紹介します。山の上になるのですが見渡せる場所はどちらかといえば弓ヶ浜半島、米子市の方面を一望できます。王子製紙の場...

21 Jan 2019

アイキャッチ
macOS Mojaveで特定のアプリが動作しなくなったときの設定

今回はMacトラブルについてです。今まで使っていた人はおそらくこの設定は知っている人が多いかもしれませんが、初めてMacを使った人はこれで悩んでいる人が多いかもしれません。今回はロジクールマウス...

09 Jan 2019

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

ブログ jekyll WordPress
フッターイメージ