shortcodes

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年にダブルドット合同会社を設立。

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

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


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

markdown

今回はJetPackの機能である「Markdown」についてご紹介します。

Markdownについて

Markdown を使うと、一般的な文字や記号を使ってリンク、リスト、その他のスタイルを投稿やコメントに追加できます。Markdown は、複雑なコードやショートカットを覚えることなく、キーボードのみを使ってすばやく簡単にリッチテキストを書きたいというライターやブロガーの方に支持されています。

この機能を有効にすると、Markdown記法を使って記事などを記述できるようになります。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。
Wikipediaより引用

代表的な記法は WordPress.com に記載されていますのでそちらを参考にしてください。
http://en.support.wordpress.com/markdown-quick-reference/

スクリーンショット 2016-08-09 23.25.04

under-arrow

スクリーンショット 2016-08-09 23.25.28

まとめ

Markdownで記事がかけるようになると、HTMLがあまりわからなくても簡単に記事を書くことができるようになります。
特に、リストや表を作成するときに非常に便利です。

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

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

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

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


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

JSON API

今回はJetPackの機能である「JSON API」についてご紹介します。

この機能は主にプログラマや開発者向けで、WordPressと連携するWebサービスやアプリを作成する際に使うと良いでしょう。

JSON APIについて

この機能を有効にすると、OAuth2 による認証および WordPress.com REST API を利用して自身のWordPressの情報を操作したり使用したりすることができるようになります。

アクセス方法

下記にアクセスすることでAPIにアクセスできるようになります。(※現在は無効にしています。)

https://public-api.wordpress.com/rest/v1.1/sites/d2inc.jp/

取得されたデータ例

先ほどのURLにアクセスすると下図のようなデータを取得することができます。

スクリーンショット 2016-08-09 22.33.58

利用できるAPIについては下記のURLを参考にしてください。

https://developer.wordpress.com/docs/api/


まとめ

このように、WordPressの情報をかなり自由に扱うことができるので、連携するアプリやサイトを作成する際には非常に便利です。
ただ、欠点としては一度WordPress.comを経由するため速度面については多少我慢する必要があります。

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

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

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

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


たったひとつのプラグインで実用的な37種類の機能が利用可能なWordPressのJetPackプラグインの機能紹介 ~ Gravatar ホバーカード ~

Gravatar ホバーカード

今回はJetPackの機能である「Gravatat ホバーカード」についてご紹介します。

Gravatar ホバーカードとは

Gravatarと連携するホバーカードです。

これは、名前やプロフィール情報・写真などをGravatarと連携してユーザーアイコンにマウスを乗せるとカード型で表示します。

スクリーンショット 2016-08-09 21.46.27

under-arrow

スクリーンショット 2016-08-09 21.30.32

ホバーカード内の[View Complete Plofile]をクリックすると、Gravatarアカウントのプロフィールページが表示されます。

スクリーンショット 2016-08-09 21.33.14

これは、機能を有効にした際に、「ディスカッション設定」にGravatar ホバーカードの項目が追加され増すので、ココにチェックが入っていれば上図のように表示されます。

スクリーンショット 2016-08-09 21.42.12

まとめ

このGravatar ホバーカードは必須というわけではありませんが、WordPress.comを利用している層(プログラマーなどのIT関係者)が多い場合は利用する価値が高いでしょう。

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

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

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

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


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

beautifulmath

今回はJetPackの機能である「Beautiful Math」についてご紹介します。

このBeautiful Mathでは、LaTexを利用して複雑な数式を表示することができます。

LaTeX(ラテック、ラテフ、レイテック、レイテックス)とは、レスリー・ランポートによって開発されたテキストベースの組版処理システムである。電子組版ソフトウェア TeX にマクロパッケージを組み込むことによって構築されており、単体の TeX に比べて、より手軽に組版を行うことができるようになっている。本来の表記は LaTeX であるが、プレーンテキストや電子メールなどでは、大文字と小文字を組み合わせて“LaTeX”と表記する。
Wikipediaより引用


Beautiful Mathについて

以下の様な数式を表示することが可能です。

スクリーンショット 2016-08-09 17.42.29


数式は以下のように記載します。

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

表示サイズを変更

コードの最後に「&s=n」を追加することでサイズを変更することができます。

&s=4

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

&s=3

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

&s=2

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

&s=1

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

&s=0

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

&s=-1

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

&s=-2

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

&s=-3

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

&s=-4

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}

色指定

数式の色を指定することができます。

背景色は「&bg=16進数の色指定」
文字色は「&fg=16進数の色指定」

で指定することができます。

色については下記のサイトなどを参考にしてください。

WEB色見本 原色大辞典 – HTML Color Names

背景色:aliceblue 文字色:midnightblue

sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1}


普通にブログを書いていてもなかなか数式を表示したいということは少ないかもしれませんが、いざというときに簡単に使えるようにできるのが良いですね。

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

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

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

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


たったひとつのプラグインで実用的な37種類の機能が利用可能!WordPress.comを創ったAutomatic社が提供するプラグイン – Jetpack by WordPress.com – ~機能一覧編~

Jetpack by WordPress.com

JetPackはもともとWordPress.com用に提供されていた機能をサーバーインストール型のWordPressでも利用できるようにしたプラグインです。

WorPress.comとWordPress.comについては以前の記事(初めてでも5分で分る!これからWordPressを始めるための予備知識)を参照してください

このプラグインを利用するには、WordPress.comのアカウントが必要ですので、事前に取得しておきましょう。

このWordPress.comのアカウントは以前紹介したスパムコメントを防ぐ「Akismet」でも利用するので、とっておいて損はないです。

Jetpackについて

このプラグイン1つで37の機能を利用することができるようになっています。

初めてWordPressを利用する際に、あまりたくさんのプラグインをインストールしたくない場合などに有効です。

各機能については個別に「有効/無効」が設定できるため、必要な機能のみを利用することができます。

機能が多いため、今回は現在利用できる機能の一覧のみをご紹介し、今後各機能についてご紹介していきます。

スクリーンショット 2016-08-09 15.56.55

  1. Beautiful Math
  2. Gravatar ホバーカード
  3. Markdown
  4. ウィジェット表示管理
  5. カスタムCSS
  6. カスタム投稿タイプ
  7. カルーセル
  8. コンタクトフォーム
  9. サイトアイコン
  10. サイトマップ
  11. サイト認証
  12. ショートコード埋め込み
  13. タイルギャラリー
  14. モバイルテーマ
  15. 一括検索
  16. 共有
  17. 無限スクロール
  18. 追加サイドバーウィジェット
  19. JSON API
  20. Photon
  21. VideoPress
  22. WP.me短縮リンク
  23. いいね
  24. コメント
  25. サイト統計情報
  26. シングルサインオン
  27. スペルと文法
  28. データバックアップ
  29. パブリサイズ
  30. プロテクト
  31. メール投稿
  32. モニター
  33. 一元管理
  34. 拡張配信
  35. 購読
  36. 通知
  37. 関連投稿

上記のように非常に沢山の機能に対応しています。

プラグイン情報

制作者

4.4

動作環境

Automatic 他90人〜

ダウンロードURL

Jetpack by WordPress.com


このプラグインを利用することでかなりの機能を追加していくことができますが、他のプラグインと処理の競合などが起きたりする可能性もあるので、注意が必要です。

また、テーマで機能がすでに実装されていると、無駄に処理が重くなったりすることもあり得るため、注意が必要です。

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

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

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

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


WordPressのショートコードで簡単アニメーション[後編] – Shortcodes Ultimate –

shortcodeultimate-animation2

前々回から引き続き、「Shortcodes Ultimate」の紹介です。

前回に引き続きアニメーションのご紹介を行っていきます。

アニメーション

slideInDown


slideInLeft


slideInRight


slideOutUp


slideOutLeft


slideOutRight


bounceIn


bounceInDown


bounceInUp


bounceInLeft


bounceInRight


bounceOut


bounceOutDown


bounceOutUp


bounceOutLeft


bounceOutRight


rotateIn


rotateInDownLeft


rotateInDownRight


rotateInUpLeft


rotateInUpRight


rotateOut


rotateOutDownLeft


rotateOutDownRight


rotateOutUpLeft


rotateOutUpRight


lightSpeedIn


lightSpeedOut


hinge


rollIn


rollOut


いかがでしたでしょうか、ちょっとたくさん載せているので効果が被ったりして見難いところもありますが、これで全てのアニメーションをご紹介しました。

少しでも参考になれば幸いです。

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

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

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

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


WordPressのショートコードで簡単アニメーション[前編] – Shortcodes Ultimate –

shortcodeultimate-animation

前々回から引き続き、「Shortcodes Ultimate」の紹介です。

今回は利用できるアニメーションを紹介していきたいと思います。
ただ、利用できるものが非常に多いため、2回に分けてご紹介していきたいと思います。

アニメーション

flash


bounce


shake


tada


swing


wobble


pulse


flip


flipInX


flipOutX


flipInY


flipOutY


fadeIn


fadeInUp


fadeInDown


fadeInLeft


fadeInRight


fadeInUpBig


fadeInDownBig


fadeInLeftBig


fadeInRightBig


fadeOut


fadeOutUp


fadeOutDown


fadeOutLeft


fadeOutRight


fadeOutUpBig


fadeOutDownBig


fadeOutLeftBig


fadeOutRightBig


プラグイン情報

制作者

MadFork
Vladimir Anokhin

動作環境

3.5〜

ダウンロードURL

Shortcodes Ultimate


いかがでしたでしょうか、今回ご紹介したので大体半分くらいのアニメーションです。

いろいろな動きを試すことができるので、この記事と次回の記事を合わせて確認して使いたいアニメーションがあるかどうかを調べてみるのも良いですね。

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

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

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

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


WordPressのショートコードでこんなにも簡単に装飾が可能に!- Shortcodes Ultimate –

shortcodeultimate2

前回ご紹介したShortcodes Ultimateですが、今回はその中の装飾についてご紹介していきます。

Shortcodes Ultimateとは

Shortcodes Ultimateはショートコードで様々な機能を追加できるプラグインです。

装飾については別途有料で購入することができるようになっています。

以下で利用できる装飾の例を記載していきますので、参考にしてください。

見出し


見出しテキスト

ハイライト


 強調表示するテキストの背景色 

ラベル


ラベル ラベル ラベル ラベル ラベル ラベル ラベル

引用


引用

Dropcap


D D D D

リスト


  • 並び項目
  • 並び項目
  • 並び項目

ボタン


ボタンテキスト ボタンテキスト ボタンテキスト ボタンテキスト ボタンテキスト ボタンテキスト ボタンテキスト ボタンテキスト

サービス


サービスタイトル サービスタイトル
サービスの説明

ボックス


これはボックスのタイトルです。
ボックスのコンテンツ
これはボックスのタイトルです。
ボックスのコンテンツ
これはボックスのタイトルです。
ボックスのコンテンツ
これはボックスのタイトルです。
ボックスのコンテンツ
これはボックスのタイトルです。
ボックスのコンテンツ

ノート


ノートテキスト

タブ


Title 1Title 2Title 3
コンテンツ 1
コンテンツ 2
コンテンツ 3

スポイラー


スポイラーのタイトル

アコーディオン


スポイラーのタイトル
スポイラーのタイトル
スポイラーのタイトル


コンテンツ
コンテンツ
コンテンツ

カラム


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet.

プラグイン情報

制作者

MadFork
Vladimir Anokhin

動作環境

3.5〜

ダウンロードURL

Shortcodes Ultimate


いかがでしたでしょうか、上に記載したのは一部の例で、色の変更などができるものもあります。

次回もまた別の機能分についてご紹介していきます。

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

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

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

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


WordPressのショートコードを拡張して様々な効果を実現! – Shortcodes Ultimate –

shortcodeultimate

WordPressにかぎらず、ブログやサイトを運営するときに、視覚効果やアニメーションなどを追加していきたい時があると思います。

ただ、そういったものを利用していくにはHTMLやCSSなどの知識が必要になってくるため、簡単には実装することができません。

そんないろいろな機能をWordPressのショートコードという機能をりようして簡単に実現できるようにしてくれるのが、今回紹介するプラグイン「Shortcodes Ultimate」です。

Shortcodes Ultimateについて

このプラグインは50位上のショートコードが用意されており、様々な設定も可能になっています。

対応している起動

スクリーンショット 2016-07-24 20.03.32

  • 見出し
  • タブ
  • スポイラー
  • アコーディオン
  • 仕切り
  • スペーサー
  • ハイライト
  • ラベル
  • 引用
  • ドロップキャップ
  • フレーム
  • 絡む
  • リスト
  • ボタン
  • サービス
  • ボックス
  • ノート
  • 拡大
  • ライトボックス
  • ツールチップ
  • プライベート
  • YouTube
  • Vimeo
  • Screenr
  • デイリーモーション
  • オーディオ
  • 動画
  • テーブル
  • パーマリンク
  • メンバー
  • ゲスト
  • RSSフィード
  • メニュー
  • サブページ
  • 文書
  • Googleマップ
  • スライダー
  • カルーセル
  • ギャラリー
  • 投稿
  • ダミーテキスト
  • ダミー画像
  • アニメーション
  • メタ
  • ユーザー
  • テンプレート
  • QRコード
  • スケジューラ

プラグイン情報

制作者

MadFork
Vladimir Anokhin

動作環境

3.5〜

ダウンロードURL

Shortcodes Ultimate


こんk内の記事では簡単な概要のみをご紹介して、次回から何回かに分けて主なものをご紹介していきます。

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

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

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

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