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

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

テンプレート
2017/04/17 34
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD
Chronicleテンプレート

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

最終更新 2020.5.29
  • ページ送りのJSを修正
名称 Sincerely-yours
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大740px
サイド --- 270px
記事内で使える見出しレベル 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及びデザインの変更
  • スクロールのIE向け調整
更新履歴 2019.7.29
  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>

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

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

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

#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: 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 {
  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 を追加(セキュリティ対策)

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

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

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

更新履歴 2018.1.10

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

Chronicle大規模メンテナンスのお知らせ - テンプレ不具合・修正など

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

VRが楽しすぎる今日このごろ。あきらでございます (´・ω・`)

くろにくる
承認されました。ありがとうございます。

サンプル

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

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

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

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

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

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

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

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

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

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

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

About scrolling ancho

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

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

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

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

ナビゲーションについて

Important thing to be careful when adding links to navigation

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

navi breakpoint

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

(max-width: 767px)

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

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

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

About profile picture and description in aside menu

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

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

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

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

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

How to reverse the direction of rows

#main-container { で検索されますとCSSソース内に2箇所ヒット、最初のものが対象です。この括りの padding: 0 60px 80px; の直下に flex-direction: row-reverse; を追加。

続きまして #primary { を検索、CSS内で3箇所ヒット、やはり最初のものが対象です。この括りの margin-right: 40px; に対し緑部分 rightleft に変更。
以上2手順です。

全体幅調整の仕方

How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1200px に設定しています。1200px で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。

ドミナントカラー

Dominant colors

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

rgb(153,0,77) 基本リンク色, ページ送り背景色 など
rgb(250,250,250) ナビゲーション背景色, サイドメニュー背景色 など

削除可能な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'●)/

 34

There are no comments yet.
リキ
フォントサイズについて

初めまして。
Chronicleテンプレートを使わせていただいております。貴ブログに紹介されているものに一目惚れし,いろいろと試してみて,これに落ち着きました。
ただ,本文のフォントが小さく,読みにくいのでもう少し大きくしたいのですが,どこで変更するのがわかりません。教えていただければ幸いです。
注)で検索してみましたが,わかりませんでした。
こういう設定に関しては初心者ですが,プロフィールの削除は,この検索で見つけた部分を削除して成功しました。

わざわざ利用者にわかりやすいよう,「注)」をつけられていることに感服しました。

2017/06/05 (Mon) 18:02
vanillaice (Akira)
Akira
To リキさん

ありがとうございます :)

> 記事本文フォントサイズ変更〜

Ctrl+F(Windows)/ Command+F(Mac)キー検索

注)記事内基本フォント関連 */

この項目の
font: 13px/1.9

赤字部分がフォントサイズでデフォルト13px、隣の1.9は行間です。
変更ご希望の箇所の解釈は合ってますでしょうか。
(この作業ではサイドメニュー等のサイズは変わりません)
私の思い違いでしたらその旨ご指摘ください。
よろしくお願いします (●'0'●)/

2017/06/05 (Mon) 19:08
リキ
To Akiraさん

すぐにお返事いただき,ありがとうございます。
できました! うれしいです!

これからのご活躍,応援しております。
すばらしいテンプレートを作成されるだけでなく,こうして,人に優しい体制を築いておられることも尊敬します。自分の仕事のお手本にしたいです。

2017/06/05 (Mon) 19:56
リキ
記事にしました

何度もスミマセン。

Akira さんのお仕事に対する姿勢に感じ入るところがあり,ブログ記事にしてしまいました。
もし,失礼なようなら,取り下げますのでご指摘ください。

2017/06/05 (Mon) 20:54
vanillaice (Akira)
Akira
To リキさん

合っていたようで安心しました(笑)

ご紹介に預かりましてとっても光栄です。
「通りすがり」の件、仰る通りですね。
「通りすがりに足を止めました」とか書いてくれるとまた全然印象も違ってくるのだけれど ^^;
今回リキさんの「通りすがりさん」には私からも感謝です。
重ねてありがとうございます。
修正作業もお疲れ様でした :)

2017/06/05 (Mon) 22:08
kanako
記事のフォントサイズの変更

はじめまして。

とても素敵なテンプレートありがとうございます。
Corridor をお借りしています。

こちらの記事のフォントサイズを大きくしたいのですが、
どのようにしたらよろしいでしょうか。

よろしくお願いいたします。

2017/06/13 (Tue) 21:52
Akira
To kanakoさん

ありがとうございます。
お返事遅くなりました (*_ _)
専用記事の方へ移動をお願いします。
お返事もそちらでさせて頂きますね。よろしくお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-407.html

2017/06/14 (Wed) 17:56
Akira
To ゆーみーさん(移動先)

https://vanillaice000.blog.fc2.com/blog-entry-598.html#comment4419

> カルーセルの並び件数を増やしたい件

該当部位は
<!-- 注)カルーセル不要の方ここから削除 2/4 -->
を目印に探してください。
その中の一部を抜粋すると

650:{items:1,stagePadding:25}

650が画面幅です。
item:数 が並び数。
stagePadding:数字 が両脇のコンテンツの見える分量です。
理想の形はゆーみーさんにしかわかりませんので、画面幅を確認しながらご自身での調整をお願いします。
非常に困難な作業にはなるかと思います。
chronicleの場合はコンテンツが画面幅によって大きく変化しないよう微細な調整をしています。
そしてレスポンシブデザインですから一定の画面だけで修正するわけにはいきません。

-------
> カレンダーが、ヘッダー画像の下に潜ってしまいます〜

原因はカレンダー表示がJSで行われている = 描画が遅い
ためです。これはテンプレートで調整できる類のものではありません。
「対策としてはスクロールアンカー(メインコンテンツよりもサイドメニューが短い時に下部で止まる)を外す」一択です。
繰り返しますが、Chronicleはレスポンシブデザインです。
カレンダー幅が大きすぎるために現段階で既にレイアウトが成り立っていません(崩れています)。
当ページの仕様表にある通り、サイドメニュー内で許可される横幅は最大270pxまでです。
ゆーみーさんのPC画面の幅は大きいかもしれませんが皆が皆同じ画面サイズではありません。
画面が小さい方が閲覧した場合には右側が見切れて内容を見ることができません。
コンテンツが超過(画面幅をはみ出す)した場合、横スクロールバーが出るか見切れて見ることができないかのいずれかですが、Chronicleの場合は後者です。
そしてコンテンツ超過はGoogleが大層嫌います。
ブラウザの横幅を狭めるだけでも確認はできますので、ご自身でカレンダーについてのご検討をお願いします。
また、Googleカレンダーはレスポンシブタイプの提供があるはずですのでご確認ください。

------
> トップメニューにアロー当てるとカテゴリーのツリーが表示されるとか、できたら嬉しい〜

こちらについては簡単にぽんとできるわけではありません。
ですから他テンプレートから自己責任で移植されるか、別のhtml及びJSを組むなどの対処をお願いします。
普段からお願いしている通り、次回以降の作品へのリクエストとしては受け付けますが、既存のものを書き換えるお手伝いはしておりません。
ごめんなさいね。

2017/10/20 (Fri) 23:43
ゆーみー

ご指摘ありがとうございます。
画面幅は狭めて見ていたのですが、、、うまく並んで見えてしまっていました。
サイドメニューのサイズは戻しました。

1つ1つ、ゆっくりやってみます。

色々ありがとうございました。
助かりました。

2017/10/21 (Sat) 15:14
Akira
To ゆーみーさん

お手数おかけします。
Chronicleのカルーセルは他テンプレートのカルーセルとはまた違う仕様になっており、ことさらめんどっちい作業になるかと思います ^^;
「大きさをほぼ一定に」の縛りがそうさせています。申し訳ないです。

2017/10/21 (Sat) 22:20
Akira
To ヒロさん(移動先)

https://vanillaice000.blog.fc2.com/blog-entry-419.html#comment4440

> サイドメニューカラム落ちの件〜

こちらはカスタマイズ時に追加した内容の終了タグの過不足か、デフォルトテンプレート内の終了タグを削除or余分に追加してしまったことが原因です。
つまり開始タグと終了タグの数が合っていないかもしれません。
あるいは何かを貼り付ける「位置」を間違ったとも考えられます。
どこをどうカスタマイズしたかはヒロさんが一番よくご存知でしょうから、その部位についてタグのチェックをお願いします。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-478.html
https://vanillaice000.blog.fc2.com/blog-entry-292.html

一旦デフォルトの状態に差し戻し、追加ないし削除したいものについて個別にhtml内容のミスが無いかをしっかりチェックした上で、さらにコードを追加する場所も確認されるのが一番かと思います。
つまりもう一度やり直す、と ^^;
それが一番近道だと思いますよ。
不安があれば貼り付ける前にこちらに内容をお見せください。
ただし第三者スクリプトやhtml内容のソース修正などは致しません。
よろしくお願いします。

2017/10/21 (Sat) 22:44
ヒロ
時間がたてば・・・

こんにちは。

早速の回答有難うございます。
一度、本文に貼った画像を全て削除し、再度やり直してみました。
保存直後はサイドメニューが下に落ちているのですが時間が経てば、右サイドの定位置に回復しました。

ただ、以下のような状態です。
①本文にコードを貼る。(更新直後は下落ちのまま。時間が経てば右サイドに戻ります)
②回復後、再度「本文の編集」画面を見ると貼ったはずのコードが消えてます。(記事の設定にあるアイキャッチ画像は表示されています)
③ただし以下のコードを貼ると時間がたっても下落ちのままです。でも一度貼って更新し、貼ったコードを本文から故意的に削除してやれば、右サイドに戻ります。(この場合も記事の設定にあるアイキャッチ画像は表示されています。もちろんブログ画面に戻ってもヘッダーのサムネル画像は表示されています)

貼ったコードに不具合があるのでしょうか?
【貼ったコード】
<img src="https://blog-imgs-116.fc2.com/p/i/n/pinarello1000/tour-de-france-2294030_640.jpg" alt="tour-de-france-2294030_640.jpg" style="width: 0; height: auto; />

因みに貼った場所は本文の文末で、Akiraさんが公開されているものを参考にして0×0で掲載しています。
※「対象画像は記事の一番最初に」とありましたが、最初に貼ると、その後の記事がブログに反映されなかったので、文末に貼ってます。
⇒文末が悪さしてるのでしょうか?


長文で申し訳ありません。
急ぎませんのでよろしくお願い致します。






2017/10/22 (Sun) 10:35
Akira
To ヒロさん

お手数おかけします。

ちょっと症状がよくわからないです ( ̄∀ ̄;)
貼ったコードが消えているというのがまずおかしいので、それはエディターの不具合としか。
テンプレートソースのカスタマイズの際は更新できないことが稀にあります。
今回のお話は
「記事を書いたらおかしくなる。」というのが概要なんでしょうか。
それともテンプレートカスタマイズなんでしょうか。

頂いたURLは404 not foundですのでURLが消失しているようです。
なので確認が叶いません。

とりあえずデフォルトのChronicleで上記内容を貼り付けましたが、そういった症状は確認できませんでした。
img要素の構文エラーもありません(強いて言えば最後のスラッシュは不要です)

ともかく貼ったコードが「消える」という事象が根本的におかしいですから、なにかしらシステムに原因がある… のかなぁ (´・ω・`)
現在私がヒロさんのブログを拝見しますと、昨日のようなカラム落ち状態にはなりません。
ローディング直後からサイドメニューはちゃんと右にあります。
昨日は完全に落ちていました。

画像URLが存在しませんので、別の画像を用意されまして、記事本文「最初」に貼り付けてみてください。
そしてその状態でその記事のURLをお伝え下さい。
拝見しますので、作業の再現をお願いします。

2017/10/22 (Sun) 10:59
ヒロ
現在は回復してます

お世話になります。

発生する症状が色々あって、コレというポイントが絞れてませんので解りにくい質問になり申し訳ありません。

仰る通り、サイドメニューの下落ちは現在は回復しています。
回復したので問題ないと言えば問題ないのですが、Akiraさんが仰るように対象画像を本文の一番最初に貼ると、その後から記事を書いても文字が反映されないのです。
ただ、記事の中に「太文字」や「文字を大きくする」などを使った強調文字があると、その後からは反映されます。

例えば、現在私のブログで「回らない脚と回せない心肺」というタイトルの記事がありますが、これは画像を一番最初に貼ってます。
この記事の書き出しが、太文字で「上記の件は、特に意味はありません。(^_^;)」となっていることが確認できると思います。
しかし本来は一番最初に貼った画像と、この「上記の件は~」の文言の間に3行程度の文があるのです。それが本文に反映されないという事です。

色々やってみたのですが、本文の最後に画像を貼れば、画像より前にある文字は普通文字でも太文字でもブログに反映されます。
そして、このように本文の最後に貼って更新し、再度「記事の管理」から本文の編集に入ると、貼ったはずの画像コードが消えていのです。(コードは消えてますが画像自体はテンプレートに存在してます。※山の斜面に道路が写っている画像です。)

コードは消えますが、テンプレートの画像は反映していますし、サイドメニューも定位置にありますので、問題が無いと言えば問題はありませんが、この形で使ってて問題ないのかが解りません。

因みに、貼った画像のコードはこちらです。↓
<img src="https://blog-imgs-116.fc2.com/p/i/n/pinarello1000/streamers-1516879_640.jpg" alt="streamers-1516879_640.jpg" style="width: 0; height: auto; />

もし解決せずとも、この形でも大丈夫なら文末に画像を貼ります。
理解しにくい文書で申し訳ありません。


2017/10/22 (Sun) 12:56
vanillaice (Akira)
Akira
To ヒロさん

上記img要素を貼り付けた、ということで間違いないですよね。
で、私先ほど何故気づかなかったんでしょうか。

x
<img src="https://blog-imgs-116.fc2.com/p/i/n/pinarello1000/streamers-1516879_640.jpg" alt="streamers-1516879_640.jpg" style="width: 0; height: auto; />

×
<img src="https://blog-imgs-116.fc2.com/p/i/n/pinarello1000/streamers-1516879_640.jpg" alt="streamers-1516879_640.jpg" style="width: 0; height: auto;">

ダブルクォーテーションが足りません。
さっさと気づけば良いものを「構文エラーはありません」とか嘘ついちゃってごめんなさい ( ̄∀ ̄;)
この現象はこちらの記事が該当です ↓

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

今回の件で顔文字は無関係ですが、記号の欠損によって引き起こされた事象です。
ただ「ソース内から消える」という問題はまた別です。
ソース内から消えるのではなく、描画されない(出てこない)という意味ではないでしょうか。
それなら納得できます。

2017/10/22 (Sun) 13:09
ヒロ
有難うございました。

有難うございます。
"をつけたら文字が回復しました。www

これで文頭に画像を貼るようにします。
この"の有無で貼ったコードも消えなければ安心です。
少し様子を見ますね。

お世話になりました。

2017/10/22 (Sun) 13:23
vanillaice (Akira)
Akira
To ヒロさん(完了のご報告)

コードは消えないですよ。
ソース内からコードが消えるのであればそれはFC2ブログエディターの不具合かご自身のOS不具合です。
なのでこの場合には「反映されない」「描画されない」というのが正しいですね。
ソース自体は編集画面を開けばちゃんとそこにあるはずです。

いずれにしろお時間頂きました。
また何かあればお知らせください。
お疲れ様です :)

2017/10/22 (Sun) 13:26
ゆき
固定壁紙について

たびたびお世話になります。

今回はこちらのテンプレートをお借りしようと思っていますが、メインとサブを半透明に出来ますか?
カルーセルを外したらほぼ真っ白になってしまったので、bodyに固定で壁紙を付けようとしたんですが、やっぱり文字と被って見えにくい状態になってしまいました。
それで、Sakuraみたいに少し透過にならないかと、実験でサイドメニューにopacityを足してみましたが、文字も全部薄くなってしまって。
透過無しで右下固定もやってみましたが、以前「スマホで見た時に~」と言われたのを思い出して、画面縮小で見てみると結局被って見えづらく(汗)
難しくなければ、よろしくお願いします。

2018/05/20 (Sun) 18:11
vanillaice (Akira)
Akira
To ゆきさん

こんばんは。

> メインとサブを半透明に出来ますか?〜

できないことはありませんが背景色を設けることを想定した製作はしていませんので、単純に色をつけただけでは左右に余白がありません。
そちらについてはご自身で設定をお願いします。

-------
> bodyに固定で壁紙を付けようとした〜

現在の内容では「固定」にはなりません。
background-attachment: fixed;
はスマホでは使えません(正しい実装ができているOS, ブラウザが皆無です)
固定(スクロールしても同じ場所から移動しない)にするのであれば background-attachmentプロパティのfixedではなく、positionプロパティのfixedを利用してください。

例)
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: url(アドレス) left top no-repeat; /* 注)fixed値を入れないこと */
}

------
> サイドメニューにopacityを足してみました〜

opacityプロパティは背景だけでなく前景も全て透過しますので容易には利用できません。
(利用する場合には複雑なz-index操作が必要です)
背景「画像」ではなく背景「色」を薄くするのであれば
rgba(x,x,x)
を利用してください。

-----
> 以前「スマホで見た時に~」と言われたのを思い出して〜

以前もお伝えした気がしますがゆきさんはレスポンシブ設定を済ませていませんのでスマートフォンからの閲覧者がこのテンプレートを目にすることはほぼありません。
FC2公式スマホ専用テンプレートが設定されています。

1. スマホ版を設定したままPCの見た目のみをカスタマイズする(スマホユーザーには無関係)
2 スマホ版を非表示設定(レスポンシブ設定)し、PCとスマホの共通カスタマイズにする

いずれかをお選びください。
1の場合にはスマホの見た目を気にする必要はありません。
また、先に記したbackground-attachmentの修正も不要に思います。
(どのみち見てもらえないため)

参考記事
FC2ブログでレスポンシブテンプレートを正しく使う方法
https://vanillaice000.blog.fc2.com/blog-entry-711.html

----
.main-body
で検索し、以下の内容を追加

background-color: rgba(255,255,255,.8);

255,255,255 が10進数のカラーコードです。16進数(#xxxxxx)は使えませんので注意。
後ろの .8 が不透明度設定で1で完全不透明、0で完全透明です。

また、余白がありませんのでテキストが上下左右ギチギチです。
padding: 数値px;
あるいは
padding: 上下px 左右px;
で設定も追加してください。

続いて、main-bodyクラスを持つ要素に背景色が追加されるとコメント一覧などの位置合わせがおかしくなります。
comment form
で検索するとそのすぐ下に

#community,
#trackback {
margin-top: -40px;
padding-top: 40px;
}

というのがありますのでこれを削除。
その代わり最新コメントクリックでの位置合わせ(ページ遷移+オブジェクト移動)は合わなくなります。

-------
サイドメニューの背景色変更は
.side-menu
に指定してある
background-color: rgb(250,250,250);
が対象ですので同じくrgbaを利用した修正を行なってください。

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

2018/05/20 (Sun) 21:08
ゆき
To Akiraさん

こんばんは。
あんな長い説明になる事だとは思わずにすみませんでした!
スマホはそういう事でしたか…確認する環境になかったので気が付きませんでした(汗)

書かれてあった様にカスタマイズしてみましたが、あれで合っているでしょうか?
(左右透過出来ているか確認の為に左下固定になっています)
bodyですが、現在「body」と「body::before」の2つあるんですが、どちらかに組み合わせた方が良いでしょうか?

あと、コメントを使わない場合は、#community, ~は触らなくても大丈夫でしょうか?
よろしくお願いします。

2018/05/21 (Mon) 01:16
vanillaice (Akira)
Akira
To ゆきさん②

こんばんは。

えっと、以前と全く同じ状況になってると思うのですが (´・ω・`)
まず、現在設定されている画像の場合背景色がはっきりしていますので、画像の実寸のまま掲載(今の状態がそうです)だとbody背景色とくっきり分かれてしまいますが良いのでしょうか。
というか、質疑応答に入る際は実際に使う画像で質問をしてください
既に先回のご質問時と別の画像に変更されていますので、またこちらの画像に合わせた説明をしなければいけなくなり二度手間です。
どちらをご利用になるか不明ですので保留にさせてください。
以前の画像ならば今の内容で「可」ですが、今回拝見した画像(白鳥?)なのであれば「不可」と言って良いと思います。
今回の画像を利用するならば

・画像の背景とbody背景色との区切りをどうするのか(グラデーション透過?はっきり区別でOK?それとも画像横幅をデバイス横幅と同等(width: 100%)にする?)

この点についてのご回答をお願いします。
画像の位置合わせというのはその画像の見た目特性なども考慮する必要がありますので、「画像全般このやり方でOK」というわけにはいきません。

-------
> bodyですが、現在「body」と「body::before」の2つあるんですが、どちらかに組み合わせた方が良いでしょうか?〜

「合わせる」の意味がちょっとよくわからないです。
body と body::before は全く別の要素(body要素とbody疑似要素)なので統合したり一方を削除したりでゆきさんのご希望を叶えることはできません。
デバイス依存バグを潰しつつ背景を固定したいのであれば双方が必須要素です。

------
> コメントを使わない場合は、#community, ~は触らなくても大丈夫でしょうか?〜

「使わない」の意味が「コメント欄を常に閉鎖(非表示)にする」という意味であれば放置でも構いません。
が、逆にその場合には不要な指定になりますので(要素自体がなくなるのでページ遷移時の位置合わせ自体無効)削除されるのが一番です。
コメント欄 or トラックバックのいずれか一方でも表示状態なのであれば削除しないとデザインがおかしくなります。

というか却って混乱しますのでお返事としては 削除してください にしておきます(笑)

2018/05/22 (Tue) 02:21
ゆき
To Akiraさん

こんばんは。
以前と全く同じ状態とは…どういう意味でしょうか?
スマホ版の事でしたら、スマートフォン版の表示設定を無効にしましたが…違いますか?

あ、固定している青い画像は前回も書きましたが、透過出来ているかテストで置いてあるだけです。すみません。
(教えて頂いた通りやっても自分が失敗する可能性があるので;)
とりあえず戻してみましたが、気分で素材屋さんから借りてきた画像を入れ替えようと思っているので、あれも決定ではないです。

bodyですが、「bodyに書いてあったものをbody::beforeに移した方が良いか?」という意味でしたが、全く違うものの様なので、触らずに置いておきます。

そうですそうです、コメントもトラックバックも一時公開しましたが非表示にしてます。
削除というのは、指定されている#community,~だけですか?
それともCTRL+Fでcommentとtrackbackを全消しすると言うことですか??(←一瞬こっちかと)
よろしくお願いします。

2018/05/23 (Wed) 00:02
vanillaice (Akira)
Akira
To ゆきさん

こんばんは ('0')/

確か以前にも画像の位置合わせで苦労されていた覚えですが、見当違いでしたら忘れてください。

> あれも決定ではない〜

画像の特性と位置合わせ及びサイズ指定は密接な関連がありますので、先に決定しないとCSSスタイリングできないです (´・ω・`)
なので本件については画像が決定してから注意点に留意してご自身で臨機応変に行なってくださいね。

------
> 全く違うものの様なので〜

そうですね。全く別要素ですから統合などはしないよう注意してください。

------
> コメントもトラックバックも一時公開しましたが非表示にしてます〜

その場合にはCSSはおろかhtmlも不要となりますので
<!-- コメント関連ここから -->
から
<!-- コメント編集ここまで -->
まで削除してOKです。htmlの容量も減らせますので「絶対に使わない」のであれば削除をおすすめします。
CSSは
comment form
から
index (title list), search page
のすぐ上の
/***------------------------------------------
含めず そのすぐ上までを削除。

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

2018/05/23 (Wed) 01:03
ゆき
To Akiraさん

こんばんは。
直った様で良かったです!一昨日から「この記事にはコメントできません。」と何回も出るのでどうしようかと…

確かに以前「右指定にして、画像のメインが縮小しても見える様に~」とお話しました。それの事でしたか。
今回は気分で上下左右の指定も変えようと思っますが、多分それは私でも分かる範囲だと…思いますので大丈夫だと思います。

HTMLもCSSもごっそり削りましたが、これで大丈夫でしょうか。
結構な量だったのでドキドキしながら何度も確認しました(笑)

では、今回もありがとうございました。

2018/05/26 (Sat) 18:42
vanillaice (Akira)
Akira
To ゆきさん(完了のご報告)

お返事遅くなりました。
そしてコメントの件についてもご迷惑おかけしました (*_ _)

はい。不要な場合にはhtmlもCSSも思い切って削除するのが一番です。
使っていなくても読み込み・解釈自体は行われていますのでいろいろと邪魔になります(スピードも落ちます)
お疲れ様でした:)

2018/05/28 (Mon) 16:15
ふくみみ
トップページだけ、サイドメニューが最下部に、、

はじめまして(#^^#)

綺麗なテンプレート、お気に入りで使わせていただいております。

今日、気が付けば、サイドにあるメニューが突然、最下部に移動していることに気が付きました。
それが、トップページだけで、他のページに移動すると、メニューはちゃんと右側に表示します。

この症状が現れる直前に何かをしたという心当たりはありません。

ブラウザは、Google Chrome、safari、Edge、Internetexplore、
どれで見ても同じ症状です。

ご面倒をおかけしますが、なにとぞよろしくお願い致します。

2020/05/19 (Tue) 16:05
vanillaice (Akira)
Akira
To ふくみみさん

こんばんは。ありがとうございます :)
* カラム落ちの件

> サイドにあるメニューが突然、最下部に移動していることに気が付きました。〜

こういう状態を一般的に「カラム落ち」と言います。その原因のほとんどは 記事内で利用したhtmlの構文エラー です。

> 他のページに移動すると、メニューはちゃんと右側に表示します。〜この症状が現れる直前に何かをしたという心当たりはありません。〜

5月13日の記事「いつか見た ヤマセミさん」の記事最下部に掲載している「人気ブログランキング」のhtmlにミスがありますので、この個別記事
http://yayuyuyo.blog.fc2.com/blog-entry-765.html
と、この記事が含まれるトップページにもカラム落ちが発生します。

×
<a href="アドレス" target="_blank"><img src="画像アドレス" title="人気ブログランキング"></a


<a href="アドレス" target="_blank"><img src="画像アドレス" title="人気ブログランキング"></a>

末尾の > (ブラケット)記号の欠損です。これが今回の直接の原因なので修正を行ってください。
繰り返しコピペで利用する内容はこういったうっかりが発生しやすいので気をつけてくださいね。

-----
他にも構文エラーがありますので自主的な修正をお願いします。

【 Twitterカード用のmeta要素 ダブルクォーテーション欠損】 --- クリティカル(致命的)エラー, 修正必須

×
<meta content="@xxx" name="twitter:creator>


<meta content="@xxx" name="twitter:creator">

クリティカルエラーというのはエラーの中でも重大なエラーでレイアウトや構造を崩してしまうため修正必須のものを指します。今回のカラム落ちの原因もクリティカルです。htmlの記号の重複・欠損・全角記号の使用は即クリティカルになり得ますのでお気をつけください。
よろしくお願いします。

2020/05/19 (Tue) 21:02
ふくみみ
ちゃんと表示しました(#^^#)

Akiraさんへ

細かいところまで見ていただき、ご面倒をおかけし、申し訳ありませんでした。

毎日運営しているうちに、コピペが雑になっていたのですね。すごく反省しました。
今後、こういう不注意のないように、細心の注意をしていきます。

Akiraさんのテンプレートは、どれも素敵で、選ぶのに迷うほどですが、
その中でも、Chronicle、とても 気に入って使わせていただいています。

今回は、本当にありがとうございました。

2020/05/19 (Tue) 23:43
vanillaice (Akira)
Akira
To ふくみみさん(完了のご報告)

こんばんは ('0')/
* カラム落ちの件

修正を確認できました。お疲れ様でした。
励みになるお言葉もありがとうございます :)

2020/05/20 (Wed) 22:42
かも
個別記事下部のPREVとNEXTのリンクについて

Akira様

こんばんは、はじめまして。
Akira様の素敵なテンプレート「Chronicle」を使用させていただいております。
かもと申します。
自分でうまく編集できない部分がございまして
この度こちらに書き込ませていただきました。

個別記事を表示した際に下部に表示される、前後記事へのリンク(PREV ENTRY、NEXT ENTRY)なのですが
PREV ENTRYのリンク=1つ前の記事(より古い方)
NEXT ENTRYのリンク=1つ後ろの記事(より新しい方)
になるように書き換えたいと思っております。
(現在はリンクが上記と逆に表示されています)

PREVは左、NEXTは右 という配置はそのままにしたかったので、
HTML内に記述されているリンクのprevとnextという文字を自分で置き換えてみたりしたのですが
レイアウトが崩れてしまいうまくできませんでした。
(その際の崩れ方のスクリーンショットを、参考までに当ブログの最新記事に貼ってみました)

大変お忙しいとは存じますが、もしお時間ができましたら
上記の編集の仕方を教えていただくことは可能でしょうか・・・?
CSSなどは全くわからず、HTMLのタグなどは少し自分でいじれる程度の知識なので
見当違いなことを申しておりましたら申し訳ございません。
どうぞよろしくお願いいたします。

2020/06/03 (Wed) 16:18
vanillaice (Akira)
Akira
To かもさん

こんばんは。ありがとうございます :)

prev --- 古い
next --- 新しい

ということで合ってますでしょうか。つまり時系列のリンクを入れ替える、ことですよね。そしてprevは左、nextは右の配置。
変更するのはhtmlの6箇所です。

<!-- 個別記事用ページナビここから -->
を目印に検索し、直近にある


<!--preventry-->

<!--nextentry-->



<%preventry_url>

<%nextentry_url>



<%preventry_title>

<%nextentry_title>



<!--nextentry-->

<!--preventry-->



<%nextentry_url>

<%preventry_url>



<%nextentry_title>

<%preventry_title>


-----
他にも「prev」「next」の文字列が付いている箇所がありますが変更しないようにしてください。

-----
別件

カテゴリ用ページ送りを削除されていますが、消し忘れが2箇所あります。
注)個別記事ブラウザサイドページ送り
で検索すると該当箇所が出てきますのでガイダンスに従ってくださいね。
よろしくお願いします。

2020/06/03 (Wed) 21:41
かも
To Akiraさん

Akira様

早速お返事くださいましてありがとうございました!
Akira様のおっしゃる通りの挙動にしたかったです。(わかりづらく申し訳ございません…)
そして、教えていただいた通りに置き換えましたら無事に変更することができました!
ブラウザサイドページの部分についてのご指摘もありがとうございました。
確かに、削除した部分のコメントに1/3と書いてありました...
このたびは大変お手数おかけしました。

すぐにご返信くださったり、質問ではない箇所にも気づいていただいたりと
Akira様の細やかなお気遣いにも大変感謝しております。
重ね重ねになりますが、本当にありがとうございました!

2020/06/04 (Thu) 10:28
vanillaice (Akira)
Akira
To かもさん(重要)

こんにちは ('0')/
* 修正ミスの件

削除部位に誤りがあり、JSエラーになっています。

.css('font-size','16px');}else
で検索すると2つ出てきます。2つ目の方が対象で、この文字列の後ろが
</script>
になっていると思うんですが、

.css('font-size','16px');}else{}</script>

赤字部位の記号を消してはいけませんので追加してくださいね。

2020/06/04 (Thu) 14:10
かも
To Akiraさん

Akira様

こんにちは!
何度も何度もお手を煩わせてしまい申し訳ございません…!
お教えいただきありがとうございます、上記の箇所を修正しました…!
これできっと大丈夫…なはず…!
ほんとうにありがとうございます!
無償のテンプレート公開&ご好意でここまでのサポートとは本当に信じられません。
Akira様の、作品への愛が伝わってきます(*´-`)

2020/06/04 (Thu) 14:47

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

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

テンプレート