attention admin about comments trackbacks you may also like

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

2019年11月01日
テンプレート
20
HTML5 CSS4 RWD
Magazineテンプレート

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カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下

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

サンプル

Samples

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

カスタマイズのコツ

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向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

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

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-left: var(--gap); 緑部位 left を right変更

表示件数を増やす前に

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 before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(20)

There are no comments yet.

-

2019/11/01 (Fri) 17:05

管理人のみ閲覧できます

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

Akira

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

To Firefoxの件 内緒さん

こんばんは。

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

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

-

2019/11/01 (Fri) 19:32

管理人のみ閲覧できます

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

Akira

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

To Firefoxの件 内緒さん

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

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

-

2019/11/11 (Mon) 21:57

管理人のみ閲覧できます

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

-

2019/11/11 (Mon) 22:00

管理人のみ閲覧できます

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

Akira

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

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

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

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

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

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

-

2019/11/12 (Tue) 20:20

管理人のみ閲覧できます

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

-

2019/11/12 (Tue) 20:23

管理人のみ閲覧できます

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

Akira

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

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

こんにちは。

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

深緑の女魔術師

2019/11/15 (Fri) 18:56

お借りします

深緑の女魔術師です。

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

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

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

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

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

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

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

以上です。

-

2019/11/16 (Sat) 08:57

管理人のみ閲覧できます

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

Akira

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

To 深緑の女魔術師さん

こんにちは ('0')/

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

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

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

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

Akira

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

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
無事に表示するようになりました。
お手間をお掛け致しました。


Akira

2019/11/16 (Sat) 11:53
vanillaice (Akira)

To NOBさん(重要追記あり)

はい。修正確認致しました。
メモや印を消し忘れることは私もよくあります(笑)
お疲れ様でした :)

----- 追記
今個別記事を拝見して気づきました。記事内の定型文「このブログ〜」の構文エラーによってそれ以降の内容(関連記事リスト, 受信コメント一覧, サイドメニュー, フッター)など全てが太字(しかもstrongタグ)になっています。
トップページと個別記事でサイドメニュー部の文字の太さを比較すると気づくと思います。

現在の内容(見やすいよう改行を入れてあります)

<strong><strong>このブログ「<span style="color:#FF0000">O</span>NE SHOT</strong>」はブログランキングに参加しています。<br />
皆様の応援を励みに頑張っておりますので良かったら下の「バナー」をクリックお願いします!<br />
<br />
<a href="URL" target="_blank"><img src="URL" width="88" height="31" border="0" alt="" /></a><br />
<br />
<br />
<br />
<a href="URL" target="_blank"><img src="URL"></a><br />
<br />
<br />
<br />
<a href="URL" target="_blank"><img src="URL" title=""></a>

書き換え推奨内容
今の見た目を概ね踏襲する内容です。

<div class="ranking-wrapper">
<div style="font-weight: bold; margin-bottom: 1em;">このブログ「<span style="color:#FF0000">O</span>NE SHOT」はブログランキングに参加しています。<br>
皆様の応援を励みに頑張っておりますので良かったら下の「バナー」をクリックお願いします!</div>
<a href="URL" target="_blank" style="margin-bottom: 3em;"><img src="URL" width="" height="" alt=""></a><br>
<a href="URL" target="_blank" style="margin-bottom: 3em;"><img src="URL" width="" height="" alt=""></a><br>
<a href="URL" target="_blank"><img src="URL" width="" height="" alt=""></a>
</div>

URLとalt、及びwidth, heightの値はご自身で追加してくださいね。alt属性は必須なので必ず書くようにしてください。無理に内容を考えずとも
<img src="URL" alt>
あるいは
<img src="URL" alt="">
と値を空にしておけばOKです。
width, height属性はできれば付けた方が良いですね(htmlのレンダリング特性に有効)
それぞれの画像の縦横サイズを確認して記載してください。必須ではありませんので無理だと思えば属性ごと削除。

例)いずれもOK
<img src="URL" width="88" height="31" alt>
<img src="URL" alt>

旧投稿画面の「改行の扱い『自動』」を利用されている場合は<span style="text-decoration: underline;">任意改行以外の</span>コード間の改行を全て取り除いて横一列にして記載してください。推奨コードの場合の任意改行は各 </a> の後ろについているものがそれにあたりますので、この部位の <br> を削除してキーボード押下。

で、これ残念ですが構文エラーの内容は全て手作業で修正が必要です。推奨内容のようにclass属性が付いていればJSでどうにかできたんですが ^^;

参考記事: クラス名をつけることの重要性
https://vanillaice000.blog.fc2.com/blog-entry-640.html

NOB

2019/11/16 (Sat) 17:06

To Akiraさん

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

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

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

Akira

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

To NOBさん

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

NOB

2019/11/16 (Sat) 17:59

こんばんは。

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

Akira

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

To NOBさん

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

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧