バックグラウンドサイズだけAndroidで効かない件

AndroidのCSSのコーディングハマったので覚書。

背景画像のサイズを指定できるプロパティ「background-size」があるが、これを「background」の値として書いてはいけない。
「background」「background-size」の順番で記載してあげれば問題なし!

・・・と言い切ってしまった感があるけど、具体的には以下のように記述するべし!

おススメ例
background : url("背景画像") no-repeat scroll center center rgba(0, 0, 0, 0);
background-size : contain;

おススメしない例
background : url("背景画像") no-repeat scroll center center / contain rgba(0, 0, 0, 0);

おススメしないやり方だとAndroid標準ブラウザで背景画像が表示されないバグ?の発生を確認しました。
確認したAndroid OSのバージョンは2.1、2.3、4.2といったところです。
AndroidのChromeなら問題なし。
このあたりGoogleなんとかせいやっ!って感じだけど、Androidデフォルトブラウザのことなんてもうどうでもいいのだろうな。

margin-bottomやmargin-topなどを個別に指定するのではなくプロパティをまとめてmargin:0 0 0 10px;のように指定することをショートハンドというらしいですが、今回の問題はbackground-sizeをbackgroundのショートハンドとして指定するとNGという問題のようですな。

使用前に調べたらbackgroundのショートハンドプロパティとして背景画像のサイズを指定する場合はpositionのあとにスラッシュで区切って指定せよとあった。
この「スラッシュで区切って指定せよ」というのがCSSのコーディングで見かけない記述だったので気になってはいただけど、まさかこんな落とし穴があるとは・・・ですよ。

background-positionのピクセル指定も右や下基準の指定だとAndroidは対応していないし、なかなか厄介なり、Android!

あ、ちなみに、以下のように記述したらやはりNGだから気を付けよう。
background-size : contain;
background : url("背景画像") no-repeat scroll center center rgba(0, 0, 0, 0);

background-sizeを記載したあとにbackgroundのショートハンド設定のパターン。
これはショートハンドでサイズを指定していないけど、省略していると思われて「auto」がついているのと同じと解釈するブラウザがあるみたい。
CSSの優先度は後に書いた方が優先されるので、せっかく指定したものがautoで上書きされて想定と異なる事象が起きてアワアワするので気を付けよう。

落書き_着流し

All in One SEO Pack-02:Home Page Settingsとか編

落書き_足長目玉
今回は「All in One SEO Pack」設定の「Home Page Settings」と「Keyword Settings」と「Title Settings」編。

前回の記事「All in One SEO Pack-01:General Settings編」の続き。

Home Page Settings」では以下の項目を設定していく。
Home Page Settingsの項目画像

  1. 「ホームタイトル」はサイト全体のタイトルということを意識して命名したほうがいいでしょう。
    ゆえに命名するにあたってはSEO的なことを考えると、訪れてほしいユーザーの動機となるキーワードを盛り込むのが良いようだ。
    とはいえ、あれもこれもキーワードを盛り込んでも逆効果なので、一本芯が通るようなキーワードに絞るのが良いかと。
    キーワードはコンテンツが増えてから足していっても間に合いますしね!
    また、実際にサーチエンジンにインデックスされることを考慮すると、全角36文字(半角72文字)に収めないとユーザーから見えない文字列ができてしまうので、そのあたり注意でしょう。

  2. 「ホーム詳細(Description)」は正直難しい。
    オンラインショップなどであれば、ユーザーに対してのショップの紹介文を記載ということでよいと思うけど、ワシのサイトのようにワードプレスでいろいろやっちゃおう!ってコンテンツがヒットする検索する人は必然的にワードプレスで色々やりたい人が多いと思うので、検索する際のキーワードの詳細度も高いはず。その場合のインデックスされる内容は実際のコンテンツがいわゆる「スニペット」としてDescriptionに代わって表示されるからね。
    というわけでワシのサイトではそこまでこだわることないな・・・と結論。
    おおよそ全角120文字以内でコンテンツ内容の要旨を書くにとどめ、キーワードがぁ!とかSEO上位への道がぁ!とかはスコープ外としますわ。

  3. 「ホームキーワード」
    SEO的にキーワードを放り込みすぎるのはNG!というのは今は周知の事実・・・だと思うのですが、どうでしょう?
    基本的にコンテンツ内容と適応したキーワードを複数個おいておけば十分でしょう。欲張りすぎないことが大事じゃ。
    ということもあって、今のワシのサイトのキーワードは「ワードプレス」、「WordPress」だけで十分なり。

さて、今回のサムライ フェレットホームの設定では以下のようにしました。
今はこれで十分でしょう。
サムライ フェレットホームの設定画像

次は「Keyword Settings」。
いきなりだがこの場所のセッティングは以下のようにした。
Keyword Settingsの設定画像

  1. 「Use Keywords」は「利用」にチェック。
    これをチェックしないと各ページにキーワードを設定できなくなってしまうので、当たり前のようにチェックでしょう。

  2. 「メタキーワードとしてカテゴリーを使う」ここもチェック。
    これに関しては記事のカテゴリ名がそのままキーワードとして使用されてしまうので人によってはチェックしないという手もあるだろうけど、ワシの場合は問題なしなのでチェックする。

  3. 「メタキーワードとしてタグを使う」もチェック。
    現時点(2015/2/23 23:36)でタグ(HTMLタグではない。)とやらを使用したことはないのだけど将来のためにチェックしておく。

  4. 「動的に投稿ページのキーワードを生成する」にもチェック。
    これにチェックでカテゴリー名やタグが自動的に付与されるはず。

次は「Title Settings」。
これはGoogleでインデックスされた際に表示されるタイトルなどを設定するためのもののようだ。
しかし、Googleのスタンスとしては検索結果に表示するべきタイトルは「我が決める!」とのことなので、あまり意味がなさそう・・・。
というわけで頭を悩ますのも嫌なので今回は下図のように「利用停止」にチェックをいれて、他はすべてのチェックを外した。
Title Settingsの設定画像

「Capitalize Titles」と「カテゴリータイトルを大文字にする(英字のみ)」はタイトルが英語表記の場合のみ考えればいいっぽいのでチェック無し!

Custom Post Type Settings」はカスタム投稿用の設定だ。
カスタム投稿とは通常の投稿タイプとは異なるユーザーが独自に用意した投稿タイプのことだ。主な用途は企業ならメンテナンス情報とかかな。
Custom Post Type SettingsはそれにもSEOを個別に設定できるようにすることができる機能のこと。
いまのところ、カスタム投稿とやらを実装する気はないけど将来はわからないので、以下のとおりカスタム投稿にもSEOを個別に設定できるようにした。
Capitalize Titlesの設定画像

Display Settings
これはSEOの設定リンクを画面上に置くか・・とかの設定。
これはデフォルトのままでよいかと。
Display Settingsの設定画像

  1. Show Column Labels for Custom Post Types
    投稿フォームなどに個別SEO設定場所を表示する場合にチェックです。
    ふつうはチェックしない手はないでしょう。

  2. Display Menu In Admin Bar
    管理画面上部のバーに SEO というリンクを表示するらしい。
    デフォルトでチェック済み。

  3. Display Menu At The Top
    管理画面の左側ダッシュボードの上部にAll in One SEOというメニューを表示。
    デフォルトでチェック済みなので気づかなかったが、これにチェックしないとダッシュボードにAll in One SEOメニューが表示されないのね。

  4. さらに次に続きます!

All in One SEO Pack-01:General Settings編

落書き画像
前回のレポートは「ワードプレスでのプラグインのインストール方法」だったが、今回のレポートでは実際にインストールした「All in One SEO Pack」の使い方について学んでいこうと思う。
具体的には、このプラグインだけで、以下の5つのことができるようだ。

  • サイト内の全ページのメタタグの編集
  • サイト内の全ページの OGP タグの編集
  • XML Sitemap の自動更新と自動通知
  • Google アナリティクスのコード設置
  • Google ウェブマスターツールのコード設置

さっそく「メタタグの編集機能」を使ってみよう。
メタタグとはなんじゃらほい!?という人はこちらでまず予習しておこう。

metaとtag

まずはGeneral Settingsから
General Settingsを選択
ダッシュボードメニューの「All in One SEO」から「General Settings」を選択。

すると以下の画面が出てくる。
最上部の「メーリングリストに登録」の箇所はとりあえず放っておいて・・・・・・・・・。
というか、ここはデフォルトのままでいいでしょうな。たぶん。
対応不要

でも、このままでいいと言いつつも、ここで設定できる項目の説明をごく簡単に、ワシの理解の範囲で記しておく。

  1. このプラグインを利用し、すでに募金しています
    使ってみて感動した人はできる範囲で募金してあげてください。開発側のテンションが上がります。というわけで、すでに募金している人だけチェックを入れる。初めてこのプラグインを入れて設定する人は大抵チェックなしでよいでしょうな。

  2. Canonical URLs
    コンテンツの重複を防ぎ正規化する。
    例えば、このサイトは「https://samurai-ferret.upper.jp/」でも「https://samurai-ferret.upper.jp/index.php?p1=141028」でもアクセスできる。そしてこのURLが両方とも拡散し、ユーザーがどちらからでもアクセスしてきたとする。
    そんなときに、サーチエンジンに「https://samurai-ferret.upper.jp/」が正規のURLだよと教えてあげるのが、カノニカルです。
    サーチエンジン的には同じサイトなのにちょっとURLが違うだけの同内容のコンテンツを重複してインデックスしたくないわけですね。
    それ以外でもスマホ用のページをパスなどを分けて作っている場合も、サーチエンジンに両方インデックスされるのを避けるためにサーチエンジンとしてどちらをインデックスすべきかを明示するために使ったりしますな。
    なぜならPC版、スマホ版両方ともSEO対策するのは運用サイドとして稼働の無駄・・・というかもったいないもんですから。
    このあたりの話も自分の勉強が進んだらいずれ別のレポートを書き上げたいシロモノです。

  3. No Pagination for Canonical URLs
    次へボタンなどを設置してページ内容を分割するときに、一番最初のページのみをインデックスさせるために使うっぽい。このサイトとしてはとりあえずチェックいれとこうと思う。

  4. Use Original Title
    他のプラグインなどで使うのかな?現時点ではよくわからないシロモノなのでチェックなしで。

  5. Use Schema.org Markup
    HTMLタグで構造化できない情報をさらにブラウザに理解してもらうためのマークアップ!
    例えば「本」「著者」「評価」などをマークアップしてサーチエンジンやブラウザに理解できるようにするみたい。
    これをすることでSEOランクがグングン上がる!
    ・・・かどうかはわからんけど、今後ますます重要になっていくであろうシロモノ。
    これもいずれ別レポートを・・・できたらいいなぁ。
    ということでチェック。

  6. ログの重要なイベント
    イベントログなどチェックしたい人はチェックすればいいのではないでしょうか。
    これはチェックしない。

ということで、このサイトのGeneral Settingsは以下のようにセッティングした!!
このサイトのGeneral Settings設定

次回に続きます。

metaとtag

落書き画像
そもそもメタ(meta)とはなんなのだろうか?
IT用語辞典を見てもさっぱりわからん・・・というより形がつかみづらいものだ。
形而上の概念というか、なんというか、とにかく掴みづらく感じる。

メタとは、
何らかの概念について、その概念自体を対象とする同種の概念・・・らしいので、HTMLでのメタというのもはメタキーワードならそのHTML文章を概念的に表すキーワード。
メタディスクリプションならHTMLを概念的に表す説明書。
と、いうことになるのかな?
たぶんね。

では、タグとはなんだろうか?
まあ、これはそのままタグのことだよね。
服を買う時に服の値段やサイズとか情報が掲載されている商品タグがある。
そのタグのこと。
つまり、HTMLタグとはimgタグならそれは画像ですよ、pタグならこれは段落ですよ。blockquoteなら引用ですよ。
と、文章にタグをつけることでブラウザに文章の構造を理解させているということだ。
たぶんね。
いや~タグでマークアップ(印付け)をするとはよくいったものだ。

昔はレイアウトのために文章の構造とか無視してマークアップしちゃってたし、ブラウザを開発する側も独自仕様を作りまくって手におえん!
ってことでW3Cという団体がいわゆるウェブ標準というものを策定し始めたらしい。

とまあ、うだうだ書いてきたけど、メタタグ編集機能はHTML文章の概念を定義する機能で、サーチエンジンにインデックスしてもらったあとに、インデックスページから、このサイトが一体どんなコンテンツなのかを人間に概念的に理解してもらうために必要ということですな。

さらに最近のサーチエンジンは概念的な内容とコンテンツの実際の内容がマッチしているかもちゃんと見ているようで、スゲェ!と思うと同時に空恐ろしさも感じますね、個人的には。

・・・。

プラグインを入れよう!インストール編

プラグをインできるのはどこ?
ワードプレスと言えばプラグインだ。
このまま何も入れないわけにはいくまい!

サイトを公開している以上、なるべく多くの人に来てもらいたい・・・というのが普通の考え。
そのため、多くの人に来てもらうためには、Googleなどの検索サイトで上位にインデックスされる必要がある。
広告費を払わずにサーチエンジン上位にインデックスされるためには、やはりSEO対策が必要だろう。

SEOとは「Search Engine Optimization」の略で、検索エンジン最適化ということらしい。
一口にSEO対策といっても、Googleなどのサーチエンジンのアルゴリズムは日進月歩で進化し高度化しているので、昨日有効だった手が明日にはランクを下げる悪手になっている・・・なんてことも起こり得たりするので、対策自体に王道はないらしい。

検索エンジンを作る側の目標は、ユーザーが入力したキーワードで表示されたページにアクセスし、ユーザーが満足するであろうページのランクを高くするというのが肝心要なのだろう。
そう考えると、結局コンテンツの中身のクオリティを上げていくしかない!
ということになるが、そうはいっても、これだけはやっておけというのがあるはずなので、それができるプラグインを探したところ、「All in One SEO Pack」というのが見つかった。

今回はこれを導入してみる。

が、まずは「インストール方法」についてレポートしておこう!

  1. ダッシュボードメニューのプラグインから「新規追加」を選択
    プラグイン>新規追加

  2. テキストボックスに追加したいプラグイン名などのキーワードを入力
    プラグイン検索ボックス

    今回のようにインストールしたいプラグインが判明していればそれを。
    分からない場合は「SEO」など関連するキーワードで検索するとよい。

  3. 検索結果からインストールしたいプラグインを選択
    プラグイン選択

    今回は目的の「All in One SEO Pack」のいますぐインストールボタンを押した。

  4. アラートが表示されるので問題なければ押下
    アラート画面

  5. インストールが完了したら、プラグインを有効化
    プラグイン有効化

  6. 有効化したらダッシュボードにメニューが追加された!メニューが追加された

    ※すべてのプラグインでこのようになるわけではないと思うので注意。

さて、これでSEO対策を施す準備ができた。
次回は「All in One SEO Pack」の使い方に迫まりつつ、合わせてこのサイトにSEO対策を仕掛けていこう!

ワードプレスをサイトルートで動かす!

フェレットの体は長くてこそ!だが・・・
前回パーマリンク設定を行って、
https://samurai-ferret.upper.jp/wordpress/?p=123
みたいなパラメーターから

パーマリンク設定をしてみた


みたいなパスで遷移する形にして、投稿した記事のURLがいい感じになったゾ、やった!

しかし、URLが長くなってしまったのも事実。
いまどきURLを手入力する人がいるかどうかはともかく、URLは短い方が好いに決まっていますな。気持ち的に!!

そこで、ワードプレスをサイトルートで遷移できるように設定を変えようと思います。

自分の環境のワードプレスはもともと借りていた実験用のレンタルサーバーにインストールした事情もあり、ルートではなくサブディレクトリ「wordpress」直下にインストールしていた。
後で調べてみると、ルートにインストールしてしまうとファイルがいろいろ散らかるので、専用のサブディレクトリに入れておく方が吉のよう・・・。たまたまだけど、サブディレクトリにインストールしておいよかった。

というわけで、今回は「サブディレクトリにインストール済みのワードプレスをサイトルートで動かす」のレポートだ。

まず、サイトルートを変えるにはダッシュボードの「設定」→「一般」とクリックして「一般設定」に移動する。
下図のような場所があるので、サイトアドレスの方からいらないパスを削除する。

サイトアドレスを編集

/wordpressを削除こんな感じで、ここではサブディレクトリの「wordpress」をトルツメして保存した。

これだけで、サイトルートでアクセスできるようになるか?というとそれはNoで、この状態でサイトにアクセスすると、NotFoundページになってしまう!
私は誰?ここはどこ?って感じだけど、これからもろもろの設定をすれば、解決する!

  1. index.phpと.htaccessをルートにコピーする「wordpress」ディレクトリからindex.phpと.htaccessの2ファイルをコピーしてルートディレクトリに配置します。
    .htaccessはパーマリンク設定をしておくと勝手にワードプレスが作成してくれるけども、.htaccessがない場合は自作する必要があるということですな。
    おれっちのサイトでは前回パーマリンク設定を行っているので、.htaccessができていました。

    というか、ルートにも.htaccessができていました。
    たぶんさきほどサイトアドレスを更新したときにできたっぽい。
    ちゃうちゃう(文字列比較ツール)で比較したらこんな感じだった。

    ちゃうちゃうで.htaccessを比較

    wordpressディレクトリから持ってきた.htaccessには「/wordpress」という文字列が差分として存在している。あとあと困らないように念のため、ルートの.htaccessはバックアップをとってから上書き。

    .htaccessの中身はサイトルートのindexへのアクセスは/wordpressに遷移させるよ!という記述ですな。このあたり苦手なところでもあるので、あとあと勉強してレポートを書きたいと思う。

  2. コピーしたindex.phpを編集する
    ルートにコピーした「index.php」を編集します。
    編集には使い慣れているエディタを使いましょう。index.phpの以下の記述の部分に対してワードプレスをインストールしたサブディレクトリを追記しよう!
    require( dirname( __FILE__ ) . '/wp-blog-header.php' );

    自分の環境ではルート直下にwordpressディレクトリを作成してそこにインストールしていたのでこのよう変更を加えた。
    require( dirname( __FILE__ ) . '/wordpress/wp-blog-header.php' );

    自分の環境では、ルートに持ってきた.htaccessは特に編集する必要がなかった。すでに.htaccessを利用して何かやっている人は単純に.htaccessをコピーするだけでなく、既存の.htaccessに対して追記するなどする必要があるだろう。

これで、例えばこの記事のURLが以下のように変わった!

パーマリンク設定をしてみた


から

パーマリンク設定をしてみた

無事にサイトルートでワードプレスを表示できるようになったぞ!
なお、今回の設定で参考にしたページはこちら。

WordPress を専用ディレクトリに配置する

今後はSEO対策などを行いつつ、Google Analyticsへの登録、プラグインのインストールなどをやっていこうかな。

パーマリンク設定をしてみた

前回はワードプレスインストール後、初めて記事を投稿するとこまでやってみた。

今回はパーマリンク設定

いまのところ、SEOをどうこう言うようななサイトではないけども、のちのちのことを考えると、パーマリンクとやらを始めから設定していおいたほうがいいらしい・・・。

パーマリンクとはあまり聞きなれない単語だけど、パーマは当然パンチパーマのパーマではないらしく、英語の「permanent(永久)」からいただているようだ。
この名前からして一度設定したらおいそれと変更できないような取り返しのつかないものとうかがえる。

永久、そんなものはこの世にないさ・・・

で、グーグル先生に聞いてみると、やはりパーマリンクとは、おいそれと変更すべきではないらしい。
とはいえ、「メニュー」の「設定」の「パーマリンク設定」で用意されている以下の共通設定はどうも魅力に欠ける。

  • デフォルト
  • 日付と投稿名
  • 月と投稿名
  • 数字ベース
  • 投稿名

パーマリンク設定のリスト

というわけで最もポピュラーなカスタム構造を使用した「/%category%/%postname%/」を使うことにした。
これは「カテゴリ名」プラス「投稿名」のURLになるというものだ。
のちのちカテゴリを変更したい場合には大量のリンク切れなどを覚悟しなければならないようだが、
まあ、そのあたり意識したうえでちゃんとやっていけば問題ないだろう。

下図のようにカテゴリ名としてURLに使用されるのは、ブログのカテゴリー作成時に設定した「スラッグ」になる。
英語にしておいてよかった・・・。

カテゴリのスラッグ

お次は投稿名
投稿名としては日本語でも使用可能だけど、日本語は2バイト文字になるので、さまざまなシステムで不具合を起こさないことを考えると、英語で設定したほうがいいだろう。
パーマリンク設定をすると、下図のように記事の見出しあたりに手動でパーマリンクをセットできる項目が現れるようだ。

手動でパーマリンクをセット

そんなわけで、パーリンクを設定が終わった。
初めて投稿した記事についてもパーマリンクの設定をしなくてはならないね。

次回はワードプレスをサイトルートで動かすことに挑戦だ。

 

そうだ、ワードプレスを始めよう!!

そうだ!!ワードプレスをはじめやう!

ということで、ワードプレスをはじめることを思い立ってしまった。

レンタルサーバーには簡単にワードプレスをインストールできる機能があったのでそれを使って、インストールは割とあっさり完了。

これが、インストール直後の画面。
インストール直後の画像
例の如くの「ハローワールド」だけど、ちゃんとマルチデバイス対応しているっぽい!

これだけで少し感動しましたな。

で、何はともあれ投稿だ!・・・ということで、いまのこのページを投稿してみたわけです。

投稿も実に簡単。

  1. ワードプレスの管理者画面を開く
  2. メニューの「投稿」より「カテゴリー」を選択。
    ワードプレスをはじめよう!というカテゴリーを作ってみた。
  3. メニューの「投稿」より「新規追加」を選択。これで編集したものが記事となる。

はい、こんな感じ。

新しい記事

とりあえず、この記事の投稿は簡単にできた。
タグとかアイキャッチ画像とか謎のものもあるがそれは追々試してゆこう。

さらにプラグインを入れたり、テーマを変えたり、それらを作ってみたりといろいろしていこうと思う。

ただし、ものぐさ坊主なので続けられるかどうかが一番の問題だ。

無事これ名馬
継続は力なり

などあるが、まさにそれ。
ワードプレスをはじめることそれ自体より、それこそが自分自身にとって大事なモノになるのかもしれない。