Juliette-Note - FC2ブログテンプレート

Juliette-Note - FC2ブログテンプレート

テンプレート
2017/03/31 13
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD
Juliette-Noteテンプレート

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

最終更新 2020.5.29
  • ページ送りのJSを修正
名称 Juliette-Note
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大740px
サイド --- 258px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.4.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 下
(デバイス幅依存)
サイドメニュー --- 右
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.2
  • コメント主のリンク表示用JS及びデザインの変更
更新履歴 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 .4em;
}
②について

#community" で検索するとhtml内に3箇所あります。3つとも #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: 40px;
}
③について

<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箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

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

#inner-contents {
  margin: 20px 0;
}

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

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

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

更新履歴 2018.12.20
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 個別記事ブラウザサイドページ送り(カテゴリ間移動用)のスクロール動作を逆に調整(下スクロールで非表示、上スクロールで表示)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • コメント投稿欄への移動を押しやすくしました(リンク範囲の拡大)
  • 個別記事に「記事編集リンク」を修正(記載漏れです。すみません)
  • 要約文の文字数を4行に制限

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。
トップページ記事概要文の文字数が多すぎるように感じましたので制限を入れています。再DLの際はその点も併せてお考えください(制限解除は可能です)

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

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

更新履歴 2018.1.27

メンテナンスを行いました。
主な変更点は以下の通りです。

  • 画像遅延読み込みをのJSを変更しました(デフォルトではグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップ及びパン屑リストを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

更新履歴 2017.4.17

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

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

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

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

サンプル

Samples

TOP 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

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

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

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

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

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

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

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

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

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

スクロールアンカーについて

About scrolling ancho

左右いずれかのカラムの縦(高さ)が一方よりも短いときにスクロールで画面外へ流れていかないようストップがかかります(スクロールアンカー)
現時点で以下のような注意点があります。

  • 「特定のプラグインやウィジェットのJS内容 + Google Chromeのグリッチ」でChromeブラウザ上でプラグイン・ウィジェットが表示されなくなる
  • アフィリエイトによってはスクロールアンカーへの掲載禁止

特定のプラグインに該当する具体的なものは「FC2動画」「FC2カウンター」「アフィリエイト」など、JSで内容を取り込むタイプのものです。表示されない、という症状が出ている場合には スクロールアンカーの解除を行ってください。

注)スクロールアンカー不要の方 で検索すると該当部位が出てきますのでガイダンスに従って削除をお願いします。

ヘッダー画像変更

How to change your header image.

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

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

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

ナビゲーションについて

Important thing to be careful when adding links to navigation

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

navi breakpoint

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

(max-width: 730px)

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

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

ドミナントカラー

Dominant colors

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

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

削除可能なJSについて

Delete specific JS if you want to

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

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

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

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

個別記事ページ送りを複製する方へ

Cautions when copying pagination in permanent page

html内の <!-- 個別記事用ページナビ --> から <!-- 個別記事用ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。

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

Cautions before asking for something.

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

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

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

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

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

 13

There are no comments yet.
-
管理人のみ閲覧できます

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

2020/01/21 (Tue) 00:15
vanillaice (Akira)
Akira
To Juliette-Note adsenseの件 内緒さん

こんばんは。

> 記事を開いた時に記事タイトルの真下(記事本文の一番上)と記事の一番下。〜

この方と同じ位置で良いのであれば以下の手順でadsenseコードを貼り付けてください。
(adsenseの内容もこの方と同じものと仮定しています)

----- 記事タイトル下
<div id="inner-contents">
で検索するとhtml内に1箇所あります。その直下にスクリプトを追加。

----- 記事最終
<!--topentry_tag-->
で検索するとhtml内に1箇所あります。そのすぐ上にスクリプトを追加。

adsenseのスクリプト(JSコード)を貼り付けるときはインデントを付けない方がミスが少ないです。
インデントを付けたい場合は 間違って全角スペースを用いないよう注意 してくださいね。
以上です。よろしくお願いします。

----- 追記
別件で気になったんですが、instagramのバナー掲載時に
<style type="text/css">
を書き出しにCSS内容を記されていると思います。このstyle要素は構文エラーなので機能していません。
原因は 旧投稿画面の「改行の扱い」設定を「自動」にしているため です。
改行の扱いを自動にしてCSSやhtmlを書いてしまうと以下のようになります。

以下のCSS(style要素)を書いた場合

.xxx {display: inline-block;}
.yyy {visibility: hidden;}
.zzz {font-size: 14px;}

✔ 正しい構文(改行の扱い「htmlタグのみ」に設定している場合)
.xxx {display: inline-block;}
.yyy {visibility: hidden;}
.zzz {font-size: 14px;}

× 構文エラー(改行の扱い「自動」に設定している場合)
.xxx {display: inline-block;}<br />
.yyy {visibility: hidden;}<br />
.zzz {font-size: 14px;}

こうしてソースの途中で改行してしまうと自動的に <br /> という改行タグが追加され、構文が壊れてしまいます。この場合CSSが有効になるのは最初の .xxx {display: inline-block;} のみでそれ以降は全て無効、つまり効いていません(CSSが適用されない)
内緒さんの場合も一番最初の指定以外は無効化されています。
参考記事を掲載しておきますのでこの機会に正しく書き直されると良いと思います。

参考記事: 記事内でhtmlを使う方は「改行の扱い」指定に注意が必要
https://vanillaice000.blog.fc2.com/blog-entry-923.html

特に今の見た目で問題ない、という場合にはstyle要素は書かなくてOKです。書かなくても今と同じ見た目なので構文エラーのまま放置するよりはよほど良いと思います。つまり残念ながら無駄な作業なので (´・ω・`)
もっと踏み込んで言うと記事内にstyle要素を書くこと自体が構文エラーなんですが、CSSが無効になるわけではないので説明しづらいけども、できればこの内容は記事内に記すのではなくスタイルシートの末尾に移されたほうが良いと思います。
そうすれば全記事に適用されますし、改行問題を考える必要がありません。ただしテンプレート変更時にはCSS内容の移植が必要です。
というかこのCSS内容要らないと思ふ (´・ω・`)
一応style要素についての参考記事も掲載しておきますね。本件については内緒さんにお任せします。

参考記事: body内のstyle要素が一定条件下で再びエラーに
https://vanillaice000.blog.fc2.com/blog-entry-796.html

参考記事: どんな時にスタイルシートを使い、どんな時にインラインCSS(style属性)を使うのか
(こちらの記事の「style属性」は内緒さんに該当しませんが関連はあります)
https://vanillaice000.blog.fc2.com/blog-entry-938.html

2020/01/21 (Tue) 01:26
-
管理人のみ閲覧できます

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

2020/01/21 (Tue) 18:13
vanillaice (Akira)
Akira
To Juliette-Noteの件 内緒さん

こんばんは。

> 簡単に画像にURL貼り付けちゃいました〜

そうですね。その方がずっと良いと思います。アイコンも新しいですしね。
お疲れ様でした :)

2020/01/22 (Wed) 02:23
-
管理人のみ閲覧できます

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

2020/01/22 (Wed) 10:08
きろろ
コメントのアイコン?

こんばんは、きろろです。

お久しぶりです。
お正月明けに手術をうけて、現在4回目をすませました。
あと2回、がんばらねば!

今、こちらのテンプレートをお借りしているのですが、
コメント欄の管理人アイコン?
画像はどうすれば表示できるのでしょうか?
以前、散々お聞きした記憶があるのですが、思い出せません。
CSSでしたっけ?

つい先日までFallをお借りしていたのですが、
普通に表示されていたので、なんで? Juliette-Noteは表示されないのかしら?
と、思い至りお伺いにまいりました。
一応、コメントでサイト内検索をしてみたのですが(^◇^;)
体力尽きて、コメントを残させていただきます。
できれば、各テンプレートに共通する使用をレクチャーいただければありがたいです(●´ω`●)
よろしくお願いいたしますm(__)m

2020/04/01 (Wed) 00:28
vanillaice (Akira)
Akira
To きろろさん

きろろさん、こんにちは ('0')/
いつもどおり「ログインを確認してください」とお返事しようと思ったんですが、本件と関係する情報が届いているようなので確認・検証などを行って再度お返事します。少しお時間をくださいね。用を済ませてからになりますので結構かかるかも。
ちなみに「用」というのは自宅の壁のペンキ塗りです(笑)

お身体に触りがないようとにかく今はご自身をいたわってくださいね。私もなるべく早くお返事できるようにします。
よろしくお願いします :)

2020/04/01 (Wed) 13:33
きろろ
To Akiraさん

了解です!
お家のペンキ塗り、頑張ってください(* ¨̮*)/♡

2020/04/01 (Wed) 13:43
きろろ
To Akiraさん

了解です!
お家のペンキ塗り、頑張ってください。

2020/04/01 (Wed) 13:44
きろろ
To きろろさん

うわあ、ごめんなさいm(__)m
なぜか、コメントが重複してしまい申し訳ございません。

2020/04/01 (Wed) 13:46
vanillaice (Akira)
Akira
To きろろさん

おまたせしました。
今記事をUPしたんですが、きろろさんについては「テンプレートのバージョンが古いので最新にアップデート」を行ってください。ご利用のバージョンは2017年で、管理人コメントを見分ける変数が導入されたのは2018年です。
古い方法で表示させる(CSSのクラス名を利用する方法)も使えますが、最新にされるのが一番良いと思います。
どうしてもアップデートできない事情があればお伝えくださいね。

よろしくお願いします。

2020/04/01 (Wed) 17:10
きろろ
To Akiraさん

こんにちは、きろろです。
早速のお返事、ありがとうございました、
テンプレート、最新版にしたらなおりました。
記事も拝読させていただきました。
次回からは、最新版を確認してから使うようにしますね。
Chrome、FC2のしようかあ……
きろろにはざっくりとしか理解できないのですが、
Chromeのアプデ、もしくはインストールのし直しなど
自分でできる範囲のことはしようと思います(* ¨̮*)/♡
お手数をおかけしましたm(__)m

2020/04/04 (Sat) 13:59
vanillaice (Akira)
Akira
To きろろさん

きろろさん、こんにちは ('0')/
はい。アップデートは大事です(笑)
表示されたようで安心しました。お疲れ様でした :)

2020/04/04 (Sat) 15:01

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

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

テンプレート