フリーソフトやChrome拡張機能の使い方、ゲーム攻略、漫画感想など雑多な内容。

1 Comments
常時SSL化のついでにPCやスマホなどの画面サイズに応じて表示が変化するレスポンシブデザインのテンプレートに変更。何かと良いこと尽くめだしもっと早く変更しておくべきだった。
スマホ用テンプレートが要らないので管理が楽。
・PCとスマホでブログのデザインを統一。
・スマホ利用者でもタグ検索が可能。
・スマホ用ページ下部の注目記事やランキングが表示されない。

★レスポンシブデザインのテンプレートを選択

まずテンプレートからレスポンシブデザインのものを選ぶ必要があるが、SSL化に伴うURL正規化ができているのはvanillaiceさんのテンプレートぐらいだと思われる。

URL正規化は以前、検索結果にスマホ・携帯のページが出てこないようにするで自力でやったが今更あの作業をやる気にはならないのでテンプレートを拝借。

当ブログは以前と同様のシンプルなデザインを目指して「Generic」に手を加えたものを使用中。
Generic - FC2ブログテンプレート - テンプレート



★PC・ガラケー用テンプレートの無効化

レスポンシブデザインのテンプレートを導入したらスマホやガラケーのテンプレートは不要なので、サイドバーの設定からそれらを無効化しておく。

レスポンシブデザイン 01
環境設定 → ブログの設定 → 「スマートフォン版の表示設定」を無効にして更新。

レスポンシブデザイン 02
環境設定 → その他の設定で「ケータイでの閲覧」をPCテンプレートに変更して更新。





★テンプレート変更箇所一覧

以下の内容は当ブログのテンプレートに色々修正を加えた場所のメモ。

「Generic」は元々シンプルなテンプレートだが個人的に不要な機能はなるべく削っておいた。



◆トップページ

<title>トップページ - <%blog_name></title>

ブログのトップページでブラウザタイトルバーに「トップページ - ブログ名」と表示されて邪魔だったので、その部分を消してブログ名だけ表示されるようにした。



◆アクセス解析

<!-- アクセス解析はここから -->
<!-- ここの間 -->

アクセス解析の場所が指定してあるのでそこにGoogle AnalyticsとFC2アクセス解析を設置。

デベロッパーツールでFC2アクセス解析の警告が出ているが自身のアクセスを除外しているのが原因っぽい?



◆既存のSNSボタンを削除

<!-- 注)記事下SNSシェアボタン不要の方ここから削除 -->
<!-- 注)記事下SNSシェアボタン不要の方ここまで削除 -->

最初から設置してあるSNSボタンを削除。



◆SNSボタン設置

この項目は我流でやっていることなのでスルー推奨。

▼設置場所

<!--------------------▼SNSボタン一覧▼-------------------->
<!--permanent_area-->
<ul class="sns_b">

<!-- ◆Twitterボタン -->
<li>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title>" data-lang="us">Tweet</a>
</li>

<!-- ◆Facebookシェアボタン -->
<li>
<div class="fb-share-button" data-href="<%topentry_link>" data-layout="button_count"></div>
</li>

<!-- ◆はてなブックマークボタン -->
<li>
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" title="<%topentry_title>"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加"width="20" height="20" style="border: none;" /></a>
</li>

<!-- ◆Pocketボタン -->
<li>
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en" data-save-url="<%topentry_link>"></a>
</li>

</ul>
<!--/permanent_area-->
<!--------------------▲SNSボタン一覧▲-------------------->

<!--/topentry_tag-->の下にSNSボタン設置。Twitterボタンはだいぶ前にカウントされなくなったので{count}部分を消した。

Twitterボタンの表示が「Tweet」ではなく「ツイート」になったのでdata-lang="us"で英語指定。

<!--permanent_area--><!--/permanent_area-->を入れることで個別記事でのみSNSボタンを表示しTOPページを軽くする。以前はTOPページの表示に5~6秒かかっていたが非表示なら3~4秒程度で済む。


▼スクリプトの設置場所

<!--------------------▼SNSボタンスクリプト一覧▼-------------------->
<!-- ◆Twitterボタンスクリプト -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async = true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<!-- ◆Facebookシェアボタンスクリプト -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- ◆はてなブックマークボタンスクリプト -->
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

<!-- ◆Pocketボタンスクリプト -->
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
<!--------------------▲SNSボタンスクリプト一覧▲-------------------->

</body>の直前にスクリプトを設置。各種SNSボタンのスクリプト部分だけ別にして読み込みを最後にすれば多少は軽くなる。


▼CSS

/*--------------------▼SNSボタンcss▼----------------------*/
.sns_b {
font-size:0.9em;
padding: 8px 0px 0px;
}

.sns_b li {
display:inline-block; /*入れないとボタン配置が縦長になる*/
vertical-align:top; /*ボタン位置を上揃え 中央揃えだとpocketが1px上にずれる*/
margin-right: 0px; /*ボタン右側の余白を指定*/
}
/*--------------------▲SNSボタンcss▲--------------------*/

cssは最下部に設置。以前は使っていたが不要になった余分な部分は削除。



◆ABOUT(グローバルナビゲーション)

<a href="https://tokitamaroku.blog.fc2.com/blog-entry-1.html">ABOUT</a><!-- 注)予備リンク, ABOUTのテキストを適宜修正+リンクアドレスを # と差し替え, 不要の方この一行削除 -->

グローバルナビゲーションの「ABOUT」のリンクを当ブログについて書いてある記事に変更。



以下は個別記事に関する内容。

◆「個別記事ブラウザサイドページ送り」を削除

<!-- 個別記事ブラウザサイドページ送り(カテゴリ間移動) 不要の方ここから削除 -->
<!-- 個別記事ブラウザサイドページ送り(カテゴリ間移動) 不要の方ここまで削除 -->

記事の最下部辺りに関連記事あるしスクロール中に誤爆の可能性も考えて消しておいた。スクリプトの方もあるので計2箇所を削除。



◆「個別記事用ページナビ」を削除

<!-- 個別記事用ページナビここから -->
<!-- 個別記事用ページナビここまで -->

個別記事の最下部にある前後の記事への移動用ナビを削除。



◆ブラウザタイトルバーの表示内容

▼修正前
<title><%sub_title> - <!--topentry--><%topentry_category><!--/topentry--></title>
▼修正後
<title><%sub_title> - <%blog_name></title>

個別記事でブラウザのタイトルバーが「個別記事名 - カテゴリ名」になっていたので「個別記事名 - ブログ名」に変更。



◆「Posted by 管理者名」を消す

<!--permanent_area-->
<div id="entry-author" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<div id="publisher-image" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="<%image>" alt="<%author_name>">
<meta itemprop="url" content="<%image>">
<meta itemprop="width" content="200">
<meta itemprop="height" content="auto">
</div>
<div id="entry-author-dv">Posted by<span itemprop="name"><%author_name></span></div>
</div>

<!--/permanent_area-->

関連記事とコメント欄の間にあるやつ。permanent_areaの間の部分を全部消す。



◆「続きを読む」クリック時の表示位置を変更

<a href="<%topentry_link>#postscript">続きを読む<i class="fa fa-arrow-circle-o-right faa-pulse animated-hover" aria-hidden="true"></i></a>

#postscriptの部分を消す。



◆コメント投稿

<h3 class="another-title">Leave a reply</h3>

コメント投稿枠の上に「Leave a reply」と書いてあるが別に無くても投稿枠というのは分かるので文章を消す。

<label for="himitu">管理者にだけ表示を許可</label>

コメントを書き込むときのチェックボックスが「SECRET」だと分かりづらいので2箇所を「管理者にだけ表示を許可」に変更。



◆最新記事のタイトル横に表示される「New!」を消す

<!--not_edit_area-->
<script>function nw(n,e,a,w){var t=new Date,s=24,c=new Date(n,e-1,a,w);36e5*s>t-c&&document.write('<span class="new">New!</span>')}</script>
<!--/not_edit_area-->

</head>の上にあるnot_edit_area内のスクリプト部分を消す。

<script>nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')</script>
<script>nw('<%titlelist_year>','<%titlelist_month>','<%titlelist_day>','<%titlelist_hour>')</script>

上記だけだとデベロッパーツールでエラーが出たので以下のスクリプトも削除。少し短いスクリプトは5つ同じものがある。



◆サイト説明文をTOP以外でも表示

<!--not_permanent_area--><!--not_category_area--><!--not_titlelist_area--><!--not_search_area--><!--not_date_area--><!--not_edit_area--><!--not_tag_area-->
<div id="site-description"><%introduction></div>
<!--/not_tag_area--><!--/not_edit_area--><!--/not_date_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_category_area--><!--/not_permanent_area-->

<div id="site-description"><%introduction></div>の前後の_areaを全て消す。

#breadcrumbs {
margin-top: 20px;
width: 100%;
max-width: 850px;
color: white;
line-height: 1.5;
font-size: 12px;
}

サイト説明文とパンくずリストの間に余白がなかったので、margin-topを0から20pxに変更。



◆管理人コメント

/* 管理人コメント */
.nameRYO:before {
background-color: rgb(148,170,201);
}

CSS最下部に追加することで管理人コメントと訪問者コメントの色を分ける。名前の後に(管理人)と入れたかったがFC2ブログで設定している名前と違うと駄目っぽい。



◆スマホ用関連記事

@media screen and (max-width: 567px) {
#fc2relate_entry_thumbnail_area .relate_dd {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul {
width: 100%;
overflow: auto;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul li {
width: 290px;
}
}

スマホで見たときの関連記事が横にスクロールしないと見られない状態だったので、2つ目のwidthを1470px→100%に変更し関連記事が縦に並ぶようにした。
関連記事

Comments 1

There are no comments yet.
strider  
たいへん参考になりました。

こんばんは、はじめまして。
FC2テンプレートの「Generic」で検索しててたどり着きました。
私もテンプレを「Generic」に変更しようかと思い、色々と触っているところなのですが、
触りたい部分が非常に共通していて、たいへん参考になりました。
有難うございました。

2017/12/31 (Sun) 21:02 | EDIT | REPLY |