Movable Type 6.2.4でSEO Tuning Eigerを使ったレスポンシブデザインに対応する手順を詳説

投稿日:



160509_1.jpg

はじめに

Movable Typeを最新版の6.2.4にアップグレードするに伴い、ブログデザインの刷新を行いました。

ついにレスポンシブデザインに対応し、携帯端末からも見やすくなりました。

というのも、2015年4月21日からGoogleの検索結果のランキング要素にモバイルフレンドリーかどうかが考慮されるようになったのですが、なかなか忙しくて対応できずにいました。

Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。

出典:Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに

その後、ブログへの訪問者減少傾向が見られたため、今回ようやく重い腰を上げることになりました。

Movable Type でレスポンシブデザインに対応するのは予想以上に簡単でした。

SEO Tuning Eigerというテーマを適用すれば、非常に簡単に対応できます。

2~3時間あればあなたのブログもあっという間にレスポンシブデザインに!

Movable Type 6.2.4への更新

まずはMovable Type 6.2.4へ更新を行いました。

公式HPからZIPをダウンロードし、サーバーへアップロードします。

https://www.sixapart.jp/inquiry/movabletype/personal_download.html

サーバー上で解凍し、解凍してできたフォルダ(MT-6.2.4)内に旧フォルダ内にあるmt-config.cgiをコピーします。

あとはMT-6.2.4に外部からアクセスできるようシンボリックリンクを貼りましょう。

例) $ ln -s /home/user/MT-6.2.4 /home/user/html/mt-conf

外部から設置したフォルダにアクセスします。

例) http://mydomain.com/mt-conf

あとは画面の指示に従って設定を完了させてください。

何か困ったら、下記の公式ヘルプを参照するようにしましょう。

http://www.movabletype.jp/documentation/

SEO Tuning Eiger のインストール

drk7.jpさんのページからseo_tuning_eiger.zipをダウンロードしてください。(ページ中段)

解凍したフォルダのseo_tuning_eiger/static/images 配下の画像ファイル(ロゴ、バナー、顔画像、h1-h3)を好みの画像に差し替えてください。

このフォルダをMT-6.2.4フォルダのthemeフォルダ内にコピーしてください。

そうすると、管理画面のテーマにseo_tuning_eigerが現れますので適用ボタンを押してください。

160509_2.jpg

管理画面のウィジェットから各テンプレート編集を行います。

160509_3.jpg

Google Analytics、忍者ツールズのソーシャルボタン、AdSenseや楽天などの広告タグを自分のものに貼り換えてください。

160509_4.jpg

実際に表示させたいウィジェットを選択して順番に並べます。

160509_5.jpg

この状態でほぼ完成です。

サイトの再構築をしてみると、記事タイトル左に出るはずのh1ロゴが表示されません。

160509_6.jpg

スタイルシートを修正する必要がありますので、テンプレートの「全cssマージ&minify」を選択して編集します。

160509_7.jpg

theme_static/seotuningeiger/images/* となっている箇所をtheme_static/seo_tuning_eiger/images/* に修正してください。(6か所)

これでかなりいい感じのデザインになりました!

サイトタイトル背景がデフォルトですので、そのうち修正したいと思います・・・



ブログランキング・にほんブログ村へ  ブログランキング・にほんブログ村へ

- スポンサードリンク -