Magazineテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | 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カラム |
| サイドメニュー --- 下 | サイドメニュー --- 下 | サイドメニュー --- 下 |
- 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要素を最新バージョンのそれと差し替え。
まがじん 
承認されました。ありがとうございます。当記事の公開が遅れたかもしれません。ごめんなさい (*_ _)
サンプル
Samples
画像クリックでデモ画面へ
画像クリックでデモ画面へ
画像クリックでデモ画面へ
カスタマイズのコツ
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設定「有効にする」
個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。
コメント設定 > コメンテーターの情報「記憶する」
管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
IE非対応
This theme is incompatible with Internet Explorer.
全バージョンの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
- ページ内スクロールボタンの位置について
現在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'●)/
There are no comments yet.