無料WordPressテーマ「Cocoon（コクーン）」を公開しました
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。 以前公開したSimplicityの後継となるテーマです（※後釜ということで完全な互換性はないです）。 新しくテーマを作成したのは、Simplicity自体元々、個人用に作成したものを公開したテーマだったので、機能を増設するにつれて、多少の無理も出てきて、動作確認が大変になってきたからです。 また、Simplicityは、約4年前に公開したものなんですが、「当時のWEB状況」と「最近のWEB状況」に乖離もでてきました。ですので、一度現在の状況に合わせて作り直しておきたかったからです。 元々Simplicity自体、僕が初めてPHPで作成したプログラムだったので、当時はPHPの作法などをよくわかっておらず、書き直したい部分もいろいろ出てきたというのもあります。 こういった複合的な理
50以上の有料/無料写真サイトを一括検索できる「Everypixel」。イラスト・ベクター検索も。
様々なフォトストックサービスから高品質写真を横断検索できるEverypixelという写真検索サービスが便利だったので紹介です。 オプションを利用すれば、フリー写真だけでなくイラストやベクター素材なども検索することができます。 Everypixelとは Everypixelは、有料・無料の50以上の新素材サイトの中から一括で画像検索できるようになっている画像検索エンジンです。 検索結果のインターフェースは、「Googleイメージ検索」と近いものがあり、感覚的に利用できて使い勝手が良いです。 名前も「エブリーピクセル」というだけあって、イラストやベクター素材も検索することができます。 Everypixelの使い方 以下では、Everypixelの簡単な使い方をいくつか紹介したいと思います。 Everypixelでフリー写真を探す Everypixelデフォルト検索機能だと、有料写真も検索結果に
CSSのみでアイコンフォント風の図柄を表示できる「CSS ICON」の使い方
CSS ICONとは CSS ICONは、CSSのみで描画されたアイコンを表示させることができるコードが集められたアイコン集です。 この記事を書いた2016年11月時点では500以上のアイコンを利用することができます。 CSSのみで描かれたものということなので、思いっきり簡素なものと思いきや、かなり実用的なアイコンがそろっています。 CSS ICONの使い方 アイコンを利用するには、まずCSS ICON利用したいアイコンを選択します。 すると、画面右側に「アイコンを利用するためのコード」が表示されます。 CSSをコピペ これを利用するには、まずCSSをコピーします。 すると、以下のようなコードがクリップボードに貼り付けられるので、CSSファイルなどに貼り付けます。 .heart.icon { color: #000; position: absolute; margin-top: 6px;
画像謝罪文はもう古い？Googleにインデックスされない謝罪文の書き方「CSS謝罪文」
CSS謝罪文作成手法 まずは、謝罪文を掲載する場所に以下のHTMLを記載します。 <div id="s"><p><p><p><p><p></div> 次にCSSファイルかstyleの埋め込みタグ内に以下のように書きます。CSS謝罪文には、SCSS/Compassで書かれたものがありますので、そちらの方がわかりやすいかも。 #apology p:first-child { font-weight: bold; font-size: 120%; } #apology p:not(:first-child) { text-indent: 1em; } #apology p:nth-child(1):before { content: "お 詫"; } #apology p:nth-child(1):after { content: " び"; } #apology p:nth-child(2):
WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi
3億超の写真を複数サイトから一括検索できる「Dashmote」がアイキャッチ探しに便利
Dashmoteでフリー写真を検索する方法 基本的な、使い方としては、以下のようにキーワードを入力して検索するだけです。 すると、以下のように有料写真と無料写真が混ざった検索結果が表示されます。 こんな感じで、ウォーターマーク（電子透かし）の入った写真はすべて有料写真です。 この、有料写真を取り除いた検索結果を出すには、画面上部の中央にある「Free」をクリックします。 すると、以下のように、無料写真のみの検索結果が表示されます。 クレジット表記義務のあるものを除いた検索結果を出したい場合は、Flickrのチェックを外すと良いかと思います。 個別の写真をクリックすると、以下のように表示されます。 写真を利用する前に、以下の部分のライセンス表記は、チェックしておくとよいかと思います。 詳しいライセンスに関しては、以下を参照してください。 参考 License Overview 提案機能が便利
URLを入力するだけ！コンテンツをスクレイピングしてデータ化してくれる無料ツール「import.io」
import.ioとは import.ioは、データ化したいページのURLを入力するだけで、自動でデータ箇所を判断して情報を集めてくれるスクレイピングサービスです。 無料で利用することができ、セットアップも、データ収集用のトレーニングなども必要ありません。 URLを入力して、ボタンを押すだけという簡単さから、誰にでも利用できるデータ収集ツールだと思います。 以下では、その簡単な使い方や、利用例などを紹介したいと思います。 定期的なサイトへのスクレイピングは相手サイトの負荷になるので、一日に何度も何度も同一サイトに使用するのはやめましょう。加えて、取得したデータを、そのまま何かに利用すると著作権違反になる恐れもあります。 基本的な使い方 import.ioの最大の特徴は、使い方の簡単さです。 以下では、その使い方の例として、IKEAのソファー検索結果ページのデータを取得してみたいと思います。
誰でも簡単！自作フォント作成の「PaintFont」が、あまりにも手軽だったのでフォントを作ってみました
PaintFont.comというフォント作成サービスを最近知りました。 このサービスは、手書きの文字でも、イラストレーターなどで作成した文字でも、無料で手軽にフォントに変換してくれるサービスです。 僕も、以前からちょっとフォントの作成に興味があったので、試しに作ってみることにしました。 photo by Connie Ma フォント作成の主な手順 PaintFontでフォントを作成するのに必要な、主な手順は以下の6手順です。 必要な文字を追加して選択 不要な文字を削除 テンプレートをダウンロード テンプレートにフォントとなる文字を書き込む 文字を書き込んだテンプレートファイルをアップロード フォーマットを選んでフォントを作成 これだけの手順がありますが、半角英数字のみのフォント作成でしたら、30分ほどで作ることができました。 ※今回僕は、マウスで結構適当に文字を書いたので30分で済みました
ブラウザ間をP2Pで接続する「reep.io」を利用すると知人間での大容量ファイル転送が簡単
ブラウザさえあれば使えるファイル転送サービス「reep.io」が便利そうだったので紹介です。 連絡を取り合える相手であれば手軽にファイルを送れるようになっているので、大きなサイズのファイルも送ることができます。 reep.ioとは reep.ioは、2つのブラウザ間をピアツーピアで接続し、ファイル転送を可能にするサービスです。 ピアツーピア（P2P：peer to peer）とは、コンピューター同士が対等に通信を行う通信方式のことです。「サーバーとクライアント」のようにコンピューター間に上下関係がなく、対等の者（Peer、ピア）どうしが繋がるという意味です。 WebRTCテクノロジー（ビデオや音声、データをブラウザ間でやり取り可能にする規格）を利用して、ブラウザ間をダイレクトでファイル転送を行います。 なので、WebRTCに対応したブラウザからしか使えません。けれどもブラウザさえあれば利用
WordPress開発が捗りそうなBracketsおすすめ拡張40個まとめ
Paste and Indent JavaScript & CSS CDN Suggestions scriptタグやstyleタグを書くと、CDNが使えるJSファイルやCSSファイルの名前を提案してくれ、選んでいくだけでCDN呼び出しタグを書くことができます。これがあると、ネットで探し回る必要ないかも。 Brackets Extension: CDN Suggestions CDN Finder jsDelivrで公開されているCDNを検索し、URLを手軽に取得することができます。 CDN Finder Autoprefixer 名前の通り、ファイルの保存時に自動でプレフィックスを付与する拡張です。 Can I Useの情報から判断して、不要なものは取りのぞいてもくれます。 機能を有効にするには、「編集」メニューから「Auto prefix on save」にチェックをしておく必要があり
無料で説明図を作るならドローツール「draw.io」に敵うものはないかも
で、図説ドローツールとしては、CacooやGliffyを紹介しました。 けれども、「draw.io」というのを使ってみたら、完全に無料で利用できるうえに、日本語にも対応、さらには機能も豊富という何拍子も揃った素晴らしいドローツールだったので紹介です。 photo by David Goehring draw.ioとは draw.ioは、WEB上で無料で使えるフローチャート作成ツールです。 インストールなどは必要なく、ブラウザからログインも不要で手軽に利用することができます。 通常、こういったドローツールは、「作業シート何枚まで無料であとは有料」などというサービスも多いのですが、draw.ioは完全無料で利用することができます。 やれることが豊富 このツールを利用するだけで、以下のような図を手軽に作成することができます。 チャートなんかも。 こんな回路図なんかも。 もちろんこんなフローも。
Chrome拡張「Scraper」でWEBページ情報を手軽にスクレイピングしてデータ化する方法
Scraperとは Scraperは、WEBページ上の規則性のあるデータを手軽に取得することができるChrome拡張です。 例えば、テーブルデータや、Aリンクデータ、のような特定のHTML要素に入っている情報を、片っ端から取得してテーブルデータ化することができます。 また、その取得したデータをワンクリックでGoogleスプレッドシートに保存することができます。 テーブルデータのスクレイピングは以下の動画を見た方が分かりやすいかも。 以下では、その使い道などをいくつか考えてみました。 テーブルデータの取得 最もオーソドックスな使い方と言えば、動画にも出てきたテーブルデータの取得です。 例えば、信長の野望の以下のような武将データテーブルがあったとします。 これを、以下のように選択して、Chromeの右クリックメニューから「Scrape similar（似たものをスクレイプ）」を選択します。 す
WordPressで攻撃を受けやすいファイルとそのセキュリティー対策まとめ
アクセスログの取得 まずは、サーバーからアクセスログを取得します。 僕は、今エックスサーバーしか利用していないので、その方法を書きます。 エックスサーバーの場合はサーバーパネルからログインしてパネルを開きます。 そして、「統計」項目の「ログファイル」をクリックします。 あとはドメインを選択して、 ダウンロードするだけです。 エックスサーバーデフォルトの場合は「nelog.jp.access_log」というファイルがダウンロードされます。 このアクセスログには、すべてのファイルへのアクセスに対する「1週間のログ」が書き込まれています。 すべてのファイルへのログなので、当サイトの場合だと2GB以上あり、600万行以上のテキストになっていました。 アクセスログの解析方法 これら膨大なアクセスログから、一つ一つ怪しいファイルを見ていくのは不可能なので、簡単な解析用コードをRubyで書きました。 W
ソースコード検索エンジン「NerdyData」で世界1.4億のサイトから実用コードが探せる
NerdyDataというソースコード検索エンジンを最近知りました。 通常の検索エンジンは、タグを取り除いたページ内のコンテンツが検索結果に表示されます。けれど、NerdyDataは、サイトにある生コードを検索することができます。 これを、使うことにより、コードの具体的な利用例なども見ることができ、便利だったので紹介です。 photo by Ruiwen Chua NerdyDataとは NerdyDataは、世界中の1億4000万サイト以上のソースコードの中から、HTML、CSS、JavaScriptのコードを直接検索できる、ソースコード検索エンジンです。 Nerdyという単語は、あまり聞き慣れなかったので「どういった意味だろう？」と調べてみたら以下のような意味でした。 オタクっぽい Ａ系, エー系, 秋葉系, アキバ系 おそらく、いい意味でPCオタク向けのデータが詰まった、ギーク御用達の
WordPressエディターにエクセルの表を貼り付けてテーブルを手軽に作成する方法
めちゃくちゃ簡単です。 見出しセル（ヘッダーセル）の作成 ただ、上記までの方法だと、すべてデータセル（td）になってしまいます。 見栄えのためにも、ヘッダーとなるセルはきちんと設定しておきたいです。 見出しセル(th)を手軽に設定するには、一つ一つ、セルを「td→th」に変更してももちろん良いです。ただそれだと面倒くさいので、TinyMCE Advancedというプラグインをインストールして手軽に行う方法を紹介したいと思います。 TinyMCE Advancedのインストール まずは、Wordpress管理画面の「プラグイン→新規追加」から「TinyMCE Advanced」を検索してインストールし、有効化してください。 インストールが終了すると、以下のようにビジュアルエディターの投稿欄の上に、表編集用のメニューと、ツールボタンが表示されます。 データセル（td）→見出しセル（th）の変更
コードを覚えなくてもWordPress編集ができるようになるためのカンペコレクション
WordPressには、いくつかのプログラム言語が利用されています。 主に使うものといえば、以下のような言語です。 WordPress関数（PHP） PHP HTML CSS JavaScript（jQuery） ただ、これだけの言語があると、初めてWordpressに触れる人には、覚えるのが大変なのではないかと思います。 というか、ある程度プログラム経験がある僕でも、揮発性の高い脳を利用しているため、全く覚えられません。 ということで今回は、Wordpressで「これどうすればいいんだったっけ？」「あれなんて関数だったっけ？」なんて時に見ると便利なカンニングペーパー（チートシート）の紹介です。 WordPressチートシート WordPressで重要な部分の覚え書きというか、これだけ覚えておけばある程度Wordpressを使えるようになるチートシートです。 日本語版 WordPress
荒れ果てたWordPressコードを美しく整形してくれるツールまとめ
WordPressには、いくつかのプログラム言語が利用されています。 具体的には以下のような言語です。 PHP HTML CSS JavaScript（jQuery） 細かなことを言えば、他にも使用されているものはありますが、ユーザーが編集するものと言えば大体はこの4つです。 今回は、これら4つの言語のコードを綺麗に整形してくれるツールの紹介です。 コード整形ツールとは コード整形ツールとは、書き方の定まっていないプログラムコードなどを、記法を統一して綺麗に書き直してくれるツールです。 WordPressテーマ作成や、カスタマイズで、コードをググッてよそからコピペ編集で使うときなどに、自分に合った記法に変換して使えます。 例えば、以下のようなことを、まとめて行いたい時に使うと、手動でやるより編集時間を大幅に短縮できます。 コードに適切なインデントを自動で設定する インデントをタブからスペー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress制作用のエディターをSublime Text3に移行したので設定のまとめ
29万もの高品質なライセンスフリー作品の中から写真を手軽に利用できる、WordPress「Pixabay Images」プラグイン【CC0、PD】