attention admin about comments trackbacks you may also like

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

2017年03月12日
テンプレート
106
HTML5 CSS3 RWD
Pianissimoテンプレート

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

最終更新 2019.11.3
  • コメント主のリンク表示用JS及びデザインの変更
名称 Pianissimo
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大720px
サイド --- 300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 あり(v5.6.1 CSS)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 見出し装飾(手書き風, ドッグイヤー, カール)
・ 動画縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム
その他ページ --- 1 or 2カラム
(デバイス幅依存)
1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下
(デバイス幅依存)
サイドメニュー --- 右
更新履歴 2019.7.31
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続いて <div class="arrow-box arrow<%comment_name>"> で検索するとhtml内に1箇所ありますので以下の通り 変更

<div class="arrow-box">

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 6px 0 4px;
}
②について

#community" で検索するとhtml内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 35px;
}
③について

<div class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<div class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

.inner-contents { で検索するとスタイルシート内に1箇所ありますので padding: 20px 0;margin: 20px 0;変更

続いてスタイルシート末尾に以下を 追加

.inner-contents p {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

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

最終更新 2018.12.21
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 個別記事ブラウザサイドページ送り(カテゴリ間移動用)のスクロール動作を逆に調整(下スクロールで非表示、上スクロールで表示)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 構造化マークアップの導入(個別記事のみ)
  • IE11スクロール調整用hackの導入
  • スクロールアンカーのJSを変更
  • ページ表示時のアニメーションを調整(旧来よりも若干速めました)
  • 記事編集リンクをSNSアイコン並びから記事上「Posted on xx, 2xxx by ハンドルネーム」に変更しました。閲覧者に気づかれにくいようカーソルを非表示にしています

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

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

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

更新履歴 2017.12.18

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

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

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

最終更新 2017.4.17

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

更新履歴 2017.3.18

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

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

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

ぴあにしも
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更、グリッド並び数変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

左右カラム入れ替えの仕方

How to reverse the direction of rows

#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手順です。

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

Justification of text

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

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

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

修正後

サイドメニューのプロフィールについて

About profile picture and description in aside menu

本テンプレートにはサイドメニュー部にプロフィールをデザインの一部としてデフォルト導入してあります。公式プラグイン「プロフィール」を設定されている場合には重複しますので個人設定でプラグインを非表示にするか、テンプレート内のプロフィール関連htmlを削除してください。

【プラグイン非表示】
プラグインの設定

【テンプレートhtml削除ガイダンス目印】

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

ナビゲーションについて

Important thing to be careful when adding links to navigation

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

navi breakpoint

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

(max-width: 666px)

緑の部分 666 を 大きな数字に変更 してください。この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

No image画像変更

How to change 'No image'

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

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

ドミナントカラー

Dominant colors

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

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

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

各々上記を目印にガイダンスに従って削除。

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

Cautions before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(106)

There are no comments yet.

-

2017/03/18 (Sat) 19:36

管理人のみ閲覧できます

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

Akira

2017/03/18 (Sat) 22:55

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

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

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

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

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

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

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

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

までが削除対象です。

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

leaf787

2017/07/22 (Sat) 23:23

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

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

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

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

管理人のみ閲覧できます

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

Akira

2017/07/23 (Sun) 01:24

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

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

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

leaf787

2017/07/24 (Mon) 13:24

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

管理人のみ閲覧できます

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

Akira

2017/07/24 (Mon) 19:44

To leaf787さん

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

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

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

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

--------

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

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

一旦投稿します。

Akira

2017/07/24 (Mon) 19:58

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

一旦投稿。

Akira

2017/07/24 (Mon) 20:17

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

一旦投稿

Akira

2017/07/24 (Mon) 20:30

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

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

leaf787

2017/07/29 (Sat) 16:03

To Akiraさん

こんにちは。

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

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


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

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

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



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

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

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

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

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

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


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

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

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

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

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

leaf787

2017/07/29 (Sat) 23:23

To Akiraさん

続きです。

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

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

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

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


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

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


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

<%topentry_image> を採用し、

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

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


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

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

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

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

leaf787

2017/07/29 (Sat) 23:40

To Akiraさん

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

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

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

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

Akira

2017/07/30 (Sun) 01:25

To leaf787さん

こんばんは ( ゚Д゚)ノ

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

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

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

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

一旦投稿しますね。

Akira

2017/07/30 (Sun) 01:52

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

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

leaf787

2017/07/31 (Mon) 13:05

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

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

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

Akira

2017/08/01 (Tue) 20:23

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

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

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

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

-

2017/09/07 (Thu) 01:10

管理人のみ閲覧できます

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

-

2017/09/07 (Thu) 01:51

管理人のみ閲覧できます

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

Akira

2017/09/07 (Thu) 17:48

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) 22:00

管理人のみ閲覧できます

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

Akira

2017/09/08 (Fri) 17:08

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/09 (Sat) 02:25

管理人のみ閲覧できます

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

Akira

2017/09/09 (Sat) 04:11

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

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

-

2017/09/09 (Sat) 11:48

管理人のみ閲覧できます

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

-

2017/09/11 (Mon) 19:34

管理人のみ閲覧できます

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

-

2017/09/11 (Mon) 23:55

管理人のみ閲覧できます

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

Akira

2017/09/12 (Tue) 00:16

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

管理人のみ閲覧できます

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

-

2017/09/12 (Tue) 01:06

管理人のみ閲覧できます

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

Akira

2017/09/12 (Tue) 01:13

To Pianissimo検索の件 内緒さん

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

-

2017/09/12 (Tue) 01:22

管理人のみ閲覧できます

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

Akira

2017/09/12 (Tue) 01:32

To Pianissimo 内緒さん

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

-

2017/09/30 (Sat) 02:13

管理人のみ閲覧できます

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

Akira

2017/09/30 (Sat) 10:39

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

こんにちは ( ゚Д゚)ノ

<li class="expand-form">

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

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

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

-

2017/09/30 (Sat) 11:06

管理人のみ閲覧できます

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

Akira

2017/09/30 (Sat) 12:48

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

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

-

2017/10/01 (Sun) 17:23

管理人のみ閲覧できます

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

Akira

2017/10/01 (Sun) 18:59

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

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

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

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

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


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

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

Akira

2017/10/01 (Sun) 19:39

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

管理人のみ閲覧できます

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

Akira

2017/10/01 (Sun) 20:00

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

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

-

2017/10/01 (Sun) 22:03

管理人のみ閲覧できます

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

Akira

2017/10/01 (Sun) 22:54

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/02 (Mon) 00:59

管理人のみ閲覧できます

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

Akira

2017/10/02 (Mon) 01:21

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

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

-

2017/10/02 (Mon) 02:07

管理人のみ閲覧できます

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

Masami

2017/11/02 (Thu) 06:02

AdominとProfileについて

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

Akira

2017/11/02 (Thu) 16:30

To Masamiさん

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

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

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

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

nana

2017/12/01 (Fri) 06:04

全面表示について

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

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

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

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

Akira

2017/12/01 (Fri) 13:47

To nanaさん

こんにちは。

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

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

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

-

2018/01/15 (Mon) 23:27

管理人のみ閲覧できます

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

Akira

2018/01/16 (Tue) 01:19

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

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

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

-

2018/01/30 (Tue) 23:00

管理人のみ閲覧できます

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

Akira

2018/01/31 (Wed) 00:45
vanillaice (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) 01:35

管理人のみ閲覧できます

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

-

2018/01/31 (Wed) 02:21

管理人のみ閲覧できます

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

Akira

2018/01/31 (Wed) 02:48
vanillaice (Akira)

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

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

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

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

-

2018/01/31 (Wed) 12:17

管理人のみ閲覧できます

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

Akira

2018/01/31 (Wed) 23:14
vanillaice (Akira)

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

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

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

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

-

2018/02/02 (Fri) 17:07

管理人のみ閲覧できます

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

Akira

2018/02/02 (Fri) 18:05
vanillaice (Akira)

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

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

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

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

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

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

-

2018/02/02 (Fri) 20:47

管理人のみ閲覧できます

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

Akira

2018/02/03 (Sat) 11:24
vanillaice (Akira)

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

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

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

-

2018/02/06 (Tue) 16:16

管理人のみ閲覧できます

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

-

2018/02/06 (Tue) 16:25

管理人のみ閲覧できます

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

Akira

2018/02/06 (Tue) 17:36
vanillaice (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) 18:39

管理人のみ閲覧できます

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

Akira

2018/02/06 (Tue) 21:04
vanillaice (Akira)

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

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

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

例)
/* slick */
内容

/* tag cloud */
内容

こんな感じで。

-

2018/02/06 (Tue) 21:36

管理人のみ閲覧できます

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

Akira

2018/02/07 (Wed) 18:28
vanillaice (Akira)

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

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

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

-

2018/02/13 (Tue) 13:42

管理人のみ閲覧できます

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

Akira

2018/02/13 (Tue) 15:06
vanillaice (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) 17:59

管理人のみ閲覧できます

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

Akira

2018/02/13 (Tue) 20:47
vanillaice (Akira)

To Pianissimoの件 内緒さん②

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

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

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

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

-

2018/02/13 (Tue) 22:01

管理人のみ閲覧できます

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

Akira

2018/02/13 (Tue) 22:22
vanillaice (Akira)

To Pianissimoの件 内緒さん③

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

-

2018/02/13 (Tue) 22:39

管理人のみ閲覧できます

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

Akira

2018/02/14 (Wed) 10:36
vanillaice (Akira)

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

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

-

2018/02/15 (Thu) 00:47

管理人のみ閲覧できます

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

Akira

2018/02/16 (Fri) 01:34
vanillaice (Akira)

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

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

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

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

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

-

2018/02/16 (Fri) 22:46

管理人のみ閲覧できます

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

Akira

2018/02/17 (Sat) 11:21
vanillaice (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) 12:57

管理人のみ閲覧できます

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

Akira

2018/02/17 (Sat) 15:24
vanillaice (Akira)

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

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

-

2018/02/17 (Sat) 20:59

管理人のみ閲覧できます

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

Akira

2018/02/18 (Sun) 00:03
vanillaice (Akira)

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

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

-

2018/02/18 (Sun) 01:21

管理人のみ閲覧できます

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

Akira

2018/02/18 (Sun) 15:20
vanillaice (Akira)

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です (´・ω・`)

-

2018/02/18 (Sun) 17:15

管理人のみ閲覧できます

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

-

2018/02/18 (Sun) 17:29

管理人のみ閲覧できます

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

Akira

2018/02/18 (Sun) 17:42
vanillaice (Akira)

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

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

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

-

2018/02/18 (Sun) 21:01

管理人のみ閲覧できます

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

Akira

2018/02/18 (Sun) 22:31
vanillaice (Akira)

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

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

-

2018/02/21 (Wed) 10:06

管理人のみ閲覧できます

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

Akira

2018/02/21 (Wed) 13:44
vanillaice (Akira)

To Lazyloadの件 内緒さん

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

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

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

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

-

2018/02/21 (Wed) 16:10

管理人のみ閲覧できます

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

Akira

2018/02/21 (Wed) 17:32
vanillaice (Akira)

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として入れた方がスマートだと思うんですけどね (´・ω・`)

-

2018/02/21 (Wed) 19:00

管理人のみ閲覧できます

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

-

2018/02/21 (Wed) 19:58

管理人のみ閲覧できます

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

Akira

2018/02/21 (Wed) 20:15
vanillaice (Akira)

To Lazyloadの件 内緒さん③

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

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

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

-

2018/02/21 (Wed) 21:02

管理人のみ閲覧できます

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

Akira

2018/02/22 (Thu) 00:21
vanillaice (Akira)

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

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

-

2018/03/12 (Mon) 19:15

管理人のみ閲覧できます

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

Akira

2018/03/12 (Mon) 23:08
vanillaice (Akira)

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

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

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

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧