プログラミング

人気記事ランキングを表示するプラグインWordPress Popular Postsのインストールと設定

ブログサイトでよく見かける人気記事ランキング。ユーザは、そのサイトがどんなコンテンツをもっていて、どんな記事がアクセス数が多いのかを知ることが出来ます。

自分のサイトに導入したいけれど、なんか難しそうと思っているそこのアナタ!Wordpressでサイトを構築しているなら、プラグイン[Wordpress Popular Posts]をインストールすれば、人気記事ランキングを手軽に実装できます。

それでは早速、Wordpress Popular Postsのインストール方法についてみていきましょう。

WordPress Popular Postsのインストール方法

WordPress管理画面からプラグイン>新規追加を選択します。

キーワード欄に【Wordpress Popular Posts】と入力し、検索します。

WordPress Popular Postsの項目上で【今すぐインストール】をクリックします。

続いて、有効化をクリックします。

インストールは以上で完了です。続いて、Wordpress Popular Postsの設定に移ります。

WordPress Popular Postsの設定

プラグイン一覧からSettingをクリックします。もしくは設定>Wordpress Popular Postsからでも遷移できます。

【アイキャッチ画像】の項目はデフォルト設定のままでOKです。すなわち、「デフォルトのアイキャッチ画像」、「画像の取得元」、「レスポンシブ対応」は変更の必要はありません。

【データ】の項目ですが、こちらは「閲覧を記録する対象者」を「訪問者のみ」に設定しておきましょう。デフォルトでは「全員」になっていますが、全員とは自分自身もカウントされてしまうので純粋な訪問者のデータが取れなくなってしまいます。

「その他」の設定に関してもデフォルトで問題ありません。

WordPress Popular Postsをサイトに反映させる

設定したプラグインをサイトで閲覧できるよう表示設定をしましょう。

外観>ウィジェットをクリックします。【利用できるウィジェット】にWordpress Popular Postsが追加されています。これをサイドバートップの表示したい位置にドラッグアンドドロップします。

次にウィジェットの右にあるプルダウンを開きます。

ここではサイドバーに表示される際のタイトル、最大表示数、ソート順が選択できます。

タイトルには、「人気記事」や「Pupular Post」、「よく読まれている記事」などを設定しておくとよいでしょう。

最大表示数はデフォルトは10件ですが、サイドバーの余白によって5件や20件など自分のサイトに合わせて設定しましょう。

ソート順は総閲覧数、コメント数、一日の平均閲覧数から選択できます。

 

またフィルターについてですが、アクセス集計する期間を選択できます。アクセスが数があまりない期間は過去30日間で累計数を見せるのもよいでしょう。アクセスが多くなってきたら、本日人気のある記事を見せるために24時間とするのもよいでしょう。見せたい情報によって任意に選択してください。

投稿タイプは、集計対象をどれにするかを選べます。投稿記事を含みたい場合はpost、固定ページを含みたい場合はpageを選択します。

投稿設定は、レイアウトを決める部分なのでどれが自分のサイトにあっているかいろいろ試してみましょう。

タイトルを短縮を選択するとタイトルの長さの上限を設定でき、それ以上の長さになると省略されます。

抜粋を表示にチェックを入れると、記事の一部を表示できます。表示させる文字数は自分で変更できます。

アイキャッチを表示にチェックを入れると、各記事のアイキャッチを表示してくれます。

大体のご説明は以上ですが、上記の組み合わせはいろいろあるので何度も書きましたが、自分のサイトに合っている表示・見せたい情報を考えて設定してみましょう。

以上です。おつかれさまでした!

Google検索エンジンに記事の更新をいち早く知らせる!PubSubHubbub

通常記事を公開するとGoogle検索エンジンにクロールしてもらうまで、時間がかかります。

それもそのはずで、世界中のWEBサイトをクロール対象とするGoogle検索エンジンにとっては、更新を通知してこないサイトを積極的にクロールする理由はありませんよね。

なので、記事を公開したらどんどんクロールしてもらえるよう、Google検索エンジンにアピールしていきましょう。

更新を通知するメリットは他にもあります。それは「コピーコンテンツ対策」です。

仮に自分の公開した最新記事を誰かにコピーされたとして、その誰かのコピー記事が先にGoogle検索エンジンにクロールされた場合、その「誰かのコピー記事」がオリジナル記事扱いになってしまいます。その結果、自分の記事がコピーコンテンツ扱いになってしまいます。なので、スグに更新を通知することは想像以上に重要なことなのです。

WordPressプラグインの【PubSubHubbub】を使えば、Google検索エンジンに記事の更新をいち早くインデックスさせることができます。

それではPubSubHubbubのインストール手順を見ていきましょう。

 

PubSubHubbubのインストール

WordPressの管理画面からプラグイン>新規追加をクリックします。

キーワード欄に【PubSubHubbub】を入力します。

WebSub/PubSubHubbubの項目の【今すぐインストール】をクリックします。

有効化ボタンをクリックします。

 

PubSubHubbubの設定

基本的にはデフォルトのままで問題ありません。

デフォルトの設定のままで十分な力を発揮します。

以上でPubSubHubbubのインストール方法の解説は終わりです。おつかれさまでした!

ちなみになんて読む?

パブサブハブバブ

.

..

なんか溺れそうな名前ですね

サイトマップを自動生成!Google XML Sitemapsのインストールと設定手順

サイトマップを用意することは検索エンジンに対して自サイトの情報を正確に伝えるために必要なことです。

しかし、サイトマップはXML形式のファイルであり、編集するにはある程度の知識が必要です。また、知識があっても毎回記事を更新するたびにサイトマップを更新し続けるには多大な労力が要ります。

効率よくサイトを運営していくには自動化出来る部分はなるべく自動化することが重要です。サイトマップの更新作業を自動化してくれる【Google XML Sitemaps】を利用しましょう。

Google XML Sitemapsは記事を公開・更新した時点でサイトマップを自動作成してくれます。また、サイトマップが更新された時点で検索エンジンに通知してくれます。

このページではGoogle XML Sitemapsのインストール方法と設定について解説していきます。

Google XML Sitemapsのインストール

WordPress管理画面のプラグイン>新規追加をクリックします。

キーワード欄に【Google XML Sitemaps】を入力します。

Google XML Sitemapsの【今すぐインストール】をクリックします。

【有効化】をクリックします。

Google XML Sitemapsの設定

管理画面から設定>XML-Sitemapをクリックします。

 このページから詳細な設定が可能です。

まず【基本的な設定】欄から設定していきましょう。

検索エンジンに更新を知らせるために「Googleにブログの更新を通知」と「Bing (旧名 MSN Live サーチ) にブログの更新を通知」には必ずチェックを入れておきましょう。

「サイトマップの URL を仮想 robots.txt ファイルに追加」は、サイトマップの正確な場所を検索エンジンに通知することができるので、チェックを入れましょう。

その他は以下のように設定をしておけば問題ありません。

次に投稿の優先順位について設定します。

優先順位の計算方法についてですが、【優先順位を自動的に計算しない】にチェックを入れましょう。この設定をしておけば、自分で設定した【優先順位の設定】を適用できます。【優先順位の設定】は一番下の欄にあります。

次にSitemapコンテンツの設定です。ここは「ホームページ」「投稿 (個別記事) を含める」「カテゴリーページを含める」「最終更新時刻を含める。 」にチェックを入れましょう。固定ページも含めたければ「固定ページを含める」にもチェックを入れましょう。

次に含めない項目の設定です。基本的には「未分類」にチェックを入れましょう。他にも含めたくないカテゴリ、投稿記事があれば個別に設定をしておきましょう。カテゴリはチェックを入れるだけでOKです。投稿記事は、記事IDを入れればOKです。

 

次に更新頻度の設定をします。 以下のように設定しておけば問題ありません。

最後に優先順位の設定をします。「固定ページ」、「アーカイブ別」、「投稿者ページ」は0、その他は0.8に設定しましょう。固定ページをサイトマップに含める場合は、0.5に設定しましょう。

長くなりましたが、Google XML Sitemapsのインストールと設定については以上で終わりです。おつかれさまでした!

 

画像探す時間かからない!Pixabay Imagesならスグに挿入可能!

 

このプラグインはWordpressブログ生活を変える!!そう言っても過言ではないプラグインです。

記事を作成するうえで画像は欠かせません。どんなに文章が優れている記事でも、テキストのみだと読むユーザーも疲れてしまいます。画像をいれることで直感的に記事の情報が頭に入ってきて、理解度が高まります。

しかし、いくら画像が有効な手段でも、記事にあった画像を選ぶのは一苦労です。画像の素材サイトにアクセスし、カテゴリから探したり、キーワード検索をしたりして、その画像のライセンスを確認し初めて掲載できます。

トップ画像など一度決めたらしばらく変えないものなら、時間をかけてゆっくり選ぶべきですが、日々の更新作業のなかではそこまで時間はかけられません。

その画像検索を簡単にしてくれるのが、【Pixabay Images】です。このプラグインを導入することで格段に記事の作成スピードが上がります。

Pixabay Imagesの特徴

・記事を書きながら挿入画像を検索できる

・検索対象はなんど70万枚以上の画像

・しかもすべて商用利用可能で著作権の帰属先表示は必要ありません。

個人的には一番このプラグインが便利だと思います。

Pixabay Imagesのインストール

WordPressの管理画面に入り、左メニューのプラグイン>新規追加を選択します。

検索ボックスに【Pixabay Images】と入力しエンターをクリックします。

【今すぐインストール】をクリックします。

インストールが完了したら、プラグインの有効化をクリックします。

Pixabay Imagesの設定

管理画面の左メニューの設定>Pixabay Imagesをクリックします。

Language:使用する言語の設定です。日本語ですね。

Images Per Page:画像検索結果の表示数を選択します。数が多いと結果が表示されるまで時間がかかるので30枚くらいがちょうどいいです。

Image Types:検索する画像の種類を選択します。Photos→写真、Cliparts→イラスト系の画像、All→両方です。

Orientation:画像サイズの方向を選択します。Hozizontal→横方向、Vertical→縦方向です。

Attribution:画像にクレジットを表示するかどうか。チェックを入れるとクレジットは画像下に表記されます。ぼくはチェックを外しています。

Button:記事を書きながら画像を探せるようになります。Wordpressの記事投稿画面で、ツールメニューに【Pixabay】のボタンが表示されます。クリックするとダイアログが表示され、その場で画像検索できます。チェックを入れておきましょう。

最後に【変更を保存】をクリックします。

これで設定は完了です。

Pixabay Imagesの使い方

この記事の執筆画面をサンプルにしましょう。

ツールメニューの【Pixabay】のボタンをクリックします。

検索ボックスにキーワードを入力します。ここでは「手帳」と入力しました。【Search】をクリックします。

 

画像の検索結果が表示されます。

挿入したい画像にマウスフォーカスをすると、拡大画像が表示されるのでサイズを選びます。選択後、サーバーへのアップロード処理が発生します。

画像のタイトルやalt属性の設定をします。【投稿に挿入】をクリックします。

画像が挿入されました!

まとめ

使いこなすと作業スピードが格段に上がりますので、いろいろなオプションを試してください。きっと欠かせないツールになります。

 

MacBookのキーボードのバックライトを消す方法

MacBookを購入してから1年。今までおざなりにしてしまっていたPC設定を見直してます。

今回はバックライトの話です。最初からピカーっとキーボードくんの下で光っていたバックライトくんですが、初期設定のまま放置状態でした。特に照らす必要は無いので、完全に電気の無駄遣いですが、邪魔にもならないのでそのままカタカタと作業を続けておりました。

まあ、良くないですよね。

さっそく消しましょう。オフりましょう。

MacBookのキーボードのバックライトを消す方法

ファンクションキーのF5、F6で調整できます。はい、簡単ですね。

F5・・・光量を下げる

F6・・・光量を上げる

反応がない場合は、Fnキーを押しながらF5、F6を押してください。

いつの日か暗い環境で作業がする日が来るまで。バックライトくん、さようなら。

Windows7くん、惜しまれながらこの世を去る

我が家のデスクトップのWindows7がついに起動しなくなりました。

Windows10への移行が失敗したあたりからなんとなく体調が悪そうだったWin7くん。2時間くらい作業すると「あ、体調悪いんで早退します」といわんばかりに強制シャットダウンしちゃうWin7くん。

ついには電源ボタンを押しても、立ち上がりません。完全に出社拒否ですね。「もうほっといてください。あなたは私を酷使しすぎた」と言われているような気がします。

たぶんメモリに不具合がありそうだということまでは分かったが、もともと機械オンチな私には、どうすればよいのか見当もつかない。下手にいじるとザオラルすらできなくなりそうなので、しばらく放置です。

おこづかいが貯まれば、プロに修理にしてもらおうと思います。

 

今後もMacの設定について細やかな情報をお届け

現在の職場ではWindowsオンリーですが、やはりMacが使いやすいと感じます。なので、自宅はApple製品で揃えていこうと思っています。

今後は、MacBookにデフォルトでインストールされている各アプリケーションについていろいろ調べて記事を書いていこうと思っています。デスクトップにアイコンはずらりと並んでいますが、それぞれのアプリケーションがどのような機能を備えているのか調査したいと思います。

続きは個別にページをまとめます。

以上です!おつかれさまでした!

 

WordPressでサイトURLからサブディレクトリ(/WP)を削除する方法

WordPressをインストールした際、サブディレクトリ(/wpなど)にインストールするとサイトURLにもサブディレクトリ名が付与されてしまいます(サイトURL/wp)。URLを短く端的に表現したい管理者にとっては不要な文字列ですよね。

【0-1.life/wp】より【0-1.life】のほうがシンプルでわかりやすいです。

この記事ではサイトURLからサブディレクトリ名を削除する方法についてご紹介します。

ちなみにWordpressをサブディレクトリにインストールすること自体は悪いことではないと思います。Wordpress関連のファイルは一つにまとめて整理したいですから。

サブディレクトリ名(/wpなど)を削除する方法

WordPress管理画面から【設定】>【一般】をクリックします。

サイトアドレス(URL)の文字列からサブディレクトリ名(ここでは/wp)を削除し、ページ下部にある【変更を保存】をクリックします。

WordPress管理画面からの作業はこれで終了です。

次にサーバー側のファイルをいじります。FTPツール(FFFTP、WinSCPなど)でアクセスするのもよし。レンタルサーバの管理画面からファイルマネージャーでアクセスするのもよし。慣れた方法でかまいません。

私は今回はさくらインターネットのファイルマネージャー機能を使います。FTPツールでも他レンタルサーバのファイルマネージャーでもやる作業は一緒なのでご自身の環境に合わせて読み替えてください。

さくらインターネットの管理画面から左メニューにあるファイルマネージャーにアクセスします。

すると、サイトのパスが表示されますので、変更したいサイトのパスをクリックし、サブディレクトリまで移動します。私の例でいうと【/01/wp】のディレクトリです。

サブディレクトリ(/wp)にはWordpressの本体がインストールされています。ファイル一覧の中からindex.phpを探します。index.phpをコピーして、一つ上の階層にペーストし、編集します。

FTPツール使用の場合は、index.phpをダウンロード→編集→一つ上の階層にアップロードという手順になります。結局は一つ上の階層に変更したindex.phpを置きたいだけなのです。

さくらインターネットのファイルマネージャーの場合、右クリックから【指定の場所に複製】を選択し、一つ上の階層に複製します。私の例でいうと【01】ディレクトリを指定します。

さくらインターネットのファイルマネージャーの場合、なぜかファイルが存在しないのに存在していますと怒られます。上書きで問題ないです。

移動したindex.phpを編集します。右クリックから編集を選択します。

下図のように【/wp-blog-header.php】→【/wp/wp-blog-header.php】に変更し保存します。

これで設定は完了です。早速URLを確認してみましょう。

URLから/wpが削除されました。

今回は以上となります。おつかれさまでした!

画像を自動で圧縮してくれるプラグイン-EWWW Image Optimizer [WordPress]

サイトを運営するにあたって意識しなければならないのは、ページの表示スピードです。せっかくユーザーさんがサイトに訪問してくれても、中々内容が表示されないと印象はよくありません。

「重いサイトだな。表示に時間がかかるし、他のサイトのほうがいいや」と記事の内容も見ずに離脱されることは避けたいですよね。

ですが、記事を多く書いていると一つ一つの画像の画質やサイズを細かく管理するのは骨が折れます。(ホントはちゃんとやらないといけないとは思いますが、めんどくさい。)

そこでオススメしたいのが、画像を自動的に圧縮してくれるプラグイン【EWWW Image Optimizer】です。

EWWW Image Optimizerをインストールしておけば、新規でアップロードした画像を自動的に圧縮してくれます。アップロードのたびに圧縮処理が実行されるので、楽してページの軽量化が図れます。

また、既にWordpressにアップロードした画像も一括で圧縮してくれる機能も備えている優れものです。

それではインストール手順と設定についてみていきましょう。

EWWW Image Optimizerのインストール

WordPress管理画面からプラグイン>新規追加をクリックします。

テーマを検索します。キーワード欄に【EWWW Image Optimizer】と入力します。

EWWW Image Optimizerを探し、【今すぐインストール】→【有効化】ボタンをクリックします。

インストールは以上で完了です。基本的にはデフォルトの設定で問題なく使用できます。

細かい設定をしたい場合はいろいろ設定を変更してみてください。

*以前は設定画面については英語表記でしたが、最新版では日本語になっているようです。大分設定しやすくなりました。

以下の設定は私個人の好みなのでご参考程度にどうぞ。

EWWW Image Optimizerの私の設定

プラグイン一覧からEWWW Image Optimizerの設定をクリックします。

【高度な設定】タブを選択します。

optipng 最適化レベルをデフォルト値の【レベル 2:8件の試行】から【レベル3:16件の試行】に変更しています。

より画像を圧縮したいがための設定です。デフォルト値に比べ、見た目も画像サイズもそんなに大きな違いはありませんが、見た目より機能重視が私の好みなのでこの設定を入れています。

既存の画像を圧縮する

EWWW Image Optimizerをインストールする前の画像を圧縮する手順をご紹介します。

管理画面の【メディア】>【一括最適化】をクリックします。

【最適化されていない画像をスキャンする】をクリックします。

今回は6ファイルが対象になります。【最適化を開始】をクリックします。

これで既存の画像が圧縮されました。おつかれさまでした!

WordPress-新規投稿をデフォルトで非公開に設定するプラグイン RA – New Post Auto Set Status “Private”

新規記事を書くとき、スラスラーと書き上げて「ハイ、公開!」なんて人は少ないと思います。

少しずつ刻んで記事のボリュームを増やしていったり、作業を中断せざるを得ない場合など、ひとまず「非公開」設定にしておくケースが多いと思います。また、時間をおいて誤字脱字のチェック・推敲といった作業も必要です。

うっかり更新ボタンを押して「まだ途中なのに公開してしまった!」と後悔しないように対策しておきましょう。

うっかり公開しないためのプラグインが【New Post Auto Set Status “Private”】です。

このプラグインをインストールしておけば、公開ボタンを押下しても、一旦【非公開】状態になり、不測の事態を防ぐことができます。

しっかり記事の内容を確認し、本当に公開したい場合は、【非公開】になっている公開状態を変更し、【公開】に設定して更新ボタンを押下すればOKです。

ただし、このプラグインはデメリットもあります。記事を書き終えて問題無し!となってスグに公開したい場合でも、一度非公開状態を経て、公開に切り替えないといけないという点です。

煩わしいと感じるかもしれませんが、私は安全な運用が第一と考えていますので、このプラグインはオススメです。

それでは、インストール手順です。

New Post Auto Set Status “Private”をインストール

管理画面よりプラグイン>新規追加を選択します。

プラグインを検索します。キーワードの欄に【New Post Auto Set Status “Private”】と入力します。

【New Post Auto Set Status “Private”】を見つけ、「今すぐインストール」ボタンを押下します。

そのままプラグインを有効化します。

特に設定する項目は無いので、以上でインストールは完了です。

注意点

ちなみにプラグインを有効化した後で、投稿を新規追加しても公開状態やボタンが【公開】のままになっています。また、記事を書いてもその文言は変わりません。

これじゃあ今までのままではないか!と思われた方。安心してください。

プラグインが有効化されている状態で、新規投稿時に【公開】ボタンを押下した場合は、自動的に非公開状態にプラグインが処理してくれます。

とはいえ、最初は不安もあると思います。そういった場合は動作確認してみてください。

実際にテスト用の投稿を作成して公開ボタンを押してください。すると「公開状態」が「非公開」になると思います。

以上です。おつかれさまでした!

WordPressのテーマを変更する方法。あとお気に入りのテーマ紹介-Stringer8

WordPressのテーマは数多くの中から選ぶことができ、さらに簡単に切り替えることができます。
かんたんに変更できるからといって、コロコロとレイアウトを変えているとなかなか覚えてもらえないので、サイト立ち上げ時やリニューアル時以外には必要以上に変更しないほうが良いです。

それではテーマの変更手順をご紹介します。
いろいろテーマを試して、気に入ったテーマを長く使いましょう。

WordPressテーマの変更

WordPress管理画面の左メニューから、【外観>テーマ】を選択します。

変更したいテーマ上にマウスを移動し、【有効化】が表示されたらクリックします。

 

するとスグにテーマが切り替わります。実際にページを見てイメージ通りのレイアウトになっているか確認しましょう。

 

オススメのテーマ

数あるテーマの中から選ぶのは骨が折れます。私がおすすめするテーマを一つご紹介するので、選択肢の一つに入れてみてください。

Stinger8

Stinger8は幅広い人気があり、あちこちのサイトで使用されています。「他のサイトとかぶっちゃうんじゃ?」と心配されるかもしれませんが、サイト全体のイメージカラーも変更できるので、自分だけのオリジナルに設定すればOKです。

シンプルにまとめるとStinger8の特徴は以下の通り!

  • SEOに強い
  • レスポンシブデザインで各デバイスに対応
  • シンプルなデザインでカスタマイズしやすい

今このサイトで使用しているテーマもStinger8です。使いやすいですし、カスタマイズも管理画面から容易に行えるので気に入っています。

Stringer8のダウンロードページは以下です。

ダウンロード及び規約

ゆくゆくは自作テーマ作りたいなあ。。。

WordPressのテーマを削除する方法

WordPressのテーマは数多くの中から選ぶことができ、さらに簡単に切り替えることができます。いろいろテーマを試して、気に入ったテーマを長く使う人がほとんどでしょう。

でもちょっと待って下さい。いつの間にか使っていないテーマの残骸がサーバー内に転がってはいませんか?使っていないテーマが残ったままだと、更新通知にテーマの最新バージョンのお知らせが来たりして地味に邪魔です。また、テーマファイルがサーバーに残っていることで、多少なりともサーバの負荷になっていることは間違いありません。

デフォルトでインストールされている【Twenty … 】のテーマも不要なら削除しておきましょう。

私も「デフォルトでインストールされているテーマなら、万が一、使う時がくるかもしれない」と思っていましたが、「本当に必要ならもう一回インストールすればいっか」と思い削除することにしました。というかデフォルトのテーマってまず使わないですよね。そういうサイト見たことないです。

それでは削除手順です。

WordPressテーマの削除

WordPress管理画面の左メニューから、【外観>テーマ】を選択します。

削除したいテーマ上にマウスを移動し、【テーマの詳細】が表示されたらクリックを押下します。

テーマについての詳細情報が表示されるので、右下の【削除】をクリックします。

「本当にこのテーマを削除しますか?」と聞かれるので、【OK】をクリックします。

以上で削除作業は完了です。不要なテーマはガシガシ削除しましょう。

それでは、おつかれさまでした!

 

嫁に貸していたWindows10がプラチナ重くなったので、軽くするために実行したこと

嫁と結婚して、いろいろなものをシェアするようになりました。その一つがノートパソコンなのですが、数ヶ月間貸していた後起動してみたら…

ナニコレ、クソ重い

という状態になっていました。

以前まではサクサク動いてたはずなのに、今は動作のタイムラグがハンパなくとても使えたものではありません。おそらく原因は以下の2つ。

1.Windows10にアップグレードしたこと。

2.嫁が子どもの写真をめっちゃ保存していること。

まずはそこら辺をターゲットにしつつ、いろいろやってみます。

軽くするために実行したこと

1.Windows Defenderの無効化

「何だか動作が重い・・・」そんなときに効く!【Windows 10】でWindows Defenderを完全無効化する方法!を参考に無効化しました。この筆者の方も書かれていますが、代替のウィルス対策ソフトを入れていない場合は、Windows Defenderの無効化はやめておきましょう。

2.常駐アプリケーションの無効化

【Windows10】パソコンの動作が重い。。そんなときは常駐アプリケーション無効でサクサク動作!を参考に無効化しました。なんでもかんでも無効化していたら、PCの動作に重要なプログラムに影響を与える可能性があるので、参考ページに書かれているようにメーカーがプリインストールしている独自プログラムと利用していないプログラムのみ無効化しましょう。

Chromeを32bit版→64bit版に変更

Chromeをインストールしたのは4年以上前なので、当時どうやってインストールしたかは覚えていないのですが、PCは64bitなのにChromeは32bit版をしようしていたようです。。。いや、お恥ずかしい話で。

意外と盲点?使用中の Google Chrome を 32bit から 64bit に上書き更新したら本当に爆速になった!の記事を参考に64bit版をインストールしました。

うっかりという場合もあるので、対応したバージョンがインストールされているか一度確認しておきましょう。

ネットワークドライバの更新

Windows10に対応していないネットワークドライバを使用しているかもしれないので、念のため更新しておきましょう。

視覚効果をパフォーマンス優先にする

Windows10 をパフォーマンス優先に(軽く)する方法を参考に設定しました。余計な機能を削ぎ落として、速度を優先させる方法です。もし、視覚効果の変更により逆に使いにくいと感じるかもしれません。その場合は、カスタム設定で必要な視覚効果にチェックを入れておきましょう。

必要のないサービスを徹底的に無効にする

明らかに使うことの無いサービスに関しては、全て無効にしてメモリを節約しましょう。WINDOWS10を爆速仕様にする高速化設定方法を参考にさせていただきました。書かれている項目の中には、ユーザーによっては使用するサービスもあると思いますので、必要なサービスは無効にしないよう注意してください。

必要のないソフトウェアをアンインストール

この方法も基本ではありますが、こまめにチェックしておきたいものです。気がつくとナンダコレなソフトがたくさん入っていたりしますので、必要のないものはどんどんアンインストールしていきましょう。

ドライブの最適化

データが断片化状態を解消すると動作が軽くなります。こちらも定期的に行いましょう。Windows10とドライブのデフラグと最適化 まとめのページを参考にさせていただきました。

まとめ

上記の作業をすべて行うとさすがに作業前と後では動作が違いますね。まだまだ改善すべき点はありますが、かなり軽快になったので、ひとまずここらへんで終了しておきます。おつかれさまでした。

NURO光の付帯サービス【カスペルスキー】の導入手順

NURO光を申し込むと付いてくる標準装備のセキュリティサービス【カスペルスキー マルチプラットフォーム セキュリティ】の導入方法を解説します。

そもそもカスペルスキーとは

非常に品質の高いセキュリティソフトとして世界的に人気であり、ウィルスの検知精度の高さや負荷の軽さなどが特徴です。

日本で有名なセキュリティといえば、ノートンやウィルスバスターであり、まだまだカスペルスキーは知られていないかのように思います。しかし、世界的評価機関による性能比較テストで、5年連続1位を獲得しており、実績は十分です。

そして、NURO光に付いてくる【カスペルスキー マルチプラットフォーム セキュリティ】は5台インストールできるプランです。カスペルスキー公式サイトの価格を見ると、同サービスは1年で4980円の費用がかかるようですが、それを無料で使えるのはやはりオトクという感じがします。

【カスペルスキー マルチプラットフォーム セキュリティ】について、NURO公式サイトの説明ページによると、

Windows、Mac、そしてAndroidの3つのOSに対応し、自由な組み合わせで最大5台までの機器にインストールできるセキュリティ製品です。

ウイルス・ハッキング・フィッシングなどの脅威からご利用の機器を守り、ネット決済保護機能やフィッシング対策機能でインターネット利用を安全に保護します。

とのことです。

ちょっと気になるところはマルチプラットフォームなのに ios には対応していないということでしょうか。5台もインストールできるのであれば、iphoneにもいれておきたかった。。。

対応していないものはどうしようもないので早速インストールしていきましょう。

事前に確認すべきこと

他のウィルス対策ソフトをインストールしている場合は、アンインストールしておきましょう。

もしくはインストーラを実行した際に、競合するウィルス対策ソフトを削除するダイアログが表示されるので、そのフェーズでアンインストールをしても問題ありません。

 

いざインストール

カスペルスキーダウンロードページより各OSに合ったものをダウンロードします。

ダウンロードしたインストーラを実行します。

Windows

kis16.0.1.445ja-jp_full.exeを実行する→ウィザードに沿ってインストール→so-netより通知されたアクティベートコードを入力し、アクティベートする

Mac

インストール.appの実行→ダイアログに従ってインストール→so-netより通知されたアクティベートコードを入力し、アクティベートする

Android

カスペルスキーインターネットセキュリティをインストール→ダイアログに沿ってインストール→so-netより通知されたアクティベートコードを入力し、アクティベートする

Macのスリープに入る時間を設定する方法

こまめにスリープ状態にすることは、セキュリティ面でも節電の面でも大切なことです。しかし、スリープへの設定時間が短すぎるとかえって作業効率が悪くなるので、最適な時間を設定することが大切です。

それではMacのスリープに入る時間を設定するを解説します。

Macのスリープに入る時間を設定する

左上のリンゴマークからシステム環境設定をクリックします。

省エネルギーをクリックします。

【ディスプレイを切にするまでの時間】のスライドバーを移動させて設定します。

「この設定にすると、コンピュータの消費電力が増加する可能性があります。」というダイアログが表示されますが、【OK】をクリックしましょう。

また、以下の項目も設定できます。

  • 可能な場合はハードディスクをスリープさせる
  • バッテリー電源使用時はディスプレイを少し暗くする
  • バッテリー電源使用時に Power Nap を入にする

Power Nap機能はスリープ中でも新着メールや各アプリケーションからの通知を受信する機能です。

上記は作業に支障がない範囲で設定しておきましょう。

SourceTreeの比較プレビューがおかしいのは、改行コードのせいだったりした件

SourceTreeの比較プレビューがうまく動いていないことってありますよね。ファイルをちょこちょこ修正しただけなのに、比較プレビューをみると全行変更扱いになってたりして、「なんで?」ってなります。

今までは原因を突き止めようとせず、とりあえず流してました。

特に重要なファイルでこの現象が発生していたわけでもないので、腰をすえてさがさなかったんですねー。

 

さて、本日ふと時間が空いたので、腰を据えて探してみました。いやー、調べれば結構あっさり解決するもんです。

 

ソース比較の不具合の原因

結論から言えば「改行コード」が原因でした。

ファイルの改行コードが【CR】で設定されていたので、SourceTreeのテキスト比較機能がうまく動作していませんでした。

 

改行コードを【CR】→【LF】に変更すればあ~ら不思議、ちゃんと比較できるようになりました。基本的には、【LF】もしくは【CR+LF】のどちらかです。【CR】は割りと古いMacで使用されていた改行コードのようです。

 

よく観察してみるとエディタで開いた時とSourceTreeの比較プレビューで見た際は行数の数字が全然違っていました。

 

改行コードとは?

 

コンピュータに改行を認識させるために用いるのが改行コードです。改行コードは以下の表のようにOSによって違います。

 

OS 改行コード
unix LF
Mac (特にOS 9以前) CR
Windows CR+LF

 

改行コードが異なるとCGIスクリプトなどは正しく改行コードを認識できず、不具合の原因になることが多いと言われています。

 

ちなみに改行コードの意味は

LF・・・Line Feed(ラインフィード)

カーソルを新しい行に移動することです。改行という意味です。

 

CR・・・Carriage Return(キャリッジリターン)

カーソルを左端の位置に戻すことです。復帰という意味です。

 

CR+LF

左端にカーソルを戻して改行することです。前述のCRとLFと合わせたものです。

 

ぼくはSublime Text 3 を使っているのですが、改行コードを表示する設定にしていなかったので、これを機に表示設定に切り替えました。

 

まとめ

普段は全然意識しない改行コードですが、頭の片隅に置いておかないと改行コードが原因でハマるときには、無駄に時間ばかりが過ぎてしまいます。イレギュラーな不具合が起きた時には、原因のひとつとして探ってみるのもいいかもしれません。

 

CSSスプライト用の画像を簡単に作成できるCSS Sprite Generatorが便利

サイト高速表示のために使える技術は全て導入すべきです。高速化技術の中でもメジャーなのがCSSスプライトです。

でも、CSSスプライト用の画像を作成するのって大変ですよね。

間隔調整とかも大変ですが、画像追加とかになるとめんどうですよね。

最近国旗のスプライト画像を作ったのですが、時間が無い中、死にそうなぼくを救ってくれたのが、【CSS Sprite Generator】でした。

CSS Sprite Generatorを使えばスプライト画像を一瞬で作成できます。しかも、スプライト用のCSSも同時に生成してくれます。これはかなり大きい!

それでは使い方をみていきましょう。

CSS Sprite Generatorの使い方

まずサイトにアクセスします。

CSS Sprite Generator

次に【OPEN】をクリックします。

ダイアログが出てくるので、スプライト画像に取り込む画像をすべて選択します。

プレビューで出来上がり後の画像を確認できます。

問題なければ【Download】をクリックします。

するとダウンロード用のパネルがでてきます。

画像はそのままドラッグアンドドロップでダウンロードしましょう。

次にタブの【CSS】に切り替えます。

このCSSを適用することで、スグにCSSスプライトを使うことが出来ます。

クラス名は画像の名前で生成されます。

CSSが効かないと思ったらチェックすること

コーディングしているときに、「あれ、CSSが効かねえ」って小ハマりすることありますよね。

・CSSファイルを更新したのに、反映されない

・CSSファイルが反映されているのに新規記述が読み込まれない

CSSが効かない原因はたいてい単純な問題なことが多いです。焦って無駄な記述を増やしてしまわないよう落ち着いてチェックしていきましょう。

初級〜中級者の方向けのチェック方法をご紹介します。

 

すんません、キャッシュじゃないですか?

ファイルを修正したのに、チェック担当者に「あれ、まだなおってないんだけど」と言われたら、まず疑うのがキャッシュです。WEBに疎い人は、なぜか毎回キャッシュのせいで騒いでいます。ブラウザのキャッシュをクリアしましょう。

他のキャッシュ対策テクニックとしては、ファイルを読み込む記述 href=”example.css” に引数を付けて href=”example.css?20160811″ とかにすれば別のファイルと認識し、新規のファイルとして読み込んでくれます。

まず、ファイルちゃんと読み込んでますか?

ファイルをちゃんと読んでいるかとりあえずチェックです。style.cssを読んでいるつもりが、記述がrel=”styl.css”になっていてファイルがそもそも読み込まれていないパターンです。また階層に関しても注意です。相対パス、ルート相対パス、絶対パスなどです。怪しい場合は、実際にブラウザにURLを入力して、ファイルが存在するか確認しましょう。

 

きみ〜、クラス名が違っているよ

結構やっちゃいますね。単純にIDの【#】とクラス名の【.】を間違えていたり、コピペミスで一部の文字が切れていたりします。

コラ!書式が間違っているよ

セミコロン【;】が抜けていたり、コロン【:】になっていたりの書式ミスもよくあります。

あとは全角文字列が入っていたり、コメントの入れ方が問題のケースもあります。

だめだよ。クラス名が数字から始まっている文字列

最近やらかしました。クラス名には数字は使えるのですが、先頭で使ってはいけません。たとえば、【100en-item】とかだといつまでたっても反映されません。5分くらい「あれー、あれー」状態でした。こんなときは【item-100en】とかにしておきましょう。

一番多いと思います。CSSの適用順序の問題

CSSには適用の優先度があります。ざっとあげると以下のようなルールです。

  • 後から記述したほうが適用される
  • クラス名指定よりID名指定のほうが優先度が高い
  • 階層指定が深いほうが優先度が高い
  • !importantは最強

 

まとめ

CSSが効かない原因はの適用順序の問題がほとんどじゃないでしょうか。それでもうっかり、上記のようなミスをしてしまうことがります。

お役に立てれば幸いです。

Macでダイアログをキーボード入力で操作する方法

Macでダイアログをキーボード入力で操作する方法について解説します。

ショートカットを自在に扱える人=仕事ができる人と個人的には思っています。ショートカットに興味を持ち、より効率的に仕事をしようという人は尊敬できます。

記事を書いたり、画像を編集したりしているとたまに出てくるダイアログ。毎回ポチポチとマウスで消してませんか?せっかくキーボードに両手を置いているのに、わざわざマウスまで手を持って行きたくないですよね。

そんなときはキーボードのショートカットを使いましょう。

ショートカットを軽視する人は、「たかが数秒の違いでしょ。」なんて言いますが、数秒の積み重ねは後に大きな差になってきます。かといって、全てのショートカットをリストにして暗記しても一気には覚えられないので、気になった時に必ず調べるようにしましょう。

Macでダイアログをショートカットで操作する

それでは手順を見ていきましょう。

システム環境設定

左上のリンゴマーク>システム環境設定をクリックします。

【キーボード】を選択します。

【ショートカット】タブを選択します。下部の【全てのコントロール】を選択します。設定が完了したらシステム環境設定のウィンドウを閉じます。

ショートカットの動作確認

それでは動作確認してみましょう。【tab】キーを押下することで【OK】、【キャンセル】を選択できるようになっているはずです。

適当なjavascriptの実行コードを用意します。

<script>// <![CDATA[
confirm(‘モミモミしてもよろしいですか?’)
// ]]></script>

以下のようなダイアログがでます。

初期状態のフォーカスは、【このページでこれ以上ダイアログボックスを生成しない】が選択されています。これは2回以上、同じドメインでダイアログを表示した場合表示される設定です。「もう見たくないよ」という場合はチェックを入れます。ちなみにチェックボックスは【スペースキー】を押すことでチェックの有り無しが切替できます。

それでは本題のtabを押してみます。

想定通り次の選択肢【キャンセル】に移動しました。さらに【tab】キーを押下すると…

【OK】に移動しました。バッチリですね。決定する場合は、【スペース】を押下します。

「あれ、enterじゃねえのかよ。」と思われた方!実は違うんです。

enterだとデフォルトで青くなっているボタンを押下することになってしまいます。ここでは【OK】ボタンですね。tabボタンで切り替えをした選択肢を実行する場合は、【スペース】を押下してください。

解説は以上です!

まとめ

使えるようになるまでの設定は非常にシンプルなのでスグ設定は可能です。操作方法に少しミソがあるので注意ですね。いつもの【enter】ではなく【スペース】に注意しましょう。

これからダイアログが出てきても、タタタンタタン!で解決ですね。

 

アイキャッチ自動生成プラグインAuto Post Thumbnailのインストール手順

WordPressブログ運営において、デザインやプラグイン設定など、一度決めたらしばらく変更のない作業とは違い、記事作成は毎日作業しなくてはなりません。こんなことを言うと、夢のない話かもしれませんが、一つの記事にかなりの時間を費やして質の良い記事を書き上げたとしても、待っているのは次の記事作成です。

重要なのは「書きたいことをいかに簡単に、効率的に書くか」ということです。「記事を書く」、そのことに一番時間を割きましょう。他の項目で自動化できるところは自動化します。

一つの記事を作るには、文章を入力するというメインの作業の他に細々した作業がついてきます。カテゴリー、URL、タグ、キーワード、ディスクリプション、アイキャッチなどです。

全てを毎日やるのは大変です。ちりも積もれば膨大な時間のロスにつながります。単純作業は自動化してしまいましょう。そして浮いた時間を記事の執筆にあてるのです!一番重要なのは記事の内容です。アイキャッチを設定していた時間を、記事のブラッシュアップにすればもっと踏み込んだ記事が書けます。

そこでWordpressプラグイン【Auto Post Thumbnail】をつかいましょう。

Auto Post Thumbnailとは

WordPress無料プラグインで、アイキャッチを自動作成してくれるようになります。ちまちま一記事ごとにアイキャッチを設定しなくても、記事に挿入した一番上の画像を自動的にアイキャッチにしてくれます。それだけをやってくれるシンプルなプラグインです。

Auto Post Thumbnailのインストール

WordPressの管理画面に入り、左メニューのプラグイン>新規追加をクリックします。

検索ボックスに【Auto Post Thumbnail】と入力します。

【Auto Post Thumbnail】の項目で【今すぐインストール】をクリックします。

インストールが始まります。終わったらプラグインの有効化をクリックします。

Auto Post Thumbnailの設定

続いてプラグインの設定をしましょう。管理画面の左メニューの設定>Auto Post Thumbnailを選択します。

【Gnerate Thumbnails】をクリックします。

プラグインの処理が走り、過去の記事にアイキャッチを設定します。100%になれば完了です。これで設定は完了です。あっという間でしたね。

これで記事の中の画像がアイキャッチとして設定されるようになりました。

動作確認

Auto Post Thumbnailの動作を試してみましょう。

2つの画像を用意しました。まず aという文字が書かれた画像を挿入し、次にbという文字が書かれた画像を挿入し、公開しました。他には何の設定もしていません。

結果は上記のようなかんじです。ちゃんとアイキャッチが生成されていて、リサイズもうまく行っているようです。

以上、Auto Post Thumbnailのインストールと設定でした。

自動で目次作成!WordPressプラグイン Table of Contents Plusのインストール・設定

記事をいかに見やすく書くかはブロガーの命題です。段落の区切りや全体の構成など考えられる手段は多くあります。その中でも一番読者の目に触れやすいのが、記事の目次です。

この記事はいったい何について書かれているかがひと目で分かり、自分の欲しい情報が記載されているかどうかの判断がつきやすくなります。目次を作成する少しの手間と目次が持つ大きな利益を考えると、是非とも設置しておきたいものです。

WordPressでブログを運用している人に是非オススメしたいのが、【Table of Contents Plus】です。このプラグインのスゴイところは、見出しタグ(h1やh2)を認識して、自動で目次を作成してくれます。

Table of Contents Plusをインストール

WordPressの管理画面に入り、左メニューのプラグイン>新規追加をクリックします。

検索ボックスに【Table of Contents Plus】を入力し、エンターを押します。

【Table of Contents Plus】の【今すぐインストール】をクリックします。

インストールが開始されます。完了したらそのまま【有効化】をクリックします。

Table of Contents Plusの設定

プラグイン一覧から【設定】をクリックします。ちなみに左メニューから遷移も出来ます。

その場合は、設定>TOC+を選択します。TOCはTable of Contentsの頭文字ですね。

1つずつ見ていきましょう。

■表示する場所:目次を表示する場所を指定します。選択肢は4つあり、最初の見出しの前(デフォルト)、最初の見出しの後(デフォルト)、トップ、ボトムから選択します。最初の見出しの前(デフォルト)が一般的です。

■表示条件:見出し(hタグ)が何個以上で目次を表示するか選択します。プププ企画は2つ以上で表示します。基本的には表示させる方針です。

次の投稿タイプの時に表示:どのページタイプに目次を表示するか。

  • post:投稿記事
  • page:固定ページ
  • wpcf7_contact_form:プラグイン [Contact form 7]で作成したお問い合わせページ

プププ企画はpostとpageにチェックを入れています。

■見出しテキスト:目次の上に表示するテキストを設定します。オススメは普通に【目次】です。シンプル イズ 伝わりやすい。目次自体を表示/非表示にするボタンを設定できます。プププ企画ではこの設定はチェックを外しています。理由は単純でこの機能を使わないと思うからです。

■階層表示:h2やh3などの親子関係を階層で表示します。どの項目の中にどういった内容が書かれているかわかりやすくなるので、チェックすることをおすすめします。

■番号振り:目次一つ一つに番号を振ります。全体構成がわかりやすく、いくつブロックがあるか把握できるので、設定しておきましょう。

■スムーススクロール:目次をクリックした際に、瞬時に移動するか、するっとなめらかに移動するか。

■デザイン:横幅・回り込み・文字サイズ・デザインを組み合わせることで自分のサイトにあった目次を作成します。プププ企画は、横幅→自動、回り込み→なし、文字サイズ→95%、デザイン→Light blueです。

もっとカスタマイズしたい場合は、【上級者向け】から設定してください。

また、このプラグインはサイトマップも作成できますが、専用のプラグインをインストールしたほうが良いです。餅は餅屋。目次は目次。サイトマップはサイトマップ。ということで、設定は完了です。見出しをうまく活用して、見やすい記事を作成することを意識しましょう。

リンク切れを見逃さない!Broken Link Checkerのインストール方法[WordPressプラグイン]

ブログをしばらく運営していくと自然にリンク切れが出てしまいます。いろいろな事情でURLを変更したり、サイトを閉鎖したりは仕方がないことだと思います。しかし、その変更になったリンクを放置していたままではいけません。せっかくいい記事を書いて、読み進めてもらってもリンクが切れていては記事の信頼度は下がってしまいます。

しかし、いつリンク切れが発生するかなんて誰にも予測できません。記事作成で忙しいのに、過去の記事のリンク切れをチェックしている時間なんてありません。もちろんSEO的にも良くないので、早めの対処が必要です。

そんな悩みを解消してくれるのが、Wordpressプラグイン【Broken Link Checker】です。

Broken Link Checkerをインストールしておけば、定期的にリンク切れを通知してくれます。

Broken Link Checkerのインストール手順

まずは、Wordpress管理画面にアクセスし、左メニューのプラグイン>新規追加をクリックします。

プラグイン検索ボックスに【Broken Link Checker】と入力しエンター。

検索結果からBroken Link Checkerの【今すぐインストール】をクリックします。*本サイトは既にインストール済なので、【インストール済み】という文言になっています。

プラグインをインストールしたら、【プラグインを有効化】をクリックします。

有効化されるとBroken Link Checkerの実行結果がダッシュボードに表示されるようになります。設定は変更しなくても、デフォルトのままで十分機能します。

リンク切れを検知するとどうなる?

リンクエラーが発見されると、サイトの管理画面のダッシュボードに告知されています。また、同様にツール>リンクエラーにも告知されます。下の例では6件のリンクエラーが発生しています。

リンクエラーをクリックすると検知したエラーの一覧画面に遷移します。ステータスには「404 Not Found」「サーバーが見つかりません」などのメッセージが表示されます。

リンク切れのテキストに関しては、打ち消し線(こんな感じ)を自動で入れてくれて、リンク切れであることをユーザーに知らせてくれます。

リンク切れ項目にフォーカスをあてると、そのリンクに対する対処法を選択することができます。

以下のいずれかを選択してエラーを解消しましょう。

  1. URLを編集・・・URLを正しい編集してリンク切れを解消します。
  2. リンク解除・・・すべての投稿からこのリンクを削除します。
  3. リンクエラーでない・・・このリンクを壊れたリンクのリストから削除して正常なリンクとみなします。
  4. 無視・・・個のリンクを非表示にしステータスが変わるまで報告しないようにします。
  5. 再確認・・・リンクが現在も無効かどうかリクエストを送り再確認します。

Broken Link Checkerを有効化するとサイトが重くなる!?

設定した間隔で定期的にサイト内をチェックする処理が走るため、サイトが重くなる場合があります。

対策としては、定期的なリンクチェックの間隔を長めに設定しておき、リンクチェックを手動で行うなどの方法があります。手動でリンクチェックを行う方法は、管理画面の左メニュー>ツール>リンクエラーをチェックをクリックすることで実行できます。

また、プラグインの高度な設定タブで【サーバー負荷の制限】という項目があるので、上級者のかたはこちらで設定しても良いです。ちなみにぼくはそこまで詳しくないので、後々最適な設定が分かったら追記します。

SEOに強い!初心者でも簡単!STINGER PLUS+導入手順[WordPressテーマ]

SEOは大事なのは分かっているけど、よくわからないし対策するのは大変。というか面倒。。

そんな面倒くさがりたちへの強い味方【STINGER PLUS+】(スティンガー+)をご紹介します。

【STINGER PLUS+】はWordpressのテーマであり、無料で使えます。SEO対策についても最適化されており、導入後アクセス数がアップしたというWordpressサイトが数多くあります。有名なブロガーからも支持され、現在無料のWordpressテーマの中で最もオススメなテーマです。

STINGER PLUS+のインストール

*アクセスの少ない時間帯に作業することを推奨します。またバックアップはとっておいてください。

STINGER PLUS+公式ダウンロードページにアクセスします。

STINGER Plus ver ○○○の下の【規約に同意してダウンロード】をクリックします。zipファイルのダウンロードが完了します。展開はする必要はありません。

WordPress管理画面の左メニューの外観>テーマを選択します。

【新規追加】をクリックします。

【テーマのアップロード】をクリックします。

【ファイルを選択】をクリックし、【stingerplus.zip】を選択します。【今すぐインストール】をクリックします。

インストールが完了したら、【有効化】をクリックします。

STINGER PLUSが有効化されました。早速サイトのレイアウトを確認しましょう!

 

トップページに記事一覧がなくなり、ヘッダー部分がもっさりしてます。テーマが変わるので仕方なしですね。あとで設定するので安心してください。

*ぼくのサイトは現在アクセスが一桁なので屁でもないですが、常時アクセスのあるサイトを運営されている方は、テスト環境を用意して正常に表示されるまでの手順を作っておいたり、アクセスの少ない時間帯(深夜)などに作業を行うことを推奨します。

次に、Wordpress管理画面から左メニュー下のSTINGER管理>STINGER管理リセット をクリックします。

【全てリセットする】にチェックを入れ、【save】をクリックします。*アナリティクスコード等がリセットされますので、再度設定する必要があります。

 

さて再度はレイアウトを確認してみましょう。

記事一覧が表示されました。うん、なんか整っている印象です。

まだヘッダーが気になります。とりあえず管理画面の外観>ヘッダーに遷移します。

ヘッダー画像を表示しない or まだ決まっていない場合は、【画像を非表示】をクリックします。

*ヘッダーに設定する画像が決まっている方は、【新規画像を追加】>画像選択>画像サイズ設定>保存して公開を行ってください。

プレビューでレイアウトを確認し、【保存して公開】をクリックします。

これで大分レイアウトが整いました!不要な要素のないスッキリしたデザインで、重要な情報がすっと入ってくるクールなフラットデザインですね!

次の記事では、STINGER PLUS+の機能をもっと掘り下げたいと思います。

 

 

Googleアナリティクスちゃんと計測できてる?Google Tag Assistant Recordingsでチェック

GoogleアナリティクスでPVを確認していると、通知の中に【Google Tag Assistant Recordingsをお試しください】という項目がありました。

Google Tag Assistant RecordingsはGoogleの公式ツールでありChromeの拡張機能です。

Google Tag Assistant Recordingsを使うと、Googleアナリティクスなど、Googleサービスを利用するために埋め込んでいるタグが、正常に動作しているか確認できるようになります。

*ちなみに、ChromeとはWebブラウザです。Chromeをまだインストールされていないかたは、WebブラウザシェアNo.1! Google Chrome インストール方法を参考にしてインストールしてください。

それでは、Google Tag Assistant Recordingsのインストール手順と使い方について解説していきます。

Google Tag Assistant Recordingsインストール

Chromeを起動し、Chromeウェブストア – Tag Assistantにアクセスします。

【Chromeに追加】をクリックします。

【Tag Assistant (by Google)を追加しますか?】をきかれるので、【拡張機能追加】をクリックします。

Tag AssistantのアイコンがChrome拡張機能に追加されます。

Tag Assistantを使ってみる

Chromeのアドレスバーの右にある拡張機能アイコンのTag Assistantをクリックします。すると、チェックするタグを選択するダイアログが表示されます。アナリティクスだけで良い場合は、Google Analyticsのみにチェックします。【Done】をクリックします。

【Enable】をクリックします。

次に【Record】をクリックします。

これでエラーチェックが有効になったので、チェックしたいページにアクセスします。Tag Assistantアイコンをクリックすると、チェック内容を確認できます。

んあ!?エラーが出とるやんけ!!

エラー詳細をみるとAnalytics IDがおかしいようです。そういえば昨日Analyticsの記述を、Wordpressテーマからプラグイン[All In One SEO Pack]へ移した作業をしました。そのときのコピペで誤った文字列を入れてしまっていたらしいです。Tag Assistant試してよかったと思った瞬間でした。

タグの色でエラーの重要度を表しているようです。

緑:正常

青:軽度の設定問題があり、提案が示される

黄:データ取得に問題がある可能性がある

赤:重大な問題があり、結果を取得できない

先ほどの僕のエラーは真っ赤でしたね。そりゃAnalyticsIDが違うんだから真っ赤ですよね。こういうことがないように、みなさんもこまめにチェックしましょう。

確認作業が完了したら【STOP RECORDING】をクリックしましょう。もっと詳細なレポートが見たい場合は、【Show Full Report】をクリックしましょう。

WordPress スパム対策プラグイン Akismetの設定方法

WordPressのスパムコメント対策プラグイン【Akismet】のインストール・設定方法について解説します。AkismetはWordpressインストール時に、デフォルトでインストールされています。プラグインの有効化はされていないので、ご自身で設定する必要があります。

WordPressでブログを運用している方は、ほとんどこのツールを使っているのではないでしょうか。まだ有効化されていないかたは、登録作業自体は簡単なので以下の手順を実行してください。

Akismetの設定

左メニューの【プラグイン】をクリックし、Akismetを有効化します。新しいバージョンの告知が表示されている場合は、先に【今すぐ更新】をクリックし最新バージョンにしておきましょう。

Akismetを有効化すると、【Akismetアカウントの有効化】のボタンが表示されるので、クリックします。

次の画面で【APIキーを取得】をクリックします。

無料で使用する場合は、basicプランの【GET STARTED】をクリックします。

必要事項を入力して、Wordpress.comのアカウントを作成します。

・E-mail Address:メールアドレス

・Username:ユーザー名

・Password:パスワード

入力が完了したら【Sign up→】をクリックします。

クレジットカードを登録する画面に遷移しますが、必ずしも入力する必要はありません。右部分の支払い金額については、金額部分を左にドラッグして、「¥0/year」にしておきましょう。

すると、入力項目が【F

ダイアログが表示されるので、右上の【×】をクリックします。

次の画面で発行されたAPIキーが表示されます。この文字列を控えておいてください。

WordPressのダッシュボード画面にて、さきほど取得したAkismet APIキーを入力し、【このキーを使用】をクリックします。

これでAkismetが有効になります。また、オプションの変更が可能です。【最も悪質な種類の広範囲なスパムを自動的に削除し、目に触れないようにする。】を選択することを個人的にはおすすめします。

悪質なスパムに対して、貴重な時間を割くわけにはいかないので、できるだけ不要な情報は目に入らないようにしておいたほうが良いと考えるからです。

【変更を保存】をクリックして作業完了です。お疲れ様でした。

 

Macで隠しファイルをFinder上で表示/非表示にする方法

Macではシステムに関わるようなファイルなどの重要なファイルに関しては、ユーザーが誤ってファイルを操作しないようにデフォルトでは非表示設定になっています。隠しファイルは、不可視ファイルとも呼ばれます。

今回は非表示になっているファイルを表示させる手順を紹介します。

隠しファイルを表示させる

terminalを起動します。簡単な起動方法としては【command + space】でSpotlightを起動し、【terminal】と入力し、エンターを押すと起動します。おそらく【ter】まで入力すれば候補にterminalが表示されると思います。

*Spotlightはアプリケーションやフォルダ・ファイルなどを高速で検索できる機能です。コンピュータ内を予めインデックスすることで高速な検索結果表示を可能にしています。Spotlightに関してはまた別記事で詳細な機能をまとめたいと思います。

terminal上で以下のコマンドを入力します。

defaults write com.apple.finder AppleShowAllFiles -boolean true

killall Finder

Finderが再起動されます。

隠しファイル・フォルダは半透明で表示されます。

隠しファイルを非表示にする

逆に隠しファイルを非表示にしたい場合は、terminalで以下のコマンドを実行します。

defaults write com.apple.finder AppleShowAllFiles FALSE

killall Finder

以上、Macで隠しファイルをFinder上で表示/非表示にする方法でした。

 

 

CUIよりGUI!GitHubをSourceTreeで利用する方法

GitHubで作成したリポジトリをSourceTreeで管理する手順です。

GitHubのアカウント作成をお持ち出なかったり、リポジトリをまだ作成していないかたは、一歩を踏み出せ!GitHubアカウント登録方法!を参考に事前に作業をしておいてください。また、SourceTreeをまだインストールしていない方は、Git管理のスゴイGUI!SourceTree for Mac インストール手順を参考にインストールしておいてください。

SourceTreeの接続設定

GitHubのリポジトリページに遷移します。

【Clone or download】をクリックします。

clone用URLをコピーします。

SourceTreeを起動し、【+新規リポジトリ】をクリックします。

ダイアログが開くので、【ソースURL】に先ほどGitHubで取得したclone用URLを入力します。【保存先のパス】は初期値は/Users/ユーザ名/リポジトリ名と自動入力されますが、変更は可能です。入力が完了したら【クローン】をクリックします。

ショートカットが作成されました。

SourceTreeのメインウィンドウが起動します。これで、GitHubリポジトリとSourceTreeの接続設定は完了です。

Gitの操作

実際にSourceTree上でブランチ作成やファイルの変更・追加などを行い、それがGitHub上でどのように表示されるか確認します。ここからの作業は、あくまで動作確認の意味合いですので、同じ作業をする必要はありません。ブランチの運用方法については、ブランチの運用【ブランチ】 | サルでもわかるGit入門 〜バージョン管理を使いこなそう〜のサイトが非常に参考になります。

【ブランチ】をクリックします。

【新規ブランチ】に任意のブランチ名を入力し、【ブランチを作成】をクリックします。

 

新規ファイル【index.php】を作成します。

中身はとりあえず

<?
phpinfo();
?>

に設定しておきます。

SourceTreeを見てみると、ブランチの履歴に【Uncommitted changes】ができているので、クリックします。これは、Git管理のディレクトリになにか変更(ファイルの追加・削除・中身の修正)があった場合に、差分を表示します。

今回は、index.phpファイルを追加し、中身を<? phpinfo(); ?>に設定しているので、ファイル名の先頭に新規追加マークアイコン【?】が付き、右の差分表示エリアに変更内容が表示されます。

変更ファイルをステージに移動します。

【コミット】ボタンをクリックします。

ユーザー情報が未登録の場合は上記のようなダイアログがでます。

必要情報を入力し、コミットのメッセージを記入してコミットをクリックします。

コミットが無事完了したら、ブランチを[master]に戻し、[develop]をマージします。【プッシュ】をクリックし、[master]ブランチにチェックが入っていることを確認し、[OK]をクリックします。

GitHubのアカウントの入力を求められます。ユーザー名とパスワードを入力します。

*もう一度ダイアログが出現し、正しいパスワードを入力してもプッシュできない場合は、SourceTreeでGitHubにプッシュしたとき、Password Requiredから進まないを参照してください。

GitHubに変更が反映されました!プッシュ成功です。

これでどんどんプログラミングを進めることができます。