ferret編集部：2015年6月9日に公開された記事を再編集しています。 バズとは、SNSなどで取り上げられて、特定の話題に注目が集まって拡散されていく状態のことを指します。 1度バズが起きれば瞬間的に注目が高まりますが、短期的なものなので、再現性を高めなければいけません。そのためには、バズを生み出すコンテンツに必要なポイントを知っておくことが必要です。 今回は、バズを生み出すコンテンツを作るために知っておくべきことをまとめました。 バズとは 「バズ」という単語が浸透した背景には、Twitter内での流行の話題やワードなどを知ることができるbuzutter(バズッター)というサービス名称から生まれ、SNSやキュレーションメディアなどで多くの人に拡散された、ということを指すようになりました。 バズは費用対効果の高い広告ともなりえます。 また、企業の認知度があがり、ブランディングにもつながる

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ

KOTORIBlogのLINEスタンプ第2弾！！ 好きな人にアプローチするためのスタンプ！！ ムキムキのクマ「たかし」が、あなたの代わりに意中の相手へ想いを伝えます。 まえがき KOTORIBlogのLINEスタンプ第2弾！！ 「好きな人にアプローチ」 がとうとう本日リリースされました！ 折角なのでこのスタンプの理念と使い方を熱く語ろうと思います。 このスタンプは色々なブログで書かれいる売れてるスタンプの特徴 ・白くて丸い生き物 ・使うシチュエーションがハッキリしている ・特徴がある（可愛い、うざい、おもしろい等） ・オリジナリティがある これらをすべて盛り込みました。 こんな感じです。 ・白いクマ（白い生き物） ・好きな人に想いを伝える時に使う（シチュエーション） ・うざい ・語尾がオタク（オリジナリティ） スタンプが溢れまくっているこの現状で、売れる要素をふんだんに盛り込んだこの「好き

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき WordPressでお問い合わせフォームを設置するプラグインといえば、真っ先にの名前が挙がるのが「Contact Form 7」でしょう。 みなさんも使用したことがあると思います。 この記事では、そんな「Contact Form 7」をより実用的に使用するカスタマイズ方法をまとめました。 ここに書いていることでフォーム周りに関する大抵のことには対応できると思います。 あと注意事項を一つ。 記事に出てくるショートコードは半角スペースを消してください。 []の前後の半角スペースです。 そのままだと展開されちゃいました。 目次 郵便番号からの住所自動入力に対応 確認用メールアドレスのフィールドを追加 確認画面を表

まえがき みなさん正規表現詳しいですか？ KoToRiは正規表現を見ると吐き気がします笑 拒否反応です。なぜなら正規表現は複雑すぎて本当に全く理解できないから。 リダイレクトとかで.htaccessに正規表現を書くという機会はわりと多いと思いますがKoToRiは全部コピペで乗り切ってました。 だから正規表現絡みの.htaccessがうまく動かない時は相当ハマってました笑 最近、300ページ規模のサイトを制作してるんだけどコーダーが作ったHTMLをWordPressに移植する時に「a href」のリンク先がそのまま使用できない！という状況に陥って手で一つずつ直すなんてバカなことしてられないので必死に調べました。 そして無事に正規表現を利用してラクラク置換できました。 長年忌み嫌っていた正規表現と何かちょっと歩み寄れた気がしたので記念に記事にします。 てか正規表現がよく分かんないコーダーさんと

まえがき カスタム投稿タイプのアーカイブのURLは普通こんな感じ。 “kotori-blog.com/投稿タイプ名” これに階層構造を持たせたい場合が多々あります。 例えばこんな感じ。 “kotori-blog.com/custompost/投稿タイプ名” 第三階層くらいまであるサイトだとURLの構造って大事だったりしますよね。 今までは「無理だろ」と思って諦めていましたが先日、とうとう発見しました！ そんな感じでこの記事はカスタム投稿タイプのURLに階層構造を持たせる方法を紹介します。 因みにプラグイン「Custom Post Type UI」を使用します。 使用したこと無い人は使ってみてください。 カスタム投稿やカスタムタクソノミーの追加がめっちゃ簡単にできます。 Custom Post Type UIの使い方 この記事では「Custom Post Type UI」の使い方は割愛するの

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 拡大縮小しても汚くならないベクター画像をサイト上に表示できるSVGを解説します。イラレを使った書き出し方法や、サイト上に表示する方法を超具体的に紹介します。 まえがき この記事を書いてるちょっと前に、このKOTORI Blogをリニューアルしました。 どうせリニューアルするならと、サイト内のイラストは基本全てSVGで書き出そうと思い立ち無事に実現できたので、SVGをブラウザに表示するためにKoToRiが実際に行った事をまとめて記事にしたいと思います。 それから、この記事ではSVGを作成するためにAdobeのIllustratorを使用します。 IllustratorのバージョンがいくつからSVGを書き出せるようになっ

まえがき この前ある案件でクライアントから「トップページの最新記事一覧に記事の中で使用されてる画像を表示させることは可能ですか。アイキャッチに登録するのが面倒なので。。。」というご要望をいただきました。。 確かに本文に絶対画像いれるのであればアイキャッチに画像を登録するの手間になりますよね。ググってみたらめちゃくちゃ簡単に対応できたので覚え書きです。 functions.phpにコードを追加する形です。 記事内の最初の画像を取得する functions.phpにコードを追加する 下記コードを使用中のテーマのfunctions.phpに追加してください。 function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_al

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき 「もっと見る」とか「続きを見る」とかのボタンはすっかりお馴染みになりましたね。 普通はそのボタンをクリックしたら詳細ページに飛んでより詳しい情報を得ることができる、という流れだったりするのですが、例えば「もっと見る」をクリックしたらFacebookみたいに続きのテキストが表示されるという動きを実装したい場合もあるかと思います。 今回はFacebookと全く同じ(多分)動作をする「もっと見る」を実装する方法を紹介したいと思います。 jQueryです。それに加えて、WordPressの本文に対してFacebookの「もっと見る」の機能を実装する場合のコードも紹介しようと思います。 サンプル 「もっと見る」サンプ

まえがき みなさんはFTPソフト何使ってますか？FFFTPのサポートが終了してからというものKoToRiはもっぱら「WinSCP」ユーザーです。 使いやすくて基本的に満足していたのですが、一つ問題があります。 サーバーにUPされているファイルの名前が日本語の場合、ファイル名が盛大に文字化けしてしまいダウンロードすることができないことがあります。 Webで扱うファイルの名前に関しては基本的に半角英数でアップするのは常識ですが、クライアントがWebのことが分からない方だとそうも行きませんね。 この記事はWinSCPのファイル名の文字化けを解消する方法を紹介します。 WinSCPでの文字化け 例えば、サーバー上のファイルがこんな感じに文字化けします。 そして文字化けしているファイルをローカルにダウンロードしようとするとエラーが出てダウンロードできません。 ファイル名のエンコードをUTF-8に設定

リンク切れしている画像の表示が分かりづらいというFirefox最大の欠点をアドオン「Stylish」を使用して解決しました。その方法をご紹介。 まえがき みなさんはブラウザ何使ってますか？ KoToRiはFirefoxをずーっと愛用しています！ アドオンたくさんあって色々機能を追加していくことができるし、 今でこそどのブラウザも標準機能としてデベロッパーツールが備わっていますがこれの先駆けはFirefoxのアドオン「firebug」ですよ、多分。 「firebug」を始めて使用した時の感動は忘れられません！こんな便利なものが合ってよいのかとリアルに思いました。 そんな時代を先取るFirefoxですが、一個だけ不満があります。 Firefoxの画像がリンク切れしてる時の表示が分かりづらい！！！！ どの様に表示されるかというとこんな感じ 分かりづらい笑 これじゃあ画像がリンク切れしていることに

まえがき iPhoneやandroidは「tel」プロトコルを使用すれば、そのリンクをタップすると番号発信を行うということが可能になります。 ■具体例 <a href="tel:0012345678">電話する</a> しかし、「tel」プロトコルが指定されたリンクをPCで開こうとすると当たり前ですが開けません。 そうなると、例えばレスポンシブ対応のサイトを制作する場合、HTMLの構造は基本的にPC、スマホともに同じなので「tel」プロトコルを使用するとなるとPCにも反映されてしまいます。 困りますね。 ということで、この記事ではPCでアクセスされた時のみ「tel」プロトコルが指定されたaタグを削除する方法を紹介したいと思います。 jqueryです。 PCのみ「tel」プロトコルが指定されたaタグを削除する方法 HTMLの「tel」プロトコルの指定 HTMLの方に若干細工を施します。「te

まえがき WordPressのサイト内検索はデフォルトのままだとカスタムフィールドの値が検索対象に含まれません。基本的にカスタムフィールドは使いまくると思うので検索対象に含めてもらわないと困りますね。 そんなときに超便利なのが「Search Everything」プラグインです。 インストールしてちょっと設定いじくるだけでカスタムフィールドはもちろん、デフォルトでは対象外のコメントやタクソノミー名等を検索対象に含めることができます。 Googleカスタム検索を使用しないキーワード検索を実装するなら是非導入しておきたいプラグインですね。 この記事ではそんな「Search Everything」プラグインの使い方を説明します。 『Search Everything』のインストール 管理画面「プラグイン」→「新規追加」の検索フォームに「Search Everything」と入力し「プラグインの検

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき WordPressで絞り込み検索の機能を実現させるとしたら、みなさんどうしますか？ 普通はまずプラグインで手っ取り早くできないかと考えるかと思います。 プラグインで考えると真っ先に挙がるのが『Custom Fields Search』です。 この『Custom Fields Search』のいい所は無料という点です。 絞り込み検索を実装するプラグインの中で実用的かつ無料なのは『Custom Fields Search』くらいではないでしょうか。 『Custom Fields Search』は余りおススメできない しかし、『Custom Fields Search』は余りおススメできません。 理由としては以下

Google Maps JavaScript API v3を使用してサイトに埋め込むGoogleMapsの色をお好みの色に変更する方法を紹介します。 こんな感じでGoogleMapsの色をちょっと変更するだけでGoogleMapsとサイト全体の色のバランスを保つことができたりします。 ということでGoogleMapsの色を変更する方法を紹介します。 Google Maps JavaScript API v3を使用します。 GoogleMapsの色を変更する手順 まずGoogleMapsの色を好みの色に調整しAPIで表示するためのコードを取得します。 その色を調整するツールがこれ。 Styled Maps Wizard しかし、この「Styled Maps Wizard」はかなり細かく地図の色を編集できるみたいなのですが、UIが分かりずら過ぎてしかも英語なので使い方がいまいちよく分からないの

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがきが若干ながいので必要なければ飛ばしてください。 次項：マルチサイトでも『Custom Post Type Permalinks』の「wp_get_archives()」を正常に機能させる まえがき カスタム投稿タイプを一つのコンテンツとして利用する場合、必ずと言っていいほど必要になってくる『Custom Post Type Permalinks』というプラグインがあります。 主な機能としては「wp_get_archives()」関数でカスタム投稿タイプ別の月別アーカイブリストを表示できるようになったり、タクソノミーのアーカイブページのパーマリンクをいい感じに最適化してくれたりします。 『Custom Post

まえがき WordPressを普通にマルチサイト化すると何故か親サイトのURLに「/blog」が付きます。 これ始めてWordPressをマルチサイト化した時なんか絶対に躓くところですね。 URLに勝手に「/blog」付くのなんて明らかに不要なのになんでこんな仕様なんでしょうか。 そんなことを言っても始まりませんので親サイトのURLから「/blog」を葬り去る方法を書いていこうと思います。 親サイトのURLから「/blog」を消す手順 1.親サイトのパーマリンク設定をデフォルトに まず、親サイトの管理画面を開きます。 親サイトの管理画面上の「設定」→「パーマリンク設定」から一旦パーマリンク設定をデフォルトにします。 2.ネットワーク管理者の管理画面から親サイトのパーマリンク設定を変更 次にネットワーク管理者の管理画面から、勝手に「/blog」が付いてしまう親サイトのパーマリンクを修正します

WordPressの更新ボタンをクリックすると403エラーが表示される場合、サーバーのセキュリティ機能「WAF（ウェブアプリケーションファイアウォール）」を疑いましょう。 まえがき みなさん、WAF（ウェブアプリケーションファイアウォール）ご存じですか？ 2012年の中盤くらいからロリポップやヘテムル等で導入され始めたWebアプリケーション上の脆弱性をカバーする機能です。 KoToRiはセキュリティ関係はサッパリなのでWAFについて詳しく解説することはできませんが、このWAFは重大な欠点があります！ WAFを有効にしているとWordPressの管理画面上で記事の更新、及びテンプレートの更新を行うと403エラーが出ます。 WordPressを使っていて403エラーが出る場合、まずWAFを疑いましょう。 WAF出始めの頃から、この欠点はいろんなブログで紹介されていてKoToRiも当初から知って