ウェブログ Category

今月、グーグルのアルゴリズムにモバイル対応の項目が追加されるようなので、前回、当ブログのスタイルシートをスマホに対応する予定という投稿をしていたのですが、結局、こんな感じで対応してみました。

これはiPhone5にて閲覧した際の当ブログになりますが、こんな感じでレスポンシブウェブデザイン化してみるとよいかもしれません。一応、モバイルフレントリーテストでもチェックしてみましたが、特に問題はなさそうです。

この旧MTOSのワインレッドのテンプレートを使用されている方はけっこう多いように感じておりますので、このモバイル対応の手順について簡単にメモさせて頂きます。

まず、ヘッダー・ウィジットなどの箇所で、メディアクエリをheadタグ内に挿入しておきましょう。こんな感じのメタタグになります。

<meta name="viewport" content="width=device-width" />

当ブログの場合、</head>の終了タグの直前に入れてます。

次に、メディアクエリをスタイルシートに挿入するわけですが、当サイトの場合、こちらのスタイルシートの@media screen and (max-device-width: 480px) 以下の部分がそれに当たります。

https://www.angelhaunt.net/styles.css

デフォルトの状態ですと、２か所からスタイルシートを読み込む形になっているかと思いますが、私はそのふたつのスタイルシートをひとつにまとめているので、上のような形になっています。

２カラム、３カラムなどの違いにより、layout-wttやlayout-twtなどと切り分けがされていますが、上のスタイルシートについては、「layout-wtt」の３カラムになります。

なので、上のまま、そのままコピペしてもうまく反映されないかもしれませんのでご注意ください。

当サイトではひとつにまとめておりますが、おそらく、デフォルトのスタイルシートの場合は２か所からインポートする形で記載されているはずです。

@import url(http://ほにゃらら/mt-static/themes-base/blog.css);
@import url(http://ほにゃらら/mt/mt-static/themes/minimalist-red/screen.css);

この下に、以下のスマホ用のスタイルシートを記述しておくとよいかもしれません。

@media screen and (max-device-width: 480px) {スマホ用のスタイルシート}

ポイントは一番下に記述して、ＰＣ用のスタイルシートが読み込まれたあと、スマホ用のスタイルシートが上書きされて読み込まれる形にすることです。

この「スマホ用のスタイルシート」の箇所の記述内容については、当ブログのスタイルシートの該当箇所を参照していただくとよいと思いますが、ＰＣ用に横幅が940pxなどと指定されている要素について、スマホ用ではそれぞれwidth:100%;で記述していけば対応できるはずです。

また、ＰＣ用にpaddingやmarginが大き目に指定されている箇所についても、スマホ用のちいさいpaddingで調整することをおすすめします。ＰＣサイトでpadding:30px;とかあってもそれほど問題はありませんが、スマホ用サイトで30pxもあれば、かなりずれてしまうので、概ね、３分の１程度の値に設定しておくとよいかもしれません。

ＰＣサイトで1000pxのケースが多いですが、スマホのデフォルトが320pxですので、だいたい３分の１ぐらいの値がちょうどよいかと思います。

また、「.layout-wtt #beta」などの箇所では、left: 190px;などと横の要素との距離が指定されていたりもしますので、これもスマホ用のメディアクエリの箇所にはleft: 0px;で指定しておくとよいでしょう。

当ブログのスタイルシートは、かなりごちゃごちゃしていて公開できませんが、いずれ、コピペで貼り付けることができるよう、すっきりした形に成形してご紹介させて頂く予定です。

プログラミング言語の習得でウェブ学習をする際、アマゾンのKindle読み放題を利用して手当たり次第に教材を読んでいくのが効率的です。

「Kindle Unlimited」は読み放題で月額980ですが、教材が多数公開されており、HTMLやCSS、あるいはJavascriptやWordPress、Dreamweaverなどを体系的に学習することができます。

読みたい書籍を選んだあとは、Kindlw Cloud Reader、もしくはKindle For PCにて、教材とサーバーを開きながら実際に手を動かしつつ学習していくと理解度が深まります。

ただし、読み放題の対象となっている書籍は古いものが多く、最新の教材の場合は有料のケースが多いです。HTMLなどについて学習する際、無料の場合はxhtmlで説明されているケースも多く、最新のHTML5ではないこともあります。

そのような場合、せっかく学習しても実際には使えない知識となりますので、多少のお金を払っても有料の電子書籍を購入した方がよいかもしれません。

当サイト運営者の場合、HTMLやCSSについてはスラスラと読むことができ、特に目新しい情報はないことも多いですが、１冊に１個ぐらいは使える情報があったりしますので、時間があるときに無料版を手当たり次第に読んでいます。

一方で、インターネット上で参加できるウェブ学習スクールなどもありますが、授業料はわりと高額化する傾向にあります。まずはKindleなどで独学で学習してみて、大雑把にでもひと通りの内容を把握した上で受講した方が理解度もより深まることでしょう。

スマホ閲覧時のグローバルナビゲーションについてですが、この箇所のレスポンシブ対応にはパーセンテージによる設定などで何かと手間がかかるかと思います。

また、スマホでグローバルナビゲーションを表示させるとメインコンテンツの部分が押し下げられてしまうデメリットがあるため、私は今までずっと「display:none」で非表示にしておりました。

けれども、先日は少し時間があったため、レスポンシブウェブデザインに対応してスッキリ表示させてみたところ、その直後からアクセス数が急増する結果になっています。

約３割程度のアクセスアップに繋がったのですが、これまで「display:none」で非表示にしていた影響が大きかったのかもしれません。

この「display:none」のどの程度までがだめで、どの程度までならよいのかは不明ですが、当サイト運営者の感覚ではグローバルナビゲーション全体をカットさせるのは避けるべきと考えています。表示しきれないリストタグの１部分のみを省略するのは有りかもしれませんが、<nav>全体を非表示にするような設定は避けた方がよいでしょう。

この結果を踏まえ、管理している他の全てのサイトでも表示させるように変更したのですが、今月はアフィリエイト報酬が急増する結果になっています。

「display:none」のたった12文字を記載していたことにより、今までどれだけのサイト収益をふいにしてきたのかは考えたくもないですが、できるだけ、PCサイトとスマホでは同じ表示をさせておくことをおすすめします。

先日、約３年ぶりにMovableTypeにログインしようと思ったのですが、ユーザーIDとパスワードは合ってはいるものの、プログラムのエラーが発生して管理画面にログインできませんでした。

エラー情報を検索しても詳細が分からず、そこから先へと進めなくなってしまいました。

管理画面にログインさえできれば、バックアップファイルをダウンロードしたのち、MovableTypeを再インストールしなおして対応することもできますが、ログイン自体ができなくなると手の打ちようがありません。

そこで、エラーコードを眺めてみたところ、「plugins」や「addons」のフォルダ内に入っているファイルでエラーが発生していたようなので、この「plugins」や「addonss」のフォルダ名を一時的に変更してアクセスできないようにしてみました。

すると普通にログインできるようになったため、管理画面からバックアップしたのち、再度、MovableTypeをインストールすると普通に使えるようになりました。もし旧バージョンを使用していた場合、最新バージョンにアップグレードするのでもよいかと思います。

最新バージョンにアップグレードする場合には、ログインする必要はないと思いますので、どちらかというとそちらの方が簡単かもしれません。管理画面にログインできなくなってお困りの場合には、試してみることをおすすめします。

現在のレンタルサーバーは「Let's Encrypt」に対応していないため、MovableTypeを新しいサーバーに移転することにしました。

格安でもMovableTypeに対応している会社はありますが、格安サーバーの場合は4千以上あるCMSファイルをFTPでアップロードする際に頻繁にエラーが出て中断してしまうため、ある程度のスペックのサーバーでないと難しいかと思います。最近はWordPressに特化したレンタルサーバーも多いですが、SSD対応というよりも、CPUやメモリがプアだと何度もアップロードをやり直すはめになるかもしれません。

手順については、まずは移転をする前にMovableTypeを最新バージョンにアップグレードしておきます。このバージョンが合っていないとインポートする際に何かと面倒です。

最新バージョンにしたら旧サイト側で「サイトをエクスポート」をしておき、「テンプレート」もエクスポートしておきます。また、「プラグイン」などもエクスポートしておくとよいでしょう。

次に、とりあえずはHTMLやCSSファイルなどを新サーバーにアップロードして、ネームサーバーを切り替えてもサイトはそのままの状態で表示されるようにします。

サイトが新サーバーに切り替わった後、MovableTypeも移転することになりますが、システムについては移転というよりも新しくアップロードする形になるかと思います。

あとはエクスポートしたサイトのファイルを「import」ディレクトリにアップロードして、システムの箇所からインポートボタンを押せば移転が完了します。この際にバージョンが一致してないとインポートすることができないため、最初の段階で最新バージョンにアップロードしておくことが必要になります。

このインポートをする際、旧サーバーと移転先のサーバーではファイルのパスが異なるため、新サーバーにて適当に新規のサイトを作成してパスを確認しておくとよいでしょう。このファイルのパスは作成途中の段階で分かるため、実際に作成する必要はないかと思います。