Article page

by
  • Comment:11
  • Trackback:0

Pianissimo


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

Chrome

Firefox

Safari

Opera

Edge

IE11

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


valid-html5.png


更新履歴 2017.4.17


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

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

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



更新履歴 2017.3.18


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

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


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



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



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


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



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


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


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



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

$('#aside-container')

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

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

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

参考記事


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

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

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

修正前



修正後




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

htmlソース該当箇所は

url(<%image>)

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

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

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



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

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

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

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

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



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



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

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


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

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



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

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

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


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



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

------- 以下本文

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

Juvenile



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


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




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

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

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



ドミナントカラー

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

例) 51,51,51


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



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




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

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

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

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

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


サンプル



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



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



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

Comments 11

-  
管理人のみ閲覧できます

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

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 |   

Leave a reply

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