2016年にあなたがやめるべき10のこと – クリエイティブな1年を送るために

こんにちは!2016年もあっという間に10日経ちましたね。私は、毎年1月に「今年は○○を頑張りたい。●●に挑戦したい。」と、思い新たに「やりたいこと」を決めることが多いのですが、先日、ある記事を読んで「今年やめるべきこと」を決めておくのもなかなか良いかもしれない」と思いました。

どの項目も「納得」な感じだったので、記事の概要を以下にざっくり和訳(意訳)しました。ここに挙がっていることを少し心がけて生活するだけでも結構クリエイティブな1年になりそうです。ぜひ参考にしてみてください!

長々としたTo do リストを作らない

to-do-734587_640

ごく簡潔な To do リストこそ、あなたにとって今一番重要なことに集中する助けになり、To do リストを達成可能なものにする。リストがタスクであふれていると、それだけで「これは無理そうだ・・・」とやる気がうせてしまうだろう。

短いTo do リストを作って、素早く実行する。そのリストが完了したら、新たにまた To do リストを作る。そしてそれを完了させる。そうすればリストを完了するごとに達成感を味わえる!

真面目になりすぎない

cup-1009228_640

笑いを取り入れながら物事を行ったほうがうまくいく。話し合いが何となくうまくいっていないなと思ったときは、軽いジョーク(それも相手についてではなく、自分をネタにするのがポイント!)を取り入れるとよい。

自分の間違いについても笑いのネタにするくらいのほうが失敗に押しつぶされずに済む。

 

不要な付き合いをやめる

paper-109277_640

あなたのことをぶしつけな態度で扱ったり、不要で時間のロスでしかない事柄に誘ったりする人がいるなら、そういう人との付き合いをやめる。まったく接触を持たないようにできないとしたら、ハッキリと自分にはそれが必要ないことを相手に伝える。

 

中途半端な気持ちでやらない

relay-race-655353_640

目標を決めた直後は一生懸命でも、時間が経つにつれて冷めていくことは多々あり。また、誰かの視線、期待のせいで、やる気がそがれることも多々ある。自分の気持ちを冷めさせるような会話は極力さけるべし。

自分でやると決めたことはやり通そう。さもなければNothingだ!

 

ごちゃごちゃした中で仕事をしない

desk-600492_640

体の健康は精神的、感情的な健康に直に影響を与える。ワークスペースは整ったものであるべきだ。ごちゃごちゃしたデスクで仕事をすれば頭の中もごちゃごちゃになり、仕事をうまく完了することは到底難しい。

身の回りが整っていれば、ただ単にモノが整頓された状態になるだけでなく、頭の中も、あなたの仕事のプランも整頓されたもになる。

型にはまろうとしない

springerle-235817_640

自分の周りの世界の中で自分の価値を見つけるために、周囲の型にはまろうとする人は多い。でもそうするなら、周りがあなたのあるべき姿を決めることになるだろう。

あなたがどんな人であるか、どんな人として知られるかはあなたがコントロールするべきことだ。周りがあなたに貼り付けようとする「ラべル」に気を取られるな。

自分を疑問視したり自分をだましたりしない

orange-juice-569064_640

自分に自信を無くすことはよくあることだ。自信を持っていたとしても、間違いをしないわけではない。しかし、間違いや誰かから拒絶されるといったことで、すぐにふさぎこんでしまうべきではない。

同時に、自分がいつも完璧で正しいと思い込むというもう一つの極端も避けるべきだ。あなたの周りには誰もいなくなるだろう。

要は、健全なセルフイメージをもつこと。

シニカルにならない

book-863418_640

年を追うごとにシニカルになる危険度は高くなるので注意が必要だ。年を重ねるごとに「それはもう経験済みのことだから、それについては全部知っている」という冷めた気持ちになりやすい。

しかし、シニカルになると創造性や人生への熱意が失われる。そしてあなたがいつもするネガティブな返事を聞いて周りは徐々にあなたから距離を置くようになるだろう。

自分が既によく知っている事柄に対しても、ポジティブで偏見のない見方をしよう。

退屈しない

cuba-742252_1280

「退屈だ」「つまらない」と言ったところで家族や友人はあなたをどこにも連れて行ってはくれないだろう。

自ら外に出て何か新しいことを始めるべし。新しいことに挑戦しクリエイティブになることで自分の限界を広げよう。ごく単純なことを別の方法でやってみるだけでも、そのプロセス全てが新鮮に感じられるはずだ。

同じ場所にとどまるな

photographer-407068_640

旅をしよう。 旅をすることで、いつものルーチンワークから解放され休息できるだけでなく、いつも見ているのとは違う世界を体験する良い機会となる。旅はパッケージツアーではなく、自分でプラニングする。そしてできる限り旅先の地元人と接触する機会を作ろう。

 

まとめ

いかがでしたか?私は「年を追うごとにシニカルになりやすい」という言葉にハッとさせられました(笑)。

うちの祖母は90歳を超えているのですが、とにかく新しいことを覚えるのが好きで、「ボケる」などという言葉とは無縁。先日電話した時も、私がセルビアに滞在するようになったと知ってセルビア語の挨拶はどういえばいいのかと聞いてくれました。

世の中には新しくて面白いことが日々たくさんあるのに、「どうせ・・・だ」とか「それは結局無理だろう」とかいうネガティブな視線で見ると何でもつまらなくなってしまいますよね。最近、10~20代のころと比べて、物事を見る視線がどうもアツくない気がするので、おばあちゃんをお手本に、もっとポジティブに、フレッシュな思いで過ごしたいなと思います。

 

オリジナルの記事は一つ一つの項目がもっと掘り下げて書かれていますので、気になった方は以下から読んでみてくださいね!

10 Things to Quit Doing in 2016

 

WordPress4.4 でタグクラウドの表示がおかしい!?1分で解決する方法をシェアします

WordPress4.4にバージョンアップ後に、「タグクラウドの表示がおかしくなった!」「ただのリンクみたいになっている!」という不具合が出ているようです(私のブログでもありました)。タグクラウドの文字サイズを揃えている人はおそらくこの不具合を見ていると思いますが、簡単な解決方法があったのでこの記事でシェアしたいと思います。

WordPress4.4でのタグクラウドの不具合について

WordPressにあるタグクラウドのウィジェットですが、デフォルトではタグに含まれる記事の数に応じてタグ名のフォントサイズが変化するようになっていますよね。(この記事のサイドバーにあるタグクラウドみたいな感じ)

記事数が多ければ多いほど、タグ名のフォントが大きくなるので、そのブログがどんな情報をたくさん書いているのかが視覚的に分かっていいのですが、色々な理由からフォントサイズを揃えてる設定をしている方も多いと思います。

私ももう一つのブログのほうでは、文字を揃える設定をしています。デザインがそのほうがパシッと決まる感じがするのと、記事数の少ないタグも見過ごされなくて済むかなと。(記事数が少ないからと言って価値が低いわけじゃないですからね)

具体的には、function.phpに以下のフィルターを追加すれば文字の大きさが同じになります。

 

WP4.3では問題なかったのが、4.4にアップデートした後から表示がおかしい。

タグクラウド WP4.4での不具合まずウィジェットタイトルが表示されないし、タグクラウドに適用されていたCSSが効かなくなっていてあたかもリンクの羅列のようになってました。キャッシュが変に残っちゃったのかとか、色々考えたものの、キャッシュをクリアしてもダメだし、CSSも特に変更した覚えはありません。

ソースを見てみてみたら、ウィジェットタイトルも出力されていないし、普通ならウィジェットを囲うはずのdivタグもない。ということは、CSSじゃなくてコードの出力の時点で問題が起きているということですね。

それにしても・・・かなり残念な表示です(笑)

 

文字サイズを揃えるフィルターで不具合が起きていた

調べてみたところ、タグクラウドの文字サイズを制御する(そろえる)ために使っている上のフィルターがWordpress4.4で不具合を起こしてしまうようでした。フィルターをコメントアウトして次回のバージョンアップを待つという手もありますが、解決策を提案してくださっている方がいて、おかげでちゃんと表示できるようになりました!

参考:[resolved] WordPress 4.4 update broke Tag Cloud

 

具体的には、以下のように変更します。

 

この解決策を考えてくれた人の解説によれば、

Until WP 4.3.x, wp_tag_cloud function was used to directly output (‘echo’ => true), which is the function’s default behavior. In WP 4.4, however, the function is used to set the tag cloud into a variable as a string, without output (‘echo’ => false).

The original description of the custom function overrides the default arguments, where ‘echo’ is set to false. So tag cloud was output at wrong timing (before output of wrapper and title). To resolve it, arguments should not be override, instead, custom arguments should be merged with default arguments.

引用元: [resolved] WordPress 4.4 update broke Tag Cloud

 

私が適当に訳した感じだと、

 

WordPress4.3.xバージョンまでは、wp_tag_cloud関数は直接出力されるのがデフォルトの動作だった(’echo’ => true)が、4.4バージョンではこの関数はタグクラウドを文字列として変数にセットするようになった、つまり直接出力ではなくなった(’echo’ => false)。

このような変更が加えられたところに、以前のフィルター(カスタム関数)を使うとどうなるか。

フィルターがデフォルトの引数を上書きしてしまい、これが原因でウィジェットタイトルやウィジェットのラッパーの出力の前にタグクラウドが出力されてしまう。

これを解決するためには、引数が上書きされずに、カスタム引数をデフォルトの引数にマージ(結合)されるようにする必要がある。

 

訳すとかえって分かりにくいですね。。スミマセン。ようは

$args = wp_parse_args( $args, $my_args );

の一行を加えることで、フィルター内で定義した引数ともとの引数を結合させ、その結合させた引数を返すことで、問題が解決されたようです。

私のブログのタグクラウドもちゃんと表示が戻りました!

tagcloud-wordpress4.4-fixed

WordPressの次期バージョンでどうなるかわかりませんが、4.4でタグクラウドが変になった!!とお困りの方は、一度function.phpでこんなフィルターを使っていないかどうかチェックしてみてください。

多言語対応化WordPressプラグインならPolylangが秀逸!その特徴と使い方

この記事ではWordpressでサイトを多言語化するのに一番使いやすかったプラグインPolylangについてご紹介します。

今回は以下の条件で二か国語対応するためのプラグインを探していました。

  • 自動翻訳ではなく自分で翻訳する
  • 複雑な設定が必要ない
  • ブログではなくサイト(固定フロントページ)で使える

有名な多言語化プラグインは色々ありますが、今回試してみた中で、一番よかったのがPolylangでそのまま使い続けています。現在、Wordpress4.4にも対応しているし、評価もかなり良いです。そういう意味でもなかなか安心なプラグイン。ぜひ試してみてください!

Polylangの特徴

公式サイト: https://wordpress.org/plugins/polylang/

Polylang
  • 二か国語以上のWordpressサイト作成に対応
  • ある言語で投稿や固定ページ、カテゴリー、タグなどを通常通り作成し、あとはそれぞれ対応するものを他の言語でも作成、関連付けするだけ。簡単で分かりやすい!
  • 記事によって翻訳をつけない(一言語だけ)という場合があってもOK
  • 自動翻訳が必要な場合はLingotekアドオンで対応可
  • WordPress言語パックを利用しており対応言語の数が多い
  • 投稿や固定ページだけでなく、メディア、カテゴリー、タグ、メニュー、ウィジェット、カスタム投稿、カスタムタクソノミー、スティッキーポスト、ポストフォーマット、RSSフィードに対応
  • URLの形もサブドメイン型、サブディレクトリ型など選べる

 

Polylangのインストールと初期設定

ダッシュボードのプラグインメニューから「Polylang」で検索してインストール、有効化します。
または公式ページからプラグインファイルをダウンロードしてアップロードします。

有効化が完了すると、「設定」の中に「言語」というメニューが現れるのでクリックし、初期設定を行っていきます。

 

使用言語を追加する

以下のキャプチャのように、まずは使用する言語を追加していきます。今回は第一言語に日本語、第二言語にロシア語を選んでみました。

Polylang初期設定1

Polylang初期設定2

言語を選択したら、あとはデフォルトのままでOKです。順序は自分で設定します。

 

追加した言語が一覧表示されますので確認してください。

Polylang初期設定3

 

「文字列の翻訳」でブログ・サイトの基本情報を多言語対応する

次に「文字列翻訳」タブをクリックし、ブログ・サイトの基本情報を二か国語対応させていきます。

文字列翻訳

翻訳できるものがずらっと一覧表示されますので、必要なところだけ翻訳してください。サイトのタイトルとか、キャッチフレーズなどは必須ですね。

文字列翻訳2

URLなどの設定を行う

次に「設定」タブをクリックして、URLの設定などを行っていきます。

デフォルトの言語で、「言語が設定されていない投稿、ページ、カテゴリー、またはタグがあります・・・」のところはチェックをいれておきます。URLの修正では、サブドメイン型やサブディレクトリ型などのURLの形を選ぶことができます。好みで選択してください。

デフォルトの言語(ここでは日本語)のページや投稿で/ja/やja.などの言語情報をURLに追加したくない場合は「URLにデフォルトの言語の言語情報を表示しない」にチェックを入れます。既に投稿記事がある場合、ここにチェックをいれないと、それまでのURLリンクが変わってしまうので基本的にはチェックしておいたほうがいいですね。

Polylang設定

 

ブラウザの言語の検出の欄は、チェックをいれておきます。そうするとブログ訪問者のブラウザ使用言語に合わせて言語を切り替えてくれます。メディアのキャプションなども翻訳したい場合は、メディアの欄にもチェックを入れます。

「同期」の欄は、言語に関わらず共通で使いたい情報にチェックをいれておきます。そうすると同じ情報を何度も設定しなくて済むようです。

Polylang設定2

 

ここまでで初期設定が完了しました!次は投稿や固定ページ、カテゴリ、メニューなどに翻訳を追加する方法を解説していきます。

コンテンツを多言語化対応する

投稿・固定ページに翻訳記事を追加する

既存の投稿記事に翻訳を追加するには、投稿画面で、第二言語の欄の+マークをクリックします。

polylang8

 

そうすると新規投稿画面が表示されるので、第二言語で翻訳記事を作成してください。画面右側に以下のような「言語」欄が表示されるので、ここでも何の記事の翻訳を書いているのか確認・設定できます。

投稿に翻訳記事を追加2

固定ページも投稿と同じように設定すればOKです。

 

ウィジェットの多言語化対応方法

基本的にはダッシュボードの 外観 > ウィジェット でウィジェットの翻訳を行えます。具体的には、まず同じコンテンツのウィジェットを各言語ごとに作ります。そして各ウィジェットに以下のような「ウィジェットを表示する言語」の選択欄が現れるので、日本語で書かれたウィジェットなら「日本語」を選択し、第二言語で書かれたウィジェットならその言語を選択する、という感じですね。もちろん、言語に関わらず表示したければ「すべての言語」を選択すればOKです。

polylang10

 

メニューの多言語化対応方法

メニューもウィジェットと同じように、各言語ごとにメニューを作成し、以下に示す「テーマの位置」で言語を選択しておきます。

メニューの多言語化

 

カテゴリー・タグの多言語化

ダッシュボードの 投稿 > カテゴリー(またはタグ) から翻訳を追加していきます。一例として以下では、WEBデザインというカテゴリーに翻訳を追加します。第二言語の欄の+ボタンをクリックします。

カテゴリ・タグの多言語化

新規カテゴリーを追加の欄で、名前やスラッグを設定します。

カテゴリー多言語化

カテゴリー多言語化

設定が出来たら、新規カテゴリーを追加ボタンをクリックします。すると、カテゴリー一覧に第二言語のカテゴリーが追加されました。

ただし、スラッグはweb-design-2と後ろに-2が付いてしまいましたね。ちょっと格好悪いですがしょうがない。スラッグのつけ方はちょっと工夫が必要そうです。

カテゴリー多言語化

タグも同じように設定できます。

 

ブログに言語スイッチャーを表示させる

コンテンツの翻訳ができてきたら、ブログ(サイト)に言語スイッチャーを表示させます。これは外観 > メニューから行います。

例えばグローバルメニューに以下のようにして言語スイッチャーを追加し、表示設定を行って保存します。

言語スイッチャーを追加

polylang17

すると、こんな感じに国旗で言語の選択ができるようになります。

polylang18

 

以上で、ブログの場合は多言語化がバッチリ行えると思います!サイトのほうは、もう一つ、フロントページの設定が必要な場合があるかもしれませんので、対応方法を書いておきますね。

 

固定フロントページ対応の仕方

固定フロントページでサイトのトップページを作成している場合、まずはトップページ用に各言語の固定ページを作成(ページタイトルなどは何でもOK)しておきます。日本語のトップページ用の固定ページが存在している場合、固定ページ一覧画面の第二言語カラムで+ボタンをクリックして第二言語用のトップページ(固定ページ)を作成します。

すでに、フロントページの設定が行われている場合は、これでトップページの切り替えも行われるはずです。

ダッシュボードの設定 > 表示設定 のところの「フロントページの表示」の欄で、「固定ページ」が選択され、その「フロントページ」のドロップダウンで、上で作成したトップページ用の固定ページが選択されていればOKです(言語は何でもOK)。

ブログ用に「投稿ページ」の設定も行っている場合は同様の手順で、投稿一覧表示用の固定ページを各言語で作成し、どうように設定すればOKです。

 

以上、多言語化対応に便利なプラグインPolylangの使い方の解説でした!

 

Contact Form7の問い合わせをGoogle Analyticsでトラックできなかった原因と解決法

定番プラグインContact Form7で作った問い合わせフォームからメッセージが送信されたときに、そのイベントをGoogle Analytics側で取得して、目標値として計測したかったのですが、色々思うようにいかずハマってしまったので、その状況と解決に至った道をまとめたいと思います。

contactform7-googleanalytics

 

今回やりたかったのは、前述のとおり

Contact Form7の問い合わせが送信されたときにGoogle Analyticsでイベントとして取得したかった

ということで、そのあたりの具体的な方法は以下の二つのサイトが参考になります。

【Googleアナリティクス】目標設定とイベントトラッキングを設定しよう!

簡単で完璧!WordPressの問い合わせフォームのプラグイン『Contact Form7』にGoogle Analyticsのコンバージョンタグを設定する方法

 

上のサイトの手順通りにやっていけば普通ならそれでイベントがトラックできるはずです。が、私の場合はトラッキングできなかった。。その時の状況としては

  • Thank youページには飛ばない設定で送信ボタンをクリックすると、送信完了メッセージが表示されない
  • Contact Form7で利用できるアクションフック(ユニバーサルアナリティクス用)を設定
  • Google Analyticsではユニバーサルアナリティクスになっていることを確認済み

という感じでした。

順に詳細を記述していきます。

 

Google Analyticsでイベントが取れなかったときの状況

Contact Form7では送信ボタンをクリック後、thank you ページ(送信完了ページ)に遷移するのではなく、フォームのあるページ内に「送信完了しました」というメッセージを表示させる方法を推奨しています。

Thank youページに遷移させるなら、そのページへの遷移をGoogle Analytics側でイベント計測すればいいので問題はないのですが、今回はわざわざThank youページに飛ばすのではなく、送信完了メッセージを同一ページ内に表示させたいという希望がありました。

Contact Form7では、以下のようなon_sent_okアクションフックを使うことで送信イベントを取れるようになります。

 

が、このアクションフックを設定すると、問い合わせの送信完了メッセージが表示されなくなってしまいました。

問い合わせ自体は送信されているのですが、「送信完了しました」というメッセージが表示されないと、送った側は「アレレ、送信されたのかな??」と不安になりますよね。

 

で、この状況を調べてみたところ、以下のサイトに「Javascriptのコンフリクトの可能性がある」という情報がありました。

Contact Form7でコンバージョンを計測する方法

on_sent_okフックを使うとメッセージが表示されないのは他のプラグインで使われているjavascriptとのコンフリクトが起きている可能性があるため、これを解決するには、使用中のプラグインを全部止めてどれが原因なのか調べる必要があると。。

「ええー、面倒くさいよ・・・」と思いつつ、止められるプラグインは全部止めてみたものの、変化なし。

 

必須プラグインとコンフリクトしているとしたらどうしようもないな・・・と思い、半ばあきらめモードになりました。

が、ふと思い立って、ブラウザのデベロッパーツール(Windowsの場合 Ctrl + Shift + i または F12キー)を開いてみたところ、こんなエラーが発生していることが判明。

Reference Error: ga is not found 

 

gaという変数がありませんよ、というエラーですよね。これ。調べてみると、Google Analyticsでユニバーサルアナリティクスに設定されているかいないかで、gaだったり_gaqだったりするらしいです。

ユニバーサルアナリティクスに変更したときは、Contact Form 7のコンバージョン設定も変更するべし! http://hamatte-wataru.com/analytics_contact_form_7/

しかし、私の場合はGoogle Analyticsはユニバーサルアナリティクスになっているし、これはちょっと違う話だなと。

 

解決に至った道。原因はYoast Google Analyticsだった!

問題が起こると最近はデベロッパーツールで中身を覗くことが多いのですが、生のソースコードを一覧するっていうのも時には大切なんだなということを学びました。

 

コンタクトフォームを設置しているページのソースコードを見てみると… なんと、gaとなっているはずのところが、__gaTrackerになっている!!

 

なんでだろう!??と思い、よくよく見てみると、このトラッキングコードはプラグインGoogle Analytics by Yoastが吐き出しているものだと分かる。

 

そこでこの件について調べてみたところありました!こんな情報が。

Yoast Google Analytics Reassign ‘__gaTracker’ Tracker to ‘ga’ Variable

 

つまり、このプラグインはga変数を__gaTrackerにリアサインしているということらしい。そんなぁ。。。なんでわざわざ。。

解決方法は上のサイトにもありましたが、

 

このコードをYoast Google AnalyticsプラグインのAdvancedタブにあるカスタムコードに追加すればOK。

Yoast Google Analyticsプラグインを使用している方は要注意ですね。

 

これでContactForm7からの送信イベントがGoogle Analytics側でトラックできるようになり、送信完了メッセージも表示されるようになりました!

 

サイト移転時の301リダイレクト手順とSearch Consoleでのアドレス変更まとめ

301redirectこんにちは!先日、あるサイトのリニューアルに伴って、旧URLから新URLへの301リダイレクトの設定をしたので、やったことをこの記事にまとめてみました。.htaccessに記述するリダイレクト情報の書き方とか、Search Console(旧ウェブマスターツール)でのアドレス変更通知のやり方などを書いています。サイトの構成やURLの形が大きく変わるリニューアルをされた方は、参考になることがあるかなと思いますので、よかったら見てみてください。

そもそもリダイレクトさせる必要があるのはなぜか

ホームページやブログのリニューアルなどで、ドメインを移転させるときは301リダイレクト(恒久的なURLの移転)でアクセスを旧サイトから新サイトに流す必要があります。

その理由は、新しくドメインを取得した場合、最初のうちは検索エンジンにインデックスされてサイト内のページの検索順位が上がるまで時間がかかるので、旧サイトからアクセスを流さないと、当然ながらアクセスがしばらくガタ落ちしまう、っていうのが一つあります。

さらに、旧サイトの内容と新サイトの内容が重複していると、リダイレクト設定しなければ、検索エンジンはそれぞれ別のサイトとして扱うため、新サイトのページが「重複コンテンツ」とみなされ、検索結果に表示されなくなる可能性も高くなってしまう。

もちろん、旧サイトを削除すれば、時経つうちに検索エンジンのインデックスからも消えて行って、新サイトのページがインデックスされるようにはなるでしょうが、時間がかかりますよね。「重複コンテンツ」とみなされるとペナルティ扱いになるかもしれないですし。。

訪問者の視点で見れば、せっかく見たい記事にアクセスしたのに404エラーで「ページが見つかりません」となったら、ガッカリですよね。「ユーザーフレンドリー」という意味でも、ちゃんと新しいサイトに飛ぶようにリダイレクトさせることは大事です。

 

では以下、具体的なリダイレクトの設定手順です。

ちなみに、今回は

  • 旧サイトと新サイトが両方とも存在している(ドメインがあって、各ページが見れる状態)
  • .htaccessファイルが旧サイト側にあり、ApacheのMod Rewriteが使える
  • サイトのリニューアルに伴って、URLの形式が大幅に変わった

という条件で設定をしています。

 

旧サイトの各ページと新サイトの各ページのマッピングを行う

今回のように、サイトのリニューアルに伴って、URLの形式が大幅に変わり、個別で各ページのリダイレクト先を指定しないといけない場合は、まず間違いのないよう、Excelなどで旧サイトの新サイトの各ページのURL対応表を作っておくのがいいと思います。

Excelで対応表を作れば、それをもとにリダイレクト設定情報を作りやすくなるのでオススメです。私は以下のような感じに対応表を作りました。

旧サイトの新サイトのページの対応表

この対応表について少し説明しておきますね。

まず、旧サイトページURLのほうは、.htaccessのある場所からの相対パスでURLを書きます。

例).htaccessと同じ階層にoldpage.htmlがあるなら、oldpage.html

例).htaccessの階層より下のaaaディレクトリにoldpage.htmlがあるならaaa/oldpage.html

 

もし.htaccessの中にRewriteBaseの記述があって、起点となるディレクトリがあえて指定されている場合は、そこからの相対パスを書く必要があります。

例).htaccessの階層より下のaaaディレクトリにoldpage.htmlがあって、RewriteBase /aaa/となっている場合は、oldpage.html

 

新サイトのほうは、http(またはhttps)からの絶対パスで書きます。

例)http://newsite.com/newpage.html

 

301リダイレクト情報を生成する

対応表が出来上がったら、リダイレクト設定の文字列を作成します。これは、Excelの文字結合の式を使って、以下のように入力すると簡単です。

Excel文字結合

式のところはこんな感じになっています。

=CONCATENATE(“RewriteRule ^”,A2,”$ “,B2,” [R=301,L]”)

 

以下のような感じに文字列が出来上がったらOKです^^

RewriteRule ^oldpage.html$ http://newsite.com/newpage.html [R=301,L]

 

最初の行の式が作れたら、あとはそのセルをコピーして続きの行に貼り付けていくだけで、自動的に文字列を生成してくれます。

Excelでリダイレクト文字列生成

あとは、これらの生成された文字列を.htaccessにコピペすれば、記入ミスを防いで簡単に個別ページのリダイレクト設定ができますね^^

 

ドメイン名が変わるだけの場合のリダイレクトの書き方

例えば、旧:abc.com/xxx/yyy.html ⇒ 新:def.com/xxx/yyy.htmlのように、ドメイン名が変わるだけで旧サイトと新サイトのURLの形が変わらない場合は、以下のように、.htaccessに書くだけでOKです。

例)aaa.comをサブドメインのbbb.aaa.comに移転する場合

RewriteEngine On
RewriteCond %{http_host} ^aaa.com
RewriteRule ^(.*) http://bbb.aaa.com/$1 [R=301,L]

 

.htaccessファイルに各ページのリダイレクト情報を記述する

旧サイトの.htaccessファイルを開いて、以下のようにRewriteEngine onのあとに、Excelで作った対応表の一番最初のリダイレクト情報だけ試しにコピペします。

RewriteEngine on
RewriteRule ^oldpage.html$ http://newsite.com/newpage.html [R=301,L]

これで.htaccessを保存して、旧サイトのoldpage.htmlにアクセスし、リダイレクトされるかどうかチェックしてください。

リダイレクトされることが確認できたら、そのほかのページのリダイレクト情報も同様にコピーして.htaccessに貼り付けます。

 

リダイレクトがうまくいかない場合

旧サイトのURLのところは

^oldpage.html$

または

^\oldpage.html$

という風に\がいるときと要らない時があるみたいなので、もし最初の方でうまくリダイレクトされなかったら、バックスラッシュを追加してみてください。

そのほかにも、.htaccessに色々記述がある場合、RewriteRuleを記述する位置によってはリダイレクトされないこともあります。ちょっと面倒ですが、.htaccessに書かれている内容の意味をネットで調べてみると、どこに記述すれば正しく動くのか、わかることもありますので、調べてながら試してみてください。

 

トップページのリダイレクト情報の書き方

ちなみにトップページの場合はこんな感じなります。

RewriteRule ^$ http://newsite.com/newpage.html [R=301,L]

または

RewriteRule ^\$ http://newsite.com/newpage.html [R=301,L]

 

これで、個別ページのリダイレクト設定が完了しました!

 

 

ただし、もう一つ気になることがあります。それは…

新サイトには移転させないページの扱い

旧サイトには存在しているページでも情報が古くなったなどの理由で新サイトには移さないページも出てくることがありますよね。こういうページはどうしたらいいのか。ページを削除して終わり、っていうのでもいいのかもしれませんが、今回は新サイトの404エラーページに飛ばす設定にしてみました。

新サイトの404エラーページにメニューやサイトマップを載せておけば、少なくとも新しいサイトから興味のある情報を見つけてもらいやすくなりますので^^

.htaccessに、以下の一行を追加すればOKです。http://newsite.com/404.htmlのところはご自分の404ページに合わせて適当に変更してくださいね。

ErrorDocument 404 http://newsite.com/404.html

 

新サイトがWordpressなら

ErrorDocument 404 http://newsite.com/index.php?error=404

と書けば大丈夫だと思います。(新サイトに404.phpがない場合は作ってくださいね)

 

ちなみに、こういうページをすべて新サイトのトップページに301リダイレクトさせるのはSEO的によろしくないようなので、注意してください。

 

 

ここまで終わったら、Search Consoleで検索エンジンにドメイン移転を知らせるようにしておきます。

Search Consoleでアドレス変更

アドレス変更の解説がありますので、参考にしながらやってみてください。

アドレス変更ツールの使用

注意点は、以下の手順を踏む時点で、まだ旧サイトが確認できる(アクセスできる)状態にしておく必要がある(=ページを消してはいけない)ということです。

まず、旧サイトと新サイトを両方Search Consoleに追加しておきます

旧サイトのプロパティを開いて、右上の設定ボタンから「アドレスの変更」をクリック

SearchConsoleアドレス変更

新しサイトを選択したら、順に確認ボタンをクリックしていって、アドレスの変更通知を完了させる

Search Consoleアドレス変更

これで、新サイトのページを「重複コンテンツ」扱いされる心配もなくなりますね!

 

以上、サイトリニューアルに伴うドメイン移転時のリダイレクトのまとめでした。ご覧いただきありがとうございました!

フラットデザイン・ワンページのお洒落な無料HTML5テンプレート8選

こんにちは!最近のWebデザインの主流になっている「フラットデザイン」、そして一ページで完結する縦長(LP、ランディングページ)のHTMLテンプレート。お洒落なデザインはたくさんあるのですが、何十個も何百個も見ていると、特に無料のものはどれも似たような感じだな~と飽きてくることがあります。今回は色々見ていくなかで、「お!?」と興味をひかれたものを一覧にしてみました。記事の最後で無料のHTML5テンプレートがダウンロードできるサイトもご紹介しているのでよかったらそちらからも探してみてくださいね。

一画面に収まったアプリっぽい使い勝手のテンプレート

Screenshot of www.templatemo.com

 

一ページの縦長サイトが結構流行っていますが、こちらは左サイドが固定されていて右側がメニューに合わせてスライドしていく感じです。なので、一画面で完結しているようなアプリっぽい感じの印象になります。縦長のサイトに飽きたらこういうのもいいかもしれませんね。

HTML5 + CSS3 + Bootstrapフレームワークで作成されたレスポンシブ対応のテンプレートです。

デモ

ダウンロード

 

ファーストビューの色使いとレイアウトが大胆なテンプレート

Screenshot of www.templatemo.com

 

なかなか無いカッティングのレイアウトで、ファーストビューのインパクトがすごい一枚モノのテンプレートです。ポートフォリオ向け。色を自分でカスタマイズすれば印象がガラッと変わりそうですね。HTML5 で作られ、レスポンシブ対応。

デモ

ダウンロード

 

 

シンプルだけど色使いがお洒落なテンプレート

Screenshot of templates.websitetemplatesonline.com

 

かなりシンプルなフラットデザインですが、色使いがお洒落だったので載せてみました。

デモ

ダウンロード

 

 

ふわふわっと表示されるのが今風のテンプレート

Screenshot of pixelhint.com

 

スクロールに合わせて表示されるコンテンツがふわふわっと浮かび上がる感じになっているのが今風のテンプレート。HTML5 + CSS3。

デモ

ダウンロード

 

斜めのカッティングがアクセントになったテンプレート

Screenshot of www.gt3themes.com

 

斜めになっていなかったら、何でもないよくある一枚モノのテンプレートですが、斜めにカッティングされているのがアクセントになってお洒落感が増していると思いました。木の質感とフラットデザインの組み合わせもいいですね。

デモ

ダウンロード

 

スクロールとホバー時のエフェクトがいい感じのシンプルなテンプレート

Screenshot of templates.websitetemplatesonline.com

 

テンプレートに含まれるのはトップページだけであとは作りこみが必要になりますが、ホバー時のエフェクトがよかったので載せてみました。ホバー時やスクロール時のアニメーションを取り入れるのも最近流行っているので参考になりそうです。

デモ

ダウンロード

 

スクロールとホバー時のエフェクトがお洒落なテンプレート

Screenshot of webthemez.com

 

こちらもスクロールとホバー時のエフェクト(アニメーション)がとてもお洒落だったので載せてみました。

デモ・ダウンロード

 

ナビゲーションメニューの位置が一工夫あるテンプレート

Screenshot of webthemez.com

 

ナビゲーションメニューは普通ページの上のほうにありますが、このテンプレートの場合、ファーストビューでは画面下に表示されるようになっています。その後スクロールすると上に固定されるので使い勝手も悪くありませんし、第一印象をパシッと決めたいときに使えそうなレイアウトだなと思いました。

デモ・ダウンロード

 

無料でレスポンシブ対応のHTML5テンプレートがダウンロードできるサイト

この記事に載せたのはほんの一部で、以下のサイトではHTML5の無料テンプレートが多数そろっているので、お気に入りのテンプレートを見つけてみてください。

Templatemo

WebThemez

WebsiteTemplateOnline

ThemeWagon

 

BootstrapをWordPressテーマに組み込んでレスポンシブ対応のナビゲーションメニューにする方法

wp-bootstrap-navこの記事ではWordpressのテーマを自作する際に、Bootstrapフレームワークを使ってナビゲーションメニューをレスポンシブ対応させるための設定について書いています。

WordPressではナビゲーションメニューを動的に作成してくれるテンプレートタグwp_nav_menu()がありますが、これとBootstrapの組み合わせ方について具体的なコードの書き方の例を載せてみました。

 

用意するもの

まずは以下のファイルをそれぞれダウンロード。(jQueryやBootstrapをCDNからの読み込みにしている場合はnavwalkerのみダウンロード)

jQuery

jQueryはBoostrapを動かすために必須なので、まだテーマに組み込んでいない場合はダウンロードする。上のリンクから公式サイトに行って「Download the compressed, production jQuery 1.11.3」のリンクをクリック。ダウンロードしたファイルを自分のテーマのjsフォルダに入れておく。

 

Bootstrap

Boostrapをまだ組み込んでいない場合は上のリンクからダウンロード。ダウンロード後、zipファイルを解凍してbootstrap.min.cssとbootstrap.min.jsを自分のテーマのcss,jsフォルダにそれぞれ入れておく。

 

Bootstrap navwalker

ナビゲーションメニューを表示させるwp_nav_menu()タグにBoostrapを組み込むためのクラス。上のリンクからダウンロードし、wp_bootstrap_navwalker.phpをテーマフォルダに入れておく。

 

function.phpに記述すること

 

header.phpに記述すること

headタグ内に以下のタグを記述してBootstrapのCSSファイルを読み込み。

 

bodyタグ内、ヘッダーのナビゲーションメニューを表示させたい部分に以下のコードを記述する。

 

wp_nav_menu()のパラメータのmenu_classの部分は、Bootstrapで用意されているクラスを記述している。fallback_cbとwalkerのところは上記のとおりに記述。その他は適宜変更してOK。

具体的なパラメータの設定方法については以下を参照

テンプレートタグ/wp nav menu

 

footer.phpに記述すること

Bootstrapのjsファイルの読み込み。

 

出力されるHTMLタグの例

以下のようなHTMLタグが出力される。

 

これは使える!ギャラリー用無料WordPressプラグイン6選

pictures-365641_640

こんにちは!先日とあるHTMLサイトをWordpress化しているときに、フォトギャラリーをどうやって表示させるかで結構悩んだので、そのときに調べたギャラリー用Wordpressプラグインについてまとめてみました。

HTMLサイトの場合は大抵jQueryを使ってギャラリー表示がさくっとできますが、Wordpressの場合、どのプラグインがいいか、無料版でどんな機能が使えるか(無料版は大抵なにかしらの制限がかかってますので…)結構決めるまでに考えることが色々あると思います。どのプラグインもメリット・デメリットあるので、自分に一番合ったギャラリープラグインを探すのにこの記事が参考になれば幸いです!

お洒落なポートフォリオが作成できるギャラリープラグイン

HUGE IT Portfolio Gallery

Screenshot of wordpress.org

 

写真だけでなく、自分の作品をポートフォリオとして紹介したいときに役立つプラグイン。もちろん写真もOKですよ^^ デフォルトのデザインがとてもよくて、作品や写真が映えるギャラリーが作れます。タイトルや説明文があるときの表示が特にお洒落なので、ただ単に画像や写真だけ載せるというより、解説をしっかり書きたい人におススメです。ファイルの管理や説明文の記入なども便利。追加できる写真の枚数制限もなしです。

難点は、無料バーションだと細かいオプション設定ができないことでしょうか。デフォルトのままで十分いけそうな気もしますが。試してみてください。

プラグインのデモはコチラ

 

タイル状の表示がお洒落なギャラリープラグイン

Unite Gallery Lite

Screenshot of wordpress.org

 

写真が映えるタイル状の表示やグリッド表示、スライダー、ビデオギャラリーなど、色んな表示方法が選べるギャラリープラグイン。使い勝手もよくて個人的には一番使いたいプラグインでした。

が、無料版は一つのギャラリーに12枚までしか写真を追加できないという制限がついています。これが難点で使用をあきらめましたが、厳選した写真を載せると決めて使うのもアリですね。

デモはコチラ

 

無料版でかなり自由度の高いカスタマイズが可能なギャラリープラグイン

WP Photo Album Plus

Screenshot of wordpress.org

 

デフォルトのデザインはいまいちですが、その見た目だけでこのプラグインを葬り去るのはもったいない!相当自由にカスタマイズができます。ダッシュボードのプラグインのオプションから(=コードをいじらずに)ここまでカスタマイズができるギャラリープラグインは他にないんじゃないかと思います。

もちろんスタイルのカスタマイズもできますし、ギャラリーの表示の仕方や表示内容に色々とこだわりがある場合はこのプラグインを使うのがベストだと思います。もちろん有料版を使えばカスタマイズ度が高いプラグインはたくさんありますが、「無料で使いたい。でもカスタマイズもしっかりしたい」というあなたにはかなりおススメです。

 

何だかんだ一番メジャーで使いやすいギャラリープラグイン

NextGEN Gallery

Screenshot of ja.wordpress.org

 

色々インストールして試してみたものの、結局落ち着いたのがこの一番メジャーなギャラリープラグインNexGENでした。欲しい機能は無料版で一通り設定できることや、動作に安心感があること、また利用者が多い分、調べた時に情報が多かったので結局このプラグインを導入して今に至っています。

画像ファイルのアップロード数制限などもないですし、なんだかんだ言っておススメです^^

 

WordPress標準ギャラリーをLightBox風に表示させるプラグイン

Easy FancyBox

Screenshot of ja.wordpress.org

 

前述のプラグインはダッシュボードにギャラリー専用の管理メニューが作られて、画像ファイルもWordpressのメディアとは別に保存されるタイプのプラグインでした。このプラグインは、Wordpressにデフォルトで用意されているギャラリー機能を使ってギャラリーを作った時に、jQueryのLightBox風のポップアップ表示ができるようにします。

ガッツリとギャラリーサイトを作るわけじゃなくて、サイトに一ページギャラリーを追加したいという場合なんかは、この方法が一番楽で動作も軽いのでは、と思います。

使い方は以下のサイトの解説が分かりやすいので参考にしてみてください。

写真・ギャラリー用にLightbox風のWPプラグイン「Easy FancyBox」

 

WordPressの標準ギャラリーを使ってタイル風の表示ができるプラグイン

Slim JetPack

Screenshot of wp-themetank.com

 

意外にこれもいいんじゃないか、と思ったのが、Jetpackの機能を使って、Wordpress標準のギャラリーをタイル風に表示させる方法。「標準ギャラリーでいいけど、表示のスタイルを一工夫したい」という場合はこの使い方、試してみてください。具体的な使い方は以下のサイトを参考にしてくださいね。

タイルギャラリー、スマホサイト作成など便利ツール11個を搭載。WPプラグイン「Slim Jetpack」