2018-07-27

FC2ブログ - レスポンシブテンプレート全文表示タイプ - Belong

sho

	テンプレート名	説明	幅px メインサイド	背景色全体記事欄サイド	リンクの色記事欄サイド	グローバルナビゲーション
13 〇	Belong ↑プレビューとダウンロード	専用記事 ↑説明記事	820 右300	白白白	灰灰	追尾

レスポンシブテンプレート全文表示タイプBelongのカスタマイズの記録
（2018.07.16現在、このブログはレスポンシブテンプレート全文表示タイプBelongが適用されています）

アクセス解析研究所の解析タグ

アクセス解析研究所の解析タグをHTML編集の＜body＞の直下の
＜!-- アクセス解析はここから --＞
＜!-- ここの間 --＞
の間に置いた。

Search Console - 推奨: HTML タグ

1. 以下の meta タグをコピーして、サイトのホームページにある <head> セクション内の、最初の <body> セクションの前に貼り付けます。
＜meta name="google-site-verification" content="*******************************************" /＞

新着New!マーク

Ctrl+Fキー検索
s=24
htmlソースの上のほうに1箇所あります。
赤字部分が表示時間の指定で、時間単位です
24で24時間表示。
10日に設定されるのであれば 240 に変更。
私はデフォルトの24のままにしておきました。

SNSリンクを取り外しました

＜!-- 注)SNSリンク # をアドレスに置き換え不要行は削除, 全て不要の方ここから削除 --＞
　（記載省略しました）
＜!-- 注)SNSリンク # をアドレスに置き換え不要行は削除, 全て不要の方ここまで削除 --＞

リンクが掛かっている文字の色の変更

リンクが掛かっている文字の色が灰色となっているのを、全てGoogle検索のリンク色にしたい。

a:linkというのは、未訪問（未読）のリンク。
a:visitedは、訪問済み（既読）のリンク。
a:hoverは、ポイント時の（マウスポインターを合わせた時の）リンク。
a:activeが、選択中のリンク、つまりクリックした時のリンクです。

Google検索のリンク色

	未訪問（未読）	訪問済み（既読）（visited）	マウスオーバー（hover）
十六進	1a0dab	660099	1a0dab
RGB	rgb(26,13,171)	rgb(102,0,153)	rgb(26,13,171)

スマホにはマウスオーバーがないので注意

a {
text-decoration: none;
color: rgb(150,150,150);/* 注)基本リンク色 */
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

a:hover {
color: rgb(51,51,51);
}

↓

a {
text-decoration: none;
color: rgb(26,13,171);/* 注)基本リンク色 */
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

a:visited {
color: rgb(102,0,153);
}

a:hover {
color: rgb(26,13,171);
}

Google検索結果のリンクの色では未読とマウスオーバーは色は同じですが下線が付くかどうかの違いがあります。

上記を実行しました。一応、青いリンク色になったのですが、パソコンで見ると強度の老眼の私には未読と既読に色の違いがあるのかどうか判りません。また、マウスオーバーしたら勝手に下線が付いてるし、色も青いのもあれば黒いのもあったりします。
しかし、スマホ（AQUOS SERIE SHL25）で見ると、かなり上品な色で、未読と既読の区別がはっきり判る青いリンク色になっていました。
背景が真っ白だから？
パソコン用も真っ白にすればあなんですが、え、レスポンシブテンプレートなのに、そんなことできるの？？？
まあ、パソコンがニコチンで汚れていると言う可能性もあります。。。...(-_-;)

Google先生はRGBや16進数カラーコードの色も教えてくれる | iwb.jp

vanillaice000 リンク色変更 Belong - Google検索

vanillaice000 リンクの色 - Google検索

↑上記カスタマイズ済み
↓下記カスタマイズ未済

テンプレートBelongで他にやりたいカスタマイズ

画面の一番上のグローバルナビゲーションがスクロールダウンしても常に表示されていますが、これをスクロールダウンすれば普通に見えなくなると言う様にしたいと思っています。

ABOUTをクリックすれば、FC2ブログの環境設定のプロフィールが表示されると思っていましたが、そうではないらしい。

vanillaice000 グローバルナビゲーション - Google検索

記事送りなどのPREV NEXTは当然有って然るべきものですが、ここに記事のタイトルを表示するのは、、、,,,。
グーグル検索で想定外のキーワードで来訪されることが有りますが、どうもここをGoogleさんが重視してる時が多々あるような。。。...？

vanillaice000 PREV NEXT - Google検索

vanillaice000 個別記事ブラウザサイドページ送り(カテゴリ間移動) - Google 検索
　カテゴリ間移動＝カテゴリー内移動 or 別のカテゴリーとの移動？

↓テンプレートBelongのデフォルトでの注目項目

注)SNSリンク # をアドレスに置き換え不要行は削除, 全て不要の方ここから削除 -->
注)スマホ版誘導ボタン必要な方この行削除 -->
個別記事ブラウザサイドページ送り(カテゴリ間移動) 不要の方ここから削除 -->
注)スクロールアンカー不要の方ここから削除 -->
個別記事ブラウザサイドページ送り(カテゴリ間移動) 不要の方ここから削除 -->
注)FC2検索バー非表示の方ここから削除可 -->

グローバルナビゲーションここから -->
注)関連記事タイトル変更はここです

ホーム以外は、新しいタブで開いたほうが、訪問者にとって
ユーザビリティが高く、滞在時間も長くなります。
新しいタブでサイトを開かせるにはURLの後ろに半角スペースの「target=”_blank”」を付け足します。

その他雑多な情報
Belong以外のテンプレートに関する情報を含みます。

？

ブログの標準的な文字の大きさ - Google検索
記事のフォントの標準的な文字の大きさ14pxか16PXなので、これより大きくまたは小さくするのは来訪者に任せた方が良い。。。...らしい。

ブログタイトルが英字の方で大文字縛りをなくしたい

注)ブログタイトルが英字の方で大文字縛りをなくしたい場合この一行削除

　実行したら目的は達しましたがブログタイトルの文字の大きさが小さくなってしまいました(-_-;)

個別記事のタイトルの左寄せ

.element-title {
でCtrl+F(Windows)/ Command+F(Mac)キー検索。
text-shadow: 2px 4px 3px rgba(0,0,0,.1);
の直下に以下の内容を追加。

text-align: left;

続いて
header-info {
で検索。
font-size: 1.2rem;
の直下に以下の内容を追加。

text-align: right;

タイトル部分を小さくする

ヘッダー自体の大きさ変更は、
#banner
を検索し、
padding: 150px 0 250px;
150pxがヘッダー上辺からブログタイトルまでの距離、250pxがヘッダーブログ説明文とヘッダー下辺までの距離ですのでそれぞれ調整してください。

#banner {
margin: auto;
width: 100%;
background-color: black;
padding: 150px 0 250px;
text-align: center;
}

↓

#banner {
margin: auto;
width: 100%; background-color: black;
padding: 50px 0 150px;
text-align: center;
}

フォントを大きくしたい

フォントを大きくしたい件?
/* 注)全体背景色 (approx)White Smoke */
でCtrl+F(Windows)/ Command+F(Mac)キー検索して頂きますと、CSSソース内(管理画面下段)に1箇所ヒットします。
その直近の
font: 13px/1.7 'Roboto', '游ゴシック'?省略
赤字部分が記事内のフォントサイズ指定ですので、大きい数字に変更してください。

文字の変更・背景の変更 | マニュアル | FC2ブログヘルプ

フォントの大きさ変更

> 記事内フォント大きさ変更

以下の内容をCSS末尾に追加。

.inner-contents {
font-size: 数値px;
}

単位はremでもpxでもOKです。
remを使用する場合は
13px = 1.3rem, 14px = 1.4rem
といったように小数点が必要です。

---------

> サイドメニューのフォント大きさ変更

#secondary {
で検索、その括りの中の
font-size: 1.3rem;
赤字の数値を変更してください。
単位もろとも消去してのpx指定も可。

① アーカイブ・カテゴリ検索の削除
Ctrl+Fキー検索

<div id="select-wrapper">

こちらを目印に</header>のすぐ上の</div>までを削除
スクリーンショットを見ながらどうぞ　↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/aoirffwa_zpssp9qegyg.jpg

② 記事タイトル下インフォを記事下へ移動
Ctrl+Fキー検索

こちらは以下のコメント欄が同じ要件ですのでご参照ください。

http://vanillaice000.blog.fc2.com/blog-entry-323.html#comment1525

予備リンク＝RSS？

vanillaice000 Edit - Google検索

vanillaice000 - Google検索

vanillaice000 レスポンシブテンプレート全文表示タイプ - Google検索

Webテク倉庫 - レスポンシブ
FC2｢共有テンプレート追加｣ vanillaice000さん（＝Akiraさん）の『 Out-of-style 』

The other way round

webのあれこれ - MFIローンチの前にPC版とSP版の表示確認をしましょう

やったぁ～～～ヽ(^。^)ノ - パソコン＆iPhone
　ついにわたしのブログも【保護された通信】になりましたぁ～SSL化

Am I Responsive?

GTmetrix
　PageSpeed Score　　F(37%)
　YSlow Score　　　　E(51%)
　Fully Loaded Time　10.3s
　Total Page Size　　1.68MB
　Requests　　　　　 212

モバイルフレンドリーテスト - Google Search Console
テスト日時: 2018/07/13、01:47 このページはモバイルフレンドリーです
モバイルユーザビリティ
ユーザビリティの問題問題のあるページ
1 コンテンツの幅が画面の幅を超えています 13→6
2 クリック可能な要素同士が近すぎます 11→5
3 ビューポートが設定されていません 4→5
4 テキストが小さすぎて読めません 4→5
5 互換性のないプラグインを使用しています 2→0

レスポンシブ Responsive 全文表示タイプカスタマイズ
変更取替比較選ぶ探す覚書メモ
FC2ブログ - レスポンシブテンプレート全文表示タイプ - Belong

FC2ブログのレスポンシブテンプレート全文表示タイプ（作者vanillaice000さん＝Akiraさん）の一覧表