WEBデザインみたいなことをしていて、色見本サイトはものすごく便利です。 良いアイデアが思いつかないときでも、色を見ながら考えていたら思いついたり、つかなかったり。 ということで、WEBデザインなどに便利な色見本サイトのまとめです。 色見本と配色サイト 色見本と配色サイト – color-sample.com 赤、橙、黄、緑、青、紫、黒、白色系のカラーサンプルを手軽に見ることができます。その他にも、鮮度、明度、彩度、日本の伝統色からもサンプルを見ることができます。 Adobe Color CC カラーホイール | カラースキーム – Adobe Color CC どこででもカラーテーマ、パレット、スキーマを作成できます。デザインはCreative Cloudアプリケーション＆ソフトウェア間で同期できます。 Paletton Paletton – The Color Scheme Desig

アクセスログの取得 まずは、サーバーからアクセスログを取得します。 僕は、今エックスサーバーしか利用していないので、その方法を書きます。 エックスサーバーの場合はサーバーパネルからログインしてパネルを開きます。 そして、「統計」項目の「ログファイル」をクリックします。 あとはドメインを選択して、 ダウンロードするだけです。 エックスサーバーデフォルトの場合は「nelog.jp.access_log」というファイルがダウンロードされます。 このアクセスログには、すべてのファイルへのアクセスに対する「1週間のログ」が書き込まれています。 すべてのファイルへのログなので、当サイトの場合だと2GB以上あり、600万行以上のテキストになっていました。 アクセスログの解析方法 これら膨大なアクセスログから、一つ一つ怪しいファイルを見ていくのは不可能なので、簡単な解析用コードをRubyで書きました。 W

205.234.xxx.xxx - - [18/Mar/2015:01:29:33 +0900] "POST /xmlrpc.php HTTP/1.0" 200 370 "-" "Mozilla/5.0 (compatible; Googlebot/2.1; http://www.google.com/bot.html)" 205.234.xxx.xxx - - [18/Mar/2015:01:29:50 +0900] "POST /xmlrpc.php HTTP/1.0" 200 370 "-" "Mozilla/4.0 (compatible: MSIE 7.0; Windows NT 6.0)" 205.234.xxx.xxx - - [18/Mar/2015:01:29:55 +0900] "POST /xmlrpc.php HTTP/1.0" 200 370 "-" "Mozil

2017年11月14日、MozillaがFirefox57（Firefox Quantum）をリリースしたことにより、通常の方法ではFirefox上でレガシーアドオンが使えなくなってしまいました。 ですので、以下に書かれているアドオンは、現在使えないものも含まれています。 何とかして、レガシーアドオンを利用するには、個人的にはPaleMoonを利用した方法がお勧めです。 Firefox Quantumの代替としてのPale Moonは結構いい感じ 僕は、Firefoxをバージョン2くらいから利用しています。 で、3.6になるくらいには、かなりの数のアドオンをインストールしていました。 で、現在Firefoxは、バージョン33.1になっています。その間、いろいろなアドオンを試しては消し、良いアドオンが出てきたら入れ替えたりしてきました。こんな場末の個人のFirefox内でも、アドオンの生存競

WordPressテーマの背景に動画を利用する方法の紹介です。 編集する前は、「結構大変なんだろうな」と思っていたのですが、動画用のタグを記入して、そのタグに対するスタイルシートを書くだけの簡単な編集で利用できます。 以下のような動画背景が、ちょっとした編集で実装することができます。 photo by Laineema カスタマイズの主な手順 テーマの背景を動画にするには、以下の手順が必要です。 mp4、webm動画を準備する HTML要素とスタイルの記入 やることは至って単純です。 動画を準備する まず、動画は.mp4と.webmファイルを用意する必要があります。 webmは、GoogleがHTML5標準をねらう、オープンでロイヤリティフリーな動画コンテナフォーマットです。Chrome、Firefox、Operaで標準対応をしています。今後Googleは、YouTube動画をすべてWeb

先日、自作のWPテーマをWP公式ディレクトリに登録出来ればと、登録方法を調べてみました。 公式ディレクトリとは、Wordpress管理画面などからテーマなどを検索したら、ヒットするテーマが保存されている場所です。 公式ディレクトリに登録されれば、「このテーマは危険なコードなども含まれておらず安全です。」というお墨付をレビュアーから得て登録されるので、ある程度安全性が保証されます。 登録しようと思ったのは、「Simplicityも公式ディレクトリに登録されていればいいのに」という声をいくつか見かけたもので｡そこで、今更ながら登録方法調べてみました。 それで調べてみて思いのほか「やってはいけないこと」が多かったので紹介です。 photo by Kenn Wilson

主な手順 自作のテーマに更新通知機能＆アップデート機能をつける主な手順は以下の3手順です。 ライブラリのダウンロードと設置 更新情報となるJSONファイルを作成 functions.phpにコードを記述 「更新通知機能を実装」というだけで、かなり難しいものを想像していたのですが、ライブラリがとても扱いやすいものになっています。 ですので、Wordpressコードの編集に慣れている方ならば、10分ほどでできるほど簡単な方法です。 ライブラリのダウンロードと設置 まずは、更新通知機能のライブラリをダウンロードします。 ダウンロードは、Automatic Updates For Private And Commercial Themesの「Client library」リンクから行ってください。 ダウンロードすると「theme-updates.zip」というファイルになります。 解凍すると中には

上の記事は、Google+のシェア数をJavascriptで取得する方法を参考に、「Yahoo! Pipes（サービス終了）」というサービスを経由することによって、AjaxでページのHTMLをXMLで取得し、正規表現でカウント数を抽出しています。 直接、PocketにjQueryのAjax経由で取得しようとすると、クロスドメイン制約（Access-Control-Allow-Origin）によってエラーが発生するのを、Yahoo! Pipesを経由（パイプ）することで防いでいます。 今回のfeedlyの購読者数も同様に取得します。で、その方法の紹介です。 追記：Yahoo! Pipes経由での取得は、feedly側で拒否られたかもしれません。ですので、オーソドックスにPHPで取得した方が良いかもしれません。

主な手順 主な作成手順は、こんな感じです。 CSSをstyle.cssなどに貼り付ける CSSのclassを用いて文章を書く CSSさえ貼り付けてしまえば、あとは「吹き出しクラスを適用したpタグ」などで、書き込むだけです。それほど手間もかからないと思います。 作成方法 作成方法は以下です。 style.cssに貼り付ける 以下のCSSをstyle.cssにコピペします。 /******************************* * 左からの吹き出し ********************************/ .left_balloon { position: relative; background: #fff; border: 1px solid #777; margin: 10px; padding: 10px; border-radius: 15px; margin-

WordPress既存テーマをカスタマイズするなら子テーマを使うべきと思います。 これは、Wordpress codexにある子テーマの項目でも推奨されています。 ただ、Wordpressを使い始めたばかりの時に「子テーマ」「親テーマ」と言われても、「何だそれ？」とか、「そもそもテーマ自体にカスタマイズしたらなんでだめなの？」とも思うかもしれません。 僕も、テーマ配布サイトでカスタマイズ用に子テーマを配布してはいるものの、そういったことについては詳しく説明していませんでした。 なので、一度それについて書いておこうと、今回はWordpressの子テーマについて書きたいと思います。 photo by Alexander Gounder 子テーマとは そもそも子テーマとは、既存のWordpressテーマのカスタマイズ専用のテーマです。 既存のWordpressテーマは、「親テーマ」とも呼ばれ、テ

やっぱりさすがプロです。良いものを作っていただきました。 ただ、やはり外注するとなると、依頼文を考えて書き込んだり、もちろんお金がかかります。 けれど、世の中には「ちょっとロゴを作りたいけど忙しくて依頼する暇がない」という方や、「簡単なものでいいので無料で作りたい」なんて方もおられると思います。 そんな方に、良さそうなサービス「Design Rails」を使ってみたので紹介です。 Design Railsとは Design Railsは、ロゴテキスト入力と、クリックでロゴが作れてしまうロゴジェネレーターです。 こんなロゴを作成できます。 自分の好みを、ポチポチとマウス選択するだけで、わずか数分でロゴが作れてしまいます。おそらくDesign Railsというのは、Ruby on Railsみたいなもんで、レールの上に乗って行くだけで、デザインできてしまうという意味ではないかと思います。 今回

photo by Alexander Harbich KATHAMOとは KATHAMOは、モバイルフレンドリーに対応した必要最低限のCSSフレームワークです。 Bootstrapがバージョン3.3.5時点でサーバにアップする必要最低限なファイルサイズが約370KB（＋jQueryのサイズ）に対して、 KATHAMOは、14KBという軽量なフレームワークです。 KATHAMOは、この記事を書いた時点で、デモページが用意されていないようなので、以下で、アーカイブに入っていたデモページをまとめがてら紹介です。 ベーシックテンプレート KATHAMO使うにあたって、必要最低限なHTMLは以下になります。以下をテキストエディターなどに貼り付けて利用します。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta ht

正規表現は適切に使うと、プログラムの手間を削減できる強力なツールになります。 ただ、正規表現を使うと動作テストが面倒だったり、慣れないうちはどんなことが書いてあるのかわからないなんてこともあると思います。 そんな時に、便利な正規表現のためのテストツール＆可視化ツールの紹介です。 正規表現のテストツールなんて、どれも同じかと思いきや、結構それぞれ特徴ある機能があるものも多いので、メモがてらまとめてみました。 photo by Jeff Kubina 正規表現チェッカー 正規表現チェッカー PHP: preg_match() / JavaScript: match() PHPのpreg_matchとJavaScriptの matchの実行結果を返してくれる定番のテストツールです。 日本語のリファレンスやサンプルがあるので、メタ文字などを忘れてしまった時などにも便利。 以下のように、PHPとJa

toggle menu　toggle menu　toggle menu　toggle menu　toggle menu　toggle menu グリッド toggle grid　toggle grid 追加 add item　add item メール open mailbox 読み込み中 loading Transformiconsの使い方 Transformiconsを実際に、使ってみたんですが、以下のような手順が必要のようです。 主な手順 主な手順は、以下の4手順です。 Transformiconsファイルのダウンロード 利用したいアイコンの選択 HTMLとCSSの取得 Transformiconsスクリプトの呼び出し TransformiconsでJavaScriptも生成されるんですけど、僕の場合、うまくいかなかったので、スクリプトファイルを呼び出す形の方法です。 Transfor

waifu2xとは waifu2xとは、簡単に説明すと人工知能技術を利用した画像拡大ソフトです。 人工知能に、与えられた画像を圧縮画像と解釈させ「この圧縮画像の圧縮前の画像を求めよ」という問いの答えが出力される拡大ソフトです。 で、waifu2x-caffeは、Windows64bit環境に対応した、ソフトになっています。こちらはローカルで動作するので、サーバに負荷をかけずに利用することができます。 その他にも、派生ソフトはいろいろあります。 waifu2xを利用した拡大 例えば、以下のような小さなイラストを4倍に拡大するとします。 Credit：ピアプロ・キャラクター・ライセンス 通常の、画像ソフトで拡大すると以下のようになります。 同じような処理を、waifu2x-caffeに行わせると、以下のように綺麗に拡大できます。 二次元イラストに関しては、このように、ノイズやジャギーのない綺麗

Ready2Searchサービスを用いた手法は、現在Google Chromeブラウザの仕様変更により利用できません。Firefox、IEなどではまだ利用できますが、今後の保証はできません。 ここんところ、続けて写真サイト検索プラグインについてです。今回が最後になります。 最後は、「とりあえずこれで検索しておけば、見つからない写真はないだろう」という28個の海外サイト（内1つ国内）を一括検索できるものを設定しました。 photo by Petras Gagilas これまでに作ったもの これまでは、「商用利用OK、クレジット表記不要」という写真サイトについては以下で紹介しました。 国内30の[商用利用可・クレジット不要]で使える無料写真サイトを横断検索できるプラグイン作ったよ [商用利用可・クレジット表記不要]海外の10の高画質無料写真サイトを横断検索できるプラグイン これらは、クレジット

Ready2Searchサービスを用いた手法は、現在Google Chromeブラウザの仕様変更により利用できません。Firefox、IEなどではまだ利用できますが、今後の保証はできません。 ブログなどで使わしてもらえる写真は、本当にありがたい存在です。 特に、クレジット表記も不要な写真は、更新の手間を省くことができ、「本当にいいのだろうか？」といった感じに思いながらありがたく、このブログでも使わせてもらっています。 で、前回そんな「無料で使える国内の写真ストックサービスを横断検索できるプラグイン」を設定しました。 国内30の[商用利用可・クレジット表記不要]で使える無料写真サイトを横断検索できるプラグイン作ったよ 今回は、これの海外バージョンを作成したので紹介します。 海外写真サイト横断検索プラグイン 検索プラグインといっても使い方は簡単です。 まず、Ready2Search(海外写真サ

で、こういったサービスには、動作チェックしたコードをブログなどに埋め込んで、動作状態を不特定多数の人に共有し、見てもらう機能もあります。 僕もせっかく最近こういったサービスを使い始めたので、コードをテストした時は、ブログ記事に埋め込んで共有して再利用できたらいいかなと思っています。 ただ、こういった動作テストサービスは結構ありますが、記事に埋め込んで、表示させるにしても、なるべく自分好みで訪問者に見やすいものが望ましいです。 なので、いろいろあるサービスの埋め込み動作を、比べるため以下にまとめてみました。 photo by Dmitry Baranovskiy

Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）