Decoyテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | Decoy |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 要約表示タイプ |
| 記事幅 | メイン --- 最大750px サイド --- 270px |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | あり(v3.4.1) |
| Font Awesome導入 | なし(インラインSVG) |
| Lazyloading導入 | あり |
| 構造化マークアップ | 個別記事のみ 「BreadcrumbList(パン屑リスト)」 「BlogPostiong」 |
| Page Speed Insigtsスコア |
|
| 固有機能 |
・ 画像にドロップシャドウ ・ 動画縦横比固定 使い方詳細はARTICLE DEMOを参照 |
| 推奨カスタマイズ | 左右カラム入れ替え, 色調変更 |
| ライセンス |
Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
スマートフォンでは右サイドメニューがドロワーに切り替わります。
IE11 表示に一部難あり
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 2カラム | 1 or 2カラム(デバイス幅依存) | 1カラム |
| サイドメニュー --- 右と下 | サイドメニュー --- 下 or 右と下(デバイス幅依存) | サイドメニュー --- 下 |
- FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
- jQueryを3.6.0にアップデート
- スマートフォンでコメント送信ボタンのテキストが読みづらい件修正
- コメント編集ページボタン周り余白調整
カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。
【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。
【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。
【コメント送信ボタン修正と余白調整】
#sendbtn, で検索し、このルールセットの transition: .3s ease-in-out; の直下に color: rgb(51,51,51); を追加。さらにその直下に margin: 20px 0; を追加。インデントにタブや全角スペースを利用しないよう注意。
過去の更新一覧
- ページ送りのJSを修正
- コメント返信のJS変更
- jQueryを3.4.1にアップデート
- 個別記事ページ送りの複製を可能にしました
複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する
- パーマリンク設定導入に伴う個別記事URL正規化
- パーマリンク設定導入に伴うページ送り変更
- コメント主のリンク表示用JS及びデザインの変更
- SVGのIE向け調整
- 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
- 受信コメント一覧とコメント投稿フォームのセクションを統合
- コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
- 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)
カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。
【重要】テンプレートの変更点2つについてお知らせ
既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...
</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加。
<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->続きまして <div class="visitor-fotter-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更。
<ul class="comment-info">
<!--comment_edit--><li class="separate-border"><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
<li class="separate-border"><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
<li><a href="#comment-top"><span class="svg-wrap"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></span></a>
<li><a href="#comment_form"><span class="svg-wrap"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></span></a>
</ul>続きましてスタイルシート末尾に以下の内容を 追加。
.comment-info {
margin-top: 10px;
text-align: right;
}
.comment-info li {
display: inline-block;
}
.separate-border::after {
content: "|";
margin: 0 .4em;
}#community" で検索するとhtml内に2箇所あります。2つとも #comment_form" に 変更。
続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="each-title"><span class="each-span">Add your comment</span></h3> までを 削除。
<!--/comment--> <form action="./" method="post" name="comment_form" id="comment_form">
上記のような形になっていればOKです。
続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。このすぐ上にある </article> の上に </div> を 追加。
</form> </div> </article> <!-- コメント投稿ここまで -->
上記のような形になっていればOKです。
続いてスタイルシート末尾に以下の内容を 追加。
#comment_form {
padding-top: 50px;
}
<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)
<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に
.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}
こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。
スタイルシート末尾に以下を 追加。
#inner-contents {
margin: 20px 0;
}
#inner-contents p:not(.relate-title) {
margin: 1.9em 0;
}記事内でp要素を利用している方向けなので必要がある方だけどうぞ。
以上です。よろしくお願いします。
- C版Safariでモーダル検索背景が白くなる件修正
- Font Awesome(JS)を廃しインラインSVGに変更
- レイアウト関連CSSの追加及び一部削除
- はてなブックマークシェアアイコンを追加
- 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
- 全記事リストと検索結果にコメント数とトラックバック数表示を追加
- カルーセルプラグインを変更(パフォーマンス向上)
- 要約ページの記事概要文を3行に制限
- 管理人コメントにプロフィールアイコン表示
- 個別記事のSNSシェアアイコンを記事下に移動
- Adminの表記をLog inに変更
- iOSのCSS filter関連バグの対処
不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、iOSバグへの一時的対処 や スライダーの構築を速くするなどのパフォーマンス改善 が含まれますので是非アップデートをご検討ください。
iOS12でCSSのfilterを使うと画像が乱れる件
iOSのどのバージョンから発生しており、機種限定なのかどうかも不明ですが、とりあえずiPhone XSのiOS12.1.2のSafariを始め第三ブラウザも同じような挙動を確認しています。...
- 個別記事コメント一覧「コメントトップへ戻る」ボタンが機能しない件の修正。
再DLが困難な方はhtml内に1箇所ある community-cm を comment-top に修正してください。
ご面倒おかけします。よろしくお願いします。
- iOS11.2.6でモーダルが開かない件修正
- Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
- 新変数導入による管理人コメント区別(ボーダー色違い)
iPhoneでの不具合修正も含まれます ので是非アップデート(再DL)をお願いします。
メンテナンスを行いました。
主な変更点は以下の通りです。
- 画像遅延読み込みをのJSを変更しました(デフォルトではグリッドページ及びカルーセルのみ適用)
- jQueryのバージョンを3.3.1にUPしました
- リセットCSSを最小限にし、一部CSS内容を圧縮しました
- フォントのサイズ指定にremを導入しました
- 構造化マークアップ及びパン屑リストを導入しました
- 個別記事の記事タイトルをh2からh1に昇格しました
不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。
- SSL化に伴う混在コンテンツ排除
- Microsoftブラウザ(IE11, Edge)の特定条件下でサイドメニューのリンクが押せない件に対処
Decoyテンプレート修正のお知らせ
ご迷惑おかけしております (*_ _)...
- SNSシェアリンクのUTF-8エンコード
- RSS新着サムネイルを削除しました
- Microsoft Edgeでカテゴリ間ページ送り(ブラウザ両サイド)の位置が狂う件(Edgeバグ)を修正致しました
- FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 動作が若干軽快になりました
- 一部JS動作をCSSに切り替え
- 関連記事サムネイルの整形
- ベンダープレフィックスの整理
- トップページ Comment, Trackback アイコン前に数字を追加しました
- その他微調整
- リストマーカーの位置を調整しました
- メンテナンスを行いました
「Decoy」「Life-is」「Noir」「Romantique_duex」メンテナンスのお知らせ
DecoyLife-isNoirRomantique_duex上記4テンプレートのメンテナンスを致しました変更点が少ないので一記事にまとめています主な修正点等ご確認頂きまして DLの有無をお決めください見た目や機能が大きく変わることはありませんがスマホ閲覧時にドロワー(スライドサイドバー)に広告が被ってお困りの方は再DLをおすすめします* 記事内容はほぼGirlOnWireメンテお知らせの記事のコピペです...
- head内情報一部のスペルミスを訂正しました
本ページの内容は2019年1月9日メンテナンス以降のバージョンが対象です。
最近の作業用BGMはPsyclon NineとDisturbedです(Psyclon Nine閲覧注意)
でこい 
白黒基調 + 差し色ビビッドピンク。承認されました。ありがとうございます。
サンプル
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
スマートフォン版の表示設定「利用しない」
レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。
検索バーの設定「利用しない」
タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。
コメント設定 > コメンテーターの情報「記憶する」
管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
スクロールアンカーについて
About scrolling ancho
左右いずれかのカラムの縦(高さ)が一方よりも短いときにスクロールで画面外へ流れていかないようストップがかかります(スクロールアンカー)
現時点で以下のような注意点があります。
- 「特定のプラグインやウィジェットのJS内容 + Google Chromeのグリッチ」でChromeブラウザ上でプラグイン・ウィジェットが表示されなくなる
- アフィリエイトによってはスクロールアンカーへの掲載禁止
特定のプラグインに該当する具体的なものは「FC2動画」「FC2カウンター」「アフィリエイト」など、JSで内容を取り込むタイプのものです。表示されない、という症状が出ている場合には スクロールアンカーの解除を行ってください。
注)スクロールアンカー不要の方 で検索すると該当部位が出てきますのでガイダンスに従って削除をお願いします。
Font Awesomeについて
About Font Awesome
Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。
FAがどうしても必要、という方はhtml内に
注)Font Awesome(JS)必要な方この一行削除
という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。
CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome
JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。
IE11の表示について
Gray scale filter doesn't work in Internet Explorer 11.
スライダーの画像はCSSのグレースケールで色を抜いていますが、IE11では表現できませんので明度を保った通常の画像が表示されます。
スマホでのドロワーメニューについて
About drawer menu in smartphone
スマホ閲覧時は右側のサイドメニュー(プラグイン1と2)が左からスライドするドロワータイプに切り替わりますので 常に表示しておきたいものはフッター(プラグイン3)への配置をお願いします。
パソコンでのドロップダウンメニューについて
About drop down menu in laptop
ドロップダウンがどうしても好きになれないけど作りました。えと カテゴリを入れてありますが 不要な方はどうぞ削除してください。
注)カテゴリドロップダウン 不要な方ここから削除
上記を目印にガイダンスに従ってください。カテゴリが少ない方は良いんですけども、私のようにアホほどある場合にはドロップダウンだととってもウザく操作性が悪いですね (´・ω・｀)
カテゴリはまとめて出力されますので途中で横に流すこともできませんし、よってズラ～っと縦に長くなります。
私のカテゴリは100いくつですか 140？ 
でもってドロップダウンを採用した際には固定(fixed)ができません。ドロップダウンの「中」にスクロールバーを設ければできますが。そうでない場合固定してしまうと画面縦幅超えた内容はどうやっても見られません(笑)
というわけでして 画面トップ位置に居る時だけ使えます。スクロールされますと別の固定ナビゲーションに切り替わります。
スマホではカテゴリドロップダウンは非表示になりますので、カテゴリ表示プラグインとの併用をおすすめします。
カテゴリの右横に About の項目を入れてあります。もしみなさんが追加したい項目がありましたらそこへ放り込んでください。
注)予備リンク
但し同様に スマホではこのドロップダウンは表示されません ので、ここからでなければ辿りつけないリンクなどを設定されませんようご注意ください。
左右カラム入れ替えの仕方
How to reverse the direction of rows
#float-container { を検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの padding: 0 60px 80px; の直下に flex-direction: row-reverse; を 追加。
続きまして #primary { で検索。2箇所ヒットし、やはり最初のものが対象です。この括りの margin-right: 60px; 緑部分 right を left に変更。
以上2手順です。
ドミナントカラー
Dominant colors
以下が基本色調です
数字の部分だけを抜き出して検索されますと 不透明度つきのものも全て出てきますので上手に活用してください(カラーコードクリックでコピーできます)
例) 51,51,51
| rgb(226,45,122) | リンク関連 など |
| rgb(51,51,51) | 記事文字色, フッター背景色 など |
| rgb(105,105,105) | サイドメニュー(プラグイン)文字色(リンク含む) |
| rgb(100,100,100) | フッタープラグイン3のタイトル背景色 |
| rgb(240,240,240) | フッタープラグイン3のタイトル色 |
削除可能なJSについて
Delete specific JS if you want to
特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。
【FC2検索バーを利用しない人は削除】
<!-- 注)FC2検索バー非表示の方ここから削除可 -->
各々上記を目印にガイダンスに従って削除。
個別記事ページ送りを複製する方へ
Cautions when copying pagination in permanent page
2020.3.25バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.