vanillaice (Akira)

vanillaice (Akira)

Pianissimo


名称 Pianissimo
カラム数 2
プラグイン対応 ○ (右サイドメニュー)
レスポンシブ対応
サイドメニュー
記事幅 可変 最大 770px
サイドバー幅 固定 300px (内寸 270px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
見出しデザイン
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム ヘッダー画像変更 etc.


valid-html5.png


更新履歴 2017.4.17


・ iPhoneでfixedされたinputが固定されないバグのApple修正に伴いhackを削除

参考記事
【重要】iPhoneでfixed指定されたinputが固定されないバグが解消されました

--------- 以下本文



更新履歴 2017.3.18


・ カスタマイズのガイドが不明瞭な部分を修正しました。

対象は サイドメニューのプロフィール及びSNSアイコン それぞれの削除範囲です
レイアウトの変更や不備・不具合の修正ではありません。
お手数おかけします。


--------- 以下本文



「地球最後の日に食べたいものは?」と聞かれ。
「小松菜 (´・ω・`)」
と答えて超バカにされたあきらでございます (o'ω')ノ
ちなみに相方の答えは「シーチキン」でした。



ぴあにしも
13日申請予定です。


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・全文表示タイプ
・トップページ以外は記事を探しやすいリスト形式
・サイドメニュー スクロールアンカー


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・カラムの形状変更や位置変更。
・トップページの表示タイプ変更(全文表示から要約表示へ変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。


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



サイドメニューのスクロールアンカーについて
デフォルトではサイドメニューのみピン留めしています。
メインコンテンツのピン留めを追加するには

$('#aside-container')

htmlソース内に1箇所ありますので、以下の通り修正してください

$('#aside-container,#main-fit-wrapper')

メインのピン留めを追加されますと、ページ遷移+オブジェクト移動の位置がずれますので使用の際は自己責任でお願いします。
(FC2検索バーをご利用の方はいずれにしろズレます。それ故「非表示」推奨です。)

参考記事


記事本文テキストの位置揃えについて
英文を多く扱う方はデフォルトの位置揃えにされない方が良いと思います。
(英単語の途中でも改行してしまいます)

/* 注)記事内テキスト位置揃えを解除する方この一行削除 */

CSSソース内に縦並びで3箇所ありますので全て削除して頂くと「左寄せ」になります。

修正前



修正後




右サイドメニュー最上部のプロフィール写真設定

htmlソース該当箇所は

url(<%image>)

です。
デフォルトでは 環境設定 > プロフィール で設定した写真が表示されます。
この部分が No image と表示される方は、プロフィール画面での個人設定をお願いします。
プロフィール画像から別の画像へ変更されます方は

url(ここに画像アドレス)

上記の通り修正してください。



記事タイトル上の投稿者名(Posted 日にち by ハンドルネーム) について
デフォルトはトップページへのリンクになっています。
リンク先の変更可能です。

<a href="<%url>"><%author_name></a>

htmlソース内に一箇所ありますので、
<%url>
の部分を
● 管理画面にされる方は
<%server_url>control.php

● 特定のページ(自己紹介など)へ飛ばしたい場合はそのページのURLに
● 記事編集画面に飛ばす場合は
//admin.blog.fc2.com/control.php?mode=editor&amp;process=load&amp;eno=<%topentry_no>

それぞれ変更してください。
(編集画面に設定するのはおすすめではありません。訪問者がクリックした際のその方のブログにある同一NO記事の編集画面が開いてしまいます。)



個別記事のページ送りやサイドメニューが下へ繰り越した際にレイアウトがおかしくなる方へ
えっとですね。
比較的新しい手法でレイアウトをしています。
新しいっちゅーか… なかなかブラウザの対応が進まなかったり、大きな仕様の変更があったりで実装に踏み切れなかっただけですが (´・ω・`)
今回思い切って使ってみました。
レイアウト崩れとる… な方は流石にブラウザのバージョンが古いと思いますので、最新バージョンにアップグレードをお願いします ^^;
ie10とかは無視してます。
もう既にセキュリティサポートも終了していますので、ie10向けフォールバック(後方互換)は致しません。
Androidの4.3とかAndroid標準ブラウザ(開発終了)も同じ理由で対応外です。
ごめんなさい (´・ω・`)
いずれはfloatの使用も辞めて、このレイアウト手法で統一したいと思っています。



ブログタイトル下説明文について
トップページでは、
環境設定 > ユーザー情報の設定 > ブログの説明 に記載した文章が表示されます。
トップ以外の各種ページでは、
CATEGORY PAGE, EDIT PAGE など、滞在中のページ種名称を表示するようにしています。
現在地がどこなのか、簡易的なパンくずリストの役割を担っています。
SEO的な影響は特にありませんが、ブログ説明文で全て統一したい方は

<p id="site-description">
から
</p>
に挟まれた内容を一旦消去し、
<%introduction>


に置き換えてください。
以下のように変更できていればOKです。

<p id="site-description">
  <%introduction>
</p>



ナビゲーション内「About」について
こちらは予備リンクです。
誘導したいページがあれば、About を適切なテキストに置き換えた上で、リンクアドレスを設定してください。
不要であれば削除。

該当部位検索
注)予備リンク

カスタマイズ
<li><a href="ここにリンクアドレス">テキスト</a>


デフォルトのままでは空リンクですので、削除あるいはリンク設定いずれかの処理をおすすめします。



サイト内検索について
iOSのバグが解消されましたのでハックコードを取り除きました。

------- 以下本文

こちらも前作同様iPhoneのバグ(or 仕様)あり。
また、iOS版 Google Chromeブラウザでの挙動の件もありますので以下のリンク先で内容をご確認ください。

Juvenile



No image画像について
FC2ブログ機能の「アイキャッチ画像設定」や「サムネイル代替画像の設定」を利用していない方に限り、抽出対象の画像が存在しない場合には以下のような No image が表示されます。


● 関連記事リスト, 検索結果, カテゴリなどのリストページ




「No image」のテキストと白いオーバーレイが自動で乗ります。
変更されます方は

● トップページ
//blog-imgs-102.fc2.com/v/a/n/vanillaice000/Pianissimonoimage.jpg

CSSソース内に2箇所あります。
上記画像アドレスをご希望のものに差し替えてください。



ドミナントカラー

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

例) 51,51,51


rgb(205,190,168) ナビゲーション上下ボーダー色, ページ送り背景色など
rgb(119,177,198) 基本リンク色, プロフィール写真リボンメインカラー, ページ送りホバー時背景色, コメントSend/ Deleteボタンホバー時背景色など



管理人コメントと訪問者コメントを分ける方
デフォルトはグレー背景アイコン。
サンプル




CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください。
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません。
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り。

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。



ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。



みなさんいつもありがとうございます ( ゚Д゚)ノ
関連記事

Comments 48

There are no comments yet.
-  
管理人のみ閲覧できます

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

2017/03/18 (Sat) 19:36 | EDIT | REPLY |   
Akira  
To Pianissimoカスタマイズガイダンスの件 内緒さん

お手数おかけしております。

> 「ここから」のガイドが抜けている件

失礼を致しました。
ガイダンスの「仕方」をミスしておりました。

<div class="sidebar-style">
の下に

<!-- 注)プロフィール不要の方ここから削除 -->

というコメントがありますので、そのコメントを含み、

<!-- 注)プロフィール不要の方ここまで削除 -->

までが削除対象です。

<div class="side-menu">のブロックにはプロフィール画像だけでなくSNSアイコンも入っていますので、プロフ + SNS 双方を削除される場合には
<div class="side-menu"> から
<!-- 注)サイドメニュープロフィール不要の方ここまで削除 -->
が対象です。
サイドメニュープロフィール〜 のガイドは
プロフィール・SNS不要の方
とすべきところでした。
修正しておきます。ご連絡ありがとうございます。

2017/03/18 (Sat) 22:55 | EDIT | REPLY |   
leaf787  
テキストの回り込みについて

はじめまして、こんにちは。

別のブログからの引っ越しで、こちらのテンプレートがとてもきれいでクールだったのでこれをベースにカスタマイズしていたのですが、申し訳ないながら上手くいかない所がありアドバイスをいただきたく書き込みしています。

URL http://leaf787.blog.fc2.com/
引っ越し途中の為記事など未完成な状態(取り敢えず一部をインポートした状態)ですがご容赦ください。


↓困っているところ

トップページを記事一覧のレイアウトにしたくて、全件表示を参考にしながらカスタマイズしました。

サムネイルの画像をもう少し大きくしたいなー、と思い、サイズを変更ししたのですが、右側にはみ出てしまいました。

テキスト(要約)の幅を狭めてサムネイル画像がレイアウトに収まるようにしたいのですが、うまく出来ず・・・

※どんな状況かはページを見て頂ければ一目瞭然かと思います。


CSS の

.thumbnails {
display: inline-block;
width: 72px;
height: 72px;
border-radius: 3px;
overflow: hidden;
position: relative;
}

の部分を、

.thumbnails {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 3px;
overflow: hidden;
position: relative;
border: solid 1px rgb(235,229,220);
}

のように書き換えています。

72 → 150 で画像は大きくなりましたが位置の設定よく分らず・・?
border は分かり易いように取り敢えず設定した感じです。

それと、本文のタグも、
<!--body_img-->
<%topentry_image_72>
<!--/body_img-->

を、
<!--body_img-->
<%topentry_image_w300>
<!--/body_img-->

に書き換えています。
これは書き換えても変化がなかったように見えましたが(確か)一応書き換えたままです。

説明があまりうまくないのですが状況と何をしたいかが伝わりますように。特に急いでいる訳でもないです。ボランティアな状況に申し訳なく思いますがお時間ある時にアドバイスいただければ幸いです。
(私も仕事があり即日チェックは出来ないかもしれないので・・・でも聞きぱなしにはしませんので宜しくお願いします。)

2017/07/22 (Sat) 23:23 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/22 (Sat) 23:33 | EDIT | REPLY |   
Akira  
To leaf787さん

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

まず「鍵コメント」の件ですが、こちらはコメントされる方へお任せしていますのでお気になさらず。
できれば公開して頂いた方が同じ質問・疑問をお持ちの他の方への手助けにもなりますし、私の手間も減るかな、と ^^;

で、申し訳ありません。
当記事本文にお受け出来ないご質問として
・トップページの表示タイプ変更(全文表示から要約表示へ変更 など)
を挙げております。
一つ受けると次から次へ、となってしまいますので、どなた様にも等しくお断りさせて頂いてます。
なのでヒントだけ。

.list-entry
そして
.list-a

への縱橫数値についても変更が必要です。
現在は上記のクラス名を持つボックス(aタグ)が72px四方なのに対し、内包されている要素(.thumbnails)が150px四方ということで、オーバーフロー(はみ出し)という状態になってます。

-------

できれば最初から要約タイプになっているテンプレートをおすすめします。

表示タイプ別一覧
http://vanillaice000.blog.fc2.com/blog-entry-283.html

Pianissimoについてはナビゲーションのリンク数を増やすのも向いていません。
特に「カテゴリ」をひとつづつ追加すると、今後もカテゴリ数は増えるでしょうから単体設置(それぞれを設置)ではなくモーダル等で一覧にされた方が良いと思います。

導入の仕方例)
http://vanillaice000.blog.fc2.com/blog-entry-537.html
導入済み例) --- TOP PAGE DEMOクリック、ナビゲーション内「Category」クリック
http://vanillaice000.blog.fc2.com/blog-entry-545.html

現在ナビゲーションのカスタマイズをした結果縦幅の体裁が壊れていますので、ブログタイトルの部位に不可視の要素が被り、部分的にクリックが困難な状態になっています。
(マウスで探ると指マークから矢印に変更になるのでわかると思います。その部分はクリックしても反応しません。これは問題だと思います。)

お任せしますが、一度ご検討ください。
よろしくお願いします。

2017/07/23 (Sun) 01:24 | EDIT | REPLY |   
leaf787  
To Akiraさん

アドバイスありがとうございます。

「鍵コメント」の件、それでは他の方の参考になるように特には付けないでおきます。


アウトな質問内容について、
は、トップページのレイアウト変更(全文→要約)についての質問ではなく、
要約表示(カテゴリ記事一覧とか、検索記事一覧とか)の時のサムネイル画像のサイズ変更、についてだったのでなんとかセーフかな、と思ったのですが、質問の仕方も悪かったですね。(実は質問を投稿してから、あ、と思いました)

でも、いただいたヒントでイメージしたとおりに出来たので十分でした。
ありがとうございます!


CSS の

/* only for search page */
.list-entry .list-a {
float: right;
margin-left: 10px;
margin-bottom: 10px;
width: 72px;
height: 72px;
}

を、

/* only for search page */
.list-entry .list-a {
float: right;
margin-left: 10px;
margin-bottom: 10px;
width: 150px;
height: 150px;

のように書き換えました。


はみ出しがなくなり、150px の画像が枠内に収まりました。
(良かったv)

まだ試してはいませんが、本文ソースの

<!--body_img-->
<%topentry_image_72>
<!--/body_img-->

の修正に関しては、関係なかったということになりますかね。


-------

私は長文記事が多いためトップページに要約表示を採用したいのですが、テンプレート検索で「表示タイプ別」の検索ができなかった事もあり、気に入ったものがなかなか見つからずに探す事に挫折してデザインで一番気に入った Pianissimo をベースにカスタマイズしました。(駄目な時は公式の 一番シンプルな White をベースにすることを検討してました)

>Pianissimoについてはナビゲーションのリンク数を増やすのも向いていません。

というのは、あれ、ですよね?ページ上部にカテゴリを展開していた所ですよね?
実はここは、マウスオーバーでプルダウン表示にしたかったのです。

他のテンプレートでそういのがあったのでいいな、と思って、その部分をコピペしていじってみたのですが、プルダウンにならず(多分JSの記述の読み込みがちゃんと出来てないのかなと)、でも、意図せず現在のようにカテゴリがトップに横並び表示され、スクロールなしにワンクリックで一覧を出せるのが意外に便利だったのでそのままにしました。

カテゴリ数が増えるとよろしくない、のはご指摘の通りですが、この先もそれほど増やす予定がないので取り敢えずはこれでいいかな、と(汎用性はないですが)。


うーん、、でもそうですか、縦幅の体裁が崩れてその為に不可視要素が出来てしまっているのですね。
ここは気づきませんでした。
トップの所をマウスで探っていると左上の何もない部分的な箇所で手のマーク(リンクマーク)になりますね、そこでしょうか?

取り敢えず、
<!-- グローバルナビゲーション1ここから -->

<!-- グローバルナビゲーション2(上からスライド)ここまで -->

の部分を、カスタマイズ前の Pianissimo のソースに差し替えましたが解消されないようです;

ナビゲーションの部分は上記のコメントに挟まれた中に、他のサイトから持ってきたソースを入れ込んだだけなので、これが問題ならこの部分を丸ごと元のソースに戻せばいいと思うのですが、他の要素も関係しているのでしょうか?

『縦幅の体裁が崩れて』というのが具体的にどの部分でどうなっているのか、不可視部分がソース上どのあたりなのか知りたい所ですが、これはトップページの改変になってアウトかな?それともナビゲーションのカスタマイズはセーフ?;

もし可能でしたらアドバイスを・・・いただけたら助かります。


最初から要約表示のテンプレートを使う、、、というのはごもっとです。
が、先に書いたとおり、うまく探す事ができずに Pianissimo カスタマイズを始め、現在の状態までカスタマイズするのに 半日以上(12時間) かかりました。もう少し Pianissimo で頑張りたいです。


>表示タイプ別一覧
http://vanillaice000.blog.fc2.com/blog-entry-283.html

↑わかりやすいページがあったんですね!ありがとうございます。
次回レイアウトを変える時の為にブックマークしておきます。


長文になりすみません。。

2017/07/24 (Mon) 13:24 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/24 (Mon) 13:34 | EDIT | REPLY |   
Akira  
To leaf787さん

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

> FC2 では、コメントは、ワンクッションの確認なく投稿されてしまう〜

leaf787さんはFC2ブログへはお引っ越しされたばかりなんですね。
FC2のコメント投稿はクッションページ経由が任意設定になってます。
クッションページというか、内容確認をしつつ、スパムを避けるための数字入力を求められます。
それが個人的に鬱陶しいもんですら、私が個人設定でOFF状態にしています。
すみません ( ̄∀ ̄;)
なのでご自身のページで必要であれば経由設定できます。
数字入力が面倒でなければ入れておいた方がスパムをある程度排除できるのでおすすめです。

で、伝えたいことがあれば長文・連投など私は一向に構いません。
どうぞお気にされませんよう

--------

> マウスオーバーでプルダウン表示にしたかった〜…その部分をコピペしていじってみた〜

ナビゲーションのカスタマイズというのは比較的高度な部類に入ります。
カスタマイズするにはナビそのものを全部書き換えるぐらいの気構えが必要です。
リンクを単純に並べるだけならば簡単です。そしてテンプレートが固定幅ならばやはり難しくはありません。
が、悲しいかなPianissimoはレスポンシブテンプレートです。
レスポンシブであるということは、一定の画面幅だけを考えて作れば良いわけではありませんので難易度は一気に上がります。
特殊な動作のナビ(プルダウン, モーダル など)というのは単純にコピペして対応できるというものではないんですね (´・ω・`)
特にプルダウン(ロールオーバー)というのは、スマホではマウス動作が使えませんのでロールオーバーからクリック展開に切り替わる設定も必要になってきます。
私がPianissimoを製作する際にナビゲーションのカスタマイズを前提にすれば良かったのですが。
というかその他テンプレではそういう感じにしていますけれど、Pianissimoはそうしなかった(笑)
申し訳ないです ^^;

一旦投稿します。

2017/07/24 (Mon) 19:44 | EDIT | REPLY |   
Akira  
To leaf787さん②

> ナビカスタマイズ前の Pianissimo のソースに差し替えましたが解消されない

拝見したところ、デフォルトに戻っているようです。
leaf787さんの方でまだ戻らないようでしたらWindowsであればF5リロード、ブラウザがChromeならば更にCtrl + Shift + R でスーパーリロードをお試しください。
(MacのChromeの場合は Command + Shift + R)

ナビゲーションについては自力でカスタマイズして頂くことになりますので、前述した内容と、さらに注意点を挙げておきます。

① ナビゲーション内容が複数段(複数行)にならないように気をつける。
これは画面幅がどんな状態でも、という但し書きつきです。
最小320pxまで一行に並ぶ状態を保持してください。
でないとまた同じことが起こります(部分的にクリック不可になる)

② about と mobile のリンクが必要かどうかを考える
aboutは予備の空リンクです。
何か用途があるのならばそこを代用して貰うようにしています。
ただし既に何度も書いている通り、文字数が長いテキストリンクはそれだけで幅を取りますので不向きです。
完結な内容への差し替えをおすすめします。
例)
about → contact

mobileのテキストリンクはパソコン上では出てきません。
スマホ・タブレット閲覧時のみ RSSが削除され、mobileが表示されます。
レスポンシブですので根本的に「スマホ版」というのは不要なのですが、中にはどうしてもスマホ版を設定したいという方がいらっしゃいます。
まぁ、個人的にはスマホ版は使って頂きたくはないのだけれど(理由は書ききれないので割愛)
leaf787さんがスマホ版を利用しないのであればソース内注釈に従って該当部位削除をお願いします。
この件はSEOにも関わっていますので、特別な理由がなければ是非削除してください。

----------

トップページを全文から要約に変更するカスタマイズについてはleaf787さんの方で頑張って頂いたので、後は細かい修正点などお伝えします。

一旦投稿。

2017/07/24 (Mon) 19:58 | EDIT | REPLY |   
Akira  
To leaf787さん③

現状の問題点

① サムネイルの下部が埋まっていない。
② No imageの文字が画像の中央になっていない。
③ サムネイル用変数が適切でない。

>
<!--body_img-->
<%topentry_image_72>
<!--/body_img-->
の修正に関しては、関係なかったということになりますかね〜

この件にも関わりがあります。
FC2のサムネイル用変数は3種類です。

<%topentry_image_72> --- 72 x 72 の正方形、寸足らずなし見切れあり、中央部を切り抜き表示
<%topentry_image_w300> --- 300 x 200 の長方形、寸足らず部位は黒背景で補てん
<%topentry_image> --- 縱橫サイズは元画像に準ずる

デフォルトは 72 x 72 のサムネイルです。
ここで考えて頂きたいのは、どの変数を利用するのか、というところです。

【サイズ問題】
300 x 200 の<%topentry_image_w300>は元画像の縦横比によっては寸足らずが生じます
その寸の足りていない部分は黒背景が勝手にくっつきます。
これはこの変数の仕様ですので変更できません。
そして横長ですので、 leaf787さんが指定した150 x 150のボックス内に表示する場合、縦横比の問題上ここでも必ず寸足らずが起こります。
現時点でトップページの変数に<%topentry_image_w300>を指定していますよね。
で、実際にボックスの下部が埋まっていない寸足らず状態が起きているわけです。

72 x 72 は寸足らずは起こりませんが、元サイズ依存の変数以外(72, 300)というのは元画像とは別の画像を生成し、それを利用しています。
ですから実寸が横72pxと300pxの画像です。
なので、72の方をそのまま利用した場合には150pxまで拡大されることになりますので、解像度が酷い事になります。
特にスマホは高解像度ディスプレイですので、綺麗に表示させるためには表示指定サイズの倍の実寸が必要です。
今回の場合は150px四方指定ですので、短辺が最低でも300px必要。
でないとボケボケの画像になります。

元サイズ依存の<%topentry_image>を利用する場合、150pxと小さいサムネイルでも記事内で使用した元画像と同じサイズの表示負荷がかかります。
例えば記事内画像が横1000pxで500KBならば、その500KBの負荷がそのままかかります。
その他2変数の場合は20KBや50KBという少ない容量で済みます。

ということで一長一短です。
個人的には<%topentry_image>の元画像依存をおすすめします。
72は小さすぎます。解像度の点でX
300は横長整形です。ボックスサイズに寸足らずなしで収めることは可能ですが(これから方法をお伝えします)、300 x 200 サムネイルをFC2側で整形する際に既に起こった寸足らず黒背景補てんについては調整不可。
というわけで、この中では最も「デザイン」しやすい点で元画像依存の<%topentry_image>をおすすめします。
画像容量によってはページが重たくなるかもですが。
それでも1枚あたり2MB, 3MBなんてことはないはず。
もしあるのならそれはもう容量削減を行って頂きたい(笑)

一旦投稿

2017/07/24 (Mon) 20:17 | EDIT | REPLY |   
Akira  
To leaf787さん④

どの変数を利用するかはお任せしますので、問題点3つの解消方法を記しておきます。

① サムネイルの下部が埋まっていない(寸足らず)

CSSソース末尾に以下の内容を追加。

.thumbnails img {
width: 100%;
max-width: initial;
max-width: auto;
height: 100%;
object-fit: cover;
object-position: center center;
}

② No imageの文字が画像の中央になっていない

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

.no-image-text {

この項目の
font: 11px/72px 'Fenix', 'serif';
の赤字部分を
150
に変更。

③ はお任せします。

で、leaf787さんの場合は修正箇所がたくさんあります。
本来、全文表示タイプと要約表示タイプとでは、htmlの内容が大きく違います。

全文
・トップページ用html
・カテゴリ用
・検索結果用
・タグ用
・アーカイブ用
・全記事一覧用
・個別記事用
・コメント編集用

要約
・トップページ用(カテゴリ, アーカイブ, タグは共通)
・検索結果用
・全記事一覧用
・個別記事用
・コメント編集用

こんな風に、本来は要約表示タイプは編集箇所が少なくて済むんですね。
しかし全文タイプを流用しているので不要htmlも存在しますし、もうそこは割り切って頂くしか (´・ω・`)
そういった意味も含めタイプ変更についてのカスタマイズサポートはお断りしています。
FC2で長文を書く際には「追記」というのが利用できますので、トップページへの掲載内容の削減は可能です。
ですから追記を上手く利用するというやり方もあります。
(ただし記事内容がそのまま反映されますのでリスト表示「風」ではあっても確実なものにはなりません)
他サイトから移設した記事については追記適用外なのでアレだけど (´・ω・`)

というわけで一度お試しください。よろしくお願いします。

2017/07/24 (Mon) 20:30 | EDIT | REPLY |   
leaf787  
To Akiraさん

こんにちは。

なかなか時間が取れず間が空いてしまってすみません。

お忙しい中沢山のアドバイスありがとうございます!
色々参考になりましたし勉強になりました。


>FC2のコメント投稿はクッションページ経由が任意設定になってます。

そうでしたか。
以前別の方の FC2 の Blog サイトで同じように即投稿状態であたふたした事がありまして(一度ではなく複数の FC2 サイトで)、FC2 はそういう仕様なのかな、という印象になっていました。

設定を探してみようとは思っていましたが、半ば諦めていた所もあったのでいい事聞けて良かったです。



>> ナビカスタマイズ前の Pianissimo のソースに差し替えましたが解消されない

>拝見したところ、デフォルトに戻っているようです。

これについてはやっぱり変なリンクが残っているようで?F5リロードやスーパーリロードでも解消されません。

ページトップ部分をマウスで左から右に滑らすと、指になったり矢印になったりします(5~6回位)。

試しに画面キャプチャをテスト記事に入れてみました。ご参考まで。
http://leaf787.blog.fc2.com/blog-entry-1.html

もしかしたらご指摘いただいたものと元々違った部分だったのかもしれませんが、公開されている大元のテンプレートではこのような現象はないので、私が何かしたせいと思うのですが・・・どのあたりなのか現状で検討がつかずに?状態です。


>① ナビゲーション内容が複数段(複数行)にならないように気をつける。

了解しました。レスポンシブルデザインだからですよね?

大分以前に HTML や CSS をかじった事があるのですが、その頃は CSS2 が出始めた位で(古っと思いました?)今回 色々なテンプレートでウインドウ幅を変えるとメニューの位置が変わったりメニューアイコンに変化したり、と 『 すごい進化だ~。仕組み(作り方)が全くわからん!! 』驚きと感動と諦めを覚えていました。

余計な雑談でしたが、そんな訳でその辺りの考え方や配慮に少々薄い感がるのは事実です。徐々に時代に合わせて慣れて行ければと思います。

・・・と、ここで所用がありまして時間切れに;
すみません、いったん投稿させていただきます。
また夜に続きのご報告などしますので宜しくお願いいたします。。

2017/07/29 (Sat) 16:03 | EDIT | REPLY |   
leaf787  
To Akiraさん

続きです。

>② about と mobile のリンクが必要かどうかを考える

私の場合は必要ないかなと思ったので削除しました。

ただどうしても、ワンクリックでカテゴリ一覧を表示できる手軽さ(自分にとってだけですが)が惜しくて、2つのカテゴリをチョイスして入れました。ツッコミどころは満載と思いますがそれ自体はスルーしていただきたく・・320px に収まっているかどうかはどこで判定すれば分からないので、収まっているかどうかはお聞きしたい所です・・・。

前回教えていただいたモーダル表示などはすぐにできそうにないのでいずれ考えていきたいです。


>② No imageの文字が画像の中央になっていない。

ありがとうございます。ご指摘の箇所を直して中央表示になった、と思います。


>③ サムネイル用変数が適切でない。

<%topentry_image> を採用し、

<%topentry_image_w300> に直した部分を <%topentry_image> に書き替えました(4箇所でした)。

ただ、すみません、<%topentry_image_72> の『寸足らずなし見切れあり』 という言葉の意味がちょっと・・どういう状況かよく理解できていません;(勉強不足と言われればそれまでなので、スルーしていただいてもいいです。)


最後に、
>で、leaf787さんの場合は修正箇所がたくさんあります。
>本来、全文表示タイプと要約表示タイプとでは、htmlの内容が大きく違います。

そうでしたか、そんな気もしてはいましたが(苦笑;)

以前のブログで追記で分けて投稿していた時がありましたが、追記で分けて投稿するのは意外に面倒なんですね(私だけでしょうか)。なので、今は追記は使っておらず、要約表示というのはなんて便利なんだvと使っている次第です。

カスタマイズには時間がかかるので今回はこれでしばらく使うつもりですが、やはり、最初から要約表示のテンプレートに変更しようかな、とも思えてきました。時間と気力の問題でいつになるか分かりませんが頑張ります。

2017/07/29 (Sat) 23:23 | EDIT | REPLY |   
leaf787  
To Akiraさん

投稿直後にすみません。今しがた気づいたことが。

Category の表示一覧なのですが、ようやく表示のサムネイル画像が 72×72 のまま、枠だけ 150×150 になってしまっているようです(白い部分が多い)。

↓例
http://leaf787.blog.fc2.com/blog-category-0.html

これはどうしてでしょうか。
検索結果の一覧ではそのような事はないようです。修正の仕方が悪かった?

2017/07/29 (Sat) 23:40 | EDIT | REPLY |   
Akira  
To leaf787さん

こんばんは ( ゚Д゚)ノ

> ナビゲーションに変なリンクが残っているようで〜

この原因はFC2検索バーです。
画面上部に固定されている検索窓 + 広告のアレ。
これが本来は画面外にあるべき要素を下へ押し下げてしまうんですね。
なので「非表示」を推奨しています。
個人設定で切り替えができますので、どうしても検索バーが必要という以外は抹殺をおすすめします(笑)

> 320px に収まっているかどうかはどこで判定すれば分からないので〜

収まりましたよ。
スマホでも問題なく表示されていますのでご安心ください (●'0'●)/

一旦投稿しますね。

2017/07/30 (Sun) 01:25 | EDIT | REPLY |   
Akira  
To leaf787さん②

> <%topentry_image_72> の『寸足らずなし見切れあり』 という言葉の意味が

「見切れ」「寸足らず」というのは各々こういった状態です ↓
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/a9dfjew9f.jpg

> 最初から要約表示のテンプレートに変更しようかな、とも思えてきました〜

お任せしますが、既に形は出来上がっていますのでそう思い悩む必要も無いかと思います(笑)

> Category の表示一覧〜ようやく表示のサムネイル画像が 72×72 のまま、枠だけ 150×150〜

変数が72のままです。
あと、このコメントの ↓
http://vanillaice000.blog.fc2.com/blog-entry-488.html#comment3866

.thumbnails img

に係るCSS記述が見当たりません。
この部分がボックス内に隙間なく画像を埋めるための内容ですので、トップページでも下に隙間ができています(「SIMフリ〜」の記事。この状態が「寸足らず」)

今一度ご確認くださいね。
よろしくお願いします。

2017/07/30 (Sun) 01:52 | EDIT | REPLY |   
leaf787  
To Akiraさん

何度もアドバイスありがとうございます。

>> ナビゲーションに変なリンクが残っているようで〜

>この原因はFC2検索バーです。

検索バー非表示ですっきりしました。
個人の「テスト」の記事にも解決法を入れさせていただきました。



>「見切れ」「寸足らず」というのは各々こういった状態です ↓
>http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/a9dfjew9f.jpg

すごい分かりやすいです! ありがとうございます。



>> Category の表示一覧〜ようやく表示のサムネイル画像が 72×72 のまま、枠だけ 150×150〜

>変数が72のままです。
>あと、このコメントの ↓ ~

最初の 72 → 300 の修正で修正箇所を落としていたようです(その後 300 → 数字なしのタグに修正した為)。
72 で検索して <%topentry_image> に修正して解決しました。



>.thumbnails img

CSS の最後に追加しました。治りましたでしょうか。
ここはイマイチどこがどう変わっているかよく分かっていないので(確認する前に追記してしまった;)また時間がある時にトライ&アゲインで確かめてみたいと思います。



長文かつ複数の疑問にアドバイスいただき本当にありがとうございます。

>お任せしますが、既に形は出来上がっていますのでそう思い悩む必要も無いかと思います(笑)

そう言っていただけると少しホッとしました。
CSS や HTML を分かっている方からしたら、見た目は同じでも中身がイマイチだとモヤっとするかな、と思ったり、ましてご自分が時間かけた作品だと余計にそうかな、とも思いまして。
要約表示に変更した時点でそういう意味では失礼なのですが、こうしてアドバイスまでいただいて本当に感謝です。

また試行錯誤などしていくと思いますがしばらくこれでつかってみようと思います。

ありがとうございました ☆´ー'))

2017/07/31 (Mon) 13:05 | EDIT | REPLY |   
Akira  
To leaf787さん (完了のご報告)

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

サムネイル部分、直りましたよ。
修正前は下の寸が足りずに埋まっていませんでしたが、今は全体に表示されています。
サムネイル表示範囲に枠もつけていますので、寸足らずのままだと結構目立ちます。

落ち着いて記事が書ける状態になりましたでしょうか。
お疲れ様でした

2017/08/01 (Tue) 20:23 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/07 (Thu) 01:10 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/07 (Thu) 01:51 | EDIT | REPLY |   
Akira  
To Pianissimoの件 内緒さん

まず最初の一文について。
いえ。全く構いません。
ご利用頂きありがとうございます

--------

> 各ページに表示される日付の曜日をwayoubiに変更したところ〜若干の違和感があります〜

「若干の違和感」というのは具体的にどういったものでしょうか。
フォント種のことかしら。
この部位はデフォルトでは英語表記を採用していますので、日本語指定が行われていません。
該当部位は
.entry-header time
でCtrl+F(Windows)/ Command+F(Mac)キー検索して頂きますと、その括りに

font-family: 'Fenix', 'serif';

という部分がありますので、ここに日本語フォントを追加してください。
記事本文と同じフォントを採用するには

font-family: 'Fenix', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴシック', 'Hiragino Sans', '游ゴシック体', 'YuGothic', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'sans-serif';

赤字部分を追加。
違和感がフォント種ではない、という場合にはその旨お知らせください。

--------

> インデックスの記事タイトルに、検索ページと同じ位置にnewマークを表示させる方法〜

まず<head>〜</head>内にある以下の内容を探し、

<!--not_edit_area--><!--not_titlelist_area-->
<script>function nw(n,e,a,w){var t=new Date,s=24,c=new Date(n,e-1,a,w);36e5*s>t-c&&document.write('<span class="new">New!</span>')}</script>
<!--/not_titlelist_area--><!--/not_edit_area-->

赤字部分を削除します。
続きまして
<!-- インデックス(前記事リスト)ここから -->
を目印に全記事一覧に係るhtml内容を探し、表示したい部位へ以下の内容を追加。

<script>nw('<%titlelist_year>','<%titlelist_month>','<%titlelist_day>','<%titlelist_hour>')</script>

ちなみに全記事リストの日付該当htmlは
<div class="list-entry-date">
です。

---------

> 多階層のドロワーメニューを導入しておりますが、ページ移行のたびにメニュー内の要素が散らばったような感じになります〜

申し訳ございません。テンプレート無関係な任意導入プラグインについてはサポートできません。
ヒントとしては、全てのscriptを外部ファイルとして導入されていますよね。
大元のscriptファイルはhttpアクセスするとしても、簡単な実行コードはhtmlに直接記載されることをおすすめします。
一瞬開いてしまうのはhtml内容がかなり上の方にあり、実行コードはhtmlの最後方にあります。
htmlの描画とJSの実行のタイムラグです。

・JSを</body>直前ではなく</head>直前へ移動(jQueryファイルの移動も必須です) --- ページ全体のロードは遅くなります。
・対象要素にdisplay: none; を指定、JS実行後に display: block; へ置換する処理

いずれか、もしくは双方で解消できるかと思います。
display: none; に抵抗が有る場合は visibility: hidden; を用いる手もありますが、今回はそれは効きそうにないですね。

-----------

> now_loading.cssとnow_loading.jsそれに<body>直下に記入した部分に問題があるかチェックしていただけないでしょうか〜

ごめんなさい。こちらはスルーで(笑)
loadingの仕組みを説明しないといけなくなりますので、次の「移植」の方を採用する場合へのお返事ということでお願いします。
簡単に言うと、loadingはページ遷移のaをクリックしたら即実行しなければいけませんが、現在導入している形では「ページ遷移後」の実行ですので間に合いません。
こちらも「JSの実行順」「そもそもの仕組み」で引っかかってます。

---------

> 別テンプレにあるページ遷移時フェイドエフェクトを移植すると、ローディング画面のタイミングは完璧ですが、以前から導入しているcolorboxというプラグインでのポップアップが無効になる〜

移植対象は「Classica」で合ってますでしょうか。
こちらはそもそもの仕組みが違いますので、現在導入済みのloading用JSとは切り分けてお考えください。

で、動作自体には問題ないということでしょうかね。
「ローディング画面のタイミングは完璧」とありますのでそのまま進めます(笑)

Colorboxのトリガーに使用しているaタグのクラス名は
cboxElement
で合ってますでしょうか。
共通で用いるクラス名が必要ですのでご確認をお願いします。
例)
<a class="aaa bbb">〜</a>

aaa --- colorbox対象全共通クラス ← こちらが必要
bbb --- colorboxグループ化のためのクラス

移植html内容中の
$('a:not([href^="#"]):not([target])')
に一部追加で

$('a:not([href^="#"]):not([target]):not(.cboxElement)')

これでできると思います。

-----------

> READ MOREボタンのリンク先アドレス末尾に#postscriptとあるのを消去しましたが、この意味とメリット・デメリットがありましたら〜

頭出しの位置が異なります。
記事タイトルまたは記事下の矢印をクリックして個別記事へ移動した際には記事「本文」を頭に表示します。
READ MORE をクリックして移動した場合には「追記」を頭に表示します。
ですからトップページで既に読んだ本文をもう一度読ませることがなくなります。
読んで字の如く「続き」から読めます。

以上です。よろしくお願いします ( ゚Д゚)ノ

2017/09/07 (Thu) 17:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/07 (Thu) 22:00 | EDIT | REPLY |   
Akira  
To Pianissimoフォントの件 内緒さん

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

> 漢字の部分だけ頭一つ大きくなります〜

私はMacから閲覧していますのでそういったことは起こりませんが(ヒラギノ角ゴ)、Windowsの方は順当に行けばメイリオフォント表示です。
メイリオ自体がずんぐりしたフォントであることと、欧文指定のfenixとのバランスが合わないことが原因ですよね。
fenixは欧文の中でも小ぢんまりしたフォント、対するメイリオはずんぐりフォントです。
解決策としは欧文第一優先のfenixを除外して、アルファベットもメイリオで表示するのが一番だと思います。

'Fenix',

を削除すればOKです。
(Macではヒラギノで表示されます)

--------

ここから余談。任意修正でお願いします。
まず、Pianissimoテンプレートは html5 です。

① marqueeのオーバーフロー
② 廃止属性の利用

ブログタイトル下にmarqueeを設けていますが、横幅に絶対単位で540pxが指定されています。
スマホ画面は横320px程度しかありませんので、超過して右側に大きな余白ができ閲覧困難な状態になってます。
max-width を設けるなどの処理をされると良いと思います。
というよりmarqueeはieの独自タグで既に廃止ですので利用自体おすすめはしません。
iOS9ではベンダープレフィックス(-webkit-)が必要です(現行最新はiOS10)
ホントはhtml5+CSS3で書き換えた方が良いのだけれど。

Colorboxのトリガーにrel属性を利用している、とのことですが、html5でのrel属性の値はユーザーが勝手に付けてはいけません。
rel属性の値は予め定義された
alternate
author
bookmark
nofollow
など、重ねて言いますが、ユーザーの任意名称は利用不可となっています。
修正したからといって検索順位に影響するわけではありませんが、エラーはエラー。
どこかのタイミングで正しく書き換えされることをおすすめします。
現在のJSトリガーはclass名、id名、カスタムデータ属性のいずれかで行うのがベストです。

2017/09/08 (Fri) 17:08 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/09 (Sat) 02:25 | EDIT | REPLY |   
Akira  
To Pianissimo完了のご報告 内緒さん

対策が素早くて驚きました(笑)
余計なお世話ととられることもある中、内緒さんのお言葉嬉しく頂戴します。
こちらこそありがとうございます。
お疲れ様でした

2017/09/09 (Sat) 04:11 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/09 (Sat) 11:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/11 (Mon) 19:34 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/11 (Mon) 23:55 | EDIT | REPLY |   
Akira  
To Pianissimo検索の件 内緒さん

ごめんなさい。内緒さんのコメントに気づいておりませんでした。
無視したみたいになっちゃってすみません (*_ _)
鍵付き投稿だとたまにやっちゃうんです ( ̄∀ ̄;)

> 下の方にスクロールしてハンバーガーボタンを開き検索語句を入力前にタップすると、PageTopが反応してメニューが閉じられます〜

要するに、検索しようとinput部位をタップするとページ最上部までズルズルっと引き戻されるというアレですよね。
そちらについては記事内にある通り、iOSのグリッチです。
iOS10では既に修正されていますが、iOS9での修正はありません。
iOS9をメインと考えるのならば、グリッチを塞ぐためのhackが必要です。
iOS10をメインとするならば、今度は逆にhackが悪影響を及ぼします。
なのでこの件については二択なんですね (´・ω・`)
選べない場合には「ナビゲーションから削除」をおすすめしています。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-452.html#about-search
http://vanillaice000.blog.fc2.com/blog-entry-515.html

ご検討頂きまして、hackが必要ということであればJSコードをお伝えします。
ただしくれぐれもそれを採用するのであれば、最新iOSの方へは不親切な挙動となります。
私のiPhoneは最新OSですので、本件の目視確認は叶わず、また、問題なく動作しています。
よろしくお願いします。

2017/09/12 (Tue) 00:16 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/12 (Tue) 00:31 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/12 (Tue) 01:06 | EDIT | REPLY |   
Akira  
To Pianissimo検索の件 内緒さん

動画リンク、せっかくですが閲覧不可のようです(404 not found)
過去に悩まされましたので挙動自体は覚えています。
こういう類はメーカー側の修正を待つしかありませんので、一番良いのは常にOSを最新にしておくことかと思います。
Microsoft以外は現在のバージョンとその一つ前のものまでしかサポートしませんので、バグ・グリッチの修正を望むのであればアップデート・アップグレードしか手立てがないのです (´・ω・`)

2017/09/12 (Tue) 01:13 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/12 (Tue) 01:22 | EDIT | REPLY |   
Akira  
To Pianissimo 内緒さん

ご丁寧にありがとうございます。
鍵付きについては一向に構いませんのでお気になさらず

2017/09/12 (Tue) 01:32 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/30 (Sat) 02:13 | EDIT | REPLY |   
Akira  
To Pianissimoサイト内検索ツールチップの件 内緒さん

こんにちは ( ゚Д゚)ノ

<li class="expand-form">

で検索するとhtmlソース内に2箇所あります。
以下の通り修正。

<li class="expand-form" title="検索">

属性間の半角スペースをお忘れなく。
よろしくお願いします。

2017/09/30 (Sat) 10:39 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/09/30 (Sat) 11:06 | EDIT | REPLY |   
Akira  
To Pianissimoサイト内検索ツールチップの件 内緒さん(完了のご報告)

コメントの件、了解です(笑)
こちらこそよろしくお願いします (●'0'●)/

2017/09/30 (Sat) 12:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/10/01 (Sun) 17:23 | EDIT | REPLY |   
Akira  
To 一部記事のテキストが出ない件 内緒さん

ちょっとその前にですね、エラー項目がかなりたくさんありますので一つづつ修正した方が良いと思います。
せっかくSSLを有効にしても混在コンテンツがたくさん。
内緒さんの場合は以下のページが該当です。
(スクリプトファイルに問題あり)

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

先に本件の原因だけお伝えしておきます。
aタグの構文エラーです。

X
<a href="アドレス" title=代替テキスト">


<a href="アドレス" title="代替テキスト">

その他のエラーもまとめますので少しお時間くださいね。
よろしくお願いします。

2017/10/01 (Sun) 18:59 | EDIT | REPLY |   
Akira  
To バリデーションエラーの件 内緒さん

一部記事のテキストが出ない件のご質問をされた内緒さん宛です。

-------

① 追加したスタイルシート(link要素)全てエラー

<link rel="stylesheet" href="cssファイルURL" rel="stylesheet" media="all" />

赤字部分不要です。
1. rel属性の重複
2. 最後尾のバックスラッシュ不要(これが必要なのはxhtmlです。このテンプレートはhtml5です。)

2についてはエラーではありませんが無意味です。
また、各社APIなどはバックスラッシュ付き or 無し の別を判断するものもありますのでhead情報内は必ず統一してください。

本エラーは9件あります。

------

② 記号の統一
googleAPIのファイルの記述が一部

<script src=https://maps.googleapis.com/maps/省略></script>

ダブルクオーテーションの記号は
"
です。
見た目が似通った記号はチェックしなければいけませんし、html内で利用する記号はダブルとシングルの別も統一しなければいけません。
特にJS構文が絡む時にはダブルとシングルを同コード内で分ける必要がありますので、htmlでの記号は必ず統一してください。

------

③ 新着記事のプラグインid重複

IDはページ内で単独利用するためのものですので、対象要素が複数ある場合には使えません。
<div id="recent-list">
5件表示している新着が全て同一IDになっていますので、idではなくclassに変更するなどの処理をしてください。
ID重複エラーはページの読み込みに影響します。
(マッチングが狂う)

------

④ 移設したモーダルもid重複

別テンプレートから移植したモーダルですが、こちらも複数設置するのであればidを分ける必要があります。
特にこちらは checkbox という要素を用いています。
チェックボックスはチェックした際の動作(この場合には「クリック後の動作」)対象の関連付けをidで行います。
同じidを持つ要素が複数あれば関連付けが上手く行きません。

------

⑤ li要素の欠如

個別記事に comment と trackback の表示が右寄せで存在しますが、カスタマイズ時に <li> を削除してしまわれたのではないでしょうか。
ul要素内に子要素がある場合は必ずli要素になっていなければいけません。

------

⑥ 混在コンテンツ

slick などのスクリプトファイルを確認してください。

------

まとめ
htmlは記号の違いや欠如、重複などが後続要素に大きな影響を及ぼします。
現在のところは幸運にもページ全体が崩れるようなことはありませんが、それはたまたま運が良かったというだけです。
この機会に是非修正を。

2017/10/01 (Sun) 19:39 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/10/01 (Sun) 19:50 | EDIT | REPLY |   
Akira  
To バリデーションエラーの件 内緒さん②

今回「画像ファイル」は関係していません。
精査する内容をよくお読み頂きまして、それぞれの対処をお願いします。

2017/10/01 (Sun) 20:00 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/10/01 (Sun) 22:03 | EDIT | REPLY |   
Akira  
To バリデーションエラーの件 内緒さん③

えーと。④はなんでしたっけ(笑)
とりあえず拝見しに参ります。
また追記しますね。
取り急ぎのお返事です。

-----

まずGoogle Mapの記号については修正されていますが、

https://maps.googleapis.com/maps/api/js?key=[固有番号]

赤字の[]は何なんでしょうか。
これ要らないと思うのですが。
ちょっと私の認識が違うなら申し訳ないです。
通常はパラメータでこういった記号を用いることは無いと思うので一度確認をお願いします。
いずれにしろ invalid(不正確) としてエラー項目になってますので何かが違うはず。

-------

slickのttfファイルがhttpです。
ttfってトゥルータイプフォントだと思いますが、必要でしょうか?
とりあえずgithabでslickの最新版をご確認ください。

https://github.com/kenwheeler/slick/

必要なのは cssファイル(.css) と jsファイル(できれば圧縮の min.js の方) の2ファイルのみで他は不要です。
jQueryプラグインなどを利用される際は、内部で自動アクセスする内容もチェックする必要があります。
例えば今回の「フォント」もそうですし、スライダーなどは矢印用画像を表示させるのに内部で第三サーバーcssを読み込んでいる場合もあります。

-------

jQuery migrateの内容が invalid です。
migrateでマージするよりも最新jQuery内容に沿った正しいJSコードを書くように心がけた方が良いと思います。
PianissimoのデフォルトjQueryバージョンは2.1.3ですが、3.00にUPした理由があるかと思います。
その理由がわかれば対象のプラグインがわかるはずですので、migrateを外しても機能するのかどうかをご確認ください。
PianissimoのjQueryについては私の方でメンテナンスを行う際にバージョンを上げる予定ですが、今はちょっとできない ^^;
もし内緒さんにとってバージョン3以下が都合が悪い、という場合にはテンプレートのJSコードを一部修正する必要が出てきます。
いずれにしろmigrateも万能ではありません。
寧ろ諸刃の剣で長期利用は危険だと思っています。

-------

④はモーダルでしたね。
colorboxは関係ありません。
ナビゲーションに設置した「お問い合わせフォーム」のことです。
Pianissimoはナビゲーションが2つありますが、双方に全く同じものを入れてしまうとエラーです(id重複)
めんどでもいずれか一方のidを
modal-trigger-label
から
modal-trigger-label2
に変更するなど名称を変更し、名称変更した方にも同じCSSを当ててください。
CSSの
#modal-trigger-label {

#modal-trigger-label,
#modal-trigger-label2 {
とすればOKです。
これは起動させるための「ボタン」の処理です。
ここでの「ボタン」はメールアイコンです。
呼び出すモーダルはいずれも同一のものですので、ボタンへのid処理以外は不要です。
(別のものを呼び出す場合にはモーダルの処理も必要)

------

X
<a href="https://******/blog-entry-170.html"; title="フ****もらう 7">

<a href="https://******/blog-entry-170.html" title="フ****もらう 7">

X
<img src="https://******/entry_166.jpg"; alt="チャ****ーナ" border="0" width="480" height="360" />

<img src="https://******/entry_166.jpg" alt="チャ****ーナ" border="0" width="480" height="360">

この余分な ; のエラーが多数の記事に点在しています。
これは結構めんどうな作業になりそうな… ^^;

; title

; alt

でCtrl+F(Windows)/ Command+F(Mac)キー検索して見つけて修正、という流れになりますかね。
;
で探しても良いですが、インナーCSS(html要素内に書かれているCSS)は ; を多用しているはずですので見分けが面倒。
でも、ここには ; title と ; alt を見つけたので書きましたが、他のパターンもあるかもです。

とりあえずここまで頑張ってください。
全体的に通信リクエストが多すぎる感じがします。
(head情報内にある https の付いたものは全てリクエストです)
内緒さんのページ、ちょっと重たいですよね (´・ω・`)
CSSファイルを小分けしているのも原因のひとつです。
CSSというのは「レンダリングブロックリソース」といって、ページの描画を阻害します。
阻害というか、全てを解釈するまで次(html解釈やJS解釈)へ進まない性質のものです。
ですからまとめられるCSSはまとめ、アクセス量だけでも減らすと良いと思います。
アクセスが増えるだけでも負荷は増しますので。
あとJSもCSSに次いでレンダリングブロックをするリソースです。
CSSの場合とまた少し性質は違いますけれど。
スライダーも複数を入れるのではなく何か一つに統一してはいかがでしょうか。

2017/10/01 (Sun) 22:54 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/10/02 (Mon) 00:59 | EDIT | REPLY |   
Akira  
To バリデーションエラーの件 内緒さん④

あと大きなエラーはtweetボタンの構文エラーが残ってます。
こちらも一度公式ページで確認してみてください。
重大エラーは全て消えましたよ(Tweetボタン以外)
とても大変だったと思います。
あとは少しづつ記事内の凡ミスを訂正されると良いですね。
お疲れ様です

2017/10/02 (Mon) 01:21 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/10/02 (Mon) 02:07 | EDIT | REPLY |   

Leave a reply

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