サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
買ってよかったもの
techmemo.biz
2014年もあとわずかで終わりですね。皆さんはどんな一年でしたか？ 私はというと、4月に開業届けを提出してフリーランスとして活動を開始したのもあり、節目となる一年だったように感じます。非常に慌しくあっという間に過ぎ去りました。2015年はもう少し余裕を持って生活したいです。 さて、毎年恒例となっていますが、年の瀬ということで今年もお世話になったGoogle Chrome拡張機能を紹介したいと思います。順番はABC順です。 AdMatrix Analytics 表示しているサイトのSEOをチェックすることができる拡張機能です。被リンクやらキーワード対策について確認することができます。 Always Clear Downloads ファイルをダウンロードした時に、ブラウザ下部に出てくるダウンロード履歴を自動で閉じてくれる拡張機能です。ダウンロードが完了したら、勝手にクリアするので手動で閉じる必
さくらのVPSでWordPressが動く環境を構築するまでの全手順を解説いたします。 おおまかな手順は、以下の通りです。 ステップ1. SSHでVPSに接続する ステップ2. 作業用ユーザーを作成する ステップ3. 鍵認証の設定 ステップ4. SSHの設定 ステップ5. ファイアーウォールの設定 ステップ6. Webサーバーの設定 ステップ7. FTPの設定 ステップ8. マルチドメインの設定 ステップ9. epelとremiリポジトリの導入 ステップ10. PHPのインストール ステップ11. MySQLのインストール ステップ12. phpMyAdminのインストール ステップ13. ネームサーバーの設定 ステップ14. メールの設定 結構大変ですが、手順通りに進めていけば、サーバーに詳しくなくても構築できるように詳しく解説していますので、ぜひご参考にしていただければと思います。 ステ
Visual Studio Code(VSCode)でよく使うショートカットキーをまとめてみました。 あんまり量が多いと覚えきれないので、本当によく使うものに厳選しています。 Visual Studio Codeでよく使うキーボードショートカットまとめ
Image Cyborgは、入力したURLのページ内にある画像をすべて一括ダウンロードすることができるWEBサービスです。 Image Cyborgの使い方 Image CyborgにアクセスしてURLを入力します。 [Download Image]をクリックすると、画像がZIPファイルでダウンロードされます。 あとがき そんなに使う機会はないかもしれませんが、こういうサービスを1つ知っておくといざという時に役立ちますね。
GIJIは、Web上で議事録を作成・共有することができるWEBサービスです。 作成した議事録は共有だけでなく、テキストもしくはPDFでのダウンロードも可能です。 GIJIの使い方 GIJIにアクセスして、[無料でお試し]からアカウントを作成します。 メールアドレスを入力してアカウント登録すると、承認用のメールが届くので、メール内のURLをクリックして下記の項目を入力します。 組織名 組織識別子 名前 パスワード 「利用規約に同意します」にチェックを入れ、[本登録する]をクリックすればアカウント登録完了です。 [GIJIを使う]をクリックすると、ダッシュボードに移動します。 最初にフォルダを作成して、議事録一覧に議事録を追加しましょう。 議事録のタイトルを入力して[作成]をクリックします。 議題と内容・タスクを箇条書きで入力していきます(Enterで確定)。日付や時間、参加者なども設定しまし
Smush Image Compression and Optimizationは、アップロードした画像を自動的に圧縮・最適化することができるWordPressプラグインです。 画像を劣化させずにファイルサイズを削減してくれます。 Smush Image Compression and Optimizationのインストール インストール手順は以下の通りです。 Smush Image Compression and Optimizationをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Smushを有効化します。 Smush Image Compression and Optimizationの設定 Smush Image Compression and Optimizationを有効化す
remove.bgは、写真の中から人物・動物・植物・モノ等の被写体のみを切り抜いてくれるWEBサービスです。 写真をアップロードするだけで自動認識され、被写体のみが切り抜かれます。 remove.bgの使い方 remove.bgにアクセスして、[Select a photo]から写真をアップロードします。もしくは[enter a URL]で、写真のURLを指定してもOKです。 すぐに切り抜いた写真が表示されます。[Download]ボタンをクリックすると、切り抜かれた写真をダウンロードすることができます。 綺麗に切り抜いてくれますね。 以下のように何かを手に持っている場合、手に持っているものも一緒に切り抜いてくれます。 また、影が髪とつながってしまいましたが、以下のような暗くて顔がこっちを向いていない写真でもちゃんと認識してくれます。 人物以外でも切り抜きできないか試してみましたが、以下の
素のJavaScriptとCSSでスクロールアニメーションを実装する方法 ステップ1. HTMLのマークアップ HTMLでは、アニメーション表示したい箇所に.animateを追加します。 <div class="animate"> スクロールアニメーション要素 </div> <ul class="list"> <li class="animate">スクロールアニメーション要素1</li> <li class="animate animate2">スクロールアニメーション要素2</li> <li class="animate animate3">スクロールアニメーション要素3</li> </ul> .animate2と.animate3は、タイミングをずらして表示するためのクラスです。.animate→.animate2→.animate3の順番で表示するようにCSSで指定します。 ステッ
エクスポート先は、「EXPORT TO」から好きな場所を選択します。今回はすぐダウンロードしたかったので、「FILE」を選択しました。 エクスポートが完了するまでしばし待ちます。 エクスポートが完了したら、「DOWNLOAD LOCALHOST」をクリックしてファイルをダウンロードします。 過去にエクスポートしたファイルは、[All-in-One WP Migration] – [Backups]からいつでもダウンロード可能です。 ブラウザ上からファイルをダウンロードできない場合は、FTPサーバーに接続して/wp-content/ai1wm-backups/配下から、拡張子が.wpressとなっているファイルを直接ダウンロードしましょう。 サイトデータのインポート 移行先のサイトにもAll-in-One WP Migrationをインストールして、[All-in-One WP Migrat
h1タグ評価チェックツールは、競合上位10位と比較して、ページ内のH1タグについて評価してくれるWEBサービスです。「文字数」「キーワード出現率」「先頭キーワード状況」を比較してくれます。 なお、h1タグ評価チェックツールは、SEO会社の株式会社ディーボが提供しています。 h1タグ評価チェックツールの使い方 h1タグ評価チェックツールにアクセスして、「対策URL」と「対策キーワード」を入力します。 [h1タグをチェックする]をクリックすると、解析結果が表示されます。 評価とコメントが表示されるので、SEO対策の参考にします。 あとがき 上位10位と同じにすれば良いというわけではありませんが、傾向に合わせて対策することで、順位が上昇する可能性は考えられます。 検索順位が伸び悩んでいる時などに、参考にしてみるのはいかがでしょうか。
WordPressを使ってサイトを作成すると、自動的に<head>に追加される項目がいくつかあります。自動で追加されるメタ情報などのタグは、テーマファイルのheader.phpをみてもらうとわかりますが、wp_head()というWordPressの関数で呼び出しています。 header.phpを見ると、以下のような記述がありませんか？この部分がタグの情報を呼び出しているんです。 <?php wp_head(); ?> でも、追加されるタグの中にはいらないものも結構あるんですよね。 今回はいらないタグを削除してヘッダーをすっきりさせる方法をご紹介いたします。 wp_headの情報はどこから読み込んでいるのか wp_head()で呼び出されるタグは、/wp-includes/default-filters.php に記述されています。default-filters.phpを開くと、以下のような
font-feature-settingsプロパティは、CSSを1行追加するだけで、いい感じに文字詰めを行ってくれるプロパティです。 文字詰めを調整するプロパティといえば、letter-spacingが思い浮かびますが、letter-spacingだとすべての文字が指定した値で均一に調整されます。 それに対してfont-feature-settingsは、文字の種類や記号などで詰める幅を自動で調整してくれます。そのため、自然な文字詰めを実現することが可能です。 font-feature-settingsの使い方は簡単で、文字詰めを行いたいセレクタに以下のCSSを追加するだけです。 p { font-feature-settings: "palt"; } ちょっとわかりにくいかもですが、左が文字詰めあり、右が文字詰めなしの場合です。以下の例では見出しも文字詰めしています。 カギ括弧などの記号
WordPressの投稿ではカテゴリーやタグを設定できますが、固定ページでは設定できません。固定ページでもカテゴリーやタグを設定したい、ということもあるかと思います。 そこで今回は、固定ページでもカテゴリーやタグを使えるようにする方法を紹介したいと思います。 固定ページでカテゴリーを使えるようにする方法 固定ページでカテゴリーを利用できるようにするには、利用しているテーマのfunctions.phpに以下のコードを追加します。 // 固定ページにカテゴリーを設定 function add_categorie_to_pages(){ register_taxonomy_for_object_type('category', 'page'); } add_action('init','add_categorie_to_pages'); // カテゴリーアーカイブに固定ページを含める funct
WordPressの記事一覧の中で、新着投稿に対して「New!」という文字を付ける方法を紹介したいと思います。 記事公開からの経過日数や経過時間によって「New!」を出し分けます。また、記事の公開日時ではなく更新日時から判断して出し分ける方法も紹介しています。 WordPressの記事一覧で投稿に「New!」を付ける方法 新着投稿に「New!」を付けるには、記事一覧のループ内に下記のコードを追加してあげます。 日数で指定する場合 経過日数で「New!」を出し分ける場合は、以下のコードを追加します。 <?php $days = 7; $today = date_i18n('U'); $entry = get_the_time('U'); $news = date('U',($today - $entry)) / 86400 ; if( $days > $news ){ print '<spa
Relevanssiは、WordPressの検索機能を強化することができるプラグインです。検索機能をかなり細かくカスタマイズすることが可能です。 Relevanssiのインストール インストール手順は以下の通りです。 Relevanssiをダウンロードします。 ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。 管理画面の[プラグイン]ページで、Relevanssiを有効化します。 Relevanssiの設定 Relevanssiを有効化したら、[設定] – [Relevanssi]で設定を行います。 Basic options Relevanssiの全般設定です。
WordPressには、ウィジェットというサイドバーなどに簡単にコンテンツを表示させることができる便利な機能があります。 ウィジェットは、管理画面の [外観] – [ウィジェット] から追加することができます。 「利用できるウィジェット」から使いたいウィジェットを表示させたいエリアにドラッグ&ドロップするだけで、最近の投稿などのコンテンツを表示させることができます。サイドバーがウィジェットになっていることが多いですね。 ウィジェットエリアを有効化する方法 テーマによってはこのウィジェット機能が使えないことがあります。そんなときは、functions.php に以下の記述を追加すればウィジェットが有効化されます。 if (function_exists('register_sidebar')) { register_sidebar(array( 'name' => 'ウィジェット名',
JOB POSTING GENERATORは、自社サイトの求人情報をGoogleしごと検索に表示させるために必要な構造化データを生成してくれるツールです。 必要な項目を入力していくと、Googleしごと検索用の構造化データを出力してくれます。 Googleしごと検索とは Googleしごと検索とは、ザックリいうとGoogleの検索結果に求人情報を表示してくれる機能のことです。 例えば、「正社員 求人」で検索すると、以下のように検索結果の上に「求人」という枠が表示されます。 このように、就職・採用に関する検索クエリに対して、求人情報を表示してくれるのがGoogleしごと検索です。 Googleしごと検索に求人情報を掲載するには 単純に自社サイトに求人情報を掲載しただけでは、Googleしごと検索で求人情報が表示されるようにはなりません。 JSON-LDという記法で記述したschema.org
bosyuは、SNSを使って人を募集することができるWEBサービスです。デザイナーさんを募集したり、気軽なものでいえばランチの相手を募集したりと、様々な用途で募集することができます。 bosyuの制作者は、Basecampの坪田さん(率いるチーム？)で、以下のような課題を解決したいという想いからbosyuを制作したそうです。 bosyuはSNSで募集時によくある課題を解決したいサービスです。こんなニーズで作りました。 pic.twitter.com/az4MqYJ2Pl — 坪田 朋 / Basecamp (@tsubotax) 2018年4月11日 bosyuの特長 SNSでカンタン募集 SNS上に募集情報を投稿することで、手軽に人を集めることができます。 シェア画像も自動生成 募集タイトルと詳細を入力すると、SNSに投稿するための画像が自動生成されます。画像を用意する必要がないため楽で
先日、GoogleドライブでWEBサイト(HTML/CSS)が公開できるようになりました。という記事がカテゴリ別人気エントリ入りしました。 いい機会なので、はてブの人気エントリがどうやって選ばれるかについて、以下にまとめてみたいと思います。 どれくらいのブクマ数を獲得すれば人気エントリに選ばれるのか 新着エントリに入るには・・・ まず、カテゴリ別の「新着」に表示されるのが3ブクマを超えてからです。新着に表示されなければ、はてなのページからはてブ数が増えていくことはありませんので、最初は3ブクマを獲得しなければいけません。 ただ、3ブクマ獲得するまでに時間がかかってしまうと新着エントリにも表示されません。最初のブクマがついたら、2時間程度で3ブクマまでいく必要があります。 カテゴリ別人気エントリに入るには・・・ カテゴリ別の人気エントリに入るには、10ブクマ以上が必要です。15ブクマを超える
管理画面の投稿一覧では、カテゴリーやタグの列は存在しますが、カスタムタクソノミーの列はありません。カスタムタクソノミーを作成しても、列は追加されないんです。設定したカスタムタクソノミーを確認するには、記事の編集画面にアクセスする必要があります。 投稿一覧でも設定したカスタムタクソノミーが確認できるようになった方が便利ですよね。そこで今回は、投稿一覧にカスタムタクソノミーの列を追加するためのカスタマイズ手順をご紹介いたします。 投稿一覧に列を追加する 管理画面の投稿一覧に列を追加するには、利用しているテーマのfunctions.phpをカスタマイズします。 まずは、追加の列を作成するために、以下のようなコードを追加します。 function add_custom_column( $defaults ) { $defaults['列の名前'] = 'タクソノミー'; return $defau
WordPress4.4以降では、画像を出力する際にsrcset属性とsizes属性が自動で追加されるようになりました。例えば、以下のような感じで、挿入した画像に自動的にsrcset属性とsizes属性が追加されます。 <img width="758" height="419" src="https://techmemo.biz/wp-content/uploads/2016/07/example.png" class="attachment-featured size-featured wp-post-image" alt="" title="" srcset="https://techmemo.biz/wp-content/uploads/2016/07/example.png 758w, https://techmemo.biz/wp-content/uploads/2016/07/
CSSだけで全画面の背景動画を実装する方法をご紹介いたします。ほぼコピペで実装できますので、サイトの背景に動画を表示したいとお考えの方は、ぜひ試してみてください。 なお、動画は別途ご用意いただく必要があります。 HTMLでは、videoタグで動画を設置します。記述する場所は、</body>の直前など、どこでも構いません。 <video autoplay loop poster="images/bg.png" id="video-background" muted> <source src="movie/bg.mp4" type="video/mp4"> </video> video要素に#video-backgroundを指定しておきます。 CSSでは、以下のように記述します。 #video-background { position: fixed; left: 0; top: 0; mi
カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法をご紹介いたします。 WordPressでの絞り込み検索といえば、有料プラグインの「FE Advanced Search」が有名です。FE Advanced Searchを導入すれば、簡単に絞り込み検索が実装できるかと思いますが、お値段59,800円とそこそこの費用がかかってしまうんですよね。 実際に自分で実装してみたところそこまで難しくはなかったので、有料プラグインを購入せずに絞り込み検索を実装したいという方向けに、カスタムタクソノミーのチェックボックスによる絞り込み検索の実装方法を解説したいと思います。 カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法 絞り込み検索フォーム フォーム部分は、以下のように記述します。 <form method="get" id="search-form" acti
基本は静的HTMLでサイトを制作し、新着情報やお知らせなど、一部だけWordPressの内容を表示させる方法をご紹介したいと思います。 WordPressはあくまでお知らせ等の記事を更新するための裏方で、実際に表示する部分はHTML側で調整します。 WordPressのパーマリンク設定を「基本」に設定する 後述する方法で、静的HTML内にWordPressの記事一覧を表示したり、固定ページの内容を表示させるためには、WordPressのパーマンリンク設定を「基本」にしておく必要があります。 WordPressをインストールしたら、パーマリンク設定は「基本」に変更しておきましょう。 静的HTML内でPHPを動作させる まずは、.htaccessに以下のコードを追加し、通常のHTMLファイル内でもPHPが動作するように設定します。 基本的には上記を追加すれば、HTML内でPHPが動作するように
ようやく重い腰を上げて当ブログを常時SSL(HTTPS)化しましたので、WordPressサイトを常時SSL化するための手順をまとめておきたいと思います。 作業の流れとしましては、以下のような感じになります。 ステップ1…
jQueryプラグインなどを使わずに、CSSのみでメガメニューを実装する方法をご紹介いたします。 以下デモページのようなメガメニューを作成します。デモページでは、”メニュー1″にマウスホバーすると、メガメニューが表示されます。 デモページを見る HTMLのマークアップは、以下のようにします。 <nav class="gnav-wrapper"> <ul class="gnav main-wrapper"> <li> <a href="">メニュー1</a> <div class="megamenu"> <ul class="megamenu-inner main-wrapper"> <li> <a href=""> <div class="megamenu-inner-img"><img src="images/megamenu-inner1-1.png" alt=""></div> <d
Really Simple SSLは、サイト全体を常時SSL化することができるWordPressプラグインです。 サイトを常時SSL化するには結構面倒な手順を踏まなくてはいけませんが、Really Simple SSLはそんな面倒な設定を自動的に行ってくれるプラグインです。 なお、事前にSSL証明書は準備する必要があります。利用しているサーバーで申請を行ってください。ちなみにエックスサーバーなら、SSL証明書は無料で利用可能です。 Really Simple SSLのインストール インストール手順は以下の通りです。 Really Simple SSLをダウンロードします。 ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。 管理画面の[プラグイン]ページで、Really Simple SSLを有効化します。 Really Simple SSLの設
WordPressには、タグのリンク一覧を表示できる”タグクラウド”というウィジェットが、デフォルトで用意されています。今回は、テーマ内にコードを記述することで、タグクラウドを使わずにタグの一覧を表示させる方法を紹介したいと思います。 すべてのタグを一覧表示させる方法と表示数を指定する方法の2パターンご紹介いたします。 タグの一覧をリスト表示させる方法 単純にすべてのタグ一覧をリスト表示させたい場合は、表示したい箇所に以下のコードを記述します。 <ul> <?php $posttags = get_tags(); if ($posttags) { foreach($posttags as $tag) { echo '<li><a href="'. get_tag_link($tag->term_id) .'">' . $tag->name . '</a> ('. $tag->count .
Picturefill.jsは、picture要素に対応していないブラウザでもpicture要素による画像の切り替えができるようになるポリフィルです。 picture要素を使うことで、ブラウザの幅によって画像を出し分けることができます。例えば、以下のように記述すると、1000px以上ならextralarge.jpg、800px以上1000px未満ならlarge.jpg、800px未満ならmedium.jpgが表示されます。 <picture> <source srcset="extralarge.jpg" media="(min-width: 1000px)"> <source srcset="large.jpg" media="(min-width: 800px)"> <img src="medium.jpg" alt=""> </picture> このように、picture要素は非常に
次のページ
このページを最初にブックマークしてみませんか？
『TechMemo | テクノロジーをメモするブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
