Top Page › Template › テンプレ修正等 › テンプレートの修正・更新致しました。20/07/03

テンプレートの修正・更新致しました。20/07/03

2020-07-03 (Fri) 23:37

いつもテンプレートをご愛顧頂き、誠に有難うございます。
下記3点の更新を致しましたのでご報告いたします。
ご利用頂いているテンプレートに使い難さが無ければ、必ずしも修正箇所を改変頂く必要はございません。m(__)m

1) 正規のURLを示す記述 rel="canonical" を付けました。(全テンプレート)
2) コメント者のURLが無い場合は非表示になるようにしました。(全テンプレート)
3) 共有テンプレート genial_resp3c 左メニューの上部位置を自動で調整するようにしました。




1) 正規のURLを示す記述 rel="canonical" を付けました。(全テンプレート)
先日、Lighthouse(Google公式のSEOチェックツール)を利用した時に『canonical』についての言及がある事を、ユーザーの方と話しました。
FC2ブログの公式・共有テンプレートどちらも、記述している作者様は残念ながらホンの数名しか居りません。(インデックスページのみ記述している当方以外で確認できたのは3名。しかも内2名は1作品しか公開していない。公式も最新ですら付いて無い。ソース見た限りでは爆速にも付いて無い。)
カスタマイズの範疇という位置付けで利用者に委ねているのかもしれませんが、無いよりは有るに越した事は有りません。
なので、この度の更新で全テンプレートに付ける事に致しました。

rel="canonical"とは、検索エンジンに重複ページと認識されないよう、1つのURLにまとめる(正規化する)ために用いる記述です。
コンテンツの重複によるペナルティーやリンクポピュラリティ(参照重要度)の分散を防ぎます。
今迄はトップページにのみ記述しておりましたが、この度の変更でその他のページにも付けました。(個別記事・全記事リスト・カテゴリー・月別・タグ)
更新日(20/07/03)以前のテンプレートで利用したい場合は、下記の <head> から </head> までを差し替えてご利用下さいませ。
【 注意 】 ご自身で <head> 内に記述しているものは含まれておりませんので、改めて追記して下さい。
下記と同じソースを別タブで開きたい場合はここをクリックして表示
最下段 『 ReadMore 』 ← をクリックして表示。(記述されている内容は同じです。)





2) コメント者のURLが無い場合は非表示になるようにしました。(全テンプレート)
コメント投稿者がURLを入力していない場合、空の『URL』の文字が残る、URLの入力が無いのにコメント投稿者の名前に記事URLのリンクが付く、別窓で開かない、URLのツールチップが邪魔、等が有りました。
何れもFC2ブログで使う単変数の仕様で出力されるものなので、そのままのタグではどうにも出来ません。
これを解消するために、JavaScriptを使う方法等も何方かが掲載していましたが、CSSで非表示にする方法を見付けましたので、この度テンプレートを修正・更新致しました。

更新日(20/07/03)以前のテンプレートで利用したい場合は、下記のように変更して下さい。

【 修正方法 】
① テンプレートのスタイルシート編集枠内から下記の部分を探して変更して下さい。
(文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入れて下さい。)
<%comment_url
↑この文字列で検索すると
<%comment_url+name>
若しくは
<%comment_name> <%comment_url+str>
若しくは
<a href="<%comment_url>" target="_blank" rel="noopener"><%comment_name></a>
ひょっとしたらJS使っている場合も。(document.write は非推奨です。)
<%comment_name> <script>
a="<%comment_url>";
if (a!="") document.write('<a href="'+a+'" target="_blank">URL</a>')
</script>
<noscript>
<a href="<%comment_url>" target="_blank">URL</a>
</noscript>
というのが見つかると思います。

そして、見付けた部分を下記のように変更して下さい。
<br><%comment_name>&ensp;<span class="com-url-empty"><%comment_url></span><a class="com-url-link" href="<%comment_url>" target="_blank" rel="noopener">URL</a>


② スタイルシートの最下段に下記を追加して下さい。
.com-url-empty{
display:none;
}
.com-url-empty:empty~.com-url-link{
display:none;
}

後は更新ボタンを押して頂ければ完了です。
不具合が有った時のために複製を作っておく事をお勧め致します。m(__)m





3) 共有テンプレート genial_resp3c 左メニューの上部位置を自動で調整するようにしました。
トップをお好きな画像に変更して使う場合、genial_resp3c(3カラム)は、そのカラム並びから画像の高さによって左側のメニュー上部位置を修正して頂く必要が有りました。
genial_resp のカスタマイズ(トップ画像変更)
しかし、この度 jQuery を使って自動で位置調整する方法を見付けましたので導入致します。
現在の手動で不便が無ければ改変する必要はございませんが、頻繁に画像変更をする方・その都度手動調整するのが面倒という方は、下記修正をお試し下さいませ。

① HTML編集枠内から下記の部分を探して変更して下さい。
(文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入れて下さい。)
<div class="topimg">

見付けた文言を含む下記部分をオレンジ文字に変更して下さい。
<div class="topimg">
<header>
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><p><%introduction></p>
</div>
</header>
</div>
↑これを下記のように変更↓(コピペ可)
<div id="header-top">
<div class="topimg"></div>
<header>
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><p><%introduction></p>
</div>
</header>


② 次にHTML編集枠内から下記の部分を探して変更して下さい。
(文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入れて下さい。)
<!-- パンくずリスト 不要の場合はここまで削除-->
この下に有る </div> の下に、もう一つ </div> を追加します。
このように↓
<!-- パンくずリスト 不要の場合はここまで削除-->
</div>

</div><!-- header-top ここまで -->


③ 同じくHTML編集枠内下段に有るJavaScript群の下(</body>よりも上)に下記JavaScript(jQuery)を追記します。
<script>
var mediaQuery=matchMedia("(max-width: 1170px)");handle(mediaQuery);mediaQuery.addListener(handle);function handle(b){if(b.matches){var a=$("#header-top").height();$("#left-box").css("margin-top",0)}else{var a=$("#header-top").height();$("#left-box").css("margin-top",a-16)}};
</script>


④ スタイルシート編集枠内から下記の部分を探して変更して下さい。
(文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入れて下さい。)
/* ヘッダー部分 */
1ヶ所見付かるので、その上に有る #left-box{ ~~ を含めて、オレンジ色文字のように変更して下さい。
#left-box{
margin-top:300px; /* トップ画像を変更して左メニューに被ったら数値を増やして調整 */
}

/* ヘッダー部分 */
header{
width:100%;
top:35px;
position:absolute;
text-align:left;
background-color:rgba(255,255,255,0.4);
z-index:1;
}
という部分を、#left-box は削除し header の部分を変更します。
/* ヘッダー部分 */
header{
top:35px;
left: 20px;
right: 10px;
position:absolute;
text-align:left;
background-color:rgba(255,255,255,0.4);
z-index:1;
}


後は更新ボタンを押して頂ければ完了です。
不具合が有った時のために複製を作っておく事をお勧め致します。m(__)m


差し替えheaderは↓ここをクリック


青い部分以下の <head> から </head> を差し替えて下さい。
【 注意 】 ご自身で <head> 内に記述しているもの(アイコンのリンクやJavaScript等)は含まれておりませんので、忘れずに追記して下さい。

<!DOCTYPE html>
<html lang="<%template_language>">

<head>
<meta charset="<%template_charset>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="author" content="<%author_name>">
<title><!--index_area-->トップページ<!--/index_area--><!--titlelist_area-->全記事タイトルリスト<!--/titlelist_area--><%sub_title> - <%blog_name> - <!--not_index_area--><!--not_titlelist_area--><!--not_permanent_area--><!--not_search_area-->
<%current_page_num>ページ目 <%cno><!--/not_search_area--><!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_index_area--></title>
<!--index_area-->
<meta name="description" content="<%introduction>">
<link rel="canonical" href="<%url>"><!--/index_area-->
<!--permanent_area-->
<meta name="description" content="<!--topentry--><%topentry_description><!--/topentry-->">
<link rel="canonical" href="<!--topentry--><%topentry_link><!--/topentry-->"><!--/permanent_area-->
<!--titlelist_area-->
<meta name="description" content="全記事タイトルリスト">
<link rel="canonical" href="<%url>archives.html"><!--/titlelist_area-->
<!--category_area-->
<meta name="description" content="カテゴリー「<%sub_title>」">
<link rel="canonical" href="<%url>blog-category-<%cno>.html"><!--/category_area-->
<!--date_area-->
<meta name="description" content="月別「<%sub_title>」">
<link rel="canonical" href="<%url>blog-date-<%now_year><%now_month>.html"><!--/date_area-->
<!--tag_area-->
<meta name="description" content="ユーザータグ「<%sub_title>」">
<link rel="canonical" href="<%url>?tag=<%sub_title>"><!--/tag_area-->
<!--search_area-->
<meta name="robots" content="noindex, nofollow"><!--/search_area-->
<!--edit_area-->
<meta name="robots" content="noindex, nofollow"><!--/edit_area-->
<!--not_index_area--><!--not_category_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area--><!--not_permanent_area--><!--not_titlelist_area--><!--page_area-->
<meta name="robots" content="noindex, follow">
<link rel="canonical" href="<%url>"><!--/page_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_category_area--><!--/not_index_area-->
<link rel="stylesheet" href="<%css_link>">
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="rss">
<link rel="start" href="<%url>" title="最初の記事">
<style>.left img[style*="<%url>"]{display:none;}</style><!--object-fit(IE対策)-->
</head>



[Tag] * 修正・更新 * コメント

最終更新日 : 2020-07-28

Comments

No Subject

お疲れ様です。
1)についてですが、以下の記事を見つけて、私的にはヤレヤレと思っていたのですが...
「Firefox 79」からtarget=“_blank”なリンクの挙動が変更、より安全な仕様に - 窓の杜(20/06/09)
https://forest.watch.impress.co.jp/docs/news/1257725.html

これとは別件でしょうか?
2020-07-04-10:54  呑兵衛あな
[ 返信 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。コメント頂き有難うございます。

コメントに関してですが、別件です。
rel="noopener"とrel="canonical"は全く異なるものです。

rel="noopener"はリンク先を別窓で開く際のセキュリティ対策のようなものです。
ではそもそも"target_blank"を使わなければ(同窓で閲覧で)良いのでは?とも言えますが、読み進めて彼方此方行ってしまうとHistoryBackが面倒になってきます。^^;
そのため、外部サイトで無くてもつい使いがちになってしまいます。
target="_blank"の何が怖いのかというと、JavaScriptを使えば簡単に、新しく開かれたウィンドウで親ウィンドウ(リンク元)を操作できてしまうからです。
この注意喚起については、関連記事を読まれているのでご存知かと思います。

rel="canonical"は正規のURLを検索エンジンに伝える事ができるHTMLのタグです。
canonicalタグを使いURLの正規化する事で、検索エンジンに評価してもらうURLを統一し、コンテンツの重複によるペナルティーやリンクポピュラリティ(参照重要度)の分散を防ぐ事が出来ます。
どういうものが対象になるかというと、例えば
・類似・重複しているページ
・www.やindex.html等の有無でアクセス可能なページ
・同じ内容でURLが異なるPC・スマホページ
などが挙げられます。
FC2ブログの場合も、SSL化(http→https)であったり、スマホ版利用であったりと重複するものが有るので、そういうのを「正規化しよう」というこの度の記事です。

FC2ブログでの詳しい記事を下記で読む事が出来ますので、宜しければご覧下さい。
[ SSL化で気にした方が良いこと 気にしない方が良いこと ]
- The other way round - Akira様の記事
https://vanillaice000.blog.fc2.com/blog-entry-586.html

(コメントの別窓リンクにrel="noopener"が付けられないので、そのままURLを記述しています。新規タブ等にコピペしてご覧下さい。m(__)m)
2020-07-04-15:56  aki
[ 返信 * 編集 ]

No Subject

説明いただき、御手数を掛けてしまいました。ありがとうございます。
ところで、別件で質問です。簡単に回答いただけるなら教えてください。大変なら取り下げます。

現在、FC2ブログ移転を想定して「youth_resp3c」(最終更新日:2020/06/21)を仮設置しています。
https://nonn634.fc2.net/
目が悪いので「文字サイズの変更」の
1) テンプレート全体の文字サイズ変更
https://sorauta1.blog.fc2.com/blog-entry-399.html
だけを行い、PCからのアクセス時の文字サイズは気に入っています。
しかし、Android v4.4.2タブレットでChrome(最新)アクセスした場合の文字サイズが大きくなりません。
Firefoxアクセスしても似たようなものです。
これは、こちらのブログを閲覧した場合も同様です。

タブレットでアクセスした場合の文字サイズを大きくする方法がありましたら、教えてください。
ちなみに、最近FC2が公開した3カラムのレスポンシブ対応テンプレート程度にしたいのですが。
https://fc2information.blog.fc2.com/blog-entry-2109.html
2020-07-04-19:11  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。お返事有難うございます。

文字サイズの変更について、先ずは記事ページを修正させて下さい。
1) テンプレート全体の文字サイズ変更
https://sorauta1.blog.fc2.com/blog-entry-374.html

モバイル端末での検証を致しました。
iPhone,Android、iPadmini 共に上記の変更で文字サイズは大きくなっております。(Android系タブレットは持っていませんので確認できませんが、PCでは無くSPと同じなので同様の結果になると予想致します。)
ただ、SPのAndroidだけ端末本体の設定による文字サイズ変更が効きませんでした。(FirefoxはiOSでもAndroidでも変更できませんでした。)

スタイルシートでの変更
iPhone:Chrome〇、Firefox〇 iPad:Chrome〇
Android:Chrome〇、Firefox〇

モバイル端末の設定での変更
iPhone:Chrome〇、Firefox× iPad:Chrome〇
Android(SP):Chrome×、Firefox×
(但し、Android:Chromeはドロワーメニュー内だけ文字サイズが大きくなった)
多分AndroidタブレットもSPと同じ結果だと思います。

ブラウザや端末間の表示相違は修正が難しいため、申し訳ございませんがそのままご利用下さい。
ただ、非常に使い易いプラグインを見付けましたので紹介いたします。
閲覧端末側で操作できますし、リロード・ページ移動でもサイズが変わらない(cookie保存有り)ので、PCとモバイルで表示サイズを分けて閲覧できます。
見本として当ブログの右メニューに付けてありますので変更してみて下さい。

追加方法は、管理ページ左のメニュー「プラグインの設定」→
プラグイン設定の「共有プラグイン追加」をクリック→
プラグイン名に「サイズを記憶するフォントサイズ変更ボタン V1.1」を入れて検索
すると一つ出て参りますので、詳細をクリックして「追加」ボタンを押して下さい。

次に、PC用「プラグイン管理」のプラグイン名「サイズを記憶するフォントサイズ変更ボタン V1.1」の詳細をクリック
プラグインの改造「HTMLの編集」を開きます。
そして、ユーザー設定項目を下記のように変更して下さい。

//ユーザー設定項目
var defSize = 1.0; //規定サイズ
var MinSize = 0.5; //最小フォントサイズ
var MaxSize = 2.0;//最大フォントサイズ
var Unit = 'em' //単位
var chWidth = 0.1; //増減幅
var days = 30; //クッキー保存日数
//設定項目終わり

この状態で設定を押して完了でも良いのですが、ボタンの中央寄せ・ボタン間のスペースを調整する場合は、枠内最下のアンカー(aタグ)部分をdivで括り、更にaタグにスタイルを入れます。(コピペ可)

<div style="text-align:center;">
<a style="margin-right:7px;" href="javascript:void(0);" onclick="FontSizeChange(chWidth);"><img src='https://blog-imgs-29.fc2.com/h/a/t/hatenachips/L1.gif' border="0" alt='文字を大きくする' /></a>
<a style="margin-right:7px;" href="javascript:void(0);" onclick="FontSizeChange(0)"><img src='https://blog-imgs-29.fc2.com/h/a/t/hatenachips/M1.gif' border="0" alt='文字を規定のサイズに戻す' /></a>
<a href="javascript:void(0);" onclick="FontSizeChange(-chWidth);"><img src='https://blog-imgs-29.fc2.com/h/a/t/hatenachips/S1.gif' border="0" alt='文字を小さくする' /></a>
</div>

是非お試し下さいませ。

それと、
> ちなみに、最近FC2が公開した3カラムのレスポンシブ対応テンプレート程度にしたいのですが。
…についてです。多分文字サイズは呑兵衛あな様の設定と同じだと思いますよ。(font-size:100%;)使用フォントが異なるので大きさが違うように見えるのだと思います。
2020-07-05-16:41  aki
[ 返信 * 編集 ]

Re: aki 様へ

長大な説明をいただき、ありがとうございます。
しかし、この説明で「文字サイズの変更」記事に(1).(2).(3)が書かれている理由が理解できました。
私は本質問以前は(1)だけを工事していましたが、(3)を加減する事で対処できそうです。
また、プラグイン名「サイズを記憶するフォントサイズ変更ボタン V1.1」は、10年以上前にFC2ブログを利用していた頃に類似の物を使った事を思い出しました。まだ有るんですね。
2020-07-05-18:43  呑兵衛あな
[ 返信 ]

お疲れ様でした🍵

丁寧な記事を更新していただきありがとうございます
本当に頭が下がります
┏○︎))ペコ
headに全部のコードを入れたところ、
PC閲覧時のタブに記事タイトルが出て、大変カッコいい仕様になりました˖✧
全テンプレートの仕様変更など、本当にお疲れ様でした(>_<)
2020-07-06-09:34  徳川たぬこ
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

お返事有難うございます。
最近は新しく共有化されるプラグインも少ないようです。
まぁ、昔からかなりの数のプラグインが有りますので、似たようなのを新たに作る人が居ないのかもしれません。
古いプラグインで十分なものも沢山有るのですが、気を付ける事も有ります。
HTML4では問題無くてもHTML5では警告が出るものや、SSL化したブログに導入する事で mixed content(混在コンテンツ)を指摘されたりするものも有るので注意が必要です。
プラグイン作者hatenaさんは、随分昔から非推奨のものを使わないJSなので安心ですよ。(^-^)(当ブログ内ページネーションのJSをお借りしています。)
文字は、閲覧される方の読み易いサイズが異なりますので、変更できるものが付いていると親切でしょうね。(^^)
2020-07-06-13:44  aki
[ 返信 * 編集 ]

aki

Re: 徳川たぬこ 様へ

こんにちは。コメント有難うございます。(^-^)
canonicalについては、ほぼどの作者さんのテンプレートにも付いていない(というかAkira氏以外)ので、標準付帯についてどうしようか悩んだのですが…
正規化を気に掛ける方が少なくても、無いより有った方が良いですよね。
(他2名[dさんとLさん]も1作品のみで、以降は発表されてないですし。)
と、思う事にしました。^^;

そちらで話題になっている件(YouTube)については、ゴメンナサイ。当方よく分かりません。
自分のブログにすら貼っていないので、下手に参戦(?)しない方が良いかなと傍観しております。
(とても勉強になります。(^-^;)

良い方法が見つかったら、是非記事にして下さいませ。m(__)m
2020-07-06-14:27  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-06-15:00  -
[ 返信 ]

aki

Re: - 様へ

コメント頂き有難うございます。(^-^)
そちらに伺ってお返事致しますね。
2020-07-06-21:10  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-06-22:20  -
[ 返信 ]

aki

Re: - 様へ

こんばんは。コメント有難うございます。
どこが悪いか調べてみますので、暫しお時間を下さい。m(__)m
2020-07-07-02:37  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-07-08:06  -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-07-08:18  -
[ 返信 ]

aki

Re: - 様へ

返信一緒にしてスミマセン。m(__)m

両- 様の所に後程伺ってお返事致しますのでお待ち下さい。
2020-07-07-12:17  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-07-21:33  -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-08-20:36  -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-11-04:34  -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-11-05:10  -
[ 返信 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-17-09:35  -
[ 返信 ]

aki

Re: - 様へ

こんにちは。コメントありがとうございます。
そちらに伺ってお返事致しますね。(^-^)
2020-07-17-14:31  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-07-17-14:51  -
[ 返信 ]

aki

Re: - 様へ

こんばんは。コメント有難うございます。
そちらにお返事致しますね。(^-^)
2020-07-17-16:53  aki
[ 返信 * 編集 ]






非公開コメント