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

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

テンプレート
2019/07/22 71
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS4 RWD Dark
Mystyleテンプレート

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

最終更新 2020.5.28
  • ページ送りのJSを修正
名称 Mystyle
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大830px
サイド --- 最小290px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾
・ 動画縦横比固定
使い方詳細はARTICLE PAGE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
パソコン タブレット スマートフォン
2カラム 2カラム or 1カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下
更新履歴 2020.3.30
  • コメント返信のJS変更
最終履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.11.23
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
最終更新 2019.10.16
  • サイドメニュー部プロフィール画像の縦横比が崩れる件修正

再ダウンロードが困難な方はお手数ですが自主修正をお願いします。申し訳ございません。

#side-prof-pic { で検索するとスタイルシート内に1箇所ありますので、ルールセット内 height: 100%; の直下に object-fit: cover;追加

更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  3. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

<li class="comment-btn-list"> で検索するとhtml内に4箇所あります。2つ目の

<li class="comment-btn-list"><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a></li>

を以下の通り 変更

<li class="comment-btn-list"><!--comment_author--><!-- <!--/comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--/comment_author--></li>
②について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

③について

.inner-contents { で検索するとスタイルシート内に2箇所あります。1箇所目のルールセットを 削除 し、2箇所目の line-height: var(--main-line-height); の直下に margin: 20px 0;追加

続いて .inner-contents p:first-of-type で検索するとスタイルシート内に1箇所ありますのでこのルールセットを 削除

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

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

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

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

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

色調変更カスタマイズについて

How to change the tone of colors

今回は ヘッダー画像の変更を想定していません。その代りに暗色背景への切り替えが簡単にできるようにしてあります。色合いはDEMOの「dark」を確認してください。

注)主要カスタマイズ で検索すると

/* light theme */
内容

/* dark theme
内容
 */

スタイルシート内に上記のような内容がありますので以下の通り変更

/* light theme
内容
 */

/* dark theme */
内容

色調だけでなくカスタマイズが想定される部位(全体幅やフォントサイズなど)についてまとめてありますので、色調切り替え以外に不足があればそれぞれ何がどこに対応しているのかをガイダンスで確認しながら作業を行ってください。

--xxx: 1.4rem;

こんな感じになってます。変更して良いのは :(コロン)の右側にある緑色の内容だけです。左側にある -- ハイフン2連の文字列は変更しないよう注意してください。また、末尾の ; (セミコロン)も消してしまわないよう注意。

light/ dark の切替は「閲覧者による任意選択」ではなく「管理者によるデザイン選択」です。JSを利用し、ボタンクリックなどでCSSを切り替える手法もありますが、閲覧者さんってそんなに変更しないと思うんですよね。それに今だとブラウザレベルでダークモードの切り替えがありますし。もっと言えばデザインを取り除いてテキストだけを表示することも最新ブラウザでは簡単にできますし(スマホの話です)

そういった理由から管理者によるデザイン選択という意味の切り替えにしてあります。

ヘッダー画像変更については禁止というわけではありませんので自由にして頂いて構いません。ただし縦幅(高さ)がかなり小さいので画像選びが大変かもしれません。また配置などに結構苦労するかも。いずれにしろご自身でできる範囲でご自由にどうぞ。

ついでですがカスタマイズ便宜を図った流れでなるべく英語表記を避けておきました。あーでも「多言語」で申請しちゃった気がするな。ヤベ。いえ、ひとり事です ←

記事編集リンクについて

Location of edit icon

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

スピード強化について

Behavior about navigation

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

「新着記事リスト」と「プロフィール」について

About recent list and profile

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

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策(新着記事リスト)

できればプラグイン側を非表示にされた方が良いと思います。表示位置の変更は可能です。
プラグイン設定ページ

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

上記を目印にガイダンスに従って削除。

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

2020.3.23バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。コピー対象はhtml内を <!-- 個別記事ページナビ --> で検索し、すぐ上にある <!--permanent_area--> を含め、<!-- 個別記事ページナビここまで --> のすぐ下にある <!--/permanent_area--> までを含めた範囲です。

複製したhtml内容は以下の作業してから希望の位置へペーストしてください。

html冒頭の <div id="pager-wrapper" class="pager-wrapper"><div class="pager-wrapper"> に修正(id属性の取り除き)

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

Cautions before asking for something.

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

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

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

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

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

 71

There are no comments yet.
Janedoe1471
ゴールド

ダークの場合のブログタイトルが、金色に見えます。
金色って、難しいんですが、これはすごいとしか。
タイトル文字の色の変化とか、自分で考えてみないと、身につかないので、これから、じっくり悩みたいと思います^^
素晴らしいテンプレートを、色違いで2種類も、お疲れさまでした^^

2019/07/22 (Mon) 18:34
-
管理人のみ閲覧できます

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

2019/07/24 (Wed) 14:08
-
管理人のみ閲覧できます

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

2019/07/24 (Wed) 14:21
vanillaice (Akira)
Akira
To Janedoe1471さん

Janedoe1471さん、こんにちは。お返事遅くなりました (*_ _)

ゴールド系を一色で表現しようと思うと難しいですよね。グラデーションを用いた目の錯覚を狙うとそれなりになります。
CSSで「質感」表現ができるようになるともっと楽しくなるのだけれど。ザラザラとかカサカサとか(笑)

いつもありがとうございます :)

2019/07/24 (Wed) 14:44
vanillaice (Akira)
Akira
To ブログカードの件 内緒さん

解決済ということで大丈夫でしょうか。

blockquoteの装飾は大抵の場合、blockquoteタイプセレクタのbackgroundに直接あてるか(Mystyleの場合はこちら)、blockquoteの::before または ::after疑似要素のcontentの値であてるか、このいずれかです。
なのでブログカード側のblockquoteにクラス名を付けて

.xxx {
background: transparent;
}

.xxx::before,
.xxx::after {
content: "none";
}

を明示しておけばタイプセレクタよりもクラスセレクタの方が優先度が高いので干渉しなくなります。

2019/07/24 (Wed) 14:51
-
管理人のみ閲覧できます

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

2019/07/24 (Wed) 15:20
のぎ

グローバルナビゲーションの下に画像RSSを設置したのですが少ししか表示されません。解決策をご教授下さい。お願い致します。

2019/07/25 (Thu) 07:53
vanillaice (Akira)
Akira
To ブログカードの件 内緒さん(完了のご報告)

こんにちは。

大抵の場合はそれで行けるはずでテンプレート側のblockquoteに手を入れる必要はまず生じないと思いますので、CSS内容の管理だけしっかり行ってくださいね。
お疲れ様でした :)

2019/07/25 (Thu) 11:52
vanillaice (Akira)
Akira
To Akiraさん

> 少ししか表示されません〜

「少し」というのは数(掲載数)のことですか?それとも高さ(表示領域)が足りないという意味ですか?
後者だと思いますが念の為確認です。後者として説明を進めます。

RSSのコード内に
horizontal
というクラス名があり、これがナビゲーションのクラス名とバッティングしています。
テンプレートのhtml内及びスタイルシート内にある horizontal を全て別のクラス名に変更してください。

例)
<nav class="horizontal" id="navi-horizontal">
↓ 変更
<nav class="temp-horizontal" id="navi-horizontal">

注意
idは関係ありません。
navi-horizontal などhorizontalの前後に文字列が付いているものは関係ありません。
文字列指定による一括変更をされる場合は注意してください。
変更箇所はhtml内に8箇所、スタイルシート内に1箇所です。

2019/07/25 (Thu) 12:02
のぎ

ご推察通り、高さが足りないという意味でした。すみません。

ご指示通りにしましたら、デザインもおかしくなってしまいました。
お手数ですが宜しくお願い致します。

2019/07/25 (Thu) 12:19
のぎ

正常に表示されるようになりました。
有難う御座いました。

2019/07/25 (Thu) 14:26
vanillaice (Akira)
Akira
To のぎさん(完了のご報告)

安心しました。お疲れ様でした :)

2019/07/25 (Thu) 18:14
-
管理人のみ閲覧できます

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

2019/09/09 (Mon) 19:36
vanillaice (Akira)
Akira
To Mystyleメッセージボードの件 内緒さん

こんばんは。

> 画面最上部にある時ナビゲーションに文字が写り込んでリンクも無効に〜

この件の対処については既に行って頂いた通りz-indexを3から30に変更、という形でOKです。特に他の部位への影響もありません。お手数おかけします。

----- 別件
文章を「改行の扱い『自動』」で書かれているかと思います。
メッセボード用のscript要素(<script>〜</script>)内のJSがそのために不正な構文になっています。

改行「自動」にされる場合には

×
<script>
内容
内容
内容
</script>


<script>内容内容内容</script>

このようにscriptタグを改行せず横に続けて書くようにし、内容(JS構文)の改行も全て取り除いて横に繋がるようにしてくださいね。
メッセージボード利用時の推奨は「改行の扱い『HTMLタグのみ』」です。こちらの設定で記事を書かれる場合はコード類は全てコピペでOKです。『自動』にするなら改行の取り除く作業が発生します。よろしくお願いします。

参考記事: 記事内でhtmlを使う方は「改行の扱い」指定に注意が必要
https://vanillaice000.blog.fc2.com/blog-entry-923.html

2019/09/09 (Mon) 22:22
-
管理人のみ閲覧できます

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

2019/09/10 (Tue) 11:36
vanillaice (Akira)
Akira
To Mystyleメッセージボードの件(完了のご報告)

こんにちは。

z-indexの件はお手数でした。そしてメッセボード用scriptの修正も確認致しました。
FC2の改行の扱いは「便宜」ではあるんですが、弊害もあるんですよね。
いずれにしろお疲れ様でした :)

2019/09/10 (Tue) 14:50
-
管理人のみ閲覧できます

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

2019/09/17 (Tue) 00:10
-
管理人のみ閲覧できます

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

2019/09/17 (Tue) 00:17
-
管理人のみ閲覧できます

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

2019/09/17 (Tue) 02:13
vanillaice (Akira)
Akira
To Mystyleコメント欄リンクの件 内緒さん

こんにちは。

> 自分のコメントにはURLのリンクアイコンは表示されないのでしょうか〜

付きますよ。ブログ上での返信・管理画面経由を問わずリンクアイコンが出るのがデフォルトです。
表示されない原因はカスタマイズで追加された「NEWマーク」の書き方です。documentwriteでspan要素を書き出していますがこの位置では不正です。追加スクリプトの仕様をご確認くださいね。
カスタマイズ後はバリデータにかけて構文エラーが生じていないか確認をお願いします。

参考記事: ブログ作成に役立つブックマークレット(「W3C validation」の章)
https://vanillaice000.blog.fc2.com/blog-entry-781.html

2019/09/17 (Tue) 09:57
-
管理人のみ閲覧できます

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

2019/09/17 (Tue) 10:30
vanillaice (Akira)
Akira
To Mystyleコメント欄リンクの件 内緒さん(完了のご報告)

こんばんは。

潜在的エラーの発生を知るためにバリデーションが役に立ちますのでご活用くださいね。
お疲れ様でした :)

2019/09/17 (Tue) 19:01
bon

Akiraさん
たびたびお邪魔いたします。
分からないことが出てきましたので、ご相談させてください。

・スマホアプリで<br/>が自動で付加されます
これはAkiraさんのテンプレートには関係ない話で申し訳ございませんが、ご意見を伺いたいです。
リンクした記事に載せましたように、Akiraさんのテンプレート記事用装飾をパソコンから新規投稿画面に張り付けて保存したとします。それを編集しようかとアプリで開いたところ、自動で<br/>が増えてしまいます。

私はFC2ブログアプリは今回、新ブログ作成とともにスマホにインストールして使い始めました。自動改行はオフにしていて、それなのに<br/>がついていたのであれあれあれ?となってしまいました。Akiraさんが「<ul>の直下は<li>でなければならない」と書いておられたので、あらあら、と直してもまた次開くと<br/>がついていたことから気が付いたのですが…
そこでご相談です。アプリで外出先からも記事修正やコメント返信ができると考えていましたが、アプリそのものを使わないほうが無難なのか、それともコメント返信のみであれば記事に影響を与えないか…何かアドバイスがありましたらお願いいたします。
※アプリに関してAkiraさんのほうで何かできることではないのは理解しております。ネットで「FC2ブログ アプリ brが付く」等で検索してもヒットせず、自分側の問題なのかわからなくなってしまいました。

・コメント返信、スマホからだと「To●●さん」が2回表示されてしまいます
スマホからコメントの返信ボタンを押すと、「To●●さんTo●●さん」と宛名が2度繰り返されてしまいます。旧ブログでは正常で、リンクさせていただいた新ブログのみでの現象です。いろいろ触っている間におかしくしてしまったのかもしれません。恐れ入りますが、直す方法はありますでしょうか。

2020/03/22 (Sun) 10:47
vanillaice (Akira)
Akira
To bonさん

bonさん、こんにちは ('0')/
スマホはAndroidでしょうか。今iPhoneの方にアプリをインストールしたんですが、iPhone版ではそういった症状は確認できませんでした。

Android版は既に正規アプリストからbanされていると聞いたことがあるので、その場合は不具合の修正や開発自体も行われていないのではないかと思います。
実機を所有していないので確認できず申し訳ないです (∵`)

返信の件は、完全に構文エラーになって後続要素に影響が出ています。なので構文エラーを修正すれば解消されるはずです。
アプリの方を現時点そして今後どうするかは一旦置いておき、最優先事項としてはエラーの修正ですね。
テキストエディターをお持ちであれば比較的容易に修正できると思います。

2020/03/22 (Sun) 11:58
bon
To Akiraさん

こんにちは。

・アプリの件
私もiPhoneです。Akiraさんのお返事を受け調べてみたところ
https://fc2blogstaff.blog.fc2.com/blog-entry-80.html
FC2ブログアプリには2種類あるようで、私が使っていたのは旧ブログアプリと呼ばれる方でした。新ブログアプリを入れなおして再度同じ検証をしたところ、<br/>の自動付加はなくなりました。わざわざインストールまで試して下さりありがとうございました。お騒がせして申し訳ございません。

・コメント返信の件
W3Cで調べてもたくさんエラーが出ています。テキストエディターは持っていないので
http://dirtymarkup.com/
で開いてみました。ダウンロードしたまっさらのテンプレートと部分的に見比べてみたりしても、どこを治せばよいのかがわかりません。<ul>の後ろに<br/>がきているのがエラーなんだ、というのはわかるようになりましたが、全体に影響を及ぼすエラーとはどこを直せば修正できるでしょうか。

2020/03/22 (Sun) 13:35
vanillaice (Akira)
Akira
To bonさん

えっ2種類あるの?なんてややこしいことをするんだ(笑)
解消できたということでこの件については安心しました (o'ω')ノ

-----
返信タイトルが2重になる件は現時点で解消されていませんでしょうか。
私の環境下でiPhoneアプリでボタン押下してみましたがダブルになることはありません。
注意点としては、

・自主的に2回押した場合
・Aさんの返信ボタンを押してBさんの返信ボタンを押した場合(複数人のボタン)

この場合は繰り返しが起こります。
重複の対処、書き換えの対処をしていないのは私自身が複数人にまとめてお返事することがあるからで、そういう仕様です。

で、このFC2アプリなんですが、キャッシュの動作が正確でなかったり(重複はこれが原因になっている可能性があります)、ブラウザバックやリロードできないなど使い勝手的には致命的だと思いますので、記事の編集以外はアプリを使わずブラウザの利用をおすすめします。

-----
バリデートの方は現時点で表示や動作に悪影響を及ぼすエラーはありません。クリティカルエラーだったul要素のbr問題も既に解消されています。
現在のエラー判定で対策できるものを挙げておきます。番号はバリデート結果で表示されている全21項目(エラー及び警告)それぞれに振られている番号です。
(状況説明のブログ の記事での検証)

1【The type attribute is unnecessary for JavaScript resources.】警告
2【The language attribute on the script element is obsolete. You can safely omit it.】警告
FC2アクセス解析コードの冒頭
<script language="javascript" src="//固有アドレス" type="text/javascript">
赤字部位を削除して以下の通り。

<script src="//固有アドレス">

3【The align attribute on the div element is obsolete. Use CSS instead.】エラー
FC2アクセス解析コード内
<div align="right">
赤字部位を修正して以下の通り

<div style="text-align: right">

4【An img element must have an alt attribute, except under certain conditions.】エラー
FC2アクセス解析コード内
<img src="//固有アドレス" />
を以下の通り。
<img src="//固有アドレス" alt>

10【The summary attribute on the table element is obsolete. Consider describing the structure of the table in a caption element or in a figure element containing the table; or, simplify the structure of the table so that no description is needed.】エラー
「カレンダー」公式プラグイン内廃止属性
以下の記事内容に従って修正
参考記事: FC2ブログ主要公式プラグインをHTML5 validに修正
https://vanillaice000.blog.fc2.com/blog-entry-814.html

11【The charset attribute on the script element is obsolete.】警告
12【The type attribute is unnecessary for JavaScript resources.】警告
13【The type attribute is unnecessary for JavaScript resources.】警告
15【The type attribute for the style element is not needed and should be omitted.】警告
16【The type attribute is unnecessary for JavaScript resources.】警告
「コメント」共有プラグイン内のhtmlを
<script
で検索し、見つかったものを全て
<script src="JSファイルアドレス">
に修正

例)見つかるもの
<script type="text/javascript">
<script type="text/javascript" src="JSファイルアドレス" charset="utf-8">

つまりcharset属性とtype属性は全て取り除く。

続いて
<style
で検索し、見つかったもの全て
<style>
に修正

例)見つかるもの
<style type="text-css">

つまりtype属性の取り除き。ただし次の作業を行うならばこの件は修正不要(どうせ内容ごと全て取り除きます(掲載場所の移動をします))

14【Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)】エラー
「コメント」共有プラグイン内のstyle要素
<style type="text/css">から</style>までの内容を以下の記事を参照しながら対処(JSにするかスタイルシートにするかは任意)
参考記事: body内のstyle要素が一定条件下で再びエラーに
https://vanillaice000.blog.fc2.com/blog-entry-796.html

* JSを選択する場合は当該プラグインのhtmlの末尾に記せばOKです。

全部で11の警告及びエラーを取り除けます。残ったものはFC2ブログの仕様上どうにもできません。残念 (∵`)

----- 別件
bonさんはページ送りの位置を変更されましたよね。デフォルトのページ送りの位置はstickyといって、サイドメニュー(右)がメイン(左)よりも短い場合に、左側の全ての内容が画面外(上)に流れてしまわないように画面内で固定するように設計してあります。
逆も同様で、サイドメニューの一番下にあるプラグインはメインがまだ画面に残っている間は外に流れず留まるようになってます。

ページ送りの位置を移動したことでページ送りのstickyが邪魔になり、コメント欄の返信ボタンなどの動きを妨げています。
返信ボタンを押すとスムースにコメント投稿フォームまで移動するはずですが、bonさんの場合は無理やり移動している感覚がわかると思うので一度確認してください。

対処としては

・ページ送りの位置をデフォルトに戻す
・stickyを解除する

このいずれかになります。
何故ページ送りがデフォルトの位置なのか、については、閲覧者が右に固定されている「menu」のボタンを押したとき、最上部になるのがこのページ送りです。続いてサイドメニュー内容。
閲覧者によるページ遷移の作業を円滑にするための構成です。bonさんの場合は閲覧者がmenuを押してもすぐにサイドメニュー内容を確認することができません。コメントをスクロールしないと副情報までたどり着けませんので導線としては個人的におすすめしません。
主にスマホでのことですが、現在はスマホ最優先でレイアウト・デザイン・導線を構成しなければいけません。

この件はお任せしますね。sticky解除を選択される場合はその旨お伝えください。
あと、今後記事を書かれる際にhtmlを使うことがある、という予測が付いている場合にはテキストエディターを持っておくと便利ですよ。個人的おすすめはsublime textです。

参考記事: テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします
https://vanillaice000.blog.fc2.com/blog-entry-790.html

2020/03/22 (Sun) 14:38
bon
To Akiraさん

こんにちは。
お忙しい中、大変お世話になりありがとうございます。

・ブログアプリの件
FC2ブログアプリの「新アプリ」に関して、公式の説明が
「HTML編集」のみ。→やや上級者向け。
とあるので、私はより易しいほうをと旧ブログアプリのほうをインストールしたのだと思いますが、これはこれで勝手に<br/>がついてしまうなんて。私もAkiraさんのブログを読んでいなかったら、「なんかタグが増えたなぁ」程度でそのままにしていたと思いますが…

・返信Toが繰り返しになる件
今確認したところ解消しているようです。ご確認いただいたりとお手数をお掛けして申し訳ございません。
意図的にTo繰り返し(複数回押す、複数人に返信を押す)も確認しました。アプリからのコメント返信に関しては、WordPressがとても便利でしたので同じ感覚で使えたらと思ったのですが難しいようですね。アドバイス下さりありがとうございました。

・エラー修正の件
「全部で11の警告及びエラーを取り除けます。」
と教えて下さった内容に関して、上から順に対処しました(つもりです)が、できておりますでしょうか。親切に教えていただき助かります。面倒なことになり、申し訳ございません。

・ページ送りの位置につきまして
こちらもご指摘下さりありがとうございます。
ちょっと移動、のつもりが…ごめんなさい。個人的には、記事を読んだらコメント欄を通過せず「次のページへ」のボタンがあるほうがわかりやいと思っていたためこのように変更しておりましたが、Akiraさんのテンプレートの使い方に反したものだと思いましたし、MENUボタンの意味を考えて元に戻させていただきました。

これまで15年ブログをやっていて、htmlの操作をしても見た目に問題なければちゃんとできていると思っていたのが恐ろしいです。知らぬが仏だったのだなと思います。ご面倒をお掛けして申し訳ございません。大変に助かっております。

・Sublime Text3の件
ご提案下さりありがとうございます。
Akiraさんの記事を参考に進めてみました。ソフトのダウンロードはできましたが
https://packagecontrol.io/installation
こちらのページが少し書き換わっているようでして、英語ページに書いてあるようにやってみましたが、思うような結果が得られませんでした。
こちらに関しては「今からすぐ使いたい!」というわけではありませんので、もし今後更新されるようでしたらその時に参考にさせていただきたく存じます。

2020/03/22 (Sun) 16:54
bon
To Akiraさん

こんばんは。度々恐れ入ります。

ページ送りの件ですが、デフォルトの位置と、関連記事の2か所に置くことはできませんか?
http://www.q-rais.com/
こちらのブログですが、スマホで見た場合に記事→関連記事→ページ送り→コメントの順になっています。他の方のブログを見ている時に、コメントを見ずに次へ、次へとページをめくっていくのが使いやすいと感じることがあるので自分のブログもそうしていました(メニューボタンの使い方をわかっていればよいのですが)。
しかしながら、Akiraさんのテンプレートにせっかくある機能をスポイルする使い方もしたくありません。それならば、2か所にページ送りを設置したいなと思ったのですが、それはそれでまた問題が生じるものでしょうか。

重ね重ねご面倒をお掛けしますが、よろしくお願い致します。

2020/03/22 (Sun) 19:03
vanillaice (Akira)
Akira
To bonさん

まずエラー修正の方から。
bonさんが「どこまでやるか」にもよりますので、以下の内容はもしかしたら「やらないことにした」のかもしれませんし「まだやっていないだけ」なのかもしれません。そこが不明なので不要であれば「その作業はしない」とお伝え頂けると助かります。

まず「コメント」共有プラグインの修正ミスで内容が壊れてしまいましたので、再DLを行ってください。
その上で修正点をもう一度書きます。


一行目
<script type="text/javascript" src="省略" charset="utf-8"></script>

<script src="省略"></script>
に変更。


<script type="text/javascript"><!--
を目印に検索すると1箇所ありますので、赤字部位を
<script>
に変更


<style type="text/css">
で検索し、上記を含み
</style>
(一番下から数えて2行目にあります)
までをカット(カットした内容はメモ帳などにペーストしておくこと!)

ここまでの3作業が済んだら一旦「更新(設定ボタン押下)」

---- 作業分岐
カットした内容をスタイルシートに記載する場合は、一行目と最終行を削除した上でテンプレートスタイルシート末尾にペースト。
スタイルシートへの移動はテンプレートを変更したときに移植必須です。

カットした内容をJSでプラグインhtmlと一緒に管理したい場合はやはり一行目と最終行を削除した上で以下のサイトを利用して圧縮を行い

https://www.minifier.org/

圧縮内容を

<script>
var styleElm = document.createElement('style');
styleElm.innerText = 'ここに圧縮内容をペースト';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

こうしてあてはめて上記内容をプラグインhtmlの下にペースト。

以上です。

2020/03/22 (Sun) 22:25
vanillaice (Akira)
Akira
To bonさん②

> ページ送りの件ですが、デフォルトの位置と、関連記事の2か所に置くことはできませんか?〜

技術的には可能ですが、全く同じものを複製したい、という場合はお手伝いはできません。
何故かというと、個別記事のページ送りに表示されるサムネイルはJSを用いており、これはFC2のシステムに頼っているわけではありません。
複製を行う場合には

JS内容の追加
html内容の追加
CSSの追加

など、単純にコピーして同じものを記載すれば良い、というわけにいかないんですね。そしてデフォルト内容にも一部手を入れる必要が生じ(id属性をclass属性へ全て変更)、複製したものにも新規id名を付けたりなど非常に「大きな変更」になります。
前例を作るわけにいきませんので、申し訳ないんですが新規html, CSS, JSの作成についてはお断りさせてくださいね。

前後ページへのリンクだけで良い、という場合には、デフォルトのページ送りを元の位置に戻して頂いて、今掲載している位置には

<!--permanent_area-->
<div>
<!--preventry-->
<a href="<%preventry_url>"><%preventry_title></a>
<!--/preventry-->
<!--nextentry-->
<a href="<%nextentry_url>"><%nextentry_title></span>
<!--/nextentry-->
</div>
<!--/permanent_area-->

これが最も簡単な形だと思います。スタイリングはご自身で行ってくださいね。

または今の状態のまま(複製なし)でstickyを外して対応された方が良いかもしれませんので、
#pager-wrapper,
で検索するとスタイルシート内に1箇所ありますので、この文字列を行ごと削除してください。
よろしくおねがいします。

ページ送りの複製については他の方も希望される可能性がありますので、複製できるようなコードを私の方で考えたいと思います。ただすぐにはできないかな (∵`)
その場合はテンプレート単位で修正しますので出来ましたら記事としてお知らせすることになると思います。できるとは限らんけど(笑)
あまり期待せずお待ち頂ければ ^^;

-----
ごめんなさい。あと一点だけ気になったのでお伝えしますね。
テスト記事に「装飾をそのまま貼り付けして〜」という一文があるんですが、htmlは装飾ではありません。
「装飾をした」と言われた場合には質問を受けた側はhtmlではなくCSSの話だと思ってしまいますので、質疑応答がややこしくなることがあります。
どうでも良さそうなことですが実際は遠回りになってしまいますので覚えておかれると役に立つかな、と思います。

2020/03/22 (Sun) 22:37
vanillaice (Akira)
Akira
To bonさん

ページ送りの複製ができるようにしました。公式配布ページで再DLしてくださいね。

!注意点!
複製した方(元でなくコピーの方)の
<div id="pager-wrapper" class="pager-wrapper">
赤字部位は必ず削除してください。

<div class="pager-wrapper">
こうなっていればOKです。これをやらないと大変なことになります(笑)
また、デフォルトのものは位置変更不可ということでお願いします。

それから、このページ送りのサムネイルは「ユーザーがスクロールを始めたら情報を取得」という方法を取っています。理由はページ表示速度を落とさないためです。
なので例えば記事タイトルの「上」など極端に上の方に掲載するとサムネイルが出ませんので、その点も留意してください。
速度を犠牲にするというのはナシの方向で行きたいのでこの仕様について変更予定はありません。

ということでHymnの方も再DL後の複製可です。Hymnは消去すべき内容はありませんのでコピペだけでできます。
よろしくおねがいします。

2020/03/23 (Mon) 01:26
bon
To Akiraさん

ひええええーっ!そこまでしていただいてありがとうございます。
修正がうまくできていなかった部分も丁寧に再指導くださり面目ありません。ご返信いただいた上から順番に、慎重に作業をさせていただきます。こちらの都合で申し訳ございませんが、数日頂くことになると思いますが、作業が終わったら必ずこちらでご報告させていただきます。
お世話になったばかりですのに、懇切丁寧に対応下さり本当にありがとうございます。取り急ぎお礼のみで失礼いたします。

2020/03/23 (Mon) 08:55
vanillaice (Akira)
Akira
To bonさん

bonさん、こんにちは ('0')/
はい。ご自分のペースでなさってくださいね。お疲れ様です :)

2020/03/23 (Mon) 14:57
bon
To Akiraさん

Akiraさん
こんばんは。お世話になっております。
長時間にわたり、Akiraさんの貴重なお時間を頂戴して申し訳ございません。本当は昨夜のうちに「できました!」と言いたい…と思っていたのですが、試行錯誤しているうちに時間切れになってしまいました。

・コメント共有プラグイン修正の件
きめ細かなご指導ありがとうございます。おかげ様でできたのではないかと思います。わかっていない相手に説明するのってとても難しいと思うのですが、Akiraさんの説明はとてもわかりやすいです。

・htmlは装飾ではない、という点、承知しました。親切にご指摘ありがとうございました。トンチンカンな話でお恥ずかしいです(^^;

・ページ送り複製の件
大変お手数をお掛けしてしまいましたが、本当にありがとうございました。
私には「これはできることなのか、できるけどNGなのか、できないことなのか」の判断がまったくつきませんし、思ったことをご相談させていただきました。そのお返事が「お断りさせてくださいね」で終わっていても不思議ではないのに、htmlを教えて下さっただけでも本当に有難かったです。仕事でもこんなに丁寧に対応して下さる方っておられないのではないかと思います。
でもその後見てみたらさらにお返事が…!(T_T)
せっかくAkiraさんに作っていただいたページ送り、ブログ読者の方にたくさん押してもらいたいです…。

さて、テンプレートを再ダウンロードし取り掛かりました。
位置ですが、Akiraさんが記事に書いておられる通りで、ページ送り複製をコメントの上に配置した場合、コメントゼロだとデフォルト位置のページ送りとものすごく近いですよね。これは本当におっしゃるとおりだ…と思いました。しばらく悩み、テンプレート個別記事を再度上から読んでおりましたところ、
「新着記事リスト」と「プロフィール」について
の箇所で、「表示位置の変更は可能」とあったので、プロフィールをコメントの上に移しました。この時点で上からシェア→ページ送り→プロフィール→コメントとなり、私としましてはこれが一番しっくりきたのですが、そうなるとプロフィールとコメントの間に隙間がなくなってしまい、また、プロフィールがトップページにも表れてしまいました。
ここまでが昨夜の状況でした。

昨日htmlタグを調べて「permanent_area」の意味をなんとなく知ったのですが、プロフィールがトップページに出たのはpermanent_areaから出たからではないかと考え、
<!-- 個別記事ページナビここまで -->
の下にあった <!--/permanent_area-->を、 <!--comment_area-->の上に移動しましたら、プロフィールが個別記事内に戻ってきました(長ったらしくごめんなさい)。

・今回お聞きしたいのは、この一連の作業の中に問題があればご指摘頂きたいのと、もし問題がなかった場合、プロフィールとコメントの間にすこし隙間が欲しいので、その方法をご教示頂きたいです。もし根本的に間違っているようでしたら、ページ送りをコメントの上に元に戻します。

※Hymnのほうも再DLし無事設定できました。ありがとうございました。こちらまで見て頂くつもりはございませんが、ご報告だけさせていただきます。

Akiraさんが記事に書いておられた「初心者=なぜか公式テンプレートを選ぶ」私もまさにそうでした!10年近くテンプレート変更した記憶もなく、とりあえずレスポンシブにしないといけないと思って爆速にしていました。でもイマイチ気に入らなくて、結局WordPressへ行ってしまったのですが、WordPressが陸の孤島というのも全くおっしゃる通りです。FC2ブログがこんなにお洒落になることも知りませんでしたし、早く読者の方にアナウンスしたいとウズウズしますが、それには基礎が整ってからと思っておりますのでがんばります。
Akiraさんの貴重なお時間を割いていただいて申し訳ございませんが、本当にありがたく思っております。ひきつづき、よろしくお願い致します。

追伸となりますが、
教えていただいたSublime Text3ですが、今回のページ送り複製から使い始めました。日本語に対応の作業はできていないと思うのですが、文字化けもせず表示されております。FC2ブログのテンプレート編集画面や、ウィンドウズのメモ帳よりも見やすいですね。まだぜんぜん慣れていませんが、少しずつ使い慣れていきたいと思います。

2020/03/24 (Tue) 20:30
vanillaice (Akira)
Akira
To bonさん

bonさん、こんばんは ('0')/
綺麗になってます。大変でしたよね。お疲れ様でした。
とか言いながら、ごめんなさい。私のミスで1箇所だけidをclassに変更し忘れていました。
度々再DLしてもらうのもアレなので、お手数ですが
id="pager-title-a"
で検索し(html内に1箇所あります)、赤字部位を修正して以下の通り。
class="pager-title-a"

ホントごめんなさい (*_ _)

-----
> プロフィールとコメントの間にすこし隙間が欲しい〜

#author-block {
で検索するとスタイルシート内に2箇所あります。最初の方のルールセット内 background: var(--box-color); の直下に
margin-bottom: 数値px;
を追加。数値は50ぐらいが良いんじゃないかな、と思います。

-----
sublime〜、慣れると使いやすいと思います。ミスの修正などはブラウザ上で行うよりもエディターを使う方が効率的ですし、ミスが視覚的に気づきやすい工夫がされているので安全です :)

----- 別件
スムーススクロールの挙動がおかしいようです。ちょっと調べて後ほどお返事しますね。

2020/03/24 (Tue) 22:33
bon
To Akiraさん

ここまで根気よくお付き合い下さり本当にありがとうございます。
綺麗になっている、と言っていただけてホッとして力が抜けました(^^;さらにもったいないお言葉まで…貴重なお時間をたくさんいただいてしまい、Akiraさんこそお疲れになったと思います。本当に感謝しかありません。

・修正部分、ご教示下さりありがとうございます。対応いたしました。

・プロフィールとコメントの間を広げることも成功しました。ありがとうございました。

・スムーススクロールの件、何かやらかしてしまったのでしょうか…ここにきてまたお仕事を増やして申し訳ございません。続報お待ちします。

バリデートをしてみると、どうしても出てしまうもの以外はエラーが出ていないようで嬉しいです。わからないのにhtmlを触りまわす怖さを身をもって知りました。今後は、記事を更新していく上でエラーが出ないように気を付けます。そのためにも、書き方などAkiraさんのブログでもっと勉強します。

2020/03/24 (Tue) 23:15
vanillaice (Akira)
Akira
To bonさん

bonさん、ごめんなさい。私管理画面からの返信に手こずっておりまして。
bonさんへの追記返信を他の方に行ってしまいました (;ωq`)
というわけで行き違いのコメントを載せますね。

> あー。原因わかりました。FC2アクセス解析です。clickカウントで#付きのURLを除外していない…。なんだこの仕様 (:D)┼─┤
通常URL末尾に # がつくものは「ページ内移動」なのでクリック元としてカウントすべきではないんですが、取得しています。それがスムーススクロールの動作を阻害しています。一瞬止まってから動き出す、という感じですね。
ごめんなさいね。ちょっと考えてはみますが、どうだろう ( ̄∀ ̄;)

-----
で、スムーススクロールについてもう少し追加です。
干渉を避けようと思うとscrollイベントというのでJSを監視する必要がありそうです。ただこのscrollイベントというのはスクロールが行われる度に発火してしまい非常に負荷が高いんですね。
なので修正は今回見送りたいと思います。申し訳ない (*_ _)

そして私のミスの件の修正もお手数おかけしました。
また何かありましたらお気軽にご連絡くださいね。お疲れ様でした :)

2020/03/25 (Wed) 01:15
-
管理人のみ閲覧できます

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

2020/03/25 (Wed) 07:51
vanillaice (Akira)
Akira
To お礼の件 内緒さん

こんばんは。
どうぞお気遣いなく。お気持ちだけ頂いておきますね :)

2020/03/25 (Wed) 20:13
bon
To Akiraさん

こんばんは。承知しました。
私もどこかで自分のできることで、誰かの役に立つことをしようと思いました。親切に、また惜しみなく知識をご教示下さり本当にありがとうございました。お身体に気を付けて、これからもFC2ブログユーザーを導いて下さい。
またお世話になることもあると思いますが、今後ともよろしくお願い致します。
※お返事不要です(#^^#)

2020/03/25 (Wed) 23:27
bon

Akiraさん

何度もごめんなさい(;_:)

また、スマホからのコメント返信(記事ページのコメント返信ボタン1タップ)で「Re:●●さん」が2回表示されてしまいます。一度は直ったと思ったのですが…現在も100%ではありませんが、感覚的に80%現象が出ます。主な現象をリンクのページに掲載しましたので、ご覧いただけますでしょうか。

・「Re:●●さんRe:●●さん」の場合と「タイトルなしRe:●●さんRe:●●さん」の場合があります。
・自分のスマホがおかしいのかと思い、夫のiPhoneでも試しましたが同じでした(夫は私のブログは見ていません)
・ひとつの記事がおかしいのかと思いましたが、他の記事でも同じようになりました
・Hymnを適用しているブログではこの現象はみられません
・パソコン画面からは「タイトルなしRe: bonさん」が出ました

先日同じ件でお伺いした際に、2回押し、また宛名を複数人にした場合そのようになる、とのことでした。実際お見せできるわけではないので、「2回押しているんじゃぁ…」と思ってしまわれると思うのですが、もう一つのブログでは出ないので私の指は大丈夫のはずです(笑)

自分のスマホだけの症状かと思ったら夫のスマホでも出たので、これは読者の方にもと思ってしまいます。
何度も申し訳ないのですが、できるならこの症状を直したいです。急いでおりませんので、またお時間のある時でかまいません。アドバイスをお願い致します。お忙しいところ、手のかかることで申し訳ございません(T_T)

2020/03/29 (Sun) 12:30
vanillaice (Akira)
Akira
To bonさん

bonさん、こんばんは ('0')/
今確認しました。こちらもFC2アクセス解析との衝突です。
まいったなぁ ( ̄∀ ̄;)

これはもうJSの書き換えしか手立てがありませんので、私の方で修正しますね。
簡単なJSなのですぐできると思います。しばしお待ちくださいね。よろしくお願いします。

2020/03/30 (Mon) 00:35
vanillaice (Akira)
Akira
To bonさん②

Mystyleのhtmlを上書きしました。再DLして頂くことで解消されるはずです。
何度もお手数かけてすみません。
変更内容のアナウンスはこれから行いますね。次にHymnを修正し、その後全て書き直します(笑)

2020/03/30 (Mon) 00:47
bon
To Akiraさん

おはようございます。
迅速なご対応ありがとうございます。またアクセス解析でしたか。アクセス解析が諸悪の根源に思えてきました…

テンプレートの書き換え、ありがとうございました。こちらこそお手数をお掛けしました。
DLしてアクセス解析を張り付けてみましたが、Re:が繰り返しになる現象がなくなりました!
何度もしつこく試してみましたが大丈夫でした。
また、動きもよりスムーズになったような気がします。

他のテンプレートも修正となってしまい、大変なお手数をお掛けしました。
いつも本当にありがとうございます!

2020/03/30 (Mon) 08:06
vanillaice (Akira)
Akira
To bonさん

いえいえ。こちらこそ、FC2アクセス解析なんて汎く使われている可能性が高いのに検証を怠っていた私の怠慢です。ごめんなさい ^^;
bonさんのおかげで色んなことに気づけました(笑)
こちらこそありがとうございます。

全然関係ないですが、私bonさんを男性だとずっと思っておりました。
たぶんお名前の印象だと思います。私こそ病院へ行っても「君」バースデーケーキも「君」なのに、なんてことでしょう(笑)
えっと、お返事不要です(笑)

2020/03/30 (Mon) 22:30
bon
To Akiraさん

こんばんは。
再DL前に変更していたhtmlとCSSの書き換え作業ですが、Sublime Text3の画面を並べて相違箇所を表示してくれる機能のおかげでスムーズにできました。おススメいただけて本当に良かったです。このこともお伝えしたかったので、再度書き込ませて頂きました。Akiraさんのおかげで、ブログと自分が急激に進化したと思います(笑)これからもこちらで勉強させて頂きます。

追伸
明日、読者の方に新しいブログをアナウンスする予定です。本なら献辞のページがありますが、私なら Akiraさんに捧げる となります。今後もお世話になると思いますが、よろしくお願いします。

★お忙しいところ何度も失礼しました。こちらこそお返事不要でお願いします。

2020/03/30 (Mon) 23:53
bon

Akiraさん、こんばんは。

質問です。記事にMystyleの引用(リンクあり)を使わせて頂きましたが、見本のようにならず、リンクが枠の外に出てしまいます。
デフォルトのテンプレートを適用してみても同じでした。どこか何かを間違えたのかもしれません。。何度見直してもわからないので、チェックしていただけないでしょうか。いつもすみません。よろしくお願い致します。

あっ、私はAkiraさんのこと、最初から女性だと思っていましたよ!(ものすごく今更ですみません)

2020/04/03 (Fri) 21:17
vanillaice (Akira)
Akira
To bonさん

bonさん、こんにちは ('0')/
これごめんなさい、見本のhtmlの方が間違ってました。構文的にはどちらでも良いんですが、スタイルを適用するには

×
<blockquote><p>文章</p></blockquote><cite><a>参照元</a></cite>


<blockquote><p>文章</p><cite><a>参照元</a></cite></blockquote>

こうしてcite要素をblockquote要素の中に入れ子してください。
* 注意: 属性は省略していますのでコピーでは使えません *

お手数おかけします。よろしくお願いします。

2020/04/04 (Sat) 11:24
bon
To Akiraさん

こんにちは。
お返事ありがとうございます。
教えていただいたように書き換えたところ、見本のように参照元URLが枠の中に入りました。ご対応ありがとうございました!

Akiraさんのテンプレートのおかげでブログの雰囲気が明るくなり、HTMLで記事を書くのも慣れないながらも楽しいです(とりあえずはバリデートでエラーにならないことを目標にやっています)。
いつもありがとうございます。今後とも、よろしくお願い致します。

2020/04/04 (Sat) 12:39
vanillaice (Akira)
Akira
To bonさん

全然気づいてなかったので助かりました。
「楽しい」と言って頂けて嬉しく思います。絶対やらなきゃいけない、ということではないので嫌になってしまう方も多いんです。
その場合は「頑張らなくて良い」と伝えますけども、やっぱりネガティブな気持ちになるようで。

ミスの指摘など非常にありがたいので今後もどんどんお願いします(笑)
こちらこそよろしくお願いします :)

2020/04/04 (Sat) 13:38
-
管理人のみ閲覧できます

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

2020/04/04 (Sat) 14:34
vanillaice (Akira)
Akira
To Mystyle FBシェアの件 内緒さん

こんにちは。

> ブログ個別記事内の気に入ったらシェアボタンが他のshare絡みのコードの埋め込みの為表示されません。〜

まず構文エラーが非常に多く、そちらを修正する必要がありますし、その修正だけで正常化する可能性もあります。なのでそちらを最優先で行ってください。

<meta name="msvalidate.01"
の前に全角スペースがあります。こちらはクリティカルエラー(致命的エラー)なので削除してください。
ソースコードの文頭を揃える必要はありません。以下の記事をご参照ください。

参考記事: head情報に何かを追加する際は細心の注意を
https://vanillaice000.blog.fc2.com/blog-entry-791.html

参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

-----
テンプレートのシェアボタンが表示されない原因は各シェアボタンのidが勝手に数字に書き換えられていることです。何故かというのは構文エラーによってJSの動作がおかしくなっているためだと思いますが、今の状態では検証不能なのでこの作業を終えてからまた拝見しますね。

で、あとちょっとわからなかったんですけども、「テンプレート内のシェアボタンのせいで『気にいったらシェア』が表示されない」という意味なのか、それとも逆に「『気に入ったらシェア』を入れたらテンプレートのシェアボタンが表示されない」のかどちらでしょうか。前者だと思いますがテンプレートシェアボタンはただのリンクなので『気に入ったらシェア』の表示を阻害することはありません。そして『気にいったらシェア』の方はJSで表示させるタイプなのかhtmlなのかわかりませんが、いずれにしても対応コードが書かれていないように見えます。

・全角スペースの削除を行う(終了後ご報告頂いてから再度検証します)
・気に入ったらシェアはどうやって表示するのか。htmlならそのコードを、JSならやはりそのコードを提示してください
・テンプレートのシェアボタンが必要なのか不要なのか(不要ならばガイダンスに従って削除してください)

よろしくお願いします。

----- 追記
スタイルシートにもクリティカルエラーがありますので修正してくださいね。
以下のスクショの赤い枠で囲った部位を削除。

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/user-2020-4-4----1000.jpg

2020/04/04 (Sat) 14:58
-
管理人のみ閲覧できます

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

2020/04/04 (Sat) 19:02
vanillaice (Akira)
Akira
To Mystyle FBシェアの件 内緒さん

こんばんは。
まずクリティカルな構文エラーについては解消されています。廃止タグなどについては火急の要件ではありませんので今後少しづつ修正をする、という形で良いと思います。

で、ごめんなさい。私ちょっと勘違いしてしまいました。「気に入ったらシェア」を追加したのかと思っていました。例えば以下のようなものです。

参考記事: 【JSなし】この記事が気に入ったらいいね!ではなくシェアのリンクを設置する方法
https://vanillaice000.blog.fc2.com/blog-entry-741.html

なので
「あるJS(今回記載していただいたもの)を記載するとテンプレート個別記事のSNSボタンが表示されない」ということ合ってますか。
私の問いかけが意味不明だったと思います。すみません ^^;

----
記載して頂いた内容ですが「何のためのJS」なのか目視できない以上私ではわかりません。とりあえず原因は「idが勝手に書き換えられてしまう」ことなので、テンプレート内SNSボタンのid属性をclassに変えてみたらどうでしょう。

id="e-facebook"
を目印に検索するとhtml内に出てきます。赤字部位を変更し以下の通り。

class="e-facebook"
同じように近接にtwitterやpinterestなどのボタンもありますのでidをclassに変更

続いて
/* SNS brand color */
で検索するとスタイルシート内に出てきます。
/* author */
の直前までがボタン関連のなので、
#e-facebook
の赤字部位を変更して以下の通り。
.e-facebook
同じ要領で残りも # を . に書き換えてください。
html編集が5箇所、スタイルシート編集も5箇所で、合計10箇所の修正です。
一度お試しください。よろしくお願いします。

2020/04/05 (Sun) 00:43
-
管理人のみ閲覧できます

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

2020/04/05 (Sun) 01:25
vanillaice (Akira)
Akira
To Mystyle シェアの件 内緒さん(完了のご報告)

こんにちは。解決できたとのことで良かったです。
お疲れ様でした :)

2020/04/05 (Sun) 16:26
bon

Akiraさん
こんばんは。また表示が変になってしまいました。私が気づいているのは2点です。
・リンクした記事にはタグをつけましたが、サイドメニューのタグに表示されていません。他のタグも表示されたり、されなかったりします。
・サイドメニューのコメントプラグインの表示が崩れています。

デフォルトのテンプレートを適用してみても現象が改善されないので、記事のhtmlに問題があるのかと思いました。
楽天アフィリエイトを貼っている記事
https://bon3te.fc2.net/blog-entry-4.html
にエラーが多く出ているので、この記事を下書きにしてみましたが、それでも現象は変わりませんでした。

背景が白だとまぶしいように感じたので、色をあれこれ変えたり、またルミナスなどを試してみたりしているうちに何かしたのか?と思ったのですが、デフォルトのテンプレートでも変わらないということはテンプレート編集のミスではなく、個別記事に問題があるのでしょうか。
バリデートは必ず行っているのですが、私には問題を見つけることができません。Akiraさんのお力をお貸しいただけないでしょうか。

何度も何度もすみません。よろしくお願い致します。

2020/04/09 (Thu) 22:27
vanillaice (Akira)
Akira
To bonさん

bonさん、こんばんは ('0')/

崩れている、というのは
<>+-
の記号のことでしょうか。元の状態を知らないので推測です。
タグの件はちょっと置いておきます。
プラグインを検証したいと思うんですが、プラグインの元のソースが不明ではなんともできません。もしかしたらbonさんが編集をしたのかもしれないし、データに何か問題があるのかもしれません。
オリジナル名称がわからないとプラグイン検索もできません(キーワードになりそうなものを検索しましたがヒットしませんでした)ので、プラグインDLページのURLを頂くか正式名称で検索できるようにしてくださいね。

とりあえず現状のソースを見る限りでは正しい表示というか、そう表示されるような内容になっています。
ただしこのプラグインに関するCSS内容が無いように思います。移設のし忘れなど記憶にないでしょうか。
ただ元のプラグイン名がわからないとやっぱはっきり言えない ^^;
恐らくbackgroundで画像を入れていたのではないかなぁ、と思います。
消してしまった or 移植し忘れ(バリデートエラーを避けるためにスタイルシートに移動させた、など)であれば再DLで直ります。
そこからまた移植やJSでの処理などを再度慎重に行ってください。

タグの検証の前にスタイルシートの方にエラーがありますのでまずそちらを修正してください。
/* ブログカードの横幅設定 */
の直後に半角スペースと全角スペースが入っています。これを全て削除。
htmlだけでなくスタイルシートも全角スペースは絶対に入れてはいけませんので注意してください(コメント内テキストのみOK)
この修正を待ってどうなるかをまず見たいと思います。ただ関連性は無いと思います。
設定したタグを一旦削除し、再設定することで解消されるかどうか一度ご確認ください。
よろしくお願いします。

----- 追記
プラグイン見つけました(なのでリンクの提示は不要です)
やっぱりCSSの記載忘れですね。

2020/04/10 (Fri) 00:16
bon
To Akiraさん

こんばんは。お返事をありがとうございました。
まずは、質問の際に必要な情報が欠けており、Akiraさんのお手間を増やしてしまってごめんなさい。

テンプレートを再ダウンロードしたあとに、コメントプラグインのCSS移植を忘れたのだと気付きました。いらないことをしたのではなく、し忘れの方だとは考えもしませんでした。ご指摘くださりありがとうございました。
プラグインを再ダウンロードし、設定し直しました。正しく表示されたかと思います。プラグインはAkiraさんの作成されたものではないのに、ありがとうございました。

また、スタイルシート内の全角、半角スペースを削除しました。Akiraさんのブログでも全角スペースダメ!と口を酸っぱくして言われているのに、知らない間に入れてしまったようです。これを機に、うっかりを無くすために、IME入力設定でスペースの入力設定を半角のみにしました(これまでは「入力モードに従う」にしていました)。

その後、再度タグを設定したところ、サイドバーにもタグが表示されました。ありがとうございました。

なにかと問題を起こしてごめんなさい。まだまだ、何が問題か気づけるところまではとても無理ですね^^;申し訳ありません。いつも親切なご対応してくださり、本当にありがとうございます。

2020/04/10 (Fri) 18:54
vanillaice (Akira)
Akira
To bonさん(終了のご報告)

bonさん、こんにちは ('0')/
いえいえ。どうぞお気に病まれませんよう。「忘れる」というのは人間なら当たり前で、忘れてる場合は「忘れてるよ」と他者から指摘されないと気づかないものです。だってそれが「忘れる」という本質なので(笑)
私もよくありますよ (*ノェノ)

全角スペースはやっぱりキーボード操作の癖づけが大事ですよね。日本語圏である以上どうしても起こりうるミスです。
タグの方は突発的なデータ破損か何かでしょうかね。そういうのもごく稀にあります。
解消されて安心しました。お疲れ様でした :)

2020/04/11 (Sat) 14:27
マダムゆか
一部の方から。。。

Akiraさまお世話になっております。
一昨日からこちらのテンプレートを利用させていただいています。
一部の方から『ブログ読めません💦残念応援は可能でしたのでポチッとしていきます。』とのコメントが入りました。
たしか3月の初めにもこちらのテンプレートを使わせていただいたときに『ヤフーから入ると文字が縦になって読めない』などのコメントもありました。(ちなみに前者のコメントをしていただいた方は3月も見れないと言われました(;^_^A
こちらのテンプレートはとてもお気に入りなので。。。ぜひぜひこのまま使わせていただきたいのですが、、、
相手の方がどのような環境でご覧いただいているか確認したほうが原因がわかるのでしょうか??

2020/04/30 (Thu) 14:07
vanillaice (Akira)
Akira
To マダムゆかさん

こんにちは ('0')/

Mystyleテンプレートは IE非対応 です。非対応というのは「IEでは閲覧できない」という意味です。
「Yahoo!から入ると〜」の意味がちょっとわからないんですが、この表現を取られる方の多くは

・ブラウザ, OS, トップページ, サイト, ブログなど意味を理解できていない
・IEしか利用したことがない

事が多いので、恐らくIEをお使いなのだと思います。
Yahoo!はブラウザ名ではなくブラウザトップページのことなので、「Yahoo!から入る〜」「Googleから入る〜」というのは関係ありません。

テンプレート専用記事には必ず「対応ブラウザ」「IE非対応の場合はその旨の明記」「IE利用者への告知の仕方」等を記していますので、必ず目を通すようにしてくださいね。

IE利用を勧めない理由とIE非対応を選択するかどうかについては以下のページをご参照ください。

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

上記ページへのリンクをお相手に提示しても私のブログ自体がIE非対応なのでその方にはお読み頂けません。
なのでマダムゆかさんの方で説明が可能であれば、他ブラウザの利用を勧めて頂くか(これが最も健全な方法です)、説明が困難なようであればテンプレートの変更をおすすめします。IE対応・非対応の別は以下のページでご確認頂けます。

参考記事: FC2共有テンプレート一覧
https://vanillaice000.blog.fc2.com/blog-entry-283.html

よろしくお願いします。

2020/04/30 (Thu) 14:35
マダムゆか
ありがとうございました

Akiraさま
早速ご回答いただきありがとうございました
わたし自身がIEの意味を理解していませんでした。。。本当にお恥ずかしい
全く理解していないわたしにいつも丁寧に説明いただきありがとうございます
こちらのデザインはとても好きなのでコメントいただいた方にはIE以外でご覧いただくようお伝えします

本当にありがとうございましたm(__)m

2020/04/30 (Thu) 15:08
vanillaice (Akira)
Akira
To マダムゆかさん

マダムゆかさん、こんにちは ('0')/

今拝見しました。お願いされてましたね。申し訳ないです ^^;
あと「Internet Explorer」と正しい名称を記して説明すべきでした。こちらについてもごめんなさい。

で、私から客観的に見た限りでは、ちょっと難しいのではないかと思います。
啓蒙というのは相手を説得する行為です。そのためには「何故」「どうして」「どうすれば良いか」を提起して、それに「納得」「賛同」をしてもらわなければいけません。なかなかこれが難しいんですね。
なので私からのアドバイスとしては、ご友人にIE利用率が高いのであれば「IE対応テンプレート」を意識的に探される方が良いと思います。

後はマダムゆかさんにお任せしますね。よろしくお願いします :)

2020/05/01 (Fri) 16:05
マダムゆか
遅くなりました~~~

Akiraさまいつもありがとうございます(*^-^*)
本日の記事を見て。。。慌ててこちら記事に戻ってきました(;^_^A
>「Internet Explorer」と正しい名称を記して説明すべきでした。
いえいえとんでもございません。わたしがしっかり調べるべきでした。。。こちらこそ申し訳ありませんでした。
テンプレートに関してはMystyleが見やすくトップページのブログタイトルのゴールド感?!もとても気に入っているのですが。。。思っている以上に『見れなかった』と言われて。。。( 一一)
今後新規のご訪問者さまにはIE非対応をお伝えすることができないので(;^_^A
Alternativeを愛用させていただこうと思っています♪

ご丁寧なアフターケアに感謝です(*^-^*)今後ともよろしくお願いいたします♪

2020/05/07 (Thu) 18:16
vanillaice (Akira)
Akira
To マダムさん(重要追記あり)

こんばんは。
* IE対応テンプレートとブログカードの件

そうですね。閲覧者への説明が困難な場合はIE対応テンプレートの選択をおすすめします。IE終了を迎えたらまたお考えくださいね。
といってもあと5年あるけど(笑)
その前にYouTubeなど大手サイトがIEサポートを打ち切りそうな雰囲気なので(あと2〜3年?)、その時が良いタイミングになるかもしれません。

----- 別件
ブログカードのスタイルが崩れていますので、

.blogcard-title {
margin: 0 0 15px !important;
}

.blogcard-description {
margin: 0 !important;
}

上記をスタイルシート末尾に追加してください。それと一点確認なんですが、サムネイルのサイズをデフォルトの100px四方から120pxに任意変更されてますでしょうか。
その場合には

.blogcard-image-wrapper

.blogcard-image-wrapper img

それぞれのルールセット内
width: 100px;
height: 100px;

赤字部位の100も120に変更してください。
よろしくお願いします。

2020/05/07 (Thu) 22:51
マダムゆか
早速!!

Akiraさま
重ね重ね。。。出来の悪いわたしに(;^_^Aご指導いただきありがとうございましたm(__)m
ブログカードが崩れていることすら気づいていませんでした( 一一)
理解していないまま触るのでこのようなことが起きてしまうんですね。。。反省
早速修正いたしました♪

お時間とらせて申し訳ありませんでしたm(__)m

2020/05/08 (Fri) 19:01
vanillaice (Akira)
Akira
To マダムゆかさん(完了のご報告)

こんばんは ('0')/

気づいてなかったんですね(笑)
修正できてますので大丈夫です。お疲れ様でした :)

2020/05/08 (Fri) 22:07
bon
blockquoteをpでマークアップする場合のmarginについて

Akiraさん、こんにちは。
またやってきました…すみませんがよろしくお願い致します。

件名の通りなのですが、ARTICLE PAGE DEMOにあります
<blockquote><p>引用テキスト内容</p></blockquote>
で書いた場合に、p要素によって上下に空白行が入ってしまいます。
テスト記事です
--削除しました--

CSSには
blockquote p {
margin: 0;
}
があるのですが、どうして上下のmarginが0にならないのでしょうか。
上下の空白を詰めたいため数値を調整してみましたがわからず、テスト記事以外で引用はp要素を用いないようにしてみたのですが、構文としてはpでマークアップするほうが正しいような気がして…考えたすえに今回の質問に至りました。

本日質問前に、デフォルトのテンプレートをダウンロードしなおし、そちらを適用してプレビューしてみましたら、同じようにpでマークアップしたほうは上下に空白行が入るようです。
引用文の場合に、pのmarginを消す方法を知りたいです。

ちなみにHymnテンプレートを使用している旧ブログで同じテストをしてみましたが、p要素でマークアップしても空白行は入りませんでした。
こちらもテスト記事を作成しました。
--削除しました--

お手数をお掛けしますが、アドバイスをお願いいたします。

また、ついでのようになり申し訳ありませんが、報告です。
Hymnのテンプレートhtmlを新たにダウンロードしたものと照合し、不足していると思われる部分を追加しました。Sublime Textの、画面を左右に開いて相違を探す機能で何度もチェックしましたので、きっと大丈夫と思います。ご指摘下さりありがとうございました。
旧ブログといえど参照することも多くありますので修正できて助かりました。今後もおかしな点はご指摘くだされば嬉しいです。

2020/05/31 (Sun) 16:13
vanillaice (Akira)
Akira
To bonさん

こんにちは ('0')/
お手数おかけしております。

まずblockquote内のp要素の指定


blockquote p {
margin: 0;
}

の指定が効いていないのは


.inner-contents p {
margin: 1em 0;
}

が指定されており、この .inner-contents というのは記事部位のアウトライン(div要素)です。
指定としては「inner-contensクラスを持つ要素内にあるp要素のmarginは上下左右共に0」
①よりも②の方が詳細度が高いため低い方の①が無視される、ということです。
これはリリース当初の「p要素を利用しないであろう」初心者向けから「p要素を使うこともある」中級〜上級者さんのリクエストにお答えして調整したものです。blockquoteのp要素も調整するべきでしたね。すみません。
詳細度の相関図は以下の通り

詳細度高
.inner-contents > blockquote > p

詳細度低
blockquote > p

-----
対処(修正)ですが、②の既存内容を

.inner-contents blockquote p {
margin: 0;
}

と赤字部位を追加してください。あるいは、引用文中に複数のp要素が入ることもあり、上下marginが0だと段落間の余白がありませんので

.inner-contents blockquote p:first-of-type {
margin: 0 0 1em;
}
.inner-contents blockquote p:last-of-type {
margin: 0;
}

でもOKです。こちらの方が良いかもしれません。
p要素がひとつの時は last-of-type とみなされ上下にmarginは付きません。

p要素がふたつの時は first-of-type の下にmarginが1em、2つ目のp要素は last-of-type なので上下marginは0となり、first-of-typeの 下margin によってp要素同士に1emの余白ができます。

p要素が3つの時は first-of-type の下margin1em、真ん中のp要素は上下marginが1emで、marginは相殺が起こりますので
「first-of-typeの下margin 1em + 真ん中の上margin 1em = firstと真ん中の余白2em」
ではなく、相殺(大きい方が小さい方を吸収)され余白は 1em です。
last-of-type は上下marginが0ですが、真ん中が上下に1emのmarginを持っていますので、結果的に

----- blockquote
ひとつめp要素

ふたつめp要素

みっつめp要素
----- /blockquote

という見た目になります。ただしblockquote自体にpadding(内側余白)がありますのでひとつめの「上」と最終の「下」には余白がありますがmarginによるものではありません。
また、cite要素を含む場合はまた別の調整が入ります。

よろしくお願いします。

2020/05/31 (Sun) 16:47
bon
To Akiraさん

迅速なご対応ありがとうございますm(__)m

CSS内容
blockquote p {
margin: 0;
}
これを、
.inner-contents blockquote p:first-of-type {
margin: 0 0 1em;
}
.inner-contents blockquote p:last-of-type {
margin: 0;
}

に変更したうえで、テスト記事のblockquoteにp要素を3つ入れてみました。
書いてくださった通りの結果になりました。
テスト記事です。
--削除しました--

修正された経緯もわかり、納得しました。こちらこそいつもお時間をとり恐れ入ります。ご対応くださってありがとうございました。
今後ともよろしくお願い致します。

2020/05/31 (Sun) 17:07

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

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

テンプレート