三好 泰史

WordPressの管理画面のログイン履歴を確認したいなら - Crazy Bone –

crazybone

WordPressはあまりにもメジャーなため、様々なアタックがサイトに対して実行される可能性が非常に高いです。

そのため、構築時のセキュリティには気を使わなければならないのですが、表面上はなかなか気づきにくいのが問題としてあります。

そのため、今回ごお紹介する「Crazy Bone」を導入することで、管理画面へのアクセスログを確認できるようにしておきましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-5-57-02

ログインエラーなどがあると下記のように表示されます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-6-02-01

RICG Responsive Imagesについて

このプラグインでは、管理画面のアクセ師情報を確認することができます。

Tracks user name, time of login, IP address and browser user agent.

プラグイン情報

制作者

tevlp

動作環境

4.0〜

ダウンロードURL

RICG Responsive Images

ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。


WordPressのちょっと邪魔な内部リンクのトラックバックを無効化 - No Self Pings –

pinback

ワードプレスでは内部リンクを貼るとトラックバックとしてコメントが付くようになっています。

外部サイトからのリンクであれば通知されてきても問題ないのですが、内部リンクでもトラックバックがついてしまうと、コメントについた[1]が気になってしまいます。

このコメントが付く機能はピンバックという機能です。

内部リンクは自分で記事を書いたりページを構築したりしているので、わざわざ通知が切る必要はありませんよね。

その内部リンクのピンバックを無効化するのが「No Self Pings」というプラグインです。

No Self Pingsについて

このプラグインを有効にすると内部リンクのピンバックを無効化することができます。

インストール

no-self-pings-install

プラグイン情報

制作者

Micheel Adams(mdawaffe)

動作環境

4.6.1〜

ダウンロードURL

No Self Pings

ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。


WordPressで記事を書くのに集中したいならこのプラグイン - Just Writing –

just-writing

ブログで記事を書き続けるのは大変です。

今回紹介するプラグイン「Just Writing」は標準で用意されている執筆集中モードを更に改善したものです。

Just Writingについて

Distraction Free Writing (DFW)モードは記事を執筆するにはとても素晴らしいですが、もっと素晴らしい機能を追加し、さらに使いやすくしたのが「Just Writing」です。

元の執筆集中モード

%e5%85%83%e3%81%ae%e9%9b%86%e4%b8%ad%e5%9f%b7%e7%ad%86

Just Writing

just-writing%e3%81%ae%e9%9b%86%e4%b8%ad%e5%9f%b7%e7%ad%86

インストール

justwriting%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab

現在利用できる機能

* Address
* Align Full
* Align Left
* Align Right
* Background Color
* Block Quotes
* Copy
* Cut
* Font
* Font Color
* Font Size
* H1
* H2
* H3
* H4
* H5
* H6
* Indent
* Insert More Tag
* Insert Custom Character
* Outdent
* Paragraph
* Paste
* Paste as Text
* Paste from Word
* Preformatted
* Preview
* Redo
* Remove Formatting
* Spellcheck
* Strikethrough
* Subscript
* Superscript
* Underline
* Undo

プラグイン情報

制作者

Greg Ross

動作環境

3.5.0〜

ダウンロードURL

Just Writing


このプラグインは特に設定も必要ないので、非常に簡単に導入することができます。
記事を書く際はいろいろなものが見えているとなかなか執筆が進まないので、こういったものは自分にあったものをどんどん探していきましょう。
ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。


商品ページやランディングページのデザインを集めたサイトで デザインのイメージをしっかり伝える! - UI Template –

ui-template

会社でホームページやウェブサービスを作る、もしくは改修したいと思っている人は多いのでは無いでしょうか。
その場合、構成やデザインを考えていく必要がありますが、それをうまくまとめることができなかったり、イメージははっきりしていてもそれをうまく伝えられないといった問題を抱えるケースがよく有ります。

そうなってしまうと、完成間近になってのリテイクが多くなってしまうため、工数・納期・品質に多大なる問題が出てきます。

今回はそんな時に便利なサイト「UI Template」をご紹介します。

9%e6%9c%88-12-2016-20-11-50

UI Templateについて

このサイトはいわゆるWebギャラリーで、様々な商品やページのサンプルを見ることができます。

海外のサイトですが、様々なデザインを見ることができるようになっています。

デザインタイプや目的などで探すことが可能

数が多いと目当てのデザインを探すのは難しくなってきますが、「UI Template」ではデザインのフィルターができるようになっており、簡単に目的のデザインを探すことができるようになっています。

9%e6%9c%88-12-2016-21-23-05

デザインを伝える

いいなとおもった構成やデザインを伝える際に、参考にするデザインとしてこのサイトのページのURLを連絡することで、デザインの要望が伝わりやすくなり、完成間近でのリテイクを少なくすることができます。

サイトのURLを連絡する際にどういった点が良いかなどを伝えることで、さらに伝わりやすくなりますね。

実際のサイトも確認できます

詳細ページには「Visit Site」のボタンが用意されており、画像だけでなく、実際のサイトも確認できますので、雰囲気だけでなく実際にサイトとして見た場合にどういった印象になるのかを確認することができます。

9%e6%9c%88-12-2016-22-16-52

問題点

デザインを探していいなと思ったサイトを見ようと思った際に、すでにリニューアルされていて実際に見られないことがあります。
デザインに注力しているサイトの場合、細かな仕様の変更をかなりの頻度で行って改善していっているため、同じ状態が長く続いていないという問題があります。

これは仕組みではどうにもならないので、「Internet Archive」を利用して過去のデザインを探してみましょう。

まとめ

webサイトのギャラリー自体は国内でもよく見かけるのですが、ここまで洗練されたデザインを探しやすくしているサイトはあまりありません。
英語ですが、サイト自体のデザインが良く出来ているため、英語が得意でないかたでも扱いやすいと思います。

ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。


WordPressにページのトップに戻るボタンを追加するプラグイン – Dynamic “To Top” Plugin –

dynamic-to-top

ブログの記事などはどうしても縦に長くなってくるので、記事の最後の文章からページのトップに行くにはかなりのスクロールをしなければならなくなります。

そのため、多くのブログではページのトップに戻れるボタンを配置しています。

今回は、その「ページのトップに戻る」ボタンを簡単に追加することができるプラグインをご紹介します。

Dynamic “To Top” Pluginについて

このプラグインを利用すると、ページのトップに戻るボタンを設置することができるようになります。

また、ページのトップに戻る時の動きを調整することができるようになっています。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-09-22-18-52

インストール方法

9%e6%9c%88-09-2016-22-15-37

プラグイン情報

制作者

Matt
Tim Berneman

動作環境

3.4〜

ダウンロードURL

Dynamic “To Top” Plugin


ページのトップに戻るボタンを追加する開けであれば、そんなに難しいカスタマイズではありませんが、後からスクロールの調整をしたり、色などを変更できるようにするのは非常に大変です。
こういったプラグインを入れておくことで、後から管理者でも変更ができるのはとてもありがたいですね。
ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。


WordPressに様々なスタイルのGoogle Mapを簡単に使えるようにするプラグイン - TCD Google Maps –

tcd-google-maps

お店やセミナーを開く場合、サイトにGoogle Mapを表示することがあるかと思います。

Google Mapから標準機能を利用して地図を表示することもできますが、デザインを変更しようとするとカスタマイズが必要になってくるため、知識が無いと対応していくのが難しくなります。

標準の地図の共有方法

9%e6%9c%88-09-2016-01-48-05

実際に取得したGoogle Map

今回紹介する「TCD Google Maps」プラグインを利用すれば簡単にGoogle Mapのスタイルをカスタマイズすることができるようになります。

TCD Google Mapsについて

「TCD Google Maps」は、TCD開発チームが制作したプラグインです。サイトに合わせたおしゃれなデザインのGoogle Mapsを利用したい場合にご利用下さい。

「TCD Google Maps」でこんなことが出来ます!

・デザインが豊富に揃っている(Discreet,Flat pale,Ultra lightなど全10タイプ)
・ショートコードで記事中に簡単に表示できる
・住所を入力するだけで表示
・縦・横サイズ・ズームの調整機能
・ボーダーの表示、非表示
・中央表示の選択

http://design-plus1.com/tcd-w/2016/01/googlemap.htmlより引用

利用方法については作者様のページで詳しく紹介されているので、そちらをご確認ください。

WordPressの公式プラグインになっていますので、管理画面から簡単にインストールすることができるようになっています。

9%e6%9c%88-09-2016-01-41-23

プラグイン情報

制作者

DesignPlus

動作環境

3.5.0〜

ダウンロードURL

TCD Google Maps


いろいろな場所でセミナーをやっている場合などは、記事中で場所の説明を行うことも多いですので、こういったプラグインがあると非常に便利です。
「ただ地図を表示すればいい」から一歩先に進むことができるプラグインです。

ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。


WordPressの記事内でアイコンフォントを簡単に使えるようにする - WP Visual Icon Fonts –

wp-visual-icon-fonts

最近はちょっとしたアイコンはアイコンフォントを利用して表示することが多くなりました。

そのほうがいちいち画像を用意する必要も無いですし、フォントなので文字を拡大したりレティナディスプレイなどの高画質なもので閲覧しても綺麗に表示することができます。

ただ、このアイコンフォントを利用するにはアイコンフォントをダウンロードやCDNを利用しheaderにヘッダーに追加するなどの作業が必要になってきます。

はじめからアイコンフォントを利用する想定でテーマを作成しているのであればいいですが、簡単にテーマを組み込んだりするだけで利用している場合には少しハードルが高いですね。

今回紹介するプラグイン「WP Visual Icon Fonts」を利用すると、そんなアイコンフォントを簡単に利用することができるようになります。

WP Visual Icon Fontsについて

このプラグインは「Font Awsome」と「Genericons」に対応しています。

screenshot-1-1

プラグインを有効にすると投稿画面でアイコンを追加する箇所が追加されます。
9%e6%9c%88-08-2016-04-24-38

  • Simple option to select the icon font family you prefer
  • Easily select an icon in the visual editor window
  • Search and instantly Filter through the icons to get the one you want quickly
  • See the icons in the visual editor
  • Adjust the colour and size of the icons (and any other text elements in the editor)
  • Includes Font Awesome 4
  • Includes Genericons

プラグイン情報

制作者

Paul van Zyl

動作環境

3.0.1〜

ダウンロードURL

WP Visual Icon Fonts


アイコンフォントはサイトを作る上でちょっとしたアクセントにもなるので、簡単に使えるのはありがたいことですね。

ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。


WordPressのウィジェットを簡単に固定化したいなら – Q2W3 Fixed Widget (Sticky Widget) –

Q2W3 Fixed Widget (Sticky Widget)

記事の本文が長くなるとサイドに配置しているメニュー画面外から消えてしまうため、最近ではメニューを固定することが増えてきています。

ただ、このメニューの固定化を行うにはJavascriptやCSSの知識が必要になるため、簡単にはできません。

それを、今回ご紹介するプラグイン「Q2W3 Fixed Widget (Sticky Widget)」を利用することで解決することができます。

Q2W3 Fixed Widget (Sticky Widget)について

このプラグインを利用することでウィジェットを固定することができます。

9月-07-2016 00-35-31

設定

プラグインを有効にするとウィジェットの設定画面に「Fixed Widget」の項目が追加されます。そちらにチェックを入れることで、該当のウィジェットが固定されることになります。

プラグイン情報

制作者

Max Bond

動作環境

4.0〜

ダウンロードURL

Q2W3 Fixed Widget (Sticky Widget)

ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。


WordPressでAMPを利用してモバイルに最適化したコンテンツの提供を可能にするプラグイン - AMP –

AMP

現在はスマートフォンなどのモバイル端末でインターネットをすることが増えてきました。

ただ、スマートフォンなどで見る場合、通信速度や扱う機種のスペック等によって、ページの表示に非常に時間がかかるケースが多くあります。

そこで、AMPと呼ばれるプロジェクトがGoogleによってはじめられました。

今回紹介するプラグインはAMP(Accelerated Mobile Pages)と呼ばれるGoogleが進めてきたプロジェクトに対応するためのプラグインです。
詳細についてはGoogleのAccelerated Mobile Pages プロジェクトについて — 導入ガイド日本語版を本日公開しました
を確認してください。

このプラグインは Accelerated Mobile Pages (アクセラレーテッド・モバイル・ページ、AMP) プロジェクトへのサポートを追加します。AMP は、どこからでも素早く読み込めるモバイルに最適化したコンテンツの提供を目指すオープンソースイニシアチブです。

プラグインを有効化すると、サイトの全投稿に対する AMP 互換バージョンのページが生成されます。このページは投稿 URL の末尾に /amp/ を追加するとアクセスできます。例えば投稿 URL が http://example.com/2016/01/01/amp-on/ であれば、AMP バージョンは http://example.com/2016/01/01/amp-on/amp/ で表示できます。サイトで Pretty パーマリンクが無効になっている場合、末尾に ?amp=1 を追加すれば同様になります。例: http://example.com/2016/01/01/amp-on/?amp=1

なぜ、AMPに対応すると表示速度が早くなるのか

AMPに対応することで、ページがGoogleにキャッシュされます。そのため、キャッシュされたページを表示するので、個別にウェブページへのアクセスが不要になり、高速にページを表示できるようになります。

また、AMPに対応するためには、かなりの制限があるため、シンプルな構成が求められることになります。そのため、結果としてデータ量が非常に抑えられます。

AMPに対応するメリット

かなり早くサイトが表示されるため、ユーザーが簡単にページを見れるようになり、ユーザーの閲覧の負担を減らすことができます。
さらに、その効果として、サイトの回遊率が上がることが期待できます。

AMPに対応するデメリット

AMPに対応するにはとても制限があるため、デザインを調整しないと大幅にデザインが崩れる可能性が有ります。
また、まだまだ新しいプロジェクトなので、対応することと、確認することにとても時間がかかります。

プラグイン情報

制作者

Automattic
Mohammad Jangda
Joen Asmussen
Bradford Campeau-Laurion

動作環境

4.4〜

ダウンロードURL

AMP

ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。


たったひとつのプラグインで実用的な37種類の機能が利用可能なWordPressのJetPackプラグインの機能紹介 ~ パブリサイズ ~

パブリサイズ

今回はJetPackの機能である「パブリサイズ」についてご紹介します。

パブリサイズについて

パブリサイズ共有を使うとブログを人気のソーシャルネットワークサイトに連携して新しい投稿を自動的に友人へシェアできます。
→ 自分だけまたはブログ上のすべてのユーザーとの連携を選択できます。
パブリサイズ共有を使うと、Facebook・Twitter・Tumblr・Google+・Path・Linkedin で投稿を共有できます。

スクリーンショット 2016-09-04 19.50.56

パブリサイズの動作は初回の投稿時のみ行われるため、タイトルを修正したり、コンテンツを修正した場合には、投稿先のソーシャル上の投稿を編集する必要が有ります。

そのため、作業時に間違って公開ボタンを押してしまうと、各ソーシャルメディアにも投稿されてしまうので注意が必要です。

ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

  
大学卒業後、法律事務所にてシステム部の部長として、ホームページを活用してわずか数年で数人規模から数百人規模へと成長させ、その経験を元に、ECサイト制作会社にてディレクターとして小規模から大規模のディレクションを行う。
インターネットになれないWeb担当者や店舗オーナーの方にもインターネットの恩恵を受けられるようにしたいと思い、2015年にダブルドット合同会社を設立。

「デジタルデバイドなくす」をモットーに誰もがインターネットの恩恵を受けられる社会を目指して活動中。

趣味はロードバイクで、休日は晴れていれば基本的に走っています。