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

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

テンプレート
2017/12/29
44
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWD
CommonSenseテンプレート

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

最終更新 2020.5.28
  • ページ送りのJSを修正
名称 CommonSense
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大780px
サイド --- 240px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.4.1)
Font Awesome導入 あり(v5.6.1 CSS)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
推奨カスタマイズ 左右カラム入れ替え, 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム
その他ページ --- 1 or 2カラム
(デバイス幅依存)
1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下
(デバイス幅依存)
サイドメニュー --- 下
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2019.12.16
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.10.29
  • コメント主のリンク表示用JS及びデザインの変更

コメント主のリンク生成用のJS内容変更及びタップ範囲の拡大のみです。無理に再DLする必要はありません。

更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)

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

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

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">編集</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">返信</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">返信</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

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

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 5px 0 4px;
}
②について

#community" で検索するとhtml内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

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

#comment_form {
  padding-top: 40px;
}
③について

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

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

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

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

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

更新履歴 2018.12.14
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • レイアウト関連CSSの追加及び一部削除
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年夏でサービス終了のため)

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

本年最後の申請です ( ゚Д゚)ノ
今回は極々ありきたり、ノーギミック, ノーイングリッシュなシンプルデザインです。
なかなか承認されませんが、年明け数日後までログインできないと思いますので事前に本案内記事をUPしておきます。

こもんせんす

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

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

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

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

ナビゲーションについて

Important thing to be careful when adding links to navigation

今回はJSを用いた折りたたみではなく オーバフロー時に横スクロール するようになっています。

  • リンク1
  • リンク2
  • リンク3
  • リンク4
  • リンク5
  • リンク6
  • リンク7
  • リンク8

スマートフォンでの閲覧時はスクロールできることを示唆する意味で以下のようなデザインが追加されます。 画面横サイズが 502px を含みそれ以下になった時に表示されるようにしていますが、リンクの増減をされます方は以下の注意事項をお読み頂きそれぞれ対処をお願いします。

リンクを増やす場合

リンクを増やした場合には当然デフォルトよりも早い段階でオーバーフローが起こりますので

/* ナビゲーションオーバーフロースクロール時の矢印 2/2 */

CSSソース内で上記を目印に直下にある 502 の数値を 大きく 変更してください。
リンクの文字を大きくする方も同じです。デフォルトよりも早く起こりますので修正が必要です。

リンクを減らす場合

件数によってはスマートフォンでも矢印が不要になるかもしれません。
その場合却って矢印が閲覧者を混乱させますので

/* ナビゲーションオーバーフロースクロール時の矢印 1/2 */
/* ナビゲーションオーバーフロースクロール時の矢印 2/2 */

上記2箇所を目印に該当部位を削除してください。

絶対に必要な処理というわけではありません。特に「増やす」方については現存最大スマホ横幅は414pxですので、デフォルトにしておけばまぁ問題はないのかな、と思います。
減らす方は不要矢印は無い方が良いと思いますので寧ろこちらは気にしてください。
最小横サイズは 320px ですので、320pxになった時でも全てのリンクがスクロールせずに表示されるのであれば削除を。

スマホ画面の確認ができない、という方は以下のページを参照のこと。

スマートフォンやタブレットを持っていない人はこのサイトで見え方を確認できるよ - webのあれこれ

これからのwebは スマートフォンでの見え方を最重要視するべし!。 ということで、スマートフォン持ってない・タブレット持ってないという方がパソコンから簡単に自分のブログの見え方を確認する方法をご紹介。...

グローバルナビゲーションは各主要ページへの行き来をするためのものですから、あまりあれもこれもと欲張ってリンクを増やさない方が良いですね。そして横スクロールはAppleのマジックマウスユーザーさんが嫌がりますので(履歴を繰るのと動作がバッティングします)、パソコンの大きい画面でも早い段階でスクロールするようであればちょっと考えものかもしれません。
リンクテキストをなるべく端的な内容にするか、リンクを厳選されると良いと思います。
というかそもそもグローバルナビゲーションの内容は厳選してください(笑)

全体幅調整の仕方

How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1300px に設定しています。
1300
で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。

左右カラム入れ替えの仕方

How to reverse the direction of rows

#main-container { で検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの padding: 40px 60px 80px; の直下に flex-direction: row-reverse; を追加。

続きまして #primary { を検索、CSS内で2箇所ヒット、やはり最初のものが対象です。この括りの margin-right: 40px; に対し緑部分 rightleft に変更。
以上2手順です。

ドミナントカラー

Dominant colors

以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51

rgb(240,236,232) 全体背景色
rgb(190,186,182) ページ送り, コメント送信ボタン など

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

Cautions when copying pagination in permanent page

html内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。

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

Cautions before asking for something.

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

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

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

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

来る年もどうぞよろしくお願いします (●'0'●)/

Related post

Comments  44

きろろ
2018/01/08 (Mon) 01:12

明けまして

おめでとうございます<(_ _)>
旧年中、大変お世話になりました。
本年もよろしくお願いいたします<(_ _)>

vanillaice (Akira)
Akira
2018/01/08 (Mon) 19:42

To きろろさん

あけましておめでとうございます。
ご丁寧にありがとうございます。
こちらこそよろしくお付き合いください :)

2018/01/10 (Wed) 16:54

遅く成りました<(_ _*)>

未だ「あけましておめでとうございます」を言って良いのかな?

イケンとしても、堪えて言わせて下さいね

改めて

明けましておめでとう御座います。手の掛る金ですが宜しくお願い致します

新年(?)の御挨拶は地方によって、日にちが違う様ですが
心の問題とお許し下さいね
あきらちゃんとは、何気に離れ難いきがしますので・・・・(∩´∀`)∩

相変わらず多忙そうやね
寒いけ、風邪等に気を付けて下さいね!

vanillaice (Akira)
Akira
2018/01/10 (Wed) 18:20

To 金さん

金さんあけおめー (●'0'●)/

今年もよろしくお願いします :)
なんだかyahooの方はすったもんだしてるみたいだね。
全然アクセスしてないからアレだけど ^^;

2018/01/10 (Wed) 20:13

そうなんや!

まあ・・・
あきらちゃんは、可也前からわかってたもんね。
金も、此処2回ほどアップしたけれど
FC2同然放置状態やね

何やら、人に依っては「夏に終わる」みたいな事言ってた人いたけれど
金は、終わってもナンチャ影響無いけ
削除するだけですわ(。-∀-)

まあ・・・
YAHOOを楽しんでいる人達にはお気の毒な気もするけれどね。

Akira
2018/01/10 (Wed) 20:54

To 金さん

終わりはしないけれどもリニューアルする (´・ω・`)
パソコンユーザーはもう優先されず、スマホユーザーがいかに使いやすいかを追求していくもよう。
それ故に
・GIF動画掲載不可(静止画に変換) --- スマホからアニメーションGIFのアップロードができないため
・絵文字使用不可 --- モバイル(スマホ)絵文字は機種依存だから
・html, wikiの使用不可 --- スマホユーザーには不要だから
こんな感じ。
現行のブログは春から夏までは任意で新システムに移行(ユーザーのタイミングで切り替え可能)
夏の正規リリースを迎えたら強制的に新システムに移行。

過去記事の装飾系は全てまともに表示されなくなると思った方が良いと思う。
まぁyahooでの壁紙は打ち止めってことだね (´・ω・`)
わかりきっていたことなのでそれについてはさしたる驚きもなく(笑)
ただ、yahooは自分とこのユーザー層を把握出来ていない気がする。
「パソコンを覚えた中高年」がメイン層だと思うのに変えちゃって良いんだろうか ^^;
若年層の新規ユーザーを増やしたいんだろうけど、それには魅力がかなり欠けてる気がする。

八壁ゆかり
2018/03/21 (Wed) 17:05

レイアウトの崩れにつきまして

Akira様
こんにちは、以前からこちらのテンプレートにお世話になっている者です。
この度は、CommonSenseのレイアウトが崩れてしまったことに関して質問させていただきたく思います。

記事タイトルのリスト部分やSNSアイコンが主ですが、本来水平に並ぶべきものが、周辺に散らばってしまう(上下が主です)現象に見舞われております。また、記事のフッター部分に白地の余白が出てきてしまっています。

当方、OSはMac、ブラウザはChromeで、Safariでも同様の問題が発生しており、今現在Windowsマシンが手元にないためEdge等で確認できていないのが恐縮なのですが……申し訳ないです。

カスタマイズは、背景画像とカラー&フォント変更、日付表記変更、記事ヘッダー部分を記事本体と同色にしてひとつに見えるようにしたこと、くらいだと思います。最も影響がありそうなのが記事ヘッダーなので、以下に該当箇所のCSSを貼っておきます。

/***------------------------------------------
article
------------------------------------------***/

.entry-main-body {
margin-bottom: 60px;
background-color: white;
}

.inner-contents {
background-color: white;
padding: 20px 30px;
}

/* header */
.entry-header {
background-color: #fff;
overflow: hidden;
padding: 0 15px;
border-bottom: solid #989898 1px;
padding-top:15px;
}

.entry-title {
margin: auto;
line-height: 1.4;
font-size: 1.6rem;
font-weight: normal;
}

.entry-title a {
color: rgb(91,91,91);
}

.entry-title a:hover {
color: rgb(51,51,51);
}

.entry-datetime {
display: block;
color: rgb(150,150,150);
letter-spacing: 1px;
font-size: 1.2rem;
font-style: italic;
text-align: right;
}

もしも他に必要情報がございましたらお知らせください。
今後ともよろしくお願い申し上げます。

vanillaice (Akira)
Akira
2018/03/21 (Wed) 17:20

To 八壁ゆかりさん

こんにちは。
htmlソース内の <li> を操作されていませんでしょうか。
こちらの記事に該当するかどうかご確認ください。

https://vanillaice000.blog.fc2.com/blog-entry-647.html

デフォルトの状態に一旦戻されまして、上記記事内容に沿った修正をお願いします。
html内容を触った覚えがない、という場合にはその旨お伝えください。
よろしくお願いします。

八壁ゆかり
2018/03/21 (Wed) 18:40

To Akiraさん

ご回答ありがとうございます。

やはり<li>の問題だったようで、HTMLを書き直しましたら正常に戻りました。ご紹介いただいた記事、全角スペースについては、今後も留意していきます。こちらのチェック不足でご迷惑おかけしました。

vanillaice (Akira)
Akira
2018/03/21 (Wed) 18:49

To 八壁ゆかりさん(完了のご報告)

修正出来たということで安心しました。
お疲れ様でした :)

こん
2018/12/18 (Tue) 10:21

お世話になっております

Akiraさん、はじめまして。
CommonSenseのテンプレートを使わせていただいております「こん」と申します。
また時々覗かせて頂いてちょっとずつ勉強させていただいています。いつもありがとうございます。

この度テンプレートを更新なさったと伺い、早速DLさせていただこうとしましたところ
FCさんの共有テンプレート (PC用) のページでは「追加済み」となっており、
DLすることができませんでした。
使用する前に複製は残しておりましたが、こうした場合はどうすればよろしいのでしょうか?
いつもはEdgeを使用していますが、一応Chromeも試してみました~同様の結果でした。

もしかしたら運営さんに連絡すべきなのかとも思いましたが、
ずっとご挨拶したいと思っていたので、この機会を利用してお声がけした次第です。
お忙しいところお手数をおかけいたしますが、ご教示頂けましたら嬉しいです。
よろしくお願い申し上げます。

vanillaice (Akira)
Akira
2018/12/18 (Tue) 13:08

To こんさん

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

テンプレートを再DLするには、まずお手元のテンプレートの名称を変更してください。テンプレート編集画面のHTML編集のすぐ上に修正用テキストエリアがありますので変更後に「更新」を押します。

例)
CommonSense → CommonSense1
など。

名称が完全一致すると(大文字・小文字の見分けもありません)DLできない仕組みになっています。
お手数おかけします。よろしくお願いします。

こん
2018/12/18 (Tue) 15:40

早速のお返事ありがとうございます!

Akiraさん、早速のお返事をありがとうございます!
ご教示いただいた通り試して無事DLできましたm(__)m。

初歩的なことを知らなかったばかりに
お手数をおかけして申し訳ありませんでした。

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

今後ともよろしくお願い申し上げます。

vanillaice (Akira)
Akira
2018/12/18 (Tue) 16:05

To こんさん

いえいえ。こちらこそ不親切でした。
お疲れ様です :)

千菊丸
2019/06/28 (Fri) 20:21

初めまして。

初めまして。
CommonSenseをダウンロードし、ブログのヘッダーの画像を変更しようとしているのですが、なかなかうまくいきません。
ちなみに画像ファイルのサイズは950×290です。

改善するにはどうすればよいのか教えていただきたいです。

vanillaice (Akira)
Akira
2019/06/29 (Sat) 19:52

To 千菊丸さん

こんばんは。

CommonSenseは元々ヘッダー画像「無し」というデザインですから「変更」ではなく「追加」になります。
変更の場合はURLを差し替えるだけなので簡単なのですが、追加の場合は「何を(どんな画像を)」「どこに」「どのように」の情報が必要になります。

CommonSenseのヘッダーにあたる部位はブログタイトルとその下にあるブログ説明文(他ページではパンくずリスト)だけなので、縦幅が非常に狭く、画像によっては思うような表示にはならないかもしれません。仮にその画像が「ロゴ」である場合はタイトル部位を差し替えることになり、また全く別の方法を取る必要があります。

画像のファイルが950 × 290ということで、その画像は常に縦横比を維持しなければいけないものなのか、それとも見切れ(一部がカットされて見られなくなること)が生じても問題ないのか、など、実際の画像の様子を見ないことには指南もできませんので、鍵コメントで構いませんので差し支えなければ実際の画像をお見せください。

また、「追加」であることを考慮し、手順が複雑になる可能性が高いので、元々ヘッダー画像の有るデザインへの変更もご一考くださいね。よろしくお願いします。

千菊丸
2019/06/30 (Sun) 15:18

No titleTo Akiraさん

Akiraさん、わざわざ問い合わせに丁寧なご返信を下さり、ありがとうございます。
ヘッダー画像に追加したいのは、この画像です。
https://blog-imgs-128.fc2.com/h/a/j/hajisolomon/2018-1a.jpg
「追加」のやり方がわからないので、ヘッダー画像があるテンプレートを利用しようかと思います。
htmlタグが「変更」の場合、どうすればよいのかがわからないで、差し支えなければ教えていただけないでしょうか?

vanillaice (Akira)
Akira
2019/06/30 (Sun) 18:18

To 千菊丸さん

こんにちは。

変更の場合の基本は既存の画像URLを使用したい画像URLに差し替えるだけです。

あくまでも「基本」であって、千菊丸さんの目的とする表示にするためのCSS調整などが必要になることはあります。
そしてどのテンプレートでも一律同じ作業というわけにはいかず、テンプレートが特定できないと作業工程を伝えることもできません。
なので改めて選択したテンプレートへの質問ということで作者さんに直接お尋ねくださいね。

ヘッダー画像変更の場合は恐らく大抵の作者さんが事前に記事内に方法を記しているのではないかと思います。
(ソース内修正対象箇所の探し方や、画像URLの特定の仕方など)

よろしくお願いします。

千菊丸
2019/07/01 (Mon) 10:44

To Akiraさん

ありがとうございました。
こちらこそよろしくお願いいたします。
ちなみに今使っているテンプレートは、「Sincerely-yours」です。

vanillaice (Akira)
Akira
2019/07/01 (Mon) 23:52

To 千菊丸さん

こんばんは。

Sincerely-yoursは「ヘッダー背景」ではありませんのでURLを差し替えるだけというわけにはいきません。
ブログタイトルと説明文周りを囲うように複数の画像で成り立っています。
このテンプレートのヘッダーに背景を「追加」するのか、それとも元々入っている青い小花の画像を削除したいのか、ご希望がはっきりわかりませんが、いずれにしても行う作業はやはり「追加」です。

お伝えしたかったのは、ご自身が最終的に目指す「ヘッダーの見た目」に元から最も近い形のテンプレートを選択し(ヘッダー背景が元々入っている、ヘッダーの横幅や縦幅の様子など)、その上で「URLの差し替え」というのが最も簡単な方法です。

また、私が提供している全文表示タイプテンプレートではこの「ヘッダー背景変更に適している」ものがあまり無いんですね。要約タイプの方はいろいろあるんですが。最近のですとTarthぐらいじゃないかと思います。
https://vanillaice000.blog.fc2.com/blog-entry-905.html

他製作者さんのテンプレートでヘッダー画像変更に適したものがいくつかありますので、そちらへの切り替えもご検討くださいね。
私のものからお選びになる場合は各テンプレートの仕様を確認されまして、それぞれ「ヘッダー画像変更」のガイダンスが載っているものについてはすぐに変更ができます。まずそちらを確認されまして、実際の作業を行って頂き、その上で調整が必要と思われましたら 該当テンプレートの専用記事の方へコメントをお願いします。
お手数おかけします。よろしくお願いします。

全文タイプ・要約タイプ別テンプレート記事への案内ページはこちらです ↓
https://vanillaice000.blog.fc2.com/blog-entry-283.html

千菊丸
2019/07/03 (Wed) 21:16

To Akiraさん

Akira様、こんばんは。
先程、「Tarth」でヘッダー画像を変更できました。
わたしの質問に親切丁寧にご回答してくださってありがとうございました。
これからもAKIRA様のテンプレートを大切に使わせていただきたいと思います。

vanillaice (Akira)
Akira
2019/07/03 (Wed) 22:41

To 千菊丸さん(重要)

こんばんは。

Tarthにされたんですね。千菊丸さんご希望の画像の場合は反対色に近い組み合わせ(白と赤)なのでテキストが読めるようにする処理も必要で、この件についての解消策はテンプレートを選ばれてからお伝えするつもりでした。
Tarthは元からこの対策もしてありますので今回の場合は最適解だったと思います(笑)

プロフィール画像のぼやけがひどいのでできれば500〜600px四方の正方形に変更されると良いですね。

お疲れ様でした :)

-----
ごめんなさい今気づきました。プラグイン「プロフィール」のhtml構文エラーが原因でサイドメニューがおかしな挙動になっています。

①「ここは管理人〜」
のすぐ前に<b>がありますよね。そこから文末の
②「〜お願いいたします。」
の後ろに</b>があることを確認し、①から②までの文章間に存在する
<b>

</b>
は全て削除してください。こういうことです ↓

<b>
ここは管理人〜<br>
文章<br>
文章<br>
〜お願いいたします。
</b>

開始タグと終了タグの整合性が無いので後続レイアウトが崩れているのでその修正です。
ただし「全文を太字にするつもりならば」が前提です。どうもそういう意図ではなく部分的に太字にしたかったのではないかと思いますが、構文が正しくないため全てが太字になっている状態です。

テンプレートの修正ではなく、個人が所有している「プラグイン」の修正ですから、「プラグインの設定」画面からhtml内容を修正してください。
よろしくお願いします。

千菊丸
2019/07/06 (Sat) 21:50

Akira様へ

プラグインの設定をしましたが、プロフィール欄は直りませんでした。
Akira様のテンプレートを利用されているほかの方からアドバイスをいただきその通りにいたしましたが、それもうまくいきません。

vanillaice (Akira)
Akira
2019/07/06 (Sat) 22:06

To 千菊丸さん

こんばんは。

> プロフィール欄は直りませんでした〜

確認しましたが、修正された様子はありません。もう一度手順をお伝えします。
まず「プラグインの設定」ページへ行き、対象のプラグイン(プロフィール)の「詳細」をクリック。
そして「プラグインの改造」という項目に【HTMLの編集】とありますのでそこをクリック。

html内容が出てきますので、全てコピーしてこのコメント欄へペーストし、内容を見せてください。
(既に内容は把握していますが見せて頂く方が確実です)
鍵つきコメントで構いませんが、私の方で正しく直した後はこのコメント欄にコピペできるよう掲載しますのでそこはご了承ください。
ともかくこの内容を修正しなければテンプレートの動作も直りません。よろしくお願いします。

-
2019/07/06 (Sat) 22:30

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/07 (Sun) 10:12

To 千菊丸さん②

おはようございます。htmlソース確認ありがとうございます。

で、わかりました。私いつも失念してしまうんですが、【プラグインプロフィール】の方に直接文章を書く方と、【個人設定プロフィール】を連携している方とが居て、千菊丸さんは後者です。ですから修正するのはプラグインではなく個人設定の方です。二度手間になってごめんなさいね。

-----
まず以下のリンクをクリックしてご自分の個人設定ページを開いてください。
https://admin.blog.fc2.com/control.php?mode=setting&process=user

ここの「あなたの紹介文」が修正対象です。今現在は以下の内容になっているはずです。

<b>ここは〜です。<b>
<b>二次創作を〜関係ありません。<b>
<b>誹謗中傷〜いたします。<b>
<b>また〜ご遠慮下さい。</b>
初めてこちらに来られた方は必ず<b>About<b>をお読みくださいますよう、お願いいたします。

赤字の部位が構文エラーなので以下のように直してください。

<b>ここは〜です
二次創作を〜関係ありません
誹謗中傷〜いたします。
また〜ご遠慮下さい。</b>
初めてこちらに来られた方は必ず<b>About</b>をお読みくださいますよう、お願いいたします。

-----
「初めてこちらに来られた方は必ず」と「をお読みくださいますよう、お願いいたします。」の文章だけがノーマルで他の部位は太字です。タグの入れ方からするとそうなりますが、意図的かどうかちょっと不明(笑)
見た目を強調したい文章あるいは単語だけを太くするのであれば、その文章を確実に<b>と</b>で挟むようにしてください。

例えば
私は<b>司法書士</b>の試験を<b>去年の夏</b>に受けました。

と書けば
私は司法書士の試験を去年の夏に受けました。

となります。どこを太字にしたいかは私ではわかりませんので、ご自身で作業を行ってください。
くれぐれも、
<b>

</b>
で挟みます。<b>の数と</b>の数は必ず一致していなければいけません。
一度ご自身で修正してみてください。その後ご報告頂ければ確認に参ります。
よろしくお願いします。

千菊丸
2019/07/07 (Sun) 20:50

To Akiraさん

方法を教えて下さってありがとうございました。
修正方法を教えて下さった方法で修正したら、プロフィール欄が直りました。
ありがとうございました。

vanillaice (Akira)
Akira
2019/07/07 (Sun) 21:41

To 千菊丸さん

こんばんは。
安心しました。お疲れ様でした :)

-
2020/03/16 (Mon) 15:15

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/03/16 (Mon) 16:06

To CommonSense通信の件 内緒さん

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

> トップページに保護されない通信出て〜

内緒さんは「SSL化」というのを済ませていらっしゃいますが、この点はご理解頂いてますでしょうか。
内緒さんが長くFC2ブログを運営されていれば恐らく「理解している(自主的にSSLした)」と思いますし、Yahoo!など他ブログから移転されたのであればもしかすると「自動的にSSL化されたので気にしていない」可能性もあります。
この点が不明なので、もし「SSLの意味がわからない」ということでしたらその旨お伝えください。また改めて説明します。

-----
SSL化したサイトでは全てのファイル、内緒さんの場合は主に「画像」になりますけれど、これらを https で始まるアドレスでなければ掲載できないルールです。例えばトップページ1ページ目の「ねずみのGIF画像2点(篝〜で始まる記事タイトル内の画像です)」はアドレスが
http://〜 省略
という形です。これが「保護されない通信」の警告対象になっています。

画像はサーバーによって「http」「https」どちらでも通信できることが多いのですが、調べたところこの2点については「https通信不可」なので、画像をデスクトップなどに一度ダウンロードし(画像をマウス左クリックしながら画面の外へ引っ張る(ドラッグ)すればダウンロードできます)、デスクトップからFC2のアップローダーを利用してアップロードしてください。

アップローダーのリンク ↓
(内緒さんがFC2にログイン状態であれば直接ご自分のアップロード画面を開けます)
https://admin.blog.fc2.com/control.php?mode=control&process=upload

これで新しいアドレスが取得できますので、書き換えを行ってください。
この作業は警告対象になる画像(つまり「http」画像)全てに対して行う必要があります。

で、トップページが全50ページ前後と比較的少なかったので私の方で調べましたところ、画像については上記の2点のみだと思います。
ところが残念なことに記事内に多くの

・デジブック
・フラッシュ

を掲載されていますよね。
デジブックは「警告対象」よりも強い「ブロック対象」です。画像よりも危険度が高いためGoogle Chromeが能動的にブロックを行っていますので機能していません。大変だとは思いますが全て 削除 する必要があります。
ブロック対象の要素はブラウザが既に「ブロック, 表示させない」処置を取っていますので、警告は出ません。なので見つけづらいんですね。警告が出ないからといって放置は厳禁ですから地道に削除しましょう。

フラッシュの方はSSLとは関係ないんですが、以下のページをご参照ください。

参考記事: Flash載せるのもう真剣にマジで辞めませんか
https://vanillaice000.blog.fc2.com/blog-entry-876.html

上記記事はちょっと厳しい言い方で書いているので申し訳ないんですが、「コンピュータに損害を与える〜」という文章のスクリーンショットを掲載しています。残念ながら内緒さんのいくつかのページで該当していますのでこちらも削除された方が良いと思います。でないと閲覧する方がびっくりして「このブログは危険」と判断されかねません。
今回のご質問は「セキュリティ」に関するものですから、フラッシュについてはホントに長らく親しんでいらしたでしょうから無念な思いは理解できますが、削除 という方向でご検討ください。

わかりやすい日本語サイトさんがありましたので参考記事としてリンク掲載しておきますね。
参考記事: AdobeのFlash終了に向けた正しい撤収方法と代替案 WebMedia様
https://www.itra.co.jp/webmedia/flash_finish.html

説明にわかりづらい点があればご指摘くださいね。よろしくおねがいします。

たなばた
2020/03/16 (Mon) 17:51

akiraさまへ
有難うございます。「SSL化」は理解していません。有効にしただけです。教えてください。
何事も解らずにブログをやっていてご指摘頂き遣る資格が有りませんね。
80代の高齢者には理解できない。少し冷静に一つづつやってみます。
お忙しい所お世話をおかけして申し訳ありません。宜しくお願いします。

vanillaice (Akira)
Akira
2020/03/16 (Mon) 19:59

To たなばたさん

了解しました。その前に確認なんですが、今回は公開コメントで大丈夫でしょうか。
公開コメントの場合は記事タイトルやアドレス(URL)を伏せ字なしで記載します。込み入った内容の場合には公開にされた方がより理解しやすいと思いますので推奨しますが、公開に問題がある場合は削除しますのでお申し出ください。

-----
「SSL」というのは 安全な通信 のことです。「SSL化」は 安全な通信方式に変更する ということになります。

http --- 安全でない通信方式, 暗号化されていないので第三者による改ざんや傍受が容易
https --- 安全な通信方式, 暗号化されているので改ざん・傍受に対抗できる

そういうわけで、httpsのサイト(たなばたさんのブログもそうです)では外部サイトへのリンク以外の全てのファイル通信を「https」で行わなければいけません。
「https」で通信できるかどうかは サーバーに拠ります ので、https通信不可能なサーバーに置いてある画像などは 利用できません。今回たなばたさんはhttpでしか通信できないサーバー(http://www.kawa.ne.jp/)上にある画像を利用してしまったため「保護されない通信」という警告が出てしまったわけですね。
保護されない = 暗号化されない = 安全ではない = httpsではない
という意味です。

本件を解消するには httpの画像を排除する 以外方法はありません。該当しているのは
https://tanabata2010.blog.fc2.com/blog-entry-432.html
上記ページの記事末尾に掲載している2つのネズミのGIF画像(動く画像)です。この2画像を先にお伝えした方法でFC2ブログのサーバーにアップロードし直し、アドレスを書き換えれば完了です。
FC2ブログサーバーはSSL対応済ですから、今後も同じようなことがあれば対象画像を 直リンクせずにFC2ブログサーバーにアップロードしてから使う という方法で解消できます。

-----
「直リンク」というのは誰かが所有している画像を、ダウンロードせずに利用することを指します。つまり画像はたなばたさんに利用許可が与えられているFC2ブログのサーバーにあるのではなく、第三者のサーバーにある状態で表示させています。もちろんたなばたさんが借りているサーバーかもしれませんし、そこはわかりませんが少なくとも「FC2ブログと関係のないサーバー」であることに変わりはないので「直リンク」と言えますね。
どこかのサイトからコピーで拾ってきて掲載した場合にも「直リンク」が確定します。他者サイトからコピーで画像などを持ってくるという行為は好ましくありません(諍いに発展する可能性もあります)ので、今後は画像などは必ずダウンロードしてFC2へアップロードしてから利用するようにされると良いですね。

-----
たなばたさんが行うべき作業

1. ネズミの画像のアドレスを書き換える(FC2ブログサーバーにアップロードしてURLを取得する)
2. デジブックを全て削除
3. フラッシュを全て削除

数字は優先順位でもあります。セキュリティを大切に思うのならば上記3つの作業が必須です。2のデジブックと3のフラッシュは過去記事に遡って修正の必要があります。
1の画像修正と2のデジブック削除は必須です。

3のフラッシュについてはたなばたさんがどこまで気にかけるのかにもよります。
例えば仲間うちだけで楽しめれば良い、という方へ「過去記事を修正しなさい」と言ってもお辛いでしょうからお任せします。
ただフラッシュは今年いっぱいで完全終了で今後削除必須項目になりますので今からぼちぼち行った方が良いのではないかな、と思います。

たなばた
2020/03/16 (Mon) 21:16

akira様
今晩は~  解らないばあばに本当にご親切に教えてくださり有難うございます。ネズミのページ削除しました。
フラッシュは少し削除しました。徐々に削除してみます。
残り少ない人生 ブログ交流を楽しみ やり遂げたいと思っています。一瞬辞めようかと頭をよぎりましたが・・・
お陰様で文字が消え鍵がつきました。(^-^)ホットしました!!
勇気を出してお聞きして良かったです。 此れからもどうぞ宜しくお願いいます。
今夜は良く眠れます  お休みなさいませ  シングルばーばより

たなばた
2020/03/22 (Sun) 20:54

akira様
今晩は~  教えていただいた作業 ねずみ画像・デジブック・削除
フラッシュも削除しました。何回か確認しましたが・・・
編集画面でも鍵がかかっています。大分時間がかかっていまい遅くなって申し訳ありません。
本当にご親切に有難うございました。お借りします。
宜しくお願いいたします。

vanillaice (Akira)
Akira
2020/03/23 (Mon) 00:24

To たなばたさん

こんばんは。
とっても頑張られたんですね。時代の流れとはいえ大変な作業でしたよね。
努力の甲斐あって誰もが安心して拝見できるページになったのではないかな、と思います。
ご報告ありがとうございます。お疲れ様でした :)

神代
2021/10/18 (Mon) 16:05

レイアウトの崩れでしょうか?

はじめまして、こんにちは。こちらのテンプレートを利用させていただいている者です。
気づいたら、グローバルナビの下の余白が狭くなっていて、
スマホで見ると、記事本文の横幅が狭くなっています。
テンプレートをCommonSenseデフォルトに戻したりしましたが、直りませんでした。
対処法を教えて下さい。

あとは、記述ミスがあるのかと思い、ブラウザの検証ツールも確認しました。
英語でProcesser.phpがFailedされたとか、画像のプリロードがどうたらと書かれていましたが、これはどういう意味のエラーか分かりますか?
放置しても大丈夫でしょうか?
ご回答よろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2021/10/18 (Mon) 23:46

To 神代さん

こんばんは ('0')/

> グローバルナビの下の余白が狭くなっていて、スマホで見ると、記事本文の横幅が狭くなっています〜
> Processer.phpがFailedされたとか〜

これは全ページ共通で起きている現象でしょうか。数ページ拝見しましたがこの症状を確認できませんでした。
(ただし、amazon-adsystemはタイムアウトエラーになりますのでご確認をお願いします)

特定のページのみで見受けられる場合はまず間違いなく記事内で利用したhtmlに原因がありますが、現時点でどのページか不明なのでお返事を待ちたいと思います。

・特定のページであるならばそのURL
・可能であればスクリーンショットの掲載

でご説明頂けると大変助かります。よろしくお願いします。

神代
2021/10/19 (Tue) 13:24

Akiraさん、こんにちは。お返事ありがとうございます。

すみません、ブラウザのアドオンが悪さしてたみたいです…。オフにしたらレイアウトは直りました。
お手数をおかけしました。

ただ、amazon-adsystemのタイムアウトエラーが何なのか分かりませんでした。
検証ツールでもそういった表示はありませんでしたが、記述ミスでしょうか?

あと、画像ファイルのプレロードがどうのというエラー?がありますが、これは放置しても大丈夫でしょうか?

vanillaice (Akira)
vanillaice (Akira)
2021/10/19 (Tue) 15:59

To 神代さん

こんにちは ('0')/

> amazon-adsystemのタイムアウトエラーが何なのか分かりません〜

amazon関連の広告用JSです(楽天とセットのもの)。現在は解消されているようなのでとりあえず放置で構いません。
(昨日はローディングがなかなか完了せず、結局タイムアウト、というのを繰り返していました)

> 画像ファイルのプレロードがどうのというエラー?〜

現時点でエラーは無いので、警告ですね、こちらを説明すると

【Avoid using document.write().】
JSのdocument.writeは近いうちに動作しなくなりますので(ブラウザの指針です)、今のうちに排除してください。対象はプラグイン「月間アーカイブ」です。

【The resource xxx was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.】
これは「画像が意図的に「preload」されているけども早い段階では利用されていないので確認してね」という意味です。

画像のpreloadは「有料アカウント所有者」、または「無料アカウント所有者で記事下広告を表示させているユーザー」に対しFC2が自動的に適用しており、ページ内全ての画像が対象です(ただしFC2サーバー内の画像に限る)。
preloadはダウンロードを最優先にする、という指定ですが、全ての画像がabove the fold(ファーストビュー)内にあるわけではないので、「ページロード後すぐに参照したけど結局使わなかったよ」という伝達と「本当にpreloadの必要があるのか確認を」と促すものです。特に問題ありません。

神代
2021/10/19 (Tue) 18:48

ご丁寧にありがとうございます。

昨日、怪しいHTMLタグを変更したので、それでタイムアウトが直ったのかもですね。

【Avoid using document.write().】っていうのは見つからなかったのですが、該当プラグインを削除しました。
デザインが気に入ってたのですが、かなり古いプラグインのようでした。もう使えないのですね…。

あと、画像のプレロードの件です。
私のブログは無料アカウントで記事下に広告を表示させてないのですが、それでも問題ないのでしょうか?

それと、FC2のアクセス解析もエラー(400 Bad Request)を起こしているようですが、こちらは大丈夫でしょうか?
何度も質問すみません、よろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2021/10/19 (Tue) 21:21

To 神代さん

> かなり古いプラグインのようでした。もう使えないのですね〜

そうですね。提供者さんご本人がdocument.writeメソッドinnerHTMLなどに修正して再提供してくれない限りは自力で修正するか使用を停止するしかありません。

> 無料アカウントで記事下に広告を表示させてないのですが〜

無料アカウントの場合は画像のURLに
//blog-imgs-xxx-origin.fc2.com
と、-originの文字列が付きます。現在神代さんのブログではこの-origin付きのアドレスと-origin無しのアドレスが混在しており、考えられるのは

・有料から無料に切り替えた
・広告表示から非表示に切り替えた

一度も有料アカウント契約をしていない、という場合にはブログ開設後初期状態は広告表示状態で、その後ユーザー任意で非表示化しているはずなので、表示していた間のキャッシュがまだ切れていないと考えられます。-originのついたURLがpreloadされることはありません。
いずれ全て -origin付きになりますので特に気にする必要はないですよ。

> 400 Bad Request〜

こちらについては私の方で確認できません(アクセス解析のJSコード自体にも問題はありません)ので、ブラウザのキャッシュをクリアして再度お試し頂き、それでも改善が見られない場合にはbad requestの表記を確認できるスクリーンショットを添付した上で再度お知らせくださいね。よろしくお願いします :)

神代
2021/10/20 (Wed) 12:27

Akiraさん、こんにちは。

FC2ブログの共有プラグインって古いのが多いのですよね。
他に似たようなプラグインがあるかなぁと思って探してみたのですが、見つからず…。
自分で修正する技術も無いですので、諦めて公式プラグインを使います。

そうです!無料アカウント契約で、広告を非表示に切り替えました。とりあえず問題はないのですね。安心しました。
警告はブラウザキャッシュが原因ですかね。

アクセス解析の400 Bad Requestですが、キャッシュを削除しても表示されました。
もしかしたら、解析時に自分のIPアドレスを除外しているのが原因なのかなぁ?と思いました。
他の訪問者の解析はできているようですので、問題ない気もします。

vanillaice (Akira)
vanillaice (Akira)
2021/10/20 (Wed) 15:40

To 神代さん

こんにちは ('0')/

> FC2ブログの共有プラグインって古いのが多い〜

そうですね。テンプレートの場合はhtml内にdocument.writeメソッドがある場合にダウンロードページ上で警告が表示されるようになっています(FC2ブログ運営が表示しています)が、プラグインはそういった対処はしていないようです。どこかで一度整理してもらえると良いなぁ、と思っています (´・ω・`)

> 警告はブラウザキャッシュが原因ですかね〜

そういうことではないです。FC2ブログ側のファイルキャッシュの方ですね。無料会員で広告を表示させている場合はCDNというシステムの許可がされますが、広告を非表示化した時点でその利用権を失います。
CDNというのは、今回は画像なので画像ファイルを例にすると、まず、ファイルのアップロード先のメインサーバーがありますよね。画像を表示させるにはそのメインサーバーにアクセスするのが通常のルートですが、CDNというのはオリジナルファイルのコピーを別のサーバーに保管し、各ユーザーにとって(主に)地理的に最も都合の良い(近い)サーバーにアクセスしてコピーを取得することで表示を高速化させる、という方法です。つまりオリジナルサーバーまでアクセスしてオリジナルファイルを取りに行く必要がない、ということですね。
そしてそのコピーファイルが残っている、ということなのでブラウザのキャッシュとは関係ありません。また、「対処しなさい、改善しなさい」という意味の警告ではありませんので、出ているからと言って気にする必要もありません :)

> アクセス解析の400 Bad Requestですが、キャッシュを削除しても表示されました。〜

もしかしてこれはテンプレート表示上ではなく、アクセス解析ページのことなんでしょうか。だとするとテンプレートでは管理できない(コントロールできない)別のページです。問題があれば直接FC2ブログ運営に報告して頂くしかありません。
テンプレートでコントロールできるのは「記事を公開するためのページ」のみですから、FC2の別サービスなどの場合は直接そちらへお尋ねくださいね。よろしくお願いします。

神代
2021/10/20 (Wed) 19:05

こんばんは~。

document.writeがあるプラグインも、テンプレートと同様に警告を出してほしいですね。
ここで質問しなければ、いつまでも知らずにプラグインを設置していた可能性があります…(汗)

FC2ブログの設定に、画像表示の高速化っていう項目がありましたが、そういう意味だったのですね。分かりました。
この設定を有効化すると、どれだけ速くなるのですかね…。

アクセス解析のエラーについては、FC2ブログ運営に問い合わせてみます。
ありがとうございました。