Magazine - FC2ブログテンプレート

Magazine - FC2ブログテンプレート

テンプレート 配布中テンプレート
2019/11/01
68
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS4RWD
Magazineテンプレート

Magazineテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

最終更新 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager-prev-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager-next-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager-prev-cate-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager-next-cate-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

名称 Magazine
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大860px
サイド --- 最小300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
・トップページタイルのカスタマイズ非推奨
パソコン タブレット スマートフォン
2カラム 2カラム or 1カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下
更新履歴 2020.5.28
  • ページ送りのJSを修正
更新履歴 2020.3.30
  • コメント返信のJS変更
更新履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

まがじん
承認されました。ありがとうございます。当記事の公開が遅れたかもしれません。ごめんなさい (*_ _)

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
CATEGORY PAGE DEMO
画像クリックでデモ画面へ
ARTICLE PAGE DEMO
画像クリックでデモ画面へ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
  • トップページタイルレイアウトの変更
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。 というわけでIE利用者さんへ向けての「ごめんね。IEからはまともに見られないよ」「他のブラウザ使ってみない?」を促すためのオーバレイ表示を行う方法をご紹介くださっているサ...

トップページのタイルレイアウトについて

About grid tile layout in toppage

トップページ最初の1ページ目(つまりブログURLで表示されるページ)では、最新の3件のみタイル状のレイアウトにしてあります。この部位の形状変更、数の増減や各記事の占有率の変更などに関するカスタマイズは お受けしません

何通りものレイアウトが考えられます。個人個人に合わせていたら私の時間が足りない ( ̄∀ ̄;)
という事情でこの部位の変更については自己責任・自力でお願いします。カスタマイズを行う場合、ちょっと変則的なことをしていますので 難易度(激)高 だと思って挑んでください。

新着記事の変数で掲載しても良かったんですが、新着記事の各個人表示件数設定を把握できないのと、通常の更新記事と重複が起こるのと、新着表示件数が3件以上の場合 display: none での強制非表示が必要になるので辞めました。特にCSSのnone指定は極力使わない方向で(SEO面で問題が生じるため)
こういった理由でカスタマイズ難易度が跳ね上がっています。

左右カラム入れ替えの仕方

How to change the direction of rows

#main-container { で検索するとスタイルシート内に3箇所あります。3つ目 のルールセット内 justify-content: space-between; の直下に flex-direction: row-reverse;追加

続きまして、#primary, で検索し(さきほど作業した内容のすぐ下にあります)、margin-right: var(--gap); 緑部位 right を left変更

表示件数を増やす前に

Think twice before you increase the number of displayed articles.

コンパクトなリスト表示なので更新記事の表示件数を増やしたくなる方もいらっしゃると思います。その前に トップページ2ページ目以降やカテゴリなどのページは更新記事の下に新着記事が掲載される 点を熟考してください。新着記事掲載については削除可能です。

表示面の詳細はそれぞれのDEMOページでご確認ください。

広告掲載位置について

About deprecated place to put your advertising

広告の掲載位置ですが、htmlソース内

<!--index_area-->
<div id=index-grid-wrapper></div>
<!--/index_area-->

よりも になるよう設定してください。でないとレイアウトがめちゃくちゃなことになります。ビッグバナーなどは</header> の下あたりをおすすめします。

document.writeの排除

Eliminating the document.write method

そろそろ本気で document.write を潰そうと思いまして。以前から使うな使うなと言われていましたが、もういい加減対処しないと、という感じで。html5では strongly discouraged(強い否認)ということで「マジで使うのやめてくれ」とW3Cの中の人、あるいはWHATWGの中の人が困ってる(笑)
テンプレート内の対象は2箇所です。

NEWマーク

JS内容の変更と同時に16進数への変更も行っています。デフォルトの表示期間は 48時間(2日) です。変更する場合は 1728e5 という文字列がhtml内上方に1箇所ありますので、この数字を変更してください。それぞれクリックでコピーできます。

コメンテーターのリンク

最近は他ブログからの流入の方も増え、自主的にリンクを記載してくれない人が多い ことにお困りの声も聞こえてきます。今回methodを書き換えるにあたり、もう少しわかりやすくしました。といってもリンクの範囲を大きくしただけです。あと外部への遷移を示すアイコンに変更しました。管理人のリンクは不要だと思いますので対象外にしてあります。詳細は ARTICLE PAGE DEMO でご確認ください。

ナビゲーションの「ABOUT」リンクについて

You can change or delete ABOUT link in navigation.

ヘッダー下グローバルナビゲーション内の ABOUT は予備リンクです。遷移したい特定のページがあれば「ABOUT」のテキストを適切な文言に書き換えた上でリンクを登録。不要の方は削除してください。空リンクのまま放置しないよう注意。

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

スピード強化について

Behavior about navigation

Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。

prefetchはバックグラウンドで行われますが、過信して1ページ内に大量のリンクを記載しない よう気にかけてください。記事の表示件数をMaxの50件に指定するなどがそれにあたります。リンク数が過剰だと却ってスピードを落とすこともありますので10〜30件程度が妥当だと思います。また、スペックを最大限に活かすには SSL化 を行ってください。

「新着記事リスト」と「プロフィール」について

About recent list and profile

それぞれのプラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策(新着記事リスト)
  • バリデートエラー無し(htmlが正確)

できればプラグイン側を非表示にされた方が良いと思います。プロフィールの表示位置変更は可能です。

補足事項

Handouts

  1. ページ内スクロールボタンの位置について

現在FC2ブログでは無料アカウントの方でも広告が出ないようになっています。2020年8月末日までは恐らく確定で、期間限定になるのか同年9月以降は再度広告が表示されることになるのかはわかりません。

本作については「広告は無い」ことを前提にボタン位置を設定していますが、期限を迎えた際に再調整する可能性があります。その際には改めてアナウンスを行います。

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.23のバージョンより個別記事のサムネイルつきページ送りを複製掲載できるようにしました。コピー対象はhtml内を <!-- 個別記事ページナビ --> で検索し、すぐ上にある <!--permanent_area--> を含め、<!-- 個別記事ページナビここまで --> のすぐ下にある <!--/permanent_area--> までを含めた範囲です。複製した内容を希望の位置へペーストしてください。

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

いつもありがとうございます (●'0'●)/

Related post

Comments  68

-
2019/11/01 (Fri) 17:05

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2019/11/01 (Fri) 17:44

To Firefoxの件 内緒さん

こんばんは。

申し訳ないんですがブラウザサポートは現行バージョンとそのひとつ前のバージョンまでです。
Firefoxの最新バージョンは70でエンジンもgeckoではなくquantumです。
Mozilla自体が安定版(メジャー版)が出た時点で旧バージョンをサポートしていません。

ということなんで、すみませんが対応は致しません。申し訳ない (∵`)
私はセキュリティ面から見ても最新バージョン以外の利用を推奨しない派です。IEについてもそうです。

-
2019/11/01 (Fri) 19:32

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2019/11/01 (Fri) 21:41

To Firefoxの件 内緒さん

いえいえ。ご親切にありがとうございます。

結局危機感の無い人に何を言っても無駄というか。こちらが一生懸命説明しても、疎ましがられたり悪感情持たれたらこちらが損するばかり。
なので私はそういうのはやらないことにしてるんです (´・ω・`)
その気になれば(痛い目に遭えば)自分で動くやろ、という感じで見ています。不親切だとは思うけど ^^;

-
2019/11/11 (Mon) 21:57

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2019/11/11 (Mon) 22:00

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2019/11/12 (Tue) 00:43

To Magazineブログタイトルの件 内緒さん

こんばんは。ありがとうございます :)

> すべて大文字になってしまいます〜

#blog-title {
で検索するとスタイルシート内に2箇所あります。1つ目のルールセット内に
text-transform: uppercase;
というのがありますので、この一行を削除してください。よろしくお願いします。

----- 別件
当記事内容をお読み頂きまして、「必須個人設定」を行ってくださいね。
あとホントは未来記事を作成するのは良くないですね。時系列が狂いますし(SEO的に)、常にnewの文字が付き、かつ一番良い場所を専有するのでもったいないと思います。
できればナビゲーション内にリンクを設けて該当ページに誘導するなど別のアプローチを選択されると良いかもしれません。

-
2019/11/12 (Tue) 20:20

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2019/11/12 (Tue) 20:23

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2019/11/13 (Wed) 16:57

To Magazineブログタイトルの件 内緒さん(完了のご報告)

こんにちは。

修正できているのを確認しました。お疲れ様でした :)

深緑の女魔術師
2019/11/15 (Fri) 18:56

お借りします

深緑の女魔術師です。

新しいスマートフォン出て惹かれるように
同様に新しいテンプレートが出て惹かれるFC2ブロガー・・・

いつも開発ありがとうございます。

語弊があるけど、
これはTOP配置がすごい素敵なので、
是非ってことでお借りしますね。

トップのリンク画像の上に表
示される文字色が難しいですね・・・

白が無難であるかもしれないけど、
画像によっては白があれな場合があったり・・・
頑張ってカスタマイズしてみたいと思います。

FC2ブロガーとして素朴な質問なのですが、
テンプレを借用する画面でコメント書けますが、
あれって作者にメールなどの通知が届くのでしょうか?

(作者さん=Akiraさんに届くならあれだけど、
届かないであるなら借りるかもしれないユーザ向けに
書くべきなのかな?とちょい思いました)

以上です。

-
2019/11/16 (Sat) 08:57

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2019/11/16 (Sat) 10:26

To 深緑の女魔術師さん

こんにちは ('0')/

> 画像によっては白があれな場合があったり〜

文字が見づらくならないように半透明(黒)のオーバーレイを付けていますのでよほど大丈夫だとは思います。度合いは不透明度で調整を行ってくださいね。

> 作者にメールなどの通知が届くのでしょうか〜ユーザ向けに書くべきなのかな?〜

メールは届きません。私はダウンロードページをほとんど見ませんので、コメントについてはどうぞお気になさらず、というスタイルです(笑)
ユーザー同士で会話を交わすと喧騒に発展することがあります(一度経験しています)ので、レビューではなくあくまでも作者へのコメント、という形でお使い頂くのが理想だと思います。
コメント欄が仮にレビュー欄になってしまうと、勘違いや間違った情報が出てきたりで製作者が対応に追われる事態になるので避けたいところです(笑)

vanillaice (Akira)
Akira
2019/11/16 (Sat) 10:31

To Magazineファビコンの件 内緒さん

こんにちは。

> グーグルクロームでもファビコン表示されてたのですが〜表示されなくなりました〜

原因はhead要素内にある不正な文字列
 ※
(全角スペース + 全角アスタリスク)です。クリティカル(致命的)なエラーなので早期修正(削除)をおすすめします。head内を操作する際は十二分に気をつけてくださいね。

参考記事: head情報に何かを追加する際は細心の注意を
https://vanillaice000.blog.fc2.com/blog-entry-791.html

NOB
2019/11/16 (Sat) 10:55

To Akiraさん

早速、コメントありがとうございます。m(_ _"m)

ベース色をダーク系に変えようとしてブロブタイトルの下に表示されるブログの説明文の文字色白系にを変えたくて、※印を付けていたのをそのままにしてたようです。
単純なミスでした。(;^_^A
無事に表示するようになりました。
お手間をお掛け致しました。


NOB
2019/11/16 (Sat) 17:06

To Akiraさん

うわぁ~・・・(;^_^A

ブログのチェックまでしていただき、その上至らない所のアドバイス(回答)まで頂き、ありがとうございます。
本人としては質問以外の部分は気が付かないですけど、見る人が見ると「ここ何か変だぞ!」ってのが、すぐわかるんですね!(;^_^A

かゆい所まで手の届くakiraさんの心遣い感謝です。m(_ _"m)

vanillaice (Akira)
Akira
2019/11/16 (Sat) 17:40

To NOBさん

こんばんは。今しがた記事を書きましたのでご覧くださいね。NOBさんの場合は一括で管理した方が良いかもしれませんね (´・ω・`)
上記コメントに推奨html内容を書きましたが、もしかすると新記事のhtml内容の方が希望に叶うかもしれませんので、修正作業されるかどうかわかりませんが、作業をするならばその前にご一読ください。

NOB
2019/11/16 (Sat) 17:59

こんばんは。

記事にしてもらい私以外の人でもコピペでランキングバナー使ってる人が多いと思いますので助かります。
私の場合、コピペで慣れてますので、とりあえずakiraさんの書き換え推奨でやってみますが、今回の記事分も試してみたいと思います。
ひょんなことから記事に発展するとは・・・(;^_^A

vanillaice (Akira)
Akira
2019/11/16 (Sat) 18:09

To NOBさん

そうですね。該当者さんは非常に多いと思います(笑)
ともかくポイントは「クラス属性」です。これさえあれば無理やりなやり方だとしても全記事で修正が発生、という事態だけは避けられるはずです 。今後に向けて (o'ω')ノ

yusuke38
2020/02/16 (Sun) 12:56

グーグル検索時の説明文の表示に関して

AKIRAさんのテンプレートが好きで使用させてもらっています。
いつもありがとうございます。

今回は質問がありコメントから連絡させてもらったのですが、
もしテンプレートの設定ではなくFC2の方の設定であればごめんなさい。

テンプレートの中身に関して無知なので、
質問の内容を分かってもらえるか不安ですが、
宜しくお願い致します。

質問
現在は「Magazine」を使用させてもらっているのですが、
グーグル検索すると出てくるサイトの説明文がFC2で設定したのが反映されてないのですが、
これは私が設定を間違えているのでしょうか?
設定する方法はあるのでしょうか?

※現在、グーグルで検索した時の説明文は以下のようになってます。
水中撮影&調査ダイブコメント(-)TB(0). 2020/02/0819:29. 海の中は可愛くない子ばっかりだ… ビーチダイビング (沖縄本島全域)コメント(-)TB(0). 2020/02/0723:19. 2020年はごげ茶色! 水中撮影&調査ダイブコメント(-)TB(0). 2020/02/0521:37. 癒し系と ...

もしかしたら凄く初歩的な質問かも知れませんが、
回答を頂けたら凄く助かります。
宜しくお願い致します。

vanillaice (Akira)
Akira
2020/02/17 (Mon) 00:10

To yusuke38さん

こんばんは。こちらこそありがとうございます :)

【インデックス概要文の件】
テンプレートで関連するのは主にhead要素と呼ばれ、ここでSEOに係るいろいろな指定がされていますが、テンプレートを変更したらすぐにそのテンプレートのhead要素に切り替わるわけではありません。
弊テンプレートに
TB(数字)
という表記を採用しているものはありませんので、yusuke38さんが過去に利用していたテンプレート(スマホ版含む)のhead要素のままインデックスが書き換わっていないということになります。つまりMagazineテンプレートの内容は反映されていません。
スマホ版を併用していた場合には、現在はモバイルファーストインデックスといってスマホでの表示が優先で検索結果に掲載されますので、PC版ではなくスマホ版の影響も考えられます。

既にインデックス済のページもGoogleは再クロールしますが、それはあくまでもGoogleのタイミングや発リンク・被リンクの内容も絡んできます。いずれ書き換わりますが、自発的に再クロールを依頼するには以下の記事を参照して手順に従ってください。

参考記事: Google ヘルプ
https://support.google.com/webmasters/answer/6065812?hl=ja

ただしキューイング(順番待ちの列に並ぶこと)されるだけで即座にクロールしてくれるわけではなくGoogleのタイミングで行われます。
Magazineのhead要素が正しく伝わればyusuke38さんのブログ説明文は
「沖縄〜省略〜海ブログ」になります。

よろしくお願いします。

----- 別件
ナビゲーションにリンクを追加される際に少しだけhtmlのミスがあります。

×
href="省略"target="_blank"


href="省略" target="_blank"

属性間半角スペースの欠如4箇所です。早めの修正をおすすめします。

yusuke38
2020/02/17 (Mon) 09:53

ありがとうございます!

ご回答いただきありがとうございます。

実はテンプレートを変更して昨日まで、
環境設定のスマートフォン版の表示設定を有効にしてたので、
それが原因なんだと思います。

htmlはすぐに書き換えします。

今回は丁寧な回答有難う御座いました。
これからもAKIRAさんのテンプレートを使用させてもらうと思いますので、
宜しくお願いします。

vanillaice (Akira)
Akira
2020/02/19 (Wed) 21:42

To yusuke38さん(終了のご報告)

お返事遅くなりました (*_ _)

はい。こちらこそよろしくお願いします :)

-
2020/02/24 (Mon) 16:10

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/02/25 (Tue) 01:10

To Magazine誤情報記載の件 内緒さん

こんばんは。

全く気づいていませんでしたー!確かにleftとrightが逆だったので訂正しました。
お知らせありがとうございます。助かりました :)

こちらこそよろしくお願いします :)

-
2021/09/04 (Sat) 21:18

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/09/05 (Sun) 00:21

To Magazineテンプレートの件 内緒さん

こんばんは。ご協力ありがとうございます :)

#blog-title {
で検索するとスタイルシート内に2箇所あり、1つ目のルールセット内
text-transform: uppercase;
の一行を削除してください。よろしくお願いします。

-
2021/09/05 (Sun) 04:12

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/09/05 (Sun) 14:56

To Magazineテンプレートの件 内緒さん(完了のご報告)

修正を確認できました。お疲れ様でした :)

-
2021/09/09 (Thu) 01:58

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/09/09 (Thu) 15:40

To Magazineテンプレートの件 内緒さん

こんにちは ('0')/

> プロフィール画像と〜丸ごと非表示、もしくは削除〜

<!-- 注)SNSシェアボタン不要の方ここから削除 -->
で検索するとhtml内に1箇所あります。これを目印にして、下のスクリーンショットの赤い範囲を削除してください。

https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/2021090915383001e.png

-----
> SNSシェアボタン〜順番の変更〜

上記スクリーンショット内に各SNSに区切り線を入れておきましたので、お好きに並べ替えてください。何に対応しているかは文言が入っているのでわかると思います。

編集時には「全角スペースは絶対に押下しない」ことを気をつけてくださいね。よろしくお願いします。

-
2021/09/09 (Thu) 19:00

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2021/09/10 (Fri) 11:09

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/09/10 (Fri) 23:25

To Magazineテンプレート ページ送りの件 内緒さん

こんばんは。
ページ送りを非表示にしたい(更新順, 同カテゴリ内 共に)、という解釈で合ってますでしょうか。

<!-- 個別記事ページナビ -->
で検索するとhtml内にありますので、スクリーンショットの範囲を削除してください。
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_09_10.png

ページ送りを削るとユーザービリティ・SEO面であまりおすすめはできないので、よくよくお考えになってから実行してくださいね。よろしくお願いします。

-
2021/09/10 (Fri) 23:54

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2021/11/20 (Sat) 19:05

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/11/23 (Tue) 16:26

To Magazineコメントの件 内緒さん

お返事遅くなりごめんなさい。

> 各記事ページの記事タイトルの下の「コメント欄へのリンク」の部分を丸ごと消したい〜

<!--allow_comment-->
で検索するとhtml内に1箇所ありますので、この行を含み近接の
<!--/allow_comment-->
までを削除してください。よろしくお願いします。

-
2021/11/24 (Wed) 07:48

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

KrowNews
2021/11/30 (Tue) 10:43

いつも大変お世話になっております。
一点、質問があります。各ページの記事タイトル下に日付が2カ所表示されているうちの、右側の日付(おそらく記事の最新更新日:https://imgur.com/a/DexDXdD)の部分を丸ごと削除したいと思っております。お手隙の際で構いませんので、やり方をご教授いただけると幸いです。m(_ _)m

KrowNews
2021/11/30 (Tue) 10:46

To KrowNewsさん

参考:https://krownews.jp/blog-entry-245.html

vanillaice (Akira)
vanillaice (Akira)
2021/12/02 (Thu) 13:40

To KrowNewsさん

ごめんなさい。

> 一点、質問があります。各ページの記事タイトル下に日付が2カ所表示されているうちの、右側の日付(おそらく記事の最新更新日〜の部分を丸ごと削除したい〜

この件を失念しておりました。
えっと、これもちょっと再考を促したい件です ^^;
どうされるか方針をお聞かせください。

googleにとってより重要なのは「最終更新日」です。なのでこの部位のマークアップは

<time class=grid-datetime datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>年<%topentry_month>月<%topentry_day>日</time>

と、こうして time要素 を利用しています。time要素というのは今回のような「ブログ」で言えば「記事を書いた、あるいは修正をした日付」をダイレクトに伝える役割を持ちます。
「一方記事を書いた日」つまり更新のことは考慮しない日付の方はdiv要素としてマークアップしています。
googleのアルゴリズムによって「おそらく日付であろう」というのは伝わりますが、time要素ほどの確実性はありません。

ここで考慮して頂きたいのは
① time要素を残すのか、
② div要素を残すのか
です。

time要素を残した場合、初回投稿日は不明になります。
div要素を残した場合、修正があったのかどうか、あったのならばそれはいつなのか、の情報が不明になります。
あるいは
③ 初回投稿日を残してtime要素に書き換えるか。

Magazineテンプレートでは「構造化マークアップ」というのを導入しており、これによって記事のステイタスがgoogleに正確に伝わるようになっています。③を選択した場合はこの構造化マークアップの内容と食い違いが出ます。また、検索結果に表示される日付は恐らく更新した日時になります(googleのクロール状況にもよります)

上記を考慮し、①②③のいずれを選択するか教えてください。それぞれに作業が異なります。
あとは
④構造化マークアップを取り除く
という方法も追加しておきます。この場合は「構造化マークアップ削除 + div要素を残す」ということになります。ご検討をお願いします。
最も良い方法は「そのままにしておく」ことです ^^;

KrowNews
2021/12/02 (Thu) 21:14

To vanillaice (Akira)さん

vanillaice (Akira)様

大変お世話になっております。諸々、親切に教えていただきありがとうございます。

僕としては、記事を書いた日(初回投稿日)の日付のみが表示されるようにしたいと考えております。もしくは、難しいかもしれませんが、Yahoo!ニュースが記事の一番右下に表示させている(https://news.yahoo.co.jp/articles/71d82629c130a6881c30fa4127508753155513a9)ように、最終更新日はなるべく目立たないところに表示させたいと思っております。

これは、サイトの運営上「いつ修正があったか」という情報を表示させておく必要性がないためです。

ですので、日付の表示は「初回投稿日のみ」で、最終更新日の日付は表示しない(表示さえされていなければ大丈夫です)ようにできる、もしくは、最終更新日はなるべく目立たないところに表示させる、最善の方法をご教授いただきたいです。

わがままで申し訳ありません…お忙しいところ恐縮ですが、教えていただけると幸いです。m(_ _)m

https://krownews.jp/

vanillaice (Akira)
vanillaice (Akira)
2021/12/03 (Fri) 00:48

To KrowNewsさん

お疲れ様です。

そうですね。記事内容の特性を考えると修正日時は必要ないかもしれません。ただ例えば同じ件で重要な追加事項があったとして追記した場合に上手く働かない可能性はあります。

おすすめは「更新日を削除 + 投稿日のマークアップをtime要素に変更 + 構造化マークアップを投稿日に変更」ですかね。

<time class=single-row
で検索するとhtml内に見つかります。この文字列を含み直近の
</time>
までを削除。

続きまして、削除したtime要素のすぐ上には
<div class=single-row>
<svg class=svg-inline viewBox="0 0 20 20" role=img><use xlink:href=#inline-clock></use></svg> <%topentry_year>年<%topentry_month>月<%topentry_day>日
</div>

というのがありますので、こちらをtime要素に変更し以下の通り。

<time class=single-row datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00">
<svg class=svg-inline viewBox="0 0 20 20" role=img><use xlink:href=#inline-clock></use></svg> <%topentry_year>年<%topentry_month>月<%topentry_day>日
</time>

続きまして
dateModified
で検索するとhtmlの下の方に見つけられますので、この文字列を
datePublished
に変更、それに続く内容が
"<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day>T<%topentry_modified_hour>:<%topentry_modified_minute>:<%topentry_modified_second>+09:00"
となっていますので、modified_ を全て削除して以下の通り

"<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"

以上です。よろしくお願いお願いします。

-
2021/12/03 (Fri) 06:32

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

KrowNews
2021/12/03 (Fri) 07:09

To vanillaice (Akira)さん

vanillaice (Akira)

お世話になっております。無事変更できました!
諸々、要望を聞いていただきありがとうございました。m(_ _)m
大変参考になりました、感謝の気持ちでいっぱいです。
また何かありましたら質問させていただきます。m(_ _)m

vanillaice (Akira)
vanillaice (Akira)
2021/12/03 (Fri) 14:32

To タイトル文字サイズの件 内緒さん

恐れ入りますが、以下のページにある注意事項を読まれまして再質問をお願いします。

https://vanillaice000.blog.fc2.com/blog-entry-785.html

まめ
2021/12/03 (Fri) 15:52

タイトル文字

Akiraさん、
早速のお返事を有難うございます。
ちょっとかってが分からなかったようで、
なるほど、各テンプレート専用記事での受付というのがあるのですね。
見逃しておりました。どうも有難うございます。

-
2022/02/21 (Mon) 09:40

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2022/02/21 (Mon) 13:24

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/02/21 (Mon) 21:51

To Magazine 構造化マークアップの件 内緒さん

こんばんは ('0')/

えっとですね、再DLを行って、新しくDLした方のマークアップをコピペした方が良いです(現時点で内容が正しくありません)
<script type=application/ld+json>
で検索し、直近の下の方にある</script>までが対象です。

そうですね。構造化マークアップについては十分な知識があればカスタマイズして頂いて構いませんが、そうでなければそのまま利用されるのが一番です。
そして大きなカスタマイズを行うときは必ず複製を取るようにしてください。カスタマイズ前のものを参照できるようにしておけばすぐに内容を戻せます。いずれにしろ配布中であれば公式ページから再DLできますので、それでもOKですが、私の都合で配布を終了することもありますので、そうなるともう原本を入手することができなくなってしまいます。

------ 別件

htmlソースの中に

の記号が点在しています。以前も同じ件で修正をした気がしますので、記号を間違えやすい傾向にあるのではないかと思います。
"


は全く別の記号なので注意してくださいね。

-
2022/02/21 (Mon) 22:23

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/02/21 (Mon) 23:58

To 記号エラーの件 内緒さん

まず、ページが該当しているかどうかもわからないはずなので、とっても大変ですが1ページづつバリデートにかけてください。
バリデートツールは以下の記事を参考にブックマーク登録を行います。

参考記事: ブログ作成に役立つブックマークレット(W3C validationの章)
https://vanillaice000.blog.fc2.com/blog-entry-781.html

登録したら、ページを開いた状態でブックマークをクリックし、検証。
FC2ブログで避けられない警告と、アフィリエイトの中におかしなscriptタグがあってそれらもエラーですが、今回は無視して赤字のエラーに集中してください。
ページによって本件とは別のエラーが出ている可能性もありますが、本件該当エラーは
Bad value
または
" in an unquoted attribute value
という文言で始まっているものが対象です。

とにかくページ内にエラーがあるのか無いのか知るところからなので、まずはブックマーク登録を。

-----
修正方法については、本来はテキストエディター(htmlエディター)をインストールして行うのが確実です。特にカスマイズをよく行うという方には必須のツールです。インストールが可能ならば以下の記事を参考に入手してください。

参考記事: テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします
https://vanillaice000.blog.fc2.com/blog-entry-790.html

バージョン3で説明していますが現時点で最新バージョンは4なので最新をDLされると良いですね。
インストールが難しい、面倒 等という場合はさきほどのバリデート結果を頼りにブラウザ上で作業してください。エラー付近のテキスト内容をコピーして文字列検索しあたりをつける、とかそういう感じになりますかね (∵`)
たぶん目が疲れちゃうのでエディター入手した方が良いと思う ^^;

-----
一応アフィリエイト(ではないかもしれないけど)のエラーは
<script async>
というものです。script要素にasync属性を付けられるのはsrc属性を含んでいるときだけなのでエラーです。

×
<script async>
document.getElementBy......etc
</script>


<script src="/xxx/yyy.js" async></script>

-
2022/02/22 (Tue) 05:18

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2022/02/22 (Tue) 21:46

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/02/22 (Tue) 22:25

To エラーの件 内緒さん

こんばんは ('0')/

scriptのエラーは今回「無視してください」とお伝えしたので、一応エラー内容の説明をしただけです。
JS実行後にsrc属性があるかどうかは関係なく、そのJSを実行する際にその実行に対してasync(非同期処理)するかどうか、なので、結論としてはasyncにはなっていません。けれども実害はほぼ無いですし(asyncと書いてあるけど実際にはasyncできない、というだけです)、提供元が問題無いと言うのですからそのままで。

KrowNews
2022/03/10 (Thu) 18:49

To vanillaice (Akira)さん

お世話になっております。KrowNews(https://krownews.jp/)です。


新しく広告を貼るために運営者情報(問い合わせメールアドレス等)・利用規約・プライバシーポリシーの設置が必要でして、新規記事として投稿する以外で何か設置する方法ってないでしょうか…?

新規記事として投稿すると、一番目立つところに出てしまってGoogleニュースにも送られてしまうので、他には過去記事を改変するぐらいしか思いつかなく…ちょっと知恵をお借りしたいですm(_ _)m。

vanillaice (Akira)
vanillaice (Akira)
2022/03/11 (Fri) 10:36

To KrowNewsさん

こんにちは ('0')/

htmlファイルを作成してはいかがでしょうか。documentを書かなければいけませんし、多少のデザイン構築も必要ですが、RSSに含まれることはなくなります。
FC2ブログには固定ページ機能がありませんので、それしか無いと思います (∵`)

念の為

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="author" content="著者名">
<meta name="description" content="ページ概要文">
<title>ページタイトル</title>
<style>ここにCSS</style>
</head>
<body>
ここに内容
</body>
</html>

上記内容で作成し .html で保存、FC2ブログアップローダーでアップロード、リンクをそのアドレスに飛ばす。
サイトマップに載っていない、ディレクトリが合わない(//blog-imgs-サーバー番号.fc2.com/〜.html のURLになります)、などの点は目をつぶるしかありません。
問い合わせについてはメールプラグインの利用をおすすめします。

KrowNews
2022/03/11 (Fri) 19:08

To vanillaice (Akira)さん

お世話になっております。

KrowNews(https://krownews.jp/)です。アドバイスありがとうございましたm(_ _)m。
なんとか設置することができました。大変感謝しておりますm(_ _)m。
また何かあった際は質問させていただきますm(_ _)m。

vanillaice (Akira)
vanillaice (Akira)
2022/03/12 (Sat) 17:27

To KrowNewsさん

こんにちは ('0')/

この方法で大丈夫だったでしょうか。FC2ブログが固定ページ機能を提供してくれると良いんですけどね。
お疲れ様でした :)

KrowNews
2022/04/07 (Thu) 07:18

個別記事の読み込み速度改善について

お世話になっております。KrowNews(https://krownews.jp/)です。

現在、個別記事のページ読み込み速度改善に取り組んでおりまして、全ての記事の画像を1枚1枚軽量化したり、ページ内のリンク数をできるだけ減らしたりなど、ひとまず自分でできそうなことはやってあります。

そこで質問なのですが、Akira様の書かれている「スピード強化について」の項目の「Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません」という部分について、個別記事にユーザーが任意掲載する画像に遅延読み込みを適用するにはどうしたら良いでしょうか?(※現在弊サイトでは、個別記事本文の頭に画像を置いております)

グーグルサーチコンソールではPCのURLは問題なく全て「良好」判定なのですが、モバイルのURLがLCP「2.5秒超」で「改善が必要」と判定されてしまっているのです。色々改善してLCPは2.6秒まで下がったのですが、ここからがなかなか下がりません…。PageSpeed Insightsで記事ごとにチェックすると、LCP1.9秒とか出たりするんですが…。

お手隙の際で構いませんので、ご回答いただけると幸いです。m(_ _)m

vanillaice (Akira)
vanillaice (Akira)
2022/04/07 (Thu) 17:17

To KrowNewsさん

こんにちは ('0')/
一番簡単なのはimg要素にloading属性をつけることです。

例)
<img src="xxx.jpg" width="1000" height="1000" alt="xxx">

<img src="xxx.jpg" width="1000" height="1000" alt="xxx" loading="lazy">

こちらはブラウザの機能によるlazyloadなので、テンプレート変更後も有効です。(ただしふわっと表示させたり、等はできません)

KrowNewsさんの場合最も必要な対策はアフィリエイト関連JSです。これらにテコ入れしないと改善はほとんど見込めないと思います (∵`)
例えばオフスクリーン(below the fold)で指摘されている画像は全て第三スクリプト(関連記事)によるものですし、「使用していないjs」についても全てテンプレートや個人で書いた記事とは無関係のものです。
特に関連記事は掲載数が多ければ多いほど減点されますのでスコアの上げようがないというか (´・ω・`)

できる対策としては
・全ての操作可能なimgに loading="lazy" 付与
・全ての操作可能なimgに width, height属性の明示
・重要な画像には alt属性の値に意味の通る文言あるいは文章をしっかり書く
ぐらいでしょうか。

KrowNews
2022/04/07 (Thu) 21:11

Akiraさま

お世話になります。諸々教えていただきありがとうございます。m(_ _)m
まずは教えていただいたできる対策をやり、後ほどレコメンドウィジェットの提供企業にも相談してみようと思います。
大変感謝しております。また何かあった際は質問させていただきます。m(_ _)m

KrowNews
2022/04/15 (Fri) 03:00

Akira様

お世話になっております。KrowNews(https://krownews.jp/)です。
LCP改善の件ですが、とりあえずGoogleSearchConsole上では、PCと同様にモバイルのURLも全て「LCP2.5秒超、改善が必要なURL」→「良好なURL」に判定が変わりました。

https://imgur.com/a/VUCoBVv(※GoogleSearchConsoleの画面のスクショです)

ご教授いただいた画像の遅延読み込み等を実施後に、先日LCPが2.5秒まで下がり、数日経過した昨日、この判定に変わりました。教えていただきありがとうございました。m(_ _)m

vanillaice (Akira)
vanillaice (Akira)
2022/04/15 (Fri) 17:03

To KrowNewsさん

こんにちは ('0')/
多少でも改善されたのなら良かったです。お疲れ様でした :)

関連記事リスト(第三サービス)の日付がJSエラーですが大丈夫でしょうか(こちらはテンプレートとは無関係なのでサポート外です)

あと、バナー(ヘッダーのロゴ画像)なんですが、W200 H48のものをそのまま表示しているので「Serves images with low resolution(画像の解像度が低すぎます)」という指摘をされています。

参考記事
スマートフォンで画像がぼやける際の対処と画像容量削減
https://vanillaice000.blog.fc2.com/blog-entry-376.html

私のパソコンは5Kの高dpiなのでぼやけて不鮮明な状態で見えています (∵`)
ここは変更された方が良いんじゃないかな、と思います。

KrowNews
2022/04/16 (Sat) 03:21

Akira様

お世話になっております。KrowNews(https://krownews.jp/)です。
ヘッダーのロゴ画像の件、ご指摘ありがとうございます!
設定当初からなんだかぼやけてしまってるなあと思っていましたが、こういった知識には疎くて放置しておりました。
デザイナーからもらったオリジナルの画像を、参考記事の通りに設定し直したら鮮明に表示されました。ありがとうございます。大変感謝しております。m(_ _)m

「関連記事リスト(第三サービス)の日付がJSエラー」については、企業の方に申し伝えておきます。こちらもご指摘ありがとうございます。m(_ _)m

KrowNews
2022/05/23 (Mon) 10:32

ユーザータグの不具合

Akira様

お世話になっております。関連記事リストのJSエラーについては、企業の方に申し伝えて現在「確認中」とのことです。

本題ですが、今日になってユーザータグが機能してくなってしまいました。昨日まで問題なかったのに、今日になって急にユーザータグを設定しているのに、ユーザータグのリンク先に記事が表示されなくなってしまいました。

例えば「綾野剛」というユーザータグを設定している記事はいっぱいあるのですが
https://krownews.jp/blog-entry-3264.html
https://krownews.jp/blog-entry-3260.html
https://krownews.jp/blog-entry-3212.html


記事が1つも表示され無くなってしまいました↓
https://krownews.jp/?tag=%E7%B6%BE%E9%87%8E%E5%89%9B

特にhtml等はいじってないのですが…。

FC2ブログのサポートにも問い合わせをしましたが、Akira様の知恵もお貸しいただけると幸いです…。

KrowNews
2022/05/23 (Mon) 11:20

先ほど、不具合が治ったようです!
お騒がせしました。

vanillaice (Akira)
vanillaice (Akira)
2022/05/29 (Sun) 21:57

To KrowNewsさん

お返事大変遅くなりごめんなさい。
解決済、ということで大丈夫でしょうか。FC2の一時的不具合だったのかもしれませんね。お疲れ様でした :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)