ブログやサイトのドメインを取得する方法

この記事では、ブログやウェブサイトを作るときに必要な独自ドメインの取得方法について図解していきます。

基本的にはどのドメイン登録業者で取得しても大きな差はありませんが、 価格を重視するなら「お名前.com」からの取得がおすすめです。ドメイン登録業者の老舗で実績があり、他のサイトよりも安い価格で取得(登録)できることが多いです。

お名前.com

独自ドメインを決める時のポイント

価格について

独自ドメインの後ろに何がつくか(.com .net .bizなど)によって 価格が変わります。1年目が激安でも、2年目から価格が大幅にアップするものがあるので、注意してください。

 

ドメインのつけ方について

ドメインは、これからブログやサイトのURLにずっと使われていくものです。こう書くと逆に注目されちゃうのであまり書きたくないんですが、当ブログのドメイン、もっとちゃんと考えればよかった・・・いまだに後悔してます(苦笑)。「今さら変えるのも面倒だしまたゼロから始めるのもな・・・」と思ってそのまんま。。こうならないためにも、ちゃんと考えてつけましょう。

つけ方は自由ですが、ブログやサイトの名前が決まっているならその名前にちなんだドメインがいいですね。

ノマドWEB なら nomadweb.com みたいな感じで。

ブログのテーマに関連のあるキーワードを使うとSEOに良いとか言われていたりします。このあたりはいろんな意見があるので、気になる方はGoogleで検索して調べてみてください。個人的には自分が満足できて、自分や他の人が覚えやすいもの、あまり長くないものにするのがいいのではと思います。

ただし、せっかく一生懸命考えても、すでに他の人に使われてしまっている場合もありますので、幾つか候補が決まったら早速、ドメイン名(独自ドメイン)が取得可能かチェックしてみましょう。

 

ドメインの取得手順

考えたドメイン名の候補が取得可能かチェックするには、まずサイトにアクセスし、ドメイン名の候補を下の画像で示す枠内に入力して、検索ボタンをクリックします。

お名前comサイトでドメイン検索

今回は一例としてapplecityとbananarecipeという二つのドメイン名を候補として検索してみました。

検索すると、以下のようなページが表示されます。

ドメインの候補

ドメインが登録可能な場合には□が一覧表に表示されます。自分が使いたいものがあればチェック✔を入れ、必要ないものはチェックを外します。「次に進む」ボタンをクリックしてください。 独自ドメインの登録手続きが開始されます。

もし、一覧表がすべて×(どれも使用不可)だった場合や、使いたいドメインがない場合は、「他のドメイン名を検索する」の欄から別のドメイン名を入力して再度検索します。

 

ドメイン取得手続き

お申込み内容を確認します(上の画像はbananarecipe.clubというドメインを申し込むときの場合)。ここではWhois情報公開代行に必ずチェックを入れて「次へ」をクリックします。

 

以降のページで、個人情報の入力、その後、お支払情報の入力を行います。

※お支払情報入力では、 以下の項目にチェックを入れるようにしてください。

☑自動更新設定

☑Whois情報公開代行

登録内容確認のページで、入力内容を確認し、登録を完了させましょう。確認メールが届きますので、 必ず確認するようにしてくださいね。

 

以上、独自ドメインの取得手順でした。

WordPressでブログを初めて作るならまず最初に知っておきたい予備知識

今回の記事では、Wordpressでブログを作って運営していくのに必要となるものと予備知識についてまとめています。

初めてWordpressでブログを作る方で、「自分、あまりPCやインターネットの用語に詳しくないな~」と思っている方は、実作業に入る前に、ぜひこの記事の内容を一読してみてください。自分で実際に作業していくと色々クリアになってきますので、全部理解できなくても大丈夫です。気軽な気持ちで読んでみてくださいね^^

ブログ開設に必要な環境

PC+ブラウザ

WordPressでブログやサイトを作るには、パソコンが必要になります。スマホやタブレットからも記事の投稿や更新などはできるのですが、最初に色々設定していく際は特に、管理画面での細かな作業はパソコンなしではキツイと思います。

 

ブラウザも必須。何でもいいんですが、できればIE以外にしてください。Chromeが私はおススメです。

Chromeがインストールされていない場合は以下のリンクからダウンロードできます。

Chromeブラウザのダウンロード

 

インターネット

WordPressはサーバーにインストールして利用します。基本はインターネットに接続できないと記事の投稿や編集などもできません。また画像のアップロードなども時々あるので、ある程度、回線速度が安定したネット接続環境を用意するようにしてくださいね。どれくらいが安定した回線速度なのか、といわれると難しいですが、低速なモバイル通信とかじゃなければ大丈夫だと思います。

 

WordPressブログ作成に必要な4つのもの

WordPressでブログを作っていくのに必要なものは

  1. レンタルサーバー
  2. 独自ドメイン
  3. WordPress本体
  4. WordPressテーマ(テンプレート)

の四つです。

 

そしてブログに記事を投稿できるようになるまでに、 おおまかに四つの段階があります。

  1. レンタルサーバーを借りる
  2. 独自ドメインを取得する
  3. WordPressをサーバーに設置する
  4. テーマをWordpressにインストールする

それでは以降でそれぞれについて簡単に説明をしていきますね。

 

レンタルサーバー

レンタルサーバーとは

ブログをインターネット上に公開するためには、ブログを発信する拠点が必要ですよね。その拠点となるのがレンタルサーバーです。

レンタルサーバーにWordpressをインストールし、ブログのデータ(設定情報、記事や画像など)を保存することで、インターネット上でブログを公開できるようになります。

サーバーとWordpress

レンタルサーバーは性能やサーバー会社によって異なりますが、Wordpressが利用できるサーバーは月額300~1500円くらいで借りれます。

 

レンタルサーバーでブログを運営するメリット

レンタルサーバーをわざわざ借りてブログを運営するとなると、「難しそう。面倒くさそう」と思ってしまうかもしれません。無料ブログサービスを利用していれば、必要ないですからね^^; でもレンタルサーバーでブログを運営することにはとても大きなメリットがあるんです。

そのメリットとは「安定性」です。無料ブログサービスだと突然、利用規約が変わって急にブログが更新できなくなったり消されてしまうということがありますが、サーバーを借りてブログを運営すれば、他者によってブログが消されてしまうということはなくなります。

Googleアドセンスなどを利用してブログから収益を得たいと思っている場合や、個人ブログのように情報を何年も蓄積していく場合、それが「消されない」という安心感はすごく重要ですよね。

それにサーバーを借りること自体は全然難しくないので安心してくださいね^^

 

では次に、独自ドメインとは何か、なぜ独自ドメインを取得する必要があるのか、見てみましょう。

 

独自ドメイン

独自ドメインとは

ドメインは、簡単にいうと、インターネット上の住所のようなものです。あなたの家の住所は、世界に二つとありませんよね。ドメインというインターネット上の“住所”も世界に一つだけです。その“住所”があるおかげで、人々はインターネット上であなたのブログやサイトにアクセスすることができます。

 

以下のようなURLのピンク色の文字の部分がドメインと言われる部分になります。

http://○○○.com

 

特に○○○の部分は、自分で好きな文字列に設定でき、これを独自ドメインと呼びます。

 

例えば、当ブログのURLは http://locatimefree.com ですが、 独自ドメインを取得するときは、locatimefreeという部分の文字列は自分で決めて、 その後ろの部分は.com .net .biz などから好きなものを選ぶことになります。

独自ドメインはドメインを提供する会社や、.comにするか.netにするかなどにもよって価格が変動しますが、年間1000~2000円くらいを考えておけば大丈夫です。

 

独自ドメインを使うことのメリット

独自ドメインでなければ、無料で使えるドメインもありますが、わざわざ独自ドメインを使うことにはメリットが幾つかあります。

自分の好きな名前にできる

サイトやブログの名前やテーマに合ったドメイン名にすることができるので愛着がわきます。自分で決めた文字列に.com や .bizなどがつくだけのシンプルな形なので覚えやすいですし、覚えてもらいやすいです。覚えてもらいやすいっていうのはアクセスアップ・ブランディングのためにも重要だったりします。

 

SEOに強い

独自ドメインの方が他のドメイン形式に比べて検索エンジンによる評価が高くなります。

評価の高い順に

  1. 独自ドメイン 例) http://sakura.com
  2. サブドメイン 例) http://○○○.sakura.com
  3. ディレクトリ形式 例) http://sakura.jp/○○○/

となっていて、無料ブログサービスを使う場合など、無料で使えるドメインは基本、サブドメインやディレクトリ形式のドメインになっています。こういった場合、検索エンジンでサイトを上位表示させるのが格段に難しくなったり、同じドメインを使っている他のユーザーの影響を受ける可能性があったりします。独自ドメインならこういった心配もないので安心です^^

 

自分で変えなければずっと変わらない

独自ドメインを持ち続けることで、以下のような大切な資産が築かれていきます。

  • バックリンク(他のサイトやブログ、SNSなどからリンクされること)
  • 検索エンジン(Googleやyahooなど)の評価
  • ドメイン年数

これらは検索エンジンでの上位表示に欠かせない要素。もし、ドメインが変わってしまたら、せっかくの被リンクや、検索エンジンの評価、ドメイン年数は水の泡。またゼロから再スタートしなければいけないんです。

例えば、無料ブログサービスのドメインを使っていて、急にそのサービスが終了した場合、自分が使っていたドメインが無くなってしまったり、あるいは別のものに変更になってしまうかもしれません。

 

サイトやブログを長く運営すればするほど、築いたものを失った時の痛手は大きくなりますので、長期的な目で見るなら独自ドメインを持っておくのが安心です。

 

 

 

ちょっと長くなりましたが、次は、Wordpress本体についてです。

WordPressワードプレス

WordPress(ワードプレス)とは、一言で言うと、本格的なブログやウェブサイトを簡単に作るためのWebアプリのようなものです。コンテンツ・マネージメント・システム(CMS)といわれるウェブサイト管理・更新システムの一つで、現時点では、世界で最もシェア率の高いCMSになっています。

公式サイトhttp://ja.wordpress.org/

WordPress本体は無料で使うことができ、また拡張機能として追加できるプラグインも無料で使うことができるものが本当っにたくさんあります。基本的にはサーバーとドメインにお金がでていくだけで運用が可能な、何ともありがたいリーズナブルなシステムなんです。

最初は少しとっつきにくいと感じるかもしれませんが、慣れてくればサクサク作業を進められるようになりますよ^^ 私はプログラミングの経験がなくてもワードプレスでブログを作って更新している人を何人も知っています。

 

WordPressのテーマ

WordPressのテーマは、ブログやサイトの各パーツをどう配置するか、どんなデザインにするかなどが記述されたファイル一式のことを言います。「テンプレート」というほうが分かりやすいかもしれませんね。

例えば、当ブログの一番上にはブログタイトルやメニューバーのあるヘッダーがあり、左側のコンテンツ部分に記事、右側には広告やブログカテゴリーなどの表示があるサイドバーが配置されています。一番下には管理人情報などのあるフッター

こういったブログの各パーツのレイアウトや、ベースとなるデザインを決めるのがWordpressのテーマです。

 

ブログの基本的なレイアウトとデザインはあらかじめテーマの中に記述されているので、あとはサイトタイトルなどを設定したり、カテゴリーを作ったり、記事を書いたりと、コンテンツを作っていけば、運用が開始できてしまうわけです^^

テーマには無料で配布されているものから有料のものまで色々ありますが、無料のものでも使いやすいものはたくさんあるので予算はあまり気にしすぎなくて大丈夫です。当サイトは賢威という有料のテーマを使っています。

 

以上、Wordpressを初めて使う人が知っておきたい予備知識でした。ではまた!

読みやすさが一気にアップする記事装飾のアイデア【CSSサンプルあり】

post-styling-ideaSEOを考えるときには、記事ボリュームやクオリティ、またタイトルのつけ方など、最低限押さえておきたいポイントがあります。検索エンジンでの上位表示はそれでいいのですが、それと同時に意識したいのが今回のテーマである記事の「読みやすさ」です。

 

人気のブログやサイトを見ていると、文字ばかりが羅列されていることは稀で、

  • 見出し
  • チェックリスト(ブレッド)
  • 引用文
  • 補足情報

などが良く使われていて、読者があまり意識しなくてもスムーズに記事の構成を把握して内容を理解できるようになっています。そのため、長文であっても読んでいて疲れないですし、重要なところが記憶に残りやすい。

 

 

読み手を疲れさせない

⇒ 記事を最後まで読んでもらえる

⇒ ⇒ さらに別の記事も読んでもらえる

⇒ ⇒ ⇒ ブログやサイトを覚えてもらえ、リピーターが増える

⇒ ⇒ ⇒ ⇒ ブログ・サイトの評価が上がる

という感じで人気が上がっていくのだなと思います。

 

もちろん、記事を書く最初の段階でちゃんと構成を考えているからこそ、そのあとの装飾が生きてくるのであって、適当に記事を書きあげてから、「じゃあ分かりやすくなるように装飾してみるか」というやり方では本末転倒ですが・・・

 

前々から「記事を書いても何だか毎回バシッと決まらないな~」と思っていたのですが、「それは記事の装飾に統一感がないからなのかも!?」と思い、当ブログの記事装飾を見直してみました。

この記事では今回いろんなブログ・サイトを分析しながら考えたこと、やったことを備忘録もかねてまとめています。「記事を読みやすく、きれいにまとめるにはどうしたらいいのかなぁ・・・」と思っていたあなたに参考になれば幸いです。

WordPressテーマを直接いじらずにCSSをカスタマイズする方法

本題に入る前に、CSS編集のときに知っておくといいことを一つ。

ブログの「見た目の部分の変更」は、一発でバシッと決まることは稀で、何回か(あるいは何十回か?)ベースになるブログデザインと照らし合わせながら、適切なものに修正・変更を加える必要がでてくる場合がほとんどですよね。

こういう時に、Wordpressで使用しているテーマのCSSファイルをガンガン編集するのはちょっと怖い、ということもあると思います。バックアップをとるのは大切ですが、ちょっとした変更をするたびにバックアップするのは面倒。。「面倒だな~」と思っているうちに気が緩んでバックアップしなかったら、そういう時に限ってうまくCSSが機能しなくなって、元にも戻せなくなった!!>_< なんていう自体になったりします。。

また、お使いのテーマが頻繁にバージョンアップする場合は、テーマを更新したらせっかく編集したCSSが消えてしまいますので、直接いじらないほうが賢明です。

 

こういった理由から、WordPressテーマのCSSファイルを直接編集したくない場合、幾つかやり方があります。定番なのはCSS編集用に「子テーマを作る」方法。ただ、「そこまではちょっと…」という方も多いと思います。そこでお勧めなのが、カスタマイズ用のCSSをWordpressに追加・管理できるプラグインを利用する方法です。

 

私はテーマの更新もほぼないので、テーマ内のファイルもガンガンいじっちゃってますが、用途に応じてJetpackのCSS編集機能もあわせて利用しています。かなり便利です^^ 使い方も簡単なのでぜひ導入してみてください。JetpackでのCSS編集機能の使い方は以下のサイトの記事が親切に説明してくれています。

[WordPress] 出先からでもサクッとCSSを変更出来るJetpackの「CSS編集」が便利

 

他にも似たようなプラグインがありました。気に入ったものを使ってみてください。

Simple Custom CSS – テーマを直接編集せずにCSSをカスタマイズできるWordPressプラグイン

 

本題に入る前に、あともう一点!

デザインの調節に絶対に使いたいブラウザの開発用ツール

デザインの調節をするときに、ブラウザの開発用ツールは使っていますか?

Chromeだと「デベロッパーツール」、Firefoxだと「開発ツール」でブラウザによって言い方が色々ですが、最近のブラウザには基本、標準でついています。IEではF12、それ以外のブラウザは大抵ショートカットキー Ctrl + Shift + i (Windowsの場合)で表示されると思います。

この機能を使うと、

CSSファイルを編集して保存

ページをリロード

デザインをチェック

気に入らなかったらまたCSSを編集…

というサイクルを超短縮することができるんです。

好きなだけブラウザ上でCSSを編集して、最終的に決まったものをCSSファイルにコピペし、保存。これで完了しちゃいます^^

 

使っている人も多いと思いますが、まだだという方は、基本的な使い方を以下の記事にまとめていますので、ざっと読んでみてください。

超時短!ブラウザ上でCSSの編集がサクサクできる開発ツールの基本的な使い方

 

これで準備万端!本題に入っていきましょう^^

どんな内容を装飾したらいいのか

今回いろんなブログやサイトをはしごして、読みやすいな~と思った記事はほぼ共通して、以下に挙げるパーツが本文中で目立つように、あるいは本文との区切りが分かるように、さりげなくデザインが施されていました。

  • 見出し
  • 引用文
  • チェックリスト
  • 注意事項
  • 補足情報
  • リンク

それぞれ、CSSサンプルも含めながら以降でアイデアを紹介します。

 

記事装飾のアイデア【CSSサンプルつき】

見出しはかなり目立つ工夫を

見出しを使って、記事に適切な区切りをつけることは、読み手への配慮という意味でも、SEOという観点からしても重要。その他の装飾がなかったとしても、最低限見出しだけは目立つようにすると、それだけで記事メリハリがでます。

特に大見出し(記事内での一番大きな見出し)は、どのブログやサイトでもかなり目立つように工夫されていました。具体的には

  • 大きめフォント【必須】
  • 目立つ文字色
  • 大見出し用アイコン、または目次番号
  • アンダーライン、枠線
  • 背景色、影

といった方法が良く使われています。

中でも大きめのフォントサイズは絶対必要ですね。基本的にはどんなWordpressテーマを使っても、大見出しのフォントサイズは通常のテキストよりも大きくなるように設定されていますが、バランスを見直してみるのもいいと思います。

大きめフォントにプラスして、上に挙げた中の幾つかを取り入れるとよさそうです。

中見出し~小見出しは、大見出しより少しフォントサイズが小さめで、装飾も大見出しより控えめになっていることが多いです。このあたりは自分の大見出しのデザインを念頭に、足し算引き算で考えていく感じがいいですね。

以下は当ブログの見出しに適用されているCSSです。かなりシンプルですが参考までに載せておきます。

 

2016.4.15追記)

当ブログはテーマの変更に伴い見出しデザインが変わりました。上のCSSで表示される見出しは以下のようなデザインになります。

大見出し(h3)

h3

中見出し(h4)

h4

小見出し(h5)h5

 

以下のサイトにCSSサンプルつきで参考になる見出しのアイデアがたくさん載っているので併せて参考にしてみてください。

見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)

Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える

アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン

 

引用文

他のWEBサイトや文献からの文章を引用する場合、HTMLタグblockquote(一文ならqタグ)で囲って本文と区別することはSEOの観点からも重要です。悪質なコピペサイトと一緒にされないためにも、これは必須。また、自分が書いていることの裏付けとして、権威あるWEBサイトの言葉を引用するときも、本文とはっきり区別されて適切な装飾が施されていると、一呼吸おいてその言葉をしっかり印象付けることができます。

WordPressテーマでは、引用文が本文と区別して表示されるようにCSSが定義されていることが多いですが、自分のオリジナルに編集することだって可能です。私が使っているテーマでは、背景色と枠線のみで、パッと見「引用文」という感じがしなかったので、以下のような表示に変更しました。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel consectetur urna. Aenean dui mi, tincidunt sed nisl sit amet, consequat sodales libero. Maecenas aliquam euismod vestibulum. Donec sit amet urna commodo, egestas massa et, pharetra dolor. In fringilla nunc non iaculis porttitor. Proin dictum eros sit amet scelerisque malesuada. Ut vel augue est. Nunc ut tempor velit, quis elementum odio. Suspendisse nec vestibulum justo.

引用元:http://www.lipsum.com/feed/html

 

引用符“”がついたくらいですが、これだけで引用文だということがスグわかりますよね。

私は色々なサイトを参考にしつつ、FontAwesomeのアイコンフォントの引用符を使ってCSSを定義してみました。

 

FontAwesomeをブログやサイト内で使うには、あらかじめFontAwesomeのCSSファイルを読み込むようにheaderに定義しておく必要があります。詳細は以下の記事を参考にしてみてください。

引用タグをCSSとFont Awesomeでデザインしてみた

Font AwesomeをCSSのcontentプロパティで使用する

 

アイコンフォントって何?と思った方はコチラの記事もどうぞ

商用OK!無料で使えるアイコンフォントでブログ・サイトを楽しくお洒落に

 

引用文のデザインアイデアは以下の記事も参考になります。

blockquote(引用部分)をCSSでデザインするサンプル集

blockquoteタグをCSSだけで格好良いデザインにする【画像不要】

 

チェックリスト(ブレッド)をデザインする

htmlではulタグ(普通のリスト)とolタグ(番号付きのリスト)でリストを定義できますね。

ulタグの場合

  • チェックリストA
  • チェックリストB
  • チェックリストC

olタグの場合

  1. チェックリスト1
  2. チェックリスト2
  3. チェックリスト3

ほぼ装飾無しでかなりシンプルに使っているサイトもあれば、アイコン画像なども使って目立つように使っているサイトもあったりして、ここは好き好きなのかな~と思いましたが、「このチェックリストは重要だ!」という部分は目立つ装飾を付けられるように、強調リスト用のクラスを定義しておくといいかもしれません。

私はアイコンフォントFontAwesomeを使ってチェックマークを表示させるリスト用のクラスを定義してみました。

表示するとこんな感じになります。

  • ここに一番目のテキストが入ります。
  • ここに二番目のテキストが入ります。
  • ここに三番目のテキストが入ります。

 

注意事項

「ここに気を付けてね!」と注意を喚起したい内容は、文字色を赤にしたり、黄色いマーカーで目立たせるのが定番ですが、専用にデザインを定義しておくと統一感が出て見栄えがします。

普通に文字色を変えるだけの場合:

注意:この文章はテストです。注意してくださいね!

装飾した場合:

この文章はテストです。注意してくださいね!

 

これもFontAwesomeを使ってビックリマークのアイコンを文頭に付けるようにしました。

 

補足情報などのためのボックス

本文の内容とはちょっと脱線するけど書いておきたい補足情報とか、何となく囲ってみたい文章とか、多様なニーズに使いまわせるシンプルなボックス装飾をCSSに定義しておくと、何かと便利です。

当ブログでは

  • 背景色のみのボックス
  • 枠線のみのボックス
  • 枠線+背景色のボックス

の3パターンをdivタグ用のcssクラスとして定義しています。

 

「背景色のみのボックス」の場合はこんな感じの囲みになります。

 

「枠線のみのボックス」の場合はこんな感じの囲みになります。

 

「枠線+背景色のボックス」の場合はこんな感じの囲みになります。

 

意外と使える場面があるので用意しておくといいと思いますよ^^

 

リンクの装飾

参考になったサイト、紹介したいサイト、自分のブログ内の関連リンク、商品情報へのリンクなどなど、記事の中にはほぼ必ず何かしらのリンクがあるといってもいいくらいですね。リンクのデザインはさほど凝ったものは必要なさそうですが、先頭に何かしらのアイコンがついているとお洒落感がでます。

私は、リンクの先頭のアイコンもFontAwesome(登場頻度高っ!!)を使っているのですが、CSSではなく以下のようなHTMLタグをAddQuickTagに保存(後述)して使っています。

 

表示はこんな感じ↓

Font Awesome

 

リンクアイコン手前にテキストを追加した場合↓

公式サイトFont Awesome

 

リンクアイコン手前のテキストとアイコンまわりの色や前後余白の設定はCSS側に記述しています。

 

補足:

ところで、装飾用にCSSクラスを定義するのはいいけど、毎回、投稿画面でHTMLタグにクラスを設定するのは面倒ですよね。こういう時に役立つのが先ほどちらっと出てきたAddQuickTagというプラグインです。

公式サイトAddQuicktag

このプラグインを使うと、頻繁に使うHTMLタグを「定型」として保存しておき、投稿画面のエディタからボタン一つでそのタグを追加できるようになります。具体的な使用手順は以下のサイトが分かりやすいので参考にしながらぜひ使ってみてください。

AddQuicktagの使い方 – WordPressの投稿エディタを便利にカスタマイズしよう!

AddQuicktag – エディタにHTML雛形を登録して記事作成を効率化できるWordPressプラグイン

 

今回の記事はここまでです。それではまた^^

超時短!ブラウザ上でCSSの編集がサクサクできる開発ツールの基本的な使い方

この記事ではウェブサイトの制作やカスタマイズでのCSS、HTML編集が何倍速にもなるツールの魅力と、基本的な使い方についてご紹介します。最近のブラウザには標準で備わっている開発ツールなので、もちろん無料ですし、一度使い方に慣れると「も~手放せない!」っていうくらい便利なので、まだ使っていない人はぜひ試してみてください。

ブラウザの開発ツールを使うと何が変わるのか?

プログラミングがあまりできなくても最近は、比較的簡単にウェブサイトやブログを自作することができますよね。サイトを簡単に作成できるオンラインアプリケーションを使ったり(有名どころだとWixとか)、テンプレート(Wordpressならテーマ)を利用たりすれば、HTMLやCSSの知識がほぼゼロの状態からでもサイト作成に挑戦することができます。

ただ、テンプレートを使ってサイト制作をするときでも、ちょっとしたカスタマイズをしたくなる、というのはよくあること。

例えば、簡単な例として「見出しの色と文字の大きさを変えたい」とします。さて、HTMLやCSSのどこをどんなふうに変更したらよいか?

もし、開発ツールを使わないとなると、手順はこんな感じになります。

開発ツールがない場合の手順

  1. HTMLファイル内で見出しが記述されているタグを見つける。
  2. 見出しのhtmlタグや適用されているCSSクラスを確認。
  3. 見出しのスタイルが定義されている場所をCSSファイルから見つける。
  4. CSSを変更し、保存する。
  5. ブラウザでサイトを再読み込みして、確認する。
  6. 色やサイズが微妙だったらまた修正して、サイトを再読み込みして…
  7. …続く

面倒くさいですよね。こんな簡単なカスタマイズなのに時間はどんどん過ぎていきます。15分くらいは最低でもかかっちゃうんじゃないでしょうか。

親切なHTMLテンプレートなら、どこに、どのパーツが記述されているかコメントから判断できるようになっていますが、それでも、HTMLやCSSの知識があまりない段階は、何かを変更するにも一回一回時間がかかるものですよね。

WordPressなら、ダッシュボードから 外観>テーマの編集 のページに行くと、何やらわからないプログラミング言語が書かれたファイルがたくさん出てきて、勝手に障ったら何かが起きそうな危険な香りがしてきますし(苦笑)。

 

じゃあ、開発ツールを使うとこのプロセスはどうなるのか。ものの5分で終わると思います。

ブラウザの開発ツールを使った場合の手順

  1. HTMLファイル内で見出しが記述されているタグを見つける。→ブラウザ上で2クリック(3秒)で見つかる
  2. 見出しのhtmlタグや適用されているCSSクラスを確認。→ブラウザ上で確認(1秒)
  3. 見出しのスタイルが定義されている場所をCSSファイルから見つける。→ブラウザ上で確認(5秒以内)
  4. CSSを変更し、保存する。→ブラウザ上で気に入るまで変更(3分)し、気に入ったらCSSをコピーして該当するCSSファイルに貼り付け・保存。(1分)
  5. ブラウザでサイトを再読み込みして、確認する。→(5秒)
  6. 色やサイズが微妙だったらまた修正して、サイトを再読み込みして…→ なし(0秒)

お気づきと思いますが、開発ツールを使うとほぼブラウザ上で作業が完結します。HTMLファイルやCSSファイルを探して編集して、ブラウザで確認して・・・という時間のロスがなくなるので、とにかく早い!

とはいえ、文字で読んでいるだけではこの威力が分からないと思いますので、ぜひ以下の手順で基本的な使い方を覚えて自分で使ってみてください^^

 

開発ツールの使い方

開発ツールとは

紹介が遅れましたが、開発ツールとは、「プログラマーがWebアプリケーションを開発するときに、プログラミング上のミスを発見したり修正するために使うデバッグツール」のことです。HTMLやCSSなどの変更・修正に使える以外にも色々な機能があります。

ブラウザによって呼び方が多少異なり、Chromeではデベロッパーツール、Firefoxでは開発ツール、IEでは開発者ツール、Operaでは開発者用ツール、Safariでは開発メニューなどと呼ばれているようです。まぁ、どれも同じような感じですね^^

Safariの場合、メニューバーを確認して「開発」というメニューがない場合は、設定の「詳細」で「メニューバーに”開発”メニューを表示」にチェックを入れるようにしておいてください。

 

開発ツールの起動の仕方

ブラウザの設定ボタンからも探せますが、ショートカットキーで表示させる方が便利です。何回か使うと覚えられます。

開発ツールを表示させるショートカットキー

ChromeあるいはFirefox、Opera、Safariでは Ctrl + Shift + i (Windowsの場合)

IEの場合は F12

 

以降はブラウザChromeのデベロッパーツールを例に説明していきます。

ショートカットキーCtrl + Shift + i で起動します。するとこんな感じに表示されます。赤枠の部分がデベロッパーツールです。

デベロッパーツール1

現在ブラウザに表示されているページのHTML(左側)とCSS(右側)が同時に確認できるようになっています。機能は色々あるのですが、まずはこのHTMLとCSSのウィンドウだけで十分。あまり気負わずに使っていきましょう。

 

開発ツール上でCSSを編集する

では見出しの色と大きさを変更してみます。

 

まずは開発ツールの左上のほうにある検索マークをクリック(青色に変化します)し、見出しの部分にカーソルを移動してクリックします。(他のブラウザの場合、マークや位置が多少異なりますが、基本は左上にあるので探してみてください。)

デベロッパーツール2

 

すると、左側では、見出しのリンク(aタグ)のHTMLの位置がハイライトされ、そのaタグに適用されているCSSが右側にずらっと表示されます。

デベロッパーツール3

 

見出しのhtmlタグや適用されているCSSクラス(CSSセレクタ)を確認してみます。

左側のHTMLの部分を見ると、ちょっとキャプチャの文字が小さくて見づらいですが

  • 見出しはh2タグでpost-titleというCSSクラスが適用されている
  • 見出しのh2タグの中にaタグが入っている

ということがわかりますね。

デベロッパーツールHTML

 

右側のCSSを見てみましょう。スクロールしてみると、適用されているCSSがたくさんあることが分かりますが、上の方にに表示されているCSSが下のプロパティを上書きしているので、基本的には一番上に表示されているCSSセレクタの中身を編集していけばOKです。

#main-contents h2 a:link に適用されているCSSが、design.cssという名前のCSSファイルの328行目に定義されていることが分かります。

デベロッパーツールcss

 

ではデベロッパーツール内で見出しの文字色を変更してみましょう。下図のように、文字色(colorプロパティ)の値のところに表示されている■のところをクリックしてカラーピッカーを表示させます。

デベロッパーツール6

 

カラーピッカー上で色を選んでいきます。すると、その選択した色が瞬時に見出しに反映されます!これ、すごくいいですよね!プレビューしながら気に入る色が見つかるまでたっぷり悩めます(笑)

デベロッパーツール7

 

色が決まったら、今度はフォントサイズの変更ですね。

#main-contents h2 a:link セレクタに、文字サイズのCSSプロパティfont-sizeを加えてみましょう。下図で示すあたりをクリックすると、新たなCSSプロパティと値の入力欄が表示されます(下図の黄色いマーカー部分)。

デベロッパーツール8

 

入力欄には今回 font-size: 1.5em; と入力しました。

デベロッパーツール10

 

見出しの大きさの変更がちょうどいいかどうか、すぐに確認できます。大きすぎたり小さすぎたりしたときは、先ほど設定した値を変更して、またそれもすぐ確認できるので調節がしやすいですね。

デベロッパーツール9

 

開発ツール上のCSSの変更をCSSファイルに反映する

開発ツール上でのCSS変更がすべて終わったら、その変更をCSSファイルに反映させる必要があります。これを忘れてブラウザを再読み込みしたり閉じたりすると、せっかく色々検討しながら決めたCSSが消えてしまいますので注意してくださいね。

 

編集するCSSファイルは、開発ツールのCSSが表示されている部分にヒントがあります。下図のピンク枠にdesign.css:328と書かれていて、design.cssファイルの328行目を編集すればいいことがわかります。

テキストエディタなどでdesign.cssを開き、328行目~のところに下図の青枠の内容をコピペし、ファイルを保存します。

デベロッパーツール11

 

 

CSSの保存が完了したら、ブラウザにまた戻ってページを再読み込みしてみましょう!変更内容が反映されていれば完了です。

 

開発ツールを使いこなすには

今回の解説で扱ったのはほんの一部の機能ですが、この機能だけでもかなり時間の節約になることは想像できたでしょうか。

初めて開発ツールを使うときは、どこで何をしたらいいのかよく分からなくて、逆に時間が取られるかもしれません。「今までの方法のほうが自分には楽だ」と思ったりしがちですが、それは最初の2,3回だけで、少し慣れてくれば本当に大きな時間の節約になると思います。

開発ツールを使いこなすための一番の近道は、とにかく自分で使う!ということです。

ブラウザ上での編集なので、別にHTMLやCSSを変更して表示がぐちゃぐちゃになってしまっても、再読み込みすれば元の表示に戻せるわけですし、もとのCSSやHTMLファイルには何の影響もないので、仮にサイトが公開されていても他のユーザーには全く編集状況を見られることもありません。

他にもHTMLにタグを追加・削除したり、新たなCSSクラスを定義したり、Javascriptのデバッグをしたり・・・など、色んなことができますので自分のニーズに応じて色々試してみてくださいね^^

CSSだけでAmazon商品をAmazonJSプラグイン風にカッコよく紹介する方法を考えてみた【サンプルつき】

ブログを書いていると自分が使用していてすごく良かったものを紹介したいときがあります。せっかく紹介するなら、収益化もかねて…ということで各種ASP、Amazonアソシエイトや楽天アフィリエイトを経由して商品リンクを作成するのですが、Amazonアソシエイトの商品リンクをデフォルトの表示のまま使うと、何だかサイズも微妙だし、見た目も格好悪い

AmazonJSプラグインを使うとかなり格好よく商品を紹介できるのですが、色々検討した結果、AmazonJSは使わないほうがいいかも、という結論に至りました。そんなこんなで行き着いた方法が、今回ご紹介する、「CSSだけで簡単にAmazon商品を格好よく紹介する」方法です。

まずはAmazonJSの利用を断念したいきさつから。後半では(大そうなものではないですが)CSSサンプルもあわせて紹介します。

AmazonJSプラグインのいいところ

AmazonJSプラグインというのは、Wordpressの投稿画面からボタン一つでAmazonアソシエイトの商品リンクを簡単に作成することができるAmazonアソシエイト利用者向けWordpressプラグインです。

プラグイン公式サイト

Amazonが提供している記事埋め込み用の商品リンクって、悲しくなるくらいなんだか格好悪いですよね…。

例)デフォルトの商品リンク↓

Amazonデフォルト商品リンク

例)AmazonJSを使った商品リンク↓

AmazonJSデフォルト商品リンク

見栄えの違いは一目瞭然!興味がある方は以下のサイトの解説がとても親切で参考になります。

WordPressでアマゾン・アソシエイトを簡単設定!Amazon JSプラグイン

 

私も「これは!!!」と思って早速使ってみたのですが、わざわざAmazonのサイトからアソシエイトリンクを取ってこなくても、投稿画面上で商品を検索して記事内にAmazonの商品リンクを貼りつけられるのでスゴく楽。こんな簡単に格好いいリンクができて気分も上々!

最近執筆した記事でも、AmazonJSは今後もずっと使いたいプラグインの一つに入れていました。

2015年も外せない有用WordPressプラグイン30選と利用停止プラグイン

 

しかし、使ってみるとわかるのですが、AmazonJSには幾つかデメリットもあるんです。

AmazonJSのダメだったところ

私が「これはちょっとな」と思ったデメリットは・・・

  1. 高速化プラグインとのバッティングが多い
  2. 商品名のテキストがh4タグで表示される
  3. 価格を含めた商品情報が表示される

の3つです。一つずつコメントしていきます。

 

高速化プラグインとのバッティングが多い

AmazonJSはキャッシュ系プラグイン、遅延読み込み(LazyLoad系)のプラグインなどの相性が悪く、商品画像のところがロード中になってぐるぐる回ったままになってしまうことがあります。私も何度かこの現象は経験しましたが、ネットで調べてみると結構よくあることみたいですね。。

 

商品名のテキスト部分がh4タグで表示される

h4の見出しやh5の見出しの本文中で使っているときに、AmazonJSで商品リンクを作るとその商品タイトルのところもh4タグになるので、見出しの階層がぐちゃぐちゃになってしまう可能性があります。

記事の構造化が正しくない=SEO的によくない なので、これもちょっと困るなと思いました。。

 

価格を含めた商品情報が表示される

Amazonアソシエイトでは、クッキーの有効期間が24時間。例えば、あるユーザーが当ブログ内の商品リンクをクリックして、24時間以内にAmazonで商品を購入すれば、紹介した商品じゃなくてもアソシエイト紹介料がつきます。なので、アフィリエイト的にいえば、まずその商品リンクを「クリックしてもらう」ことが重要

それが、AmazonJSで商品リンクを作ると、商品名や画像だけじゃなくて、価格などの商品情報が表示される。人によってはその情報だけで満足してしまいクリックしない、ということもあり得るんじゃないかと。クリックが少なければ当然、売り上げのポテンシャルも下がりますので。

私はAmazonJSを使用する前は、デフォルトの表示ではなくて、商品名と商品画像のリンクを普通に貼り付けて紹介していたのですが、なんとなくAmazonJSにしてからクリック数が少なくなったような感じがしました。ハッキリとは言えないですが、価格とか分からないほうが、リンクをクリックしてみたくなりません?^^;

 

 

というようなデメリットを考えた結果、考え付いたのが、AmazonJSっぽい感じでCSSとHTMLコードを自作すれば色々解決するんじゃない?というアイデア。早速作ってみました^^

 

CSSだけで簡単にAmazon商品リンクを格好よく表示する

完成版はこんな感じです。

 

商品画像と商品タイトルのみで詳細な情報は表示しない、シンプルな表示ですが、ただ単に商品画像を貼り付けたりするより見栄えがいいですし、統一感も出るかなと。

基本はAmazonアソシエイトサイトから商品リンクのHTMLをコピペして使うだけ、表示をCSSで変えているだけなので他のプラグインとのバッティングももちろんありません。また、商品タイトルタグの部分には見出しタグも入っていないので記事内の構造の問題もこれで解決です^^

 

そんな大そうなことは本当にしていないですが、簡単なやりかたとHTML 、CSSを以下に載せておきます。

 

まず、繰り返し使用できるように、以下のコードをAddQuickTagに登録。AddQuickTagのことが何かわからない場合はGoogle先生に聞いてみてください。とても便利プラグインなのでぜひ使うことをお勧めします。

 

以下のCSSをカスタマイズ用のcssファイルかdesign.cssに加える。

divの幅や、色、フォントサイズはお好みに調節してください。

 

商品リンクはAmazonアソシエイトのサイトから、画像リンクとテキストリンクをそれぞれコピーして、上記HTMlの「ここに画像コード」「ここにタイトル」のところに貼り付けるだけです。

(AmazonJSに慣れちゃってわざわざAmazonアソシエイトサイトからコードを取ってきたくないという方は、AmazonJSから画像コードとテキストコードを取得することもできますね。)

Google Analyticsリアルタイム解析で瞬間的に異常なアクセス増加!ならリファラスパムを疑え

リアルタイム解析で異常にアクセスがきてる今までも何度か見かけてきたのですが、Google Analyticsのリアルタイム解析で、ある瞬間だけアクセス数がびょ~~んとすごい数になるときがあります。

 

当ブログでは今のところ同時アクセスは多いときで10人弱。なので27件もの同時アクセスは通常ありえないし、もしこれがSNSなどで拡散された結果だとしたら数時間~一日くらいはアクセスがガーッと増えるはずなので、上のようなアクセスの増え方は奇妙ですよね。。

一度なら見過ごせても、何回か同じような現象がおきていたので、どうも気持ち悪くて原因を調べてみることにしました。

原因はリファラスパムだった

Google Analyticsのアクセスレポートで、集客 > 全てのトラフィック > 参照元/メディア というところを見てみたところ、social-buttons.com という覚えのないサイトからの参照が26件ありました。

リファラスパムからのアクセス

 

「これが原因っぽい。」と思いGoogle先生に聞いてみたところ、

Social-buttons.com Referral Spam

という記事を発見。どうやら今回悪さをしているのはReferral spam(リファラスパム、参照スパム)というものだということが分かりました。

 

リファラスパムの目的

そもそもリファラスパムの目的は何なのか。

幾つか読んだ記事によると、Google Analyticsのレポートに参照元としてサイトが残るようにし、管理者が参照元からそのサイトを訪問するように仕向けることのようです。

The purpose of this spam is to trick webmasters into visiting the sites reported as referrers.

引用元:Understanding and eliminating referrer spam in Google Analytics

そうやって仕向けてアクセスを増やしたいんでしょうかね・・・?自分もsocial-buttons.comにアクセスしちゃったので何だかムカつきます。

 

リファラスパムを除外すべき理由

リファラスパムを送りつける側の意図が何であろうと、「スパム」という名がついている以上、放っておいてはいけない感じがします。

リファラスパムを除外すべき一番の理由は、

Google Analyticsによるアクセス集計結果にスパムによるアクセス数が入り込んでしまうこと

正確な分析ができなくなります。

そしてもう一つは、

リファラスパムによって同時アクセスが急激に増えることにより、サーバーへの負荷がかかり、ページのロード時間が長くなる。ページの読み込み時間が長くなるとSEOの評価も下がるし、ユーザーにも迷惑がかかる

ということです。

参考How to Stop Spam Bots from Ruining Your Analytics Referral Data

今回のように20~30件程度なら大きな問題にはならないでしょうが、幾つものリファラスパムからアクセスがガンガン来るようになる可能性だってありますので、そうなるとGoogle Analyticsの統計が役立たずになってしまいます。。

 

リファラスパムを除外する方法

リファラスパムを除外する方法ですが、二つの方法があるようです。

  1. .htaccessでアクセス拒否する
  2. Google Analyticsのフィルタ機能を利用する

以下のサイトでは、上の二つの方法でそれぞれどのようにリファラスパムからのアクセスを除外できるかが解説されています。日本語で書かれていますし、今のところ(2015年3月現在)存在しているリファラスパムを全部除去できる方法を紹介してくれていますので、ぜひ参考にしながらやってみてください。

アクセス解析データを掻き乱すリファラ偽装スパムへの対策

 

どっちの方法がいいのかは、英語のサイトを色々読み漁ってみたのですが、Google Analyticsのフィルタ機能を使うのがいいという人もいれば、.htaccessのほうがいいという人もいます。自分がやりやすいほうでやってみてください。

 

Google Analyticsフィルタ機能を使うなら比較用のビューを作成しよう

Google Analyticsフィルタ機能を使ってリファラスパムを除外する場合、フィルタの効果を把握するために、新たにビューを作成してからフィルタを適用するとよさそうです。

そうすると、デフォルトのビューはスパムを含んだ状態での集計、フィルタを適用したビューはスパムを除外した状態での集計結果が表示されます。こうすることで、フィルタの効果を把握することができます。

以下に具体的な方法を図解します。

 

Google Analyticsにアクセスし、「アナリティクス設定」のページで「ビュー設定」をクリック。

analytics setting

 

「ビューをコピー」をクリック。

Google Analyticsビューの追加

 

適当なビュー名を設定し、ビューをコピーします。

新たなビューの作成

 

フィルタは、上でご紹介したサイトの解説に沿って追加しました。フィルタは解説の通り、3つ作成しています。

アナリティクスでフィルタ作成

 

「ビューにフィルタを追加」の下のほうにある「ビューにフィルタを適用」のところでは、今回作成したビューを追加します。

filter-view-setting

以上です。この方法は以下のサイトを参考にさせていただきました。

Block Google Analytics Referral Spam From Darodar.com Or Any Spam Domain

 

 

効果のほどについては結果がみえる1~2か月後に改めて報告したいと思います^^

 

——————————

2016.3.13追記)

対策しても対策しても新しいリファラースパムが現れる「いたちごっこ」だったこの問題ですが、「最近落ち着いてきたな~」と思っていたらGoogleがこの対策をついに行ったようです。はぁ~めでたしめでたし。

関連記事: Googleアナリティクスのリファラースパムについに対策か? 

2015年も外せない有用WordPressプラグイン30選と利用停止プラグイン

WordPressでは数あるプラグインを使って機能を拡張できるのが魅力ですが、あまりプラグインを増やしすぎると、不具合が生じたり、ダッシュボードの表示が遅くなったりといった弊害もあります。いらなくなったプラグイン、取りあえずインストールしておいて結局そんなに使わなかったプラグインなど・・・当ブログで使用しているプラグインを整理、見直しをしてみました。プラグイン整理の参考になったら幸いです。

 

お役立ち2015年も現役のプラグイン

高速化関連

総合的に高速化を図れるキャッシュ系プラグイン W3 Total Cache

高速化のキャッシュ系プラグインでは一番人気ですね。

  • ページキャッシュ
  • CSS, Javascriptの最適化
  • ブラウザキャッシュ
  • オブジェクトキャッシュ
  • データベースキャッシュ
  • CDNとの連携

など、あらゆるタイプのキャッシュを設定できるのが魅力です。設定項目が多いので、どれをどう指定したらいいのか迷ってしまいますが、私は以下のサイトの通りにやってよい感じにブログを高速化できました。

W3 Total Cache のおすすめの設定方法

W3 Total Cacheと一緒に使うといいと言われているCDNサービス Cloud Flareは面倒くさがらず絶対利用することをお勧めします。ちょっと古い記事ですが、以下の記事でCloud Flareについて説明しているので合わせてみてみてください。

ブログ表示速度をアップさせるために使っているプラグインとCloudFlare

 

画像を遅延読み込みしてページの読み込みを高速化 BJ Lazy Load

画像ファイルとiframeを後から読み込んで、ページの読み込み速度をアップさせてくれるプラグインです。遅延読み込みの対象にする部分(コンテンツ内やウィジェット内など)を細かく設定できます。私はコンテンツ部分の画像のみ、遅延読み込み対象にしました。詳細な設定方法は以下のサイトで分かりやすく説明されています。

「BJ Lazy Load」:スクロールして画像が表示されるときに遅延読み込みをしてくれる詳細設定が可能なプラグイン

 

シェア数をキャッシュして高速化 SNS Count Cache

今回、初めて入れてみたプラグインです。Facebookのいいね!数とか、はてぶ数とかの読み込み、遅いですよね。このSNSシェア数をキャッシュして表示を高速化してくれるプラグインがあったんです。これはかなり効果があるのでぜひ導入してみてください。

ツイート数やはてブ数を取得して高速表示できるSNS Count Cache

ソーシャルボタンにアイコンフォントを利用したいとき、TwitterやFacebook、Google+はほぼ間違いなくあっても、「はてなブックマーク」のアイコンがないことがあります。そんなときはFontAwesomeのアイコン風に「はてブアイコンをCSSだけで作れる方法がオススメです。

Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法

アイコンフォントについては以下の記事も見てみてください。

商用OK!無料で使えるアイコンフォントでブログ・サイトを楽しくお洒落に

 

EWWW Image Optimizer 画像を圧縮・軽量化して高速化

画像を圧縮して最適化してくれるプラグイン。画像のファイルサイズが大きいとページの読み込みにも影響するので必須ですね。このプラグインを導入する前に追加された画像もさかのぼって最適化してくれます。

EWWW Image Optimizer の設定方法と使い方

 

投稿関連

サイトのスクリーンショットを撮ってくれる Browser shots

今回使い始めたプラグインです。(存在はだいぶ前から知っていたのですが、あんまり使い道が分からなくって使っていませんでした。。。) 外部サイトへのリンクを貼るときに、記事のタイトルだけじゃなくてサイトのスクリーンショットもあわせて表示させたいときがありますが、そういう時にこのBrowser shotsが一役買ってくれます。

これだとなんかさびしい、というときに

こうすると、いい感じの表示になりますよね^^

このプラグインを使うと、わざわざサイトのスクリーンショットを撮って画像に保存して、Wordpressにアップロードして…という作業がいらず、表示したいサイトのURLさえあれば、あとはプラグインがサイトのキャプチャを撮って表示してくれるんです。

画面キャプチャを表示するWordPressプラグイン|Browser Shots

 

Amazonの商品を格好よく紹介 AmazonJS

Amazonアソシエイトをやっている人はぜひ導入しておきたいプラグイン。まず、商品を掲載するのがすごく楽になります。そして、表示がAmazonデフォルトのよりもだいぶ格好よくなります。

デフォルト:

 

AmazonJS利用の場合:

amazonjs

Amazonアソシエイトを簡単設置できるWordPressプラグイン:AmazonJS

 

※AmazonJSはとてもいいプラグインなのですが、高速化プラグインとの相性が良くないことが多いなど、幾つかの理由から現在はほとんど使用していません。代わりにCSSでAmazonJSっぽい感じの表示にしています。詳細は以下の記事をご覧ください。

CSSだけでAmazon商品をAmazonJSプラグイン風にカッコよく紹介する方法を考えてみた【サンプルつき】

 

ソースコードを記事に載せるなら必須 Crayon Syntax Highlighter

ソースコードをきれいに表示させたいときに使いたいプラグインです。プログラミング関係の情報を記事にしているならぜひ!デザインも豊富なので好みのものが見つかるはず。

Crayon Syntax Highlighter – ソースコードを記事上で綺麗に表示できるWordPressプラグイン

 

ビジュアルエディタを充実させる TinyMCE Advanced

言わずと知れた投稿エディタ用定番プラグイン。

 

投稿エディタの改行問題を解決する PS Disable Auto Formatting

WordPressの投稿エディタで、ビジュアル/テキストのタブを切り替えると改行が崩れてしまうのを解決してくれるプラグイン。インストールするだけでかなりいい仕事をしてくれます。

実はTinyMCE Advancedにも同じような機能が設定できるので、一度使わなくなったのですが、その後、ビジュアルモードで記事を書いて、テキストモードに切り替えようとすると、切り替わらない、下書き保存をすると記事の半分、最悪のときはすべてが消えてしまうという状況が何度も生じました。

結構な衝撃でしたがTinyMCE Advancedのほうの設定を解除して、このプラグインを入れなおしたら元通り、快適にエディタも動くようになり一安心^^ もうこの子は手放せません笑

 

目次を自動で表示してくれるプラグインTable Of Contents+

この記事の冒頭にもありますが、長文の記事の場合は目次が最初にあると分かりやすいですよね。Table Of Contents+を使うと、記事内の見出しをピックアップして自動で目次を追加してくれます。

  • 何階層までの目次を見出しに表示するか
  • 見出しの数がいくつ以上あったら目次を表示するか
  • 目次の表示位置、デザイン

など、細かく設定できるので便利です。

Table of Contents Plus – 記事の目次を自動生成できるWordPressプラグイン

 

頻繁に使うタグを使いやすくする AddQuicktag

頻繁に使うHTMLのタグを定型文として登録しておき、投稿エディタ内で簡単に使うことができます。広告表示用のショートコードを登録しておいたりとか、色々使い道があるのでこのプラグインは手放せない必須プラグインの一つです^^

AddQuicktagの設定方法と使い方

 

広告の管理と表示に便利なAdSense Manager

Google AdsenseやAmazonアソシエイトをはじめ、広告の登録、管理、表示に便利なプラグインです。この手のプラグインは色々ありますが、私はこれが一番気に入っています。AddQuickTagと合わせて使うとかなり便利です。

AdSense Managerを使い任意の位置に広告を挿入させる方法

 

セキュリティ関連

Akismet

WordPressをインストールした時点でかならず入っていますが、ぜったい外せないプラグイン。スパムからブログを守ってくれます。

 

自動バックアップの定番BackWPup

WordPressのバックアッププラグイン。DB側のバックアップと、ファイル側のバックアップ、両方できます。Dropboxと連携して、指定したスケジュールにDropboxにバックアップファイルが保存されるようにしています。これがあると、Wordpress本体やプラグインの更新を行う時も安心。

BackWPupプラグインを使ってWordPressブログのバックアップ設定をしよう

 

DB最適化を自動でやってくれるWP-Optimize

BackWPUpで以前はDBの最適化をしてくれていたのですが、ある時からDB最適化がなくなってしまったので、代わりにこれを使っています。こういう普段見えないところも自動でメンテナンスされるように設定しておくといいですね。

WP-Optimize – WordPressのデータベースを自動クリーンアップ&最適化できるプラグイン

 

 

SEO関連

All in One SEO Pack

迷いながら結局これをまだ使い続けています。最近はTwitterやFacebookと連携するための設定もオプションでできるようになり、これがまたかなり便利。たぶん今後も使い続けるでしょうね(笑)。SNSの設定のあたりも含めて設定は以下のサイトを参考にしてみてください。

All in One SEO Pack の設定方法と使い方

 

リンクエラーを教えてくれるBroken Link Checker

リンクエラーやリンクエラーの画像がないかブログをチェックし、見つかった場合は、メールやダッシュボード上で知らせてくれます。自分でこういうエラーを見つけるのは大変なのでプラグインにお願いするのがいいですね。

 

検索エンジンへのサイトマップ送信を助けるGoogle XML Sitemaps

検索エンジンにサイトマップXMLを送信してインデックスを助けてくれるプラグイン。All in one SEOにサイトマップ更新機能がついたので近々りようをやめるかもしれませんが、一応まだ使っています。

Google XML Sitemapsの設定方法

 

投稿記事をいち早くインデックスPuSHPress

自分の書いた記事が誰かにコピーされてしまっても、自分のブログの記事がオリジナルであることを検索エンジンに分かってもらえば、ブログの評価が下がらずに済みます。そのためには、投稿後いち早くインデックスさせることが必要ですが、それをやってくれるのがこのプラグイン。インストールしておくだけでOKなのでぜひ入れておきたいですね。

 

フィードのフッターに署名をいれてくれるRSS Footer

RSS配信している場合、RSSフィードから記事を取得してコピー記事を作るツールみたいなのがあるらしいんです。このプラグインを使うと、「自分の記事がオリジナルです!」と主張するための署名をRSSフィードのフッターに入れてくれるので、セキュリティ対策としてやっておくことにしました。自分の記事は自分で守るしかない時代なのが悲しいですが・・・

RSS Footer設定方法使い方解説 盗作防止ワードプレスプラグイン

 

アクセス解析に欠かせないWP Slimstat

リアルタイムでブログへのアクセス情報をキャッチし、ユーザーの行動が一覧で丸わかりになるくらい詳細な情報を表示してくれる、かなり本格的なアクセス解析プラグインです。Google Analyticsのほかに、これがあると非常に分析しやすい。Head Cleanerが原因で一時うまく動作せず停止していましたが、「やっぱりこれがないと無理!」とHead Cleanerの利用をやめて使用を再開しました。

WP SlimStatの使い方ーWordPressプラグイン【初心者向け】

 

その他

WP Multibyte Patch

これも日本語版WordPressをインストールすると必ずデフォルトで入っていますが、マルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行ってくれるプラグインで、絶対に必要。利用続行。

 

Pretty Link Lite

短縮URLを作成してくれるプラグインです。クリック数なども計測できます。アフィリエイトリンクをそのまま貼りたくないときに役立ちます。最近はあまり使ってないですが、過去に作った短縮URLがあるのでひとまず使い続けています。

 

BroadFast PRO Autoresponder

メールマガジンを配信するためのプラグインです。一括配信、ステップメール配信ができ、かなり本格的なメルマガを配信できます。Wordpressブログとメルマガを連携するなら、登録ページとかも簡単に作れるのでお勧めです

かなり本格的なメルマガ・ステップメール配信ができるWordPressプラグイン―メリット・デメリットまとめ

 

No Self Pings

記事の中に自分の他のブログ記事へのリンクを貼った時に、コメント欄に自分のピンバック(セルフピンバック)が登場するのを防いでくれます。毎回Wordpressから「モデレートしてください」というメールが届くのなくなるのでイラッとせずにすみます笑。インストールするだけだし入れておくと便利。

WordPressのセルフピンバックを停止するプラグインNo Self Pings

 

ブログパーツカスタマイズ

Display Widgets

ウィジェットの表示・非表示を細かく指定できます。何かと便利。

Display Widgets – ウィジェットに表示条件を設定できるWordPressプラグイン

 

WordPress Popular Posts

人気記事の表示はこのプラグインが定番ですね。3年間ずっとお世話になってます。

 

WordPress Related Posts

関連記事の表示をしてくれるプラグイン。表示のデザインが色々あって、Pintarest風とか、横並びとか、縦並びとか、色々選べます。カスタムCSSの設定も簡単なので気に入っています。

 

Jetpack by WordPress.com

本当にいろんな機能があるんですが、必要なものだけ有効化して使えます。コンタクトフォームとか、SNSシェア機能とか、カスタムCSSとか。

 

PS Auto Sitemap

ブログのサイトマップ(検索エンジン用じゃない、ユーザー向けの記事一覧)を自動生成してくれるプラグイン。使い方は以下のページで説明しています

記事一覧(サイトマップ)を自動生成するWordPressプラグインPS Auto Sitemapの使い方

 

WP Page Numbers

ページングを数字にするのに必要なプラグイン。私が使っているテーマ「賢威」はページング処理が数字で表されず、「以前の記事へ」リンクのみだったため、このプラグインを導入しました。このプラグインを使えば、何ページあるのか、現在何ページ目なのかなどが一目で分かる表示になります。

賢威の「以前の記事へ」をWP Page Numbersを使ってページナビ化する方法

 

 

必要な時だけ有効化したいプラグイン

普段は必要ないけど、ちょっとしたときに有効化して使うと便利なプラグインを停止状態で残してあります。

Admin Management Xtended

投稿一覧画面から記事を一気に編集したいときに役立つプラグイン。カテゴリとか、スラッグとかを、いちいち投稿画面に遷移せずに一覧画面から編集できるようになります。

 

WordPress Importer

投稿記事、固定ページ、コメント、カスタムフィールド、カテゴリ、タグなどを、エクスポートファイルからインポートしてくれます。

 

WP CSV Exporter

投稿記事の情報をCSV形式でエクスポートし、Microsoft Excelなどで編集できます。カテゴリの整理とかに役立ちます。

 

Duplicate Post

投稿やページを複製してくれます。必要なときは時々やってくる。

 

 

訳あって停止中のプラグイン

Head Cleaner ヘッダをコンパクトにして高速化

ページのヘッダ部分で肥大化したCSSやJavascriptをコンパクトにしてくれるプラグイン。ヘッダ部分にたくさん読み込みファイルやスクリプトがあると、ページの表示速度が遅くなるので、このプラグインでヘッダをスッキリさせておきたい。そんな時に役立つのがこのプラグインです。が、Head Cleanerと相性の悪いプラグインがあまりにも多く、Head Cleanerを退却させました。設定によってはうまくいくかもしれないと思っているので、時間ができ次第、再挑戦したいと思っています。

 

Standard Widget Extensions

サイドバーのウィジェットをページのスクロール時に追尾してくれるプラグイン。アドセンス以外の広告やSNSのフォローボタン、人気記事一覧などを追尾させると効果的ですよね。Head Cleanerとさらに何かのプラグインとバッティングしているらしく、動かないので停止中。本当は使いたいんですが・・・解決方法を模索中です。

 

 

今回削除したプラグイン一覧

何の参考になるか分かりませんが、一応載せてみました。削除した理由は色々で、プラグイン自体の更新がストップしたとか、他に同様の機能でもっといいプラグインが登場したとか、必ずしも必要ないものだったとか。。です。

WPLite:ダッシュボードのメニューのなかからいらないものを非表示にする

Simple Social Icons: ソーシャルアイコンを簡単にウィジェットに追加できる

Similar Posts: 関連記事を表示する

Post-Plugin Library: Similar Postsと一緒に必要なプラグイン

001 Prime Strategy Translate Accelerator: 翻訳ファイルの読み込みをキャッシュ化する

Auto Post Thumbnail: アイキャッチ画像を自動設定する

Drag & Drop Featured Image: アイキャッチ画像をドラッグアンドドロップで設定できる

brBrbr: エディタの改行問題を解決する

Commented entry list: コメント一覧やトラックバック一覧を表示

Datafeedr Random Ads V2: Amazon等の広告をローテーション表示してくれる

Exec-PHP: 投稿記事、ページ、テキストウィジェットで PHP を実行させる

Google AdSense: Google AdSenseなどの Googleツールを使用する

Newpost Catch: 最新記事一覧のウィジェットにアイキャッチを表示

Dean’s FCKEditor For WordPress: 投稿エディタ

 

 

プラグインの整理に非常に参考になったサイト:

今回の作業をするにあたって、何度も見させていただいたサイトがあります。有益な情報をありがとうございます!

安定したアクセス数を得るために使っているWordPressプラグイン25個

絶対に導入しておきたいWordPressプラグイン10+3選

パーマリンクを投稿名ベースに変更するなら超簡単な.htaccessでのアクセス転送設定がおススメ

number to nameパーマリンクを変更するとソーシャルメディアでの記事のシェア数がゼロになってしまうので本当は変更しないのがいいんですが、それでも今回思い切ってやろうと決意したのには色々理由があります。

この記事では、なぜパーマリンクを数字ベースから投稿名ベースにしたのか、そして投稿名ベースにするときに旧URLからのアクセスを簡単に引き継いでくれる設定方法をまとめてみました。

私が数字ベースのパーマリンクをやめたくなった理由

このブログを始めた3年前くらいまでは、数字ベースのパーマリンク(例 https://ruuski.net/web/archives/123/)はWordpressブログの表示が最も速くSEO的にベストだと言われていました。

当時はベストチョイスだったものも、Wordpress本体のバージョンが上がって数字ベースじゃなくても表示速度に問題なくなった現在、数字ベースがいいというのはすでに過去の話。

今は、カテゴリ名や投稿名を入れるほうがSEOにいいと言われています。これが、一番の理由。

 

私はもう一つのブログを運営してて、そっちのほうは

ドメイン/カテゴリ/投稿名

の形でパーマリンクを設定しているのですが、このブログより記事数も少なくてドメイン年数も少ないのに、アクセスが順調に伸び、今では当ブログよりも多くのアクセスを集めているんです。別に自分で二つとも運営しているからいいんですけど、手間暇かけている方がアクセスに伸び悩んでいるのはなんか悔しい(笑)

もちろん、アクセス数はブログが扱うテーマやコンテンツの質によるところが大きいので、パーマリンクを変えたからと言ってアクセス数が劇的に変わるということはないと思います。

でも、「SEOにはこれが最適!」といわれているのに、そうじゃない形のパーマリンクを使い続けるのは微妙だ…と思っていました。

 

ようは気持ちの問題っていうことですね。。

今後、さらに記事を増やしてく時に、このままの数字ベースで自分は我慢できるのか、と考えた結果、

「やっぱりケリをつけておこう」と。

 

.htaccessでごく簡単にURLの転送(古いURLから新しいURLへ)ができることも、今回の決定を後押しした要素です。(やり方は後述)

 

じゃあどんなパーマリンクがいいのか

変えると決めてからは、再度、どのパーマリンクの形がいいのか、考えました。
最近、主流になっているのは、以下の2つのタイプです。

 

1.ドメイン/カテゴリ名/投稿名/ のタイプ

パーマリンク: /%category%/%postname%/

例えば

locatimefree.com/デザイン/お洒落なブログに使える無料画像サイトPhotopin/

のような感じですね。日本語だとURLが長くなってしまうので、スラッグで英単語を設定し、

locatimefree.com/design/photopin-free-image-for-stylish-blog/

のような感じにすることもよくあります。

 

2.ドメイン/投稿名/ のタイプ

カテゴリと投稿名はスラッグで英単語を使い長いURLにならないようにするのが

パーマリンク: /%postname%/

この場合はカテゴリがないのでシンプルに

locatimefree.com/お洒落なブログに使える無料画像サイトPhotopin/

あるいはスラッグで英単語を設定し、

locatimefree.com/design/photopin-free-image-for-stylish-blog/

のような感じなります。

 

当ブログはこれまで何度もカテゴリの追加・削除が繰り返されてきたので、カテゴリをパーマリンクに含めるのはリスクが高い、ということで、2番目の投稿名だけのシンプルなパーマリンクを設定することに決めました。

 

ちょっと面倒だったのが、日本語を使ってURLが長くなるのを防ぐために、これまでの記事のタイトルスラッグを見直して英単語で設定しなおしたこと。でも、ついでにダメ記事を消したり、古い情報を編集したりなど、見直す機会にもなったのでよかったです。

前述しましたが、ソーシャルメディアでの記事シェア数がたくさんある方は、それが全部消えてしまうのはあまりにもったいないので、パーマリンクは変更しないほうがいいです。私みたいに「どっちにしろ大してシェア数もないし…」と開き直れる人だけ変更しましょう。

 

パーマリンク変更時に古いURLへのアクセスを新しいURLにリダイレクトする

WordPressの場合、プラグインを使ってリダイレクトする方法もあるようですが、私は.htaccessに一行追加するだけでOKな方法がとても楽チンでよかったです。

 

まずはWordpressのダッシュボードから 設定 > パーマリンク設定 を開き、共通設定のところで「投稿名」を選んで保存します。

パーマリンクの変更自体はこれだけですが、このままだと古いURLにアクセスが来た時に、404エラー(ページが見つかりません)になってしまいます。

 

そこで、古いURLへのアクセスを新しいURLに転送するために、.htaccessにリダイレクトの設定を追加します。

 

追加するコードは以下の手順で取得できます。まず以下のサイトにアクセス。

How to change your WordPress Permalink Structure

 

記事の最後のほうにGenerate Redirectsという緑色のボタンがあるのでクリックします。

すると以下のようなツールが表示されますので、順に必要な情報を入力していきましょう。

htaccess code for parmlink redirect

サブフォルダのところですが、Wordpressがサブフォルダに配置されていても、サイトのURLにそのフォルダ名が入っていないなら入力する必要はありません。例でいうと、このブログもサブフォルダwpにWordpressがインストールされているのですが、表示上はhttps://ruuski.net/web/wp/… と言う風にフォルダ名wpが入ってしまわないように設定しています。この場合はサブフォルダを入力しないでいいということです。

 

最後にGenerate Redirectボタンをクリックすると、生成されたコードが表示されます。

url redirect code for htaccess

このコードを.htaccessファイルの最後に追加します。FTPなどでサーバーから.htaccessファイルをローカルにダウンロードし、一行追加してサーバーにアップロードすればOK。

.htaccessはWordpressが配置されているサーバーのルートディレクトリにあります。「一行追加するだけだから」と油断せず必ず、.htaccessのファイルをバックアップして、何かあったらすぐに元に戻せるようにしておいてくださいね。

 

このように.htaccessで制御する方法の詳細は以下の二つのサイトを参考にさせていただきました。今回のパーマリンク変更を検討するうえでとても有益な情報がありました。ありがとうございます。上の説明では物足りないという方は、お二方のサイトを参考にしてください。

WordPress向けSEO上級編:適切なパーマリンクへの変更と複数言語への対応

パーマリンク変更を.htaccessでリダイレクトする方法。