サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
www.wp-benricho.com
個人、商用で利用することができる、かっこいい日本語のフリーフォントを紹介します。 クールなひらがな、スタイリッシュなカタカナ、インパクトのある漢字など、かっこいいデザインによく合うフォントを揃えました。 かっこいい日本語のフリーフォント一覧 超極細ゴシック体 超極細ゴシック体は、Extra Lightのフォントよりもさらに細い、超極細のフォントです。無機質で真っ直ぐな線が特徴的な、クールな仕上がりになっています。無料でダウンロードできて、商用利用可能です。 超極細ゴシック体 ※無料フォント、商用可、印刷・同人誌可 源暎ラテン（源暎ラテゴ／ラテミン） 源暎ラテンは、漫画のスピーカーセリフなどに使えるラテン体のフォントです。源暎ラテゴと源暎ラテミン、2種類のフォントがあります。どちらもひらがな、カタカナは共通ですが、源暎ラテゴは源暎ゴシックの漢字が、源暎ラテミンは源暎ゴシック Lightの漢字
Video.jsは、HTML5動画プレイヤーを実装することができるJSライブラリです。 とても高機能で、YouTubeで見かける、埋め込み機能、シェア機能、フルスクリーン表示、音量調整など必要な機能が揃っています。 もちろん、見た目のカスタマイズも可能です。 対応ブラウザはIE8以上です。動作が安定しており、実際に多くの動画サイトで使われています。 画像、動画ギャラリーのlightgallery.jsにも使われています。 オープンソースとして公開されており、無料で商用利用可能です。 デモ デモ YouTubeレイアウト 実装事例 実際に複数の動画サイトに導入されています。 IGN Video Funny Or Die The Guardian Video.jsの使い方 CDNで提供されています。もちろん、ローカルにインストールすることも可能です。 CSS <head>タグ内でvideo-j
写真に重ねた文字を見やすくデザインするコツを紹介します。 PhotoshopやIllustratorでのデザインに活用できます。Photoshopで作業する際のサンプルも掲載しています。サンプルは簡単に再現できるようにシンプルな設定で表現しています。 1. グラデーションをかける Before After 写真にグラデーションをかけます。文字を配置するエリアの背景を暗めにすることで、文字を読みやすくします。 サンプルでは、Photoshopを使って、写真に黒から透明のグラデーションを不透明度を40%で設定しました。 2. 写真をぼかす Before After 写真をぼかすことで手前に配置した文字にピントをあわせることができます。 Photoshopの場合、フィルター > ぼかし > ぼかし(ガウス) から設定できます。サンプルでは、ぼかしの「半径」を5に設定しました。 3. 見せたい部分
イベント（Events）の構造化データをマークアップする方法を紹介します。 Googleは検索結果にイベントに関する情報をエンリッチ検索結果として表示することがあります。 エンリッチ検索結果は通常の検索結果の上部に目立つ形で表示されます。 イベントの予定は構造化データを設定しなくても表示されることがありますが、構造化データとしてマークアップしておくことで、Googleにより正確に情報を伝えることができます。 JSON-LDでマークアップ イベント（Events）の構造化データをJSON-LDでマークアップする方法です。JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。 <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event",
テーブル単位でテキストを一括置換できるWordPressプラグインを紹介します。 Better Search Replaceはデータベースのテーブルを指定して、テキストを一括置換できるWordPressプラグインです。 以前に紹介した一括置換プラグインのSearch Regexは記事のタイトルや本文、コメント欄、URLなど、置換の対象が細かく分かれており使いやすいのですが、選択肢にないデータは置換することができませんでした。一方、Better Search Replaceはデータベースのテーブル単位でデータを指定できるので、さまざまなデータを置換することができます。 Search Regexは正規表現を利用できましたが、Better Search Replaceは正規表現は使えません。 使い方 使用前に、データのバックアップを取っておきましょう。 インストールしたら、ツール > Bette
WordPressでカスタムフィールドを検索対象に含める方法を紹介します。 カスタムフィールドに入力した値を検索することができるようになります。 実装は簡単です。下記のコードをfunctions.phpに追加します。 /** * 参考 http://wpcj.net/1363 */ function posts_search_custom_fields( $orig_search, $query ) { if ( $query->is_search() && $query->is_main_query() && ! is_admin() ) { // 4.4のWP_Query::parse_search()の処理を流用。(検索語の分割処理などはすでにquery_vars上にセット済のため省く) global $wpdb; $q = $query->query_vars; $n = ! em
ECサイトでよく見かける商品画像の拡大表示を実装する方法を紹介します。 Drift.jsは、ECサイトでよく見かける商品画像の拡大表示を実装することができるJSライブラリです。 画像の拡大率、レスポンシブ時の虫眼鏡表示の有無、マウスカーソルに対する虫眼鏡の位置など細かく調整することができ、虫眼鏡（拡大鏡）の形はスタイルシートを調整して好きな形に変更できます。 jQueryなどのライブラリに依存せず、単独で動作します。 ECサイトではできるだけ高解像度の写真を使って、ディテールを確認できるようにしておくとコンバージョン率が上がるので、実装したい機能です。 デモ デモページに実装してみました。 画像（左側）にマウスオーバーすると、右側に拡大した画像が表示されます。 こちらは虫眼鏡バージョン、画像にマウスオーバーすると、画像に虫眼鏡を重ねたように拡大表示されます。 使い方 実装は簡単です。 デモ
動画コンテンツ（Video）の構造化データをマークアップする方法を紹介します。 動画コンテンツの構造化データをマークアップすると、Googleはその動画に関する情報をより正確に理解できるようになります。 Googleのマット・カッツは、YouTubeなどの動画配信サービスにアップロードした動画であっても、自分のサイトに埋め込む際には動画の構造化データをマークアップすることを推奨しています。構造化データをマークアップすることで、Googleがその動画コンテンツをより正確に理解することにつながるためです。 JSON-LDでマークアップする 動画コンテンツ（Video）をJSON-LDでマークアップする方法です。JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。 <script type="application/ld+json"> { "@cont
WordPressデフォルトで検索できるのはタイトル、本文だけですが、Search Everythingでは抜粋、カスタムフィールド、カテゴリー、タグ、カスタムタクソノミー、コメントも検索対象にすることができます。 2. Search Everythingをインストールする 「プラグイン > 新規追加」から「Search Everything」をインストールします。 3. Search Everythingの設定をする 「設定 > Search Everything」から検索対象を設定します。 基本設定 「Research Everything compose-screen widget」の項目はそのままです。 検索対象の項目 「Search Everything Basic Configuration」で検索対象を指定します。 検索対象に追加したい項目にチェックを入れます。 「検索キーワ
商品（Products）の構造化データをマークアップする方法を紹介します。 商品の構造化データをマークアップすると、Googleは検索結果で商品に関する詳細な情報を提供できるようになります。 たとえば、検索結果の上部に画像付きで商品のショッピングページへのリンクが表示されます。 また、商品のレビューや価格をリッチスニペットとして表示することがあります。 商品ページをマークアップする 商品単体について記載したページ（Single Product Page）をマークアップします。 JSON-LDでマークアップする JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。 <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "
Photo by Austin Moncada via Unsplash 記事（Articles）の構造化データをマークアップする方法を紹介します。 Googleは検索結果の上部にトップニュースというカルーセル枠を表示することがあります。通常の検索結果よりも上部に、画像つきの目立つレイアウトで表示されます。 記事がトップニュースに表示されるためには、ニュース記事やブログ記事の構造化データをマークアップしておくことが必要です。 記事（Articles）の構造化データは、AMP対応のページの場合と、非AMPページの場合で、マークアップする属性が若干異なります。 JSON-LDでマークアップする 記事（Articles）をJSON-LDでマークアップする方法です。JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。 <script type="appl
ローカルビジネス（Local Businesses）の構造化データをマークアップする方法を紹介します。 Googleは検索結果のナレッジグラフにカフェやレストラン、物販店や病院など、店舗を持っているローカルビジネスに関する情報を表示することがあります。 ローカルビジネス（Local Businesses）のナレッジグラフは、構造化データをマークアップしていなくても表示されますが、構造化データをマークアップすることで、Googleにより正確に情報を伝えることができます。 ローカルビジネスをマークアップする ローカルビジネス（Local Businesses）の構造化データをJSON-LDでマークアップする方法です。JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。 <script type="application/ld+json"> { "@c
Photoshopを使えば、写真を簡単に加工、補正することができます。ちょっとしたテクニックを知っているだけで、写真の色合いを自然にしたり、斜めの写真をまっすぐにしたり、肌を綺麗に補正したり、手足をほっそりと伸ばしたり、といったことができます。 Photoshopを使った基本的な写真の補正、加工テクニックを紹介します。 暗い写真を明るくする Photoshopで暗い写真を明るく鮮やかにする方法 トーンカーブで写真の明るさを調整し、彩度を上げて暖かみのある写真にします。 真っ暗な写真を「ラクに」きれいに明るく補正！Photoshopトーンカーブと描画モードの合わせ技 描画モード「除算」でトーンカーブやレベル補正を適用することで、暗い写真を自然な色合いで明るくすることができます。日陰や夜に撮影した写真に使えます。 上級者も使える「シャドウ・ハイライト」 「シャドウ・ハイライト」を使って、暗い部
それぞれの転送量で対応可能なPV数は、画像が多いかどうか、サーバーのキャッシュを適切に設定しているかどうか、などにより大きく変わります。私が運営しているサイトでは70GB/1日なら画像が少なめのサイトで10万PV/1日、画像が多めのサイトで1万PV/1日程度になると思います。 どちらのサイトもWordPress高速化のための基本的な設定を行っています。 エックスサーバーで転送量を調べる方法 エックスサーバーでサーバーの転送量を調べるには、エックスサーバーの管理画面（サーバーパネル）の「アクセス解析」からアクセス解析を追加することで、閲覧できるようになります。 はじめてアクセス解析を有効にした場合、最初の解析データが見られるようになるには少し時間がかかります。 日別の転送量を見ることができます。 Cloudflareにユーザー登録する Cloudflareにアクセスして、「Sign Up」に
PWAは通常のWebページにネイティブアプリのような機能を実装できる仕組みです。 ネイティブアプリのようにストアからインストールする必要はなく、ChromeやFirefoxなどのブラウザで通常のWebページと同じようにアクセスするだけで、ネイティブアプリのようなUX体験を提供できます。 ユーザーは、いちいちストアからアプリをインストールする必要が無く、ページの高速表示やオフラインでの動作などの恩恵を得られます。既に、国内では楽天レシピやSUUMO、Twitter、海外ではアリババやランコムなどがPWAを導入しており、モバイル端末からのコンバージョンが大きく改善したという事例も多数報告されています。 PWAのメリットと導入事例、対応ザラウザ、よくある質問、実装方法を紹介します。 PWAとは PWAとはProgressive Web Appsの略で、モバイル端末のブラウザでWebページを表示す
元々はブログを中心に使われていたWordPressですが、最近は企業サイトをWordPressで構築する事例が増えてきました。カカクコムやクックパッドのように有名上場企業で、コーポレートサイト全体をWordPressで構築している事例もあります。 今、世界中に存在するWebサイトの約29%がWordPressで運用されていると言われています。 WordPressのメリットは更新性の高さです。きちんと設計をしておけば、ページの修正や増減を担当者レベルで、スピーディーに行うことができます。 WordPressで企業サイトを構築する場合は、オリジネルでテーマを作成することも多いと思いますが、WordPressには企業サイト向けに開発された無料、有料のテーマが存在します。 これらのテーマを活用することで、よりスピーディーに企業向けWordPressサイトを構築することができます。 今回は、企業サイ
WordPressで投稿本文のコンテンツを置換したいときは、「the_content」にフックさせます。 function change_the_content($the_content) { $the_content = str_replace('aaa','bbb',$the_content); //HTML出力で置き換える処理 return $the_content; } add_filter('the_content','change_the_content'); 簡単ですね。 では、投稿本文ではなく、WordPressで出力されるHTML全体に対して置換処理を行いたいときはどうしたらいいのでしょうか？ 投稿本文ではなく、WordPressですべての処理が終わった後、HTMLが出力される直前に置換処理を行い時は、「after_setup_theme」と「shutdown」のアクショ
WordPressで記事のリンクを任意のURLに変更したり、リダイレクトを設定する方法を紹介します。もちろん、外部サイトのURLだけでなく、サイト内のページのURLへリンク、リダイレクトさせることも可能です。 記事のリンク先自体を差し替える方法と、記事のリンク先は元のままにして指定したURLにリダイレクトする方法があります。 1. プラグイン「Page Links To」を使って指定URLに直接リンクする プラグイン「Page Links To」を使うと、記事のリンクを指定したURLに変更することができます。 プラグインをインストール、有効化すると、記事編集画面の下部にリンク先のページの設定フィールドが表示されます。カスタムURLにURLを入力すると、外部サイトなど、指定したURLにリンクすることができます。 2. functions.phpを使って、記事のリンク先をカスタムフィールドで指
httpsにリダイレクト GoogleはSSLの導入を推奨しています。サイトのhttps化は検索順位にも影響を与えます。WordPressを使った個人ブログでも、検索順位を重視する場合はhttps化を検討しましょう。 httpsにリダイレクトする場合は、.htaccessに以下の記述を追加します。場所は、WordPress基本設定の# BEGIN WordPressよりも上に記載します。www.example.comの部分は、サイトのドメインに置き換えてください。 # https にリダイレクト <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,QSA,L] </IfModule> MIME Typeの
YouTubeの動画字幕データをダウンロードする方法を紹介します。直接URLを指定する方法と、字幕ダウンロード機能を提供しているオンラインサービスを利用する方法があります。 ダウンロードできるのは動画投稿者が設定した字幕データのみで、音声からの自動翻訳で表示される字幕データをダウンロードすることはできません。 直接URLを指定する まず、動画のvideo_idを確認します。YouTube動画URLのv=xxxxxxxxxxxの部分です。 https://www.youtube.com/watch?v=xxxxxxxxxxx 次に、動画が対応している字幕データを確認します。以下のURLの[video_id]の部分に先ほどのパラメータを指定してアクセスします。 https://video.google.com/timedtext?type=list&v=[video_id] すると、次のような
1. CSSとSVGでレーティング評価の星を実装する方法 CSSとSVGを使ってレーティング評価の星を実装する方法です。星はSVGを使用した画像ファイルなので、自由なデザインに変更することができます。ラジオボタンでレーティングを選択できるようになっています。 デモ(CodePen) HTMLを用意します。 <span class="star-rating"> <input type="radio" name="rating" value="1"><i></i> <input type="radio" name="rating" value="2"><i></i> <input type="radio" name="rating" value="3"><i></i> <input type="radio" name="rating" value="4"><i></i> <input type
MacのKeynoteはWindowsのパワーポイントのように、プレゼンテーション資料を作成するためのソフトです。 Keynoteの特徴は、パワーポイントよりも洗練されたデザイン性です。エフェクト機能も豊富に用意されており、オリジナリティのあるプレゼンテーション資料を作成することも可能です。 さらに、Keynoteはおしゃれなテンプレートが豊富に配布されています。無料のものから有料のものまで、Keynoteのテンプレートを活用することで、簡単におしゃれなプレゼンテーション資料を作成することができます。 この記事では、Keynoteで使えるおすすめのテンプレートを紹介します。 日本製のKeynoteンプレート 日本で作成されたkeynoteのテンプレートです。日本語のフォントを考慮して作成されているので、日本語での美しいタイポグラフィの表現が可能です。 シンプルで使いやすい「AZUSA」 A
新しくリリースされたものを中心に、無料でダウンロードできる人気の筆記体フォントを集めました。 筆記体フォントはビジュアルデザインやバナーデザインなど、様々な場面で使えます。お気に入りのフォントをいくつかストックしておくと、デザインの幅が広がります。 フリーフォントの中でも筆記体フォントは種類が豊富で、高品質なものが揃っています。 筆記体は英語ではScript Font(スクリプトフォント)と呼ばれ、手書きによる流れるような、美しいデザインが特徴です。 商用ライセンスについてもできるだけ明記しました。ライセンスについては、変更になったり、記載に漏れや誤りがある可能性があります。利用の際は改めて各フォントのライセンスを確認してください。商用利用可能なものは上の方に集めています。 （※ライセンス情報は記事執筆時点で確認したものです。素材を利用する際は、ご自信で最新のライセンス情報を確認してくださ
写真: Unsplash ブログやマガジン・メディアサイト、ポートフォリオ、Googleアドセンス・アフィリエイトサイト、コーポレートサイト、レストラン・カフェのサイト、結婚式のサイト、バンドのサイト、学校・スクールのサイト、ECサイトなど、WordPressには様々なジャンルに最適なテーマが用意されています。2017年に人気の無料WordPressテーマ100個を紹介します。 Googleアドセンス・アフィリエイトにおすすめのWordPressテーマ Googleアドセンスの運用やアフィリエイトサイトに最適化されたWordPressテーマです。 Simplicity Simplicityは内部SEO対策済みのシンプルな無料WordPressテーマです。Googleアドセンス広告を貼り付けるためのカスタマイズ機能、ウィジェットがあらかじめ用意されており、アドセンス目的のブログ運用に向いてい
※2017/04/02 ダウンロードページが削除されたため、リンクを削除しました。 Tych Panel 2は複数の画像を自動的に配置して1枚の画像を作成できるPhotoshopエクステンションです。 挿入方向と画像を選択するだけで、画像を自動的に配置してくれます。 こんな配置ができます いくつか作成例を紹介します。 ↓3行 x 3列の9分割。 ↓大きさがバラバラなレイアウトも作成できます。 ↓縦画像も配置できます。 インストール方法 ダウンロード サイトにアクセスして、「Download」ボタンからzipファイルをダウンロードして、解凍しておきます。 インストール Photoshopを管理者権限で起動します。Photoshopの起動アイコンを右クリックして「管理者として実行」を選択します。 Photoshopメニューの「ファイル」から「スクリプト」 > 「参照」を選びます。 ダウンロード
WordPressで使える便利なカスタマイズコードをまとめて紹介します。 WordPressテーマフォルダにあるfunctions.phpにコードを記述して使います。 functions.phpを使いこなせると、WordPressでできることが大きく広がります。 アドセンス広告のカスタマイズ 1. 記事の任意の場所にアドセンス広告を表示する（ショートコード） 記事の任意の場所にアドセンス広告を表示するショートコードです。記事本文中の任意の場所に「[insert_ad]」と記述することで、広告を表示することができます。 //記事の任意の場所にアドセンス広告を表示するショートコード[insert_ad] function insert_adShortCode() { //ここに広告タグを記入 $ad = ' <div class="ad-space"> <ins class="adsbygoo
ロゴをより魅力的に見せることができるクリエイティブな名刺のモックアップ素材を紹介します。 高品質で、クリエイティブなデザインを集めました。 Handcrafted Freebie Mock-Up ヴィンテージなデザインにぴったりなエレガントな名刺です。 Business Card Mockup Free PSD Graphics アクリルケースに入った名刺のモックアップ素材です。 Standing Business Card Mockup 名刺が角の点で立っているような、立体的な見せ方です。 Business Cards Mockup 黄色の枠が特徴的なデザインです。 Embossed Business Card MockUp エンボスデザインの名刺です。 Letterpress Business Cards MockUp 一般的なビジネス用名刺のモックアップです。 Psd Busines
次のページ
このページを最初にブックマークしてみませんか？
『WordPressのための便利帳』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
