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

管理人のみ閲覧できます

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

To Pianissimoカスタマイズガイダンスの件 内緒さん

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

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

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

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

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

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

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

までが削除対象です。

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

テキストの回り込みについて

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

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

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-->

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

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

管理人のみ閲覧できます

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

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

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

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

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 の画像が枠内に収まりました。
（良かったｖ）

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

<!--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

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


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

管理人のみ閲覧できます

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

To leaf787さん

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

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

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

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

--------

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

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

一旦投稿します。

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さんの方で頑張って頂いたので、後は細かい修正点などお伝えします。

一旦投稿。

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なんてことはないはず。
もしあるのならそれはもう容量削減を行って頂きたい(笑)

一旦投稿

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で長文を書く際には「追記」というのが利用できますので、トップページへの掲載内容の削減は可能です。
ですから追記を上手く利用するというやり方もあります。
(ただし記事内容がそのまま反映されますのでリスト表示「風」ではあっても確実なものにはなりません)
他サイトから移設した記事については追記適用外なのでアレだけど (´・ω・｀)

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

To Akiraさん

こんにちは。

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

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


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

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

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



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

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

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

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

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

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


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

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

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

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

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

To Akiraさん

続きです。

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

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

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

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


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

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


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

<%topentry_image> を採用し、

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

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


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

そうでしたか、そんな気もしてはいましたが（苦笑；）

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

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

To Akiraさん

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

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

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

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

To leaf787さん

こんばんは ( ﾟДﾟ)ﾉ

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

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

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

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

一旦投稿しますね。

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フリ〜」の記事。この状態が「寸足らず」)

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

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

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

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

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

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

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

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

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 をクリックして移動した場合には「追記」を頭に表示します。
ですからトップページで既に読んだ本文をもう一度読ませることがなくなります。
読んで字の如く「続き」から読めます。

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

管理人のみ閲覧できます

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

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名、カスタムデータ属性のいずれかで行うのがベストです。

管理人のみ閲覧できます

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

To Pianissimo完了のご報告 内緒さん

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

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ですので、本件の目視確認は叶わず、また、問題なく動作しています。
よろしくお願いします。

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To Pianissimo検索の件 内緒さん

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

管理人のみ閲覧できます

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

To Pianissimo 内緒さん

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

管理人のみ閲覧できます

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

To Pianissimoサイト内検索ツールチップの件 内緒さん

こんにちは ( ﾟДﾟ)ﾉ

<li class="expand-form">

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

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

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

管理人のみ閲覧できます

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

To Pianissimoサイト内検索ツールチップの件 内緒さん(完了のご報告)

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

管理人のみ閲覧できます

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

To 一部記事のテキストが出ない件 内緒さん

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

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

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

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

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

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

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

管理人のみ閲覧できます

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

To バリデーションエラーの件 内緒さん②

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

管理人のみ閲覧できます

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

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の場合とまた少し性質は違いますけれど。
スライダーも複数を入れるのではなく何か一つに統一してはいかがでしょうか。

管理人のみ閲覧できます

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

To バリデーションエラーの件 内緒さん④

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

管理人のみ閲覧できます

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

AdominとProfileについて

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

To Masamiさん

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

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

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

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

全面表示について

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

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

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

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

To nanaさん

こんにちは。

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

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

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

管理人のみ閲覧できます

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

To Pianissimoアップデートの件 内緒さん

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

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

管理人のみ閲覧できます

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

To Pianissimoアップデートの件 内緒さん

こんばんは ( ﾟДﾟ)ﾉ

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

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

#primary {
overflow: visible;
}

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

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

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

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

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

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

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

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

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To Pianissimoアップデートの件 内緒さん②

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

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

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

管理人のみ閲覧できます

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

To Pianissimoアップデートの件 内緒さん(終了のご報告)

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

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

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

管理人のみ閲覧できます

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

To Pianissimoグローバルナビの件 内緒さん

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

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

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

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

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

管理人のみ閲覧できます

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

To Pianissimoグローバルナビの件 内緒さん(終了のご報告)

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

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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

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のくだり)

管理人のみ閲覧できます

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

To Pianissimo NEWマーク画像の件 内緒さん ②

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

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

例)
/* slick */
内容

/* tag cloud */
内容

こんな感じで。

管理人のみ閲覧できます

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

To Pianissimo NEWマーク画像の件 内緒さん(完了のご報告)

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

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

管理人のみ閲覧できます

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

To Pianissimoの件 内緒さん

こんにちは (ノﾟｪﾟ)

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

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

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

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

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

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

管理人のみ閲覧できます

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

To Pianissimoの件 内緒さん②

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

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

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

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

管理人のみ閲覧できます

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

To Pianissimoの件 内緒さん③

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

管理人のみ閲覧できます

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

To Pianissimoの件 内緒さん(終了のご報告)

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

管理人のみ閲覧できます

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

To ブログカードの件 内緒さん

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

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

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

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

管理人のみ閲覧できます

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

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="">
よろしくお願いします。

管理人のみ閲覧できます

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

To 画像タイルの件 内緒さん(終了のご報告)

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

管理人のみ閲覧できます

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

To 画像タイルの件 内緒さん

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

管理人のみ閲覧できます

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

To タイル縦横比の件 内緒さん

こんにちは。
これお伝えしなきゃいけなかったですね。すみません。

lazysizesのメインJSの上にもう一つJSファイルを入れて頂いたと思います。
それが対Microsoft用(笑)ポリフィルです。

* ポリフィル = 実装されていないものを後付けする「穴埋め」

-------

【html】
また内容を書き足さないといけないので恐縮ですが
<img src="dataURI" data-src="画像アドレス" class="lazyload" alt="" data-sizes="auto">

属性は順不同です。
data-sizesの値にautoを入れてください。

【CSS】
.box img に(内緒さんの場合は .box1 imgでしたっけ？)以下の内容を追加

font-family: 'object-fit: cover; object-position: center center;';

注意)
このポリフィルは正規版フルバージョンではありません。lazysizesで簡単に使えるようにlazy〜作者さんが専用でカスタマイズしてくれている内容です。
なのでlazy〜と併用することが絶対条件です。lazy〜なしの場合には機能しません。
(lazy〜と併せない場合には正規版が必要です)

ieはおろかedgeまでもがobject-fitプロパティ未実装ですので(マジでゴミブラウザだと思う)、MicrosoftのためだけのJSです (´・ω・｀)

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To タイル縦横比の件 内緒さん②

auto指定が必要なのは画像に対して object-fit というプロパティが割当てられている時だけです。
画像タイルのように縦横比を揃えたり、トップページのサムネイルなんかもそうですよね。
ですから元画像の縱橫をそのまま表示する場合には不要です。

date-sizesのautoはsrcset属性というのを使う時に必要になることがありますが、その内容についてはまた後日記事にします。

管理人のみ閲覧できます

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

To タイル縦横比の件 内緒さん(終了のご報告)

ブログですから楽しく書けることが一番です。
こちらこそいつもありがとうございます :)

管理人のみ閲覧できます

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

To Lazyloadの件 内緒さん

> 目次内の画像が表示されない物があります〜

この理由は「遅延読み込みをしているから」でしかないですよ。
読み込みを遅延した画像というのはスクロールで画面内に入らない限り取得できません。

一方TOCはhtml内にある見出しタグに挟まれた内容を抽出します。見出し開始タグと終了タグの内容としてimg要素があればそれも抽出します。
ところが抜き出したところで初期は <img src="" 〜省略〜> この部分が「無い」わけですから当然おかしなことになりますね。
キャッシュが残っているものは偶発的に表示されることもあります。

というか本来見出しの中にアイコンは含めない方が良いですよ。
アイコンを付けたいのなら
<h2>TOCが抽出するのはココから<img 〜>テキストココまで</h2>
こうするのではなく
<h2 style="background: url()">TOCが抽出するのはココからテキストココまで</h2>
こうすべきです。もちろんTOCには表示されなくなりますが。
見た目のためにhtmlを利用するとhtml構文はどんどん汚れていきます。
装飾のためであるならばCSSを用いてください(そのために「疑似要素」なども存在します)

管理人のみ閲覧できます

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

To Lazyloadの件 内緒さん②

頂いた内容
.dogear:before {
content: url(アイコン.jpg);
float:left;
margin-right:10px;
}

赤字部分不要です。
内緒さんが擬似要素をどこまで理解しているか私ではわかりませんので、一応説明しておきます。

------
① 疑似要素は各要素に対しbefore, after各1つづつしか使えません。

今回はクラス名dogearの要素に対し ::befoer を付けましたが、元々dogear要素は::afterを一つ持っていますので、::beforeを追加するのはOKです。
ここを理解してそうされたのであれば花マル評価。
例えば既にbefore, afterを使い切っている curlクラスの要素であったならばこの方法は通用しませんでした。

------
② ボックスモデル「インライン」にものにfloatは不要

疑似要素のdisplay初期値はinlineです。ですからテキストと勝手に横並びになります。
仮に

.xxx::before {
content: "";
display: block;
}

こうして意図的にdisplayをblockに変更した場合にはfloatが必要ですね。
floatを利用した際には必ずfloat解除かあるいは親要素にoverflow:hiddenを指定して高さを出すか、いずれかの処理が必要です。
今回とは逆に「横に並べたくない」場合には display: block を指定してください。

--------
③ imgなど終了タグを持たない要素(空要素)に疑似要素は適用できません

--------
④ 疑似要素のcontentで表示した画像はvertical-alignが効きません

これ内緒さん気になるんじゃないですかね 。気にならないならこのままで良いと思いますけれど。
気になるのならば

.dogear::before {
content: "";
margin: auto;
width: 横px;
height: 縦px;
background: url(アドレス) center center /cover no-repeat;
position: absolute;
left: 左辺との距離px;
top: 0;
bottom: 0;
}

続いて

.dogear {
padding-left: 数値px;
}

注)数値 = before疑似要素のleftの値 + 疑似要素とテキストの距離

アイコンの黒が強くてちょっとずれてる感じしますので
beforeのheightを22px、background-positionをcenter centerから center bottomに変えても良いかもしれません。
そこはご自身で調整してください。

注2)
テキストが折り返した際にアイコンは文頭に来ません。
テキスト全体の高さの上下中央に位置します。

------
あとの細かいカスタマイズはご自身でお願いします。
というか.dogearのbackground-imageとして入れた方がスマートだと思うんですけどね (´・ω・｀)

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To Lazyloadの件 内緒さん③

はい。その書き方で良いと思いますよ。
それでいくのであればbackground-imageに対してlazylodingが使えます。
backgroundが指定されている要素にlazyloadクラスを追加するだけです。
ただしbakcground-imageにはtransitionが効きませんので、img要素のようなフェイドインにはなりません。
パっといきなり表示されます。

------
> ":"は２回が正解ですか〜

:before でも ::before でもどちらでもOKです。
CSS2までは :before でしたが、擬似クラス(:hover や :link など)と見分けにくいのでCSS3からは疑似要素に :: と連続コロンが使えるようになりました。
「区別しやすい」というだけのことです。ブラウザはどちらもきちんと理解してくれます。

管理人のみ閲覧できます

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

To Lazyloadの件 内緒さん(完了のご報告)

上手く出来たようで安心しました。
お疲れ様でした ( ﾟДﾟ)ﾉ

管理人のみ閲覧できます

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

To テンプレ変更の件 内緒さん

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

了解です。大変でしたね ^^;