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

-
syakoudancetoyama
FC2ブログ - レスポンシブテンプレート全文表示タイプ - Generic
テンプレート名 説明 幅px
メイン
サイド
背景色
全体
記事欄
サイド
リンクの色

記事欄

サイド
グローバルナビゲーション
1 Generic

↑プレビューとダウンロード
専用記事

↑説明記事
810
右320

ヘッダー画像




薄青


定点


超シンプルです。トリッキーなものは一切入れていません。



グローバルナビゲーションが追尾するタイプのテンプレートではスマホで見た場合画面の最上部に常にグローバルナビゲーションが張り付いて、肝心の記事本文が表示される面積がただでさえ狭いのにより狭められるのが、私的には面白くない。(私の記事はビッチリ詰め込み型が多いので、今回はグローバルナビゲーションが追尾型でない定点的であるGenericを試してみることになりました。)

18/07/27「試させてください。」でダウンロード、即、適用中。
主にカスタマイズしたいことは「リンクの色の変更」と「背景画像を全て取り払う」です。
Genericはリンクの色が記事とサイドメニューで違うし、トップの背景画像を取っ払うも今まで成功したことがないので、今のところ、前途多難です(-_-;)



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



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

アクセス解析研究所の解析タグを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のままにしておきました。

この記事を更新する度にアップロード日付を新しくして行くので当分ずっと新着New!マークが点灯したままになると思います。



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

リンクが掛かっている文字の色が灰色となっているのを、全て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)

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



以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51
rgb(115,122,164) 基本リンク色 など
…いっこだけかい

115,122,164で検索したら12か所
rgb(115,122,164)で検索したら10か所
取り敢えず「注)基本リンク色」の辺りだけを修正してみることにしました。



a {
text-decoration: none;
color: rgb(115,122,164);/* 注)基本リンク色 */
-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);
}



これを実行したら
パソコンで見たら記事内のリンクは未読も既読も同じ紫色っぽいリンク色になった。
パソコンで思い切り古い日付の記事のリンクに色を見たら紫色っぽいのもあれば青色のものも有った。
何か失敗のような感じですが、ひょっとしたらパソコンが古い・汚いとか?
(カテゴリーに飛ぶリンクの色は灰色)

しかしながら、スマホで見ると
未読は青色で既読は紫色っぽいリンク色で明らかに未読と既読の区別が付きます。
スマホでは成功してるように見えます。
うーん(-_-;)なのですが、取り敢えずこうしておこうということにしました。

で、サイドメニューのリンク色は相変わらず灰色のままです。
(但し、楽天市場商品バナーのリンクは青色)
全部青色にするにはどこをカスタマイズすれば良い?
今後の私の課題にしておきます。

私の環境は
NECデスクトップ Windows 7 + Chrome
iPad iOS 11.0 + Mobile Safari
iPad iOS 11.2 + Mobile Safari
AQUOS SERIE SHL25 Android 4.4 KitKat + Chrome



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

vanillaice000 リンクの色 - Google検索

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



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

text-transformプロパティ
 none テキストを変換しない
 uppercase 全ての文字を大文字にする

ブログタイトルが英字の場合で小文字も大文字になってしまう原因にはいろいろあるみたいですが、
「Generic」の場合は「#blog-title」の所で「text-transform: uppercase;」と指定されてるのが原因と思われます。
従って、今回はここだけを「text-transform: none;」と打ち替えれば良さそうに思えます。
因みに「text-transform: uppercase;」を検索すると8か所もヒットしますが今回は最初のだけを修正します。
・・・成功したように見えます。



↑以上、2018/07/27現在、カスタマイズ済み
↓以下、カスタマイズ未済

(vanillaice000さんの他のテンプレートを試している時の記録や参考記事です。
 一部、Genericカスタマイズのために私の素人考えで書き替えてたりしています。
 このテンプレートの部分的なカスタマイズに成功する度に適宜修正して、「以上」の方に書き写して行くつもりです。)



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

グローバルナビゲーションのリンクの編集

グローバルナビゲーション=HOME INDEX ABOUT RSS LOG IN SEARCH

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

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



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

vanillaice000 PREV NEXT - Google検索

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



ヘッダー内の文字の色を白色から黒色に変更したい

#blog-title a {
color: white;/* 注)ヘッダー内ブログタイトルリンク色 */
}

#site-description {
margin-top: 20px;
width: 100%;
max-width: 850px;
color: white;/* 注)ヘッダー内ブログ説明文文字色 */
line-height: 1.5;
font-size: 1.2rem;
}

background-color: white;/* 注)ヘッダー内上部ナビゲーションハンバーガーボタンの色 */



???



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






ブログの標準的な文字の大きさ - 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



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ブログ - レスポンシブテンプレート全文表示タイプ - Generic



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



syakoudancetoyama
Posted bysyakoudancetoyama