もし今、頑張って更新しているのに、アクセスも問い合わせも増えないというお悩みをお持ちの方は、きっと淋しい思いをされていらっしゃると思います。（せっかくWEBサイト作ったのに・・・）それは必ず改善できる事なので、ちょっと立ち止まってこの記事を読み、セルフ診断をやってみて欲しいです。

今でこそWEBサイトからお問い合わせが来ない事がありませんが、昔はいつも悩んでいました。　どうすれば気軽にお問い合わせしてくれるのか？　そもそも、お問い合わせする前に欲しい情報を提供するにはどうしたらよいのか？常時そういう事ばかり考えて、改善を繰り返してきました。その方法の一部を簡単にお伝えいたします。

集客に才能は要らない。必要なのは設計です。

書くまでもない事ですが、集客というのは才能じゃなくて、明確な戦略と導線設計の結果です。才能は不要で、誰でも出来ます。もちろん、天才的な才能の持ち主も居ると思いますけどね。そんな「ほんの一握りの天才」のエピソードは再現性が低いし、実態がよくわからんので、この記事は、ごくふつーの凡人向けの内容になっています。

積極的に更新しないと命取りになる業種と、 そうでもない業種がある、あなたはどっち？

まず前提として、積極的に更新しないと命取りになる業種と、 そうでもない業種があると思います。私のクライアントでも司法書士さんや、地域密着のカフェなどは、 頻繁に更新してはいないけど、ちゃんと集客出来ています。この違いは、 ストック型・比較検討型　と　フロー型・インフラ型　の業種でざっと区分できると思います。（だからと云って更新しなくてよい訳ではありません）

どっちの業種も結局は、比較される立場になる可能性は十分ありますし、高単価な商品や、目に見えないコンサル系のサービスの方、専門性が必要な分野などはその傾向がより高くなります。比較や相見積もりが飛び交うことになりますので、継続的に更新するのは決して無駄ではありません。

【集客セルフ診断 / １０の質問集】これがお問い合わせが来ない原因かもよ？

 ここから先は、きちんとコンテンツを更新しているのに、お問い合わせがなかなか来ない方を対象にしています。以下の１０項目をチェックしてみてください。その後、今日から何を直すべきかを明確にしましょう。

まとめ

いかがでしたか？WEBサイトは作って終わりではなく、いかに運用してゆくかが大事です。自社が ストック型・比較検討型　と　フロー型・インフラ型　の業種なのかを確認してみましょう。ストック型の業種は特に、コンテンツ配信で信用の積み上げが有効です。たとえフロー型だとしても、近隣の業種と比較された時、よりコンテンツが充実している方が選ばれることは想像に固くありません。AI検索時代は、一次情報を掲載しているWEBサイトが選ばれる時代、コンテンツの重要性はますます増すばかりです。

日々、コツコツと更新されている方は、セルフ診断シートで、お問い合わせのボトルネックはどこにあるか？自己診断してみましょう。集客というのは才能じゃなくて、明確な戦略と導線設計の結果です。　コツコツ記事を書ける方は、コツコツ改善も得意な筈です。ぜひ、参考になさってみてくださいね。

投稿【集客セルフ診断】WEBサイトからお問い合わせが来ないというお悩みを分解はTaniweb制作の最初に登場しました。

静的WEBサイト制作の時もLocalが役に立ちます

スタティックな（静的な）WEBページを制作する時も、私は必ずphpとDBが動かせる環境の中で作るようにしています。LP制作だったらサーバーは要らないよね？と思われるかも知れないのですが（実際に要らない事も多い）とはいえ、メールフォームとかRSS読み込みとか・・・シングルページならnoteの記事を読み込んで表示させたいなど、何だかんだと、後からPHP環境が欲しくなる時があるんですよね。

もちろんMAMPでも問題はありませんが、Localの方が手軽ですよね。

便利なツールなのでWordPressだけの専用にするのは勿体ないです。

PHPとDB環境が使えるという事は、WordPressじゃなくても baser/Craft CMS/Drupal/umbraco などなど他のアプリケーションでも使えるはずです。実際に、私はいくつかの種類でテストしていますけど、問題なく動かせました。

今回は、アプリケーションは入れないし、PHPが動けばいいだけなので、手順はさらにシンプルです。

という事で、LPを制作する時Local活用方法を簡単にご紹介します。

LP制作の時のLocalの活用手順

ざっくりと云えば、Localで普通にWordPressをインストールした後、公開フォルダの中を空にし、このタイミングでGit連携します。空になったフォルダの中に、開発用のベースファイルを入れれば、準備OK！これだけです。

STEP01

いつも通りにWordPressをインストールします。

※ここではLocalについての詳しい説明は割愛いたします。

STEP02

インストールしたらフォルダが3つ出来ています。app,conf,logs の3種類です。

appフォルダの中にpublicフォルダがあります。

このpublicの中を開いてください。

STEP03

このpublicの中の中身を全部ゴミ箱に捨ててください。フォルダの中身を空にします。

せっかくインストールしましたが、使わないので全部捨てましょう。

STEP04

Gitで新しいリポジトリを作ります。

※ここではGithubの詳しい説明は割愛いたします。

publicがrootになりますので、この中で好きなフォルダを作成することができます。そこで制作する時はこのままでOKです。

もしpublic上で制作したい時は、Gitの性質上publicの中にフォルダを作らないとスムーズに行かないので、ひとまず任意のフォルダ名で作成します。

その後、作った「任意のフォルダ名」の中に入っているGit関連のファイルをpublic上に移動して下さい。Git上のローカルフォルダを紐付けし直すのを忘れないようにしましょう。（エラーメッセージが出るので大丈夫と思います。）

フォルダができました。

そうしましたら、ここに普段自分が使っている開発用のベースとなるファイル群をいれます。

今回はLPなので、pugやsassのコンパイルはプリプロスを活用します。その設定ファイルとCSSの並び替えファイルなども入れましょう。

ここまで出来たら準備完了です！

10分もかからずできますので、最初にやっておくと後から色々と機能が追加された時も便利ですから、おすすめですよ！

※ここではLocalとGithubの詳しい説明は割愛いたしました。

投稿LP制作の時のLocalの活用手順はTaniweb制作の最初に登場しました。

WordPressを5.0にバージョンアップすると、投稿画面がGutenbergになり、これまでAmazonJSを使っていた方は、ボタンが見当たらなくなってしまっていると思います。（WordPressの5.03-jaで動作確認をしています）

これまでの投稿画面では、AmazonJSのボタンがWYSIWYGエディタのテキストフォーマットのパネルにありました。

新しい投稿画面では・・・AmazonJSのボタンが見当たりません！！

GutenbergでAmazonJSのボタンが見当たらなくても大丈夫

Gutenbergの画面は、とてもシンプルで、段落やコンポーネントを挿入したい場所に、ブロックを追加するという使い勝手になっています。
マウスを空白部分にもっていくと、ブロックを追加するというボタンが表示されますので、そのボタンをクリックしてください。

クリックしたら、Gutenbergの投稿機能のフォーマットを開きます。

フォーマットの部分に、「クラシック」という項目ボタンがありますので、クリックしてください。

そうすると、見慣れた以前のエディタ（Gutenbergに対して、クラシックエディタと呼ばれるようになりました）が現れると思います。そこにAmazonJSのボタンも登場していますので、ここでAmazonリンクを追加のボタンをクリックしてください。

あとは、これまでと操作は同じです。Amazonのリンクを検索する画面で、お目当ての商品リンクを検索し、挿入ボタンをクリックしてください。

クラシックエディタの中に、Amazonのリンクが挿入されてたと思います。

ここで投稿画面をプレビューしてみましょう。

完成

ちゃんと、以前の通りにAmazonJSのリンクを貼ることができました、完成です〜

投稿WordPress5.03GutenbergでAmazonJSを動かす方法はTaniweb制作の最初に登場しました。

投稿WordPressで特定のカテゴリーにだけパスワード制限を設けたい（その2）はTaniweb制作の最初に登場しました。

投稿WordPressで特定のカテゴリーにだけパスワード制限を設けたい（その1）はTaniweb制作の最初に登場しました。

投稿WordPressの記事の中に、PDFやPowerPoint、Excel、Wordなどの文書を、ビューワー付きの埋め込みを可能にするプラグイン。Google Doc Embedderの導入方法はTaniweb制作の最初に登場しました。

先日、ローカル環境にWordPressをインストールするツールをご紹介いたしました。なにも、WordPressのテーマを開発するWEBデザイナーやプログラマーだけに便利なわけではありませんWordPressでサイトを運用する、ライターの方にとっても、あると安心ですね。

とはいえ、やはり、最終的には公開するサーバーが必要ですし、テストするにもテストサーバーが必要です。一般的によく利用されているレンタルサーバーがオンラインで公開しているマニュアルのURLをリストアップいたしました。

レンタルサーバー公式WordPressマニュアルのリンク一覧

そこで、おそらくユーザーが多いと思われる各レンタルサーバー毎の、WordPressのインストール手順を案内したページを一覧を作成いたしました。
これからWordPressをインストールされる方は、おおむね、各社がサポートしている自動インストール機能や、公式の記事を、かならず一度は目を通すようにしましょう。それだけではなく、できれば、よくあるご質問などにも、ざっと、一読されておかれるのをおすすめいたします。

さくらのレンタルサーバ

最近、モリサワのWEBフォントが使えるようになったり、SSLのバリエーションも多く、人気のサーバーです。

[blogcard url="https://help.sakura.ad.jp/hc/ja/sections/115000044461-WordPress"]

KAGOYA レンタルサーバ

このページの中にマニュアルダウンロードがあります。
[blogcard url="https://www.kagoya.jp/option/cms/wordpress.html"]

Xサーバー WordPressマニュアル

[blogcard url="https://www.xserver.ne.jp/manual/man_install_word.php"]

WADAX WordPressマニュアル

[blogcard url="https://www.wadax.ne.jp/support/manual/shared/wordpress_sv114wordpress_33.html"]

heteml WordPressマニュアル

[blogcard url="https://heteml.jp/support/manual/wordpress/"]

ロリポップ WordPressマニュアル

[blogcard url="https://lolipop.jp/manual/user/applications-wordpress/"]

大塚商会

独自の簡単Web作成ツールのサービスがあります。SSHやtelnetでのログインはできません。
[blogcard url="https://www.webdirect.jp/alphamail/function/alphamail/tool.html"]

リンク先は、全て、WordPressのインストールマニュアルのページです。データベースの事前準備や、SSHでログインできるかどうか？などは、作業する前に、他のページなどもよく読んでおいて、確認するようにしてください。

投稿レンタルサーバー別 WordPressインストールマニュアルはTaniweb制作の最初に登場しました。

local環境にWordPressをインストールして開発環境を整えます

自分のパソコンの中にWordPressをインストールするメリットは沢山あります。
事前の動作チェックはもちろん、テーマを制作するデザイナー、マークアップデザイナーにとって、いちいちサーバーに接続しながらの作業は、効率が悪いものです。

そこで、ローカルWordPressの出番なのですが、環境を整える手法がいくつかあります。

以前から広く利用されている「XAMPP」「MANP」などがあります、最近は、「Instant WordPress」や「Local by Flywheel」も手軽で人気です。

今回は、その中から、「Local by Flywheel」というツールを使って構築する手順をご紹介いたします。

STEP01-ダウンロード

まずは、以下のサイトへアクセスしてください。

[blogcard url="https://local.getflywheel.com"]

ダウンロードボタンを押して、ご自身のマシンにダウンロードしてください。

すこし時間がかかります。

ダウンロードが完了しました！ファイルをダブルクリックして、開きましょう。

STEP02-アプリケーションの初期設定

ファイルをダブルクリックすると、アプリケーションが起動されます。
起動したら、画面の中の「GO」というボタンをクリックしてください、すると、自動的にセッティングをしてくれます。

＊　　 ＊　　 ＊　　 ＊　　 ＊　

virtualboxがマシンに入っていなかった場合は、ここでインストールを行います。何度か管理者のパスワード入力を求められますので、その時は、パスワードを入力してください。

ここはかなり時間がかかりますので、気長にまちましょう！
virtualbox＆Host-Machine＆local-Imageのセッティングが終わったら、下の画面が現れます。

これでアプリケーションの初期設定は終了です。
次からは、実際にWordPressをlocalにインストールしましょう！

＊　　 ＊　　 ＊　　 ＊　　 ＊　

STEP04-localにWordPressをインストール

ここからは、local環境にWordPressをインストールする作業に入ります。WordPressはいくつでもインストールすることができます。

「Create a New Site」のボタンをクリックしてください。
すると、以下の画面になりますので

《サイトのタイトル》を記入してください。

《ADVANCED OPTION》のところをクリックすると、ファイルを保存するフォルダを選ぶ項目が表示されますので、変更したい場合は、記入してください。

初期設定の場合は、
「~/Local Sites/記入したsite名」で保存されます。

続けて、データベースの設定です。PHPやデータベース（MySQL）などのバージョン選択します。「Preferred」はおまかせ、細かく自分自身でで設定したい場合は「Custom」を選んでください。

続けて、ユーザー名とパスワード、メールアドレス（これはデフォルトのままでOK)を入力し、もしも、マルチサイトとして利用したい場合は、下の　This　is　a WordPress　Multisite？という質問の部分にチェックを入れてください。

このような画面が表示されたら、インストール完了です！お疲れ様でした。

STEP05-WordPressの管理画面に入ります

ローカルサイトのコントロールパネルには、先程インストールしたWordPressの情報が表示されていると思います。
WordPressは、複数インストールすることができ、この画面の左ナビに、インストールしたサイト名がリスト表示されます。

この画面の左上のナビに、「ADMIN」「VIEW SITE」という、2つのボタンが並んでいると思います。

・「ADMIN」はWordPressの管理画面

・「VIEW SITE」はサイトを表示します。

まずは、管理画面に入ってみましょう。先ほど、決めたWordPressのログイン情報を使います。

管理画面に入ったら、WordPressを日本語設定にしておいてください。

STEP06-実際のサイトも確認します

＊　　 ＊　　 ＊　　 ＊　　 ＊　

これで、無事に、ローカル環境にWordPressをインストールすることだできました！

[amazonjs asin="4798052817" locale="JP" title="はじめてのブログをワードプレスで作るための本"]

[amazonjs asin="4295000795" locale="JP" title="いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)"]

投稿ローカルにWordPress環境を作成しよう！ ローカル WordPressはTaniweb制作の最初に登場しました。

WordPressを利用してホームページを運用されている会社や個人のブロガーさんは、Wp-PageNavi（コンテンツのページ送りを自動で表示してくれるプラグイン）を使っている方も多いと思います。

ページ送り（ページネーションとも呼びます）はこういった↓↓↓ものです。

このデザイン↑↑↑　ボタンの色や形などを、選べるようになっている「WP-PageNavi Style」というプラグインもありますが、この程度のデザインなら、プラグインを使わなくてもスタイルシートに数行追加するだけで、簡単に変更することができます。ある程度、CSSがわかる方なら、さらに自分好みにカスタマイズできるでしょう！

Wp-PageNavi　　https://ja.wordpress.org/plugins/wp-pagenavi/
WP-PageNavi Style　　https://wordpress.org/support/view/plugin-reviews/wp-pagenavi-style

インストールするプラグインは、なるべく必要最小限にしたいという方は、デザイン変更用のCSSを17種類書きましたので、自由に活用してください。

最初の準備、管理画面でWp-PageNaviの設定を行う

WordPressの管理画面から、Wp-PageNaviの設定画面へ進み、『pagenavi-css.css を使用』の項目を、必ず『いいえ』にしてください。

ナビボタンの文字もここで設定できますので、必要があれば、変更してください。

使い方

あとは、以下のCSSから好きなものを選んで、ご自分のWordPressのテンプレートに追加してください。このCSSはWp-PageNaviがインストールされている前提で作っていますので、インストールしていない方は、まずは、プラグインをインストールしてください。

簡単なCSSですので、部分的に、好みに合わせてカスタマイズしてもよいですね！ここで紹介しているデザインのCSSはこちら

基本のCSSの解説

《.wp-pagenavi》
基本のセレクタです、ページのボタンが、画面の中で中央揃えの配置になるようになっています。（センター配置）これを解除したい場合は、text-alignのプロパティ部分をコメントアウトしてください。

《.wp-pagenavi a, .wp-pagenavi span》
マウスが乗っていない時の、ボタンの形や色を設定しています。角丸は再現できないブラウザもありますのでご了承ください。その場合は、通常の四角で表現されます。

《.wp-pagenavi a:hover》
マウスが乗った時の、ボタンの背景の色と文字の色を指定します。

《.wp-pagenavi span.current》
ページの中で現在地を示すボタンの背景の色と文字の色を指定します。

/*wp-pagenavi base*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #999;
	background-color: #FFF;
	border: solid 1px #e0e0d2;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#FFF; 
    background-color:#999; 
    border-color:#999;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #66cccc;
	border-color: #66cccc;
	font-weight: bold;
    }

全17タイプ　デザイン一覧

ここで紹介しているデザインのCSSはこちら

Type01　

サンプルHTMLはこちら

Type02

サンプルHTMLはこちら

Type03

サンプルHTMLはこちら

Type04

サンプルHTMLはこちら

Type05　

サンプルHTMLはこちら

Type06

サンプルHTMLはこちら

Type07

サンプルHTMLはこちら

Type08

サンプルHTMLはこちら

Type09　

サンプルHTMLはこちら

Type10

サンプルHTMLはこちら
CSSだけでストライプを作りますので、画像を用意する必要はありません。

Type11　

サンプルHTMLはこちら
CSSだけで縦横の罫線柄を作ります。画像は必要ありません。

Type12

サンプルHTMLはこちら
後ろの柄もスタイルシートで作りますので、画像は必要ありません。

Type13　

サンプルHTMLはこちら
ドット柄もスタイルシートで作りますので、画像は必要ありません。

Type14　

サンプルHTMLはこちら

Type15　

サンプルHTMLはこちら

Type16　

サンプルHTMLはこちら

Type17

サンプルHTMLはこちら

ここで紹介しているデザインのCSSはこちら

投稿Wp-PageNavi デザイン変更用CSSを17種類書きました。ご自由にお使いください。はTaniweb制作の最初に登場しました。

前回の記事で紹介した、Wp-PageNavi デザイン変更用CSSです。全17種類あります。カスタマイズも自由です。気に入ったデザインを元に、さらに自分好みに調整してご活用ください。
ここで紹介しているデザインのCSSの解説はこちら

全17タイプ　CSS一覧

Type01　

サンプルHTMLはこちら

/*wp-pagenavi 01*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #795A3C;
	background-color: #FFF1DA;
	border: 1px solid #DBC9AA;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #A09D71;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #FC872E;
	border-color: #FC872E;
	font-weight: bold;
    }

Type02

サンプルHTMLはこちら

/*wp-pagenavi 02*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #3CB4E5;
	border: 1px solid #3CB4E5;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFC500;
	border-color: #FFC500;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #36C21C;
	border-color: #36C21C;
	font-weight: bold;
    }

Type03

サンプルHTMLはこちら

/*wp-pagenavi 03*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #FF74C7;
	border: 1px solid #FF74C7;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #00FFDD;
	border-color: #00FFDD;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #62B1EF;
	border-color: #62B1EF;
	font-weight: bold;
    }

Type04

サンプルHTMLはこちら

/*wp-pagenavi 04*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #66852F;
	background-color: #E5DE56;
	border: 1px dashed #E9C436;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFB500;
	border: 1px dashed #E9C436;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #A0C364;
	border: 1px dashed #E9C436;
	font-weight: bold;
    }

Type05　

サンプルHTMLはこちら

/*wp-pagenavi 05*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #1C181A;
	border: 1px solid #1C181A;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FF0037;
	border-color: #FF0037;
    }
.wp-pagenavi span.current{
	color: #777;
	background-color: #CFD5DA;
	border-color: #CFD5D;
	font-weight: bold;
    }

Type06

サンプルHTMLはこちら

/*wp-pagenavi 06*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #777;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	border:1px solid #dcdcdc;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#e4685d; 
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background:-moz-linear-gradient( center top, #fc8d83 5%, #e4685d 100% );
	background:-ms-linear-gradient( top, #fc8d83 5%, #e4685d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc8d83', endColorstr='#e4685d');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fc8d83), color-stop(100%, #e4685d) );
	background-color:#fc8d83;
	border-color: #e4685d;
	font-weight: bold;
    }
	

Type07

サンプルHTMLはこちら

/*wp-pagenavi 07*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
	background:-ms-linear-gradient( top, #3d94f6 5%, #1e62d0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #3d94f6), color-stop(100%, #1e62d0) );
	background-color:#3d94f6;
	border:1px solid #3d94f6;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#3d94f6; 
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
	background:-ms-linear-gradient( top, #1e62d0 5%, #3d94f6 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #1e62d0), color-stop(100%, #3d94f6) );
	background-color:#1e62d0;
	border-color: #3d94f6;
	font-weight: bold;
    }

Type08

サンプルHTMLはこちら

/*wp-pagenavi 08*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
    	background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
	background:-ms-linear-gradient( top, #89c403 5%, #77a809 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #89c403), color-stop(100%, #77a809) );
	background-color:#89c403;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #74b807;
	padding:9px 18px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow:1px 1px 0px #528009;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	-moz-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	box-shadow:inset 1px 1px 0px 0px #a4e271;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background: -moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background: -ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
	background-color: #ffab23;
	border-color: #ffab23;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background: -moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background: -ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
	background-color: #ffab23;
	border-color: #ffab23;
	font-weight: bold;
    }

Type09　

サンプルHTMLはこちら

/*wp-pagenavi 09*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
	background:-ms-linear-gradient( top, #fa665a 5%, #d34639 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fa665a), color-stop(100%, #d34639) );
	background-color:#fa665a;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d83526;
	padding:9px 18px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow:1px 1px 0px #98231a;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	-moz-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	box-shadow:inset 1px 1px 0px 0px #fab3ad;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
	background:-ms-linear-gradient( top, #d34639 5%, #fa665a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #d34639), color-stop(100%, #fa665a) );
	background-color:#d34639;
	border-color: #d34639;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background:-moz-linear-gradient( center top, #F2B3AD 5%, #e4685d 100% );
	background:-ms-linear-gradient( top, #F2B3AD 5%, #e4685d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2B3AD', endColorstr='#e4685d');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fc8d83), color-stop(100%, #e4685d) );
	background-color:#F2B3AD;
	border-color:#F2B3AD;
	font-weight: bold;
    }

Type10

サンプルHTMLはこちら

/*wp-pagenavi 10*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background: 
	linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, 
	linear-gradient(63deg, transparent 74%, #999 78%), 
	linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), 
	#444;
	background-size: 16px 48px;
	border: 1px solid #DBC9AA;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFD100;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #red;
	background: 
	linear-gradient(63deg, #F339C5 23%, transparent 23%) 7px 0, 
	linear-gradient(63deg, transparent 74%, #F339C5 78%), 
	linear-gradient(63deg, transparent 34%, #F339C5 38%, #F339C5 58%, transparent 62%), 
	#444;
	background-size: 16px 48px;
	border-color: #red;
	font-weight: bold;
    }

Type11　

サンプルHTMLはこちら

/*wp-pagenavi 11*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background: #36c;
	background-color:#269;
	background-image: linear-gradient(white 1px, transparent 1px),
	linear-gradient(90deg, white 1px, transparent 1px),
	linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
	linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
	background-size:100px 100px, 100px 100px, 10px 10px, 10px 10px;
	background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px
	border: 1px solid #fff;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 8px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #269;
	background-color: #FFD100;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #269;
	background-color: #FFD100;
	border-color: #999;
    }

Type12

サンプルHTMLはこちら

/*wp-pagenavi 12*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background: #36c;
	background-color: #A51847;
	background-size: 88px 88px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
	0px 36px, 4px 2px, 29px 6px, 33px 30px;
	background-image: 
	linear-gradient(335deg, #C90032 23px, transparent 23px),
	linear-gradient(155deg, #C90032 23px, transparent 23px),
	linear-gradient(335deg, #C90032 23px, transparent 23px),
	linear-gradient(155deg, #C90032 23px, transparent 23px),
	linear-gradient(335deg, #C90032 10px, transparent 10px),
	linear-gradient(155deg, #C90032 10px, transparent 10px),
	linear-gradient(335deg, #C90032 10px, transparent 10px),
	linear-gradient(155deg, #C90032 10px, transparent 10px);
	border: 1px solid #C90032;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 8px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #E17599;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #E17599;
	border-color: #999;
    }

Type13　

サンプルHTMLはこちら

/*wp-pagenavi 13*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF600;
	background: #36c;
	background-color: #001;
	background-image: radial-gradient(gray 15%, transparent 16%),
	radial-gradient(white 15%, transparent 16%);
	background-size: 10px 10px;
	background-position: 0 0, 30px 30px;
	border: 1px solid #001;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 8px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #000;
	background-color: #E17599;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #000;
	background-color: #E17599;
	border-color: #999;
    }

Type14　

サンプルHTMLはこちら

/*wp-pagenavi 14*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF600;
	background: #36c;
	border: 1px solid #fff;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #FF0000;
	border-color: #FF0000;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #FF0000;
	border-color: #FF0000;
    }

Type15　

サンプルHTMLはこちら

/*wp-pagenavi 15*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #A044AD;
	background-color: #E2BFEE;
	border-right-style: solid;
	border-bottom: 3px solid #A044AD;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
	border-right-color: #A044AD;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #A15AD3;
	border-color: #A15AD3;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #A15AD3;
	border-bottom-color: #A044AD;
	border-right-color: #A044AD;
    }
	

Type16　

サンプルHTMLはこちら

/*wp-pagenavi 16*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #A4EB8C;
	background-color: #26B8AA;
	border-right-style: solid;
	border-bottom: 3px solid #98D184;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #268EB8;
	border-color: #268EB8;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #268EB8;
	border-color: #268EB8 #287C9E #287C9E #268EB8;
    }

Type17

サンプルHTMLはこちら

/*wp-pagenavi 17*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #4DD0D5;
	background-color: #FFFFFF;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
	border: thin dotted #4DD0D5;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #4DD0D5;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #4DD0D5;
    }

投稿Wp-PageNavi デザイン変更 CSS 一覧はTaniweb制作の最初に登場しました。