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

vanillaice (Akira)

vanillaice (Akira)

Alternativeテンプレート
PCアイコン TBアイコン SPアイコン

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

最終更新 2018.2.10

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

  • 画像遅延読み込みを導入しました(グリッドページ及び個別記事の一部分)
  • jQueryのバージョンを3.3.1にUPしました
  • Font Awesomeのバージョンを5にUPしました(CSSリンク+アイコンフォントからJS+SVGに変更になります)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • floatレイアウトをflexレイアウトに変更しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました
  • コメント欄で管理人プロフィールアイコンをデフォルト表示できるようになりました(FC2独自変数の追加)

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

名称 Alternative
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大860px
サイド --- 270px
記事内で利用可能な見出しレベル h2からh6
構造化マークアップ(個別記事のみ) BreadCrumbs(パン屑リスト)
BlogPosting
GTmetrixスピードスコア
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
プラグイン1・2 --- 右
プラグイン3 --- 下
プラグイン1・2 --- 右 or 下(デバイス幅依存)
プラグイン3 --- 下
プラグイン1・2・3 --- 下
過去の更新一覧
更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード

参考記事
SNSシェアリンクのエンコード

更新履歴 2017.1.13

・RSS新着サムネイルをFC2独自変数での表示に切り替えました

関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.10.9

メンテナンス
・ FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 動作が若干軽快になりました
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・その他微調整

現状把握しているWindows Edge及び IE11に於いて Decoyに関連する表示不備については以下の通りです(Microsoftの修正待ちで ^^;)
・ リンクにtransition効果が与えられている場合のhover色継承バグ
・ 特定の状況下でfixed要素の位置がずれる

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

こんにちは へくせんびーすとです(ニコ)
海外ドラマGRIMMがおもしろすぎ 続き気になりすぎでハゲそう (´ぅω・`)

おるたなてぃぶ
互い違いタイルレイアウト
(12日あたり申請予定です)

TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更

カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします

No image画像変更
How to change alternative image

然るべきページの然るべき箇所に画像が存在しない場合に代替として表示される No image画像 ですが
表示対象ページは

・トップページ (FC2サムネイル)
sample

・検索結果ページ (FC2サムネイル)
sample

上記3箇所です
該当URLは

https://blog-imgs-84.fc2.com/v/a/n/vanillaice000/alternativenoimage.jpg

htmlソース内に1箇所
CSSソース内に2箇所
3箇所 それぞれ希望の画像アドレスに差し替えてください

準備する画像のサイズは長辺が600px程度 縦横比不問
新着サムネイルと検索結果のサムネイルは表示サイズが小さいので
トップページ用とは別に 長辺150px程度のものを用意されても良いかと思います
その方がページは軽くなります(微々たるものですが)
いずれにしろ事前に容量の削減は行っておいてください

デフォルト画像 (600✕400 縮尺掲載, 34KB, public domain)
sample
ドミナントカラー
Dominant colors
rgb(148,170,201) 基本リンク色, サイドメニューリンク色, ナビゲーションマウスホバー下線色 など
rgb(245,245,245) 全体背景色 など
rgb(51,51,51) 基本文字色 など
rgb(240,240,240) フッタープラグイン背景色 など

数字だけを抜き出してCtrl+Fキー検索されますと 不透明度つきのものも全て出てきます
例) 51,51,51

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

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

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

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

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

関連記事

Comments 96

There are no comments yet.

ちこりん  

No title

楽しみです!
いつも素敵なテンプレートありがとうございます!(^ ^)

2016/04/10 (Sun) 15:54 | EDIT | REPLY |   

yousinkai  

ブログの名前の位置移動について

心眼流 空手道 桜神会館 の名前の位置を左側にずらしたいのですが移動方法を教えていただけないでしょうか?

よろしくお願いいたします。

2016/04/10 (Sun) 17:32 | EDIT | REPLY |   

Akira  

To ちこりんさん

こちらこそありがとうございますー ∩(●'ᴗ'●)∩

2016/04/11 (Mon) 09:43 | EDIT | REPLY |   

Akira  

To yousinkaiさん

ありがとうございます。
テンプレートはSakura_Nightglow(夜桜背景)でお間違いないでしょうか。
Ctrl+Fキー検索

p.ttl

詳細は以下の通り
p.ttl {
margin: 0 auto;
max-width: 600px;
font-family: 'Great Vibes', cursive, georgia;
font-size: 35px;
padding: 65px 0 10px;
text-align: center;
}

赤字部分を修正して以下の通り。

p.ttl {
margin: 0 auto;
width: 80%;
max-width: 1200px;

font-family: 'Great Vibes', cursive, georgia;
font-size: 35px;
padding: 65px 0 10px;
}


続きまして検索。

p.ttl a

詳細は以下の通り。
p.ttl a {
padding: 0 1em;
}

上記を削除

続きまして検索

.sub

詳細
.sub {
margin: 0 auto;
max-width: 650px;
padding: 0 8px;
font-family: 'Great Vibes', cursive, georgia;
font-size: 15px;
color: rgb(150, 6, 74);
text-align: center;
}

赤字部分修正で以下の通り。

.sub {
margin: 0 auto;
width: 80%;
max-width: 1200px;

font-family: 'Great Vibes', cursive, georgia;
font-size: 15px;
color: rgb(150, 6, 74);
}



--------

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

2016/04/11 (Mon) 09:58 | EDIT | REPLY |   

いちご  

はじめまして

.
スマホ表示(トップページ)の画像に個別記事へのリンクは、付けられませんか?

教えてください。

お願い致します。

2016/04/14 (Thu) 22:15 | EDIT | REPLY |   

きろろ  

タグクラウドについて

こんばんは、きろろです<(_ _)>

Alternative、DLさせていただきました!(^^)!
これ、待っていたんですよねw

で、さっそく本題に……

ユーザタグ、TagCloudなんですが、
なぜか一個ずつ縦に表示されてしまいます。

以前、AkiraさんのところでTagCloudをこうすればいいよ、的な記事を読んで、
プラグインの書き直した記憶があるんですよね。

それからずっといじってないのですが、
なぜ今回、このテンプレートだけTagがずらっと縦に一個ずつ表示されてしまうのでしょうか?

ちなみに3カラム目にTagを、持って来ました。
Akiraさんの配置と一緒にしてみたんですが、やはり縦に表示されてしまいます。

お暇な時に、レクチャーをお願いします<(_ _)>

2016/04/15 (Fri) 00:25 | EDIT | REPLY |   

きろろ  

TagCloudについて

連投で申し訳ございません。

ご報告までに。
プラグインを入れ直したら、ちゃんと表示されました<(_ _)>
Alternativeでも、問題なく表示されてます。

お騒がせしました<(_ _)>

2016/04/15 (Fri) 03:44 | EDIT | REPLY |   

Akira  

To いちごさん

ありがとうございます

結論から言うと、付けられます。
これちょっと不親切だったかもですね。ごめんなさい。
他にも付けたい方がいらっしゃるかもしれませんので、後ほど記事の方に手順を掲載しておきますね。

2016/04/15 (Fri) 08:48 | EDIT | REPLY |   

Akira  

To きろろさん

きろろさんこれね、理由があるんです。
公式のプラグインについては縦にならないような装飾を私の方で組んでます。
以前ご紹介したタグクラウドのパターンだと一手間必要。
その件に関連して記事を出そう出そうと思いながら半年ほど過ぎてしまいました(笑)
お題目としては
「プラグインにはclassまたはid名をつけておきましょう のススメ」
今日書けたら書きますね。
申し訳ないです。

2016/04/15 (Fri) 08:50 | EDIT | REPLY |   

いちご  

こんばんは

.
返信&回答ありがとうございます。

挑戦してみます。

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


2016/04/15 (Fri) 18:36 | EDIT | REPLY |   

Akira  

To いちごさん

お手数おかけします。
よろしくお願いします (*_ _)

2016/04/16 (Sat) 11:44 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/04/17 (Sun) 21:23 | EDIT | REPLY |   

Akira  

To Alternative 過去記事のfloatが解除された件 内緒さん

ありがとうございます

過去記事でフロートされていたものが全て無効に、ということですが、
ソース内にfloatの文字を見つけることができませんでした。
で、推測なのですが
クラス名にpull-leftというのがありますよね。
これはもしかしたら以前お使いになっていたテンプレートの「独自クラス」ではないでしょうか。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-289.html

恐らく間違いないと思います。
独自クラスの問題というのは、テンプレートを変更してしまったら全て無効化されてしまう点にあります。
同じ製作者のテンプレであればたぶん同じクラスが使われていると思いますが、
別の製作者が全く同じソース内容を記載していることの方が稀というか奇跡(笑)

対処法
・以前と同じ製作者様のテンプレートで選びなおす
(絶対とは言い切れませんが)

・独自クラスの該当内容を当該テンプレに移植する
(これは内緒さんとその製作者様との間のことですので私はどうこう言えません)

・記事内でfloat処理できるように書き直しをする(独自クラスに頼らない)

このいずれかでしょうかね (´・ω・`)
以前のテンプレからの移植のお手伝いやソース内容への言及は致しかねますのでごめんなさい (*_ _)
おすすめは最後の「書き直す」なんだけども(笑)
結構大変な作業ですよね。
移植については私はなんとも言えませんですー (´・ω・`)
(心象が良くないのは確かです。や、どうだろう。わからん(笑))

2016/04/17 (Sun) 23:18 | EDIT | REPLY |   

みなみ  

No title

トップページで表示される
サムネイル画像サイズと文字数の変更は可能なのでしょうか?
宜しくお願いいたします。

2016/05/06 (Fri) 15:58 | EDIT | REPLY |   

Akira  

To みなみさん

こんばんは。

できるにはできますが、
・画像サイズを大きく? or 小さく?
・縦横比を変更?
・文字数は増やす? or 減らす?

この如何によってお伝えする内容が異なります。
画像に関しては、レスポンシブデザインですから画面サイズが変われば画像のサイズも変わりますので、どこを基準にされるかというのがまず一つ。
文字数の方は、このテンプレについては「文字数」での制御ではなく「高さ」で制御しています。
(ちなみにFC2要約記事で抽出できる文字数は最大200文字までです。)
でないと左右(画像とコンテンツ内容)とのバランスを取ることができません。
いずれにしてもかなり苦労すると思われます。

2016/05/07 (Sat) 02:02 | EDIT | REPLY |   

みなみ  

ありがとうございます

トップページサムネイル画像サイズを小さくし文字数を減らせたらと思いまして・・・

いずれにしてもかなり苦労するとありましたので、

その知識がありませんので諦めこのままご使用させていただきます。

ご丁寧にお教えいただき有難うございました。

2016/05/09 (Mon) 02:56 | EDIT | REPLY |   

Akira  

To みなみさん

こんにちは (・ω・)ゞ

共に縮小の方向なんですね。
一応手順をお伝えしておきます。

① サムネイルを小さく

こちらはサムネイル自体を小さくするということよりも、全体のコンテンツ幅を縮小という形が一番良いと思います。
Ctrl+Fキー検索

#container

4つマッチしますが一番最初のものが対象です。
CSSソース内の上の方にあります。
この項目の
width: 80%;


width: 70%;

に変更。
ブラウザの中央にギュっと凝縮されたような見た目にはなりますけれど。
続いて検索

#wrapper

この項目の
min-width: 80%;
の80を変更した数字と同じものに。

-------
② 文字数を減らす

こちらも文字数を減らすというよりも高さを減らします。
Ctrl+Fキー検索

.topentry-description

2つマッチしますので最初のものを。
項目
height: 7.5em;


height: 6em;

あるいは 4.5em あたりに変更します。

-------

以上ですが、いずれにしてもおすすめではありませんし、画面幅との兼ね合いもありますのでブラウザを大きくしたり小さくしたり、という確認をされながら進めてくださいませ。

2016/05/09 (Mon) 14:30 | EDIT | REPLY |   

みなみ  

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

一度挑戦してみます、多分元に戻しそのまま

使用させていただくと思います(笑)

2016/05/10 (Tue) 10:59 | EDIT | REPLY |   

Akira  

To みなみさん

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

はい。その方が良いと思います(笑)
お時間のあるときにでもお試しください

2016/05/12 (Thu) 00:15 | EDIT | REPLY |   

みなみ  

<table width="600" border="0" cellpadding="0" cellspacing="0">
に横幅600の画像と改行し文章を入力した場合、パソコンで見る分には
問題ないのですがスマホで見るとずれているのですが表がダメなのでしょうか?

2016/05/12 (Thu) 14:47 | EDIT | REPLY |   

Akira  

To みなみさん

表が「ずれる」というのはどういった意味合いでしょうか。
画面からはみ出す、ということかしら (´・ω・`)
tableはそうですね。それがtable(表)の特徴です。

Alternativeはレスポンシブデザインですので、タブレットやスマホではコンテンツの幅をリサイズする設定になってます。
tableへの横幅設定に600pxという具体的数値を用いられますと、スマホの横幅は600pxありませんので当然はみ出します。
tableはdivと異なり、自身の外側のサイズを重視しません。
tableは外ではなく内側のサイズ(セル内容)によって横幅が決定します。
例えば600pxと指定していても、仮にセル内容が改行なしで600pxの幅を超えた場合
全体幅は指定の600を無視してどんどん大きくなります。
(このソース内容では、という意味です。回避する方法はあります。)
ですからtable自体がレスポンシブに向いていないというのは事実です。

回避策
① max-width: 100%;
を指定

これはブラウザ依存です。
600pxの指定だけれども、画面の100%が600pxに満たない場合にはそこで広がりをストップ。
という指定。
正確なCSS解釈としては
「tableにmax-width」は効かない」
というのが正しいですが、iPhoneのSafariなどでは効きます(笑)
パソコンでもChromeやFirefoxでは効きません。
で、今「パソコンでは大丈夫」とのことですが、ブラウザがChromeやFirefoxであれば画面縮小ではみ出すはずです。
tableへのmax-width, min-widthはたぶんie11では効くかも(確認してません)
でもまあ、とりあえずiPhoneでは(今のところ)効きます。
この方法を用いるのならばCSSソースをCtrl+Fキー検索されますと

table {
word-break: break-all;
}

という項目がありますので、一部追加で以下の通り。

table {
word-break: break-all;
max-width: 100%;
}

この方法の利点 = 作業が簡単(笑)
デメリット = 本来は正しくない挙動

② tableへの横幅指定に%を使う

これが一番良い方法です。
テンプレートのソースを編集するのではなく、記事内ソース(今みなみさんが掲載されている内容)を修正します。

width="600"



width="100%"

あるいはそれ以下に設定します。
100%にしておくとスマホ画面で横幅いっぱいになり、画面幅を超過することはありません。
デメリット = 600px指定がなくなるので当初の見た目が思い通りにならない。
あるいは①の内容を踏襲して以下の修正も可能(正確なCSSでないというデメリットも受け継ぎます)

<table style="width: 100%; max-width: 600px; border-spacing: 0; border-collapse: collapse;">
<tr>
<td style="padding: 0;">

ちょっと難しいかもしれませんが ^^;
掲載されているソース内容自体がhtml4の古い記述方式です。
html5に則した内容は上記です。
cellspacingやcellpadding, border という属性は既に廃止されています。

③ オーバーフローでスクロール

こちらはtableが超過してしまったら横スクロールバーを出してテンプレ全体の横幅が崩れないようにする方法です。
テンプレではなく記事内ソース修正。

<div style="width: 100%; overflow-x: auto;">
ここにtable内容
</div>

こうしてdivで囲います。
今は改行してわかりやすく書いていますが、実際の記述時は
<div><table>〜〜〜</table></div>
と横繋ぎで書いてください。
(FC2エディターの表作成ツールを利用している・改行をhtmlタグに限定していない、というのを前提に)
デメリット = スマホだとスクロールバーが出ていることに気がつきにくい。

---------

tableはちょっと難しいですよね (´・ω・`)
新エディターから表作成が削除されているのも無理からんことです。
こちら当ブログ内参考記事です。

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

2016/05/12 (Thu) 16:03 | EDIT | REPLY |   

みなみ  

度々申し訳ありません

何度も申し訳ありませんm(_ _)m
こんな感じでしょうか?


<table style="width: 100%; max-width: 600px; border-spacing: 0; border-collapse: collapse;">
<tr>
<td style="padding: 0;">見出し</td>

</tr>

<tr>
<td style="padding: 0;">画像</td>

</tr>

<tr>
<td style="padding: 0;">本文</td>

</tr>

</table>

2016/05/12 (Thu) 18:43 | EDIT | REPLY |   

Akira  

To みなみさん

もしかしてなさりたいことは、
「画像の横に文章を並べる」
ということでしょうか。
それならばtableを使うよりもfloatをお使いになってはいかがでしょう。
ちょっとお待ちくださいね。
実際の画像を見ていただいた方がわかりやすいと思いますので準備します。

2016/05/12 (Thu) 19:49 | EDIT | REPLY |   

みなみ  

http://yazaemon23.blog45.fc2.com/blog-entry-2623.html
このような感じで縦並びで画像size統一でと考えてまして・・・
1記事に付き画像6枚で
本文で画像1枚と詳細
追記で画像5枚と詳細
と思っております。
その為雛形のような表があると記事がばらつかず
書きやすいかと思いまして。

2016/05/12 (Thu) 21:40 | EDIT | REPLY |   

Akira  

To みなみさん

画像と文章を横並びにしないのですね。
ということはtableを利用する必要は全くないです。
単にclassを指定してサイズ制御すれば良い話し。
文章は画像横からの改行でそのすぐ下に書くと良いですね。

img に
class="image-size"
を追加(名前はこれでなくてもOKです)
こんな感じ ↓

<img src="画像アドレス" alt="" class="image-size">

これは記事を書く時に毎回記述します。
そしてテンプレートの方へはCSSソース内に

.image-size {
width: ●●px;
height: auto;
}

と入れておきます。
CSSソース末尾で構いません。
こうしておけばimage-sizeというクラスを持つ画像は全て同じ横幅での掲載になります。
tableは本当に必要な時以外極力お使いにならないことをおすすめ(笑)
ですが上で掲載して頂いたtableタグでも大丈夫ですよ。
ただしmax-widthは基本的に「効かない」というのをご理解頂いた上で、ということになります。

2016/05/12 (Thu) 22:06 | EDIT | REPLY |   

みなみ  

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

2016/05/12 (Thu) 22:43 | EDIT | REPLY |   

Akira  

To みなみさん

いえいえ。
お役に立てたなら良いんだけど ^^;

2016/05/13 (Fri) 16:41 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/08/15 (Mon) 19:08 | EDIT | REPLY |   

タケタケ  

食彩夜話  さんのテンプレート

お世話になります。
追伸ですが、FC2を利用していますが
食彩夜話さんのテンプレートは配布されていますか?

もし配布されているなら
どこにあるのでしょうか?
FC2で探しても見つかりません。
また、もし配布されていない場合
食彩夜話さんのような白基調の
しんぷるなテンプレートを利用したいのですが
どうすればよろしでしょうか?

2016/08/15 (Mon) 19:11 | EDIT | REPLY |   

Akira  

To Alternativeカスタマイズの件 内緒さん

ありがとうございます

> カスタマイズを簡単に〜

どんなカスタマイズをされるかによって難易度に大きな開きがありますので、「簡単にできる方法」というのはちょっと厳しいです ^^;
現在のところ私のテンプレートに有料のものはありません(全て無料でご利用頂けます)。
そして有料サポートも行っておりません。
なので気軽にその都度お尋ねください(笑)

> 背景を白に

Ctrl+Fキー検索

/* 注)全体背景色 White Smoke(nearly) */

上記コメントのある行が対象です。

background-color: rgb(245,245,245);



background-color: white;

に変更してくださいね。

2016/08/16 (Tue) 16:53 | EDIT | REPLY |   

Akira  

To タケタケさん

食彩夜話さん
はtakさんのことですかね (´・ω・`)
彼の方はBeHappyをご利用頂いていると記憶していますが、変更していなければ、です。
BeHappyのページ(DLリンクは記事内にあります) ↓

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

このテンプレでない場合は食彩夜話さんのアドレスを鍵付きでお知らせください。
私のテンプレートではない場合もあるかと思います(笑)
よろしくお願いします。

2016/08/16 (Tue) 16:57 | EDIT | REPLY |   

いますず  

初めまして

こちらのテンプレートをDLさせていただきました。
質問なのですが、サイドバーにある「Follow Me」のアイコンを変更したいというのはサイドバーの形状変更にあたりますか?
facebookを削除してmixiを追加したいといったことは可能ですか?
色々タグ内を探したのですがどこをどのようにいじればいいのかがわからず…
よろしければ教えてください。
よろしくお願いします。

2016/10/25 (Tue) 15:39 | EDIT | REPLY |   

Akira  

To いますずさん

ありがとうございます

> 「Follow Me」のアイコンを変更したいというのはサイドバーの形状変更にあたりますか?

いえ。大丈夫ですー。
Follow Meのアイコンの仕組みをご説明しますと、
「Font Awesome」という海外のサイトから各社のブランドアイコンを表示させており、これらは画像とはいえ「SVG」という特殊なものです。
SVGの特徴
・ フォントと同じ感覚でサイズや色の指定ができる
・ 拡大しても解像度にほとんど影響が出ない
ですから通常のJPGなどの画像とは一線を画するものです。
そして海外のサイトですので、日本のカルチャーとは縁がありません。
つまりミクシィのアイコンがありません (´・ω・`;)

何が言いたいかというと
「Follow Me内にある他のブランドアイコンと形状を揃えたい かつ 実物のロゴにこだわるのであれば」という前提で
・ 画像をご自分で用意して頂く必要あり(背景透過PNG, 60px四方, 色は「白」が妥当)
これですね (´・ω・`)

http://developer.mixi.co.jp/about-platform/policies/image_guidelines/

上記ページにミクシィのブランドロゴが掲載されていますが、
ミクシィのロゴは

ですので、テキストで代替にするという手もあります。
「m」という表記で「ミクシィ」だと理解してもらえる、という判断をいますずさんが出来るのであればそちらがおすすめです。
こちらを採用される場合は
Ctrl+F(Windows)/ Command+F(Mac) キー検索

fbへのリンク不要な方この一行削除

この1行を

<li><a href="#" target="_blank" class="sns-a"><span class="fa mixi">m</span></a>

と修正してください。
リンクの設定は # の部分をリンクアドレスに置き換えます。
これだけですとmのフォントが細いので、気になる場合は上記の

<span class="fa">

の部分を

<span class="fa mixi" style="font-weight: bold;">

にしてみてください。

=======

まとめ
方法二択

① 画像を用意する(この方法を取られる場合はご連絡ください。その後に設定の仕方をお伝えします)
② mのテキストを利用する(おすすめ)

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

----------- 追記

ごめんなさい。追加です。
マウスホバーの際に背景色を変えたい場合には ミクシィのブランドカラーをお使いになると良いと思います。
CSSソースの末尾で構いませんので

#sns-ul a:hover .mixi {
background-color: rgb(209,173,89);
}

を追加してください。

2016/10/25 (Tue) 18:59 | EDIT | REPLY |   

いますず  

ありがとうございます!

丁寧にありがとうございました!
ちょっと検討してみます。
もし方法1を使うとなったらまた書き込ませていただくと思います。
よろしくお願いします。

2016/10/25 (Tue) 19:20 | EDIT | REPLY |   

Akira  

To いますずさん

はい。了解です ( ゚Д゚)ノ

2016/10/25 (Tue) 19:36 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/11/02 (Wed) 22:05 | EDIT | REPLY |   

Akira  

To Alternativeヘッダー画像の件 内緒さん

ご事情理解致しました。
ご丁寧にありがとうございます

> ヘッダー画像設定

Ctrl+F(Windows)/ Command+F(Mac)キー検索。

.header-banner

CSSソース内に上下並んで2箇所見つかりますが、上の方が対象です。
この項目を以下の通り修正。
(コピペで差し替えてください)

.header-banner {
margin: 0 auto 60px;
background: url(画像アドレス) center center /cover no-repeat;
opacity: 1;
padding: 110px 0 90px;
-webkit-transition: all .7s ease;
transition: all .7s ease;
}


① 60pxの数字はヘッダーとコンテンツとの空白指定ですので、ご希望の数値に変更可です。

② ヘッダーの上下幅はあまり大きく作っていませんので、画像はかなり横長になります。
設定する画像の縦横比は不問(サイズは横1000px以上が理想です)。
不問とはいえ横長の方が望ましいです。
縦が短すぎると感じられる場合には

padding: px 0 px;

上記で調整してください。
デフォルトは 上110px、下90pxですので、それぞれ数字を大きくするとヘッダー自体の縦幅も大きくなります。
(間に挟まれた 0 は変更や削除しないようご注意ください)

③ 赤字の center は画像の左右合わせ位置、ピンクの方の center は上下合わせ位置の指定です。
画像のメインオブジェクトが左寄り、上寄りなど、中央基準では表示の具合がよろしくない場合には、どこに画像のメインがあるかをお考えになられまして適宜修正してください。
例えば
「左右は右寄り、上下は下寄り」
right bottom

「左右は中央、上下は上寄り」
center top

左右で可能な値 --- left, center, right
上下で可能な値 --- top, center, bottom

④ 設定画像によっては文字が見辛くなります。
その場合の修正箇所は

#blog-name-container

text-align: center; の下に
color: 色コード;
を「追加」

#blog-title a

color: rgb(51,51,51); を
color: 色コード;
に「修正」

サンプル
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/adeaowth_zpsfaulmbfk.jpg

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

2016/11/03 (Thu) 00:41 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/11/04 (Fri) 14:52 | EDIT | REPLY |   

Akira  

To Alternative ヘッダー画像の件 内緒さん

お出来になったようで良かったですー。
作業お疲れ様でした
お気遣いもありがとうございます (●'0'●)/

2016/11/05 (Sat) 14:14 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/11/26 (Sat) 19:28 | EDIT | REPLY |   

Akira  

To Alternative スマホ表示の件 内緒さん

現在他所から投稿しておりますー。
帰宅してから改めますね。
取り急ぎ「拝見しました。」というお知らせです。
お手数おかけします。
よろしくお願いします。

2016/11/28 (Mon) 15:43 | EDIT | REPLY |   

Akira  

To Alternative スマホ表示の件 内緒さん

① スマホでのトップページサムネイル画像の高さをiPhone縦画面サイズ見切れなしで表示したい

上記の解釈で合ってますでしょうか。
かなりの縦長になりますのでPC表示で採用してしまってはこのテンプレでは体裁が取れません。
ですからスマホ限定、ということでお願いします。
スマホとPCのユーザーエージェントを判別して切り替えるのではなく、
「画面サイズが小さくなって縦一列のレイアウト(シングルレイアウト)になった時に」
という方式でお願いします。
(UA判別の場合はJSコードを組む必要が生じます)

お写真の見切れを無くしたい、というのがご希望の主旨だと思うのですが、
一口に「iPhoneで撮った〜」と言っても、バージョンのよって縦横比が異なります。
整数比で言うと
iPhone4は2:3
iPhone5は40:71
iPhone6は375:667
iPhone6plusは9:16
全ての画像のサイズを揃えようと思った場合に最も大切なのは「縦横比」です。
あるいは
画像のサイズがまちまちで構わない、ということであれば、
元画像を単純に表示させれば良いだけですが、このテンプレではhtmlを大きく書き直すことになりますので今回後者についてはお断りさせてください。

---------

どのバージョンに合わせるかが不明ですが、現況で最もユーザー数が多いであろうiPhone6を基準にします。
Ctrl+F(Windows)/ Command+F(Mac)キー検索

@media screen and (max-width: 767px)

5つヒットしますが、一番最初のもので直下に
.liquid-wrapper:before {
と記されているものが対象です。
この項目を以下の通り修正

@media screen and (max-width: 767px) {
.liquid-wrapper:before {
padding-top: 177.9%;
}
}

赤字部分が修正箇所です。
これで縦長にはなりますが、仮に横長画像がサムネイルになった際にはかなりぼやけるであろうことをご承知おきくださいね。
(寸足らずは起こりません)

-----------

② スマホのトップページサムネイル文字数を少なくしたい

こちらは行数でheightを計算してください。
1行のみなら 1.5em
2行なら 3em
3行なら 4.5em
....
と、1.5の倍々で計算します。
修正箇所は

@media screen and (max-width: 767px)

同じく5箇所出ますが今度は5つ目の、直下に
.topentry-description {
と表記されているものが対象です。
この項目を

@media screen and (max-width: 767px) {
.topentry-description {
height: auto;
max-height: 数値em;
}
}

上記の通り修正。
以上です。よろしくお願いします。

2016/11/28 (Mon) 16:48 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/11/29 (Tue) 17:02 | EDIT | REPLY |   

Akira  

To Alternative画像縦サイズの件 内緒さん

お返事大変遅れております (*_ _)
時間が取れず申し訳ありません。
近日中に改めて回答させてくださいね。
よろしくお願いします。

2016/12/02 (Fri) 12:38 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/12/03 (Sat) 14:00 | EDIT | REPLY |   

Akira  

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

お返事大変遅れてしまいました。
申し訳ないです (*_ _)

> 元のサムネイル画像の高さサイズをもう一個分増やした高さに変更〜

これはデフォルトデザインの2倍の高さにしたい、という解釈で合ってますでしょうか。
デフォルトの縱橫比率は横を100%とし、それに対する高さが102%です。
若干縦長のデザインになってます。
先回お伝えしたカスタマイズ数値が177.9%で、iPhone6系列の画像をほぼそのまま踏襲するサイズ設定です。
で、今回「デフォルトの2倍」をご希望ということですが、つまり200%になりますから先回のものよりもさらに縦長になってしまいます。

● 先回数値設定を変更した同じ箇所(177.9%)をご希望に沿うようにご自分で目視確認されながら調整されると良いかな、と思います。
このパーセンテージ指定は「横を100%と換算した場合の縦の比率」を表します。
つまり50%ならば縦サイズは横サイズの半分に。
100%ならば横と縦は同等のサイズになります。

● デフォルトの画像の「位置合わせ」について
位置合わせというのは、画像は正方形であることの方が稀ですから、ほぼ正方形に近いマスの中に収めようと思った時には横・縦のいずれかが見切れることになります。
デザインとしては「寸足らず」が最も見苦しいので、寸足らずを起こさないためにはどちらかを見切れさせることに。
例えば横200px縦200pxのマスに、横200px縦100pxの画像を横を基準に入れてしまうと、縦が100px足りません。
逆に縦の方を200pxに(拡大することになります)指定すると、横は拡大率に従って400pxになり、200px分は収まりませんので見切れることになります。
ここで大事なのは「どこを表示して」「どこを見切れさせるのか」です。
内緒さんの場合はお顔が左右軸ではほぼ中央、上下軸では上の方に配されていることが多いので、
左右中央・上下中央というデフォルトの指定を変更されても良いかと思います。
Ctrl+F(Windows)/ Command+F(Mac)キー検索
(htmlソース内です)

img-liquid-fill

くれぐれも、htmlソース内です。CSSソースでなく。
この近接を以下の通り修正。

center top /cover no-repeat

デフォルトで赤字の部分は center になっていますので、ここを top に変更。
すると画像の左右軸は中央、上下軸は上を基準にして表示しますので、この部位にあたる画像オブジェクトは見切れることがありません。

* オブジェクト = 画像内に写っている人・物(人物の顔などメインになるもの)

これが画像内でどこに配置されているかを確認。

------------

まとめ

① %の設定を目視確認しながら再調整(150%ぐらいが妥当な気がします)
② htmlソースの画像オブジェクト表示位置を変更


以上です。
返信が遅れましたことを再度お詫びします。
ごめんなさいね。

2016/12/04 (Sun) 13:58 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2016/12/05 (Mon) 18:17 | EDIT | REPLY |   

Akira  

To Alternativeサムネイルの件(解決) 内緒さん

お返事またしても遅くなりましたー!

上手く行ったようで安心しました
中学生の息子さんがいらっしゃるんですね。
お母様がお綺麗でいらっしゃるから、きっとイケメン e-440
うちも長女が今中学2年生です ( ゚Д゚)ノ

こちらこそご不便をおかけしました。
ありがとうございます

2016/12/08 (Thu) 16:32 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/30 (Thu) 17:20 | EDIT | REPLY |   

Akira  

To Alternative ヘッダー画像の件 内緒さん

お世話になっております (●'0'●)/

> ヘッダー画像を数枚増やしページが切り替わると違う画像に〜

これは
① ヘッダーをスライドにする、という意味でしょうか。
それとも、
② 各ページ種毎に異なるヘッダー画像を表示したい、という意味でしょうか。
それとも、
③ ヘッダー画像をランダム表示にしたい(スライドするわけではなく、どのヘッダー画像になるかランダムに決定)、でしょうか。

①は複雑なJS及び多くのhtml,CSSの追加が必要ですのでお断りさせてくださいね。
そして内緒さんご自身や記事の著作主さんがおっしゃる通り、その方法だとSEO的な問題はありますね (´・ω・`)
その方法にあたるのは①です。

基本的にテンプレートにJaueryプラグインの「追加」をするお手伝いはお断りしています。
②のような「ページ別でヘッダー画像を分ける」程度、あるいは
③のような簡素なJSであれば良いのですが。

こちらお返事待ちにしますね。
よろしくお願いします。

2017/03/30 (Thu) 23:12 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/03/31 (Fri) 03:22 | EDIT | REPLY |   

Akira  

To Alternative ヘッダー画像の件 内緒さん②

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

ちょっとですね、私のお返事内容がひどい ( ̄∀ ̄;)
誤字と間違いだらけ ><

X その方法だとSEO的な問題はありますね
✔ 「問題があったので修正しました」という「修正前の内容」だとSEO的な問題はありますね

新しい方法(つまり該当ページに掲載されている内容)では問題ありません。

X その方法にあたるのは①です
✔ その方法にあたるのは③です

番号間違えました。ごめんなさい ( ̄∀ ̄;)

=========

ランダム表示という結論で大丈夫でしょうかね。
で、これからお伝えする方法は内緒さんがお調べになったものと大差ありません。
(記事主さんのコード内容とは異なりますが理屈は同じです)
いずれもSEO的な問題は生じません。

① </body>の直前に以下を追加

<script>
RANDOMimageURL = new Array();
RANDOMimageURL[0]="画像アドレス";
RANDOMimageURL[1]="画像アドレス";
Rndm = Math.floor(Math.random()*RANDOMimageURL.length);
document.getElementById("banner-bg").style.background="url("+RANDOMimageURL[Rndm]+") center center /cover no-repeat";
</script>

3枚目以降の追加は
RANDOMimageURL[2]="画像アドレス";
RANDOMimageURL[3]="画像アドレス";

上記のように[数字]
数字をひとつづつ増やして記載してください。

② html修正
Ctrl+F(Windows)/ Command+F(Mac)キー検索

<header class="header-banner">

上記を以下の通り追加修正

<header class="header-banner" id="banner-bg">

③ CSS修正
検索

.header-banner

こちらの background の一行を削除
続いて

-webkit-transition: all .7s ease;
transition: all .7s ease;


この2行を削除
以上です。

あくまでもランダムですので、同じ画像が立て続けに表示されることもあります。
全ページにランダム表示が適用されます。
また、別ページへ移動した際の表示画像をコントロールすることはできません(ランダムです。必ず遷移前のページと別にする、などの操作はできません。)
これらについては事前にご了承くださいね。
よろしくお願いします。

2017/04/01 (Sat) 13:25 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/04/03 (Mon) 00:54 | EDIT | REPLY |   

Akira  

To Alternative ランダムヘッダーが上手くいかない件 内緒さん

scriptコードを書く場所は
</body>
直前です。
今書いてあるのは <body>の直前ですよね。
<body> ではなく </body> です。
htmlソースの最後方にあります。

それから[0]に指定している画像がNot foundということで、URLが消失しています。
画像のアドレスと併せ、今一度ご確認くださいね。
よろしくお願いします (o'ω')ノ

2017/04/03 (Mon) 13:39 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/04/04 (Tue) 18:51 | EDIT | REPLY |   

Akira  

To Alternative ランダムヘッダーの件 内緒さん

出来ましたね。安心しました

はい。受験生でございます(笑)
息子さんとお花見楽しんでくださいね。
ありがとうございます

2017/04/05 (Wed) 10:50 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/04/30 (Sun) 21:27 | EDIT | REPLY |   

Akira  

To Alternative文字大きさの件 内緒さん

ありがとうございます

> ①トップページの記事要約の文字サイズと ②各記事本文の文字サイズを大きくしたい件

① トップページ
Ctrl+F(Windows)/ Command+F(Mac)キー検索

.topentry-description {

CSSソース内に1箇所あります。
この括りの

overflow: hidden;

の直下に以下を追加。

font-size: 数値px;

デフォルトは13pxですので、それ以上の数字でお願いします。

====

② 各記事本文
検索。

.inner-contents {

こちらも1箇所あります。

font-family: 省略;

の直下に以下を追加。

font-size: 数値px;

こちらも同じく13pxがデフォルトです。
ここで数値を変更しても
・関連記事リスト
・タグ
の文字はそのままの大きさで残ります。
上記2要素の変更も必要なようでしたら、
検索

.relate_dl,

この括りの

font-size: 13px;

赤字の数値を変更。こちらが関連記事リスト。
タグは

.tags {

の同じくfont-size: 13px; の数値を調整してください。
よろしくお願いします。

2017/05/01 (Mon) 20:23 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/05/01 (Mon) 22:06 | EDIT | REPLY |   

Akira  

To Alternative文字大きさの件 内緒さん②

> ②の件
.inner-contents の内容は以下のようになっているはすですので ↓

.inner-contents {
font-family: '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';
}

これをこう追加修正です ↓

.inner-contents {
font-family: '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';
font-size: 数値px;
}

よろしくお願いします (o'ω')ノ

2017/05/01 (Mon) 23:18 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/05/02 (Tue) 12:09 | EDIT | REPLY |   

Akira  

To Alternative文字大きさの件(完了のご報告) 内緒さん

良かったです。
作業お疲れ様でした

2017/05/02 (Tue) 21:49 | EDIT | REPLY |   

ヴィオラ  

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

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

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

2018/01/13 (Sat) 20:02 | EDIT | REPLY |   

Akira  

To ヴィオラさん

ご協力ありがとうございます。
スマホからの返信だと専用記事への誘導もめんどうになってしまって。
怠惰ですみません ^^;
(今はパソコンからです)

-------
> プラグイン画面が下になってしまいました〜テンプレの仕様が変わったのでしょうか?〜

外的な要因で既存のテンプレート内容が勝手に変わってしまうことはありません。
何もカスタマイズせずにレイアウトが崩れた場合は
・ブラウザやOSのアップデート(バグ)
・FC2の一時的不具合
・記事内で利用したhtmlに起因
大抵はこのいずれかです。最も多いのが最後の「記事内容に起因」です。

------
トップページと個別記事を5ページづつ確認しましたが、「カラム落ち」しているというページを確認できませんでした。
特定のページで起こっているのであればそのページの該当URLをお知らせください。

もしかしたら「レスポンシブテンプレート」の意味をご理解頂いていないのかもしれません。
その場合は「カラム落ち」ではなく「画面幅に応じたカラムの並べ替え」であり、カラム落ちや不具合ではありません。(カラム落ちの場合は落ちたカラムが左に寄せられ、綺麗に整列することはありません)

2カラムを常に維持したい場合には固定幅テンプレートに変更されることをおすすめします。
また、レスポンシブはスマホ版を必要としませんので、パソコン・タブレット・スマートフォン等全てのデバイス間共通でお使い頂けます。
レスポンシブの利点を活かすにはスマホ版の非表示設定をお願いしたいところですが強制は致しません。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-491.html
https://vanillaice000.blog.fc2.com/blog-entry-220.html#object26
https://vanillaice000.blog.fc2.com/blog-entry-605.html

2018/01/13 (Sat) 21:46 | EDIT | REPLY |   

ヴィオラ  

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

直りました!
PCにかなり疎いため、
このようなことに貴重なお時間を取らせてしまって、申し訳ない限りです。
ブログをやるにあたって、少しくらいの勉強は必要なのだとつくづく身に沁みました。
このたびは、本当にありがとうございました。

2018/01/13 (Sat) 22:42 | EDIT | REPLY |   

Akira  

To ヴィオラさん

後者の方でしたか。
後々の管理も楽ですのでこの機会に是非スマートフォン版の非表示を。
ただしつこいですが強制ではありません。
レスポンシブの利点などお読み頂きましてご自身で選択をお願いします。
お疲れ様でした

2018/01/13 (Sat) 23:31 | EDIT | REPLY |   

ヴィオラ  

Akiraさま

何度もすみません。
今一度教えてください。
その「スマートフォン版の非表示」というのは、
「環境設定」→「スマホ版の表示設定」→「無効にする」
の変更のことでいいのでしょうか?
スマートフォン版の非表示というのは、
スマホで当ブログが閲覧できなくなるという意味ではないんですよね?
(ホント無知ですみません)

2018/01/14 (Sun) 12:02 | EDIT | REPLY |   

Akira  

To ヴィオラさん

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

> 「環境設定」→「スマホ版の表示設定」→「無効にする」〜

はい。その設定のことです。

-------
> スマホで当ブログが閲覧できなくなるという意味ではないんですよね?〜

そうではありません。
スマートフォンからのアクセス時にもAlternativeテンプレートで表示させる、ということです。
パソコンとスマートフォンのテンプレートを共通化できるのが「レスポンシブデザイン」です。
レスポンシブの利点につていは先日お伝えしたリンク先の記事の通りです。
こちらの記事も参考になると思います ↓

FC2ブログのレスポンシブテンプレートで誤った設定をしておりませんか?/ ぼっちん様
https://oops0011.blog.fc2.com/blog-entry-167.html

よろしくお願いします。

2018/01/14 (Sun) 14:37 | EDIT | REPLY |   

ヴィオラ  

Akiraさま

たびたびありがとうございました!
そちらもアドバイスいただきましたとおり設定いたしました。
丁寧に色々教えてくださって、本当に感謝です。
また初歩的な質問をしてしまうかもしれませんが、
今後ともどうぞよろしくお願いいたします。m(_ _)m

2018/01/14 (Sun) 17:31 | EDIT | REPLY |   

Akira  

To ヴィオラさん(完了のご報告)

いえいえ。こちらこそお手数おかけします。
お疲れ様でした

2018/01/15 (Mon) 11:16 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/01/15 (Mon) 12:21 | EDIT | REPLY |   

Akira  

To Chromeエラー警告の件 内緒さん

コメント投稿欄に明記してあるお約束事をお守り頂いてから再度ご質問ください。
よろしくお願いします。

------- 追記
本来は「該当テンプレートへのコメント」をして頂いた方以外は返答しませんが、今回はテンプレートに直接関わりがありませんのでこのままここでお返事しますね。

------ ①
> The SSL certificate used to load resources from https://analyzer5.fc2.com will be distrusted in M70. Once distrusted, users will be prevented from loading these resources. 〜

アクセス解析の証明書がシマンテックから発行されています。
この件については記事を書きましたので御覧ください。
https://vanillaice000.blog.fc2.com/blog-entry-657.html

------ ②
> analyzer.php Failed to load resource: the server responded with a status of 400 (Bad Request)〜

こちらも同じくテンプレートは無関係でアクセス解析のphp内容に問題があります。

------ ③
> Mixed Content: The page at 'https://***/blog-entry-577.html' was loaded over HTTPS, but requested an insecure image 'http://blogranking.fc2.com/ranking_banner/***'. 〜

これはもう警告本文に答えが書いてありますけれども。
ご自身が</body>の直前に記載したスマートフォン解析のバナーがhttpです。
! が出たり出なかったりするのはコード内容自体が間違っているからです。
blog-entry-576.html
のフッターの横を見ると文字列がそのままテキストとして表示されているのが確認できます。
これはコード内容に誤りがあった際に起こります。

------ ④
> Mixed Content: The page at 'https://***/blog-entry-577.html' was loaded over HTTPS, but requested an insecure image 'http://eco.blogmura.com/***/img/***.gif'.

こちらも同様。
ご自身が掲載したブログ村のバナーがhttpです。
blog-entry-551.html
のバナーの修正が必要です。
ページ送りのサムネイルを表示させるため、該当ページだけでなく関連記事に掲載されている画像の内容も取得されます。
これはそういったシステムです。

まとめ
① FC2の問題
② アクセス解析の問題(あるいはコードの取得ミス)
③ 同上
④ ご自身で掲載された画像に問題

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

2018/01/15 (Mon) 13:34 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/01/15 (Mon) 14:27 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/01/15 (Mon) 14:30 | EDIT | REPLY |   

Akira  

To Chromeエラー警告の件 内緒さん②

えと。もう原因は全て記しましたが、わかりにくかったでしょうか (´・ω・`)
証明書の件はどうにもできません
テンプレートの問題ではなくFC2と証明書発行機関の問題です。

アクセス解析については

456789'.split(''),s='';for(var i=0;i<n;i++) s+=a[Math.floor(Math.random() * a.length)];return s;};
})();
//-->

という意味不明な文字列がありますので一旦削除してコードを再発行してもらうなりしてください。

ブログ村のhttp画像については該当URLも載せましたのでそのページを開かれましてhttpsに修正をしてください。

よろしくお願いします。
証明書の方は1月末で変更があるかもしれませんね。
とりあえずそれに期待(笑)

2018/01/15 (Mon) 14:36 | EDIT | REPLY |   

Akira  

To Chromeエラー警告の件 内緒さん(終了のご報告)

あらら。行き違いになってしまいました ^^;

証明書の方はどうにもできませんが、他の要件は一度修正してみてそれでもまだ問題が残るようでしたらお知らせください。

ページ送りの仕組み上、登録カテゴリの前後記事の影響も受けますので、ページ内にhttp画像が無いのに ! が出る時にはブラウザの左右についているカテゴリ間ページ移動を利用して前後ページ内容を確認してください。
よろしくお願いします。

2018/01/15 (Mon) 14:39 | EDIT | REPLY |   

ほんたべ  

To Akiraさん

Akiraさま
こんにちは。いつもありがとうございます。
教えていただいたとおりに修正しまして、エラー警告は出なくなりました。
ていねいにわかりやすいお返事をいただきまして、とても助かりました。
ありがとうございましたm(_ _)m

2018/01/16 (Tue) 12:23 | EDIT | REPLY |   

Akira  

To ほんたべさん

こんにちは。
良かったです。安心しました(笑)
現況で私のテンプレート全般ではJSエラー・SSL関連エラーなどは無いはずですので、Chromeから何かしらの警告が出た際には記事内容やサイドメニューの任意プラグインなどを調べてみてくださいね。
お疲れ様でした

2018/01/16 (Tue) 15:56 | EDIT | REPLY |   

幸  

グローバルナビの内容

メンテほやほやのテンプレをお借りしました。

グローバルナビの内のABOUTが不要だったので、ドロップダウンが不要な方は~の箇所を削除したら、ハンバーガーボタンのみが残りナビの中味が表示されなくなりました。

なので、元に戻してABOUTが記載されている部分のみを削除したところ表示されるようになりましたが、カスタマイズの方法が正しかったのか自分では解っておりません。合ってるんでしょうか?

カスタマイズに問題が無ければSSL化させようと思っております。



2018/02/11 (Sun) 11:36 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To 幸さん

こんにちは (ノ゚ェ゚)

今拝見しましたが、消去すべきものがまだ残っています。
消去の対象箇所は

<!-- 注)ドロップダウンここから 不要な方ここから削除 -->
内容
<!-- 注)ドロップダウンここから 不要な方ここまで削除 -->

上下のコメントを含み中の内容も全てです。
今一度ご確認ください。よろしくお願いします。

2018/02/11 (Sun) 11:45 | EDIT | REPLY |   

幸  

To Akiraさん

ご確認ありがとうございました。

ご指摘の通りに残りの部分を削除した処、ナビの内容が正常に表示されました。
どうやら、1度目のカスタマイズの時には、誤って違う箇所まで削除していたみたいです。

お手数をお掛けしました。(`・ω・´)ゞ

2018/02/11 (Sun) 18:00 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

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

良かったですー。
いつもありがとうございます。お疲れ様でした

2018/02/12 (Mon) 13:24 | EDIT | REPLY |   

madameゆか  

初めての。。。

StoicBrownのテンプレートをお借りし設定時にさんざんAkiraさまのお手を煩わせておきながら・・・
要約タイプのテンプレートにあこがれ
メンテナンスほやほやのこちらのテンプレートをお借りいたしました

一度も要約タイプを使ったことがなかったので
新鮮でワクワクしています(*^^*)
ありがとうございます

2018/02/15 (Thu) 20:53 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To madameゆかさん

せっかくコメント頂いたのにごめんなさいね。明日改めて返信致します!

------
改めまして。
要約タイプは初めてでしたか。たぶん今後は全文よりも要約が増えていくように思いますので悪い選択ではないと思います。
いつもありがとうございます

2018/02/16 (Fri) 01:35 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To madameゆかさん(スピードスコアに関して)

こんにちは。記事を拝見しましたので書きますね。

Googleの速度テストやGTmetrixのテストというのは単純にページ表示にかかった秒数を目安にしているわけではありません
これらのテスト結果というのは「ページボリューム(コンテンツ内容)に対し適切な対策が取られているか」でスコアが大きく変わります。

例)Aランク
ページ表示秒数 --- 3秒
対策あり

例)Cランク
ページ表示秒数 --- 1秒
対策なし

こういう結果も大いに有りえます。
ただ「対策がある」場合には表示秒数も比例して速くなりますので、全く別のカウントというわけでもありません。両者間には密接な関係があります。

例えば私のブログトップページは8ミリ秒台で体感としては非常に速いですが、それでもスコアはBランクです。
理由は「まだできる対策が残っているから」です(gzip圧縮を指摘されますがFC2ブログではできません)

madameゆかさんのスコアを落としている原因を挙げておきます。
・絵文字及び画像 --- サイドメニュー部に含まれる全画像が対象
・ランキング関連CSS全て
・gzip圧縮が行われていないスクリプトファイル及びCSSファイル --- これはFC2サーバーへのアクセス権限がありませんので対処不可能

比較的大きくスコアに影響しているのは上記です。
対策というのは

「絵文字などの小さいものはスプライトを使いなさい」
これは画像の容量が仮に小さくとも、連続で使われている画像はスプライト化の対策をしろ、という減点対象です。ページのスピード自体にはさほど影響はありませんがスコア(評価)には影響します。

「スクリプトにはdefer属性を設けろ」
こちらはランキング関連です。でもユーザーが勝手にJSを変更することはたぶんできないですよね。

--------
ほとんどの方があまり注意を払いませんが、ランキングバナー・絵文字などは全て画像です。
その「画像」に適切な対策が取られていない場合にはスコアを大幅に削られます。

madameゆかさんが思う「スピード」が単にページ表示が完了するまでの速度なのであればスコア測定ではなく以下の記事を参照してください。

ページ表示スピードを教えてくれるブックマークレットの紹介
https://vanillaice000.blog.fc2.com/blog-entry-667.html

また、テンプレート内容で出来うる対策は既に最大限行なったと思っております。
あとはご自身で追加されている内容に対しどうするか、です。
一つの方法が以下の記事。

Lazyloadを使ってみる【初級編】
https://vanillaice000.blog.fc2.com/blog-entry-672.html

まとめますが、スピードスコア判定サイトの目的は「対策の指摘」ですので、イコール表示速度の遅い・速いを単純に計測しているわけではない、というのを知ってくださいね。
よろしくお願いします。

2018/02/17 (Sat) 15:20 | EDIT | REPLY |   

ero100k  

サイドバーを本来の右側に持って行きたい

初めまして、エロ百景と申します。
アダルトサイトなので、失礼もあるかと思いますがURLをよろしくお願いします

トップページに記事一覧を表示させない設定に見よう見まねでしたのですが、
サイドバーが下に表示されてしまいました。

今日はキツくなったので作業を中止して、Akiraさんにお聞きしてみようと思いました。
どうすればサイドバーが本来の場所に行ってくれるでしょうか、お教え下さい。

何か規約違反とかあったらごめんなさい。先に謝っておきます。
よろしくお願いします。

2018/05/16 (Wed) 00:10 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ero100kさん

こんにちは。

えーと。エンターページを作成されたわけですよね。
かなり強引な導入というか、各要素にCSSが全く適用されていない状態ですので、このまま位置だけを修正したところで閲覧する方が別ページのサイドメニューと同じコンテンツだと認識できるかどうか疑問です。
ページ毎に使い勝手や見た目が異なるサイドメニューはやはり頂けないですね (´・ω・`)

いずれにしろアウトラインが全て壊れているような状況ですから相当苦労されると思いますし、私が行う仕事でもありません。
最も簡単なのはサイドメニューのhtml内容をエンターページに表示させないことです。

<!--not_index_area-->
ここにサイドメニューhtml
<!--/not_index_area-->

それ以外の対応は私が丸ごとエンターページを作成することになりますのでお断りさせてくださいね。
エンターページを設ける場合は各ページへの遷移(ページ送り)をどうするか、エンター後のデザインとの整合性などかなり緻密に計画しないと難しいと思います。
また、現状のFC2ブログには以下のような問題点もあります。

FC2ブログ独自変数 index_area はログオフ + モバイル環境では効かない
https://vanillaice000.blog.fc2.com/blog-entry-592.html

よろしくお願いします。

------
別件

ページ最下部にある「世界のGoogle検索〜」がレスポンシブではありません。
この状態でレスポンシブ設定(既に行われている「スマホ版非表示設定」)をされますとページ全体が左右に振られるので閲覧者に敬遠されるページになります。
プラグイン3はカテゴリを分けるだけで綺麗に表示されるようになっていますので、追加したhtmlアウトラインを削除することで収まるようになります。
といってもtertiaryへのCSS定義を削除されていますので、一旦デフォルトの状態に戻して再構成されることをおすすめします。

2018/05/16 (Wed) 15:15 | EDIT | REPLY |   

ero100k  

To Akiraさん

お返事ありがとう。そしてアダルトサイトに普通に接してくれてありがとう。

プラグイン3については言われた通りに試しましたらば魔法の様なことになりまして感激致しました。

ただ、Akiraさんの普通に使われる、カテゴリ分けとか、追加したhtmlアウトラインを削除する等、チンプンカンプンの日本語でしたので理解するのに時間が掛かりました。こんなアホな私ですがよろしくお願いします。

それで、トップページの件なのですが、ご助言に従い諦めようとも思いますが、 <!--index_area-->トップページ <!--/index_area--> が、サイドバーを押し出してる様に見えるんですけども、それは見当外れな事なんでしょうか。

2018/05/16 (Wed) 22:41 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ero100kさん

こんばんは。

ちょっとよくわからないのですが、まず「エンターページ」と「トップページ」の語彙の使い分けをはっきりお願いします。
この2種は分けて捉えるべきなので混同・混乱しないようにしましょう。

エンターページ = 今回百景さんが導入された(しようとしている)単一ページ
トップページ = 通常の構成、記事が複数件要約として表示される複数ページ

で、エンターページを辞めるんでしょうか。それともこのまま導入するんでしょうか。
方針を決めて頂かないことには助言ができません。
エンターページを導入するという仮定で進めます。

-----
問題点

1. 2カラム構成に必須のhtmlアウトライン(枠組みだと思ってください)が足りていない(サイドメニューが下にあるのはそのせいであり、カラム落ちとは違います)

2. Font Awesomeの記述内容が旧バージョン用なので正常に表示されていない

3. CSSが全く適用されていない

4. トップページサムネイルの画像を綺麗に表示させるための寸法が足りていない

5. 世界の画像検索〜の要素が完全にオーバーフロー
(オーバーフロー = はみ出し)

6. エンターページは単一ページとするのが理想ですからページ送りがあると閲覧者の混乱を招きます。
エンターページを通過して表示されるトップページは「1ページ目」とするのが本来です。
(が、現時点ではエンターにあるページ送りの「2」をクリックしないとトップページに入れない構成になっています)

----
【1について】
2カラムを構成するには
#float-container, #primary, #secondary
最低でも上記3つのセレクタを持つ要素が必須ですがそれが有りませんので2カラムにはなりません。
もちろん百景さんがこのhtml内容に対して新規CSSをご自身で適用すれば別ですが、CSSの知識が無い場合はまず無理だと思います。

【2について】
Font Awesomeのサイトで最新バージョンのhtml内容を取得してください。
https://fontawesome.com/
書き換えない限り正しい表示は行われません。

【4について】
サムネイル画像の原寸が小さすぎますので高解像度ディスプレイから見ると画像のぼやけが許容範囲を超えているように思います。
(つまりボケボケで見苦しい(言葉が悪く申し訳ないです))
最低でも横1000pxの画像を指定するようにされると良いと思います。
それが叶わない場合にはサムネイル表示サイズを大きくするべきではありません。

-----

ページ種を操作するにはFC2独自変数の「エリア変数」の使用が必要ですが、この変数は一旦送信されるとレスポンスが戻る時(つまり実際のページとして稼働させるためのhtmlやCSSやJSのソースコードがブラウザに認識される時)にはエリア変数はサーバーでの処理が終了していますので、その変数の使用状況や記述位置などは第三者には全くわからなくなります。
簡単に言うとエリア変数がどこにどのように書いてあるかは百景さんにしかわからない、ということです。
それがphpの仕組みです。
私ではエンターページの変数がどうなっているのか知ることはできません。
なのでこのコメント欄で全ソース内容を開示して頂くしか方法はありませんが、そこまでのサポートは致し兼ねます。
テンプレートの仕様を大きく変えてしまうカスタマイズは必ず自己責任で行ってください

もう一度要点をまとめておきます。

-----
> ご助言に従い諦めようとも思います〜

そうですね。そもそもエンターページを想定したhtmlは書いていません。
最初からエンターページのあるテンプレートに選び直されるのが一番の近道かと思います。

> <!--index_area-->トップページ <!--/index_area--> が、サイドバーを押し出してる様に見える

そうではなくて必要なセレクタが指定されたhtml要素が足りていないのが原因です。
よろしくお願いします。

2018/05/17 (Thu) 01:22 | EDIT | REPLY |   

ero100k  

To Akiraさん

Akiraさんと話せるだけの知識も無い私に、こんな厚いサポート戴いて恐縮するのみです。ありがとうございます。

トップページというコトバを使ったのはは間違いでした。ごめんなさい。私のやりたかった事はエンターページを作る事です。具体的に言いますと、エロ百景と云うアダルトサイトが出来ていまして、それをレスポンシブ化したいと云うことです。レスポンシブの概念もiPhoneも無い私には敷居の高い事ですが、Googleにまたしても脅迫されて、やらざるを得なくなったと云うことです。

最初からAkiraさんのテンプレートに出会っていれば何の事も無かった、アホみたいな人生をネット上でも送ってしまいました。QuietやBetweenNeo で作り込んでいればなあと思っても後悔先に立たずです。

もう、Altenativeで見切り発車してしまおうと思いますが、そこでお聞きしたいのですが、エロ百景という既存のアダルトブログの記事の基本構造は、200x112サイズの画像3枚を全角スペースを間に入れて横に並べて、640x480の埋め込み動画を挟んだカタチになっているのですが、レスポンシブにするにあたって、最低限しなければならないことは何でしょうか。

画像にmax-width:と、width="100%"のスタイル適用は必須なのでしょうか。実は、関連タグを多用してる事から一括書き換えが出来ない状態なのですが、これはお先真っ暗でしょうか。

<title>たいとる</title>
<h2><a href="blog-entry-ページ番号.html">
<img width="200" height="112"> <img> <img></a>
女優名<span class="migiyose">再生時間 : 分</span></h2>

< iframe width="640" height="480">
<h3><img width="200" height="112"> <img> <img>見出し</h3>本文

そして、なるべく使わない方が良いとAkiraさんが仰ってるテーブルもそこら中に多用してしまいましたー。

去年の夏は、SSL化にあたって、3,000ページある記事全て手作業で直しました。人生最後のことであるし、他に手が無いというのならまた、やるかも知れません。

よろしくご指導お願いします。また、無理なら無理とハッキリと引導をお渡し下さると幸いです。変な日本語になってますがよろしくお願いします。

2018/05/17 (Thu) 12:22 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ero100kさん

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

> トップページというコトバを使ったのはは間違いでした〜

いえ。質疑応答の便宜上のことであって、正式な言い方が云々といったことではありません。
混同しないよう分けましょうというだけです。

------
ここで確認なんですが
> Googleにまたしても脅迫されて、やらざるを得なくなった
という一文から解釈して、Googleフレンドリーにしたいというのが一番の希望なんでしょうか。
というのはFC2ブログはレスポンシブデザインを採用しない場合にはちゃんと「スマートフォン専用版」というのが準備されていますので、無理にレスポンシブにする必要はありません。
スマホ閲覧者が最も困るのは「スマホの狭い画面でパソコン用のレイアウトを見せられること」ですので、スマホではスマホ専用版を利用することで解消できます。

レスポンシブを採用する理由は
・html, CSS, JSなどのソースコードを一本化して管理したい
・Googleのbotにとって最も効率的だから(SEO)
・URLの違いによる重複コンテンツを避けたい(SEO)
・パソコンとスマホの使い勝手と見た目の統一

といったところなので、上記に当てはまらない場合には無理にレスポンシブを採用する必要はありません。
レスポンシブにするのであればスマホ読者が最も嫌う
「コンテンツのはみ出し」
を防がないと意味がありません。
百景さんが記事内容として書かれたものについてはパソコン・タブレット・スマホを問わず画面幅からはみ出す可能性はあります。
が、それは一旦置いといて、私が何度も指摘している「世界のGoogle検索〜」についてはスマホ版では表示されませんのではみ出し(オーバーフロー)は起こりません。
もちろん百景さんがスマホ版も同じようにカスタマイズされれば発生しますが。

レスポンシブにしたいという希望であればエンターページを設けるの設けないのというところではなくて、閲覧者が困るようなレイアウトにならないというのが一番の課題です。
そしてそれを修正する気持ちがあるかどうかです。
修正しないのであればレスポンシブの意味がありませんので「パソコン版+スマホ版」という旧来の方式で運営されることを寧ろおすすめします。
その方が読む側は助かる(笑)

まず根本的なこの件について再考をお願いします。

一旦投稿します。

2018/05/17 (Thu) 20:18 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ero100kさん②

まずやはり方針をはっきり決めてください。

レスポンシブにする?
YES
NO --- 質疑応答終了

エンターページを入れる?
YES --- 自己責任・自力でお願いします, 質疑応答終了
NO --- 質疑応答継続(過去記事の修正について)

-------
> iPhoneも無い私には敷居の高い事〜

レスポンシブデザインはスマホ専用版と違い「デバイス判別ではなく画面幅レイアウト切り替え」です。
なのでパソコンでブラウザの横幅をグーっとマウスで小さくしてください。極力小さく。
それがスマホでの見た目です。
100%同じというわけにはいきません。デバイス特性や独自バグなどがありますので9割がたということにしておきます。

もっとしっかり確認したい場合にはGoogle Chromeブラウザで、
画面上右クリック > 検証
を選択すると右側に新しいウインドウが出てきます。そのままでは使いづらいので右上にある点が3つ縦並びになっているマークをマウスで長押しし、Dock side の項目を一番左の「切り離し」にしてください。
すると別ウィンドウになります。
そのウィンドウの左上にスマホのアイコンがありますのでクリックするとスマホ画面への偽装が行われます。
それが百景さんのブログの現時点での見え方です。
横スクロールバーが出ている(スマホでは不可視なので横スクロールして確認)のであればそれは修正しなければいけませんね。閲覧者のストレスになりますので。

------
> 200x112サイズの画像3枚を全角スペースを間に入れて横に並べて、640x480の埋め込み動画を挟んだカタチ〜

今回百景さんにお選び頂いた「Alternative」というテンプレートはトップページが「要約表示タイプ」です。
記事内に対象となる画像が存在する場合にはその画像がトップページにサムネイルとして表示されます。
横200pxの画像がサムネイル対象だとすると、デフォルトのサムネイルの最大サイズは410pxですから全然寸法が足りません。つまり拡大処理を受けるため解像度が足りない。
加えてスマートフォンでは以下のような問題があります。

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

スマートフォンで画像がぼやける対策【2倍じゃもう足りない!】
https://vanillaice000.blog.fc2.com/blog-entry-627.html

横200px実寸の画像を原寸と同じレベルで見せたいと思えば実寸400px必要です。
実寸400pxをCSSで200pxで表示させてやっと実画像と同じ解像度になるわけです。
400pxで表示させたいならば実寸は倍の800pxが必要。
そいう意味で「最低でも横1000pxをおすすめします。」とお伝えしました。
百景さんはカスタマイズでメインコンテンツを大きくされていますので、サムネイルはデフォルトよりもさらに大きい面積になっています。

こちらについては百景さんの今後の運営方針ですから、これまでと同様200pxの画像で行くのであればレスポンシブにはしない方が良いですね。
何故ならスマホで表示される画像面積が大きいから。
FC2のスマホ版であれば大抵72px四方表示です。
(ただし原画利用ではなく72×72に整形された別画像が表示されるので結局ぼやけます)

最低限しなければならないこと = サムネイル対象画像は1000px以上にする

Googleは1200px以上を推奨しています。参考までに。

2018年時点でサムネイル画像・OGP画像は横1200px以上が最適解
https://vanillaice000.blog.fc2.com/blog-entry-715.html

サムネイル画像は別で用意された方が良いかもしれません。
記事編集画面の下に「アイキャッチ画像設定」というのがありますので、そこで指定。何も指定しなければ自動的に「本文内の一番最初の画像(外部直リンク不可, アドレス名に半角カッコを持つもの不可)が選出されます。
ただしアイキャッチ指定を行うと各種RSSやFC2ブログのランキング掲載等にサムネイルが表示されなくなります。
一旦投稿します。

2018/05/17 (Thu) 20:39 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ero100kさん③

> 画像にmax-width:と、width="100%"のスタイル適用は必須なのでしょうか〜

必須ですが恐らく百景さんはwidth属性とmax-widthプロパティの違いを理解されていないように思います。

width属性 --- html属性, 画像やブロックなどの横幅を指定する
max-widthプロパティ --- CSSでありhtmlではない, 画像やブロックなどの最大横幅を指定する。

例)画像に対する指定

【width=100% の場合】
相対値指定。
親要素と同等の大きさになる。場合によっては拡大・縮小が生じる
親要素(記事画面)が1000pxの場合、画像の原寸が200pxであっても100%の指定により画像の横幅は1000pxとなって表示される

【width="600" の場合】
絶対値指定。
親要素が仮に300pxしか無くとも600pxという絶対値なので親要素からはみ出す。
原寸がいかなる横幅であっても(100pxだろうと1500pxだろうと)600pxでの表示が行われる。

【width属性とmax-widthプロパティの併用の場合】
width="500px" style="max-width: 100%;"
と併用されている場合(上記例はCSSをhtmlのstyle属性の値にはめ込む「インラインCSS」という方法です)
画像の実寸がいかなるサイズでも500pxを遵守するが、親要素の横幅が500px以上の場合には子要素(今例題で扱っている併用指定の画像)は500px以上は大きくならない。

width="100%" style="max-width: 500px;"
と併用されている場合、親要素が仮に300pxならば画像は100%の300pxに。
親要素が600pxならば画像はmax-widthの500pxが制限となり、親より小さい500pxに留まる。

レスポンシブはこの2つを使いこなさないと簡単にはみ出します。
昔のテンプレートなんかだとよく画像がサイドバーを侵食していたのではないでしょうか。
レスポンシブではそれは完全アウトなので使いこなし・併用が必須です。

で、htmlやCSSには指定の強制力というのがあります。
例えば
<img src="" alt="" style="width: 500px">
と書かれたhtmlがあったとします。一方でCSS(スタイルシート)に
img {width: 100%;}
と書いてあったとします。
この場合にはstyle属性の強制力の方が勝るため、親要素が1000pxの場合でも画像は100%の1000pxにはならず500pxで表示されます。

わかりますかね (´・ω・`)
で、ブロガーさんの大多数がエディターのツールバーを利用して

<img src="" alt="" width="横" height="縦">

こんな書き方になっていると思います。
この書き方の場合には私の方ではみ出しの対処をしていますのではみ出しません。

<img src="" alt="" style="width: 横px; height: 縦px;">

このパターンでもはみ出しません。
ですがもし
<div style="width: 500px">
<img src="" alt="" width="横" height="縦">
</div>

こんな風に画像を別要素の親で囲って、その親に絶対値指定がされているとはみ出します。
スマホ画面は最小で320pxしかありませんので500pxなら180pxの超過です。
このケースは稀だと思いますので、過去の画像がはみ出すといったことはよほど起こらないと思います。
動画の横に640pxを指定されているとのことですが、こちらも同じくはみ出すことはありません。

過去に掲載した内容がはみ出るかどうかは前述したようにブラウザサイズを狭めて確認すればわかります。

投稿します。

2018/05/17 (Thu) 21:04 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To ero100kさん④

> <title>たいとる</title>
<h2><a href="blog-entry-ページ番号.html">
<img width="200" height="112"> <img> <img></a>
女優名<span class="migiyose">再生時間 : 分</span></h2>

< iframe width="640" height="480">
<h3><img width="200" height="112"> <img> <img>見出し</h3>本文〜

これはもう完全に構文エラーです。

1. titleタグはhead内でしか利用できません。 --- エラー

2. img要素にalt属性がありません --- エラー
alt属性が不要な場合(画像が特に重要では無い場合)はalt属性を「書かない」のではなく
alt="" このように空欄にします。
省略ではなく重要でないことをbotに明示するようにしてください。

3. spanへのクラス名が migiyose なので恐らく右に寄せたいのだと思いますが、spanに直接の位置指定はできません。

.migiyose {text-align: right;} ← 効かない
h2 {text-align: right;} ←効くが効率が悪い

最も重要な文章はhタグを利用し「見出し」として定義してください。titleタグは使えません。
×
<title>タイトル</title>

<h2>タイトル</h2>

-----
table要素については百景さんのブログ内にサンプルを発見できません。
もしtableに

<table class="xxx"

こうしてセレクタが付いていれば比較的容易に一括での修正が可能です(JSを用います)
セレクタが無い場合には手作業か諦めるか、あるいは場合によってはできるかもしれませんがサンプルの無い状態ではお答えできません。

諦めざるを得ない人というのはセレクタ名を活用していない人です。
百景さんが当てはまるかどうかはわかりません (´・ω・`)

クラス名をつけることの重要性
https://vanillaice000.blog.fc2.com/blog-entry-640.html

具体的な対処については内容を見せて頂かない限りお返事のしようがありません。
3000件の手作業になるかもしれないし、JSで一発かもしれませんし、現段階ではお答えできません。
よろしくお願いします。

2018/05/17 (Thu) 21:25 | EDIT | REPLY |   

ero100k  

やっと投稿出来ました

サムネイル画像が1,200px以上必要なのには驚きました。
もはやサムネイルでは無いですね。ここまで時代が変わるのは驚きです。

そして画像は、widthでサイズ指定をしたものをCSSのmax-widthで制御するということですね。CSSこそが大切なのですね。

>わかりますかね (´・ω・`)
た、たぶん理解してると思います。これから何度もバイブルとして読ませて頂きます。ありがとうございます。tableについても読ませて頂きました。tableは全て何種類かのセレクタと言うんですか、クラス名でCSS制御しています。私の質問全てに答えて頂きました。ありがとうございます。


さて、わたくしAkiraさんに土下座して謝らなければいけません。
既存のエロサイトはメディアクエリーと言うんですか、こいつにCSS放り込んでviewport設定してモバイルフレンドリーテストをたったのいま合格しました。

私はたったの数日でAkiraさんを裏切ってしまった人間のQuzです。

だって、昨日Altenativeにやった事を朝起きるともう忘れてるんですもん。若いつもりでももう年齢的に無理なんですね。辛気くさい事を言ってご免なさいね。

2日間ですが、Akiraさんの記述されたものをいっぱい読ませて頂きました。少しだけレスポンシブのことも分かる様になりました。そして何よりAkiraさんの徹底したサポート活動を見るにつけ敬服の思いで胸がいっぱいになります。また変な日本語になりましたが、あなたの活動は驚きそのものです。Googleの独占に因って嘘つきだらけになったネット上に燦然と輝く知性の太陽があなたです。また、時々勉強に立ち寄らせてもらいます。

どうぞ、この人間のQuzめを大きなお心でお許し下さい。
失礼致します。ごめんください。

2018/05/17 (Thu) 22:23 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

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

はい。了解です。
お疲れ様でした。

2018/05/19 (Sat) 02:46 | EDIT | REPLY |   
カスタマイズ Q&A 質問時の注意 テンプレート