サイト作成メモ #10
_{2015年3月～2017年3月まで運営したFC2ホームページ作成メモ}

100 モバイルフレンドリーテスト

レスポンシブ対応サイトにリニューアルのしたのでモバイルフレンドリーテストを受けたら問題なしだった。下記の画像は不合格の時のものだ。

モバイルフレンドリーテスト

99 jquery.simplePagination.js

このページが重たくなったのでjQueryプラグインのページネーション「jquery.simplePagination.js」を導入してみた。

追記 その後、削除した。

<link href="../edius/xxxxxx" rel="stylesheet" />
<script src="../edius/xxxxxx"></script>
<script src="../edius/xxxxxxx"></script>
<script>
$(function(){
    $(".pagination").pagination({
        items: 5,/*ページ数*/
        displayedPages: 3,/*ページネーションに表示するページ数（最低3）*/
        cssStyle: 'light-theme', /*スタイル*/
        onPageClick: function(currentPageNumber){
            showPage(currentPageNumber);
        }
    })
});
function showPage(currentPageNumber){
    var page="#page-" + currentPageNumber;
    $('.selection').hide();
    $(page).show();
} 
</script>

98 syntaxhighlighter_v3のコードの一行目が改行される

原因を探ったら「Bootstrap.min.css」の下記のCSSコードを削除すると不具合が解消されることまでは分かった。ただ、このコードを削除すると広告の位置がずれてしまうのでsyntaxhighlighter_2.1.382に戻したら解消したので暫くこのままで行くことにする。

@media screen and (min-width:768px){
	.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
		width: 30px;
		height: 30px;
		margin-top: -15px;
		font-size: 30px; 
	}
(中略)
}

97 検索結果が途中で切れる

検索結果を表示するページを作成するとサイトデザインの設定した領域内に無事に表示されるようになったが、下部の部分がどうしても切れ切れたり切れなかったりする。色々と調べると上部に広告が表示される時に見切れてしまう。こちらのサイトを参考に広告コードに高さを指定するがそれでは解消させず。

var googleSearchFrameHeight = 1210;

CSSも色々と弄ってみたが解消しなかったのでサイトデザインが少し損なわれるが下部の広告との距離をheightを1560pxにして何とか解消させた。

#cse-search-results {
max-width: 800px;
height: 1560px;
}

96 検索結果ページをサイト内に埋め込む

どこかのサイトで検索結果をサイト内に埋め込んで利用しているところがあったのでやってみたかったがやりかたが分からずに放置してたがようやくやりかたが分かった。

やり方はGoogle Adsense の広告設定ページにある「新しいカスタム検索エンジン」で作成画面に「検索結果」という項目の「iframeを使用して自分のウェブサイトに表示」にチェックを入れて検索結果を表示するページのアドレスを入力すると設定できる。尚、検索結果を表示するページを用意する必要があり、表示領域の幅は795以上必須。

95 レスポンシブWEBサイトに対応

Adsense推奨であるレスポンシブWEBサイトに対応するためにサイトを全面的にリニューアルすることにした。変更内容はデザインのほかにYouTubeの埋め込み動画の可変サイズ化、トップメニューの表示方法、検索結果ページの埋込化、画像の表示方法をズーム式に変更、CSSのhoverアニメーションの導入などなど。、一からデザインするには時間が掛かりすぎるし、スキル的に無理なので「Start Bootstrap」のBlog Homeというテンプレートを元にカスタムマイズして使用。それでも100記事近くあったのでその全記事を修正するのに２週間ほど掛かった。(;´д｀)ﾄﾎﾎ…

作業内容はまずBootstrapのHTMLテンプレートを元に取り敢えず１ページ作成し、そのページを元にダイナミックWEBテンプレートを作成。Pxpression Web 4で新旧両サイトを複数開き、旧サイトからダイナミックWEBテンプレートの新規ページへ記事や画像をコピペするといった感じ。

94 Google Adsense 非ホスト型アドセンスアカウントを取得

2015年6月末、非ホスト型アドセンスアカウントを取得するために某ブログにて10記事投稿後に申請し、某ブログに広告コードを貼り付ける。約20時間後に広告が表示されたことでGoogle Adsense 非ホスト型アドセンスアカウント取得したことを確認。

93 サイトマップを開閉式にした

サイトマップがダラダラと長く見辛かったので下位の階層部分を開閉式にした。jQueryで記載したがカテゴリーごとに開くようにしたので結構手間が掛かった。

追記 その後、削除した。

$(function(){
	$(".open_close_basic").click(function(){
		$(".second_list_basic ul li").fadeToggle(1000);
	});
	$(".open_close_titler").click(function(){
		$(".second_list_titler ul li").fadeToggle(1000);
	});
	
	(中略)
	
	$(".open_close_videofilter").click(function(){
		$(".second_list_videofilter ul li").fadeToggle(1000);
	});
	$(".open_close_about").click(function(){
		$(".second_list_about ul li").fadeToggle(1000);
	});
}); 

92 Expression Web 4 のバックアップ

今更ながらではあるがExpression Web 4で使用するスニペット(よく使うコードの定型文みたいなもの)などのファイルをローカルHDDとOneDriveにバックアップした。下記はWindows7での保存場所。

C:\Users\xxxxxx\AppData\Roaming\Microsoft\Expression\Web 4\mySnippets

91 パブリッシュしてからフリーズしなくなった

パブリッシュ(サイトを公開)した頃からまったくフリーズしなくなった。最初はページが増えてサイトの容量が増え出した頃に発生したのでそれが原因かもと思っていたがそれではなかった。結局原因は掴めなかったがどれかのファイルに何らかの不具合があったために起こっていたような気がする。