2015-05-07

Facebook,LINEなどのSNSボタンをプラグインを使って設置する方法

WordPress

「WP Social Bookmarking Light」は、ソーシャルメディアの共有ボタンを一元管理できるプラグインです。

ほとんどのソーシャルボタンに対応しています。

「WP Social Bookmarking Light」をインストールする

まず、Wordpress管理画面のプラグイン新規追加の画面を開き、「WP Social Bookmarking Light」で検索する。

もしくは以下の本家サイトから直接ダウンロードしてインストールする。

https://wordpress.org/plugins/wp-social-bookmarking-light/

使いやすいように設定を変更する

管理画面から「WP Social Bookmarking Light」の設定変更画面を開き、使いやすいように設定を変更していきます。

ドラック＆ドロップによる簡単な操作で、追加したいSNSボタンを選んだり、並び順を変えたりできるようになっています。

また設定項目の中にCSS編集画面が用意されていて、カスタマイズがしやすくなっているのもうれしいところ。

設置できるソーシャルメディアは、以下のようにほとんどのものに対応しています。

対応ソーシャルメディア一覧

● hatena
● hatena_users
● hatena_button
● twib
● twib_users
● tweetmeme
● twitter
● livedoor
● livedoor_users
● yahoo
● yahoo_users
● yahoo_buzz
● buzzurl
● buzzurl_users
● nifty
● nifty_users
● tumblr
● fc2
● fc2_users
● newsing
● choix
● google
● google_buzz
● google_plus_one
● delicious
● digg
● friendfeed
● facebook
● facebook_like
● facebook_share
● facebook_send
● reddit
● linkedin
● evernote
● instapaper
● stumbleupon
● mixi
● mixi_like
● gree
● atode
● line
● pocket

関連記事WordPressカスタマイズ関連の記事

2015-05-04

「リビジョン」機能について

WordPress

f:id:ooigawa-bitter-sweet:20150512025242j:plain

リビジョン機能は、ワードプレスに基本機能として備わっていて、記事の編集中に内容を自動で保存してくれるという機能です。

これは非常に便利なもので、例えば、

「記述ミスや操作ミス、また不具合が生じたからデータが消えてしまった！どうしても前のデータを復元したい！」

といった時にも対応できます。

1つ注意点としては、デフォルトの設定が「データの最大保存数が無制限」になっているということです。
これはどういうことかというと、この設定で長期間使用を続けて記事数が増えていくと、個々のファイルサイズが肥大化しデータベースの容量が圧迫するため、パソコンに余計な負荷がかかり、不具合の原因となる可能性があるということです。

なので、状況に応じて設定を変えていく必要があります。

ファイルの肥大化を防ぐための対応策としては、以下のような方法があります。

● リビジョン数の制限
● 自動保存インターバルの変更
● リビジョン機能の停止
● 過去のリビジョン履歴の削除

以下で細かくみていきます。

ファイルの肥大化を防ぐための対応策

リビジョン数の制限

リビジョン数の保存件数を変更することができます。

「wp-config.php」に以下のコードを記述します。

「require_once(ABSPATH . ‘wp-settings.php’);」より前の位置に記述します。

【 wp-config.php 】

define('WP_POST_REVISIONS', 3);

数値の部分は保存件数の上限を入力する

自動保存インターバルの変更

自動保存はデフォルトでは「1分」に設定されているので、リビジョンは1分経過ごとに増えていく状態になっています。

この保存間隔を変更するには、「wp-config.php」に以下のコードを記述します。

【 wp-config.php 】

define(AUTOSAVE_INTERVAL, 秒数);

指定する数値は秒単位。

リビジョン機能の停止

リビジョン機能自体を停止させることもできます。

【 wp-config.php 】

define(WP_POST_REVISION, false);

過去のリビジョン履歴の削除

過去のリビジョン履歴を削除することができます。

「Better Delete Revision」というプラグインを使います。

2015-05-01

パーマリンクについて

WordPress

サイト構築をする際、最初の準備段階で注意しておかなければいけないことの1つにパーマリンクの設定があります。

この記事の中では、パーマリンクとはどういったものか、設定時に使える構造タグ、設定する際に注意しておきたいことなどをまとめておきます。

1. パーマリンクについて

1-1. パーマリンクとは
1-2. パーマリンク設定時に使える構造タグ一覧

2. 設定する際に注意すること

2-1. 「英語表記による投稿名」を入れる
2-2. 「カテゴリ名」や「日付」を入れるのは避けた方がいい
2-3. パーマリンクを変更したら、早急に「リダイレクト設定」をする

1. パーマリンクについて

1-1. パーマリンクとは

パーマリンクとは、サイトやブログの個々の投稿ページを表示するURLのことで、permanent(パーマネント、恒久的、半永久的、不変といった意味）なものであることからpermalink(パーマリンク)という造語で呼ばれています。

一般的なブログでは、パーマリンクの設定の変更はできないようになっていることが多いけれど、ワードプレスの場合は自由に変更することができるようになっています。

ただ、自由に変更できるとはいえ、やたらと変更すると後になって、サイトを運営する上で都合の悪い事態を招く可能性があるので、なるべく最初の段階でしっかりと設定しておき、後になって変更することのないようにすべきものだといえます。

都合の悪い事態とは主に以下の3つのようなことが挙げられます。

1. SNSのカウントがリセットされてしまう

SNSのカウント(フェイスブックの「いいね」やツイッターの「ツイート」など)がリセットされて、ゼロになってしまう

2. 時間と労力の浪費

手動で好みの文字列にするという設定にすれば、投稿記事を1つ1つ変更していくことになるので時間と労力の負担増になる。

3. SEO的にあまりよくない

SEO的に見ても(Googleからの評価)あまりよくないという見かたがある

このようなリスクが考えられるので、あとあと変更することのないように最初の段階でしっかり設定しておく必要があるわけです。

1-2. パーマリンク設定時に使える構造タグ一覧

記事にカテゴリを複数指定していても、パーマリンクには一つしか表示されません。
その際、一番小さいカテゴリID（カテゴリ管理参照）が優先的に使われます。

パーマリンク構造に「 %tag% 」を使用している場合も同様。

以下、ワードプレスのパーマリンク設定時に使える構造タグ一覧です。

構造タグ一覧

%year% … 投稿された年を4桁で取得できる(例：2014)
%monthnum% … 投稿された月を取得できる　(例：04)
%day% … 投稿された日を取得できる　(例：05)
%hour% … 投稿された時間を取得できる　(例：23)
%minute% … 投稿された分を取得できる　(例：03)
%second% … 投稿された秒を取得します　(例：33)
%post_id% … 投稿の固有のIDを取得できる　(例：123や3354等など‥‥)
%postname% … 投稿した際のタイトル名を取得できる
%category% … 記事のカテゴリーを取得できる
%author% … 記事の作成者を取得できる

以上が構造タグの一覧です。
自分で管理しやすいようにカスタマイズして好きなパーマリンクにすることもできます。

2. 設定する際に注意すること

パーマリンク設定の手順は、管理画面の左側にあるサイドバー内の「設定」⇒「パーマリンク設定」から行います。

共通設定として何パターンか用意されていて、その中から選択するか、また任意設定で自分の管理しやすいようにカスタマイズして好きなパーマリンクにすることもできます。

では、どのような構造のパーマリンクで設定するのがいいのか？？後々変更することのないようにしないといけない…ということで、設定の際の注意点を3点ほど挙げてみます。

2-1. 「英語表記による投稿名」を入れる

パーマリンクに「記事名」を入れると、ユーザビリティの面でもSEOの面でも望ましいとされています。
ユーザー視点(人間視点)で見ても、検索エンジン(クローラー)にとっても、URLを見ただけで何について書いてある記事なのかわかりやすい、把握しやすいからです。

この時、大事なポイントは、日本語ではなく英語表記（もしくはローマ字表記）による投稿名を入れるということ。

理由としては以下のような事が挙げられます。

1. デバイス間の互換性の影響を受けないので、自動変換されず、見やすい

一見、読みやすいし自分で管理もしやすそうなので、投稿名を日本語にしてしまいがちだけど、そうするとコピペしたりした時、デバイス間の互換性の影響(エンコードされた時)でURLが長い文字列に自動変換されてしまい、全く読めないし、見栄えも悪くなる。
その際、投稿名が英語表記になっていれば、それを回避することができます。

ユーザー視点(人間視点)で見ても、検索エンジン(クローラー)にとっても、URLを見ただけで何について書いてある記事なのかわかりやすい、把握しやすいわけです。

2. 英単語の学習になる

これはメリットというほどでもないけれど、任意の英語表記にすることで、英語慣れしていない人にとっては英単語の学習にもなるし、英語表記が多いWordPressでのサイト構築に慣れるという意味でも英語表記がいいと思います。

2-2. 「カテゴリ名」や「日付」を入れるのは避けた方がいい

サイトやブログを運営していく中で、「カテゴリ名」や「日付」や「記事」のタイトルを修正するようなことはよくあるので、これらを初めからパーマリンクの中に含めない設定にしておく。

これであれば、もし「カテゴリ名」や「日付」や「記事」のタイトルを修正したとしても、その際にパーマリンク名まで変えざるを得ないという事態を回避できる。

例えば、ビジネスノウハウ関連の記事が人気であれば関連記事を増やしていくことになるし、記事が増えてくればビジネスノウハウのカテゴリを新たに設けた方がいいだろうから、そうなると新たなカテゴリ名に変更する可能性が高い。

だから、トレンドやユーザーの動きであったり記事の構成など、サイトが置かれている状況は常に変化し、同時にユーザビリティを考慮する事も考えると、カテゴリは状況に応じて、都度、変更できるようにしておいた方がいいということです。

2-3. パーマリンクを変更したら、早急に「リダイレクト設定」をする

後になって、やむなくパーマリンクを変更することになった場合は、ユーザーが被リンクしてくれている記事であれば、せっかくリンクしてもらったのにリンク切れの状態になってしまうので、早急に「リダイレクト設定」をして記事に辿り着けるようにする必要があります。

WordPressであれば、自動で簡単に「リダイレクト設定」してくれるプラグインがあるので、そういったものを利用すれば簡単に対応できます。

以上、「パーマリンクについて」の記事でした。

2015-04-27

【TIPS】画像を４枚のパネルに分割してエフェクトをかけたスライダー

HTML / CSS

画像を４枚のパネルに分割してエフェクトをかけたスライダー４パターン。

まず、共通のhtmlを記述を記述してから、パターンごとのCSSを記述していく流れ。

共通のhtmlを記述を記述

まずは共通のhtmlを記述していく。

画像内のテキストは、＜div class=”cr-titles”＞のタグ内で書き換える。

【 html 】

<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1"

checked/>

<div>

<span>Slice 1 - Image 1</span>

<span>Slice 1 - Image 2</span>

<span>Slice 1 - Image 3</span>

<span>Slice 1 - Image 4</span>

</div>

<div>

<span>Slice 2 - Image 1</span>

<span>Slice 2 - Image 2</span>

<span>Slice 2 - Image 3</span>

<span>Slice 2 - Image 4</span>

</div>

<div>

<span>Slice 3 - Image 1</span>

<span>Slice 3 - Image 2</span>

<span>Slice 3 - Image 3</span>

<span>Slice 3 - Image 4</span>

</div>

<div>

<span>Slice 4 - Image 1</span>

<span>Slice 4 - Image 2</span>

<span>Slice 4 - Image 3</span>

<span>Slice 4 - Image 4</span>

</div>

<h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>

<h3><span>Adventure</span><span>Where the fun begins</span></h3>

<h3><span>Nature</span><span>Unforgettable eperiences</span></h3>

<h3><span>Serenity</span><span>When silence touches nature</span></h3>

</div>

</section>

</div>

次に、パターンごとのCSSを記述していく。

effect【 1 】画像を押し出してスライド表示するエフェクト

画像を押し出してスライド表示するエフェクトのコード。

demo

【 html 】

<head>

</head>

●スタイルシートは、ダウンロードした外部ファイル()の中にあるパタごとに異なるstyle1～4のいずれかを設定

●使用する画像は、style.cssにbackground-imageプロパティで設定

effect【 2 】画像を押し出してスライド表示するエフェクトver2

画像を押し出してスライド表示するエフェクトver2のコード

demo

【 html 】

<head>

</head>

●スタイルシートは、ダウンロードした外部ファイル()の中にあるパタごとに異なるstyle1～4のいずれかを設定

●使用する画像は、style.cssにbackground-imageプロパティで設定

effect【 3 】上下にスライドしながら切り替わるエフェクト

上下にスライドしながら切り替わるエフェクトのコード

demo

【 html 】

<head>

</head>

●スタイルシートは、ダウンロードした外部ファイル()の中にあるパタごとに異なるstyle1～4のいずれかを設定

●使用する画像は、style.cssにbackground-imageプロパティで設定

effect【 4 】ふわっと切り替わるエフェクト

ふわっと切り替わるエフェクトのコード

demo

【 html 】

<head>

</head>

●スタイルシートは、ダウンロードした外部ファイル()の中にあるパタごとに異なるstyle1～4のいずれかを設定

●使用する画像は、style.cssにbackground-imageプロパティで設定

参考サイトhttp://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/

関連記事他のスライドショー関連の記事

2015-04-23

【TIPS】サムネイルプレビュー付きスライダー

HTML / CSS Javascript

slideshow-with-thumbnail-preview-capture-4

サムネイルプレビュー付きスライダー【2パターン】のコードまとめ。

まず、共通の設定部分になるＣＳＳファイルをリンクさせる。

【 html 】

<head>

</noscript>

</head>

次に、パターンごとのhtmlとスクリプトを記述していく。

effect【 1 】横からスライドするエフェクト

　　　横からスライドするエフェクト

demo

【 html 】

<li>

<h2>Creative</h2>

</div>

</li>

<li>

<h2>Friendly</h2>

<h3>Devil</h3>

</div>

</li>

<li>

<h2>Tranquilent</h2>

<h3>Compatriot</h3>

</div>

</li>

<li>

<h2>Insecure</h2>

<h3>Hussler</h3>

</div>

</li>

<li>

<h2>Loving</h2>

<h3>Rebel</h3>

</div>

</li>

<li>

<h2>Passionate</h2>

<h3>Seeker</h3>

</div>

</li>

<li>

<h2>Crazy</h2>

<h3>Friend</h3>

</div>

</li>

</ul>

<li class="ei-slider-element">Current</li>

<li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>

<li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>

<li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>

<li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>

<li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>

<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>

<li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>

</ul>

</div>

</script>

$(function() {

$('#ei-slider').eislideshow({

easing : 'easeOutExpo',

titleeasing : 'easeOutExpo',

itlespeed : 1200

});

</script>

effect【 2 】ふわっと切り替わるエフェクトのコード

　　　ふわっと切り替わるエフェクト

demo

【 html 】

<li>

<h2>Creative</h2>

</div>

</li>

<li>

<h2>Friendly</h2>

<h3>Devil</h3>

</div>

</li>

<li>

<h2>Tranquilent</h2>

<h3>Compatriot</h3>

</div>

</li>

<li>

<h2>Insecure</h2>

<h3>Hussler</h3>

</div>

</li>

<li>

<h2>Loving</h2>

<h3>Rebel</h3>

</div>

</li>

<li>

<h2>Passionate</h2>

<h3>Seeker</h3>

</div>

</li>

<li>

<h2>Crazy</h2>

<h3>Friend</h3>

</div>

</li>

</ul>

<li class="ei-slider-element">Current</li>

<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>

<li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>

<li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>

<li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>

<li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>

<li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>

<li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>

</ul>

</div>

</script>

$(function() {

$('#ei-slider').eislideshow({

animation : 'center',

autoplay : true,

slideshow_interval : 3000,

titlesFactor : 0

});

</script>

参考サイト

http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/

関連記事他のスライドショー関連の記事

My Vector Space

人生は寄り道してなんぼ

Facebook,LINEなどのSNSボタンをプラグインを使って設置する方法

「リビジョン」機能について

パーマリンクについて

【TIPS】画像を４枚のパネルに分割してエフェクトをかけたスライダー

【TIPS】サムネイルプレビュー付きスライダー