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

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

テンプレート
2020/04/01
116
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS4RWDDarkmode
Haloテンプレート

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

最終更新 2020.5.28
  • ページ送りのJSを修正
名称 Halo
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
OSダークモード対応 あり
構造化マークアップ 個別記事のみ
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カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下 サイドメニュー --- 下
最終更新 2020.4.13
  • 個別記事ページナビのhtml誤記を修正

へいろー
承認されました。ありがとうございます。

サンプル

Samples

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

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

カスタマイズのコツ

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

ダークモード対応について

Supporting Dark Mode - how it works

本テンプレートはOSのダークモードに対応しています。詳細についてはお手数ですが下記リンク先の ダークモード対応について の章をご確認ください。

El-zigzag - FC2ブログテンプレート

El-zigzag - FC2ブログテンプレート

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

記事横幅調整を行いやすくしました

Now you can easily change column width of article.

スタイルシート内に /* メイン最大横幅 */ という項目があり、デフォルトは 900px です。記事の横幅が900pxだ、という意味ですね。増減を行いたい方はこの900の数値を変更するだけで全体幅など自動調整できるようにしておきました。

注意点としては、個別記事以外のページも全体幅は連動していますので、あまり狭くしすぎると「トップページのアイテムが3つ並んでいたのに2つしか並ばなくなった」など生じます。全体幅が小さくなれば物理法則の当然の結果です。つまりどのページも全体横幅は同等になりますのでこの点だけ留意してカスタマイズを行ってください。

グローバルナビゲーション内のブログタイトル表示について

About your blog name in global navigation

ナビゲーションは縦サイズが限定されていますのでブログタイトルを安易に表示させると不味いことになり、実はなかなか処理が難しいんですが、今回は比較的 長いブログ名 の方は折り返して表示が行われるようにしてあります。ブログ名が長い、というご自覚をお持ちの方は調整の必要が生じるかもしれませんのでこの章を熟読して頂ければ、と思います。

パソコン(デフォルト最大横幅1250px)

デフォルトのナビゲーション最大横幅は 1250px です。ただし前章の「記事横幅調整」のカスタマイズを行った場合は指定内容に応じて増減があります。各部位の横幅は揃っている方が見た目に美しいのでそういう処理にしてあります。

かなり長いブログタイトルなんですがちゃんと収まっていますね。しかしタブレットやスマホなどデバイス変更やブラウザ幅が狭くなったりすると当然表示範囲は狭くなります。

タブレット(768px)

折り返して3行になりました。3行が限界かな、と思います。

スマートフォン(320px)

もうこれは ダメ ですね。ブログ名が省略されたり見切れたり、というのは好ましくありませんので、タブレット・スマホで折り返して3行以上になる、という方は フォントサイズを小さくする という処置しかありません。ブログ名が長い、というご自覚の有る方は 必ずタブレット及びスマートフォンの実機を利用するかブラウザ横幅を狭くするなどで、目視確認を行ってください。

フォントを小さくする必要のある方は /* ナビゲーション ブログタイトル文字サイズ */ で検索するとスタイルシート内に1箇所あります。10px の緑部位の数値を 小さく変更 します。といっても9pxが限界だとは思いますが。

また、逆にフォントサイズを大きくしたくなることがあるかもしれませんが、ナビゲーション部位のフォントサイズ変更は非推奨 です。自力でちゃんと調整ができる、という方だけ行ってください。

もう一点注意があります。ナビゲーションは一定横幅を下回ると アコーディオンに切り替わります。その切り替わりのタイミングは調整が必要な場合があります。こちらもブログ名が長い場合ですね。折返しが増えて3行以上になってしまう前に折りたたみを有効化してください。右側の各種リンクが隠れますので表示範囲が広くなり多少収まりが良くなります。

/* navi breakpoint default 661 */ で検索するとスタイルシート内に1箇所あります。この文字列の直下にある 661 の数値を 大きく します。

グローバルナビゲーション内のファビコン表示について

About favicon in global navigation

独自ファビコンを設定している方はそのアイコン、未設定の方はFC2のデフォルトファビコンであるユニコーンアイコンが表示されます。この機会に独自ファビコンを設定したい方は以下の記事をご参照ください。

FC2ブログでオリジナルファビコンを設定する方法2020年版

FC2ブログでオリジナルファビコンを設定する方法2020年版

ファビコン設定についてです。最近ではデバイスが多様化しており、昔のようにhead要素内に1つhtmlを追加、というだけではカバーできませんので、どんな記述が必要でどう設置すれば良いかの説明をしたいと思います。...

また、ファビコン表示はGoogleのホストを経由しています。ファビコンの認識に約1週間前後かかりますので、ファビコンが正しく設定されていても新規設定の場合はしばらくユニコーンが表示されることもあります。あまりに長い期間ユニコーンのまま、という場合には設定ミスも考えられますので一度ご相談ください。

ヘッダー画像について

Tips when changing header image

今回のヘッダー画像は ブラウザ横幅100%で表示されます ので、画像選びにコツが要るかもしれません。

  • 上下の大半が見切れても意味のわかる画像
  • 画像内のオブジェクトの位置

画像の上下は大きくカットされます

特にパソコン閲覧時の表示は上下の見切れ範囲が大きくなりますので、見切れが発生すると何の画像だかさっぱりわからなくなるようなものは避けましょう。ただし画像内のオブジェクト(被写体)に注目したときに、表示位置合わせで上手く調整できることもありますので、注意点2点はセットで考えてください。例えば以下のような画像の場合。

サンプル(縮尺掲載)

上記をテンプレートのURL差し替えのみで変更した場合の表示は以下の通りです。

パソコンでのヘッダーの様子
スマートフォンでのヘッダーの様子

スマートフォンの方は良いんですが、パソコンだとなんやわけわからん (´・ω・`)
この時点で完全に「向かない」と判定される画像もありますが、このサンプルの場合は「オブジェクト表示の調整」で上手く行くかもしれません。

オブジェクト表示位置の調整

オブジェクト表示に係るテンプレートのデフォルト内容は 垂直がbottom、平行がcenter です。つまり見切れは発生するけれども、画像の垂直方向下辺部位と平行方向中央は極力表示させる、という意味です。サンプル画像の場合、男の子の位置は「垂直がtop(上)、平行がleft(左)」ですから、位置の指定を変更してみます。

パソコン「top left」
スマートフォン 「top left」

男の子が写っていることはわかるようになりました。

スタイルシート内に /* ヘッダー画像垂直位置 *//* ヘッダー画像平行位置 */ という目印がありますので、それぞれ :(コロン) の 右側topleft に書き換えます。コロンの左側は変更しないように注意してください。

こうして垂直位置と平行位置とを単独で変更できるようにしてあります。またあるいはサンプルだと男の子の頭がちょっと隠れています。これは上部にある グローバルナビゲーションの高さ40px です。その分が隠れていますので、垂直位置の方を top 40px と書いてください。この意味は「上から40px」です。以下のようになります。

パソコン「top 40px left」
スマートフォン 「top 40px left」

同じように平行位置も必要があれば数値をpxで入れてください。ちなみに私であればこの画像は「不向き」と判定します ^^;

画像はサイズ違いで2つ準備

スマートフォン用とパソコン用で分けてあります。デフォルトサイズはスマートフォン用が横800px、パソコン用が横1600pxです。スマートフォンでは1600pxもの大きな画像は必要ありませんので、負担を軽減するために小さい画像を用います。

準備が面倒という方は、横1600pxの大きいサイズを準備し、2箇所に同じURLを記載 してください。本来はもっと良い方法がありますが、初心者さん向けにこれが一番簡単だと思います。統一処理の仕方がわかる方はもちろん行って頂いて構いません(というかたぶん処理方法がわかる方は画像の準備もされるだろうと思います)

ダークモード時の画像について

About image grayscale in darkmode

ダークモード時は画像の彩度を若干抑えています(その方が好ましいという統計結果が出ているため)が、不要と思われる方は以下の部位を削除してください。

filter: grayscale(20%); を目印に検索し、これを含む

  img {
    filter: grayscale(20%);
  }

を削除。すぐ下にある } を巻き込み削除しないよう注意。

記事編集リンクについて

Location of edit icon

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

カラム入れ替えの仕方

How to reverse the direction of rows.

#main-container { で検索するとスタイルシート内に2箇所ヒットし、2つ目 が対象です。そのルールセット内にある max-width: var(--width-max); の直下に flex-direction: row-reverse;追加

続きまして #primary { で検索するとスタイルシート内に1箇所ありますのでルールセット内 margin-right: var(--gap); の緑部位 rightleft変更

webフォントを利用しない場合

If you do NOT want to use Google fonts...

ブログ名などの一部フォントはGoogle Fontsを利用しています。このフォントを排除したい場合は

注)webフォント不要の方

で検索し、ガイダンスに従って頂くわけですが、ちょっと意味がわかりにくいかもしれませんので補足します。

wf-target で検索するとhtml内に11箇所ヒットします。これらを以下の要領で削除します。

① クラス名が単独の場合

id=blog_title class=wf-target

緑部位を削除して以下の通り。

id=blog_title

② クラス名が複数の場合

<div class="another-title wf-target">

該当クラス名以外はそのまま残して以下の通り

<div class="another-title">

webフォントは読み込まれるまでにタイムラグがありますので、FOUT現象(flash of unstyled text, フォント種が切り替わる際に点滅するように見える)が発生します。それを避けるための処理を行っており、それ故正しい手順で削除しないと文字が表示されませんのでご注意ください。上記手順に沿って削除するとテンプレートで指定されているデフォルトフォント種に戻ります。

カテゴリオーバーレイ表示の際のメインコンテンツぼかしについて

CSS blur doesn't work in Firefox browser.

ナビゲーション内にある「CATEGORY」をクリックするとオーバーレイ表示が行われ、背面になるコンテンツにぼかしがかかるようになっていますが、現時点ではFirefoxに対応していませんので予めご了承ください。オーバーレイが機能しないわけではなく単に後ろにぼかしがかからない、という意味です。

スピード強化について

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

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

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

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

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

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

Related post

Comments  116

-
2020/04/06 (Mon) 14:02

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/04/06 (Mon) 14:21

To Halo スピードテストの件 内緒さん

こんにちは。
まず点数を落としている原因を上げます。

・アフィリエイト
・FC2が挿入するJSファイル --- 不可避
・FC2が挿入するCSSファイル --- 不可避
・画像の拡張子が適切でない(webpを採用していない) --- 不可避

あとHaloではページ遷移を速くするための処理を行っています。全記事一覧を開いてもらうと最も効果がわかりやすいはずです(このページは記事数が少ない方でも通常3〜10秒かかりますがHaloでは1秒かかりません)
これはリンク先をバックグラウンドで先読みする(prefetch)という方法ですから、先読みした画像なども検査対象になります。そしてFC2はwebp拡張子が使えませんので、全ての画像に同じ警告が積み重なります。

テストツールは純粋なスピードを計測するのではなく、「修正可能な項目の指摘」であって、警告対象がいくつあるかで減算しています。実際の表示スピードは概ね1秒台ですから速度として決して遅くはありません。寧ろ速い方です。

どうしても点数を上げたいという場合は
・prefetchを外す(遷移スピードは遅くなります)
・広告を諦める
・Google analyticsを外す(これがあると必ず点数が下がります)
・削除可能なJSは全て削除する(カウンター, コメント装飾ツールなど)
・トップページのサムネイルをFC2独自変数<%topentry_image_w300>に変更する(解像度が落ち、バリデートエラーになります)

などでしょうか。広告とanalyticsとカウンターなどを排除すれば100点が取れますよ。ただし内緒さんの場合はドメイン関連のJSが強制で入りますので恐らく100点は実現できません。

参考記事: スピードスコアテストの考察
https://vanillaice000.blog.fc2.com/blog-entry-738.html

Haloの元々のスペックはサンプルDEMOでご確認頂けます。DEMOは実際に提供している内容と異なり
・prefetchを省いている
・必要の無いJSを省いている(FC2検索バー対策など)
が特徴です。その他は一般に配布しているものと変わり有りません。そちらを比較してもらうことでできることが見えてくるかもしれません。

----- 追記
これまでご利用になっていたテンプレートはこれかな?と思うものがありましたので拝見しました。
トップページのサムネイルは先程書いた<%topentry_image_w300>を利用していますので、それだけでも点数は上がりますよ。ただしバリデートエラー(htmlが正確でない)は多いですね。
いずれにしても信頼できるものをご利用になるのが一番だと思います。不信感がある場合は利用を避ける、というのが一番ですので差し戻し(以前のものへ変更)も視野に入れてはいかがでしょうか。

-
2020/04/06 (Mon) 19:12

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/04/07 (Tue) 01:51

To Halo スピードテストの件 内緒さん(終了のご報告)

こんばんは。
そちらも大変なご様子ですね。早く収まると良いのですが (∵`)
ちなみにそちらより9時間遅い地域出身です。

スピードテストは極端な話、画像の並び順が違うだけでもスコアが変わります(lazyloadを導入している場合)ので、あまり気を取られすぎないことも大切です。
お疲れ様でした :)

Satoshi Nakamoto
2020/04/10 (Fri) 11:40

目次機能について

度々お邪魔します。
今回は目次機能について質問させていただきます。

目次をどうやって表示させているんでしょうか?
ページのソース表示をみて真似ができないかトライしたのですが、わかりません。
お答えいただける範囲の事なのかどうかわかりませんが、可能なら教えていただきたいです。
よろしくお願いします。

vanillaice (Akira)
Akira
2020/04/10 (Fri) 14:51

To Satoshi Nakamotoさん

こんにちは ('0')/
TOCの件について

以下のページをご覧ください。
参考記事: 見出し目次を生成するTOCスクリプト
https://vanillaice000.blog.fc2.com/blog-entry-826.html

Haloのscopeは
.inner-contents
です。よろしくお願いします。

Satoshi Nakamoto
2020/04/10 (Fri) 20:30

To Akiraさん

ありがとうございます。
早速勉強させていただきます。
:)

Satoshi Nakamoto
2020/04/20 (Mon) 19:30

To Satoshi Nakamotoさん

Akira さん

目次無事導入できました。ありがとうございます。

で、次なるご質問があります。汗
このページで質問するべきなのかまようところなのですが、、。

このテンプレートに目次機能を入れてiphoneなどでダークモードに切り替わった場合、目次部分のバックグラウンド色が明るすぎるのですが、どう対応するべきなのでしょうか?

一応、目次部分を薄いグレー色に変更を試みたのですが、目次などの文字色が被ってしまい、消えてしまいます。
アドバイスをいただけるとありがたいです。
m(__)m

Satoshi Nakamoto
2020/04/20 (Mon) 19:41

To Satoshi Nakamotoさん

Akira さん

追加で質問させていただきます。すいません。

このテンプレート "Halo" を常にダークモードで表示する事はできるのでしょうか?
そして、PC画面でもダークモードに変更できますでしょうか?

最近、通常の白い画面を見ると目がいたくなるのでダークモードを非常に気に入ってしまいまして、もし可能なら教えていただきたいです。
m(__)m

vanillaice (Akira)
Akira
2020/04/20 (Mon) 21:00

To Satoshi Nakamotoさん

こんばんは ('0')/
まず、TOCの導入が上手く行ったということでお疲れ様でした :)

ダークモードの件は結局どうされますか?
暗色をデフォルトにする場合はダークモード自体が不要になりますので、TOCについても対処法が変わります。
方針を決定してお伝えくださいね。よろしくお願いします。

> PC画面でもダークモードに変更できますでしょうか?〜

ご利用のPCに依存します。OSが対応していれば切り替えられますし、非対応ならば使えません。詳細は記事をお読みください。

Satoshi Nakamoto
2020/04/20 (Mon) 21:05

To Akiraさん

Akira さん

返信ありがとうございます。

暗色デフォルトでやってみたいです。
ご指導よろしくお願いします。 ٩(^‿^)۶

vanillaice (Akira)
Akira
2020/04/20 (Mon) 21:43

To Satoshi Nakamotoさん

了解です。今回はhtmlは触りませんのでスタイルシートに集中してください。

【ダークモード解除 + 暗色デフォルト】

非常にややこしいので注意深く作業してください。事前に複製を取ってくださいね。

まず
:root
で検索すると全部で5つ出てきます。最初の一つ目のルールセットが「デフォルト」です。
2つ目のルールセットがダークモードopt in時のスタイル指定で、近接に
/* darkmode 1/2 */
の目印が付いていますのですぐにわかると思います。2つ目の:rootのルールセットの最初の行は
--bgcolor-body: rgb(31,31,31);
で、最後の行は
--shadow_color: rgba(0,0,0,.6);
です。まだ下にも続いていますが今は気にせず1つ目と2つ目のルールセットだけに集中してください。

デフォルトのルールセットとダークモードのルールセット、それぞれ
--bgcolor-body: rgb(31,31,31);
上記のような形でスタイルが指定されており、左側の赤い部位(プロパティ)がデフォルトとダークモードで共通しています(右側の値(value)は異なります)

デフォルトとダークモードで 共通しているものはデフォルト側を行単位で削除。
デフォルトとダークモードで 共通していないものはそのまま残します。
間違ってダークモード側を消さないようにしてください。

消すべき行を全て消したら
/* darkmode 1/2 */
のすぐ下にある
@media (prefers-color-scheme: dark) {
という一行と、
/* end */
のすぐ上にある
}
という一行を消してください。

続いて
/* darkmode 2/2 */
で検索すると出てきますので、そのすぐ上にある
#comment_form input:-webkit-autofill
のルールセットを削除。続いて先程の
/* darkmode 2/2 */
のすぐ下にある
@media (prefers-color-scheme: dark) {
という一行と
/* end */
のすぐ上にある
}
という一行を消します。

以上がダークモードスタイルのデフォルト化です。

-----
TOCについてはTOC用のCSSにコメントが付いていますので、

/* 全体を囲うボーダー */
/* 全体背景色 */
/* 各リンク上部のボーダー */
/* リンク色 */

がカスタマイズ対象です。
私では求める答えはわかりませんので、ご自身で色調の調整を行ってください。
よろしくお願いします。

-----
* 念の為「ルールセット」の意味の説明

.xxx {
内容
}

このまとまりのことです。

Satoshi Nakamoto
2020/04/21 (Tue) 09:50

To AkiraさんTo Akiraさん

Akira さん

長文に渡るご指導恐縮です。
ありがとうございます。

でっ残念ながら、私のミスだと思うのですが、ブログが透明化されてしまいました。
もう一度テンプレート複製してトライしてみます。

かなり難しい作業の説明をお願いしていたことに気づきました。
申し訳ありませんでした。
ダーク固定設定の方が、目次内をデフォルト&ダーク仕様にするよりもシンプルであろう的な打算もありました。
汗・汗・汗。

何度かトライしてみます。

vanillaice (Akira)
Akira
2020/04/21 (Tue) 18:44

To Satoshi Nakamotoさん

こんにちは ('0')/

消すべき行を示したスクリーンショットです ↓
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser_2020_4_21.png

必ず「行」で削除してください。
それから一つ作業内容が間違っていましたので、上のスクリーンショットに従って削除ができましたら、次は
/* darkmode 2/2 */
の目印を見つけてください。
この目印のすぐ上にある

#comment_form input:-webkit-autofill {
box-shadow: 0 0 0 1000px var(--bgcolor-input) inset;
}

このルールセットを削除し、続いて目印の下にある

@media (prefers-color-scheme: dark) {
#comment_form input:-webkit-autofill {
-webkit-text-fill-color: var(--color-base) !important;
}
}

のルールセットも削除します。上記ルールセットを削除した箇所に、以下の内容を追加。

#comment_form input:-webkit-autofill {
box-shadow: 0 0 0 1000px var(--bgcolor-input) inset;
-webkit-text-fill-color: var(--color-base) !important;
}

ダークモード解除 + 暗色デフォルトの作業は以上です。
よろしくお願いします。

Satoshi Nakamoto
2020/04/23 (Thu) 16:03

Akira さん

ありがとうございます。
ダークモード固定、でっできました〜〜! 嬉涙
m(__)m


。。。。少し真面目な話になるんですが、
Akiraさんはどうして無料でパブリックに素晴らしいテンプレートを提供し続けておられるんですか?
しかも、利用者のお世話もかなり本気でされているし、でもお金をとるわけでもなく。。。。。

新型コロナの影響もかなり長引きそうですが、お体には気をつけてください。

とにかく、感謝の気持ちをお伝えしたいです。
ありがとうございます。

♪( ´θ`)ノ

vanillaice (Akira)
Akira
2020/04/23 (Thu) 16:19

To Satoshi Nakamotoさん(完了のご報告)

こんにちは ('0')/
完了したということで安心しました。

> Akiraさんはどうして〜

私の趣味は色々ありますが、これが一番お金のかからない趣味です(笑)
ただで楽しめているのでお金を頂こうとは思いません。それだけのことです(笑)

お気遣いもありがとうございます。お疲れ様でした :)

Satoshi Nakamoto
2020/04/25 (Sat) 15:13

Twitter OGP画像が表示されない?!

Akira さん

お疲れ様です。
報告? 質問? なのですが、ブログ更新をツイッターでツイートする際にOPG?画像が数日前まではきちんと表示されていたのですが、表示されなくなりました。Twitterバリデートで何度かトライしたのですがエラーが出ます。

テンプレートのダーク化は関係ないと思います。
もし何かお知りでしたらご教授ください。
すんません。m(__)m

こん
2020/04/25 (Sat) 18:12

同じ現象が起きているようです

Akiraさん、こんにちは~。
いつも大変お世話になっておりますm(__)m。

今朝から新しいテンプレート-BigGirlNoCry-を試していたところ(憧れでした・笑)、
やはりTwitterでアイキャッチ画像が表示されなくなりました。
昨日までは何の問題もなかったのですが。
ちなみにその昨日までの画像は今も表示されています。
(私のブログにTwitterのタイムラインが貼ってありますのでご確認いただけます)

それはないだろ、と思いながら、一応元のテンプレート-CommonSense-に戻して
新たな指定も試みてみましたが、やはりテンプレートのせいではないようです(笑。

何か見落としがあるかもしれないと覗きに来たところ、
同じ現象を訴えていらっしゃる方がおられたので、
これは運営さんかTwitter側の問題かな~などと疑っている次第です。

ひっそり去ろうとしましたが、同じ現象の方がいらしたので
とりあえずお知らせいたしまするね。ではでは。

vanillaice (Akira)
Akira
2020/04/25 (Sat) 18:18

To Satoshi Nakamotoさん, To こんさん

こんばんは ('0')/

まとめてのお返事でごめんなさいね。
今から見てみますね。情報のご協力大変助かります。ありがとうございます :)
何かわかれば改めてコメントします。よろしくお願いします。

駐在おやじ
2020/05/05 (Tue) 23:00

すいません とても失礼な質問になるかと思いますが、解決策があるのかもしれないと思い 質問させてください。
Akiraさんが IE非対応のものが多く、 今回僕もお借りしたテンプレートもIE非対応だと言う事は知っていてお借りしました。
私の ポカで・・・ Edgeで検証し問題ないと思っていました。

しかし当然ですが、 IEを使っている(と予想される)方々から おかしいというコメントをいくつかもらう事になりました。
また yahooで開くとおかしいと??? これは 携帯のアプリの事かとは思いますがよくわかりません。

Akiraさんの テンプレートの中でも IEでも見れるものがあると ある方から教えていただき 
変更しようかと思っていましたが、 このテンプレートとても気に入っているので もし対応できる方法があるのなら 教えていただけないかと 連絡しました

長文で、 しかも 自分勝手な質問で申し訳ありません。

  駐在おやじ

vanillaice (Akira)
Akira
2020/05/06 (Wed) 00:34

To 駐在おやじさん

こんばんは。
* IE非対応テンプレートの件

> IEでも見れるものがあると ある方から教えていただき〜

のテンプレートのIE対応・非対応の別は以下のページをご覧くださいね。
記事: FC2共有テンプレート一覧
https://vanillaice000.blog.fc2.com/blog-entry-283.html

-----
> IEを使っている(と予想される)方々から おかしい〜また yahooで開くとおかしいと???〜

この「Yahoo!で開くと」「Yahoo!から入ると」「Googleから見ると」というのはひとつのキーワードになっていてですね、このキーワードを口にする方に「IEを利用してはいけない理由」を説いても恐らく受け止めてもらえません。
* Yahoo!やGoogleというのはブラウザ起動時のトップページであって、ブラウザそのものではありません。IE利用者さんはこのような誤解をされている(あるいは「ブラウザ」などweb一般用語を知らない)方が多いです。

Haloテンプレートを気に入って頂けたのはとても嬉しいんですが、駐在おやじさんの読者層を考えるとIE対応に変更した方が良い、というよりも変更必須のように思います。

参考記事: IEの対応・非対応の選択に悩んでいる方へ
https://vanillaice000.blog.fc2.com/blog-entry-930.html

私の上記記事リンクを紹介頂いたとしてもIE利用者さんは私のブログを読むことができません(ブロックしています)ので、駐在おやじさんの方で啓蒙してもらう形になり、そしてそれは相当難しいと思います。

-----
> もし対応できる方法があるのなら 教えていただけないかと〜

ありますが、こちらもやはりかなり困難な作業になると思います。もちろん駐在おやじさんのhtml, CSS習得度によります。

・ display: grid に関連するレイアウトを全て flex あるいは float に変更 --- IEはgridの正しい解釈ができません
・ カスタムプロパティを全て排除 --- varの文字列を含むCSSを全て削除し、然るべきCSSを然るべきセレクタに適用
・ object-fitに関するポリフィルを導入
・ const, promise を利用しているJSを全て修正
・ IE用CSSフォールバックの記述

などです。Yahoo!やヤプログユーザーさんでFC2へ移転された方向け限定配布のテンプレートは比較的楽に修正できた(カスタムプロパティの修正のみ)んですが、Haloの場合はかなり困難を極めると思います。
事前の説明通り私がIE対応を行うことはありませんので、「IEを使わないよう啓蒙する」か「IE対応テンプレートに変更する」かのいずれかでお願いします。申し訳ないです (*_ _)

-----
啓蒙される場合には以下の記事を紹介されると良いかもしれません。

参考記事(外部): Internet Explorerは“ヤバい”ブラウザ。今すぐ使用をやめよう! [HATAFULL様]
https://hatafull.co.jp/blog/6049

参考記事(外部): IEを使い続けるのは危険 マイクロソフトが企業に使用中止を要請 [livedoor NEWS]
https://news.livedoor.com/article/detail/15997210/

また、「IEを使ってはいけない理由」で検索しても類似記事がたくさん出てきます。(ただし中にはIE非対応サイトで読めないこともあるかもしれません)

駐在おやじ
2020/05/06 (Wed) 20:07

To Akiraさん

早速の返事ありがとうございます。
Akiraさんの言われる通りだと思います。 読者層の方が結構年配の方が多いと思っています。
IEと書いても何が何だか・・・・ の方にどう説明しても理解していただけないと思います。
もちろんIEを使わない方がいいといわれる理由も、今回初めて読ませていただき納得がいきました。

私が、勝手に選んで(お借りして)、しかもやらないと明言されていることに関して質問までして
大変失礼しました。
それなのに、 丁寧に教えていただいただけでなく、アドバイスまでいただき本当にありがとうございました。

とても素敵で、僕が初めて変更したテンプレートでしたが、 
私の確認不足のため Akiraさんにはお手数ばかりをおかけしました。
重ね重ね お詫び申し上げます

  駐在おやじ

vanillaice (Akira)
Akira
2020/05/06 (Wed) 22:00

To 駐在おやじさん(重要追記あり)

こんばんは ('0')/

そうですね。賢明な選択だと思います。
最後に2つばかりアドバイスさせてくださいね。

① 青い文字の使用はできれば避けた方が良い
② 記事下の「お店情報」のhtmlにテキスト色を指定した方が良い

① Halo適用時にお伝えしようと思ったんですが、青い文字は背景が暗色に反転すると視認性が著しく低下します。

参考記事: 視認性の落ちたテキストから色指定を取り除く
https://vanillaice000.blog.fc2.com/blog-entry-1030.html

ブログというのは管理人のものでもあり、閲覧者のためのものでもあります。Haloテンプレートのように「ダークモード対応」が取られているテンプレートを採用されたときには、管理人の意思に関わらずユーザーの個人設定によっては背景が暗色に切り替わります。
ダークモード対応は今後増えていくと思われますので、できれば今のうちに対策された方が良いでしょう。
(もちろんダークモード対応を取り除くことはできます)

② 「お店情報」はtable要素で構成されており、セルには薄桃色の背景色を指定していますよね。
仮に今後暗色背景テンプレートに変更したり、先にお伝えしたダークモード対応テンプレートに変更された場合には基本文字色は現在と逆の「白」になりますので、中のテキストが見えなくなってしまいます。
なので文字色を「黒系」に固定されることをおすすめします。そうすればテンプレートの色調に左右されることが無くなります。

「背景色を指定したら必ず文字色も同時に指定する」と覚えておかれると良いと思います。
あとtableの書き方が古い ^^;
(現在の書き方はhtml4.01で現在の水準以下の内容です。現在のweb標準はhtml5.2)

<div style="max-width: 300px; border: 2px ridge rgb(0,128,128); background: rgb(255,228,225); color: rgb(51,51,51); padding: .6em;">ここにテキスト内容</div>

これで十分だと思いますよ。tableの入れ子は特におすすめしません。tableというのはレンダリング(描画)が遅いのが特徴です。部品(trやtd)が多く、全ての部品を解析しなければ描画が始まらないためです。入れ子が多ければ倍々で処理が遅くなります。
このような簡単なボックスであればtableではなくdivの利用が適しています。

また、現在の書き方では廃止属性が多く含まれており、html的には「エラー」です。常にエラーを抱えていると致命的なエラーが生じた際に検証の邪魔になり、原因の特定が困難になります。

上記のhtmlを一度お試しください(エラーなし, 文字色指定あり, 現在のものと見た目はほぼ同じでボックス内側の余白を足しています)

以上です。お疲れ様でした :)

駐在おやじ
2020/05/07 (Thu) 22:19

To Akiraさん

アドバイスいただき 本当にありがとうございました
昨晩、またいろいろテンプレートを変えながらどれにしようか選んでいたんですが、
青字が見にくいと言う事に、僕も気が付きました。

本当は黒っぽい背景で、良いのを見つけたんですが、 僕が少し色弱があり 赤系が見にくいため
普段から青系をよく使っていました。 ブログで強調したい字などが青いのはそのためです。

今後この辺りも考えてみないといけないなって思っています。
今回 僕としては本当にいい勉強になりました。
デザインや、ソフト系は全くの素人なので これから少しずつ勉強していきます。

本当にありがとうございました

  駐在おやじ

vanillaice (Akira)
Akira
2020/05/07 (Thu) 22:56

To 駐在おやじさん(終了のご報告)

こんばんは。

うちの長男・次男も色弱です。黒背景に青文字はほとんど見えないようです。黒背景の場合は水色で私からはっきり見える文字でも「何が書いてあるのか」と聞いてくることが多いので、白背景以外の青文字は辛いようです。
赤は白背景でも黒背景でもはっきり読めるそうで、やはり個人差があるのでしょうかね。

> 本当は黒っぽい背景で、良いのを見つけた〜

既に黒背景にする可能性が若干でもあるのならばtableの文字色指定は必須です。私が書いたhtmlを利用する・しないはどちらでも構いませんが、何らかの対策は必要ですね。
修正数が少ないうちに行っておくが吉。

後は駐在おやじさんの選択にお任せします。お疲れ様でした :)

駐在おやじ
2020/05/11 (Mon) 23:01

ありがとうございます

文字色のコメントにも 返事いただいてありがとうございました。
以前教えていただいた、 枠についても変更しました。

今まで 記事を書くだけで、 レイアウトも字も色もそれほど気にしていなかったのですが
今回の事で いろいろ気になりだしました。
全くの素人ですが、 少しずつ つついて行こうと思います

ほんとうにありがとうございました。

  駐在おやじ

vanillaice (Akira)
Akira
2020/05/13 (Wed) 00:15

To 駐在おやじさん(重要追記あり)

こんばんは ('0')/

> 枠についても変更しました〜

ということなんですが、ソースが間違っているので以前よりもひどいエラーになっています。最新記事「東大門〜」しか見ていませんので他のページがどうなっているかはご自身で確認をお願いします。
そして現在記載されているソースをそのまま載せますが、不都合があればその旨お伝え頂ければ削除しますね。

×
<div style="max-width: 360px; border: 2px ridge rgb(0,128,128); background: rgb(255,228,225); color: rgb(51,51,51); padding: .6em;"><td bgcolor="#FFE4E1">お店情報 <span style="font-size:large;"><strong>アグランコッケラン「xxxxx」</strong></span>
住所 : xxxxxxxx 35-7
Tel : xx-xx-xxxx</div>


<div style="max-width: 360px; border: 2px ridge rgb(0,128,128); background: rgb(255,228,225); color: rgb(51,51,51); padding: .6em;">お店情報 <span style="font-size:large; font-weight: bold;">アグランコッケラン「xxxxx」</span>
住所 : xxxxxxxx 35-7
Tel : xx-xx-xxxx</div>

1箇所目の赤字部位は完全に構文エラーです(td要素を単独で用いる(table要素から切り離して利用する)ことはできません。
2箇所目、strongタグは文字を太くするために用いるものではなく、挟まれたテキスト内容を「意味を強く強調する(強意)」ために利用します。太くするだけならば上記の内容をどうぞ。

2箇所目については意味的には間違いですが構文的には間違いではありません。
1箇所目は構文間違いですから修正必須です。
よろしくお願いします。

* 構文(syntax)と意味(semantics)の違いについては以下の記事をご参照ください。
参考記事: 問題解決能力とは「理解力」と「意識力」と「実行力」
https://vanillaice000.blog.fc2.com/blog-entry-1023.html

-
2020/05/15 (Fri) 01:21

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/05/15 (Fri) 23:48

To とらいぶさん

こんばんは。ありがとうございます :)
* ヘッダークロスフェイドの件

できますが、html, CSS共に大きな修正が必要です。弊テンプレート間であればCSSやJSの流用を許可していますので、Francescaの内容を移植して頂いても構いませんが、大規模な個人カスタマイズ、元の仕様を大きく変更する類のカスタマイズのお手伝いは致しませんのでご自身で行ってもらう形になります。
よろしくお願いします。

ぱんとら
2020/06/03 (Wed) 15:11

サイドカラムのスクロール

こんにちは。いつもお世話になっております。
ずっとBelongテンプレをカスタマイズのご指導もいただきながら使っていて満足してるのですが、
ちょっと気分をかえてみたくて、こちらHaloを今日から展開しています。
が、なぜかサイドカラムの表示がスムーズにつながりません。
途中でストップして、そこから今度は下からスクロールされてくるんです。
どこに問題がありますでしょうか。
Belongでけっこういじったのですが、
その時のものが影響していたりしますでしょうか。
いつまでも初心者質問で恐縮ですが、
ご対応の程、よろしくお願いいたします。

vanillaice (Akira)
Akira
2020/06/03 (Wed) 16:45

To ぱんとらさん

こんにちは ('0')/

原因はサイドメニューのプラグイン(フリーエリア)の構文エラーです。
で、その構文エラーが非常に多くてですね、ざっと見ただけでも200近くあります。その一部が動作に悪影響を及ぼしています。
クリティカルなものだけ先にお伝えします。

-----
【不要なfont終了タグ】
「Blog Manager」の文章末尾
たまに猫も出ますぜ(Ф∀Ф)</font>

赤字部位は不要ですから削除。また、fontタグは廃止されており「使ってはいけない」とされる要素なのでこの機会に正しいhtmlに修正されることをおすすめします。img要素の末尾のスラッシュも不要です。
(〜 は文章の省略を意味しています)

<div style="color: maroon;">管理人〜</div>
<div>
<img src="画像アドレス" alt="" border="0" width="157" height="148"><br>
友人に勧められて〜おばさん。
</div>
<div style="margin: 1em 0 0; font-weight: bold;">●ベランダー〜</div>
<div>
<a href="アドレス" target="_blank"><img src="画像アドレス" alt="" border="0" width="186" height="137"></a><div>
<div>
たまに猫も出ますぜ(Ф∀Ф)
</div>

【fontタグのミス多数】
「うちの猫たち」のhtml内容ですが、これはえっと、ひどいと言わざるを得ない(笑)
恐らくご自分で見てもぱっと理解できないのではないでしょうか。全て書き換えをおすすめします。部分修正の方が却って大変だと思います。
(不要な属性(border=0など)やimg要素末尾スラッシュなど削除しています)

<div>
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000; font-weight: bold;">ロック王子:ロックン</span><br>
正式名*<span style="font-weight: bold;">Lucky7〜</span><br>
♂白黒牛柄/2007.9 生(推定)<br>
<span style="color: green; font-weight: bold;">2007.12.2</span>:大熊猫とら〜<br>
<span style="color: green; font-weight: bold;">2015. 6. 6</span>:肺がんのため〜<br>
享年7歳。<br>
プロフィール(途中)は<a href="アドレス" target="_blank">こちら</a>
</div>
<div style="margin: 1em 0 0;">
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000; font-weight: bold;">嘉利太后:カリたん,カリンヌ,バカリン</span><br>
正式名*<span style="font-weight: bold;">Camellia〜</span><br>
♀キジトラ/2002.2 生(推定)<br>
<span style="color: green; font-weight: bold;">2004.5.15</span>:大熊猫とら〜<br>
<span style="color: green; font-weight: bold;">2013. 3. 2</span>:1年超の〜<br>
享年11歳。今なお〜<br>
プロフィール(途中)は<a href="アドレス" target="_blank">こちら</a>
</div>
<div style="margin: 1em 0 0;">
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000; font-weight: bold;">ビブ姫:ビブ子,ビブち</span><br>
正式名*<span style="font-weight: bold;">Hannya〜</span><br>
♀三毛/2004.10 生(推定)<br>
<span style="color: green; font-weight: bold;">2005.1.23</span>:大熊猫とら〜<br>
2016.3月に慢性腎不全の診断を受け、<br>
現在食事療法中。<br>
プロフィールは<a href="アドレス" target="_blank">こちら</a>
</div>
<div style="margin: 1em 0 0;">
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000; font-weight: bold;">キング金四郎:キンちゃん,キン坊</span><br>
正式名*<span style="font-weight: bold;">Bomber〜</span><br>
♂黒ペルシャmix/'05-'06生(推定)<br>
<span style="color: green; font-weight: bold;">2008.8.23</span>:大熊猫とら〜<span style="font-weight: bold;">預かり</span>で来た日<br>
3匹から〜<br>
多頭飼育〜<br>
まったく〜<br>
今も〜<br>
詳細プロフィールの〜
</div>
<div style="margin: 1em 0 0;">
<img src="画像アドレス" alt="代替テキスト" width="165" height="145"><br>
<span style="color: #000;"><span style="font-weight: bold;">ラック坊主:ラックん,楽(ラク)べー,<br>
楽ち,らくぶー,ぶーたん,若大将</span>etc..</span><br>
正式名*<span style="font-weight: bold;">LUCK〜</span><br>
♂サバトラ/2015.5 生(推定)<br>
<span style="color: green; font-weight: bold;">2015.9.19</span>:捕獲〜<br>
<span style="color: green; font-weight: bold;">2015.10.4</span>:大熊猫とら〜<br>
シマシマ〜<br>
捕獲器に〜<br>
シマシマ〜<br>
ややこしい関係〜<br>
詳細プロフィールは〜
</div>

-----
font size="2" の指定は省いています。この指定の意味がちょっとわからなかったのですが、サイズ2は13pxのことなので、サイドメニューの文字大きさが仮に15pxや14pxの場合にはこの文字はそれよりも小さくなりますし、サイドメニューが12pxならばこの文字は逆にそれよりも大きくなります。
他の文字と比べて「大きくしたいのか小さくしたいのか」で決めるのであれば絶対指定ではなく相対指定を行いましょう。
小さくしたい --- font-size: .9em など
大きくしたい --- font-size: 1.1em など

「代替テキスト」は画像の被写体を示す文言を適切に入れてください。特に意味を持たない画像の場合には alt="" と空指定でもOKです。

-----
【Link】
書き出しが全て
<li style="text-align:left" style="margin-top:5px;">

style属性が重複していますので全て
<li style="text-align:left; margin-top:5px;">
に修正する必要がありますが、これはもしかして公式プラグインですかね。ちょっと今時間が無くて出かけなきゃいけないので、このプラグインが公式なのかフリーエリアなのか、そしてカスタマイズを行っているかどうかを教えてください。

とりあえずクリティカルなものを修正してみてサイドメニューの様子を見てくださいね。
以降のお返事は遅くなると思います。すみません。よろしくお願いします。

ぱんとら
2020/06/03 (Wed) 19:28

To Akiraさん

早々の、しかもここまで細かくご教示くださって、
なんてお礼を申し上げてよいか・・。
かなり昔に、よくわかってもいないのにテキトーにやったものが、
ここまでひどいとは・・・お恥ずかしい限りです。(´>ω<`)
取り急ぎ、丁寧にご教示いただいた「うちの猫たち」のご指摘箇所を修正しましたところ、
サイドカラムは問題なく表示されてました。本当にありがとうございます。

まだ、
>【Link】
>書き出しが全て
><li style="text-align:left" style="margin-top:5px;">

という点については、修正はもちろん、ちゃんと確認もできておりませんが(-∀-`; )
とりあえず、書き出していただいた箇所の修正で、
正常に表示されていますので、おいおいチェックしてまいります。

それにしても、ここまでしていただくなんて、なんとお礼申し上げればよいものか....
本当にありがとうございました!

vanillaice (Akira)
Akira
2020/06/03 (Wed) 21:17

To ぱんとらさん

こんばんは。

修正ミス1点の再修正
×
<span style="font-weight: bold;"ラック坊主:ラックん,楽(ラク)べー,<br>

<span style="font-weight: bold;">ラック坊主:ラックん,楽(ラク)べー,<br>

これ私のミスです。ごめんなさい。構文エラーですから必ず修正してくださいね。

-----
他の部位については「おいおい」ということで強制はしませんが、現在抱えているエラーによって今後何かしらの問題が起きた時に すぐに原因を特定することが非常に困難 です。私が検証してもとても時間がかかってしまいます。
なので少しづつで良いのでコツコツを修正されることをおすすめします。

参考記事: 問題解決能力とは「理解力」と「意識力」と「実行力」
https://vanillaice000.blog.fc2.com/blog-entry-1023.html

サイドメニューの件は修正できているようで安心しました。
お疲れ様でした :)

ぱんとら
2020/06/03 (Wed) 23:30

To Akiraさん

こんばんは。
またもや早々に追加修正箇所も教えてくださって、ありがとうございます。
参考記事を拝読いたしましたが、今の私のレベルですと、
問題解決能力の前提となるそもそもの基礎知識がおそろしく低いってことで、
つまりは、わかってないヤツが適当にカスタマイズに手を出すなんて
ウン年早いってことのようです。目が醒めました。(^ω^;)

ちなみに、ご指摘いただいてました【Link】の書き出しに見られる重複....とのことですが、
こちらは、公式ではなく共通プラグインを使用していました。

理解力の衰えは否めませんが、
ぼちぼち学習しながら、コツコツ修正してまいります。

お忙しいところ、ほんとにありがとうございました。
今後ともよろしくお願いします。

vanillaice (Akira)
Akira
2020/06/04 (Thu) 13:44

To ぱんとらさん(終了のご報告)

こんにちは ('0')/

そうなんですよねぇ。修正しろって言われてもどこをどうやってやるんだよ、みたいな(笑)
一度にやろうと思えば相当大変ですから、時間がある時に少しづつ、ということで良いと思います。少しづつでもやりましょうね、という意味でもあります(笑)

とりあえず大きなトラブルは回避できていますので、お疲れ様でした :)

コトナ
2020/06/08 (Mon) 00:39

初歩的なご質問で失礼します。

初めまして、こんばんは。FC2の素材からお借りして使っております、イツキ コトナと申します。
少々分からない、ことがございまして…作者様に尋ねる為にHPを訪れました。

自分で何とかしようとタグを見て見たのですが……問題点を発見することが出来ず;
初歩的な質問で失礼します。

記事を出しても、下にある紹介文で【Admin: albicocca34】と言うのが消えず困っております。
どの様にしたら、消すこと(表示できないように)は出来ますでしょうか?
アドバイスを頂けたら幸いです。

イツキ

神谷 幸彩
2020/06/08 (Mon) 17:18

To コトナさん

>【Admin: albicocca34】と言うのが消えず困っております。
【Admin】は管理者(ブログの執筆者)という意味なので消さなくても良いと思いますよ。むしろ消さないことをお奨めします。
【albicocca34】ではなくハンドルネームを表示させたいということでしたら、『環境設定』から『ユーザー情報の設定』へと進み『あなたのお名前』の項目にハンドルネーム【イツキ コトナ】を入力すれば【Admin: イツキ コトナ】と表示されます。

【Admin】ではなく他の単語を表示させたいのであれば、HTMLの編集で下記の構文のAdminの部分を任意の単語に変更することで表示が変わると思います。
↓↓↓
<span id=admin_name>Admin: <%author_name></span>

【author_name】の部分には、ユーザー情報の『あなたのお名前』に記入した内容が反映されます。


コトナ
2020/06/08 (Mon) 21:38

To 神谷 幸彩さん

神谷様
とても分かりやすい、回答をありがとうございます。
そうだったのですね!どうしても、自分のハンドルネームを入れたく困っておりました;
さっそく試して見たいと、思います。

ありがとうございました!

コトナ
2020/06/08 (Mon) 22:01

To コトナさん

神谷様
度々、申し訳ございません。
先ほどのアドバイスを試したところ、ちゃんと名前を表示することが出来ました!
適格のアドバイスをありがとうございました。

神谷 幸彩
2020/06/09 (Tue) 16:48

To コトナさん

解決されたようで何よりです。

vanillaice (Akira)
Akira
2020/06/10 (Wed) 17:15

To コトナさん, 神谷 幸彩さん

まとめてのお返事でごめんなさい。

修正できたようで安心しました。神谷 幸彩さん、いつもご協力をありがとうございます!

-----
ところで、神谷 幸彩さん、タブレットでChoir導入されたんですね。すっごい驚く(笑)
それはある意味「技」の粋です ( ̄∀ ̄;)

神谷 幸彩
2020/06/11 (Thu) 05:47

To Akiraさん(お返事不要)

差し出がましいかと思いましたが、Akiraさんが暫くご不在とのことでしたのでアドバイスさせていただきました。

>タブレットでChoir導入
はい、タブレットOnlyで作業しました。根性というか執念で成し遂げました。これも「技」になるんですかね。達成感と妙な自信がついたのは確かです(笑)

Mimizk
2020/10/08 (Thu) 14:12

こんにちは

これまで使ってきたブログのデザインが そろそろ世間から遅れてきたように感じ、Halo を利用させてもらうことにしました。
Halo に限らず、管理人さんの作品は圧倒的にクオリティが高いですね。
fc2 の共有テンプレートを見て選んだのはほとんど全て管理人さんが作ったものでした。


さて、まず初めにお聞きしたいのは、各記事を執筆する際に、HTML 編集で <p> や <div> 内に設定した padding などの設定が、どうやらブログ自体の設定に打ち消されている ということについてです。
私は従来、段落 ≒ <p> 要素を書く時は、以下のように style を付け加えていました。

 <p style="padding-top: 0em; padding-bottom:0em; "> ... </p>

例えば、画像を挿入する場合や、<h1> といった見出し要素の前後では、空白を大きく取ります。
微調整はかなり頻繁にするので、この padding 指定はほぼ全ての段落要素に記述されている状況です。

しかし、管理人さんの制作したブログデザインでは、どうもこの指定は効果を発揮していないようです。
これを従来通り、都度調整の指定が生きるようにすることはできますか。
あるいは、そうするとレスポンシブデザインが崩れるなどの不都合が生じるでしょうか。


次に、各記事の本文を表示した際に、その記事タイトルの横へ表示される 執筆者アイコン についてです。
いえ、実際には、記事タイトルの部分よりもむしろ、ページ最下部に表示される「前後投稿記事」の画像の方が気になっています。
これはおそらく、同じブログに複数の執筆者がいる場合にたいへん有効な機能なのではないかと推察しますが、私自身は一人でブログを書いており、すべての記事に私のプロフィールアイコンが表示されます。
すると、投稿日付順の「Newer Entry」と「Older Entry」で左右に2つ・・・ さらに同一カテゴリの「Newer Entry」と「Older Entry」さらに2つ・・・ 合計4つの全く同じアイコンがどどどっと並んでいる状況になります。

くどい感じがするのはもちろんのこと、ともすれば、全く同じ画像が並ぶ構図は「No Image」の代替画像が並んでいるのと似たような印象も与えます。
この画像を表示しないようにするか、トップページと同様に、それぞれの記事のアイキャッチ画像をかわりに表示するように変えることはできませんか。
(「ブログの構成を根底から変えるような要望はしないこと」という注意に触れる内容でしたら申し訳ありません)


最後は2つまとめてになりますが、この画像(https://bit.ly/36Keqyu)で矢印を使って示すところの
① オレンジの矢印(ユーザータグ部分)の文字色・背景色を指定するのはスタイルシートのどこに記述がありますか
② 黄緑の矢印(pinterest へのシェアボタン)だけが、わずかに、1px 程度頭が上がっているように見えるのですが、気のせいでしょうか?

Mimizk
2020/10/08 (Thu) 16:41

To Mimizkさん

お返事をいただく前で勝手に恐縮ですが、その後変更を加えるうちに誤認に気づきました。

まず「<p> 要素に指定した padding が効かない」件は、うまくゆきました。
スタイルシートで line-height を調整したところで改善されたように感じたのですが、気のせいでしょうか。

それから、「Newer Entry」や「Older Entry」の画像の件は、完全に勘違いでした。
これは本当に、プロフィール画像が「No Image」の代替画像として表示される仕様だったのですね。

これは管理人さんの仕事とは全く関係がありませんが、「見やすいな」と思いつつも今まで要約表示タイプのデザインを選ぶことができなかったのは、FC2 の仕様で、FC2 のサーバーにアップロードされた画像だけしかアイキャッチ画像として抽出・表示できない不都合があったからでした。
私の記事は、基本的に全ての画像が外部サイトにアップロードしたものを掲載しており、今のままでは「No Image」だらけです。
(全記事のアイキャッチ画像を手動で登録しなおすことを覚悟して、今回ブログデザインの変更を決心しました)
それで今、試しにアイキャッチ画像を登録したことで、本件の状況が理解できました。


ひとつ新たな疑問が出ました。
スタイルシートで上記の通り行間の調整をした後、文字と文字の間隔も指定しようとしました。

 --letter_spacing-entry: 10px;

このように書き加えたのですが、数値を様々変更してみても、文字間隔を変えられませんでした。
書き方に問題がありましたらぜひ指摘をお願いします。

vanillaice (Akira)
Akira
2020/10/08 (Thu) 18:03

To Mimizkさん

こんにちは。

まず確認ですが、テンプレートのp要素のへの指定はMimizkさんが行われているstyle属性指定によって上書きされていますので、テンプレートの内容が反映されているわけではありません。
(style要素による指定の方が優先度(強制力)が高いため)

で、気になるのはこういった内容が多く見受けられます。

<br>
<br>
<p style="margin-top: -2em;">内容</p>

これはどういうことかというと、<br>で作成した空白行を後続のp要素で引き戻している、という状態です。

br要素で空白を2行空ける → brで空けた「ほぼ」2行をp要素のネガティブマージンで無くす

こういうことですね。本来はbr要素「または」p要素の上マージンで空白をつけますので、この状態は二度手間というか、あまり意味が無いというか。「ほぼ」というのが重要なので後述します。
仮に今<br>を削除してしまうと、後続のpのマージンはネガティブ(マイナス)ですから先行の要素と重なってしまいます(文字が重なる、という意味です)
まずこの点を把握されているかどうかご確認をお願いします。
テンプレート内の指定は打ち消されていますので、空白行のサイズが「おかしい」と思われる場合にはおっしゃるとおり line-height の調整になるかと思います。

注意点は brで作成した空白行とp要素の単位emで指定したmarginは高さが違います ので、line-height調整によっては非常にまずいことになります。特にネガティブマージンを用いる時には先行要素と後続要素が重なる危険が常にありますので、できれば避けた方が良いと思います。

--------------
ここまでご自身が記事を書かれる際の注意点と見直しを行って欲しい点です。
ちょっとこれから外しますので、申し訳ないんですがまた後ほどお返事させてくださいね。よろしくお願いします。

vanillaice (Akira)
Akira
2020/10/08 (Thu) 19:08

To Mimizkさん

Mimizkさんに行って頂きたいのは

【1】line-heightの調整

/* 基本行間 */
で検索するとスタイルシート内に1箇所あります。デフォルトは 1.8 になっていますので、ここを 1.5 程度に修正してみてください。
1.8は1.8emと同義で、フォントサイズの1.8倍、という意味です。文字を含みその上下に空きをつくり、その高さがフォントサイズの1.8倍になる、ということですね。この値が大きければ大きいほど上下の文字間隔は広くなります。
1.8だとちょっと広めかな、という感じです。紙面だと1.5が多いですが、webではちょっとつまり過ぎに感じるかもしれません(個人の感覚によります)。SNSなどは1.7ぐらいでしょうか。

ここは好みの問題やどんな文章を書くかにもよりますので、数値を変更して目視確認を行ってください。
px単位を付けないよう注意 してくださいね。単位は「なし」で指定するようにしてください。

【2】ネガティブマージンの使用をやめる

作業に分岐になります。仮に今後もネガティブ指定を行うとなると、テンプレートを変更するたびに問題が生じる可能性があります。先にお伝えしたように、<br>の高さとline-heightの指定とemの単位はそれぞれ絡み合っていますので、予期せぬ事態に陥る可能性があります。
なので

・ネガティブマージンは指定しない
・空白行はp要素の上下marginで行う 「or または」 <br>で行う

「or」であり「または」であって、併用しない方が良いですね。せっかくp要素をご利用なのですから<br>は使わずに上下marginで統一されることをおすすめします。
そしてできればテンプレートの方で指定を行い、style属性の利用は極力避けておくと後々困る場面を減らせるかもしれません。

参考記事: どんな時にスタイルシートを使い、どんな時にインラインCSS(style属性)を使うのか
https://vanillaice000.blog.fc2.com/blog-entry-938.html

参考記事: pタグとbrタグについて考えてみる
https://vanillaice000.blog.fc2.com/blog-entry-518.html

-------
テンプレートでp要素の上下marginをあらかじめ決めておくことを選択される場合は
/* 注)段落間上下余白 */
で検索するとスタイルシート内に1箇所ありますので、
1.7em
赤字の数値で指定・調整してください。

テンプレートで指定しない、記事を書く都度style属性を利用する(つまり現状維持)場合はこのルールセット

.inner-contents p {
margin: 1.7em 0;/* 注)段落間上下余白 */
}

を削除してください(現時点でこの指定は活きていません)
style属性を利用する「インラインCSS」という方法は優先度が非常に高いので上書き・打ち消しが容易ではありません。修正するとなれば対象記事を全て手打ちで直すことになってしまいます。p要素のように利用頻度が高いものについてはできるだけスタイルシートでの指定をおすすめします。修正も1度で済みます。
強制ではありませんので、ご自身にとって最も都合の良い方法及びそれに関する作業を選択してくださいね。

---------
> スタイルシートで上記の通り行間の調整をした後、文字と文字の間隔も指定しようとしました。
 --letter_spacing-entry: 10px;
このように書き加えたのですが〜

この --letter_spacing-entry: 10px;

というのは「カスタムプロパティ」といって、CSSの「変数」です。あらかじめ名称と値を決めておき、例えば

.xxx {
letter-spacing: var(--letter_spacing-entry);
font-size: 1.2rem;
}

.yyy {
color: white;
letter-spacing: var(--letter_spacing-entry);

こういった使い方をします。
利用する場合は

・カスタムプロパティはスタイルシートの上部に書く(カスタム〜がまとまっている部位に追加する)
・作成したプロパティを利用するセレクタ(対象要素)に

.xxx: var(--カスタムプロパティ);

という形で書きます。これが絶対条件なので無理に使う必要はなく、特に繰り返し用いることが無い場合にもあまり有益ではありません。例えば異なる5箇所に同じ指定をしたい、という場合は有効です。ただ一箇所に指定したい、という場合はカスタム〜は利用せず、そのセレクタに素直に
letter-spacing: 値;
と書くようにしてくださいね。
また、letter-spacingを用いると各文字の「前」に空きができますので、センタリングの際に中央からずれている印象になったり、letter-spacing指定の無いテキストと上下に並んだ時に文頭が若干揃っていないように感じたりすることがありますので事前に特徴を知っておいてください(左右ネガティブマージン指定で修正することは可能ですが、繰り返しますがネガティブ値はなるべく避けたほうが良いと思います)

--------------
Pinterestについては他のSNSアイコンと並ぶと頭が大きくて不格好になりますね。目の錯覚でもあるんですが、それがPinterestアイコンの特徴と言えます。
揃え自体は合っていますので、どうしても気になるようでしたら個別で調整する形になります(style属性を用いますがこの程度は問題ないと思います)

<use xlink:href="#inline-pinterest-p">

で検索するとhtml内に出てきますので、直前にある
<svg class="svg-inline" viewBox="0 0 384 512" role="img">

<svg class="svg-inline" viewBox="0 0 384 512" role="img" style="margin-top: 値px;">
と、赤字のstyle属性を追加してください。スタイルシートでやろうと思うとclass あるいは id属性を追加したりなど煩雑になりますのでここはstyle属性で良いと思います。style属性はこういった場合に利用すると有効ですね。

---------
> それぞれの記事のアイキャッチ画像をかわりに表示するように変えることはできませんか。〜

Mimizkさんの仰る「アイキャッチ画像」が「FC2ブログ公式機能の『アイキャッチ画像』」を指すのであれば自動でそれが表示されるようになっています。外部直リンク画像はアイキャッチ画像として採用されませんので、No imageになります。
私も以前は直リンクでホスティングを利用していたんですが、現在のwebの流れを考えると「同サービスが提供しているサーバーとの連携」をしておいた方が得策です。そうでなくとも「ドメインが揃っているか」を厳しく審査される時代です ^^;

この部位は「OGP」を参照しています。現状FC2ブログでOGP画像を指定するには
・「本文」内最初の画像(外部直リンク不可)
・アイキャッチ画像機能を利用して指定した画像(外部直リンク不可)
このいずれかのみ有効ですから、この条件を満たせない場合にサムネイルを表示させることはできませんのでご了承くださいね。

---------
あとはHaloのスペックを最大限に活かすには SSL化 をおすすめします。

参考記事分類: https://vanillaice000.blog.fc2.com/?tag=AOSSL

Mimizk
2020/10/08 (Thu) 19:53

To Akiraさん

ブログを書く時に、解決するためだけの知識を調べて終わらせるのですが、その際知識ある方々の書き方を拝見するだけでも「ああ本当は望ましくない・気持ちの悪い書き方をしているんだろうなぁ」と感じています。
ご迷惑をおかけします。

さて、話に出ました「<br> 2連続の後で、その空白を手動で詰める “二度手間” が行われている。認識しているか」という点についてですが、「承知のうえでやっている」という意味では半分理解していると回答できます。
なぜ半分かというと、「どんな時ひどい結果につながるか、具体的にどうなってしまう可能性があるか、よくわかっていない」という意味で、真に理解しているとは言えません。

実際には「<br>」という文字列を入力しているのではなく、単純に改行入力をしています。

 <p>あいうえお</p><br><br><p padding-top: -2em; >あいうえお</p>

・・・ではなく、私が HTML 編集しているブラウザ上での表示が


 <p>あいうえお</p>
 
 <p padding-top: -2em; >あいうえお</p>


このようになり、見やすい状態でブログ記事の入力・編集作業ができるように、という素人の浅知恵でやっていることなんです。

比較的文章量の多いブログを続けており、もし改行を挟まず <p>...</p><p>... と書き続けていくと、書いている私の方が途中で参ってしまうんです・・・。
3000文字くらいが全部ひとつながりになっていると、どこがどうやら、わからなくなってしまいます。
その記事を書き上げている・書き上げた その瞬間ならまだがんばれそうですが、しばらく経過してから加筆修正の必要が出たりしたら完全に私の能力を超えてしまいます。

実はテーブル要素についても、本当はそんな書き方がしたいと常々思っています。
でもテーブルの要素全てに改行と手動マイナスパディングなんてもっと面倒です。
結果的に、<table>...</table> 間は全部ひとつなぎになっています。
もし私がここでも素人の浅知恵を絞り、さらに輪をかけてとんでもない書き方を編み出していたら、管理人さんに完全に怒られていたと思います。

この書き方はやはりやめておいた方がよいでしょうか。
というか、私もやめられるものなら遠慮したいのですが・・・。

vanillaice (Akira)
Akira
2020/10/08 (Thu) 20:36

To Mimizkさん

確認なんですけども、

> 単純に改行入力をしています〜

「改行入力」というのは「手打ちで<br>と書いている」のではなく「Enter/ Returnキーを押下している」という解釈で合ってますでしょうか。そしてご利用中の投稿画面は「旧投稿画面」であり設定が「改行の扱い『自動』」でしょうか。
恐らくそうだと思いますが念の為確認です。

旧投稿画面の「改行自動」設定というのは、本来のテキストエディター(FC2での名称は「投稿画面」)というのは<br>と書かなければ改行されないんですが、直感的に扱えるよう「Enter/Returnキー押下を<br>とみなす」という設定です。
ですからMimizkさんがおっしゃるように「視認性のためにキーを連打している」のだとしても内部的には<br>が連続してしまうんですね。そしてもちろん見た目にも反映されます。

これはFC2ブログの良い点でもあり悪い点でもあるなぁ、と思っているんですが、
キー連打 = <br>連打
とはっきり意識されている方は非常に少ないんですね。なのでMimizkさんだけではありません。どうかその点はご心配なさらず。

で、結局どうするか、という話なんですが、2つの方法があります。

・旧投稿画面「改行の扱い『HTMLタグのみ』」
・新投稿画面「HTMLモード」

このいずれかです。前者の場合は旧投稿画面ですが
<br>
と明記しない限り改行は行われません。ですから作業上の「空白を入れておかないとなにがなんだか」を解消できます。例えば

~~~~
あいうえお




かきくけこ
~~~~

と打ったとしても、ブラウザの描画は

~~~~あいうえおかきくけこ~~~~

になります。

~~~~<br>
あいうえお<br>
かきくけこ<br>
~~~~

と打った場合は

~~~~
あいうえお
かきくけこ
~~~~

となります。

改行したい文末に逐次 <br> と記す手間は生じますがこれが一番確実な方法です。
<br>は頻出になると思いますので(実際はp要素を正しく使い始めると<br>の使用回数は限りなくゼロに近くなります)、辞書登録をして1キー押下で出力させられるようにしておくと良いですね。

参考記事: 旧投稿画面を楽に操るために「辞書登録の活用
https://vanillaice000.blog.fc2.com/blog-entry-937.html

もう一つは「新投稿画面『HTMLモード』」を利用する方法です。こちらは上級者向けかなぁ、と感じます。リアルタイムプレビューが使えませんし、使用できるツールに大きな制限が入ります。
なので「旧投稿画面『改行の扱い HTMLタグのみ』」とおすすめします。

参考として今table要素のサンプルを書きました。恐らくこういうことだろうと思います。
(作業上の空白が実際の描画に影響しない様子, サンプルは新投稿画面HTMLモードですが旧投稿画面改行HTMLタグのみでも同様の結果が得られます)

table要素
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/tablesamp----1000.png
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/tableresult----1000.png

p要素
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/parasamp----1000.png
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/pararesult----1000.png


で、やめた方が良いかどうか、なんですが、辞めたほうが良いですね(笑)
これは別に「HTMLを正しく書けッ!」とかそういうことではなくて、あとあと困ったことになる可能性が高いよ、その時に放り出したくなるかもしれないよ、直せるなら記事数の少ないうちに直した方があなたにとってきっと良い結果につながるよ、という意味ですすめています。とはいえ選択の権利と自由はMimizkさんにあるわけですから、私が強制するようなことはないですよ :)

なんか割とよく誤解されるんですが、私自身はみなさんに「HTMLを使う以上はしっかりやれ」だとか「そんなカスタマイズをほどこすとは言語道断」なんてことを思ったりはしません。ブログは気軽に手軽に簡単に楽しく書ければそれが一番だと思っています。
学びたい方へは知りうる限りの情報を、と思いますが、ブログ書くのにhtmlやCSSなんて知らなくたって全然構わないんですよ (o'ω')ノ

ただ、問題になるかもしれないなぁ、困るかもしれないなぁ、という場合には指摘させて頂く、という感じです。

Mimizk
2020/10/08 (Thu) 21:12

To Akiraさん

改行・・・ 「HTML タグのみ」・・・

・・・。

できるじゃないですか!
見やすいまま、<br> なしに、編集時の視覚上は改行が使えるじゃないですか!

はぁ~


記録上、どうやら私は FC2 ブログを使い始めて12年経つようなんですが、今初めてこの存在を認識しましたよ。
これならテーブルだって楽勝じゃないですか!

はぁ~


本当に質問してよかったです。
失礼ですが管理人さんは投げ銭システムみたいなものに登録されておられないのですか?
感謝の気持ちが消化できればこちらも幸せなのですが。

当たり前ですが、改行がこういった状況になれば、<br><br><p style="padding-top: -...> なんてする必要ありません。
即刻やめますよ!


今のところで不思議に思っていることがもう1つあります。
それは、トップページに表示される記事の数についてです。

FC2 ブログの設定で、トップページに表示する最新記事の数を「5」に設定していますが、すると、実際には6本の記事がトップページに表示されます。
「8」なら「9」。
「3」なら「4」。
設定した数より必ず1つ多い記事が表示されるようです。

これは、最新の1つはその数に入っていないということなのでしょうか。
もしかすると、最新の1つだけ設定を変えて、以降の記事の2つ分の横幅で表示するレイアウトも選べたりするでしょうか。
私は、長く使い続けるのにはシンプルなデザインであることが必要不可欠と考えるので、Halo が断突の優勝でしたが、そこのレイアウトについては他が羨ましいと思っているところです。

vanillaice (Akira)
Akira
2020/10/08 (Thu) 21:23

To Mimizkさん

ネガティブマージンが危険になり得るのはなぜか、というのをスクリーンショットで示しましたので、たぶんご理解頂けると思います。ちょっと極端な例ですが、こういう特徴があるよ、ということでごらんください。
基本html内容は

<p>あいうえお</p>
<br>
<br>
<br>
<p style="margin-top: -3em;">ネガティブマージン -3em</p>

です。1つ目のp要素の上下にマージン指定はありません。つまりゼロ値で余白はできないようになっています。

【2つ目p要素にネガティブマージンが無い場合】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam2----1000.png

今ある余白は3つの<br>によるものです。

【2つ目p要素にネガティブマージン -3em】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam1----1000.png

余白が小さくなったのがわかります。

【1つ目p要素のフォントサイズを1emから2emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam3----1000.png

文字は大きくなりましたが特に問題はありません。

【1つ目p要素のフォントサイズを1emから3emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam4----1000.png

さらに文字が大きくなりましたが問題はありません。

【2つ目p要素のフォントサイズを1emから2emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam5----1000.png

今後は2つ目の方のフォントサイズを大きくしました。余白が随分と削られたのがわかります。

【2つ目p要素のフォントサイズを1emから3emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam6----1000.png

1つめのp要素と重なってしまいました。

【2つ目p要素のフォントサイズを1emから8emへ】

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/negam7----1000.png

1つ目のp要素はおろか、記事からもはみ出てしまいました。

-----------

これがネガティブマージンの特徴なんですね。font-sizeやline-heightの指定の如何、先行要素がどうなっているのかの如何によってはこういうことが起こってしまう。あくまでも極端な例ですよ。これが仕組みの理解に一番明解かな、と思います。

vanillaice (Akira)
Akira
2020/10/08 (Thu) 21:30

To Mimizkさん

お返事が行き違いになりました。

えっと、記事数が指定を守っていない、ということですよね。だとしたらFC2のシステムエラーだと思います。確か今年に入って2度目ではないかと(笑)
私の方ではそういった症状は確認できないんですが、サーバーによるんでしょうかね。
ちょっと現時点で不明です。ごめんなさい。

--------
> 最新の1つだけ設定を変えて、以降の記事の2つ分の横幅で表示する〜

できますがHaloでは厳しいかな、と思います。縦長を意識したデザインなので1つ目の記事だけCSSを大きく変更する必要が生じます。もちろん今のサイズのまま縦長というわけにいきませんので横にしないといけませんし、あまりおすすめはできないです (´・ω・`)
ご希望でしたら初めからそういったデザインもありますよ。

--------
投げ銭とかは無いです。どうぞ無償でご利用ください(笑)
お気持ちだけ受け取りますね。ありがとうございます。

FC2ブログは隠しているわけではないのに「隠し機能」みたいになってしまっているものがたくさんあるんです。ブログ歴が長い方でもご存知なかったりで、そういったものが解消されると良いな、ブログ初心者さん・新規開設者さんでも最低限の設定がすぐにできるようになれば良いな、と思います ^^;

Mimizk
2020/10/09 (Fri) 02:16

To Akiraさん

色やフォントの設定がほとんど終わり、いよいよ記事の書き直しが始められる状況になりました。

私が Halo の前に使っていたブログデザインでは、以下のような記述がスタイルシートに見られ、私はそれを変更していました。

 h1 {
 font-size: 15pt;
 font-weight: bold;
 margin-top: 4em;
 margin-bottom: 0em;
 padding: 0;
 }

スタイルシートでこのような指定をすれば、個々のブロック要素にいちいちパディングの指定をする必要がなくなる・手間が省ける、という考え方で記述されていたものだと考えられます。

しかし、ここまで教えていただいた「なるべくマイナスパディングは使わない方がよい」という方針を重んじれば、<p> <div> <h1> といったブロック要素に逐一 style:padding を書き加えて指定するのがベターと考えられます。

実際に管理人さんは普段どちらの・どのような方法で書いておられるのでしょうか?

vanillaice (Akira)
Akira
2020/10/09 (Fri) 13:34

To Mimizkさん

こんにちは ('0')/

どこまで説明するべきか悩むところですが、なるべく詳細に説明したいと思います。長くなります ^^;

まず、 padding にマイナスの値を指定することはできませんので margin の書き間違いだろうと思います。
確認しておきたいのは「marginとpaddingは違う」という点です。ここを混同してしまうと後々害が出ますので念の為説明します。

padding --- 対象要素自身の「内側」の余白
margin --- 対象要素自身の「外側」の余白

paddingは自身にしか影響しないんですが、marginというのは 必ず相手が存在します
相手というのは「上にある要素」「下にある要素」「左にある要素」「右にある要素」ですね。
昨晩掲載したスクリーンショットは別の言い方をすると「ネガティブmarginが他の要素に影響を及ぼしている例」でもあります。

サンプル①
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/samp20201010----1000.png

比較しやすいよう横に並べて表示しています。後続要素の方に注目してください。
このサンプルではどちらも全く同じに見えます。
左は「padding」が付いており、右は「margin」が付いています。
両者は全く同じに見えますが、実際は全然違うのだ、というのが次のサンプルで、対象要素に border をつけることで一目瞭然になります。

サンプル②
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/samp20201010-2----1000.png

paddingは「自身の内側」に
marginは「自身の外側」つまり自身と先行要素(margin-top)の間に
それぞれ余白が生じるわけです。
この違いを理解しておかないと、今後例えばこの対象要素に background-color などの装飾を当てたいと思った場合、paddingの方はひどく不格好になりますよね。
ならば margin を使おう、と考えたくなるところですが、marginには以下のような特徴もあります。

サンプル③
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/samp20201010-3----1000.png

左右の高さが揃わなくなりました。
左は
先行要素の下margin 30px + 対象要素の上padding 30px = 先行要素と対象要素の間隔は 60px
になります。
一方右は
先行要素の下margin 30px + 対象要素の上margin 30px = 先行要素と対象要素の間隔は 60px
には なりません
上下のmarginというのは相殺(offset)というのが起こり、大きい方が小さい方を吸収しますので、この場合は同じ30pxですからプラスマイナスゼロで 30px という計算になります。

------------
marginを使う場合は自身だけでなく周り(左右上下)にある要素のpaddingやmarginを考慮する必要がありますので、paddingよりも使い方は難しいかもしれません。CSSで一番むずかしいのはmarginだ、と個人的に思っています。ネガティブ値を利用する場合はなおさら難易度は高くなります。

一旦投稿しますね。

vanillaice (Akira)
Akira
2020/10/09 (Fri) 14:07

To Mimizkさん②

なぜMimizkさんがネガティブマージンを利用しなければいけない状況にあるかというと
元々のスタイリングが自分の好みではないから です。
そして
頻出要素に対して決められたスタイルが確立されていない ためでもあります。

例えば頻出の「見出し」ですが、たいていの場合は例えば「見出しの上下は2emのmargin」と予め決めておくものなんですが、ある時は「見出しを使って下marginをここでは3em」「また見出しを使ってここでは上marginを-2em」
なんてことをやってしまうと、読み手も混乱しますし、それ以前にMimizkさんご自身が混乱されるのではないかと思います。

昨晩説明した通り、style属性による指定というのは「ここぞの決め打ち」というんでしょうかね。予め決めたスタイルを一時的・単発的に変更したい時などに用いるのであって、常に使う性質ものではないんですね。
常にstyle属性が必要、ということは言い換えれば「デフォルトのスタイリングが常に気に入らない」という意味でもありますから、ならばそのデフォルトを好みに変更しておけば良い、ということになります。

そして頻出html要素に関しては「これだ」というスタイリングを決断されると良いですね。その方が見る側も直感で処理できます。文書のスタイルというのは一定の形式に則っているのが望ましいと思います。

Haloでは

・記事内で利用したp要素(段落)の上下margin
・記事内で利用したh要素(見出し)の上下margin(h2〜h4まで)

はデフォルトスタイリングを行っていますので、まずはsytle属性を利用せずに書いてみて(投稿する必要はありません。プレビューで目視確認を行ってください)、フォントサイズが希望に沿っているか、上下の要素との間隔が希望に沿っているか、等を確認してください。希望に沿っていない、と判断できる場合は
/* back to default */
で検索するとp要素とh要素に関する予めの指定が記されていますので、調整を行ってください(!ネガティブ値は使わないよう注意)
元のスタイルを好みに整えておけば、その都度style属性で変更する、といった手間は生じないはずです。それにはまず「規則性」をご自身で確立されることも大切です。

-----------
> スタイルシートでこのような指定をすれば、個々のブロック要素にいちいちパディングの指定をする必要がなくなる・手間が省ける、という考え方で記述されていたものだと考えられます〜

これはですね、元のテンプレートも作者さんも存じませんので一般的な回答としてお読み頂きたいと思います。
Haloテンプレートはhtml5です。htmlのバージョンが「5」ということですね。
そして以前ご利用になっていたテンプレートが、もしかするとhtml4、htmlのバージョンが「4.0」だった可能性があります。

html5以前は「h1はページ内に1つだけ」という決まりがありましたので、そのルールを遵守すれば同一ページの他の部位にh1が存在することはありえない、という理屈になります(実際は記事を書くのは各ユーザーなのでルールが守られるかどうかは別)
なのでh1に対して直接スタイルを当てていたのだろうと思います。そして対象は恐らく「ブログタイトル」だと思います。

私の場合は要素名に直接スタイルを指定することはまずありません。不可抗力、っていうんでしょうかね。ルールがあるとしても守られるとは限りませんので

<h1>ブログタイトル</h1>

h1 {
margin: 3em 0;
}

とするのではなく

<h1 id="heading">ブログタイトル</h1>

#heading {
margin: 3em 0;
}

と、classやidセレクタを設け、そこにスタイルを当てるようにしています。そうすれば仮に他の部位にh1が登場したとしても勝手に同じスタイルが適用されることはありません。

で、h1の例を出されていますのでちょっと心配というか、ただサンプルに出しただけ、というならば流し読みで構わないんですが、記事内で利用できる見出しの位というのは決まりがあってですね、厳格なものではないけれども守ったほうが良い、という点ですね。
私のテンプレートでは記事内で利用できる見出しの最上位は h2 です。
他製作者さんの場合はほとんどが h3 からのはずです。なぜかというと、FC2エディターのツールで使える位が h3 からですし、公式テンプレートも全て h3 からになっています。

webに限らず使い勝手や見た目というのは「マジョリティに合わせる」、というのが正解である場合が多いんですが、私のテンプレートでは敢えて h2 から ^^;
記事のタイトルをh1にしたい、というご要望が増えたための決断です。web全体では今割とそういう流れになっています。
昔だと
・ブログタイトル --- h1
・記事タイトル --- h2
・記事内 --- h3から

今だと
・ブログタイトル --- 見出しなし(div)
・記事タイトル --- h1
・記事内 --- h2から

という感じですかね。なので仮にMimizkさんがh1の例を出したのが「記事を書くときに使うから」というのであれば、h2にした方が良いと思います。見出しの位は「SEOにめちゃくちゃ影響がある」とは言いませんが「SEOに全く影響は無い」とも言いません(笑)

ただしhtml5ではh1の複数利用は許可されていますので、使いたいという場合は以下のような書き方をされると良いと思います。

<section>
<h1>見出し</h1>
<p>内容</>
</section>

section要素としてマークアップして、その中にh1、という形ですね。セクショニング(構造の区分け)が正しければ複数回利用してもOKです。
ただしgoogleは「h1何度も使うのやめろ」という方針のようですね。

話が前後しますけれども、私のテンプレートでも「記事内で利用する」見出し、については要素に直接スタイルを当てています。記事を書く際に頻出のhtmlタグにclass名・id名を書け、というのは無理筋なので、「記事内にある」という条件をつけた上で要素直接のスタイリング(タイプセレクタ と言います)を行っています。

一旦投稿します。

vanillaice (Akira)
Akira
2020/10/09 (Fri) 14:22

To Mimizkさん③

> 実際に管理人さんは普段どちらの・どのような方法で書いておられるのでしょうか?〜

まず、marginのネガティブ値はまず利用しません。どうしても必要にかられた場合、これまでに1・2度はあるかもしれませんが、通常そういうことはしない (´・ω・`)
例えば

<p>あいうえお</p>
<p>かきくけこ</p>

p要素の上下marginがスタイルシートで3emとなっていた場合で、どうしてもこの上下テキストの余白を小さくしたい、仮に1emにしたいのであれば

×
<p>あいうえお</p>
<p style="margin-top: -2em;">かきくけこ</p>

ではなく


<p style="margin-bottom: 1em;">あいうえお</p>
<p style="margin-top: 1em;">かきくけこ</p>

あるいは先行要素のmargin-bottomを0、逆に後続要素のmargin-topを0、としても構いません。描画の結果は同じです。
こうして双方で調整します。後続要素だけで処理しようと思うとネガティブ値の利用、となってしまいますので、それは避けます。面倒だけれども双方に調整を入れます。

あとはデフォルトスタイルに逆らいたい場面が割とよく巡ってくる + その逆らう場面のスタイルはほぼ決まっている
ということもあると思います。例えば先のサンプルを利用して基本はデフォルトの margin: 3em で行けるけど、3割り程度の確率で margin: 1em にしたい時がある、など。
その場合はクラス属性を利用し、そのスタイルをスタイルシートに追加します。

<p class="m_small">あいうえお</p>
<p class="m_small">かきくけこ</p>

スタイルシート側に記載
.m_small {
margin: 1em;
}

私のテンプレートの場合は「記事内の」という縛り・条件づけがありますので優先度が高くなっていますので、Haloならば

.inner-contents .m_small {
margin: 1em;
}

という書き方になります(.inner-contents の部位が「記事内の」を示しています)
こういうやり方もありますよ、という参考まで。
ただしclassやidでの制御はテンプレート変更時にスタイルの移植をしないと失われてしまいますので、その点だけ注意が必要です。
詳細は昨日記した参考記事(style属性かclass, id属性かの選択について)をごらんくださいね。

Mimizk
2020/10/09 (Fri) 17:30

To Akiraさん

【 Heading(見出し)について】

結論から言うと、h1 を相当数使って文章を書いています。
管理人さんが h2 > h3 > h4 の順で使っているところを、私は h1 > h2 > h3 にして執筆してきました。
私も以前気になって調べたことがあるのですが、HTML5 になって h1 の使用解禁! 好きに使えばヨシ! みたいな解説が多かったと記憶しています。
アフィリエイトとか一切考慮しないので、大して不都合も違いもないなら、自分がわかりやすければよいという考えです。
とはいえ私自身、先日からこの halo の説明を見て「h2 からだよ」と書かれていたのが気になっていました。
無理に h1 を使う必要はないので、これからは文中最上位の見出しを h2 に変えようと思います。



【見出し要素にはスタイルを指定しない】

だんだんブログデザインそのものから話が逸れてきて、ここまでくるとかなり明確に「書き方」になってしまって申し訳ないので、そろそろ切り上げなければいけませんね。

ひとまずスタイルシートに

 .heading_2 {
  font-size: 3rem;
  margin-top: 0em;
  margin-bottom: 0em;
 }

 .heading_3 {
  font-size: 2.8rem;
  margin-top: 0em;
  margin-bottom: 0em;
 }
 
 .heading_4 {
  font-size: 2.5rem;
  margin-top: 0em;
  margin-bottom: 0em;
 }

・・・とか書き加えてみました。
場所は /***= article =***/ の下にしましたが、おかしくないでしょうか。

私はこういった #id とか .class を指定する方法を初めて行いました。
たしかに、スイッチの集約化というか、配電盤みたいなかたちで全ての記事を調整できるようにしておくのが一番 “強い” のは間違いないことですね。
このうえ

 <div class="XXX" style="margin: △em; ...">

みたいな重ねが書きは・・・ しなそうですね笑
なるべく指定だけで乗り切れるように、工夫してみます。
でも、空白の接する先が文章なのか・画像なのか?
あるいは同じく文章だとしても、同じ章立ての前段なのか・異なる章立てとの境なのか?
例えば <h4> から <h2> に戻るところの空白なのか ・・・によって、ちょっとずつ空白を変えたくなってしまう、そういう主観的な感覚があるんですよね。



【繰り出し式のカテゴリツリーについて】

Halo 備え付けのものでなく、サイドメニューに加えるカテゴリツリーを入れたのですが、子カテゴリを呼び出すクリックをすると、画面が最上部まで戻る挙動になっています。
静止した状態でクリックできるようにできるでしょうか?

vanillaice (Akira)
Akira
2020/10/10 (Sat) 01:15

To Mimizkさん

こんばんは ('0')/

> とか書き加えてみました。〜

残念ながらこれだと効力が無いですね。
CSSのセレクタ指定は優先度があって、書き方によって打ち消し(上書き)ができる場合とできない場合とがあります。

作業前に確認すべきは テンプレートデフォルトスタイルは残すのかどうか です。まずこれを決めてください。
例えば h2〜h4 の指定はデフォルトでは

.inner-contents h2 {
margin: 3em auto 2em;
line-height: 1.5;
font-size: 1.2em;
}
.inner-contents h3 {
margin: 3em auto 2em;
line-height: 1.5;
font-size: 1.1em;
}
.inner-contents h4 {
margin: 3em auto 2em;
line-height: 1.5;
font-size: 1em;
}

こうなってます。上に3emのmargin、下に2emのmargin、という指定ですね。まずこれが必要なのかどうかです。
不要な場合には消してください。

問題はデフォルトはそのまま残してスタイルを追加する場合です。以下のルールがありますので守らないと意図した内容が反映されませんので注意してください。

・CSSの基本は「上書き」
.xxx {color: red}
.xxx {color: blue}
と、同じ対象に対し異なる指定が行われている場合に適用されるのは 記述順が後の方(この場合は blue) です

・セレクタには優先度があります

<div class="inner-contents">
<p class="yyy">あいうえお</p>
</div>

.inner-contents はHaloテンプレートの記事部分を囲う要素に与えられているクラス名です。これはユーザーが書く内容ではありませんので、記事を書く際には自動的にこのinner-contensの「中」にMimizkさんが任意の文章やhtmlを書くことになります。
で、実際に記事内にclass名「yyy」を持つp要素を書いた場合ですね。

例えばスタイルシートがこうなっているとします ↓

.inner-contents p {margin: 0}
p{margin: 1em}
.yyy {margin: 2em}
これらは全て同じ対象を指しています。この場合に適用されるのは margin: 0 です。
CSSの基本は上書きなんですが、優先度が異なる場合には書き順に関係なく優先度が高い方が適用されます。

.xxx p --- (クラスセレクタ + タイプセレクタ)優先度 高
.yyy --- (クラスセレクタ)優先度 中
p --- (タイプセレクタ)優先度 弱

他にもidセレクタ, 疑似要素, ユニバーサルセレクタ など色々あって、それぞれ優先度が違います。
今これら全てを解説してもアレなんで割愛して、テンプレートカスタマイズでつまずく場合のほとんどは例に出した3種です。

で、結論として

1. 追加内容はデフォルト内容よりも「後」に書く
2. クラスセレクタの前に .inner-contents を追加する

この2つが必須です。今回の場合は実際は1は守らなくて良いんですが、「CSSは上書き」の基本ルールを覚えて頂きたいので、今後なにかしらカスタマイズされる際にも「スタイルシートの末尾に書く」を基本にされると良いと思います。

追加する内容は
.inner-contents .heading_2 {
内容
}

と、赤字部位を追加してください。3種全てに追加です。
.inner-contents と .heading_x の間には必ず半角スペースが必要です(!全角スペースは絶対的NGです)

------------
> 子カテゴリを呼び出すクリックをすると、画面が最上部まで戻る挙動になっています。
静止した状態でクリックできるようにできるでしょうか?〜

これはプラグインのhtmlバージョンの問題なので、テンプレートでどうこう、という性質ものではありません。
ご面倒ですが以下のコメント欄をご参照ください。同じ要件への説明が記されています。

https://vanillaice000.blog.fc2.com/blog-entry-724.html#comment10036

よろしくお願いします。

-
2020/10/11 (Sun) 10:17

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/10/11 (Sun) 16:11

フォントの件 内緒さん

こんにちは。
感想楽しみにしていますね :)

以前交わした会話が役に立ちました(笑) ご協力感謝します。
見出しの件なんですが、すごく難しいですよねぇ (´・ω・`)
方針次第で場合によっては全部書き換えなければいけなくなる、それが見出し順位 ( ̄∀ ̄;)
記事タイトルをh1にするにあたり、ものすごく悩んだんですけどね。「スタンダードに合わせる」の観点から言うとこれはもう外れてしまうわけなので。

例えばlazyload系のプラグインを使っていて、あるものは .lazy またあるものは .lazyloading またあるものは .lazyload とバラけていると、結局切り替えしたいユーザーの手間が増えてしまう。なのでそこらに気を使う作者さんだと先行リリースされている一番メジャーなものとクラス名をあわせる選択をする、という気遣いをされていますね。大抵は .lazyload でしょうか。衝突するか融和するか、という点もすごく難しいけれど。

、スマホでよく見る「ハンバーガーアイコン」なんかもそうですね。あの形がメジャーなので多くの人が直感で理解できる、と。
そういう意味で見出しの位変更は相当悩みました ^^;
TOCなんかを使い出すと順位をはっきり決めないといけませんしね。見出しって結構厄介なんですよー (´・ω・`)

-
2020/10/11 (Sun) 17:22

管理人のみ閲覧できます

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

-
2020/10/12 (Mon) 21:38

管理人のみ閲覧できます

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

-
2020/10/18 (Sun) 16:18

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/10/20 (Tue) 00:51

To 見出し装飾の件 内緒さん

こんばんは。

そうですね。id/ class属性は対象の特定に使います。idはルールが厳しいので主にclassを使うことになるんですが、

・他の名称とバッティングしないように気をつける
・最初の文字はアルファベットのみ(数字や記号はダメ)
・スペースの利用はダメ(スペースはクラス名の区切りなので名称内では使えない)

などなどのルールに則って独自名称をつけてください。ご自身がわかりやすい名称でOKです。
対象特定を行うだけなので、例えば

.xxx {
color: red;
}

とあるとして、例えば

<div class="xxx">あいうえお</div>

<ul class="xxx">
<li>リスト</li>
<li>リスト</li>
</ul>

<h2 class="xxx">見出し</h2>

<h4 class="xxx">見出し</h4>

<span class="xxx">あいうえお</span>

こういうことですね。どの要素のテキストも「赤」になります。同ページ内、同記事内に上記全て入っていても大丈夫です。特にhtmlの定義に影響が出るものではなく「装飾の対象にする」というだけです。
こういうのはダメですけどね。

div.xxx {
color: red;
}

<div class="xxx">あいうえお</div> --- 赤くなる
<span class="xxx">あいうえお</span> --- 赤くならない(divではないから)

-----------
そうなんですー。数ヶ月前の一時期は「店売りたい病辞めたい病」でした(笑)
収益とかもそうだけど、役所へ提出する書類とかそういうのがもう私ホント嫌でしかたがない (´・ω・`)
どうせ税金の申告時期に毎回発症しますけれども(笑)

スコッチテープが背景と近似色でちょっと見づらいようなので
box-shadow: 0 6px 16px -6px rgba(0,0,0,.2);
あたり追加すると良いかもしれません。

-
2020/10/20 (Tue) 10:00

管理人のみ閲覧できます

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

-
2020/10/20 (Tue) 12:10

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/10/20 (Tue) 16:12

To 見出し装飾の件 内緒さん

こんにちは。

お役に立てれば幸いです :)
CSSの記述の順序については「ルールセット」の中は特に決まりはありません。

.セレクタ1 {
プロパティ: 値
}

.セレクタ2 {
プロパティ: 値;
プロパティ: 値
}

セレクタ1のまとまり、セレクタ2のまとまりがそれぞれ「ルールセット」です。
ルールセットの記述順序は優先度があるけれども、
{

}
に囲まれている内容には無い、という意味です。ただし重複が合った場合

.xxx {
color: red;
font-size: 12px;
color: red;
}

既に書いてある colorプロパティがルールセット内に登場している場合などは後ろの方が適用されます。これ割と私もやってしまうんですが、ルールセット内での重複は単なるミスです ^^;

あと、セレクタ1とセレクタ2の内容をよく見ると、セレクタ1の方は値の末尾に ; が付いていませんよね。
ルールセット内の最終プロパティ(単一の場合含む)はセミコロンを省略して良い、というルールがあります。末尾以外の省略はダメです。
最終セミコロンを省略するとわずかでもファイルサイズの削減になりますが、ミスを誘発しやすいので避けた方が良いと思います。例えば今回内緒さんが悩まれた「どこに追加すれば?」の場合もそうですよね。
末尾セミコロンが省略されていたら追加位置によっては「エラー」になっている場面です。

ルールセット内の書き順については
・アルファベット順に書く
・合理的に書く
・好きなように(自分の決めたルールで)書く
のいずれかだと思います。私の場合は「合理的」というか、ブラウザが先に知りたいであろう内容を先に書く、という感じです。
例えば

opacity
float
display
position

などは先に書くようにしていまが、仮に入れ替わっても問題ありません。
今後何か追加する場合は

・ルールセットの追加はスタイルシート末尾に(重複している場合の上書きを考慮)
・ルールセット内への追加はセミコロンの有無に注意

こういう感じで良いと思います :)

--------------
私「元号」もダメなんです。最近は役所の書類で「西暦でも良い」というのが増えて助かる ^^;
でもその前に書類仕事そのものが無理(笑)

お返事はお気になさらず :)

-
2020/10/20 (Tue) 16:58

管理人のみ閲覧できます

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

-
2020/10/31 (Sat) 15:11

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/10/31 (Sat) 17:07

To siliconの件 内緒さん

こんにちは。

息子に聞いてみます(笑)
連絡取れ次第、情報取れ次第改めてお返事しますね。

私の素人考えだと、

・intelへの使用料が無くなるので価格が下がる可能性?
・iPhoneとの連携がスムースに?

今こういう方向性が主流になってきているのかなぁ、と思います。
・ブラウザとOSを区別する必要があるのか --- Google chrome book
・スマホとPCのOSを別にする必要があるのか --- Google, Appleは今ココ

リリース直後の購入、となると予測がつかないけれども、ともかく息子に連絡だッ (o'ω')ノ

-
2020/10/31 (Sat) 19:31

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/10/31 (Sat) 21:22

To siliconの件 内緒さん②

連絡取れましたー。

・ソフト互換性重視なら第一世代はスルー
・価格は100〜200ドル程度安くなりそう

だそうです。ただし価格の方は会議などでも全く情報が提供されていない、ということで単に「予想」というだけだそうです。
(いずれにしろ守秘なんとかがあるからアレですが)
ソフトの方はゆくゆく必ず追いついては来ますが、「今すぐ今まで通り」というわけにはいかないので、常時使うソフトが確定しているならば、初回は購入を避けたほうが良い、とのことでした。

つか、全然フツーの情報しかないじゃん (´・ω・`)

ここからはなんとなくです。なんとなく私が感じたこと。
開発チームはものすごく自信を持っていて、一方息子(開発チームではない)は「intelで良いんじゃないの。信頼度高いし」と思っている、という感じ(笑)
うちの子の場合は動画編集の副業があるので、やっぱソフト使えないと困るとかそういうのもあると思います。
いずれにしろもうすぐkalamata mac(自社プロセッサmac)が発売されるようなので、レビューをチェックしてからの判断で良いと思います :)

-
2020/11/01 (Sun) 07:28

管理人のみ閲覧できます

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

Mimizk
2020/11/20 (Fri) 01:17

お久しぶりです

こんばんは、お久しぶりです。
助言を頂いた後で準備を進めて、ようやく記事の投稿が再開できるようになりました。
これでまた活動できます、ありがとうございました。

さて、今回お伺いしたいのは、プロフィール欄の画像についてです。
なんだか画質が極端に落とされて表示されているように感じるのですが、改善する方法はありますか?
アップロードする画像を、2000px とか大きなサイズにしたり、逆に小さくしたり、色々試してはみたのですが、結局うまくいきませんでした。
スマートフォンで見ると顕著にガサついているのがわかり、気になります。
なにか対処する方法はあるでしょうか。

vanillaice (Akira)
Akira
2020/11/26 (Thu) 23:48

To Mimizkさん

こんばんは。コメント数が多くMimizkさんを見落としてしまいました。申し訳ございません (*_ _)

> プロフィール欄の画像について〜画質が極端に落とされて表示されているように感じる〜

原因はMimizkさんの環境がわからないので断定はできませんが、画質の低下を感じる多くの原因は 閲覧デバイスが高解像度ディスプレイ(高dpi)であるため です。

> 2000px とか大きなサイズにしたり〜スマートフォンで見ると〜

とありますので、その点はご理解頂いているかと思いますが念の為。
参考記事: スマートフォンで画像がぼやける対策【2倍じゃもう足りない!】
https://vanillaice000.blog.fc2.com/blog-entry-627.html

記事タイトルには「スマートフォンで」とありますが、パソコンでも4K, 5Kといった高解像度の場合は同じです。
で、対象の画像がどれなのか不明ですけれども、現在設定中のネコのものであれば、元より焦点が少しずれているのかなぁ、という印象はあります。なので検証の際はオブジェクトがはっきりと写っているものをご利用になられると良いと思います。

個人的なプロフィール画像推奨サイズは 横 600px 縦 600px の正方形です。
プロフィール画像がブログに表示される際の平均は横300px程度ですので、その倍の600pxですね。そして正方形が最も都合の良い形です。
長方形の画像をHaloのような正円の中や、正方形に当てはめる際、寸足らずが発生しないよういずれか短い方を100%とし、長い方は100%以上にして見切れさせる、というのが主な手法になりますので、つまりは長方形の場合は「拡大が行われる」、という意味です。それ故の正方形推奨です。

Android機種の場合はiPhoneよりもさらに高解像度で、カメラ性能を謳っているデバイスはこの問題が顕著になります。
なので2倍(iPhone、と言ってもいくつか前の世代)を目安にするならばHaloの表示は200px四方弱ですから、画像サイズは400px四方、3倍(Android)目安ならば600px四方をそれぞれおすすめします。
iPhoneでも新機種ではこれまでの「ぼやけ」に加え、ガサつき(目の粗さ)が目立つようになっているなぁ、と感じています。

あまり度が過ぎても今度は負荷の問題が出てきますので、妥協も考えるとやはり600px四方程度が妥当だと思います。
根本的な解消(容量(kb)とサイズ(px))についてはFC2ブログの新拡張子(webP)対応を待つ、ということになるかと思います。
よろしくお願いします。

Mimizk
2020/11/27 (Fri) 17:07

To Akiraさん

お返事ありがとうございました。

思わぬところから解決したといいますか
プロフィール画像の更新フォームで「画像トリムサイズ」というところがありますが、ここに何の注意も払っていませんでした。
確か 220*170 くらいの数字が入っていたようなんですが、これが文字通りのサイズに縮小してアップロードする指定になっていたようで、私がいくら 2000px の画像を投入しようが、Akira さんの助言を受けて 600*600 に加工した画像を投稿しようが、全く無意味な状態になっていました。
600*600 の画像を、当該部分にも「600*600」と入力して更新したところ、完全に解決しました!w
毎度お騒がせして申し訳ありません・・・。

でも、やっぱり見え方は間違った認識じゃなかったわけです。
猫の目にハイライトが戻って本当に満足です、ありがとうございました。

vanillaice (Akira)
Akira
2020/11/29 (Sun) 20:32

To Mimizkさん

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

そうだったんですね。原因がわかって安心しました。
念の為FC2現行プロフィールアップロードの語弊について説明しますね。
「トリム」というのは「切り出し」の意味が本来ですが、「画像トリムサイズ」とあっても実際はトリムはしておらず、「縮小 シュリンク」しています。つまりオリジナル画像のアスペクト比は変わりません。
これは誤解を生む表現なので運営側には変更を求めています ^^;

なので例えば仮にオリジナルが「横 1000px 縦 600px」のものを「横 600px 縦 600px」と指定してアップロードしたとしても、変換後のサイズは「横 600px 縦 360px」と長方形のままなので注意が必要です。

現在のMimizkさんのプロフィール画像は正方形になっていますのでベストな形状です。
お疲れ様でした :)

Mimizk
2020/12/03 (Thu) 16:18

記事の引用

もし直接 halo と関係なかったら申し訳ありません。
例えばこのページにもいくつも使用されている、“記事の引用” ウィンドウというのは、halo で私のような利用者が同じように使って表示させることはできるのでしょうか?
いくつも引用箇所がありますが、例として上から2つほど挙げると、「IE 非対応」の項にある『【IE撲滅運動】IE利用者への啓蒙オーバレイ表示』とか、「ダークモード対応について」の項にある『El-zigzag - FC2ブログテンプレート』とかのことです。
このような表示をさせる記述というのが halo にも備えられているならぜひ利用したいと思うのですが・・・。

vanillaice (Akira)
Akira
2020/12/03 (Thu) 22:39

To Mimizkさん

こんばんは ('0')/

こういうのを一般的に「ブログカード」と言います。
テンプレートにどうこう、というよりも相手方(リンク先)の情報を取得するためにブラウザにブックマークレットを登録する、などの処置が必要です。テンプレートの方は取得した情報に対するスタイリングをスタイルシートに追加します。

導入手順などは以下のページをご参照ください。
参考記事: ブログカードのブックマークレットを作成しました
https://vanillaice000.blog.fc2.com/blog-entry-583.html

よろしくお願いします :)

Mimizk
2020/12/04 (Fri) 00:19

To Akiraさん

うわっ うわっ
使ってみましたこれ最高に捗るやつです!

一応最初に「記事 引用」とかで全体検索をして目を通したのですが、「こういうのを『ブログカード』と云う。」というのがわからないので完全にスルーしてしまいました・・・。

伊野木
2020/12/04 (Fri) 15:47

テンプレート使用のお礼

Akira様
いつも素晴らしいテンプレートの数々と、とても分かりやすい多岐にわたるご説明をありがとうございます。
質問ではないのですが、どうしても一言お伝えしたくコメントしております。
14年ほど書いているブログですが、2年前に引っ越しを検討した際にAkira様の作られるテンプレートを拝見し、どうしてもこの方のテンプレートが使いたい!と思い、FC2に引っ越しをいたしました。
最初はHymnを使わせていただき、今はHaloを使用しております(ので、こちらに書かせていただきました)

昔はガラケーとPCが多かったですが、昨今のスマホ事情に合わせ、自分もおしゃれでセンス良くて画像を綺麗に入れられるようなブログを書きたいなと思っていた時に拝見したAkira様のテンプレートの数々。理想をこえて本当に素敵で、素晴らしくて。どうしても一度お礼をお伝えしたく、コメントいたしました。
少しずつカスタマイズして、その度にブログを拝見して試行錯誤して、続けております。
素敵なテンプレートを使うことができて本当に楽しいです。本当に、ありがとうございます。

vanillaice (Akira)
Akira
2020/12/05 (Sat) 22:30

To Mimizkさん

こんばんは ('0')/

導入できたようで良かったです。
お疲れ様でした :)

vanillaice (Akira)
Akira
2020/12/05 (Sat) 22:31

To 伊野木さん

こんばんは ('0')/

ご丁寧にありがとうございます。励みになります :)

-------
全然関係ないですが、鬼滅のいのすけの声優さんの声がすっごい好きです(笑)

-
2021/09/05 (Sun) 15:24

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/09/05 (Sun) 17:59

To Halo パンくずの位置 内緒さん

こんにちは。

ヘッダーの下、という解釈で合ってますでしょうか。そうだと仮定して、
① こうするのか ↓
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_09_05.png
② それともこうするのか ↓
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_09_05_2.png

これによって移動させる位置もCSS調整の内容も変わってきます。とりあえず①と仮定しますね。

----- html編集

<!-- パンくずリスト -->
から
<!-- パンくずリストここまで -->

<main id=primary>
の直下にカット&ペーストします。

----- CSS編集

まず
#breadcrumbs
で検索するとスタイルシート内に1箇所あります。

#site-desc,
#breadcrumbs {

上記のようなセレクタ指定になっていますので、ここを以下のように修正

#site-desc {

続きまして、スタイルシート末尾に以下の内容を追加。

#breadcrumbs {
margin: 0 0 20px;
color: 指定したいフォント色;
font-size: var(--font_size-blog-info);
}

marginの「20px」はブログ記事タイトルとの距離なので任意で調整してください。

続きまして
.breadcrumns-anchor
で検索すると1箇所あります。このルールセット内

background: rgb(51,51,51);

この背景色指定を適切な色指定に変更してください(カスタマイズで暗色に変更されているため背景色がバッティングします)

続きまして
.current-item
で検索すると1箇所あります。こちらも同じくルールセット内の

background: rgba(20,20,20,.2);

を適切な色指定に変更してください。
また、パンくずが移動しましたので「ブログ説明文」を常にブログタイトル下に表示させたい場合は

<p id=site-desc>

で検索し、この文字列の上にある <!--index_area--> と、下にある <!--/index_area--> を削除してください。

よろしくお願いします :)

-
2021/09/05 (Sun) 22:49

管理人のみ閲覧できます

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

cham75
2021/09/06 (Mon) 11:03

To Akiraさん

できました!
>パンくずが移動しましたので「ブログ説明文」、、、
作業を始めるまで、よく意味がわからなかったのですが、まさにその通りで
行き届いたアドバイス有り難うございました。

パンくずの文字の色、バックグラウンドは、スマホや、別のパソコンでチェックしながら、
まだ他の部分の色も調整したい感じなので、一緒にのんびりやろうと思います。
取り急ぎお礼まで。

cssは何となく見れても(それも新しい表現が増えていて難しいですが)、htmlの編集はハードル高いです。
本当に助かりました。多分時間をかけても自分ではできなかったと思います。

vanillaice (Akira)
vanillaice (Akira)
2021/09/06 (Mon) 15:39

To cham75さん(重要)

こんにちは ('0')/
上手く行ったようで良かったです。htmlの方はFC2独自変数などが混ざっていますので複雑ですよね ^^;
お疲れ様でした :)

別件です。
混在コンテンツ(httpsサイト内にhttp通信が混ざっている状態)がありますので、以下をチェックし修正してください(修正必須)

① 末尾「nya150.jpg」の画像ファイルがhttpです。

cham75
2021/09/06 (Mon) 19:08

To Akiraさん

わざわざ有り難うございます。早速見て見ます。

cham75
2021/09/07 (Tue) 10:28

To Akiraさん

nya150.jpgは、画像の置き場をかえました。
>httpsサイト内にhttp通信が混ざっている状態
が良くないというのは気がつきませんでした。調べてみますと、確かに。
ありがとうございました。

vanillaice (Akira)
vanillaice (Akira)
2021/09/07 (Tue) 23:16

To cham75さん(完了のご報告)

こんばんは ('0')/
お疲れ様でした :)

cham75
2021/09/22 (Wed) 10:24

スマホの際ヘッダーバナーについて

お手数おかけします。スマホの際ヘッダーバナーが切り替わらないらしいのですが、どうしても原因がわかりません。
初歩の初歩の質問かと思いますが、ご教授願いますでしょうか?
https://cham75.blog.fc2.com/

vanillaice (Akira)
vanillaice (Akira)
2021/09/22 (Wed) 14:09

To cham75さん

こんにちは ('0')/

原因はCSSの記述ミスです。
#header-banner {
で検索するとスタイルシート内に2箇所あります。最初の方のルールセット最終のプロパティは
background
のはずですが
background-image
に変更されていますので、backgroud に直してください。

----- html構文エラー修正
【① 記事内のエラー】
記事編集ページを開いて、末尾

詳しくはbooks mikkeにて!</a><br><br><br></div></font>

これは正しくは
詳しくはbooks mikkeにて!</a><br><br><br></font></div>

クリティカルエラーなので修正必須。

【② サイドメニュープロフィール文のエラー】
プラグイン編集画面を開き

<span style="font-size:1;color:#889e74line-height: 1.5;">

正しくは

<span style="font-size:希望のサイズpx;color:#889e74;line-height: 1.5;">

font-sizeのpx単位がありません。カラー指定の値(#889e74)の後ろにセミコロンがありません。
img要素にheightの指定がありません。
× height=""
✔ height="数値"

また、cham75さんは以下の記事の該当者です。
参考記事: この際だから公式プラグインのhtmlを書き直してしまうのだ
https://vanillaice000.blog.fc2.com/blog-entry-1086.html

「プロフィール」の章をご覧いただき、アウトラインpからdivへの変更をおすすめします。
(pタグ内にdivタグを入れ子することはできません)
きれいに直すならば以下の内容にまるごと差し替えてください(brなども取り除いてあります)

<div style="text-align: center">
<span style="font-size: small; color: #78a6ac;">●●●こんにちは●●●<br>cham75(チャムなこ)です</span>
<div style="text-align: center;">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="500" height="500" alt style="width: 150px; height: auto; margin: 20px 0;">
</div>
<span style="font-size: small; color: #889e74; line-height: 1.5;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</span>
</div>

-----
あと気になるのはcham75さんのブログでクリティカルなJSエラーが出ています。一つはページ自体の混在コンテンツで、リクエスト段階で生じています。
ちょっと今こちらでは見つけられないので、ご自身で追加したもの、特にscriptで掲載しているものを全てチェックし、新しくコードを取得してください。SSL化以前のコードのまま利用していた場合には混在コンテンツになります。
表示ブロックされているものはこちらでは確認できませんので、自主的なチェック及び修正をお願いします。
(active混在コンテンツ(危険レベル高)なので修正必須です)

cham75
2021/09/22 (Wed) 14:51

有り難うございます。

とりあえず、バナーは見えるようになりました。
たくさんチェックしていただきありがとうございます。追々直していこうと思います。
頂きました文章かなり難しい所もありそうなので、また質問させていただくかもしれません。
よろしくおねがいいたします。

vanillaice (Akira)
vanillaice (Akira)
2021/09/23 (Thu) 00:06

To cham75さん

こんばんは。
表示に影響が出る類の構文エラーなので折を見て修正してくださいね。
そして先程よりもエラー数が増えています。あれこれ一度には大変でしょうから、こちらは既出内容の修正が終了してからお伝えしたいと思います。お疲れ様です :)

cham75
2021/09/23 (Thu) 11:09

To Akiraさん

有り難うございます。
頂いたアドバイスを参考に、
自分でも(わからない語句等)調べながら格闘してみたいと思います。

cham75
2021/09/25 (Sat) 11:06

クリティカルなJSエラーについて

たびたび恐れ入ります。

プロフィール、貼り替えました。助かりました。ありがとうございます。
>クリティカルなJSエラー  とは具体的には
リンク先のhttpに置いてある画像をhttpsに置き換えて、リンクを貼り直す。と云う解釈でよろしいでしょうか?
。。。。。。。。。。。。。。。
クリティカルなJSエラーという言葉の意味を検索して
「廃止タグ」と云う恐ろしげなものを見つけて、作業に掛かる前に引き返してきました。


vanillaice (Akira)
vanillaice (Akira)
2021/09/25 (Sat) 15:15

Re: クリティカルなJSエラーについて

こんにちは ('0')/

クリティカルエラー、というのは「致命的なエラー」という意味です。
で、いろいろ見てはいるんですが原因を見つけられません。もしかすると運営に報告をしなければいけない案件もしれない ^^;
active混在コンテンツというのは発生するとブラウザが表示をブロックするのでこちらでは見えない(または動かない)んですね。なので「任意で追加した何か」、例えば第三サービスのウィジェット(twitter埋め込みや本棚ウィジェット等)があるのかな、と簡単に考えて「チェックしてくださいね」としましたが、どうもそういった類も見当たらないですよね (´・ェ・`)

テンプレートを再DLして頂けないでしょうか。ごく稀にですがデータが壊れている場合があります。たぶん今回は違うと思うけれども、念の為。
スタイルシートをカスタマイズされていますので、今お手元にあるHaloはそのまま保持して名称を変更し、再DLしたHaloのスタイルシートと内容を差し替えればOKです。

それで一度結果を見たいと思います。あと、構文エラーが非常に多く、検証作業の妨げになると思いますので修正をお願いします。再DLでチェックが終了したらお伝えします。よろしくお願いします。

cham75
2021/09/25 (Sat) 16:58

元のhaloを貼ってみました

今何もしていない状態なのですが、グーグルクロームの検証で、×がちょこちょこでているようです。

https://cham75.blog.fc2.com/blog-entry-28.html

このまま先程までのソースを貼り付けてみる前に、お知らせしてみました。

構文エラーは、今ならほぼ記事内と画像リンク近辺ですよね。
直してみます。時間が掛かると思いますが。

思ったより大変な事で、お時間を割かせてしまっている様で申し訳ありません。

vanillaice (Akira)
vanillaice (Akira)
2021/09/25 (Sat) 19:36

To cham75さん

まず、再DLして頂きありがとうございます。
今の状態でエラーが出ているということは、やはりテンプレートには問題がありませんので、cham75さん独自で発生しているエラー、ということで確定です。
(念の為他のHalo利用者さんも探してみましたがエラーが発生している方はいませんでした)

スクリーンショット掲載してくださった内容について
このエラーなんですが何度もお伝えするように「混在コンテンツ(active)」です。activeとpassiveとがあるんですが、activeの場合は
・script要素内にhttp
・スタイルシート内にhttp
という場合がほとんどです。それで、なんとなく原因はわかりました。原因はわかりましたが「理由」の方がまだ不明です。

原因: web font loaderのscriptが何かによって阻害されている

この「何か」がまだわかっていません。これ構文エラーが原因かもしれないなぁ、と思ったので、ちょっと先にそちらをチェックしますね。その中にもしかするとJSの実行を妨げるようなクリティカルなものがあるのかも。
(このfont loaderの仕組として parent node というのを利用しており、要素の不整合がある場合に正しい位置に書き出されません)

html構文エラーが結構たくさんあるので私も後回しにしましたし、修正が大変だと思いますが頑張ってください ^^;
今からチェックするので少しお待ち下さいね。

vanillaice (Akira)
vanillaice (Akira)
2021/09/25 (Sat) 19:57

To cham75さん

この修正作業を終えたら一度拝見しますのでお知らせください。

【サイドメニュー プロフィール】
私が提示した内容が以下です。

<div style="text-align: center">
<span style="font-size: small; color: #78a6ac;">●●●こんにちは●●●<br>cham75(チャムなこ)です</span>
<div style="text-align: center;">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="500" height="500" alt style="width: 150px; height: auto; margin: 20px 0;">
</div>
<span style="font-size: small; color: #889e74; line-height: 1.5;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</span>
</div>

現在記載されている内容は以下です。
<div style="text-align: center">
<span style="font-size: small; color: #78a6ac;"><br><br>●●●こんにちは●●●<br>cham75(チャムなこ)です</span>
<div style="text-align: center;">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="150" height="150" alt style="width: 150px height: auto; margin: 5px 0;">
</div>
<span style="font-size: 10px; color: #72875f;line-hight:12px;display:block;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</span>
</div></div>

で、ごめんなさい。画像下の span に display: block; を指定し忘れていました。自主的に入れて頂いてありがとうございます。

・ brでの余白作成は避ける(line-heightの影響を受けるため)
・ line-height の誤字(× line-hight)
・ line-heightの値には単位を付けない(× 12px)(✔ 1.2)(単位をつけてしまうとフォントサイズを変更した際に文字が重なってしまいます)
・ セミコロン欠損

これらを踏まえて以下の内容に再度修正してください。

<div &align>
<div style="font-size: 13px; color: #78a6ac; margin-top: 40px">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="150" height="150" alt style="width: 150px; height: auto; margin: 5px 0;">
<div style="font-size: 10px; color: #72875f; line-height:1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</div>
</div>

最初のdiv要素の &align はプラグイン設定の「コンテンツの文字設定」の位置合わせに従わせるためのものです。

画像を挟んで上下に存在するテキストにそれぞれのline-height、 それぞれのfont-sizeを与えるならばspanマークアップでわざわざdisplay値をblockに変更する、という必要はありません。元々blockであるdiv要素でマークアップしてください。

「こんにちは」が入っているdiv要素に margin-top: 40px を設けていますが、これはあまり上手い方法ではありません。ブログ黒背景に変更し、同時に各コンテンツ(メインの記事)にも同じ背景色を指定してしまったため、背景と各コンテンツとの境目が失われましたが、各コンテンツの上の余白がそのまま残っているため、余白付きのコンテンツとプロフィールの上辺を揃えたいという目的でプロフィールにも上部余白を設けたものだと思います。
これだとテンプレートを変更した際にプロフィールのmargin再設定が必須です。その点を覚えておいてくださいね。
(本来はコンテンツ余白を取り除き、#main-container の上部paddingはデフォルトの40pxに戻す、というのが最も良い方法です。その場合はプロフィールのmargin-top指定は不要です)

「line-heightには単位を付けない」とこの機会に覚えてくださいね。pxは絶対値なので、例えばfont-sizeを15pxなどに変更したら12pxを超過しますので上下に位置する文字が重なります。1.2や1.5という単位なし数値の場合「フォントサイズの1.2倍, 1.5倍」という意味なのでフォントサイズを超過することはありません。

【プロフィール下の画像】

・ height属性にauto値はありません
・ ダブルクオーテーション欠損
・ alt属性必須(値は空で構いません)
・ 属性間スペース無し

現在の内容
<div &align><a href="https://books-mikke.ocnk.net/" target="_blank"><img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/mikke200.jpg"width="150" height=auto border="0" align="" /></a>
</div>

推奨内容
<div &align><a href="https://books-mikke.ocnk.net/" target="_blank" rel="noopener"><img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/mikke200.jpg" width="150" height="159" alt style="width: 150px; height: auto;"></a>
</div>

align属性, border属性は廃止されていますので取り除きました。また、htmlでは末尾のスラッシュは不要です(スラッシュ必須なのはxmlです)

元画像の縮尺表示が必要な場合は style="width: 数値; height: auto;" の部位で行ってください。この場合は height: auto でOKです(html属性ではなくCSSプロパティのため)
原寸と同じ尺なので今は必要ありませんが今後を踏まえ入れておいた方が良いと思います。また、画像の原寸はできれば表示サイズの2〜3倍で準備される方が良いですね(4K, 5Kなど高解像度ディスプレイで見たときに非常にぼやけて不鮮明な画像になってしまいます, テキストが含まれる画像は特に不明瞭です)
また、テキストを含む画像の拡張子は png をおすすめします。

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

【サイドメニュー にゃこニャッ記】
・ 属性間スペースがありません
・ 属性間スペースは1つだけです(スペースを連打しない)
・ 大文字の使用(非推奨 A HREF, 推奨 a href)
・ 意味のないdisplay値指定
・ line-height誤字
・ line-height単位

現在の内容
<div style="text-align:center;line-hight:12px;display:block;"><A HREF="http://pote.sblo.jp/"target="_blank"><span style="font-weight: bold; color:#78a6ac;">にゃこニャッ記 <br></span><img src="https://books-mikke.sakura.ne.jp/nakonap/nya150.jpg" width="150" height="150" border="0" align="" alt="nya150.jpg" />
<span style="font-size:10px;color:#78a6ac;">
<br>
お空の20歳3匹と18歳、まだまだ頑張る19歳<br>「にゃこニャッ記」でまってま~す!<br><br></span></A>
</div></div>

推奨
<div style="text-align: center; line-height: 1.2">
<a href="http://pote.sblo.jp/" target="_blank"><span style="font-weight: bold; color: #78a6ac;">にゃこニャッ記 </span><br>
<img src="https://books-mikke.sakura.ne.jp/nakonap/nya150.jpg" width="150" height="150" alt="nya150.jpg" style="margin: 10px 0;"><br>
<span style="font-size: 10px; color: #78a6ac;">お空の20歳3匹と18歳、まだまだ頑張る19歳<br>「にゃこニャッ記」でまってま~す!</span>
</a>
</div>

【サイドメニュー 机上にて】
・ 属性間スペースがありません
・ height属性に値がありません
・ alt属性必須(値は空で構いません)
・ a終了タグの位置が不正
・ span不整合

現在の内容
<div class="plugin-freearea" style="text-align:left">
<div style="text-align:center;">
<span style="font-weight:bold;color:#78a6ac">机上にて、2006.9~ <br><br><a href="http://kyovi.sblo.jp/"target="_blank"><img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/usa200.jpg" width="150" height="" border="0" align="" />
<span style="font-size:x-small;color:#78a6ac">
<br>
過去のブログ「机上にて、」2006~<br>
一部重複あります。<br></span></a>
</div>

推奨
<div class="plugin-freearea" &align>
<span style="font-weight: bold; color: #78a6ac;">机上にて、2006.9~ </span><br>
<a href="http://kyovi.sblo.jp/" target="_blank" rel="noopener">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/usa200.jpg" width="200" height="212" alt style="width: 150px; height: auto; margin: 10px 0;"><br>
<span style="font-size: 10px; color: #78a6ac;">過去のブログ「机上にて、」2006~<br>一部重複あります。</a></span>
</div>

どこまでをリンクとして扱い、どこまでを太字適用したいのかが私ではわかりませんので上記内容「リンクは画像と『過去のブログ〜』のテキストまで」「太字は「机上にて、2006.9~」の部位」としたマークアップです。全て太字の場合は2つ目のspan要素に font-weight: bold; を追加。



とりあえずトップページに関しては以上が修正必須項目です。
属性間スペースの入れ忘れと、height属性の値の未記入などが多いようなので気をつけてくださいね。個別記事にもこれらが点在しています。あとは要素と属性の関係にも注意してください。

例えば「おしゃれな障子」の記事では

<a href="https://https://youtu.be/n0eLwGCtL10" alt="jidaigeki" border="0" width="" height=""><img src="https://books-mikke.sakura.ne.jp/nakonap/image/shoji.JPG"alt="shoji" border="0" width="550" height=""><br>
新五捕物帖より</a><br><br>
こんな曲線の障子があったんだろうか?いいなあ。

↓ 正しくは

<a href="https://youtu.be/n0eLwGCtL10" target="_blank" rel="noopener"><img src="https://books-mikke.sakura.ne.jp/nakonap/image/shoji.JPG" alt="shoji" border="0" width="776" height="533" style="width: 550px; height: auto;"><br>
新五捕物帖より</a><br><br>
こんな曲線の障子があったんだろうか?いいなあ。


また、youtubeのURLが違いますのでアクセスできません。URLも修正してください。

個別記事にもエラーが多くありますが、ページ全体に影響する内容についてはプラグインが関係していますので、そちらを最優先で修正してください。
私の方では個別記事のチェックを続けます。
本来は全ページを私がチェックすることは致しませんが今回はページ数が少ないのと、放置できないエラーなので特別です (´・ェ・`)

vanillaice (Akira)
vanillaice (Akira)
2021/09/25 (Sat) 20:49

To cham75さん(構文エラー続き)

【セリかドクゼリか?】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=24
(記事編集ページへ直接飛べます)
* cham75さん以外は上記リンクをクリックしないよう注意(一般閲覧者さんへ向けて)

・ アドレスが違います
・ a要素にimg要素の属性が付いています

記事冒頭

<a href="https://books-mikke.sakura.ne.jp/nakonap/28/dokuzeri/210730_1.jpg" alt=dokuzeri" border="0" width="" height=""><img src="https://books-mikke.sakura.ne.jp/nakonap/28/dokuzeri/210730_1.jpg"alt="dokuzerinohana" border="0" width="600" height=""><br>拡大すると結構きれいです。</a><br><br>



<a href="https://books-mikke.sakura.ne.jp/nakonap/28/dokuzeri/210730_1.jpg"><img src="https://books-mikke.sakura.ne.jp/nakonap/28/dokuzeri/210730_1.jpg" alt="dokuzeri" width="1068" height="914" style="width: 600px; height: auto;"><br>拡大すると結構きれいです。</a><br><br>

その他画像については
border="0" は不要
width/ height属性の値無しはダメ

width, heightの指定について計算は不要です。widthとheight「属性」には画像の原寸を入れてください。アップロード画面に書いてありますのですぐに記入できると思います。そして実際の表示サイズは style「属性」のwidth, height「プロパティ」で指定

<img src="画像アドレス" width="画像横原寸" height="画像縦原寸" alt="代替テキスト" style="width: 表示横サイズ; height: auto;">

上記を「がぞう」等で辞書登録しておくとすぐに呼び出せます(htmlモードで記事を書いている、と仮定しています)

このページの他の画像についても1点目と同じエラーなので修正。

【人形6〜】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=23

・ a要素のアドレスが違います
・ a要素にimg要素の属性が付いています

【ドトールの常連さん2〜】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=22

記事末尾
</div></font>

</font></div>

font要素は廃止されていますので、今後は使わないようにしましょう。ついでにこの記事でも修正するのなら

記事冒頭
<div style="text-align: center;"><font size="2">

<div style="text-align: center; font-size: 13px;">

記事末尾
</font></div>

</div>

他のページでもfont要素が利用されていますが、ブラウザによる後方互換はまだ有効なので無理に修正する必要はありません。直せるのなら記事数が少ない今のうちに直しておくと良いですね。
文章はセンタリング、という方針のようなので、文頭には
<div style="text-align: center;">
が付いているはずですから、
<div style="text-align: center; font-size: 13px;">
と書き直します。
文章途中での変更は

例)
あいうえお<span style="font-size: 数値px;">かきくけこ</span>さしすせそ

と、span要素を利用してください。カラー指定の場合も同様です。

例)
あいうえお<span style="font-size: 数値px; color: red;">かきくけこ</span>さしすせそ

【チェストをシャビー風に〜】 関連3記事
・ a要素にimg要素の属性
・ width, height属性の値

【希少 生活の絵本創刊号】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=17

・ a要素にimg要素の属性
・ width, height属性の値

【レア!美しい暮しの〜】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=17

・ img要素 height属性の値

【ブヨやムカデに刺された時の】
https://admin.blog.fc2.com/control.php?mode=editor&process=load&eno=10

・ img要素 height属性の値

-------
img要素を修正する際は
border="0"
もついでに取り除きましょう。

-
2021/09/25 (Sat) 22:23

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/09/25 (Sat) 23:44

To 誤字の件 内緒さん

助かりましたー。急いでやったのバレバレで ^^;
鬼滅の刃の放送があったもので(笑)

altは値無しで構いません、ということで抜いてあります。それとも書き方のことかしら?


alt=""

alt

値無しの場合は alt だけでOKです。
意味が違いますかね ^^;

-
2021/09/26 (Sun) 03:18

管理人のみ閲覧できます

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

cham75
2021/09/26 (Sun) 10:56

ご指導痛み入ります。

>例えば「おしゃれな障子」の記事では
の前までの作業をよく読み返しながら、やってみました。

きめ細かい記述を頂き、間違っていた点、解っていなかった点がかなり見えてきました。

プロフィール部分、
>古本,おみやげこけし人形.... 以降の文字が左に寄ってしまったので、
<div &align></div>で挟み直してみたのですが、よかったでしょうか?


今回直した部分は右サイドに配置していたのですが、最下部真ん中に行ったり、微妙に配置がくずれてしまいました。
プラグイン管理→詳細に出ている配置を変えてしまった気もしますが、解らなくなっていまして、
特にカテゴリーの文字が、その上の画像に張り付いて、また<br>を入れたくなって来る前にこのまま見ていただくことにしました。
よろしくおねがいします。

vanillaice (Akira)
vanillaice (Akira)
2021/09/26 (Sun) 17:49

To cham75さん

こんにちは ('0')/

今html構文エラーが生じて「カラム落ち」という典型的な状態になっています。

【プロフィール】
ごめんなさい、私ものすごく根本的な説明を失念していました。
プロフィールのプラグインは 「あなたの紹介文」と連動しています ので、そちらも修正するべきでした。

通常、プロフィール画像は
<%image>
という独自変数で、
紹介文は
<%introduction2>
という独自変数です。

文章についてはひとつのまとまりとして捉えるため、cham75さんの現在の構成

テキスト(●●●こんにちは)
画像
テキスト(古本,おみやげ〜)

の形(テキストの分割)を実現できません。そのために、プロフィール文の中に画像のimg要素を直接打ち込んだ、ということですよね。
これあんまり良くないなぁ (´・ω・`)
例えばテンプレートで「プロフィール画像」と「プロフィール文」をデザインする際、Haloだとフッター付近の「円形プロフィール + 紹介文」が該当ですが、プロフィール画像が重複掲載になってしまいますよね。
円形部位に <%image> で画像を取得し、その下に <%introduction2> で紹介文、という構造だけれども、cham75さんの場合はその<%introduction2>にプロフィール画像を含めてしまっているのでどうしても重複してしまうわけです。

まずこの構成は良くはない、という点を踏まえ(プロフィール画像と紹介文は区別して扱うべき、という意味です)て、どうするかですけども。おすすめは(おすすめ、と言って良いかわかりませんが)

管理画面TOPの「あなたの基本情報」ハンバーガーアイコンをクリックすると、「あなたの紹介文」を編集できるようになっていますので、そこへ


<div style="font-size: 13px; color: #78a6ac; ">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<div style="font-size: 10px; color: #72875f; line-height:1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</div>

あるいは
② こんにちは〜 無し
<div style="font-size: 10px; color: #72875f; line-height:1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</span>
</div>


を記載して更新。これは「紹介文」ですからプロフィール画像は含みません。データ的にはこの形にしておきます。
先にお伝えしたとおり紹介文の分割はできませんので、プラグインの方だけは「装飾」としての分割を行います。②の場合は分割ではなく「追加」です。これも本当はあまり良くはないです。何故なら場合によって(もしかするテンプレートによっても)その都度修正の手間が発生する可能性が高いからです。
それでも今の形を維持したいのであれば、プラグインだけそれを実現する、というのが良いと思います。

現在プラグインの「プロフィール」についてもまだ構文エラーですから以下のように修正。

現在(太字部位不要)
<div style="text-align:center">
<div style="font-size: 13px; color: #78a6ac; margin-top: 40px">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="150" height="150" alt style="width: 150px; height: auto; margin: 5px 0;">
</div></div><div style="text-align:center">
<div style="font-size: 10px; color: #72875f; line-height: 1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。
</div></div>

正しい内容
<div style="text-align: center;">
<div style="font-size: 13px; color: #78a6ac; margin-top: 40px">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/kumakoi500.jpg" width="150" height="150" alt style="width: 150px; height: auto; margin: 5px 0;">
<div style="font-size: 10px; color: #72875f; line-height:1.2; margin-top: 10px;">古本,おみやげこけし人形<br>紙もの雑貨,ephemera等,<br>books mikkeの入荷のお知らせ。<br>趣味のDIY 日々の寄り道、<br>ゆるゆると。。。</div>
</div>

①を選択する場合は今のままでOKです。その代わり 独自変数との連動はしません ので、今後紹介文を書き換えたらプラグインの方も書き換え必須です。プロフィール画像についても同様です。
② を選択する場合は以下のように再修正してください。

<div style="text-align: center; margin-top: 40px;">
<div style="font-size: 13px; color: #78a6ac;">●●●こんにちは●●●<br>cham75(チャムなこ)です</div>
<!--myimage-->
<img src="<%image>" alt="<%author_name>" width="150" height="150" style="width: 150px; height: auto; margin: 5px 0;">
<!--/myimage-->
<%introduction2>
</div>

この場合はプロフィール画像も紹介文も連動します(ただしwidth, height属性の値変更は確認してください, 正方形を守れば値は気にしなくてOKです)
この方が良いかもしれませんね。文字の位置合わせはプラグイン設定の「コンテンツの文字設定」ではなくhtmlで直接指定しています(恐らくセンタリングをご希望だと思うので)

で、cham75さんの場合プロフィールに限らずプラグインに全般関してかなりイレギュラーなことをしている、という自覚があるかどうか不明ですが、この機会に自覚されますようお願いします(笑)
(タイトルの消去、変数構成の破棄 等)

ここまでの作業は 必須 です。現時点でダブルクォーテーション欠損のクリティカルエラーなので、必ず管理画面TOPで紹介文の修正を行ってください。

一旦投稿します。

vanillaice (Akira)
vanillaice (Akira)
2021/09/26 (Sun) 18:26

To cham75さん

【机上にて】
・ img要素直後の<br>が欠けています。
・ div終了タグが一つ多いです。

現在の内容
<div class="plugin-freearea" &align;>
<span style="font-weight: bold; color: #78a6ac;">机上にて、2006.9~ </span><br>
<a href="http://kyovi.sblo.jp/" target="_blank" rel="noopener">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/usa200.jpg" width="200" height="212" alt style="width: 150px; height: auto; margin: 10px 0;">
<span style="font-size: 10px; color: #78a6ac;">過去のブログ「机上にて、」2006~<br>
一部重複あります。</a></span>
</div>
</div>

正しい内容
<div style="text-align: center;">
<span style="font-weight: bold; color: #78a6ac;">机上にて、2006.9~ </span><br>
<a href="http://kyovi.sblo.jp/" target="_blank" rel="noopener">
<img src="https://blog-imgs-150.fc2.com/c/h/a/cham75/usa200.jpg" width="200" height="212" alt style="width: 150px; height: auto; margin: 10px 0;"><br>
<span style="font-size: 10px; color: #78a6ac;">過去のブログ「机上にて、」2006~<br>
一部重複あります。</a></span>
</div>

* センタリングでしょうから最初の要素を変更しました。

とりあえずここまで頑張ってください。

cham75
2021/09/27 (Mon) 09:46

プロフィール関係なんとかできました。

どうもありがとうございました。
収まりました。
記事内の間違いに移ろうと思います。

>私の方では個別記事のチェックを続けます。
本来は全ページを私がチェックすることは致しませんが今回はページ数が少ないのと、放置できないエラーなので特別です (´・ェ・`)

気になっているのですが、放置できないエラーと云うのは、表示できなくて私が困るだけでない、ということですか?

とても勉強になり、ありがたいのですが、随分時間を取らせてしまい
申し訳なく思っています。何かお礼をお送りしたいのですが、amazonかなにかで。

vanillaice (Akira)
vanillaice (Akira)
2021/09/27 (Mon) 15:31

To cham75さん

こんにちは。お疲れ様です :)

ごめんなさい。私1箇所間違えてしまった (*_ _)
プロフィール文設定の方、

ゆるゆると。。。</span>

これ正しくは

ゆるゆると。。。</div>

です。コード最終の終了タグなのですぐにわかると思います。変更をお願いします。

-----
あとはサイドメニュー
【プロフィール下のリンク画像】
・属性間半角スペースがありません。

target="_blank"rel="noopener"

target="_blank" rel="noopener"

mikke200.jpg"width="150"

mikke200.jpg" width="150"

【机上にて】
これ私の指南ミスです。ごめんなさい。

一部重複あります。</a></span>

一部重複あります。</span></a>

-----
> 表示できなくて私が困るだけでない、ということですか?〜

今回解消しようとしているのは「混在コンテンツ」です。今はその前段階で構文エラーの修正を行っています。
混在コンテンツはセキュリティに関係しているので、表示が崩れるとかそういったことよりも重要な「サイトの安全性が担保されない」というものなので、放置はできないよね、ということです。

で、ここまで作業して頂いてやはり根本的な問題を見つけられずにいます。あといくつか試してもらってから私の判断をお伝えしますね。

vanillaice (Akira)
vanillaice (Akira)
2021/09/28 (Tue) 15:28

To cham75さん(混在コンテンツの件)

こんにちは。まだ修正作業を終えていないと思うんですが、今日ちょっと時間が無いので先に今回の結論というか原因をお伝えしますね。

cham75さんは「カスタムURL(URLエイリアス機能)」をご利用ですよね。その場合「未分類」カテゴリのURLは
https://固有ID.blog.fc2.com/c/%E6%9C%AA%E5%88%86%E9%A1%9E

となるはずなんですが、cham75さんの場合
https://固有ID.blog.fc2.com/c/

と、後ろの「未分類」のエンコード部位が失われているんですね。で、このURLは存在しませんし正規のルートを通らないので
http://
のままでリクエストされています。
Haloテンプレートはページの遷移速度を上げるために、まだ開いていないページに対して prefetch(遷移が予想されるリソースの先読み) というのを行う仕組みになっているんですが、そのために「混在コンテンツ」ということになっています。

未分類カテゴリの名称を変える、あるいは未分類カテゴリに1件投稿してみることで解消される可能性があるような気もします。未分類カテゴリ自体は削除できないので、「名称を変更する」ということになります。
カテゴリの名付けや、そのカテゴリに投稿する・しない はユーザーさん任意なので、私が指図するのは申し訳ないなぁ、という気持ちなんだけども、もうこれ試すしか無いかなぁ、と思って (∵`)

構文エラーの修正が終わりましたら一度ご検討ください。もし不都合がある場合には、根本的な解決にはありませんが「prefetchを辞める」というのが最終手段になります。スペックが落ちますが仕方ないです。
もし未分類カテゴリの編集が可能であれば、それを行って頂いて、それでも改善が無ければ「運営に調査依頼」という形になるかと思います。よろしくお願いします。

cham75
2021/09/28 (Tue) 23:12

有り難うございます

お忙しい中、恐れ入ります。
試したくて、先にやってみました。
検証してみたら、赤い×印が無くなっています!!

未分類は、レトロに変えてみました。ただ選択できない状態のようです。
https://cham75.blog.fc2.com/blog-entry-29.html

只今構文エラーの修正は2/3くらいに来ています。

ところで、混在コンテンツと云うのは、お気に入りリンクに、どなたかのhttpのブログがあってもいけないのでしょうか? 自分の旧ブログも2つリンクしていて、httpなのですが。


vanillaice (Akira)
vanillaice (Akira)
2021/09/28 (Tue) 23:39

To cham75さん

こんばんは。
今拝見したところ解消されていますね。
カテゴリURLの出力は独自変数に頼るしかないのでユーザーサイドではどうしようもないんですよね。
未分類への投稿がゼロの場合に起こるのかもしれませんね。私の方でサンプルが取れないので推測だけで申し訳ないです。
いずれにしろ修正されましたの良かったです。

あとは点在する構文エラーを片付ければ綺麗になります。あともう少し頑張りましょう :)

> お気に入りリンクに、どなたかのhttpのブログがあってもいけないのでしょうか?〜

いえ。a要素でのページ遷移は http:// のスキームでも問題ありません。というかhttpのサイトにhttpsではアクセスできないのでそのままで。相手方がSSL化を済ませていれば(つまりhttpsでアクセスできるのならば)書き直しても良いですね。

参考記事: SSL対策時の注意【全てのURLをhttpsに書き換えてはいけない】
https://vanillaice000.blog.fc2.com/blog-entry-621.html

cham75
2021/09/30 (Thu) 11:12

修正終わりました。

すべての記事の修正を終え、ためしにカスタマイズ後のcss、htmlも貼ってみました。
大丈夫のようです。
あとは追々教えていただいた画像の修正、.png化、特にバナー等、やっていこうと思います。
本当に助かりました。何かお礼をしたいので、amazonのほしいものリストとか
giftも贈れましたよね。お知らせ願えないでしょうか?

vanillaice (Akira)
vanillaice (Akira)
2021/10/03 (Sun) 16:57

To cham75さん

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

お礼の件はお気持ちだけ頂きますね。お気遣いありがとうございます :)
修正の件ですが、dev tools(右クリック「検証」)では構文エラーの発見はできませんので、以下のページを利用してくださいね。

外部ページ: htmlバリデータ
https://validator.w3.org/

または以下のページからブックマーク登録をしておくとすぐにテストできます。

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

FC2ブログの特性上修正できないエラーや警告もありますので

The type attribute is unnecessary for JavaScript resources.
JSリソースにtype属性の記述は不要です --- FC2が追加する必須scriptなど

Element style not allowed as child of element div in this context.
style要素はこの文脈内div要素の子要素にはできません(div要素にstyle要素を入れ子してはいけません) --- 記事下テキスト広告

The charset attribute on the script element is obsolete.
scriptのcharset属性は廃止です(から使うべきではありません) --- コメント装飾ツールバーなど

上記は無視して構いません。それ以外のエラーや警告は修正可能のはずなので、特に「エラー」の方に留意してください。
現時点でまだ

×
ゆるゆると。。。</span>


ゆるゆると。。。</div>

こちらが修正されていませんので行ってくださいね。お疲れ様です :)

cham75
2021/10/06 (Wed) 11:23

To Akiraさん

ゆるゆると。。。</div>に直しました。
htmlバリデータでのチェック、追々していきます。
細かいところまでありがとうございます。

vanillaice (Akira)
vanillaice (Akira)
2021/10/07 (Thu) 22:21

To cham75さん(完了のご報告)

こんばんは ('0')/

はい。こちらこそ指南ミスなどもありお手数おかけしました。
お疲れ様でした :)