Juliette-Note

Juliette-Note


名称 Juliette-Note
カラム数 2
プラグイン対応 ○ (右サイドメニュー)
レスポンシブ対応
サイドメニュー
記事幅 可変 最大 760px
サイドバー幅 固定 300px (内寸 258px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
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が固定されないバグが解消されました

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



ついちょーかぜー
ホント嫌な言葉ですよね。大嫌い (;ωq`)
(今回は相方が )



じゅりえっと のーと
131日申請致しました。


TOP PAGE DEMO
ARTICLE DEMO
FAQ



仕様
・要約表示タイプ
・サイドメニュー スクロールアンカー


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


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



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

$('#aside-container')

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

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

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


参考記事


ヘッダー画像変更
縦横比不問ですができれば横長画像、長辺1500px程度(以上)が望ましいと思います。
画像の容量削減は事前に行っておいてください。

/* 注)ヘッダー画像 */

上記を目印に画像アドレスを差し替えてください。
今回このヘッダーの部位が特殊な構造になっていますので、腕に覚えのある方以外はあまり無茶なカスタマイズはされないほうが良いと思う ^^;


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

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


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

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



モバイル版への誘導リンクについて
これまでは「モバイル版リンク不要の方ここから削除」という形にしていましたが、
今回からは完全レスポンシブでご利用頂くことを前提に モバイル版が必要な方のみコメントアウトを解除して有効化してください。

<!-- <li class="pc-hide"><a href="<%url>?sp">MOBILE</a>注)スマホ版非表示の方この行削除 -->

デフォルトではこうしてコメントアウト状態(無効化)にしてありますので

<li class="pc-hide"><a href="<%url>?sp">MOBILE</a><!-- 注)スマホ版非表示の方この行削除 -->

こうして位置を変更して頂くことで有効化(モバイル版へ誘導するボタンの表示)されます。
モバイル版(スマートフォン版)がどうしても必要だ、という方はこの作業をしないとPC表示から直感的に戻れなくなりますので、必ず処理してくださいね。
(URLにパラメータを手入力すれば戻れますが、ご存知の方のほうが少ないと思いますし不親切なので)
もとよりレスポンシブでお使いになることが前提の方はスマートフォン版の非表示設定をお忘れなく。



ページtop/ middle/ bottom 移動ボタンについて
フェイドイン&アウトの動作が疎ましい、ページを開いたらすぐに押したい、という方が結構いらっしゃるようですので、すぐに表示されるように変更致しました。
常に表示されますので、それはそれでウザいかもわかりません(笑)



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

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

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


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



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

Juvenile



ドミナントカラー

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

例) 51,51,51


rgb(235,159,138) 基本リンク色, ページ送り背景色 など
rgb(120,120,120) サイドメニューリンク色
rgb(238,234,228) ナビゲーション背景色, サイドメニューボーダー色



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




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

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

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

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

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


サンプル



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



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



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

Comments 0

Leave a reply

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