Empty-street - FC2ブログテンプレート

投稿 2017年06月28日
106
テンプレート
HTML5CSS3RWD
Empty-streetテンプレート

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

最終更新 2018.12.13
  • Font AwesomeのCSSバージョンを5.6.0にアップグレード
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年夏でサービス終了のため)

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

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

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

名称 Empty-street
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大930px
サイド --- 300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり
Font Awesome導入 あり(v5.6.0 CSS)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
要約レイアウトページ --- 1カラム
その他ページ --- 1 or 2カラム
(デバイス幅依存)
1 or 2カラム
(デバイス幅依存)
1 or 2カラム
(デバイス幅依存)
サイドメニュー --- 右 or 下
(デバイス幅依存)
サイドメニュー --- 下 サイドメニュー --- 下
更新履歴 2018.7.30

特定条件下でレイアウトが崩れる問題を修正しました。

更新履歴 2018.1.26

メンテナンスを行いました。
主な変更点は以下の通りです。

  • 画像遅延読み込みをのJSを変更しました(デフォルトではグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップ及びパン屑リストを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

更新履歴 2017.7.23

No image画像のリンク切れを修正しました。申し訳ございません。

Empty-streetのNo image画像リンク切れ修正のお知らせ - テンプレ不具合・修正など

またしてもワタクシのポカでございます (*_ _)Empty-street - テンプレート名称 Empty-street カラム数 2 プラグイン対応 ○ (右サイドメニュー) レスポンシブ対応 ○ サイドメニュー デフォルト 右 記事幅 可変 最大930px サイドバー幅 固定 300px 任意個人設定 レスポンシブ利用 = スマホ版非表示設定 SNSシェア...

本ページの内容は2018年12月12日メンテナンス以降のバージョンが対象です。

FC2はSSL化する気が無いんでしょうかね (´・ω・`)
このタイミングで「JPドメインを2年間999円!」とかやってんの。非SSLのまま。
うーん… (;`ー´)

* 現在は独自ドメインSSL対応済みです。

えんぷてぃ すとりーと
承認されました。ありがとうございます。
今回は試験的な意味も含めて製作しました。
何を試験したか = 各ベンダーのCSS実装状況やグリッチあるいは誤解釈など。
もうねー、Microsoftブラウザ(Edge, IE11)が酷い (´-ε-`;)
あいつらがいなけりゃもっと楽なんだよ!!!という心の叫び。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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: 50px; に対し緑部分 rightleft に変更。
以上2手順です。

スライダーについて

About parallax scrolling in slider

パソコンではパララックスになっていますが、この演出に不可欠な background-attachment というCSSプロパティがスマートフォンで全滅です。
現存機種でこれを正しく解釈できるデバイスはありませんので、スマートフォン及びタブレットではパララックスを排除してあります。この点をご了承くださいね。

単なる固定背景ではなくパララックスですので、背景画像はスクロール差分を設ける必要があります。
なので思うような上下位置合わせにならないかもしれませんが、デフォルトの状態がベストですので位置合わせのご相談についてはごめんなさいということで (o'ω')ノ

ナビゲーションについて

Important thing to be careful when adding links to navigation

本作ではトップページにサイドメニューがありませんので、移動に必要と思われる カテゴリ一覧, 最新コメント一覧 をナビゲーションに登録しておきました。
先日以下のような記事を書きましたので、その記事をご覧になって導入されている方向けに同じエフェクト、同じ装飾にしておきました。

注: Google Chromeだと閉じる際のアクションが「無い」ように見えますが、実際は無いわけでなくイージングよりも先にz-indexが戻ってしまうという挙動です。
開く時は綺麗なモーションなんですけどね (´・ω・`)
これはChromeのz-index + transition の独自バグです。
その他ブラウザ、FirefoxやSafari等では閉じる際も綺麗な戻り方をします。IEやEdgeでさえ(笑)
Chromeというか、Chromium。なのでVivaldiとかOpera, Braveなども同じです。

本不具合はGoogleの修正が入りました。

ナビゲーションにメールフォームを追加する方法 - カスタマイズ

こちら私が製作した最近のテンプレに限っての内容です。 汎用的に使える面もありますが、他製作者様テンプレートご利用の方はご自身の判断でお願いします(すみません) 最近は予備リンクとして About me あるいは About をナビゲーション内入れていますが、予備ですので空リンクです。 サンプル(Dark-Divine) 赤く囲った部分ですね。 お好きな用途で使って頂くためのものですので、誘導したいページがある方は...

ナビゲーション内容の追加やリンクテキストの日本語置き換えをされます方は 各リンク要素が下の行へ繰り越さないよう留意してください。
レスポンシブデザインですのでパソコンでの作業を一定の幅だけで行わず、マウスでブラウザ幅を拡大・縮小しながら見た目を確認してくださいね。文字数が多い、リンク数が多い、などが原因で内容が下に繰り越してしまう場合には

navi breakpoint

で検索されますとhtml, CSS各ソース内に合計2箇所ヒットします。それぞれの

(max-width: 810px)

緑の部分 810 を 大きな数字に変更 してください。この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。
これは忘れずに行ってください。でないとサイト内検索が左隣のリンクと重なりまともに使えなくなります。

2017.8.5 追記 li要素を追加する場合

管理画面上、つまりブラウザ上でカスタマイズをされます方は、li要素追加時に 前後のli要素と文頭の位置を合わせようとしない ようご注意ください。
ブラウザ上で tabキーspaceキー を利用してソースの見た目を整形してしまうと、その空白は描画後の見た目に影響します。
li要素の文頭揃えは行わない を念頭に作業をお願いします。
html専用エディターを利用する方はエディターの仕様に則ってください。

間違い例)

<ul>
    <li><a href="遷移先アドレス">テキスト1</a>
    <li><a href="遷移先アドレス">追加1</a>
    <li><a href="遷移先アドレス">追加2</a>
    <li><a href="遷移先アドレス">テキスト2</a>
</ul>

正しい例)

<ul>
    <li><a href="遷移先アドレス">テキスト1</a>
<li><a href="遷移先アドレス">追加1</a>
<li><a href="遷移先アドレス">追加2</a>
    <li><a href="遷移先アドレス">テキスト2</a>
</ul>

ページ送りサムネイルについて

About thumbnails in pager

個別記事ページ送り(記事下の更新順及びブラウザ左右のカテゴリ)のサムネイル画像を表示するにはブログ個人設定で OGP設定を有効化 してください。
メタタグの設定

ドミナントカラー

Dominant colors

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

rgb(145,134,116) 基本リンク色, ナビゲーション背景色 など

… って、一個しかないし((((笑)

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

Cautions before asking for something.

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

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

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

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

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

106 COMMENTS

There are no comments yet.

Bitou  

グローバル・ナビゲーションについてのご質問

初めまして。
「Empty-street」を使用させていただいているBItouと申します。
表題の件について1点ご質問させていただきたいと思いコメント欄から失礼します。

カスタマイズ初心者ながら、グローバル・ナビのリンク先を変更したくて
次のようにHTMLを変更したところ、ナビ上の「カテゴリ」の右側に大きな余白が出来てしまいました。
(スタイルシートは変更していません。)

 <li><a href="<%url>">Home</a>
 <li><label for="category-modal-trigger" id="category-modal-trigger-label">カテゴリ</label>
 <li><a href="<%url>blog-category-1.html">店舗案内</a>
 <li><a href="<%url>blog-category-25.html">通信販売</a>
 <li><a href="<%url>blog-category-28.html">買取り</a>
<!-- <li class="pc-hide"><a href="<%url>?sp">Mobile</a> 注)スマホ版誘導ボタン必要な方コメント削除 -->
<li class="sp-hide"><a href="<%url>?xml" target="_blank">RSS</a>
<li class="expand-form">
<form id="search-form" action="./" method="get">
<input id="search-text" type="text" name="q" placeholder="キーワードを入力してください" value="">
<input id="search-submit" type="submit">
<span id="search-btn">検索</span>

初心者なりに色々と試してみたのですが修正ができません。
お手すきの時で結構ですので、どこを修正すれば良いか、
教えていただけきたいのですが・・・

お手数おかけいたしますがどうぞよろしくお願いいたします。

2017/08/02 (Wed) 02:07

Akira  

To Bitouさん

お返事大変遅くなりました (*_ _)

> ナビ上の「カテゴリ」の右側に大きな余白が出来てしまいました〜

これはですね、実際はそういうことではありません。

X カテゴリの右横に空白
✔ 追加要素のテキストリンクに空白ができて縦幅が大きくなっている

後者が実際で、その影響をカテゴリのリンクが受けている状態です。
推測するに

● カスタマイズをwebページ上で行った(html専用エディターに内容を移して修正を行っていない。管理画面のまま行った。)
ソース内で<li>の行(各li要素)の文頭を揃えるために半角スペースを利用した

後者に該当しませんでしょうか。
htmlソースはインデントなどが用いられていますが、それは「半角スペース」とは全く別のものです。
ソース内でBitouさんがspaceキーを利用して文頭の調節を行ったのであれば、それはインデントではなく「空白の挿入」になります。
そしてナビゲーションの縦幅も狂いが生じ、正しい状態よりも大きくなっています。
デフォルト状態のEmpty-streetの、ナビゲーションとスライダーとの距離は現在のBitouさんのものよりも狭いはずですので比較してみてくださいね。

上記に該当するのであれば修正方法は、既にカスタマイズされていますので再DLが困難ということであれば、
追加したリンクを一度削除してください。
そしてあらためて、追加したい場所の前要素(今回の場合は「カテゴリ」)の後ろで一度改段落(Enter/ Returnキー押下)し、前要素(カテゴリ)と次要素(RSS)と文頭を揃えようとはせずにすぐに内容を書きます。
ソースの見た目がガクガクとした感じにはなりますが、揃えたい場合にはhtml専用エディターを利用してください。
管理画面での半角スペース利用による文頭揃えは厳禁です。

スクショ ↓

現在の状態(推測)
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture9287493th.jpg

正しい状態
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture92847923th.jpg

li要素というのは終了タグ</li>を書いてしまうと横並びにした時に隙間ができてしまいます。
隙間ができると計算が合わなくなりますので、終了タグを「書かない」方法を取っています(li要素終了タグの省略は文法的に許可されています)
終了タグはブラウザが自動補完しますが、その位置というのは次のli要素の「直前」ですので、文頭揃えの空白スペースが入っている場合、その空白は自身の「前」にある要素の「後ろ」にくっつくことになります。
わかりますかね ^^;
「カテゴリの右側が広くなっちゃった」の原因は、追加したli要素の文頭に入れた(つもりの)空白が、実際には前のli要素の文末にくっついている、ということです。
li要素の横並びはちょっと特殊ですので、今後は注意書きをしようと思います。
その点私が不親切でした。申し訳ないです。

上記に心当たりが無い、という場合は再度検証しますのでその旨お伝えください。
よろしくお願いします。

2017/08/03 (Thu) 22:26

Bitou  

修正のご報告

Akiraさま
丁寧な解説をいただきありがとうございます!
早速、指示通りに修正したところ、正常に表示されるようになりました!!
ナビゲーションの縦幅も気になっていたのですが、同一の原因だったんですね…。

>htmlソースはインデントなどが用いられていますが、それは「半角スペース」とは全く別のもの

こんなことも知らなかった初心者の質問にお時間を割いていただいてホント恐縮です(^-^;

おかげさまですごくスッキリしました。
ありがとうございました!
Bitou

2017/08/04 (Fri) 21:00

Akira  

To Bitouさん (修正完了のご報告)

いえいえ。私が不親切でした。
終了タグなしのli要素の扱いを書いておけば防げたことですので私が不親切でした。
お手間取らせてごめんなさいね。
修正できたということで安心しました。
お疲れ様でした

2017/08/05 (Sat) 17:29

Akira  

To 足達さん(移動先)

http://vanillaice000.blog.fc2.com/blog-entry-570.html#comment4037

> 記事ヘッダー部「comment 0」を消去したい件〜

Ctrl+F(Windows)/ Command+F(Mac)キー検索で
<div class="entry-header-content-box" id="entry-comment">
を見つけ、スクリーンショットと照らしながら該当部位を削除してください。

スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/captureeditor98ywedth.jpg

よろしくお願いします。

2017/09/03 (Sun) 15:16

足達  

場所が・・・

何度も申し訳ないです。
これはスタイルシートで治しますか?
なんだか場所がどうしても分かりません(涙)
初心者で申し訳ないです。

2017/09/03 (Sun) 17:38

Akira  

To 足達さん

管理画面はおわかりですよね。
このページから飛ぶのであれば上部にあるナビゲーションメニュの「LOG IN」を押してください。
今これから押す場合には
右クリック → 新しいタブで開く
を選択して開きます。
これやらないとこのページが切り替わってしまいますので注意。

ご自分の管理画面に行きましたら、左側にある緑色の見出し「設定」の中に「テンプレートの設定」という項目がありますので、そちらをクリック。

スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capturempage9i3th.jpg

今回操作するのは「html」で、「上段」にあるものがそれです。CSSが「スタイルシート」で、「下段」にあります。
このページを開いた上で、恐らくWindowsパソコンだと思いますので
Controlキーを押したままFキーを押してください。
するとブラウザによって場所は違いますが、大抵は検索バー付近に「ページ内文字列検索」のためのバーが出てきます。
そこへ

<div class="entry-header-content-box" id="entry-comment">

と入れると(コピペでどうぞ)、該当箇所まで導いてくれます。
この「ページ内検索」を利用しないと、htmlもCSSも内容が長大ですのでとてもじゃないが探せません。

という説明で良かったかしら ^^;
わかりづらければお手数ですがまたその旨お申し出くださいね。
よろしくお願いします。

---------

ここから余談ですので修正は任意でお願いします。

① プロフィールの電話番号の位置ズレ
② プロフィール画像未設定
② HPへの誘導リンク

①ですが、プロフィール設定画面で、住所と電話番号の間にスペースを設けることで調整しようとした… のかな?
スペースというのは絶対的な調整はできませんので、住所の後ろで改行された方が良いと思います。
そして電話番号は半角数字で ^^;

② プロィール画像が設定されていませんので、記事下の「著作者」の部分(posted by)が No image になっています。
せっかくの商用ですので是非プロフィール画像を設定して頂きたいところです。
屋号のロゴでも良いですし、代表者の顔写真でも、紋でも良いと思います。
正方形でロゴなど作成しておくと汎用的に使えますのでおすすめです。

③ あとは公式ページをお持ちですので、そちらへの誘導のために相互リンクを設けると良いですね。
ナビゲーション内の「About」を「公式HP」などにテキスト書き換えし、リンクを設ける。
そしてHP側にも「ブログ」への誘導リンクを入れておかれると良いと思います。
Aboutを書き換える際には target="_blank" の指定もお忘れなく。

<li><a href="ここにHPアドレス" target="_blank">公式HP</a>

注)予備リンク
で検索されますと該当箇所が出てきます。

2017/09/03 (Sun) 17:55

足達  

ご丁寧に。

Akiraさん、ご丁寧にありがとうございます。
今日は酔っちゃったので明日頑張って治してみます。
他にもいろいろとアドバイス嬉しいです。
些細なことにも時間がかかり、ダメな私ですが、こうして丁寧に教えてもらえて本当に助かります。
ありがとうございます。

2017/09/03 (Sun) 22:05

Akira  

To 足達さん

大変申し訳ございません。
ご利用のテンプレートって、Empty-streetじゃなくてClassicaですよね?
わー!間違えちゃった!ごめんなさい (*_ _)
全部私の勘違いのせいです。
テンプレートが違うのだから見つかるはずもありません。
ホントにごめんなさい(汗)

再三で申し訳ないのですが、該当記事へ移動をお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-561.html

2017/09/03 (Sun) 22:13

福長  

slider

Akiraさま
sliderに関して3つ質問があります。
1.動き出すのと止まるのはどのタイミング(動作)でされるのでしょうか? ずーと動いている時もあれば、止まっている時があるように感じます。
2.CSSを見てはいるのですが、どうやって動いているのか理解できなくて、画像が切り替わる時間とかは、変えられるのでしょうか? javaを使って同じようなことをしたことはあるのですが。
3.sliderに表示される画像は、記事の画像の上の方を切り出しているように思うのですが、この切り出し位置は指定できるものなのでしょうか、それとも固定のものなのでしょうか?
どうしても画像の中心あたりを切り出さないと、よくわからない画像になってしまうので。

いろいろ質問させていただきましたが、よろしくお願いいたします。

2017/11/27 (Mon) 10:03

Akira  

To 福長さん

こんにちは (●'0'●)/

1 > ずーと動いている時もあれば、止まっている時があるように感じます〜

・ウィンドウが非アクティブ状態のとき
・マウスが上に乗っているとき
は動きを止めます。
非アクティブの時は動かしてもメモリ食うだけで無駄ですし、マウスオーバーの時にはクリックなどが行われる可能性がありますので、画像が推移しては都合が悪い、という判断です。

2 > 画像が切り替わる時間とかは、変えられるのでしょうか?〜

Ctrl+F(Windows)/ Command+F(Mac)キー検索
slideshowSpeed:3500
が表示秒数(ミリ秒指定)です。
animationSpeed:1000
が切り替えに要する時間(ミリ秒指定)ですので、各々都合の良い数値に変更してください。

3 > この切り出し位置は指定できるものなのでしょうか〜

「切り出す」というよりも「窓を造る」と捉えるとわかりやすいと思います。
通常の全面背景(固定含む)というのは表示範囲を指定し、その範囲全面に画像を配しますが、パララックスで用いる background-attachment というプロパティはブラウザ画面を範囲対象とします。
ブラウザ全体に背景が敷いてあり、その上(重なり上位)にテンプレートレイアウトが乗っている、という感じですかね。
窓を設けることでその窓の部分だけ下敷きの画像が見える、という仕組みです。
ですから「切り出し」という感覚ではないんです。

固定背景はスクロール量が合致していない場合や、左右上下いずれかの寸が足りていない場合はスクロール中のどこかで途切れが生じてしまいます。
パララックスでは特にスクロール差分をわざと生じさせ、少しづつ上に移動させていますので途切れの可能性が高くなります。
このページの本文中の

思うような上下位置合わせにならないかもしれませんが、デフォルトの状態がベストですので位置合わせのご相談についてはごめんなさい

という但し書きは仕組みによるものです。
パララックスで「画像表示位置」を重要視されるのであれば、窓を大きくする以外にありません。
サンプルとしてジプシー・ラリさんのサイトをご紹介します。

https://gypsie-raleigh.myshopify.com/

パララックスを利用していますが、イラストの見切れが最小限になるように窓を大きく設定しています(全画面ヘッダー)
こちらのパララックスはEmpty-streetとは異なる手法で表現していますが、特徴については同じです。

Empty-streetのスライダー縦幅は580pxがデフォルトですが、福長さんご自身のカスタマイズで380pxにされていますよね。
縦幅が短ければ縦表示範囲が狭くなるわけですから、表示位置が気になるのであればデフォルト値に戻されることをおすすめします。

2017/11/27 (Mon) 16:24

福長  

slider

Akiraさま
迅速かつご丁寧な説明ありがとうございます。
380pxに変えたのは、画面がsliderでおおわれてしまい、記事が見えなくなっていたので、記事が見えるぐらいが良いかと思って、小さくしてみました。ご説明は理解しました、但し書きがあったのには気が付いたのですが、思わず聞いてしまいました。
実際にはOut-of-styleを利用させてもらおうと思っていて、Empty-streetもいいかな~と思いこちらも試していました。現在Out-of-styleの変更版をテンプレートに設定しました。
ホームページ(http://newfarmerschool.org/)とブログと両方で運用しようとしていて、Akiraさんのテンプレートがどれよりも素晴らしかったので、いろいろなものを試していました。
http://fukunaganana.html.xdomain.jp/も作った(と言っても無料のテンプレート改造しただけなおですが)のですが、こちらがEmpty-streetに近かったので、Empty-streetを試そうとしていました。
なんせHTMLに比べて膨大なCSSなので私ではとても理解が及びません。HTMLも十分には理解できませんが。

大変ありがとうございました。また何かあれば質問させてください。

2017/11/28 (Tue) 00:08

Akira  

To 福長さん

了解です。ご期待に添えずごめんなさいね。
お疲れ様でした

2017/11/28 (Tue) 15:00

Meane  

スライダー削除について

Akira様

《Empty-street》を利用させて頂いておりますMeaneと申します。
以前、ナビゲーションリンクの件で《Southerly》と《Empty-street》どちらが適しているか
質問させていただいた者です。
その節はご丁寧にありがとうございました(・∀・)

今回はトップページのスライダーの件で教えて頂きたいことがあります。
トップページのスライダーを停止して
トップ用の画像を固定にしたいのですが
《スライダー不要の方ここまで削除 1/3》の1/3〜3/3の3箇所を削除したところ
トップが真っ白になってしまい、元に戻した状態です。

どのようにカスタマイズしたらいいのか教えていただけますでしょうか。
(トップ画にかかるグラデーションはとても気に入ってるのでこれも残したいところです...)

Akiraさんがお手すきの時で構いませんのでよろしくお願いいたします。

2018/01/10 (Wed) 23:49

Akira  

To Meaneさん

こんばんは (●'0'●)/

> 3箇所を削除したところトップが真っ白になってしまい〜

正しい箇所を正しく削除して頂ければhtml要素自体が無くなりますのでブログタイトル下にグリッドが並んでレイアウトの崩れなどは無いはずなのですが、白い空間ができてしまうということでしょうか?
ちょっと「トップが真っ白」の状況がよくわからないです。ごめんなさい。

で、
①スライダーを削除してスライダーが有った箇所に固定画像を入れるという意味でしょうか。
それとも
②スライダーの画像を新着記事から引っ張るのではなく固定にしたいということでしょうか。

スライダー無し1枚固定画でパララックスを作成するには大幅なhtml, CSSの書き直しが必要ですので、こちらについては申し訳ありませんがお受けできません。
ごめんなさいね。

スライダーを流用して数枚の固定に取り替えるだけという意味なのかしら。
察しが悪くてすみません (´・ェ・`)
こちらお返事待ちにさせてくださいね。よろしくお願いします。

2018/01/11 (Thu) 02:07

Meane  

お返事遅くなりました

Akira様

深夜にもかかわらず、早々のお返事ありがとうございました。
説明不足で申し訳ありません〜〜(/ω\)

トップ画面がすべて白くなるのではなく、スライダーがあった箇所が白い状態(白い空間)になってしまうという意味でした。


> スライダー無し1枚固定画でパララックスを作成するには大幅なhtml, CSSの書き直しが必要ですので、こちらについては申し訳ありませんがお受けできません。

とのことでしたので、

当初、①のつもりでご質問させていただいてましたが

スライダーはそのまま活かして、新着記事を引っ張るのではなく
固定の画像を複数枚スライドさせることがもし可能でしたらやり方を教えていただけますでしょうか?

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

2018/01/11 (Thu) 16:04

Akira  

To Meaneさん

こんばんは。
正しい削除を行えば以下のスクショのように整うはずですので、削除範囲を間違えられたのではないかと思います。

https://blog-imgs-118.fc2.com/v/a/n/vanillaice000/captureemptynosliderth.jpg

--------
スライダー画像を固定に変更

<!--recent-->
で検索されますとhtml内に1箇所ありますので、その<!--recent-->から<!--/recent-->までを一旦削除。
削除した同じ箇所に以下を枚数分追加。

<li class="para-normal para-item" style="background-image: url(ここに画像アドレス);">

CSSの修正は不要ですが(無駄は出ます)、テキストが無くなりますのでグラデーションも不要です。
グラデーションを削除される場合には

.slides li:before
という箇所がCSSに1箇所ありますのでその内容を削除。
以上です。その他細かいCSS修正などは自己責任・自力で。
よろしくお願いします。

2018/01/11 (Thu) 23:25

Meane  

できました(๑˃̵ᴗ˂̵)و

Akiraさま

ありがとうございました〜〜できました+゚。*(*´∀`*)*。゚+

白い空白は私のミスでした...スクショまで入れていただき
お手数かけてしまいすみませんでした。

スライダー画像を固定画像にする方法もありがとうございました。
おかげで思い通りのテンプレートにカスタムできました。

悩んでいた数ヶ月が二日間で解決して嬉しいです(๑˃̵ᴗ˂̵)و
また何かありましたらご質問させてください。

2018/01/12 (Fri) 16:24

Akira  

To Meaneさん

ご希望の沿う形になりましたでしょうか。
お疲れ様でした

2018/01/12 (Fri) 17:35

ヴィオラ  

テンプレートのカラムについての質問

はじめまして。
いつもAkiraさんの素敵なテンプレートを利用させていただいております。m(._.)m
さっそく質問です。
今現在「Alternative」を使っているんですが、
今まで2カラムで右側にプラグイン画面があったんですが、
昨日からプラグイン画面が下になってしまいました。
もちろん何も触ってはいません。
これはテンプレの仕様が変わったのでしょうか?
もし元に戻せるなら戻したいと思うのですが、可能でしょうか?
お忙しい中、申し訳ありません。どうぞよろしくお願いいたします。

ブログ名「人形ときどき犬猫」http://masachi999.blog.fc2.com/

2018/01/13 (Sat) 10:27

Akira  

To ヴィオラさん

ありがとうございます。
コメント投稿欄(Leave a replyの下)に明記してある通りお約束事をお守り頂いた上で再度お尋ねください。
よろしくお願いします。

2018/01/13 (Sat) 15:33

大諸居拓吾郎  

Empty-streetのPC版TOPページに不具合が起きました

Akira 様

夜分に失礼します。 大諸居拓吾郎と申します。

先日より下記ブログで、貴Empty-street を利用させてもらっております。
素敵なテンプレートがたくさんで幾つかの作品から随分迷って決めました。
編集していた途中で、いよいよ壁にぶつかってしまいました。

大諸居拓吾郎商店FC2店様前臨時屋台
https://oomoroitakugoro.blog.fc2.com

そこで、『PC用のTOPページのみと思われ』ますが昨日より(TOPページの)表示がおかしくなって(大きく崩れて)しまいました。
その画面は以下の状態です。御確認をお願いします。

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/201804012057239af.jpg  ◀1/4

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/20180401205725221.jpg ◀2/4

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/20180401205721274.jpg ◀3/4

https://blog-imgs-97.fc2.com/o/o/m/oomoroitakugoro/20180401205723c45.jpg ◀4/4

私(ども)の構文間違いなどの単純ミスでこの様になったと考えて、昨日から長くPC画面とにらめっこしていますが、どうにも分からなくなってしまいました。
ブログの開設から1年強、CSS等未だ判っていません <(_ _)> 。
カスタマイズ点は、『フォント、文字色、太さ、サイズ』『背景色』『各max-widthを拡大』『サイド欄に各FC2プラグイン挿入』『スクロールボタンを丸に変更』などの表面部分のみです。

どうぞお助け下さい。
よろしくお願いします。

追記  大変お手数ですが、この貴テンプレートの英文字と数字のフォントをさわりたいのですが、これも未だにどれを変えていいか見つけられません。
どれをさわるのか、教えて頂けますか。
上述質問と併せ、たいそうお手間をお掛けします。

重ねてどうぞお助け下さい。<(_ _)> m(__)m <(_ _)> m(__)m


大諸居拓吾郎 (商店FC2店管理者店長代理)

2018/04/01 (Sun) 22:51
vanillaice (Akira)

Akira  

To 大諸居拓吾郎さん

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

htmlソース内に
rel="canonical" href="<%url>"
という箇所が2箇所あります。
正しいのは

<link rel="canonical" href="<%url>">

ですが赤字部分の記号が欠損しています。
2箇所とも記述が正しいかチェック及び修正を行なってください。
それでも直らない場合はその旨お知らせください。

欧文フォントの変更は
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,400i">
削除した上で
body {
へのフォント指定
font: 1.4rem/1.9 'Lora', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', '游ゴシック', 'Yu Gothic', 'メイリオ', 'Meiryo', sans-serif;

赤字が欧文フォント指定(数字及びアルファベット)ですので変更してください。
フォントは閲覧者のOS依存ですので指定したいフォントがWindows, Mac双方にあるかどうか、無いのであればWindows用・Mac用を設定するなどご留意ください。

参考ページ
意外と知らないフォント設定の仕方
https://vanillaice000.blog.fc2.com/blog-entry-484.html

また、Lora で検索し、CSS内のLoraフォントも全て変更をお忘れなく。
全部で10箇所あります。
よろしくお願いします。

2018/04/01 (Sun) 23:44

大諸居拓吾郎  

Empty-streetのPC版TOPページの乱れ、治りましたぁ!!

Akira 様

深夜に再び失礼します。さらに浮かれて空メールを飛ばしてしまいましたのはぼく等です、御免なさい。
m(_ _)m <(_ _)>

報告致します。 Akira様のご指摘通りに修正しまして、TOP画面が 治りましたあ♬!!
英数字フォントの方もちゃんと変わりました!

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

大変遅い時間にかかわらず、すぐに返信下さりご丁寧に的確に教えて下さいました。
また、借りましたテンプレートを、見た目のみ変えまして恥ずかしい限りですがそれも大目に見ていただいていると思うと『感謝の2乗』です。

返信に手間取りさらに遅くなりました。FC2のような大きなブログでも、もうAkira様位しか今現在に対応したテンプレートを作製している有り難いお方がいないだろう事を想います時、きっと自分のような単純な質問やややこしい質問に日々忙殺してはんにゃろうな、と思います。

もっと勉強せなあかんですね。お手数お掛けしました。

Akira様、どうもありがとうございました。


大諸居拓吾郎(商店)
店長代理
L男
C次郎

2018/04/02 (Mon) 02:16
vanillaice (Akira)

Akira  

To 大諸居拓吾郎さん

修正できたということで安心しました。
お疲れ様でした

2018/04/02 (Mon) 04:09

ゆうぴん  

記事本文のフォントサイズ変更

はじめまして。ゆうぴんと申します。
記事本文のフォントサイズを少し大きくしたいのですが、その場合どこから変更すればよいのか教えていただけないでしょうか?

初歩的な質問ですみません。
font-sizeで検索とするとヒット数が多く、どれが本文記事に対応しているのか分かりませんでした。


最近ブログを始めたばかりで、当初は公式テンプレートを使用していましたが
Akira様の非常にお洒落なテンプレートを発見してすぐに採用させていただきました。

お忙しいところ恐れ入りますがよろしくお願いします。

2018/06/30 (Sat) 00:26
vanillaice (Akira)

Akira  

To ゆうぴんさん

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

記事本文の文字だけならば
body {
で検索するとCSSソース内に3箇所あり、一番最初のものが対象です。

font: 1.4rem/1.9 〜省略

赤字を1.5にすると15pxに、1.6にすると16pxになります。
全体の文字を調整する場合はbodyではなくそのすぐ上にある
html {


font-size: 62.5%;

赤字部位を以下のサイトを参照しながら修正してください。
http://pxtoem.com/

よろしくお願いします。

2018/06/30 (Sat) 12:15

ゆうぴん  

To Akiraさん

早速お返事をいただきありがとうございます。

テンプレートのお洒落さにも感動しましたが、対応の早さも感動です。
ありがとうございます!

2018/06/30 (Sat) 12:23
vanillaice (Akira)

Akira  

To ゆうぴんさん(完了のご報告)

お役に立てたのならば幸いです。
お疲れ様です

2018/06/30 (Sat) 12:46

-  

管理人のみ閲覧できます

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

2018/07/30 (Mon) 18:09
vanillaice (Akira)

Akira  

To Empty-streetレイアウト崩れの件 内緒さん

こんばんは。ご迷惑おかけしております。

こちら私の制作上のミスです。申し訳ございません。
今修正・上書きしましたのでお手数ですが再DLをお願いします。
また他にもお気づきの点がありましたら教えてくださいね。
よろしくお願いします (*_ _)

https://admin.blog.fc2.com/control.php?mode=design&process=download&no=45701

2018/07/30 (Mon) 21:42

Seishu  

美しいペン字

こんにちは。Seishuと申します。
とても素敵なテンプレートでしたので利用させて頂いております。

そこで、お伺いしたいのですが、トップページに表示される画像は記事に挿入した画像が
表示されると思うのですが、Read Moreの部分に表示される画像は、画像の中間あたりから
の表示になっています。これをトップに表示される画像のように、画像の上段からから表示
させる方法などはありますでしょうか。

写真ならばとてもいい感じになると思うのですが、私の場合文字の画像が主になりますので
出来ることなら上段から綺麗に表示させられたらと思い質問させていただきました。
よろしくお願い致します。

利用端末 : Windows7 Ultimate 64bit
利用ブラウザ : Google Chrome

2018/07/31 (Tue) 16:00
vanillaice (Akira)

Akira  

To Seishuさん

こんにちは ('0')/

> Read Moreの部分に表示される画像は、画像の中間あたりからの表示になっています。〜

画像のオブジェクトの位置合わせのことでしょうか。
.image-wrapper img
で検索されますとCSS内に1箇所あります。
object-position: center center;
最初のcenterが水平位置、赤字のcenterが垂直位置の合わせなので、画像の上辺を基点にするには赤字部位を top に変更してください。
また、近接にあるIE11用後方互換用の
font-family: 'object-fit: cover; object-position: center center;';
こちらも同時に変更してください。

鍵付きブログのご質問時にはパスワードをお伝え頂くお約束になっていますので、
(現状確認ができないと問題点・原因の把握ができません)
今回はわかる範囲でお答えしましたが次回以降はご配慮頂けると助かります。
よろしくお願いします。

2018/07/31 (Tue) 17:48

-  

管理人のみ閲覧できます

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

2018/07/31 (Tue) 18:09
vanillaice (Akira)

Akira  

To パスワードの件 内緒さん(完了のご報告)

そういうことでしたか。システムをご存知なかったんですね。

コメント欄の下にあるパスワード入力欄は、ご自身が投稿したコメントに対するパスワードです。
これを設定しておくと投稿後に編集することができます。
パスワードを入れずに送信したコメントは編集できません。

ブログのパスワードは全く別で、ブログ入室のためにブログ主が設定するものです。
コメント欄のパスワードとブログパスワードは用途が違うということです。

コメントパスワードは閲覧者もブログ管理人も見ることはできません。入力した人だけが知っています。
ブログパスワードの方は、第三者にパスワードを伝えるにはコメント欄を利用するか(他の人に見られたくない場合にはsecretにチェック)、メッセージを送るなどの方法があります。
第三者ブログのコメント欄でご自身のブログパスワードやアカウントパスワードの入力を迫られる場面はありません。
これはFC2ブログサービス内の共通事項なので覚えておかれると良いと思います。


修正の方は完了したということでお疲れ様でした

2018/07/31 (Tue) 20:11

-  

管理人のみ閲覧できます

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

2018/10/29 (Mon) 10:53
vanillaice (Akira)

Akira  

To Empty-street個別記事下プロフィール画像の件 内緒さん

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

> ブロガーのプロフィール画像が表示されますが、それを、コメント欄で使用しているものと同じ画像に変更可能でしょうか?〜

この部位は個人設定の「プロフィール」で指定した画像が自動で出力されますので、プロフィール画像と別のものに差し替える場合には
url(<%image>)
で検索されますとhtml(テンプレ管理画面上段)に1箇所あります。<%image>を削除し、直接画像URLを記入してください。以下のような感じです(URLはダミーです)

url(https://xxxx.jpg)

よろしくお願いします。

2018/10/29 (Mon) 17:59

そふぃあ  

To Akiraさん

こんばんは!
お忙しい中、早々にお返事いただきありがとうございます。

早速変更してみました。
無事に差し替えられて嬉しいです。

お気に入りのテンプレートなので
大切に使わせていただきます。!(^^)!

2018/10/29 (Mon) 22:12

クアトロ  

ヘッダー上のSNSナビ枠が下にずれてしまった

Akiraさん、初めまして。
FC2でブログを始めたクアトロと申します。

テンプレートが素敵で一目で気に入って使用させて頂いているのですが、
今日アナリティクスとSearchコンソールを入れる作業中に、
metaタグ(コンソールの)をhead内に入れて更新したら、
ページ一番上のSNSナビが並んでいる枠線が下にずれて、白い空白ができてしまいました。

当方初心者で、なぜ崩れたのか分かりません。
サイトはこちらです。

宜しければ、対処法を教えていただけないでしょうか。

2018/11/02 (Fri) 06:00
vanillaice (Akira)

Akira  

To クアトロさん

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

<script>
window.dataLayer
〜省略〜
</script>全角スペース 半角スペース 半角スペース

貼り付けたスクリプト要素の </script> の直後(右側)に上記の通り余分なスペースが含まれています。
全角が1つ、半角が2つです。
この3つを削除し、</script>の直後に何も無い状態に修正してください。
全角スペースの使用はNGです。

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

また、このscript要素はこの位置ではなく </head> の直前に記すようにし、meta charsetよりも前には何も入れないようにしてください。
よろしくお願いします。

2018/11/02 (Fri) 11:06

クアトロ  

すみません

素早いお返事有難うございます。

該当箇所→~gtag('config', 'UA-128546125-1');
</script>○○○

このスペースを削除というか、指定された通りに
何度も試しているのですが、上手くいきません。

</head>内直前に貼り付けて、スペースを修正してるんですが、
スペースの余った部分を無くすという作業が分からなく途方に暮れています。

2018/11/02 (Fri) 12:42
vanillaice (Akira)

Akira  

To クアトロさん②

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

↑ この後ろにも全角スペースが入っています。
どのように作業されているのかが不明ですが、全角スペースは目に見えませんので注意してください。
各行の末尾にカーソルを合わせた時にすぐ右側にカーソルが来なければ(隙間が空いていれば)、スペースが入っています。

他の箇所にもあるかもしれませんが、とりあえず今トップページに20あまりの構文エラーがあり、全角スペースが原因のはずです。
たぶんあとこの1つだと思いますので修正することでエラーも0になるはずです。

先程拝見した際にこの部位に全角スペースはありませんでしたので、注意深く作業なさってくださいね。
恐らく 文頭(ソースの頭の揃い) を合わせようとして全角を打っているのだと思います。
掲載したリンク先ページの内容をよくよく読まれまして理解をして頂いた上で作業してください。
該当箇所は
「htmlソースの見た目にはこだわらなくて良い」
の見出しです。

これは私のテンプレートだけでなくhtml全般ですので、htmlやcssを触る時にはまず最初に半角英数字に変更する 癖をつけると良いと思います。
もちろん日本語入力以外で、という意味です。
ソースコードのインデントは半角スペース2つ分です。つまり見た目(空白)は全角1つ分と等しいので、文頭を揃えようとして多くの方がミスをします。
最初に貼り付けをした際に全角を使用し、先の修正で 目に見える内容だけをカットした ために全角スペースが残ってしまったのだと思いますよ。

2018/11/02 (Fri) 13:05

クアトロ  

お手数をおかけしました!直りました!(ご報告)

何度もほんとに素早いお返事有難うございます!

良かった!直りました^^
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
Akiraさん↑の記述箇所を見直してみると、確かにそのすぐ下行空白枠に全角表示で青枠が出た箇所が一箇所。

その部分を詰めてみるとピシャリでした。(多分大丈夫ですよね^^;)

アナティリクスタグも入念にチェックして、コンソールのメタタグも注意して取り付けたはずなのに・・
と思ってたんですが。

たったスペース一つでこうも変わってしまうんですね。
疲れました。

有難うございます。

2018/11/02 (Fri) 13:23
vanillaice (Akira)

Akira  

To クアトロさん(完了のご報告)

修正できたということで安心しました。

そうですね。これは日本人特有のミスというか、欧米諸国にもhtmlの世界にも「全角」という概念はありませんので、日本人である以上気をつけましょう(笑)
お疲れ様でした :)

2018/11/02 (Fri) 13:26

M  

No title

Akira様 はじめまして。

「Empty-street」を使用させていただいているMと申します。
表題の件について1点ご質問させていただきたいと思いコメント欄から失礼します。

私のブログは有料でドメインを使用しているのですが、FC2が有料分についてもSSL化のサービスを開始したことを知りました。

早速SSL化の設定を行なったのですが、FacebookのシェアをするとFacebookのほうで上手くカードが表示されなくなりました。私の方に何か設定ミスがありますでしょうか?自分としては何もいじってはいないはずなんです。

ご教授頂けると幸いに存じます。

2018/11/21 (Wed) 20:21
vanillaice (Akira)

Akira  

To Mさん

ありがとうございます (●'0'●)/
独自ドメインのSSLがようやく始まったんですね。一時はどうなることかと ^^;

SNSシェアの件ですが、SSLのエラーですのでエンドユーザーにはどうにもできないです (´・ω・`)
FC2ブログへ直接お問い合わせされまして、その際に
「cURL(60)のエラーでバリデートできないようです。」とお伝えください。技術者にはそれで伝わるはずです。

----
お問い合わせの返事をお待ちの間にhtml構文エラーを修正されると良いですね。

① 属性間スペース無し(複数箇所)
×
<link rel="stylesheet"href

<link rel="stylesheet" href

② ID重複
個別記事の上部に「更新日時」を追加する際に投稿日時に係るhtmlを複製したと思いますが、entry-datetime 及び entry-day はクラス名ではなくID名なのでクラスに変更してください。

修正前
<time class="entry-header-content-box" id="entry-datetime" 〜
<span id="entry-day">
修正後
<time class="entry-header-content-box entry-datetime"〜
<span class="entry-day">

CSSの方も #entry-datetime を .entry-datetime に、#entry-day を .entry-day に修正。

③ style属性重複(複数箇所)
サイドメニュー内「カテゴリ」のhtml内容が
<li style="list-style-type: none;" class="main_list" style="text-align:left">
と重複です。重複したstyle設定は反映されずパースエラーになりますので修正が必要です。そしてlist-style-type: none も text-align: left もli要素の個々につけるのではなく親のulに指定すれば一度で済みます。

<ul class="main_menu" style="list-style: none; text-align: left;">

④ pタグのエラー
サイドメニュー内「コメント」プラグイン、ul要素をpタグで囲っていませんでしょうか。
p要素の中には同じp要素を始め、ul要素やdiv要素などほとんどの要素を入れることができません。入れ子できるのはせいぜいリンクや画像などです(display値がinlineのもの)
pタグは使い方を間違えるとブラウザが終了タグの自動補完を行いますので、現状のhtmlソースは
<p></p>
<ul>
<li>
</ul>
<p></p>

赤字がブラウザによる強制補完です。

-----
SSLの件が片付く間に余力があれば修正してくださいね。

参考記事: ブログ作成に役立つブックマークレット
https://vanillaice000.blog.fc2.com/blog-entry-781.html

上記ページの「W3C validation」を利用し、トップページから修正されると良いと思います。
Empty-streetのトップページは
「Document checking completed. No errors or warnings to show.」と緑色で表示され、完全validのはずですから赤字や黄色字が出た場合にはサイドメニューあるいはご自身でテンプレートに追加した内容に起因します。
個別記事の方はやっかいですが頑張って (´・ω・`)
ただ、どのエラーや警告も最優先事項というわけではありません(レイアウトが崩れてもいませんし致命的なエラーは無いように思います)のでお時間が許せば、という感じです。

2018/11/21 (Wed) 21:41

M  

To Akiraさん

Akira様

早急にお返事を頂きありがとうございます!!

ご指摘いただいた通りに問い合わせをしてみようと思います。

その上に他の構文チェックまでして頂いて...。

ご厚情に感謝いたします!!

2018/11/21 (Wed) 23:36
vanillaice (Akira)

Akira  

To Mさん(FC2からの回答待ち)

はい。面倒ですが問い合わせてみてくださいね。もしかしたら運営スタッフも気づいていないかも ^^;

バリデートの件はSSL化されたということでURLチェックなどをされるでしょうから、同時に進めると効率が良いのではないかと思います。
大変お手数ですが、cURLの件、事が全て終了してからで良いので結果など教えて頂けると助かります。
お疲れ様です :)

2018/11/21 (Wed) 23:45

M  

To Akiraさん

Akira様

お世話になっております。FC2にはすぐに問い合わせを致しました。

返事があり次第またご報告させていただきますね!

いろいろとありがとうございます!

2018/11/22 (Thu) 19:26
vanillaice (Akira)

Akira  

To Mさん

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

2018/11/22 (Thu) 21:44

クアトロ  

有料プラン独自ドメインのSSL化について

お久しぶりです。「Empty-street」を使わせていただいているクアトロです。

Mさんとのやり取り、コメントを拝見しまして、自分の方もようやく独自ドメインでのSSL化までこぎつけることができました。

現在トップページでは一応正式に鍵付きマークでhttpsが反映されている状態ですが、302リダイレクトとSSL化に伴い、今後最初にやるべきこととして①HTML内、CSS内の「http://」を全て 「//」に置換しても良いものでしょうか・・。(現状headなど、「http://」は全て含めて13箇所ヒットするのですが)
②各種プラグインの見直し
③個別記事の確認

外部サービスはアナリティクスとコンソールURL修正を最優先など、ですかね。
きちんとSSL化を反映するにあたり、もし宜しければご教授いただければ幸いです。

2018/11/23 (Fri) 10:50

M  

To Akiraさん(中間報告)

Akira 様

お世話になっております。ゆうらりHappySmileの管理人Mです。

先日ご相談したFacebookのシャアに関する「cURLの件」ですが、未だFC2の運営側から回答はないものの、改善のほうは着々と行われているようです。

本日、ブログを更新した後にFacebookのシェアをしてみると一応、表示のほうはされました。しかしまだ画像については未反映なのでFC2側で技術的な修正を進めているものだと思われます。

実は、ご相談時に書かなかったことですが、SSL化設定後に、ボクが登録しているFC2のブログランキングで今まで表示されていた記事画像が反映されない不具合も起きていました。これに関しては先程から表示されるようになりましたので、Facebookのほうもじきに解決されるのでは?修正が済んだら回答が送られてくるのかな?と感じております。

まずは中間のご報告まで。FC2から回答メールが送られて来ましたらまたご報告させて頂きます(^^)

2018/11/23 (Fri) 13:21
vanillaice (Akira)

Akira  

To クアトロさん

こんにちは (●'0'●)/

> HTML内、CSS内の「http://」を全て 「//」に置換しても良いものでしょうか〜

そういうわけにはいかないですね。残念ながら。
テンプレートをデフォルトの状態のままお使い頂く場合にはテンプレートのhtml, CSSの修正はありません。
クアトロさんの場合は追加項目がいくつかあるようですからそちらはチェックしてください。

html内で変更してはいけないもの

<head prefix="og: http://ogp.me/ns# fb: http://〜省略">
OGPの正規リンクはあくまでもhttpなのでそのままで。アクセスしているわけではありませんので混在コンテンツの対象とはなりません。


<a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);"〜省略
これはトラックバックに利用するJSですが、httpsに書き換えてしまうと相手方がhttpアドレスの場合にトラックバックできません。こちらも単にリンクで飛ばしますので混在コンテンツとはなりません。


"@context": "http://schema.org"
こちらは構造化マークアップに係るjsonコードです。OGPと同様混在コンテンツ対象外。

デフォルトで含まれているhttpスキームは全部でhtmlに6つ + CSSに1つ(最上部にある私のブログのURLですが単なるコメント)です。13あるとしたら残りの7つはクアトロさんが足したものではないかと思います。

追加内容
・リンクの場合(ページ遷移) --- 遷移先ページがhttpsで開けるか確認、開けるのならばhttpsに変更
・追加JSファイル --- 有れば修正必須
・追加CSSファイル --- 有れば修正必須

リンクについてはご自身のブログにジャンプするのであればhttpsに書き換えてください。外部サイトの場合にはhttpsでアクセスできるか必ず確認をしてください。
リンクは混在コンテンツではありませんのでhttpのままでも何ら問題はありません。

参考記事: SSL対策時の注意【全てのURLをhttpsに書き換えてはいけない】
https://vanillaice000.blog.fc2.com/blog-entry-621.html

----
Google Fontsのmontezフォントを追加されていますが、Google Fontsへのリンクはデフォルトで既に導入されています。
そしてこの追加フォントがhttpですね。残り7つのうちの1つです。混在コンテンツとしてブロックされ、現状では総称ファミリー指定のcursiveで表示されています。

現状
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,400i">
<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>

以下のように一つにまとめてください。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,400i%7CMontez">

linkのtype属性も不要です(text/cssは初期値なので記す必要なし)

----
混在コンテンツの修正ですが。Chromeをご利用でしたら
右クリック「検証」でDevToolを表示させると下部に赤字で「Mixed Content」と表示され、その対象が何なのかも教えてくれますので利用されると良いですね。
検証の際にはもしadblock系ブラウザ拡張をご利用中であれば一旦切ってください。でないとブロックされた広告なども赤字で表示されて作業の邪魔になると思います。

----
混在コンテンツ修正の目処がつきましたら302から301へ変更してくださいね。302は一時転送、301は恒久転送です。
あとはおっしゃる通り、search consoleへの追加登録も必要です。

----
別件では構文エラーが結構あります ^^:
htmlで致命的なのは<ul>要素の直後に<br>のついているもの。黒板装飾の中身が該当です。

参考記事: FC2ブログで謎の空白行ができるのはソースの途中改行が原因です
https://vanillaice000.blog.fc2.com/blog-entry-794.html

クアトロさんの場合は余白を設けるために<br>を能動的に書いているような気がします。改行の扱いを「htmlのみ」にしていると仮定して。
他にも同じ要領で書いているulやol要素があればそちらも要修正。

CSSも致命的なものがいくつか。こちらはリボン装飾です。
htmlはクローラーにもブラウザにもul要素として認められていません。
CSSの方は内容が破棄されて反映されていません。この2つは要修正です。他にもありますが後回しで構わないと思います。

2018/11/23 (Fri) 13:29
vanillaice (Akira)

Akira  

To Mさん

こんにちは (●'0'●)/

まだ公式アナウンスが無いところをみると、もしかしたらスタッフ的には「まだやっとる最中や…」と指摘されたくなかったかもしれませんね(笑)
でもたまに修正したくせに「そんな症状は見当たらない」とかシレっと言ってくることあるからなぁ ( ̄∀ ̄;)
担当者にもよりますけど、そういう人にあたるとイラっとします(笑)
とりあえず様子を見ることにしましょう。お疲れ様です :)

2018/11/23 (Fri) 13:39

クアトロ  

コメントありがとうございます。

すみません。お忙しい中迅速なお返事ありがとうございますm(_ _)m

なるほどですね。本当に構文や仕組みについて初心者なのでお教えいただいて申し訳ないです。^^;

つまり①、②、③の件についてはそのままで良い。
リンクに関してはHTMLテンプレに関してはhttpsで問題なく表示されましたのでhttpsへ修正しました。
Google Fontsについてもご指摘通りまとめました(これ目次リボン部分の文字装飾に入れていた部分なんです。)


「htmlで致命的なのは<ul>要素の直後に<br>のついているもの。黒板装飾の中身が該当」

これは記事内でbrタグを利用しているわけではなく、途中改行を空白で対処している、というところが致命的なのでしょうか?でしたら、例えば、

<div class="黒板クラス名"><ul>「ココがenterによる空白・途中改行」
<p><span class="marker-blue"><b>本項の主な考察ポイント</b></span></p>
<li><b>究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか?</b></li>
<li><b>先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い</b></li>
<li><b>人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある</b></li></ul>
</div>

としているところを、

<div class="kokuban-s1"><ul><p><span class="marker-blue"><b>本項の主な考察ポイント</b></span></p><li><b>究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか?</b></li><li><b>先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い</b></li><li><b>人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある</b></li></ul></div>

↑こう表現した方が良い、ということでしょうか・・。他のulやol要素で記載してあるものも含め。


それから、リボン装飾は目次になんとか表記で使いたいのですが、
”htmlはクローラーにもブラウザにもul要素として認められていません。”
”CSSの方は内容が破棄されて反映されていません。”「要修正」


こちら2点をご教授いただいてよろしいでしょうか・・。
ほんとにすみません。良案はございませんでしょうか。



2018/11/23 (Fri) 15:37
vanillaice (Akira)

Akira  

To クアトロさん②

頂いた内容が実際の内容と同一である判断しますね。差分などは見ていませんのでそれを前提にします。

まず、基本的にhtmlを常に利用して記事を書かれる場合には改行の扱いを「htmlのみ」にされることをおすすめします。理由はリンク掲載したページにある通りです(FC2ブログで謎の空白行が〜)
htmlソースコードの可読性のためにenterを押してしまうと今回のような結果になります。

あと根本的なhtmlの入れ子のミスもあります。

<div class="黒板クラス名"><ul> --- この位置での改行不可
<p><span class="marker-blue"><b>本項の主な考察ポイント</b></span></p> --- ul要素内へのp要素の入れ子不可
<li><b>究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか?</b></li> --- この位置での改行不可
<li><b>先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い</b></li> --- この位置での改行不可
<li><b>人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある</b></li></ul>
</div>

----
ul要素内でタイトルや見出しはつけることができません。

ul要素・ol要素というのは必ずこの形です ↓
(li要素とp要素の終了タグは省略可能なのでここからは文字数を減らしたいので省略して書きます)


<ul>
<li>内容1
<li>内容2
<li>内容3
</ul>

×
<ul>
<p>テキスト
<li>内容1
<li>内容2
<li>内容3
</ul>


<ul>
<li><p>テキスト
<li>内容1
<li>内容2
<li>内容3
</ul>

li要素の子要素にp要素はOKですが、この場合にはp要素の前にマーカーが付きます。
今回のクアトロさんの場合は以下の構成にされると良いと思いますよ。

<div class="黒板クラス名">
<p><span class="marker-blue">本項の主な考察ポイント</span>
<ul>
<li style="font-weight: bold;">究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか?
<li style="font-weight: bold;">先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い
<li style="font-weight: bold;">人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある
</ul>
</div>

せっかくmarker-blueというクラス名がありますから、<b>要素にはせずにスタイルシートの方で
.marker-blue {
.
.
font-weight: bold;
}

とされた方が良いと思います。ドット(.)は既存内容の省略を意味しています。念の為。
つまり既存内容の末尾に font-weight: bold; を追加する、ということですね。

html5のbタグの定義は「他のテキストと区別する」用途です。
参考記事: strongタグとbタグ論争に個人的意見
https://vanillaice000.blog.fc2.com/blog-entry-794.html

たぶんGoogle的にもbタグの使用はなるべく避けてほしいはずです。
同様にli要素内のbタグも外してli要素へのstyle指定で十分ではないかと思います。htmlの入れ子は少ない方が望ましいので。
あとli要素とp要素の終了タグが必要ならば付けてください。こちらは常日頃の方針と揃えられた方が良いと思います。

で、上記が「htmlのみ」設定にした場合です。改行を「自動」にする場合には全て横一列に繋げなければいけません。全部です。

<div class="黒板クラス名"><p><span class="marker-blue">本項の主な考察ポイント</span></p><ul>
<li style="font-weight: bold;">究極の対人サービス業といえる介護でAIは本当に利用者の真の感情を汲み取ることができるのか?<li style="font-weight: bold;">先進的な技術は確かにさまざまなメリットがあるが、細かい部分の不安も多い<li style="font-weight: bold;">人手不足や高齢化が進む日本では確かに補助的な利用価値は多いにある</ul></div>

こうなると後のメンテナンスに相当苦労されるのではないかと思います。
ですから記事内でhtmlを頻繁に利用する方へは「htmlのみ」の改行指定をおすすめします。

一旦投稿しますね。
CSSの方はソースを拝見しないと書けませんのでお待ちください。ちょっと外します。
長女を迎えに行ってきます(笑)

2018/11/23 (Fri) 16:32

クアトロ  

ほんとにいろいろと申し訳ありません。

ここまでいろいろ無償でご対応下さって、こちらが何もできないのが恐縮です・・。
はい。現状の解釈(上記)<ul> <li>及び<p>タグの子要素などの関係は丁寧なご説明で理解できました。

なるほど、CSSで<b>タグもfont-weight: bold;で制御できますね^^;クラスつけてるんだから・・。


自分で色々弄ると余計ややこしくなるので、再度お返事頂けるまでそのままにしておきます^^;
連休前なのでお迎え、気をつけてくださいね。

2018/11/23 (Fri) 17:02
vanillaice (Akira)

Akira  

To クアトロさん③

お気遣いありがとうございます :)
続いてCSSの方です。

/*箇条書き装飾*/

ul.check li:before
の中に
color:; /* 文字色 */
という部位がありますがcolorプロパティの空白値は認められていませんので削除するか、あるいは以下の形に修正。

/* color:; 文字色 */

色指定してコメントを外したときにミスする可能性があるので削除されたほうが良いと思います。
あと ul.check li:before という書き方は不要に思います。
.check li:before
でOKです。すぐ上にある
ul.check li も同様 .check li に修正。CSSのセレクタは右から順に読まれますので、全体からli要素を探し、クラス名checkの付いている要素を探し、checkクラスが付いていてさらにul要素のものを探す、という3段もの手間が発生しています。
checkクラスを持つ要素が他に存在しないのならば(例: <ol class="check">)クラス名だけで十分です。

ですがこのCSSは機能していないはずです。何故ならempty-streetには強制力の強い指定が含まれているからです。

#inner-contents .check li

#inner-contents .check li::before
に修正してください。その前に私はcheckクラスの要素を見つけることができませんでした。使用の有無も確認してくださいね。使用していないCSSならば削除。

-----
/*目次装飾リボン*/

.ribbon1
の中に
background-color: #282828;
background-image: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000000));
background-image: -webkit-linear-gradient(top, #282828, #000000);
background-image: -moz-linear-gradient(top, #282828, #000000);
background-image: -ms-linear-gradient(top, #282828, #000000);
background-image: -o-linear-gradient(top, #282828, #000000);
background-image: linear-gradient(top, #282828, #000000);
というのがありますが、ベンダープリフィックスはもう要らないと思いますし、書き方もちょっと間違ってますね。

background-color: #282828;
background: linear-gradient(to top, #282828, #000000);

これでOKです。
background-colorは古いIE用のフォールバックなので残しておいてください。といっても古いIEではどのみちデザイン自体崩れてますが。

------
.content-inner-follow-buttons .follow-title
のすぐ上に
text-align: center;
margin-top:40px;
width:100%;
と3つ浮いた状態ですがこれがどのセレクタへの指定なのか不明でありエラーです。
セレクタ名を確認されまして

.xxx {
text-align: center;
margin-top:40px;
width:100%;
}

という正しい形に修正してください。

-----
.clip-box-a::before
の中に
background-color: none;
とありますがbackground-colorのnone値は存在しません。
背景色が不要な場合は何も書かなければ良いだけなので削除。あるいは
background: transparent;
に変更。

とりあえず以上です。修正後に再度チェックしますのでお知らせくださいね。

2018/11/23 (Fri) 17:08

-  

管理人のみ閲覧できます

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

2018/11/23 (Fri) 21:20

-  

管理人のみ閲覧できます

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

2018/11/23 (Fri) 21:40

M  

To Akiraさん

Akira 様

お世話様です。お返事ありがとうございます。

FC2運営側もいろいろと対応に追われているんでしょうね。

ちなみに、Facebookのシャアに関しては画像のほうも反映されるように改善されました(^^)

FC2からの回答は何もありませんが…。

もうしばらく様子見ですね。

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

2018/11/23 (Fri) 22:38
vanillaice (Akira)

Akira  

To Empty-street構文エラーの件 内緒さん

こんにちは (o'ω')ノ

最新記事で検証しました。
ちょっとコメント遡ります。

> つまり①、②、③の件についてはそのままで良い。〜

そのままで良くないです(笑)
①テンプレート内http --- 修正済み
②プラグインの精査 --- 修正必須箇所あり(SSLとは無関係ですが構文エラーあり)
③個別記事 --- 全記事でチェックが必要

個別記事については

・記事内でimg要素やiframe要素を利用しているか --- httpアドレスの画像、動画や外部ウィジェットなどのアドレスがhttp、ブログカードの相手先画像・サイトアドレスがhttp

これはチェック必須です。特にiframeは混在コンテンツの中でもactive mixed contentと言って画像などのpassive mixed contentよりも危険度が高いのでブロックされることになります。
(画像はパッシブなのでブロックされず表示が行われます)
個別記事は各ユーザー任意の内容ですから管理人自身のチェックが必須です。

----
ul要素については未修正ですね。以下は修正必須箇所です。

① html
ul及びol要素の改行修正

----
② html内インラインCSS
contents of articleの付近に
<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;">
というのがあります。
赤字部位カラーコードの最後の2つのfが全角ですね。

×
#ffffff


#ffffff

全角スペースの使用については以前の質疑応答と同じで特に注意が必要です。

-----
③ html
こちらはサイドメニュー(プラグイン)です。
現時点で以下のような内容になってます

<p class="plugin-myimage" style="text-align:left"></p>
<p class="img01 waku02 radius bImg shadow bWidth"><img src="" alt=""></p>
</p>
<p align="center">
<b><span style="font-size:large;"><span class="marker-blue">クアトロ</span></span></b><br>
</p>
<p style="text-align:left">
<div class="clip-box-a">
<p class="dot">xx在住の〜発症。</p>
<p class="dot">症状の〜経験。</p>
<br />
<p class="dot">独身〜ます。</p>
<br />
<p class="dot">自宅〜ました。</p>
<br />
<p class="dot">ライフ〜好きです。</p>
<br />
<p class="dot">インターネット〜勉強中。</p>
<br />
<p class="dot">深掘り〜ください。</p>
<br />
<div class="sidebar-follow-buttons">
<a class="hatena" href="xxx"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a>
</div>
</p>

修正すると以下のような感じでしょうか。

<div class="xxx"><img src="" alt=""></div>
<div style="text-align: center; font-size:large;">
<span class="marker-blue">クアトロ</span>
</div>
<div class="clip-box-a">
<p class="dot">xx在住の〜発症。</p>
<p class="dot">症状の〜経験。</p>
<p class="dot">独身〜ます。</p>
<p class="dot">自宅〜ました。</p>
<p class="dot">ライフ〜好きです。</p>
<p class="dot">インターネット〜勉強中。</p>
<p class="dot">深掘り〜ください。</p>
<div class="sidebar-follow-buttons">
<a class="hatena" href="xxx"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a>
</div>

plugin-myimageクラスを持つp要素が空の状態で浮いています。不要なので削除。

img01 waku02など多数のクラスを持つp要素がありますが大変無駄が生じますので一つのクラスにまとめます。新しくクラス名を付け、そのクラス名にスタイルをまとめるようにしてください。

p要素内にdiv要素を入れることはできません。また、せっかくp要素でマークアップしているのですからp要素間の余白は<br>ではなくmarginで行うようにしてください。各p要素は dot というクラス名を持っていますが、そちらへ margin指定が 0 になっています。ここを margin: 1em 0 などに変更(1emが上下、0が左右)

<div align="center">は廃止属性です。今後は<div style="text-align: center;">を使うように意識を変更してください。過去記事に遡って修正する必要まではありません。「今後」で良いと思います。もちろん修正できるならするに越したことはありませんが。

先回と同じでmarker-blueクラスへのfont-weight: boldの追加、font-size: largeの指定は入れ子で要素を増やさずに親のp要素へ直接指定。

----
p要素というのは先回もお伝えした通り、入れ子にできる要素がかなり限定されています。そしてブラウザの補完が行われるタグでもあります。

例)
<p>
<div>あいうえお</div>
</p>

↓ ブラウザの補完

<p></p>
<div>あいうえお</div>
<p></p>

こうして間違いがあると強制的に直されてしまい、html構文としては崩壊してしまいます。
装飾だけが目的の場合には迷わずdiv要素、段落のp要素にしたい場合には入れ子できる要素の把握とp要素間に空白行作成のための<br>が入り込まないようにする、この2点に注意してください。

念の為brのサンプル


<p>
あいうえお<br>
かきくけこ
</p>
<p>
さしすせそ<br>
たちつてと
</p>

×
<p>
あいうえお<br>
かきくけこ
</p><br>
<p>
さしすせそ<br>
たちつてと
</p>

で、サイドメニューのプラグインはほとんどページ種で表示されますし、一度記した内容はあまりみなさんチェックされないのでこの機会に綺麗に修正されると良いですね。でないと長く間違いを引きずることになります。

----
⑤ ダブルクォーテーション欠損
こちらもサイドメニュー部の「SNSをフォロー」の付近。
<a class="twitter" href="" target="_blank rel="noopener">
正しくは
<a class="twitter" href="" target="_blank" rel="noopener">

ダブルクォーテーションの欠損や重複のミスは後続要素に長く悪影響を及ぼします。これはhtml構文ミスの中でもクリティカルなものと言って良いと思います。傾向を見ているとどうもみなさん
target="_blank"
この別タブ指定とその直近の属性にミスが多い気がします。たぶんアンダースコアが目眩まし的な存在になっている気がする ^^;
せっかくのnoopenerが効いていませんので要修正。

----
とりあえず最新記事のみの検証です。他のページにもあるかもしれませんが要領は同じですから、まずサイドメニューを修正し、エラーの数を減らした上で個別記事のチェックをされると良いと思います。
サイドメニューの後の最優先事項はul要素の修正ですかね。

2018/11/24 (Sat) 14:07
vanillaice (Akira)

Akira  

To Mさん

あー。ホントですね。ちゃんとできるようになっている(笑)
とりあえず安心しました ^^;

2018/11/24 (Sat) 14:09
vanillaice (Akira)

Akira  

To 家庭教師の件 内緒さん

こんにちは (o'ω')ノ

いえ。逆に嬉しいです(笑)
いつもありがとうございます :)

2018/11/24 (Sat) 14:11

クアトロ  

もうほんとすみません。

ありがとうございます。
こんな長文書かせてしまってすみません・・。

これだけ懇切丁寧に教えて頂いているのに自分で理解できなくなってしまいました・・。

とりあえず② html内インラインCSS
⑤ ダブルクォーテーション欠損
は直せたのですが、他の修正項目が自分で全く分からなくなってしまいました。m(._.)m












2018/11/24 (Sat) 19:10

クアトロ  

ご質問完了の報告(本当にありがとうございました)

この度はいろいろと長文でご教授頂いたにも関わらず、僕の理解不足でお手間を煩わせてしまってすみません。

これ以上ご質問に余計なお時間をとらせるわけにいきませんので、これをもって終わりにさせていただきます。
本当にお忙しい中、どうもありがとうございました。

2018/11/24 (Sat) 20:26
vanillaice (Akira)

Akira  

To クアトロさん(終了のご報告)

了解です。お疲れ様でした :)

2018/11/25 (Sun) 03:44

クアトロ  

先日より

こんばんは。クアトロです。

ご報告をもって終了、と言ったばかりなのですが、やはりどうしてもAkiraさんに再チェックしていただきたく、もう一度ご連絡してしまいました・・。

実は、Fc2ブログでの旧投稿記事ページの仕様自体があまり理解できておらず、ul、li要素も自分で直せたつもりだと思っていたんですけど、ようやくおっしゃっていた意味が分かりました。⇒自動改行の場合、横一列で全て繋げて続けて書かなければいけない意味が。
「HTMLのみ」の設定にはしていなく、初期設定の「自動改行」指定で今までずっと投稿し続けていました。

(”余白を設けるために<br>を能動的に書いているような気がします。”)
↑まさにおっしゃる通りです。少しでも見やすくなればと</p>タグ終了後にEnterキーで空白行を差し込んでいました。

とりあえず自分のなかで理解できる範囲で可能な限り、上記のご説明をもう一度見返しながら、修正してみたのですがいかがでしょう。致命的なところはございますか?
あと、もし「HTMLのみ」の設定にした場合は、<br>タグを常に差し込んで改行(空白行)をとって良いのでしょうか・・。

お時間がある時で構いません。
致命的なところのみでも良いので教えてください。

2018/11/25 (Sun) 22:35
vanillaice (Akira)

Akira  

To クアトロさん

こんばんは (o'ω')ノ

今ちょうど記事をひとつアップしましたのでとりあえずそちらをご覧ください。
参考記事: そのhtml、ホントに要りますか?
https://vanillaice000.blog.fc2.com/blog-entry-798.html

他の方のコメントにお返事してから拝見します。お待ち下さいね。

2018/11/25 (Sun) 22:41
vanillaice (Akira)

Akira  

To クアトロさん②

最新記事は避けて最新から2つ目の記事を拝見しました。
最新記事なんですが、構文エラーが影響しているのかカエレバのコードがアレでソレなのか、ちょっと検証の邪魔になりますので避けます。
以下の内容を綺麗に直すことで最新記事の方も検証できるようになるかと思います。

-----
ul要素については修正できています。
で、修正段階でタグの抜け落ちなどが発生してしまったようです。以前は無かったエラーが新たに生まれてしまいましたね。こちらも修正しましょう。

サイドメニュー部「about me」
ソースの書き出しが

<p style="text-align: left;">
になっているはずです。
そしてその中に
<div class="clip-box-a">
が入っていますが、p要素の中にdiv要素を入れることはできませんので消去。以下のように修正。

<p style="text-align:left">
<div class="clip-box-a">
<p class="dot">九州〜発症。</p>
<p class="dot">症状の〜経験。</p>
<p class="dot">独身〜ます。</p>
<p class="dot">自宅〜ました。</p>
<p class="dot">ライフ〜好きです。</p>
<p class="dot">インターネット〜勉強中。</p>
<p class="dot">深掘り〜ご覧ください。</p>
<div class="sidebar-follow-buttons">
<a class="hatena" href=""><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a></div>
</p>
</div>

まずこれを修正してもらえないでしょうか。現時点でテンプレート全体の構造が狂っていますので、ここを直すのが最優先です。
あとblockquoteもpやul同様、記事内にhtmlを書くときにはソース途中での改行不可です。
htmlを改行「自動」で書くときはいかなるhtmlも横につなげるようにしてください。

* お返事急がれなくて良いですよ。ご自分のペースでやってくださいね。私も今日はこれで寝ます(笑)

2018/11/25 (Sun) 23:15

クアトロ  

ありがとうございます。

早朝からすみません。
時間だけはあるものですから。症状と職場へ復帰できないので生活苦です・・^^;(笑)

お気遣い本当にありがとうございます。

----- ①
”ul要素については修正できています。
で、修正段階でタグの抜け落ちなどが発生してしまったようです。以前は無かったエラーが新たに生まれてしまいましたね。こちらも修正しましょう。 ”
-----
↑良かった。ただ、タグの抜け落ちがどこか分かりませんでした・・。はい、分かり次第修正します。


----- ②
”サイドメニュー部「about me」ソースの書き出し <p style="text-align: left;">~関連の修正 ”
-----
↑公式プラグインプロフィール内<%introduction2>(紹介文説明変数)以外を削除し、ソースを確認してみました。
ここはご指摘通り

<div class="clip-box-a">
<p class="dot">九州〜発症。</p>
<p class="dot">症状の〜経験。</p>
<p class="dot">独身〜ます。</p>
<p class="dot">自宅〜ました。</p>
<p class="dot">ライフ〜好きです。</p>
<p class="dot">インターネット〜勉強中。</p>
<p class="dot">深掘り〜ご覧ください。</p>
<div class="sidebar-follow-buttons">
<a class="hatena" href=""><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a></div>
</div>

の形に戻ったことを確認しました。

----- ③
”blockquoteもpやul同様、記事内にhtmlを書くときにはソース途中での改行不可です。
htmlを改行「自動」で書くときはいかなるhtmlも横につなげるようにしてください。 ”
-----
↑引用に関しても改行不可なのですね・・。これもきちんとしないと。
一応ul要素同様、ソース途中改行に注意して修正しましたが、いかがでしょう?


次のステップ(タグの抜け落ちなど)へ行けるようでしたら、頑張ります。
またお伺いします。

2018/11/26 (Mon) 05:49
vanillaice (Akira)

Akira  

To クアトロさん

お疲れ様です (o'ω')ノ

もう一度サイドメニューの方を。改行の位置がわかるように矢印も付けます。プラグインについてはFC2の「改行『自動』」の効力はありませんので、<br>が付いているわけではなく「enterを押した」という意味だと思ってください。問題点ではなくただ単に位置をお知らせしているだけです。
その上で問題部位・不要部位を赤く記します。

現在の内容

<div class="img01 waku02 radius bImg shadow bWidth"><img src="" alt="クアトロ"></div>↩
<div style="text-align: center; font-size:large;">↩
<span class="marker-blue">クアトロ</span><br>
</div><div class="clip-box-a"><p class="dot">九州〜発症。</p><p class="dot">症状〜経験。</p><p class="dot">独身〜ます。</p><p class="dot">自宅〜ました。</p><p class="dot">ライフ〜好きです。</p><p class="dot">インターネット〜勉強中。</p><p class="dot">深掘り〜ご覧ください。</p><div class="sidebar-follow-buttons"><a class="hatena" href="https://***"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a></div></div>

----
ここまで「改行『自動』」のシステムで苦しんでいましたので恐らく混同されているのだと思いますが、『自動』はあくまでもFC2ブログエディター、つまり「記事編集画面」での機能です。つまりプラグインのhtml編集画面は無関係。
プラグイン編集時にenterキーを押しても<br>が自動で追加されることはありません。
なのでソースコードの可読性を重視して以下のように直してください。
というか私がコメント欄にソースを書いた場合には コピペ してそのままお使い頂くことを前提にしています(笑)
もちろん文章などを綺麗に入力し直す必要はありますが、htmlの構成についてはコピペが一番安全です。私がミスすれば「ごめんなさい。間違えちゃった。」とお伝えすることになりますが ^^;

1. img01 waku02 radius bImg shadow bWidth と複数のクラス名で装飾を小分けするのはやめましょう。これだけでもメンテナンスは困難になります。共通クラスを利用している他要素も見当たりませんので、どれか一つのクラス名に絞ってそちらへ全スタイルを書く ように修正した方が良いと思います。

現在
.img01 {
max-width: 500px;
margin: 0 auto;
box-sizing: border-box; --- 不要
-moz-box-sizing: border-box; --- 不要
-webkit-box-sizing: border-box; --- 不要
-ms-box-sizing: border-box; --- 不要
}

.waku02 {
position: relative;
}

.waku02.bWidth {
border-width: 16px; --- 重複(上書きされて打ち消されているので無駄な指定)
}

.waku02.shadow {
box-shadow: 1px 3px 8px rgba(20,20,20,0.3);
}

.waku02.bImg {
border: 10px solid #ccc;
border-image: url(省略) 15 repeat;
-webkit-border-image: url(省略) 15 repeat;
}

.waku02:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0px 8px rgba(255,255,255,0.6); --- 打ち消されて無駄
}

.waku02.shadow:before {
box-shadow: inset 1px 1px 6px 0px rgba(0,0,0,0.4), -1px -1px 2px rgba(40,40,40,0.2), 1px 1px 2px rgba(255,255,255,1);
}

.waku02.bImg:before {
box-shadow: none; --- 打ち消されて無駄
}
.waku02:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0px 8px rgba(255,255,255,0.6);
}

これだけの分割があります。radiusクラスについては指定がありません。
新しく xxx というクラス名を付け(言葉通りxxxではなく新規クラス名を考える、という意味です)以下のようにすればマッチングにも無駄が生じませんし管理が楽になるはずです。

<div class="xxx">

.xxx {
position: relative;
max-width: 500px;
margin: auto;
border-image: url(省略) 15 repeat;
border: 10px solid #ccc;
box-shadow: 1px 3px 8px rgba(20,20,20,.3);
}

.xxx::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 1px 1px 6px 0 rgba(0,0,0,.4), -1px -1px 2px rgba(40,40,40,.2), 1px 1px 2px rgba(255,255,255,1);
}

CSSは上から順にマッチングが行われ、重複があった場合には上書きされます。
例)
.xxx {color: white}
.xxx {color: red}

多重クラスだとさらにわけがわからなくなってしまします。

例) <div class="xxx yyy">
.xxx と .yyy が同じ要素を示している

.xxx {border: 1px solid white}
.yyy {border: 0}
この場合 .xxx と .yyy は同じ要素ですから、結果的にボーダーは付きません。

----
上記を踏まえ綺麗に直します。コピペでどうぞ。赤文字部位のみ書き換え必須です。
【html】
<div class="xxx">
<img src="" alt="クアトロ">
</div>
<div style="margin-bottom: 後続要素との距離px; text-align: center; font-size: large;">
<span class="marker-blue">クアトロ</span>
</div>
<div class="clip-box-a">
<p class="dot">九州〜発症。</p>
<p class="dot">症状〜経験。</p>
<p class="dot">独身〜ます。</p>
<p class="dot">自宅〜ました。</p>
<p class="dot">ライフ〜好きです。</p>
<p class="dot">インターネット〜勉強中。</p>
<p class="dot">深掘り〜ご覧ください。</p>
<div class="sidebar-follow-buttons">
<a class="hatena" href="https://***"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a>
</div>
</div>

【CSS】
/* プロフィール画像装飾 */
から
/* プロフィール画像装飾 */
までを削除、以下の内容を追加。

.xxx {
position: relative;
max-width: 500px;
margin: auto;
border-image: url(省略) 15 repeat;
border: 10px solid #ccc;
box-shadow: 1px 3px 8px rgba(20,20,20,.3);
}

.xxx::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 1px 1px 6px 0 rgba(0,0,0,.4), -1px -1px 2px rgba(40,40,40,.2), 1px 1px 2px rgba(255,255,255,1);
}

2つ目の /* プロフィール画像装飾 */ の直前に .filter02:after というのがありますが使われている様子がありません。不安であればこのセレクタのみ残しておかれると良いと思います。

-----
で、このabou meの部位のみ終了タグが足りないんですが、テンプレートの方のhtmlが壊れていませんでしょうか。
プラグインの内容はFC2サーバーからの自動出力で、私たち第三者が見られるのはサーバーで変換された後の内容だけです。
テンプレートには独自変数で記されますが、ブラウザで検証するときには既に変数が実際の文字列に書き換わっているので元の内容を確認することができないんです。なのでクアトロさんに確認してもらうしか方法はありません。

テンプレートのhtml内に
<!-- サイドメニュー -->
というコメントの付いている箇所があります。この付近のスクリーンショットを撮って見せて頂けないでしょうか。
<!-- サイドメニュー --> の文字列を含み、下の方は <!--edit_area--> までが収まるように。この位置です ↓
https://file.blog.fc2.com/vanillaice000/capture/capooiujde----1000.png
あと念の為確認で、

1. about me は「プラグイン」に記したものですよね?テンプレートに直接書いてはいないですよね?
2. about meのプラグインカテゴリは単独設置ですか?(例: カテゴリ1または2にabout meだけ)
3. about me のhtml内容がプラグインだとして、ソースの書き出しは
<div class="img01 waku02 radius bImg shadow bWidth">
ですか?それともこれより前に何か書いてありますか?

以上よろしくお願いします。もうあとここだけなので頑張りましょう。

2018/11/26 (Mon) 16:50

-  

管理人のみ閲覧できます

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

2018/11/26 (Mon) 19:58

-  

管理人のみ閲覧できます

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

2018/11/26 (Mon) 20:13

クアトロ  

上記総合的な設定の件

Akiraさん、こんばんは。クアトロです。

ここまでいろいろと懇切丁寧にお時間を割いて教えていただいて・・。
御礼の言葉もございません。

おっしゃった通りの設定は今一応全て施して見ました。
(.filter02:after~のクラスは、少し不安でしたのでそのまま残して適用してみたところ、プロフィール画像の枠要素のCSSの様で、若干以前よりも枠の印象が角張ったりと変化しました。)


それともう一つ、自分で気づいたところは、プロフィール設置ボタン要素
<a class="hatena" href="~"><i class="fa fa-check-square-o" aria-hidden="true"></i><span class="inner-text">Profile</span></a></div>○○○ ←この位置に</div>終了タグが一つ抜けておりました。


これがテンプレートの方のHTML崩壊の要因でしょうか・・・。
いかがでしょう。

2018/11/26 (Mon) 21:34
vanillaice (Akira)

Akira  

To クアトロさん

お疲れ様です (●'0'●)/

結論から先に言うと、修正できてます。良かったです(笑)
原因がようやくわかりました。
私は自分がここで書いたhtmlをクアトロさんがコピペする・しているという思い込みで話しをすすめていましたが、実際は
<%introduction2>
を用いた変数による出力を利用されていたということですよね。
てっきりp要素を充てている文章については手打ちされているものだとばかり。
いや、コピペしていない、というのはこのちょっと前のコメントで気づいたけれども(笑)

またややこしい話になりますが、<%introduction2> という変数はどこから内容を拾うかと言うと、環境設定の プロフィール です。
プラグインは改行『自動』は効きませんが、プロフィール入力欄は改行『自動』がデフォルトなんですね。ですからプロフィールの内容を反映させたい場合には記事内と同じで
・要素間改行なし(enter押しで<br>が入るので横に続けて書く)
・htmlが使えるようになっているので構文エラーに気をつける
この2点が重要です。
例えばプロフィールが

<div>
<div>
<span></span>
</div>

という形になっていた場合。divの終了タグが一つありませんが<%introduction2>変数によってこのままそっくり自動出力されてしまいますので結果構文エラーが引き継がれる、という仕様です。
変数による出力を用いると管理する場所が2箇所になってしまいますので、htmlを利用して複雑な長文を書かれる際には<%introduction>変数に頼るのではなく、プラグインのhtml画面に直接入力してください。
プロフィールが絡むとプラグイン内のhtmlとプロフィールのhtml、といったように2箇所での管理が必要ですが、プラグイン1箇所にまとめれば全ての内容を一度に管理でき、htmlの整合性も目で見てすぐにわかるようになります。

現在はコピペされているはずなので構文エラーは解消されています。
いずれにしてもプロフィール文は構文エラーのはずですから、どこかのタイミングで修正された方が良いと思います(既にお気づきのようなので修正済みかしら?)
テンプレートを変更された際にそのテンプレートで<%introduction2>が用いられている可能性もあります。その場合にはまたエラーを引き継ぐことになります。

一旦投稿します。

2018/11/26 (Mon) 23:09
vanillaice (Akira)

Akira  

To クアトロさん②

あと、ごめんなさい。
border-image
で検索するとCSS内に1箇所あります。その「下」に
border: 10px solid #ccc;
という記述があると思うんですが、これ逆でした。

×
border-image: url(https://blog-imgs-113.fc2.com/f/r/e/freelifestylelabo/paper123.gif) 15 repeat;
border: 10px solid #ccc;


border: 10px solid #ccc;
border-image: url(https://blog-imgs-113.fc2.com/f/r/e/freelifestylelabo/paper123.gif) 15 repeat;

box-shadowの様子など、最終型がどうなればクアトロさんの目標と合致するのかがわかりませんのでなんとも言えませんが、とりあえず私のポカの部分を修正して再確認をお願いします。

2018/11/26 (Mon) 23:19
vanillaice (Akira)

Akira  

To クアトロさん③

かなり複雑な作業になって混乱されているかもしれませんのでまとめますね。

【記事内でhtmlを使用する場合】

* 改行「自動」の場合
要素間改行をしてはいけない
例)
×
<blockquote>
<p>
文章
</p>
</blockquote>


<blockquote><p>文章</p></blockquote>

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


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

【環境設定 > プロフィール編集】

要素間改行をしてはいけない(記事内の改行『自動』と同じ)
html構文エラーに気をつける

以上です。
構文エラーは他にもありますが、クリティカルなものは排除できたはずです。
残っているエラーは
・FC2ブログの仕様上致し方ないもの(サムネイルつき最新記事プラグインの画像のalt属性無し)
・style要素を書く場所(こちらもサムネイルつき最新記事プラグインが対象です)
参考記事: body内のstyle要素が一定条件下で再びエラーに
https://vanillaice000.blog.fc2.com/blog-entry-796.html
・html5廃止要素の使用(サイドメニュー最下部の「Facebook」ウィジェットの scrolling属性 の使用, 同じくこのウィジェットの frameborder属性 の使用, 同じく allowtransparency属性 の使用)

上記については何もしなくて良いと思います。最新記事はhtmlとCSSを自分で全て書き直さなれけばいけなくなりますし、FBウィジェットについては外部の仕様ですしね (´・ェ・`)
現時点で最新記事から2つ目のページについては綺麗なもんですよ。他ブロガーさんと比較してもかなり綺麗な方だと思います(笑)

ただ、最新記事にある「カエレバ」なんですが、一度ソースコードを確認された方が良いかもしれません。コードの再取得というか。
エラーが大変多く、無関係な後続の要素にも悪影響を及ぼしています。
こちらについてはカエレバの仕様ですので気になるようであればチェックしてみてください。
URLはエンコードが必要なはずですがエンコード済みのソースって出してもらえないんだろうか (´・ω・`)
利用したことがないのでわかりませんが、ちょっと今検索してみたら
https://www.bcafe.jp/posts/93
これクアトロさんと同じ状況のはずです。コメント欄で交わされてている内容がまさしくそれそのもの。

とりあえず致命的なエラーは(カエレバを除けば)消滅しています。大変苦労されたと思います。お疲れ様です :)

----
あともう一つ。
Adsenseの設置箇所について。
Empty-streetのサイドメニューは追尾型です。メインコンテンツよりもサイドメニューが短い場合に画面外に流れていかないようにストップしますよね。こういうのを「sticky(スティッキー)」というんですが、Adsenseはこのスティッキー部位への掲載はポリシー違反のはずです。
私の最近のテンプレートはサイドメニューの最下部のみstickyですがEmpty-streetの場合はサイドメニュー全体がsticky。
ですからサイドメニューに掲載したい場合にはstickyを解除してください。
メインコンテンツ部位の近接に設置する場合には問題ありません。サイドメニュー掲載のみ注意。その時はまたご相談くださいね。JSの外し方などお伝えします。よろしくお願いします。
知らずに設置してBANされたら申し訳ないので事前にお伝えしておきます。

2018/11/26 (Mon) 23:42

クアトロ  

長かったです。本当にお世話になりました。【エラー修正完了のご報告】

なんというべきか・・。
言葉では改めて御礼と、お世話になりました。としか言えませんが。

とにかく、いろいろとお手間をかけさせてしまいました。本当にどうもありがとうございました。

自分よりもAkiraさんの方が大変だったように思います。
(受講料をお支払いしたいくらいですが、どうか御礼の言葉のみで・・m(_ _)m・・)
自分も、症状と並行しながらの作業でしたので、なかなかはかどらなかったですけどね。


はい。<%introduction2>を用いた変数出力を利用してました。^^;
なるほど。Fc2のエディタ、プロフィール環境の仕様なども含めて、今回は本当に勉強になったように思います。
(ええ。プロフィール文については修正済みで、確認して繋げて書いてます。大丈夫かと。)

border: 10px solid #ccc;
border-image: url(https://blog-imgs-113.fc2.com/f/r/e/freelifestylelabo/paper123.gif) 15 repeat;

↑こちらの件も改めて、ご記載いただきありがとうございます。


カエレバのソースコードは文章中のHTMLですよね?
再習得か・・・。一応リンクに関しては無効なリンクにはならないのですがね。(CSSも含めて見直さなければならないかな。こちらもいろいろと検索して調べてみます。無論、カエレバ公式のページから習得したソースなんですが・・。)
カエレバ自体普及してだいぶ古いので、エンコード済みのソースは現時点でご予定にないんでしょう。;;
いずれにしても、無関係な後続要素にも悪影響を及ぼしているのならば取り払います。私の場合、収益というよりも、純粋にお聴きしてもらいたい意味で記事にしましたし。
(Youtubeには非公式でほぼ全曲あげられてますが、相変わらず著作権の無法地帯ですね・・。無論リンク掲載はしません。)


Adsenseについての補足、お気遣いも本当にありがとうございます。
(というか審査すらされているのか、私のブログの内容が悪いのか。アクセスがないからなのか・・。審査用の自動広告用コードは「head」に正しく貼られている(はず)ですので。いずれにしても合否連絡すら、11日経っても届いていません(悲))


はい。恐縮ですが、今後もいろいろとご相談させていただくことは多いと思います。
こちらこそ、宜しくお願いいたしますm(_ _)m

2018/11/27 (Tue) 09:51

M  

To Akiraさん(ご報告)

Akira 様
お世話になっております。

FC2からやっと回答が送られてきましたので、そのご報告です。
と言っても、すでに修正はされておりますのであまり意味はないのですが(;^ω^)

下記がその内容です。

【FC2】お問い合わせの件に関しまして

いつもFC2をご利用いただきありがとうございます。
FC2ユーザーサポートの●●と申します。

このたびは、ご迷惑をおかけいたしまして申し訳ございません。

お問い合わせいただいた件につきまして、
システムの調整を行いました。

お手数をおかけいたしますが、
お客様のご利用環境下でも正常に動作・表示されるかどうかを
ご確認くださいますようお願いいたします。

今後ともFC2をよろしくお願いいたします。

この度はご相談に親切に対応して頂きましてありがとうございました。

また宜しくお願い申し上げます(^^)

2018/11/27 (Tue) 14:19
vanillaice (Akira)

Akira  

To クアトロさん(完了のご報告)

こんにちは (●'0'●)/

adsenseの方を申請されている段階では他のアフィリは利用しない方が良いかもしれませんね。
併用不可というルールはありませんが、一応競合になるわけなので(特にAmazonと楽天はadsense取得後もアクセスから外すなどの対策が必要かもしれませんのでそのあたりもよくお調べになってくださいね)

クアトロさんは途中で投げ出すこともありませんでしたし、質問者によっては逆ギレする方も居るなか本当に頑張られたと思います。
お疲れ様でした。お体もご自愛くださいね :)

2018/11/27 (Tue) 15:10
vanillaice (Akira)

Akira  

To Mさん(終了のご報告)

こんにちは (●'0'●)/

今見たら公式なアナウンスも出てますね。
FC2側の返答が「え?そんな症状ありませんけど?」的なものでなくて良かったです(笑)
お忙しい中ご報告ありがとうございます :)

2018/11/27 (Tue) 15:12

M  

To Akiraさん(お返事不要)

Akira様

こんにちは。

Akira様のコメントを拝見してから確認してみるとFC2が公式にアナウンスしておりました(^^)

ボクはどうやら先走ってしまったようですね(;^ω^)

余談ですが、Akira様が今お使いになられているテンプレートはとても格好イイですね!8月限定だということを見逃しておりました(-_-;)

今ボクが使っているEmpty-streetですが、ブラック版が発表されないかなーって思っている今日この頃です(;^ω^)

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

2018/11/28 (Wed) 13:57

-  

管理人のみ閲覧できます

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

2018/12/08 (Sat) 19:04
vanillaice (Akira)

Akira  

To Empty-street スクロールアンカー解除の件 内緒さん

こんばんは ('0')/
承認されたのですね。おめでとうございます。

注)スクロールアンカー不要の方ここから削除
で検索するとhtml内に出てきますのでガイダンスに従って削除してください。CSSを修正する必要はありません。

-----
レイアウト的なことで特に注意することは無いと思います。
強いて言えば「レスポンシブタイプ」を選択して頂くのと、Adsenseは(仕様が変わっていなければ)ローディングの後にブラウザサイズを変更しても幅が変わりませんのではみ出します。ローディング直後はきちんと収まっています。
これは仕様なのでお伝えしておきます。

よろしくお願いします。

---- 追記
一つありました。先回お伝えしようと思ってすっかり忘れてました。
内緒さんはナビゲーション内のリンクを追加されていますので、本記事内の「ナビゲーション内について」の章の内容の対象者です。
記事内容を参照しながら適切なブレイクポイントを設定してください。現時点ではブラウザサイズを変更するとサイト内検索とprofileが重なってまともに使えません。
レスポンシブデザインをカスタマイズする際は一定のブラウザサイズだけで行わず、マウスでサイズを大きくしたり小さくしたり、あらゆる画面サイズできちんと収まっているかどうか確認をしてくださいね。
よろしくお願いします。

2018/12/09 (Sun) 00:31

クアトロ  

スクロールアンカー解除及びブレイクポイント設定の件【完了のご報告】

おはようございます。お世話になっております、クアトロです。
(考えてみたらシークレットにする必要性なかったのにシークレット回答してました。バカ)


有難うございます! もっとかかると思っていたのですがね・・。
最近すこぶる症状が良くないので、これが唯一嬉しい出来事でした。

追記の件はどうも有難うございます。(どうもレスポンシブというのを忘れブラウザ最大幅のまま作業してしまい、「可変しながら調整」ということをつくづく疎かにしてしまいますよね。)一応ブレイクポイントは1000px辺りで可変するよう調整したのですが、なんとか現状のナビゲーションでは大体上手く調整できたかなと思います。


広告レイアウト仕様の件、了解致しました。


Akiraさんもお時間あれば、たまにはブログ覗きに来てくださいね。←興味ないかもしれませんけど^^;
今年はテンプレート使用、構文エラーの件を含め、本当に色々なことでご教授いただき感謝しております。

まだ少し早いですが、お子様ともども、年末年始含め、体調にはくれぐれも気をつけてお過ごし下さい。

今後とも宜しくお願いいたしますm(_ _)m

2018/12/09 (Sun) 07:21
vanillaice (Akira)

Akira  

To クアトロさん(完了のご報告)

こんにちは ('0')/

はい。またお邪魔させてもらいますね 。
クアトロさんもどうぞお身体ご自愛しつつ良いお年をお迎えください :)

2018/12/09 (Sun) 17:05

-  

管理人のみ閲覧できます

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

2018/12/09 (Sun) 19:14
vanillaice (Akira)

Akira  

To Empty-street広告バナーの件 内緒さん

こんばんは ('0')/

バナーがどんなものでどんなhtml, CSSソースなのか私では知る由もありませんので、実際に掲載して頂かないことには何のアドバイスもできません。
よろしくお願いします。

2018/12/10 (Mon) 00:30

-  

管理人のみ閲覧できます

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

2018/12/10 (Mon) 09:20
vanillaice (Akira)

Akira  

To Empty-street広告バナーの件 内緒さん②

こんにちは (o'ω')ノ

ちょっと整理しますね。
私が事前にお伝えしたのは以下の2点です。
・レスポンシブタイプを選ぶこと
・adsenseの仕様上、ローディング直後は綺麗に収まっていてもブラウザサイズを変更しても横幅が可変にはならないこと(ローディング直後に最適なサイズで表示されるが以降の変更は再ローディングまで行わない)

で、ご質問と現状を整理しますと

> 中央にバナー配置したいのですけれど〜右に寄ってしまう〜ちなみにレスポンシブタイプではありません〜

.header-billboard自体は中央寄せになっていますが中身が.header-billboardよりも大きいのでoverflow(溢れ, はみ出し)している状態です。
広告はiframeの別documentとして表示されます。親のdocumentがテンプレートのhtmlで、その中に別documentの広告、とうことです。

<do

-----
<html> --- 親doc(テンプレート)
<head> --- 親doc(テンプレート)
</head> --- 親doc(テンプレート)
<body>

<script></script> --- 広告スクリプト(広告内容の書き出し処理)
<iframe> --- 広告自体の要素
<html> --- 子doc(広告)
<head> --- 子doc(広告)
</head> --- 子doc(広告)
<body> --- 子doc(広告)
広告関連要素(省略)
</body> --- 子doc(広告)
</html> --- 子doc(広告)
</iframe> --- 広告終了

テンプレート内容
</body> --- 親doc(テンプレート)
</html> --- 親doc(テンプレート)

こういう感じですね。こういうのが別のdocumentなんですが、基本的にiframeが別documentを書き出す時には親documentからのCSS操作などは受け付けません。つまりテンプレートのスタイルシートにCSSを書いても無効です。iframeをdiv要素などで囲っても無理です。かといってJSで無理やりiframeのCSS操作をすれば恐らく規約に抵触するのではないかと思います。
なので レスポンシブタイプを選んでください とお伝えしました。

-----
特徴を再度お伝えしましたので、適切なものを選び直されることをおすすめします。

----- 追記
広告自体はちゃんとレスポンシブに対応しているようですよ。
親要素(script要素を挟むために内緒さんが入れた.header-billboard)に margin: 0 10em 0 0 の指定があります。これは上0px, 右10px, 下0px, 左0px という指定で、width: 100% を同時に指定しているのですから 横100% + 右に10px ということになります。すなわち超過です。
このために中にある広告がwidthの制限を受け、.header-billboardに収まりきらずに右にはみ出ています。
.header-billboardの要素は不要ですから削除すれば自動で収まると思いますので一度お試しください。
それでダメならレスポンシブタイプに選び直しですね。つか、たぶんレスポンシブになってますよ。.header-billboardが邪魔してるだけで (´・ω・`)

2018/12/10 (Mon) 15:48

-  

管理人のみ閲覧できます

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

2018/12/10 (Mon) 19:22
vanillaice (Akira)

Akira  

To Empty-street広告バナーの件 内緒さん③

今の位置から </header> の直前に移動させてみるとどうでしょう。これ私伝えてなかったですね。ごめんなさい。
一度ご確認ください。

2018/12/10 (Mon) 20:34

-  

管理人のみ閲覧できます

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

2018/12/11 (Tue) 02:53

-  

管理人のみ閲覧できます

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

2018/12/11 (Tue) 09:31
vanillaice (Akira)

Akira  

To Empty-street広告バナーの件 内緒さん④

こんにちは (o'ω')ノ

センタリングについては広告の選択の際にレイアウト指定できるはずですからご確認ください。

で、広告の設置指南については原則としてお断りしています。理由は私が実証見聞することができないこと(コードを勝手に貼るわけにいきません)や、広告は多種多様なサービスがあり、私がそれぞれの規約を確認する義務がありません。
なので後は私の知りうる限りの情報を記しますので、ご自身で対策をお願いします。

まず、センタリングについては先に記した通りですが、カスタマイズの性質上不要になるかもしれませんので作業は最後に取っておいてください。それ以前のカスタマイズで中央になるようでしたら不要です。

scriptで内容を書き出すものについては どこからどこまでがhtmlとして見えており、どこからどこまでがscript実行後の内容なのか が一見しただけではわかりません。なので本来はご質問時にコードを書いて頂かないと検証できません。

<script async src="xxx"></script>
<ins class="adsbygoogle" style="display: inline-block" data-ad-client="ca-pub-xxxxx" data-ad-slot="xxxxx" data-ad-format="auto"></ins>
<script>省略</script>

これで合ってますでしょうか。
結局はこれが一番大事なので必ず確認をしてください。

-----
はみ出す原因なんですけども、「右に寄っている」という表現は的確ではなく、marginやpaddingによって画面幅を制限されているため「右にはみ出している」んですね。
adsenseはデバイスの横幅を見分けています。例えばiPhone SEならば横320pxですから、320あるいは318とかそのぐらいで表示するのではないかと思います。

ところがテンプレートというのは大抵の場合左右にpaddingによる余白が設けられています。そうしないとテキストが左右辺にピッタリくっついて非常に読みづらくなるからです。
Empty-streetの場合はPCで60px、タブレットで30px、スマホで15pxの余白を左右につけています。iPhone seだと
320px - (15 × 2) = 290
290pxの領域しかないのに320pxで広告を表示してしまえば当然はみ出します。右に寄っているように感じるのは左のpaddingのせいです。

方法①
paddingの影響を受けない箇所に貼り付ける
先回のヘッダービックバナーはこの方法です。headerにはpaddingを設けていませんので比較的小さめな画面幅のときは左右いっぱいを使い切るように広告が表示されているはずです。
ですがこの方法だとpaddingの無い部分をテンプレートのCSSから調べ出さないといけませんので、html, CSS初心者の方には向きませんし掲載場所がかなり限定されてしまいます。
(注: ヘッダー部位の広告のセンタリングは .header-billboard に style="text-aglin: center;" 追加でできるはずです)
リンクユニットについては内緒さんのページ内で実物を確認できませんので言及できません。

----
方法②
ネガティブマージンで左側を引っ張る
記事下にユニットを入れるのなら使えるかもしれませんが、繰り返しますが実物が無いのではっきりはわかりません。
広告関連コードをdivで囲い、そのdivに style="margin-left: -数値px を指定することで左側が引っ張られて右のはみ出した部位を画面内に引き込むことができるかもしれません。

----
方法③
メディアクエリの設定を変更する
カスタムでstyle要素によるメディアクエリを使えるようになっているはずです。分岐はPC, タブレット(768px). スマホ(320px)ではないかと思います。具体的なことは存じませんので確認してください。
<style>
@media screen and (min-width: 320px) {
.xxx {
max-width: 数値px;
}
}
</style>

max-widthではなくwidthかもしれませんが、ともかくこの数値を変更。Empty-streetの余白はお伝えしましたのでその数値を規定から引いてください(左右ですから2倍です, スマホなら15×2で30px)

----
ネガティブマージンが一番簡単かもしれません。
ただし技術的に「できる」のと規約的なそれとが必ずしも合致するとは限りません。規約についてはご自身で確認をし、自己責任を徹底してください。
よろしくお願いします。

2018/12/11 (Tue) 11:54

-  

管理人のみ閲覧できます

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

2018/12/11 (Tue) 14:24
vanillaice (Akira)

Akira  

To Empty-street広告バナーの件 内緒さん⑤

お疲れ様です (o'ω')ノ

ともかくまずは指南通りにやってみましょう。
・ビッグバナー --- style属性に text-align: center を追加すればセンタリングになるはずです。そしてこの部位はこの作業で終了ではないかと思います。
(displayプロパティは私の記し忘れですので追加しておきました)
・カスタムデータ属性(data-xxx)の変更を試す前にネガティブマージンは試しましたか?

data-ad-client や data-ad-format というのは カスタムデータ属性 といって、文字通りユーザーの独自拡張なんですね。ですからhtml5の一般構文ではないんです。
例えば
data-akira="open" でクリック展開する、data-akira="close" で閉じる、など、ユーザーが任意で属性の役割を指定できます。
仕様・仕組みについてはGoogleがscript内容をどう作っているかによるんです。ですから例えばQ&Aで質問するとしても、そのdata属性値に「何が用意されているのか」「真偽値(true or false)が指定できるのか、またそれぞれの値が存在するのか」などを相手に知らせないとどうにも回答ができないんですね。
というわけでdata属性を操作する際にはGoogleのdata属性一覧を参照しなければなんともなりません。

私が参照したのは以下のページです
https://www.acky.info/tips/web/00020.html

----
結局今何が起こっているかというとこういうことです ↓

参考記事: 記事の横幅が広すぎて文章の見た目が悪い… と感じたときの対処法
https://vanillaice000.blog.fc2.com/blog-entry-810.html

上記記事に「widthに絶対値をつけてはいけませんよ」と書いてありますのでその部分だけ読んでください。
adsenseのバナーというのは絶対値のpx指定なんですね。それ故に

<div class="xxx" style="width: 100% !important"> --- 制御用に追加したdiv
取得したコード
</div>

例えば制御用divに横幅は100%でさらにimportantをつけて最重要規則として指定しても、それは.xxxのdivが守るだけで中身が仮に700pxというように絶対値が記されていた場合、.xxxが500pxに制御されていたとしても中身は700pxとはっきり明示されているので700pxを守って、結果はみ出します。
adsenseのバナーは絶対値なのですから、この値を変更しない限りはみ出しは直りません。
それ故にネガティブマージンで引っ張るという方法を提案しました。

それよりもっと根本的なその絶対値の値を変更する、というのがメディアクエリによる変更です。width: 700px がはみ出すのならば width: 500px に変更しましょう、というのがこちらの方法です。数値については「例えばの話」ですよ?念の為。
言ってみればGoogleの横幅自動調整に頼らない、自分で決める、というやり方。

リンクユニットがはみ出す仕組みは既にお伝えしたとおりです。デバイス横幅と同等の値をpxで出力するのでテンプレート側のpaddingやmarginの影響ではみ出します。
これはどれだけやっても変わらないですよ。ネガティブマージンかメディアクエリのいずれかを操作しないことには。
結局は「Googleがpxの絶対値ではなく%の相対値で出力してくれれば良いのに」ということなんですが、それはGoogleの仕様ですから仕方がありません。

何はともあれ「ビッグバナーの制御用div(親のdiv)にtext-align: center」

「リンクユニットの様子を見ながらネガティブマージン指定」
を実際にやってみてください。
それでもダメならメディアクエリで自分で横幅を決める、と。

---- 追記
今拝見しましたが、記事途中に埋め込まれてますね。ネガティブマージン云々以前に完全に超過してますね(笑)
これもうメディアクエリでやらないとどうしようもないと思います。あるいは
data-ad-format=”auto”
の追加と、display値がblockになっていますので inline-block に変更することで上手く調整できるかもしれませんが。
あるいは上記2点とメディアクエリの複合か。
またあるいはもっと適切なものを選べるのか。

その前にテンプレートCSSに一つ追加してみてください。
primary {
で検索するとCSS内に2箇所ありますので、最初の方に
max-width: calc(100% - 50px - 300px);
を追加。2つ目の方に
max-width: 100%;
を追加。
もしかしたらこれで上手くいく「かも」です。

あとついでに .ad-link-unit の margin-bottom が margin-bottm のスペルミスで効いていませんので修正を。

----
コメントアイコンの件もありましたね。
.name管理人クxxx:before
ではなく
.nameクxxx:before
ですよ。

2018/12/11 (Tue) 15:42
vanillaice (Akira)

Akira  

To Empty-street広告バナーの件 内緒さん⑥

今拝見しましたらユニットの方も上手く収まっているようですがいかがでしょうか。
これでヨシと思われましたらテンプレートの方に指定を追加しようと思います。そして管理人コメントも自動で表示されるように変更しようかと。
内緒さんがモニターみたいになってしまってすみません ^^;

とりあえずご報告をお待ちします。

2018/12/11 (Tue) 21:02

-  

管理人のみ閲覧できます

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

2018/12/11 (Tue) 21:07

-  

管理人のみ閲覧できます

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

2018/12/11 (Tue) 21:10
vanillaice (Akira)

Akira  

To Empty-street広告バナーの件 内緒さん⑦

> Xperia SOV36〜端枠がほんの少し欠ける〜

絶対値指定の問題点はまさにこれなんですよね。Googleはメジャーな端末のビューポートはサポートしていますが全てではないんです。
Xperia SOV36の横幅は424ではないかと思います。なので分岐は
@media screen and (max-width: 424px) --- Xperiaを「含み」それ「以下」の横幅の場合 ①
@media screen and (max-width: 423px) --- Xperiaを「含まず」それ以下の〜 ②
または
@media screen and (min-width: 424px) --- Xperiaを「含み」それ「以上の」〜 ③
@media screen and (min-width: 425px) --- Xperiaを「含まず」それ「以上の」〜 ④
という意味なので、maxとminの意味を取り違えないようによく注意しながら、どう分岐させたら良いかを検討してください。

今回の場合は①か③になると思います。
①の場合は320pxが最小機種ですから、それを軸にしてください。Xperiaの424で考えてしまうとiPhone seなどではみ出します。
③の場合は逆にXperiaを軸に。
といっても難しいですよね。たぶん。この分岐でも良いかなぁ ↓

@media screen and (min-width: 424px) and (max-device-width: 425px) {
...
}

これだともうほぼXperia専用分岐という感じですね。誤差1px。その前に424pxで本当に正しいか確認もお願いします。
とりあえずほぼ解消ということで大丈夫でしょうかね。お疲れ様ですー。

-----
ここからテンプレートのアップデートの件です。
これから少しづつ修正するんですが、今回スピード調整(高速化)などは行いません。そこで内緒さんがアップデートするかどうかになるんですけども。
現時点で内緒さんはFontAwesomeの 旧バージョンの書式 を利用してリンクなどを追加されてるんですね。仮に記事内でもFAを使うことがあるとすると、できれば今のうちに新しい書き方に変更されたほうが良いと思います。
理由についてはのちほど記事にしますのでそちらでご確認ください。

・旧FAでやりたい
・任意カスタマイズの再適用が困難

という場合にはアップデートはおすすめしません。
ただし上記に該当しない場合には面倒でもアップデートされた方が後々楽ではないかと思います。
ともかく記事を書きますね。よろしくご検討ください。

2018/12/12 (Wed) 00:18

-  

管理人のみ閲覧できます

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

2018/12/12 (Wed) 05:55
vanillaice (Akira)

Akira  

To Empty-street広告バナーの件 内緒さん(完了のご報告)

こんにちは ('0')/

はい。アップデートは強制ではありませんので、されるにしてもご自身のタイミングで行ってください。
そして記事を書くことが最重要課題ですから、そちらを最優先で。
お身体も気をつけてくださいね。あまり根を詰めすぎてもよくありません。当面は落ち着いて記事の更新に集中できるのではないでしょうか。
お疲れ様でした :)

2018/12/12 (Wed) 14:17

そふぃあ  

ありがとうございます!

Akiraさん、こんにちは。
テンプレートのメンテナンス、お疲れ様です&ありがとうございます。

早速DLして調整してみました。
これでまた、このテンプレートとのお付き合いが長くなりそうで嬉しいです。
(新作が発表になる度、ついつい目移りしてしまうのですけど(汗))

どうかAkiraさんもご自愛ください。

2018/12/13 (Thu) 11:31
vanillaice (Akira)

Akira  

To そふぃあさん

そふぃあさん、こんばんは (●'0'●)/

何か不備がありましたら教えてくださいね。
いつもありがとうございます :)

2018/12/13 (Thu) 19:55

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)