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

vanillaice (Akira)

vanillaice (Akira)

Pianissimo
PCアイコン TBアイコン SPアイコン

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

最終更新 2017.12.18

大規模なメンテナンスを行いました。
詳細は以下のページでご確認ください。

Pianissimo大規模メンテナンスのお知らせ - 未分類(個人的テスト等)

Stoicテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

名称 Pianissimo
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大720px
サイド --- 300px
記事内で利用可能な見出しレベル h2からh6
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カラム
右サイドメニュー
(デフォルト)
下 or 右サイドメニュー
(デバイス幅依存)
下サイドメニュー
過去の更新一覧
最終更新 2017.4.17

・ iPhoneでfixedされたinputが固定されないバグのApple修正に伴いhackを削除 参考記事
【重要】iPhoneでfixed指定されたinputが固定されないバグが解消されました

更新履歴 2017.3.18

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

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

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

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

TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



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

・カラムの形状変更や位置変更。
・トップページの表示タイプ変更(全文表示から要約表示へ変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。

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

左右カラム入れ替えについて
#main-container

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

続きまして、上記で作業した直近に

#primary

という箇所があります。検索した場合には2箇所出てきますがやはり最初のものが対象です。
その括りの中の padding-right: 30px; 緑の right を left に変更してください。

続きまして、同じく #primary の今度は2つ目に padding-right: 0; というのがありますので、こちらも right を left に変更。
ここまでがメインカラムの操作です。

続きましてサイドカラムの処理。

#secondary

を検索すると2箇所出てきます。1箇所目の padding-left: 30px; の緑部分を left から right に変更。
サイドはこの1箇所のみ変更でOKです。 以上 全4手順です。

記事本文テキストの位置揃えについて

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

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

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記事の編集画面が開いてしまいます。)

ブログタイトル下説明文について

トップページでは、
環境設定 > ユーザー情報の設定 > ブログの説明 に記載した文章が表示されます。
トップ以外の各種ページでは、
CATEGORY PAGE, EDIT PAGE など、滞在中のページ種名称を表示するようにしています。
現在地がどこなのか、簡易的なパンくずリストの役割を担っています。
SEO的な影響は特にありませんが、ブログ説明文で全て統一したい方は
<p id="site-description"> から </p> に挟まれた内容を一旦消去し、
<%introduction>
に置き換えてください。
以下のように変更できていればOKです。

<p id="site-description">
  <%introduction>
</p>
ナビゲーションについて

画面幅が666pxを下回るとナビゲーションが折りたたまれます。
リンクを増やす方は リンクが複数段にならないよう注意してください。
レスポンシブですので一定の画面幅だけで済ませず、必ずブラウザを縮小してご確認ください。
折りたたみ前にリンクが下の行へ移動してしまう場合には既定値の変更が必要です。

navi breakpoint

で検索すると2箇所出てきますので、各々 666 の数字を 大きく 変更してください。 より早い段階で折りたたまれるようになります。

ナビゲーション内「About」について

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

サイト内検索について

iOSのバグが解消されましたのでハックコードを取り除きました。

------- 以下本文

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

No image画像について

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

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

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

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/Pianissimonoimage200.jpg

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

ドミナントカラー

以下が基本色調です
数字の部分だけを抜き出して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点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

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

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

関連記事

Comments 89

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 |   
Masami  
AdominとProfileについて

Akira様
いつも素敵なテンプレートをありがとうございます。
この度Pianissimoのテンプレートを使わせていただきたいと思っているのですが、
AdominとProfileのどちらかの画像だけを載せることはできますでしょうか?
お手数ですが、お返事いただければ幸いです。
よろしくお願いいたします。

2017/11/02 (Thu) 06:02 | EDIT | REPLY |   
Akira  
To Masamiさん

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

> AdominとProfileのどちらかの画像だけ〜

テンプレートに含まれる「プロフィール」と公式プラグインの「プロフィール」がダブる、ということですよね。
プラグインの非表示については個人設定で行なってください。
設定ページ
https://admin.blog.fc2.com/control.php?mode=plugin

テンプレートのプロフィールは「htmlから削除する」という方法になります。
<!-- 注)プロフィール・SNS不要の方ここから削除 -->
を目印にガイダンスに従ってください。
よろしくお願いします。

2017/11/02 (Thu) 16:30 | EDIT | REPLY |   
nana  
全面表示について

はじめまして。
pianissimoのテンプレートを使わせてもらいました。
素敵なテンプレートをありがとうございます♪
シンプルなテンプレートでとても気に入っています☆

私の僅かな知識でがんばって少しだけカスタマイズさせて頂きましたが
ネット等で調べても1つだけどうしても出来ない所がありましたので
アドバイスを頂きたくてコメントさせて頂きました。

出来ない所いうのは・・・
PCで全体の幅を狭くしたり、タブレット等で開くと
右サイドメニューが一番下に表示されてしまうので
右サイドメニューが下に落ちない様にしたいのです。

もしよろしければアドバイスを頂けないでしょうか?
お忙しい中申し訳ありませんがお時間がある時にお返事頂けたら幸いです。

2017/12/01 (Fri) 06:04 | EDIT | REPLY |   
Akira  
To nanaさん

こんにちは。

レスポンシブテンプレートなのでカラムは「落ちる」のではなく「落としている」のです。
そもそも「カラム落ち」であるならば縦一列に左に寄った状態になり、現在のような各プラグインが横に整列し直すといったことは起こりません。
レスポンシブはパソコンを始めタブレットやスマートフォンでも支障なく閲覧できるようなデザインですので、横並びカラムを維持してしまえば狭い画面ではまとまに閲覧ができません。
(画面超過 or 超過させない場合は極小文字)

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

対処法としては
① ブレイクポイントを設定し直す
② 固定幅テンプレートに変更する
このいずれかになります。
①を選択する場合、タブレットといってもサイズはピンキリですからお使いのタブレットの名前(リリースメーカー及び製品名称)をお伝えください。
(サイズによってはタブレット閲覧時にメインカラムが非常に狭いレイアウトになることがあります)
②を選択されますときは スマートフォン版の設定 を必ず行ってください。
固定幅テンプレートはモバイルフレンドリーとしてGoogleに認めてもらえませんので、スマートフォン版設定必須です。
よろしくお願いします。

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

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

2018/01/15 (Mon) 23:27 | EDIT | REPLY |   
Akira  
To Pianissimoアップデートの件 内緒さん

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

はい。ご自身の都合で構いませんよ。
内緒さんがとても律儀でらっしゃるので驚きました(笑)
いつもありがとうございます

2018/01/16 (Tue) 01:19 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/01/30 (Tue) 23:00 | EDIT | REPLY |   
Akira  
To Pianissimoアップデートの件 内緒さん

こんばんは ( ゚Д゚)ノ

> 『アメーバブログの【スマホでは画像は画面横いっぱい、テキストは余白あり】をFC2でやってみよう』の内容が反映されなくなりました〜

こちらは
.exImage
のすぐ上に以下の内容を足すことで解消できると思います。

#primary {
overflow: visible;
}

---------
> タグ検索でもワード検索と同様に大文字と小文字を一致させる〜

これは「意味的に」ではなく「フォントの見た目的に」ということで合ってますでしょうか。
検索は大文字小文字の区別をしませんのでたぶんそうだと思いますけれど。

.another-title
を検索すると3箇所中最初の括りに
text-transform: uppercase;
という指定がありますのでそれを削除してください。

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

-------
もういっこありましたね(笑)

> トップページの最下部を表示した状態で更新すると、フッターまでの余白及びページ送りが表示されなくなります〜

これはスクロールアンカーの挙動です。
単純なリロードの時はこのアンカーJSが高さの再計算を行いません。
スーパーリロードを行った場合には再計算されます。
これはJSの特性というかアンカーの性質なので気になるようであれば外して頂くのが一番だと思います (´・ω・`)

flexstickmin
を目印に、その文字列が含まれる
<script>〜</script> を削除。
その直下の
<script>〜</script> も削除してください。

私が今このテンプレート(Axis)で入れている内容とまたちょっと違うんですよね (´・ω・`)
統一しようとは思っているのですが、今回は見送っちゃった ^^;

2018/01/31 (Wed) 00:45 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/01/31 (Wed) 01:35 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/01/31 (Wed) 02:21 | EDIT | REPLY |   
Akira  
To Pianissimoアップデートの件 内緒さん②

> グローバルナビゲーションの検索入力はカーソルがズレる〜

これiOSのグリッチです (´・ω・`)
以前もfixed要素の中のinputが固定されずおかしくなるといったことがあり、それは解消されましたがiOS11でまたステイタスバーの仕様が変わったんですよね。
そして別の形のグリッチ再発。

記事にしようと思っているのですが時間がとれない(笑)
もうこういうOS系・ブラウザ系バグは追っても仕方がないというか、修正を待つのが一番だと思うようになりました。
先回のinputではhackコードを入れてましたが、修正と同時に全部hack削除の手間が生じ。
もうそういうのやってらんねーって感じになっちゃいまして (´・ω・`)
ステイタスバー + キーボード入力スペース + 固定要素
の兼ね合いがなかなか難しいみたい。
でもそれはAppleさんが頑張ってね、と (´・ω・`)

2018/01/31 (Wed) 02:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/01/31 (Wed) 12:17 | EDIT | REPLY |   
Akira  
To Pianissimoアップデートの件 内緒さん(終了のご報告)

そうですね。検索の件はそれが良いと思います。

inputの方は今日iOSのアップデートをしましたが直ってないですね(笑)
前のも結構時間かかったので今回も長いのかなぁ (´-ε-`;)

こちらこそいつもありがとうございます

2018/01/31 (Wed) 23:14 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/02 (Fri) 17:07 | EDIT | REPLY |   
Akira  
To Pianissimoグローバルナビの件 内緒さん

移植して頂くのは構いませんが、

・ ページ遷移 + オブジェクト移動(コメントなど)の頭出しの調整
(コメント投稿フォーム, 全受信コメント, read moreから個別記事へ移動した際の追記)
・ スムーススクロールのJS内容

も変更する必要が生じます。
特にスムーススクロールですね。固定ナビの場合にはトップからナビの高さ分は移動しませんのでその調整を行なっています。
それがナビの仕様を書き換えることにより初期に戻さないといろいろずれます。

お手伝いはできませんので、ちょっとおすすめできないかなー (´・ω・`)
同じタイプのテンプレを探して(ナビが最初はブログタイトルの下にあって、最上部に届いたら留まる + 引っ込みが通常の逆タイプ)クラスまたはIDを置き換えればできるかと。
自分のテンプレでどれがそれにあたるかちょっと今把握出来ない(笑)すみません ^^;

--------
あー。ごめんなさい。無いかも。無いわ(笑)
いずれにしろ相当苦労されると思います、とお伝えしておきます (´・ェ・`)
というのはですね、
上部に届いたら留まる ← ここまでの動作はスクロールが「上」に向いていることを判定
そこから逆方向にスクロールしたら元の位置(上部固定を外して初期位置に戻す)というのをやらないといけないですよね。
この内容のJSってかなり難しいと思います。なのでたぶん私もやってません。
物理的にも動きの整合性が取れないですよね。
となるとナビゲーションの初期位置を最上部に固定しておくか。
すると先にお伝えした内容にさらに「ナビゲーションのhtml及びCSS内容変更」までも必要になります。
でもいっそそれならサンプルたくさんあります。
それこそAxisとか。

2018/02/02 (Fri) 18:05 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/02 (Fri) 20:47 | EDIT | REPLY |   
Akira  
To Pianissimoグローバルナビの件 内緒さん(終了のご報告)

そうですね。かなり高度なカスタマイズになりますので、テンプレート変更した方が早いと思います(笑)

こちらこそいつもありがとうございますー (●'0'●)/

2018/02/03 (Sat) 11:24 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/06 (Tue) 16:16 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/06 (Tue) 16:25 | EDIT | REPLY |   
Akira  
To Pianissimo NEWマーク画像の件 内緒さん

こんにちは (ノ゚ェ゚)

head内にある以下の内容を

<img src="画像URL" border="0">

以下の通り修正してください。

<img src="画像URL" style="vertical-align: middle;" alt="">

border属性は既に廃止されているのと私の方でCSSリセットかけてますので不要です(記事内での画像掲載時も不要)
あとalt属性もちゃんと書いてくださいね。
空白(alt="")でも構いませんがalt属性自体が無いというのはいけません。

で、内緒さんCSSのリンクが多すぎます(笑)
パフォーマンス落ちてますので一つのファイルにまとめたほうが良いですよ。
リクエスト数が大量だとページ表示は遅くなります。特にCSSはレンダリングブロック要因です。

*** コメント一部追加しています(altのくだり)

2018/02/06 (Tue) 17:36 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/06 (Tue) 18:39 | EDIT | REPLY |   
Akira  
To Pianissimo NEWマーク画像の件 内緒さん ②

過去記事まで遡るかどうかは内緒さん次第です。
今回のようにことのついでに出来るならばやって、気づいた時点から今後に向けて注意すれば良いんじゃないですかね。
どのみちFC2ブログでは完全validは望めませんので、出来る範囲内でと考えれば良いと思います。

CSSについてはその作業で大丈夫です。
CSSはJSと違い、マージ(混合)しても何かが狂うようなことはありません。
メンテできるようにコメントを付けておくことをおすすめします。

例)
/* slick */
内容

/* tag cloud */
内容

こんな感じで。

2018/02/06 (Tue) 21:04 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/06 (Tue) 21:36 | EDIT | REPLY |   
Akira  
To Pianissimo NEWマーク画像の件 内緒さん(完了のご報告)

いえいえそんな。お気軽にどうぞ(笑)

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

2018/02/07 (Wed) 18:28 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/13 (Tue) 13:42 | EDIT | REPLY |   
Akira  
To Pianissimoの件 内緒さん

こんにちは (ノ゚ェ゚)

> 全記事一覧(INDEX)に移動すると一瞬サイドバーのない状態で表示され、それからすぐに正常に表示されます〜

これは元からそうですよ (´・ω・`)
メインとサイドそれぞれフェイドインで秒数をずらしています。
メインが先に表示され、少し遅れてサイドが表示されるよう意図的にデザインしています。
メインは1.2s、サイドは1.5sの指定です。
見た目の面もあるんですが、サイドを少し遅らせる理由もあります。

サイドメニューのスクロールアンカーは高さを計算する必要があり、高さ計算が終わった時点で再表示と言うんですかね、一旦既に表示されてたものがまたパッと表示されるというか、点滅というか。
それを緩和させるためってのもあります。

また、htmlは上から順に描画をしてきますので、内緒さんのように独自に画像を入れており、その画像の容量が大きい(サムネイルにしては大きいと思います。pngで横72px画像一つあたり60〜100KB近くあります。この容量は通常横800〜1000px程度の画像の容量と同じです)場合にはサイドメニューの描画自体が遅くなってしまいます。
表示件数は最大で1000件なわけですからかなり重たいですね。
元々全記事一覧ページというのはアクセスに時間のかかるページ種です(他ページ種とは異なります)
メインの描画が遅れればサイドの描画もそれに応じて遅くなります。

緩和のためには遅延読み込みを行うか、画像に適切な容量削減を行なってください。
実際ウォーターフォールの確認をすると画像の読み込みにものすごく時間を要しており、ページスピードスコアは0% Fランクになってます。
Pianissimoの純正スコアは97% Aランクですので、ちょっとダウンしすぎかなぁと思います。

------
ずれが気になる場合は fadeIn を検索し、該当する行を全て削除してください。
ただし恐らく今よりも別の形でさらに気になる表示になるとは思います(笑)

2018/02/13 (Tue) 15:06 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/13 (Tue) 17:59 | EDIT | REPLY |   
Akira  
To Pianissimoの件 内緒さん②

> JPEGの状態で圧縮してからPNGに加工しても画質の違いに影響はないでしょうか〜

いえ。影響はありますね (´・ω・`)
JPGは拡大しても縮小しても画質が劣化します。
順序としてはPNGで加工した後にJPGの方が良いですね。

PNGにこだわる必要があるのかどうかも考えた方が良いと思います。
私的には個別記事の画像はJPGなのに何故サムネイルだけPNGなのかな?と思って拝見しています(笑)
私なら72px程度のサイズであれば迷わず原寸150px四方のJPGにします。PNGという選択肢は無いです (´・ω・`)
どうしてもPNGというのはスクリーンショットで、かつ、文字(テキスト)が含まれている場合ぐらいですかね。
JPGはアンチエイリアスがかかりますので文字はぼやけます。なのでスクショは基本的にアプリでもなんでもPNGがデフォルトになっているはずです。

で、あと別件ですが内緒さんは検索結果以外のページ全てで遅延読み込みができる環境になりましたので、記事内やサイドメニューにも適用されると良いと思います。
また近いうちに記事は書きますのでその際にでもご一考ください。

2018/02/13 (Tue) 20:47 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/13 (Tue) 22:01 | EDIT | REPLY |   
Akira  
To Pianissimoの件 内緒さん③

背景透明の角丸、というのがちょっとわからないんですが、PNGでもJPGでも同じ見た目ですよ (´・ω・`)
CSSの角丸(border-radius)で削られた外側は透過されるのではなく削られます(不可視)
なので拡張子には左右されないというか関連がないですね。

2018/02/13 (Tue) 22:22 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/13 (Tue) 22:39 | EDIT | REPLY |   
Akira  
To Pianissimoの件 内緒さん(終了のご報告)

ごめんなさい。拝見するの遅くなっちゃった。今削除しておきました。
お疲れ様です

2018/02/14 (Wed) 10:36 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/15 (Thu) 00:47 | EDIT | REPLY |   
Akira  
To ブログカードの件 内緒さん

こんばんは。明日改めて追記しますね。
ちょっともう起きていられない感じ(笑)
ネムイ(´・ωゞ)

-------
改めまして。

> どれにborder-radiusの値を入れれば良いでしょうか〜

.blogcard-image と .blogcard-image-wrapper img に指定してください。
遅延読み込みを適用する時は img が2つありますので(サムネイル, ファビコン)、それぞれhtml内容を修正してください。
遅延読み込み用コードは近日配布予定ですが自動で修正されるわけではありませんので、事のついでに今は手打ちでお願いします。
(もちろんブログカードにも適用するのならば、です)
よろしくお願いします。

2018/02/16 (Fri) 01:34 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/16 (Fri) 22:46 | EDIT | REPLY |   
Akira  
To 画像タイルの件 内緒さん

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

img要素のhtml内容が目に見えており、編集可能な状態であればよほどのことが無い限り遅延読み込みの対象にできます。
画像タイルの場合にはhtml内容を記事内で編集できるわけですから必要事項を追加すれば当然適用可能です。
適用できないのは

・html内容(img要素)を編集できないとき --- FC2独自変数を用いたhtml出力など
・特殊なデザインが施されているimg要素 --- JSによるクラス名操作・スタイル属性操作による表示を行うものなど(コンフリクトの恐れあり)

ぐらいです。

--------
> タイル状に並べる〜shadow-attachmentや他のクラス属性を入れても適用できないようでした〜

できますよ。
内緒さんがhtmlをどう書いたかサンプルがありませんのでなんとも言えません。
できれば問題を確認できるページを用意して頂けると質疑応答が明瞭になります。
ですから以下の内容は憶測です。

・ クラス名の書き方の間違い

×
<img src="" class="shadow-attachment" class="xxx" class="yyy" alt="">


<img src="" class="shadow-attachment xxx yyy" alt="">

遅延適用なら
<img src="ここにdataURL" data-src="ここに正規画像アドレス" class="lazyload shadow-attachment xxx yyy" alt="">
よろしくお願いします。

2018/02/17 (Sat) 11:21 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/17 (Sat) 12:57 | EDIT | REPLY |   
Akira  
To 画像タイルの件 内緒さん(終了のご報告)

いえいえ。解決したなら良かったです。
お疲れ様でした

2018/02/17 (Sat) 15:24 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/17 (Sat) 20:59 | EDIT | REPLY |   
Akira  
To 画像タイルの件 内緒さん

こんばんは。
ie用のフォールバックは入れているはずですので、CSSを再DLしてみてください。
(現に私のページでは表示されていると思います)
よろしくお願いします。

2018/02/18 (Sun) 00:03 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2018/02/18 (Sun) 01:21 | EDIT | REPLY |   

Leave a reply

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