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

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

テンプレート 配布中テンプレート
2021/08/18
23
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS4RWDDarkmode
ordinary_daysテンプレート

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

名称 ordinary_days
動作確認済みブラウザ Google Chrome Firefox Safari Vivaldi Edge
トップページ記事並び 要約表示タイプ
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
OSダークモード対応 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Lighthouseスコア
(トップページ平均)
Lighthouseスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細はARTICLE DEMOを参照
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 IE非対応
パソコン タブレット スマートフォン
1カラム 1カラム 1カラム
サイドメニュー --- 左ドロワー サイドメニュー --- 左ドロワーサイドメニュー --- 左ドロワー
最終更新 2022.7.9
  • prefetchの数を調整
更新履歴 2022.1.6
  • 個別記事ページナビ iOS14でサムネイルが時折表示されない件修正
  • コメント関連ボタンツールチップ調整2点「コメントの投稿」の表示位置を右基点に調整 + コメンテーターの名前文字制限

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再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_entry-image-prev");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_entry-image-next");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_entry-image-cat-prev");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_entry-image-cat-next");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つ分割に変更しています。

【コメント関連ツールチップ修正】
マウスホバーで「To xxxさん」とツールチップ表示されるボタンにおいて、ハンドルネームにとても長い文字列を記載された場合、ツールチップの横幅によって画面超過が起こりますので、文字数の制限(末尾省略)と併せてツールチップ表示の基点を中央から右に移動させました。
<footer class="comment-info"> で検索するとhtml内に1箇所あります。このfooter要素の内容を最新バージョンからコピペしてください。

続いてスタイルシートの末尾(最終)に以下の内容を追加。

@media screen and (min-width: 769px) {
  /* comment btn */
  .btn-a .info-tooltip {
    display: inline-flex;
    max-width: 150px;
  }
  .tooltip-name {
    flex: 1;
    min-width: 0;
    margin: 0 .3em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .comment-btn-item:last-of-type .info-tooltip {
    right: -8px;
  }
  .comment-btn-item:last-of-type .btn-a .info-tooltip::before {
    right: 20px;
    left: auto;
  }
}
更新履歴 2021.12.29
  • コメントを任意削除できない件修正
「ordinary_days」「wash_ashore」コメント削除できない件を修正しました

「ordinary_days」「wash_ashore」コメント削除できない件を修正しました

コメントを任意削除できない という問題が発生していました。該当テンプレートは以下の2つです。...

おぉでねりぃ でいず
承認されました。ありがとうございます。

先回のリリースから1年以上経過しています。これまでのテンプレートの仕様にいくつかの改善を加えていますので、興味のある方はこの下にある折りたたみ部位を開いてご覧ください。以降の内容は通常通りテンプレートの仕様説明です。

  1. head要素内 meta description の書き方を変更し、新機能の「SEOアドバイザー > title・descriptionタグチェック」での検査を容易にしました。
  2. lazyload適用img要素のダミーをdataURIから透過gifに変更し、新機能の「SEOアドバイザー > 記事内リンクチェック」での検査を容易にしました。
  3. カスタマイズが予想される箇所のガイダンスを増やし、英文ガイダンスも追加しました。
  4. 多言語対応を強化しました。
  5. ページ送りのサイズを大きく、押しやすくしました。
  6. 12px未満のフォントの使用を排除しました(個人の記事への影響はありません)
  7. ヘッダー内ナビゲーションのカテゴリリストで現在リンク(カレントリンク)をわかりやすくしました(カテゴリページのみ)
  8. 記事が「子カテゴリ」に属する場合に親カテゴリも表記するようにしました。
  9. ドロワーサイドメニュー展開時に背面のメインコンテンツ(body)がスクロールしないよう調整しました。
  10. 記事の横幅を変更しやすくしました(グリッド表示のページへの影響はありません)
  11. カスタマイズを前提にダブルクォーテーションの省略・終了タグの省略を廃止しました。
  12. カテゴリページでのパンくずリストカテゴリ名表記(親子)を改善しました。
  13. コメント本文投稿時、入力に応じて高さを広げるようにしました。
  14. トラックバックURLにコピーボタンを追加しました

1. head要素内 meta description の書き方を変更し、新機能の「SEOアドバイザー > title・descriptionタグチェック」での検査を容易にしました

テストはしやすくなりましたが、htmlでの見た目が非常に複雑・難解になりました。アドバイザーテストでの「FC2からの推奨」内容と比較しやすくした結果、こういう弊害となりました。meta要素自体をカスタマイズすること自体は稀だろうと思います。

その代わりにhead部位に「何かを追加する」際のガイダンスを増やしてあります。必ずガイダンスに従って作業を行ってください。

2. lazyload適用img要素のダミーをdataURIから透過gifに変更し、新機能の「SEOアドバイザー > 記事内リンクチェック」での検査を容易にしました

こちらもテストを優先しました。dataURIは 通信リクエストが発生しない ため、テストが結果を「リンク切れ」として返してきます。実際はリンク切れではなくそもそもリンクではない、ということなんですが、実際のリンク切れが存在している場合にこのdataURIの結果が邪魔になると思いますので、通信リクエストの発生するgif画像へと変更しています。

dataURIの利点を取りたい、という方は

https://blog-imgs-106.fc2.com/v/a/n/vanillaice000/spacer.gif

を全て

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

と差し替えてください。

6. 12px未満のフォントの使用を排除しました。

Lighthouseでは12px未満のフォントが用いられると指摘が行われます。ところが実際はスマートフォンでは11px程度なら割とフツーに見れてしまうんですよね (∵`)
とはいえ12px未満のフォント利用は今後は個人の(自己責任の)カスタマイズ、という扱いにしたいと思います。みなさんが作成した記事内で意図的に指定した12px未満フォントサイズが強制的に補正されることはありません。

13. コメント本文投稿時、入力に応じて高さを広げるようにしました。

特にスマートフォンでは自身が記入したコメントの全体をボックススクロール無しで見られる方が便利だと思いますので調整しました。

14. トラックバックURLにコピーボタンを追加しました。

個人的には「トラックバックはもう必要ない」と考えています。恐らくFC2運営もその予定のようで、お気づきの方もいらっしゃると思いますが、新管理画面では「トラックバックの管理」が分類移行されています(「設定」分類から「ツール」分類へ)
とはいえまだ存在する機能ですから無視はできません。

現状ではFC2ブログ以外のブロガーさんがトラックバックを スマホから 利用したい場合、トラックバックURLを取得するinput要素が機能しませんので非常に苦労している状態です。そのためクリックでコピーできる機能を追加しています。ただ利用頻度はそんなに高くはないと思います。

サンプル

Samples

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

* OSのダークモードON/ OFFで背景色が切り替わりますのでご確認ください。

カスタマイズのコツ

A few tips on customizing

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

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

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

4. 色調変更に注意
色調(フォント色や背景色)の変更を行った場合、Lighthouseのスコアが著しく低下する可能性があります。自己責任の上、視認性に注意して変更を行ってください。

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

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

Lighthouseスコアについて

About 'Lighthouse' score

仕様表中のスコアの一番左「Performance」は主に通信状態やサーバー状態の指標です。FC2ブログサーバーは調子の良いときは95点以上出ますが、場合によって50以下、ひどいときは10程度を記録することもあります(20を下回る場合のほとんどはサーバーに障害が出ている場合です)

他には「画像」についてwebpなど次世代拡張子の利用を推奨されますが、FC2ブログでは未サポートです。あとDOMの大きさ。これも基本は自動出力ですし、1ページあたりの記事掲載数などは個人設定で開放されていますので制限するのもどうかと(さすがに上限50件は過剰な掲載だとは思いますが)
「制限するのはどうか」というのは「私(Akira)が指図するべきでない」という意味であって、みなさんが個々に熟考して決めてね、という意味です。

テストを行ったときはたまたま98が出ましたが、流動的な数値ですから過剰に気にしないというか、しても仕方がない(ユーザーではどうしようもない)という点を事前にお伝えしておきます。

また、その他のスコアについてもカスタマイズ内容や記事の書き方によって大きく数値が変わることがあります。主に

  • JSウィジェット(アクセス解析, RSS表示, Twitterタイムライン など)の導入
  • 色調(フォント色, 背景色 など)の変更によるコントラスト比(contrast ratio)の低下
  • フォントサイズ変更(デフォルトよりも小さくする場合, 特にサイドメニュープラグイン)
  • 行間の変更(デフォルトよりも狭くする場合)
  • 掲載プラグインの内容
  • 記事やサイドメニューへの掲載画像の容量を削減していない
  • コメント欄で使用されたフォント色

などお気をつけください。ただあまりスコアを気にしすぎると対策に時間を使ってブログ更新が滞ったり、ブログの運営自体嫌になってしまったりするもこともありますので、ほどほどに、という感じで ^^;

例えば「コメント欄での色使用」は訪問者がコメントツールバーを利用するかどうか、するならばどんな色を使うのか、まで管理することはできませんし、使用された色に目くじらを立てるのもアレなので。気になって仕方がない(コメント内容のせいでスコアが落ちるのが気になる)という方はコメントツールバーを削除する、といった極端な方法を取るしかありません。

他にもSNS系各社のブランドアイコン色によって減点される、というトホホなこともあります(笑)
あとはねー、タグに使うワードなんかも指摘・減点されること結構あります。どうせーっちゅーの、ねぇ? (´・ω・`)

と、そんなこんなで「スコアよりも重要視すべきもの」というのは意外とありますので、あまりガチガチに構えない方が良い、と個人的には思っています。気にしすぎると何もできんからさー (´・ω・`)

全体幅の調整(グリッドレイアウトページ)

How to change width in grid layout

メイン + サイド を合わせた横幅は最大 1200px、記事部位最大横幅は 850px です。記事幅を直接指定する箇所はありませんので、最大幅の数値を調整してください。

--width-whole: 1200px;/* 全体横幅(the total width) */ という箇所がありますので、緑部位 1200 を希望のサイズに書き換えます。

記事幅の調整(個別記事ページ)

How to change width in article

記事の最大横幅をダイレクトに指定できます。--width-entry_max: 900px;/* 記事最大横幅(specific width for an post) */ の緑部位 900 がデフォルトで、最大1200まで指定可能です。

補助カラムが必要な方

You can use optional column

アフィリエイトなど、サイドメニュードロワー内に格納されたくない場合はオプションのカラムをご利用ください。

注)第2カラムが必要な方ここから で検索すると記載すべき部位が出てきます。

<!-- 注)第2カラムが必要な方ここから(if you need 2nd column(below main column), from here...) -->
<!-- この行削除(remove this line to activate optional column)
<div class="optinal-column">
ここに掲載したいhtml
</div>
この行削除(remove this line to activate optional column) -->
<!-- /第2カラムが必要な方ここから(... to here) -->

横に最大3つ並ぶよう調整してあります。ASP各社からレスポンシブタイプのコードを取得するようにしてください。また、横いっぱい(ブラウザ横幅ではなくメインカラムと同じ横幅)を利用したい場合は <div class="optinal-column"> の緑部位を削除し <div> と修正してください。

ガイダンスに従って然るべき部位を削除(コメントアウトの解除)を行うまで有効になりませんので、処理し忘れないよう注意です。

SNS関連ボタンについて

About sns buttons

全ページのフッターにはブログ管理人の各SNSタイムラインあるいはウォール, チャンネルなどへのリンクを掲載するためのアイコンを設けています。そして個別記事フッターには当該記事のシェア用アイコンがあります。

それぞれ 必要の無いものは削除 を行うようにしてください。放置する方が結構な割合でいらっしゃるようなんですが、ほかっておくとLighthouseスコアが下落するのはもちろんのこと、それ以前に空のリンクは訪問者が戸惑います。削除の際のガイダンスはhtml内にコメントをつけていますので参照してください。リンク設定のガイダンスも入れてあります。

逆に「増やしたい」という場合は 追加アイコンの準備はこちらではできません ので、ご自身で準備をし、デフォルト掲載htmlを参照しながら法則に則って追加を行ってください。

ブログタイトルがヘッダーに収まらない場合

How to adjust blog title length

ブログタイトル部位は2行まで表示可能です。パソコンではよほど大丈夫だと思いますが、タイトルが非常に長い場合はスマホ現行機種最小の320pxデバイス(iPhone SE系列など)で収まらないことも予想されます。2行を超える場合は省略されますのではみ出てしまうことはありませんが、ブログタイトルが省略されること自体避けたいので フォントサイズ調整 による対策をおすすめします。

該当箇所は /* ブログタイトルフォント大きさ, スマホ(font size of blog title in smartphone) */ で検索すると出てきますので、1.8 の数値を 1.7 や 1.6 など小さな数値に変更して様子を確認してください。
* 1.8 = 18px相当

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソルをデフォルト(pointer(指マーク)ではない、という意味)にしてあります。

タグについて

About tag page

記事ヘッダー下にあるタグは 自身のブログ内タグページへ の遷移です。

記事フッター上にあるタグは FC2ブログ タグポータルページへ の遷移です。

ポータルの方はハッシュが付いていますので、いわゆる「ハッシュタグ」として外部への遷移です。一般の閲覧者さんにも意味はわかるのではないかな、と思います。

自身のブログ内タグページは必要だとして、外部遷移(ハッシュタグの方)が不要な場合は 注)タグポータルリンクここから で該当部位が出てきますので、ガイダンスに従って削除してください。

スピード強化について

Behavior about navigation

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

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

lazyloadに関して、大手ブログサービスのほとんどが画像掲載に対し独自スクリプトによるlazyloadを採用していますけれども、FC2の場合は真逆の preload を採用しています。いずれも「アクセス直後の表示をできるだけ速く」という試みなんですが方法が真逆。

本来は「above the fold(ファーストビュー)内画像はpreload、below the fold(ファーストビュー外)の画像はlazyload」というのが理想だけれども両得というのはシステム上無理なので、個人的な好みのlazyloadは併せて採用することにしています (∵`)

「新着記事リスト」について

About recent list

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

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

できればプラグイン側を非表示にされた方が良いと思います。

補足事項

Handouts

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

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

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

弊ブログ提供ブログカードについて

About 'blogcard' provided on my website

弊ブログが提供している ブログカード をご利用の方で 引用文にシャドウが付いてしまう という方は、お手数ですが以下の内容をスタイルシート末尾(あるいはブログカード関連スタイルの最終)に以下の内容を追加してください。

.blogcard blockquote {
  box-shadow: none;
}

古くからご利用頂いている方は該当すると思います。比較的最近導入された方はデフォルトCSSに既に記載されていますので追加の必要はありません。

FC2ブログのエディターツールで挿入した引用はクラス名等の付加が無く、詳細な識別はできませんので、自由の効くブログカード側の操作をお願いします。

ブログカード作成ブックマークレットをアップデートしました

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

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

Cautions before asking for something.

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

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

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

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

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

Related post

Comments  23

-
2021/08/29 (Sun) 17:35

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/08/30 (Mon) 00:48

To ordinary_days 引用ブログカードの表示について 内緒さん

こんばんは。お知らせありがとうございます。
対処法を追記しましたので御覧くださいね。「弊ブログ提供ブログカードについて」の項目です。
よろしくお願いします :)

-
2021/08/30 (Mon) 11:08

管理人のみ閲覧できます

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

-
2021/11/25 (Thu) 10:25

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/11/25 (Thu) 20:24

To ordinary_days関連記事 内緒さん

こんばんは ('0')/

> マウスオンすると画像が揺れます。これはそのように作成されているのでしょうか?〜

デフォルトではそういった仕様になっていません。念の為デモ画面と比較・確認をお願いします。
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/entry_ordinary_days.html

原因はスタイルシート内に不正な文字列が含まれているためです。
related post
で検索すると1箇所あります。以下のスクリーンショットを参照し、余分なスラッシュを削除してください。

スクショ
https://blog-imgs-136.fc2.com/v/a/n/vanillaice000/sc2021_11_25.png

カスタマイズの際はお気をつけくださいね。現状ではCSS構文エラーのため、これ以降の一部デザインも無効になっています。一度ご確認ください。

お気遣いもありがとうございます :)

----- 別件
混在コンテンツが多く見受けられます。サイドメニュー部ランキングの下部にあるamazonリンクのgif画像が httpスキームです。webパーツ(ウィジェット)だと思いますので、提供サービスのページへ赴いてSSL対応のコードを再取得して書き換えることが可能だと思います。本件は修正必須です。
混在コンテンツについては以下のページをご参照ください。
https://vanillaice000.blog.fc2.com/blog-entry-895.html

-
2021/11/30 (Tue) 11:01

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/11/30 (Tue) 23:23

To ordinary_days ランキングの件 内緒さん

こんばんは ('0')/

> SSL対応ではないようです〜

その場合は残念ですが使用を停止するしかありません。
・検索順位等で不利になること
・セキュリティ意識の高いユーザーからのアクセスを失う可能性があること
を理解した上で使用するならば致し方ありません。

-----
画像がブレる件ですが、カスタマイズで追加したCSSが原因で症状が継続していますので、
.relate_dl a:hover {
で検索し、このルールセットの
text-decoration: underline;
の直下に

position: static;

を追加してください。それで直ります。
広範囲のa要素にposition: relative を指定するのはまぁ良いとして、topやleftを設けるのはあまり良くはない、という点を理解しておいてくださいね。今回の場合は「記事内にあるリンクの全て」に対し指定が行われており、関連記事も「記事内にあるリンク」に該当します。
よろしくお願いします。

-
2021/12/03 (Fri) 17:55

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/12/04 (Sat) 17:35

To ordinary_days 画像ブレの件 内緒さん(完了のご報告)

こんにちは ('0')/

ランキングの件、了解しました。画像ブレ修正も確認できました。お疲れ様でした :)

-
2022/08/06 (Sat) 13:26

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/08/07 (Sun) 00:14

Re: サムネ画像のトリミングについて

こんばんは ('0')/

まず、「デザイン」についてご理解を頂きたいのですが、ordinary_daysテンプレートは一般的に「グリッドレイアウト」あるいは「カードレイアウト」と呼ばれるものです。このデザインの最大の特徴であり良さというのは「全てのアイテムが整然と並ぶ」という点にあります。
そのため、どのような形状(特にアスペクト比 *縦横比のことです)の画像でも表示サイズを統一する、という処理が必須です。でないと全アイテムが同じサイズにはならないですよね。

一方これまでご利用頂いていたMochaテンプレートは一般的に「メイソンリーレイアウト」と呼ばれ、アイテム内の特に「画像」については各アイテムごとにサイズを違えます、というかオリジナルのアスペクト比に準じます。そのため、各アイテムの頭もお尻も揃いません。各アイテムがバラバラのサイズで、それぞれ前後の隙間を詰める形で配置が行われます。

ここまでの大前提をご理解頂いて、内緒さんのご希望が「画像は全てオリジナルのアスペクト比を遵守したい」とお考えであるならばordinary_daysを始めとするグリッド系のレイアウトはおすすめできません。お選びになるならばメイソンリー、あるいは「全文表示タイプ」のテンプレートが適しています。

ordinary_daysの画像表示領域を変更したい、という場合は以下の記事をご参照ください。
参考記事: トップページに縦長サムネイルを利用したい方向けカスタマイズ
https://vanillaice000.blog.fc2.com/blog-entry-1102.html

ordinary_daysの編集箇所は

.grid-image-wrapper::before

のルールセット内にある

padding-top: 100%;

太字部位 100 の数字を増減させてください。ただこれを行ったところで全アイテムの画像表示領域がそれに倣いますので、オリジナルのアスペクト比で表示されるわけではありません。

---------
メイソンリーレイアウトのテンプレートを検索してみたのですが、私がリリースした「Mocha」以外には無いようです。「Behavior」「Lilting」もメイソンリーですが、これらは「全ての画像アスペクト比を統一している方もメイソンリーが楽しめる」という意義で制作していますので、やはりオリジナルアスペクト比は無視されてしまいます (∵`)

参考記事: テンプレート選びの注意点
https://vanillaice000.blog.fc2.com/blog-entry-913.html

-
2022/08/12 (Fri) 23:54

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/08/13 (Sat) 00:13

To サムネイルの件 内緒さん

こんにちは ('0')/
ちょっとよくわからないので逆質問で申し訳ないのですが

> 短いほうの辺を100%とした正方形をセンタリングで生成する手法

これはもしかして「表示領域の調整」ではなく「サムネイルそのものを生成」という意味でしょうか。だとすると、サムネイル生成(トリミング)が許可されるのはFC2ブログ運営だけで、規格も決まっており

・ 72 × 72 の正方形
・ 300 × 200 の横長
・ 760 × 420 の横長
・ オリジナル原寸をそのまま表示

のいずれかです。正方形については72px四方の極小しかないのでほぼ使い物になりません。
ただ、これらのサムネイルは必ず「センターを基準」として作成されますし、テンプレートでの表示領域もデフォルトでは「センターを基準」にしていますので、構図自体は継承されているのではないかと思うのですが。
正方形サムネイルの生成を求める場合はFC2リクエストで提起しても良いかもしれません。

リクエストのページ
https://request.fc2.com/ja?service_id=5



ということで、現時点での解消策につきましては「ご自身がアップロードする画像を全て予め正方形でトリミングした上で、テンプレートの表示領域も正方形にする」しか無いのです (∵`)

これまでの内緒さんの画像を総合的に見て察するに、正方形よりも逆に横長にした方が良いような気がします。
.grid-image-wrapper::before

padding-top: 100%;

padding-top: 56%;
などに変更して様子を見られてはいかがでしょうか。

BAR72
2022/08/16 (Tue) 22:01

To vanillaice (Akira)さん

ありがとうございます。表現が難しくて、なかなかコミュニケートできなくすみません。
掲載した写真の真ん中のところだけが表示されるサムネが嫌なだけでして・・・、写真はすべて、端まで映ってこその構図です。でもグリッドで正方形が並ぶのは見ていてすっきりしますし、テンプレを変えたかったのですが、以前のmochaのほうが自分が意図するビジュアルになるのであれば、、、と、元に戻すことにしました。

お騒がせして、なんだか申し訳ありません。

-
2022/09/14 (Wed) 00:42

管理人のみ閲覧できます

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

-
2022/09/14 (Wed) 00:53

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/09/15 (Thu) 12:22

To ordinary_days ヘッダーカテゴリ 内緒さん

こんにちは ('0')/

確認なんですが、ご質問(ご要望)は
・ナビゲーション(ページ最上部)にあるマウスオーバー表示される「categories」の削除
・個別記事下「同カテゴリページナビ」の削除

の2つでしょうか。タイトルには
> 個別記事ヘッダーのカテゴリ削除について
とあり、本文は
> コメントの下に前の記事と次の記事が表示されますが
の内容しか無いので念の為の確認です。

-----
【ナビゲーション内カテゴリ削除】

注)カテゴリリスト不要の方ここから削除

で検索するとhtml内に1箇所ありますのでガイダンスに従ってください。

【カテゴリページナビ削除】

個別記事ページナビ 同カテゴリ(page navi for article) 不要の方ここから削除

で検索するとhtml内に2箇所ありますのでガイダンスに従ってください。

よろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2022/09/15 (Thu) 12:35

To ordinary_days サイドメニューの順番の件 内緒さん

<!-- 注)最新記事リスト不要の方ここから削除(recent posts list, delete from here...) -->

で検索するとhtml内に1箇所あります。この近接(下の方)には

<!-- /最新記事リスト不要の方ここまで削除(... to here) -->

というコメントアウトがあり(<!-- から -->までをコメントアウトと言います)、この2つの行に挟まれた部位が recent の対象部位です(コメントアウト含む)ので、この範囲をカット(切り取り Ctrl + X)し、

今後は

<!--plugin-->

で検索するとhtml内に1箇所ありますので、そのすぐ上の行にペースト(Ctrl + V)します。
ペーストした後に 全角スペースでインデントの調整を行わないよう注意 してください。
わかりにくいかもなので、以下のスクリーンショットを参照して確認をしてくださいね。

https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/sc_2022-09-15.png

-
2022/09/17 (Sat) 13:42

管理人のみ閲覧できます

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

-
2022/09/17 (Sat) 14:02

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/09/17 (Sat) 14:56

To ordinary_days サイドメニューの順番の件 内緒さん

こんにちは ('0')/
まず、コメントの件は対処しました。

-----
> 順番を自由に変える事は〜

できますよ。
まずプラグイン表示の仕組みを理解しないと難しいと思いますので説明します。
まず、本テンプレートの recent は「プラグインではない」点に注意してください。公式プラグインで「最新記事一覧(サムネイル画像付き)」というのが提供されていますが、わざわざテンプレートに別途で recent を設けている理由は本記事中の『「新着記事リスト」について』の章に書いてあるとおりです。
テンプレートの recent のhtml(先日コピペで移動させた範囲がそれにあたります)を削除してプラグインに切り替えれば簡単に順序指定できますがデザインは現在のものと同じにはなりません。

FC2プラグインは3つのカテゴリに分けることができます。そしてそれぞれのカテゴリ内で表示順序を指定できます。

プラグイン管理ページ
https://admin.blog.fc2.com/control.php?mode=plugin

このカテゴリ分けを上手く利用してください。例えば現在カテゴリ分けをしておらず、プラグイン名称が以下の通りだとします。

例)
【プラグインカテゴリ 1】
AAA
BBB
CCC
DDD
EEE

仮に「AAA」の下に recent を持って来たい場合は

【プラグインカテゴリ 1】
AAA
【プラグインカテゴリ 2】
BBB
CCC
DDD
EEE

と分類し、recent のhtml内容をテンプレートhtmlの
<!--/plugin_first-->
のすぐ下の行に移動

など、カテゴリのグループの「上」あるいは「下」に recent を移動させればOKです。そのためにはカテゴリ分けを上手く利用してください。
スクリーンショットを参照しながら仕組みを理解してくださいね。色づけ範囲の各々「上」か「下」に移動可能です。

https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/sc_2022-09-17_1800.png

例)
<!--plugin_first-->
省略(プラグインカテゴリ1)
<!--/plugin_first-->
<!--plugin_second-->
省略(プラグインカテゴリ2)
<!--/plugin_second-->
recent のhtml
<!--plugin_third-->
省略(プラグインカテゴリ3)
<!--/plugin_third-->

の場合はプラグインカテゴリ2と3の間に recent が表示されます。

-
2022/09/17 (Sat) 21:22

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/09/21 (Wed) 22:42

To ordinary_days サイドメニューの順番の件 内緒さん(完了のご報告)

ご希望通りになったようで良かったです。お疲れ様でした :)

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