The other way round

Welcome to my blog

Pianissimo

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>


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



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

Juvenile



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


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




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

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

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



ドミナントカラー

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

例) 51,51,51


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



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




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

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

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

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

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


サンプル



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



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



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

Comments 2

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

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

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 |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
About this site
新テンプレ動作確認中。ご迷惑おかけします。
About me
テンプレのご質問の際には
カテゴリ > 利用上のお願い > FC2テンプレートご利用時のお願い
をご一読されましてからお願いします ( ゚Д゚)ノ
* メールでの返信をしておりません
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *