images

WordPressの最新記事一覧にサムネイル画像をつけて見栄えを良くする – Newpost Catch –

Newpost Catch

記事の一覧などでは、ちょっとしたサムネイルがあったほうが、記事のイメージをつかみやすかったり、注目されやすいですよね。

でも、WordPressで用意されている標準の最新記事一覧には、サムネイル画像がついていないため、サムネイルを表示するにはテーマをカスタマイズする必要がありますが、テーマをいじるのはちょっと無追加しいという方も多いと思います。

今回紹介するプラグイン「Newpost Catch」を利用することで、簡単に最新記事一覧にサムネイルを追加することができます。

Newpost Catchについて

このプラグインをインストールすることで、ウィジェットに「Newpost Catch」が追加され、このウィジェットを利用することでサムネイル付きの最新の記事一覧を利用できるようになります。

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

もともと下図のような記事一覧が

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

下図のようになります。

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

プラグイン情報

制作者

Tetsuya Imamura

動作環境

3.3.1〜

ダウンロードURL

Newpost Catch


サムネイルの追加はちょっとした機能ですが、ブログの内容によってはとても効果的なものになるので、こういったプラグインを利用して簡単に実装してしまいましょう。

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

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

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


1つの記事で画像を沢山使うなら必須のWordPressプラグイン – Unveil Lazy Load –

mini1466748280

記事に画像を沢山使うとコンテンツが華やかになりますし、説得力なども増すのでどんどん使って行きたいところですが、高画質な画像を沢山使うと気になるのが画面の表示に対する影響です。
画像を使って記事のクオリティを上げても、表示速度が遅くなってしまってはせっかくアクセスしてくれた人もすぐに離脱してしまいます。

このブログで以前にご紹介した「EWWW Image Optimaizer」などで画像を圧縮することで画面の表示を早くすることができますが、写真自体の点数が増えてくると、画像の圧縮だけでは対応しきれなくなってきます。

そこで、1つの記事で写真の点数が多くなった場合に画像の読み込みのタイミングを調整するプラグイン「Unveil Lazy Load」が役に立ちます。
Unveil Lazy Load

Unveil Lazy Loadについて

このプラグインを利用することで、通常であれば記事にアクセスした際に一気に画像を読み込んでいたところを、画面が表示されている範囲の画像のみを読み込無事により、初回のページ表示速度を劇的に改善します。

スクロールに応じて画像をロード

画面のスクロールに応じて画像を読み込むため、記事を開いた時の画像読込みの時間が劇的に短縮されます。

Lazy load
(読み込みも一瞬なので、よく見なければ初めから表示されているように感じます)

Unveil.jsの採用

「Unveil.js」は非常に軽量なjQueryのプラグインで、わずか0.87KByteほどです。

HTTPリクエスト数を削減

このプラグインでは読み込まれている間にダミー画像を表示させていますが、その表示のためのHTTPリクエストを削減するために、Data URI Scheme適用によりHTMLに直接画像を追加しています。

プラグイン情報

制作者

marubon

動作環境

3.2〜

ダウンロードURL

Unveil Lazy Load


写真等の画像を多く利用している方はこのプラグインを使うことで劇的にページの読み込みが変わります。
SEOの評価でもページの表示速度が採用されているので、標準として組み込んでおいてもいいプラグインですね。
ダブルドット合同会社 代表社員
Webディレクター
1980年生まれ

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

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

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