ドロワーメニューとアクセス解析、JSのバッティング

MTネタではないですが。

最近、スマホサイトを担当しているのですが、SEO担当者に「ドロワーメニューの構造がSEO的に評価が高い」と言われ、作ってみました。

参考サイトはこちら
「jQueryを使ってドロワーメニューを実装する」

構築はわりとカンタンだったのですが、

アクセス解析タグを入れたら、画面が真っ白になってしまった!!!
うわー。。。

JavaScript同士のバッティングだと思い、いろいろやってみました。
アクセス解析タグは<body></body>間に入れると指示があったので、
まーいろいろ。やってみました。

アクセス数は、次の日になってみないと結果が分からないので、手を加えては次の日を待つ。そのくり返し。
辛い日々だった~。

そして、こんな記事を見つけ、

「トラッキングコードをどこに埋め込むか、のおさらい」

上記によると、<body></body>間に入れると指示があっても、<head></head>内に入れる必要がある場合もあると言うことで。。
そこで<head></head>内に入れてみたら、次の日!

出た!!!

いやー。感動したー。

新しい投稿に"new!"を、一定期間表示

記事の新着マークがあると、新鮮度がぐんとアップしますよね。
SEO的にも、ユーザビリティ的にも、効果は高いです。

MTで新着表示をつけてみたので、ご紹介します。

①</head>直前に以下を記述

<script type="text/javascript">
<!--
function newM(y,m,d)
{
newday=new Date(y+"/"+m+"/"+d);
oldday= new Date();
n=(oldday-newday)/(1000*60*60*24);
if (n <=3)document.write("new!");
}
//-->
</script>

これで、投稿3日以内に"new!"マークがつきます。
日数を調整したい時はif (n <=3)の数字をカスタマイズします。

②new!マークを入れたい場所に以下を記述します。

<script type="text/javascript">newM(<$mt:EntryDate format="%Y,%m,%d"$>)</script>

------------------
①の記述をちょっとカスタマイズ。
<span>でスタイルシートを指定することが出来る、<img ~>タグで画像アイコンも対応可、ということですが、私が今回触ったコードはかなり複雑にスタイルシートが敷いてあって、新しいスタイルを効かすための作業がめんどくさかったので( ̄Д ̄;)、Javascriptに直に書き込みました。ちょっとした指示だったので。

<script type="text/javascript">
<!--
function newM(y,m,d)
{
newday=new Date(y+"/"+m+"/"+d);
oldday= new Date();
n=(oldday-newday)/(1000*60*60*24);
if (n <=3)document.write("&nbsp;new!".fontcolor("red").fontsize(2));
}
//-->
</script>

これで、文字色赤、フォントサイズ2に指定OKです。

カテゴリ一覧の並び順ソート

お久しぶりです~。
サイドバナーのカテゴリ一覧の並び替えをする機会があったので、メモです。

そのカテゴリは、20××年××月度という月くくりで作成していったもので、デフォルトだと古い順から並んでいってしまいますので、

<mt:TopLevelCategories>


<mt:TopLevelCategories sort_order="descend">

を追加しました。

<mt:SubCategories>にも有効だそうな。
参考ページはコチラです。

レスポンシブWEBデザイン!

お久しぶりの書き込ですが、何故なら、最近MTは更新くらいしか触ってないので。

Wordpressを使うことが多くなりました。。。ちょっとした構築はそっちの方が便利。
でも、大きなカスタマイズをする時はMovable Typeの方が好み。なので、これからもMTカスタマイズしていくとおもいます。

と、いいながら。

今日の話題はPCとスマホ同じファイルを使って表示する、そう。

レスポンシブWEBデザイン

についてです。

仕事でもう何回もレスポンジブ対応してみて、だんだんどうやればやりやすいかわかってきました。

とにもかくにも
head内に入れるものとして



<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
<!-- ※デフォルトのスタイル(style.css) -->
<link rel="stylesheet" media="all" type="text/css" href="./css/smart.css" />
<!-- ※スマートフォン用のスタイル(smart.css) -->
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="./css/ie.css">
<![endif]-->


まず、viewportのmeta
普通のPC向けのcssと、スマホ向けcss。
必要があればタブレット向けも作ります。

それから重要。
IE対応。

そして外部CSSファイルの用意。
PC向けのCSSは
-----------------

@charset "utf-8";

@media screen and (min-width: 481px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}

/*-------------481px以上 pc用レイアウト--------------*/

}


-----------------
スマホ向けは


@charset "utf-8";

@media screen and (max-width:480px){

img{
max-width: 100%;
height: auto;
width /***/:auto; 
}

/*-------------480px以下 スマホ用レイアウト--------------*/

}


で、
@media
がIEでは認識されないので、普通のCSS、「./css/ie.css」を用意するわけです。

進め方としては、
「このあとスマホ対応を考えていく作業があるぞ~」
と思いながら先にPCを組み立てていくのが楽です。

別ブログのRSSを表示させる方法

前に類似のエントリーをした記憶がありますが、今回、アメブロの記事を引っ張ってきました。
アメブロの記事の下に広告が入り、1つの記事としてRSSでは呼び出してしまうので、それを防ぎたいと思います。

アメブロのRSSアドレスをオレンジのRSSアイコンをクリックして取得します。
その後以下のページへ

テキストボックスに先ほどのRSSアドレスを入力します。

表示される一覧のなかで広告が削除されているのを確認して、
「Get as RSS」をクリック。
表示されたページのURLをコピー、phpファイルの中に記載します。

記載方法はこちらが分かりやすいです。

私はphpファイルを本文にインクルードで読み込ませました。
<!--#include virtual="/magpierss/feed.php" -->

文字化けしてしまう場合は、rss_fetch.inc(357-359行目)を

if ( !defined('MAGPIE_OUTPUT_ENCODING') ) {

define('MAGPIE_OUTPUT_ENCODING', 'ISO-8859-1');

}

から

if ( !defined('MAGPIE_OUTPUT_ENCODING') ) {

define('MAGPIE_OUTPUT_ENCODING', 'UTF-8');

}

へと更新する。


rss_fetch.incに上記記載がない場合はバージョンが古いのかもしれません。
magpierssは0.72.tar.gzをダウンロードしてください。
1  2  3  4  5  6  7  8  9  10  11

▲トップへ戻る

* FEED


presented by 地球の名言