attention admin about comments trackbacks you may also like

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

2016年07月25日
テンプレート
28
HTML5 CSS3 RWD
Nostalgiaテンプレート

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

最終更新 2019.11.6
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
名称 Nostalgia
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大970px
サイド --- 260px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 なし(インラインSVG)
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 左(デバイス幅依存) サイドメニュー --- 下
更新履歴 2019.8.2
  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"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></a>
  <li><a href="#comment_form"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></a>
</ul>

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

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

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

#community" で検索するとhtml内に2箇所あります。2つとも #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="other-title">Leave a comment</h3> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

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

#comment_form {
  padding-top: 45px;
}
③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p 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要素を利用している方向けなので必要がある方だけどうぞ。

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

最終更新 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
履歴履歴 2018.12.30
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 全記事リストと検索結果にコメント数とトラックバック数の表示を追加
  • アニメーションスピードを調整(旧来よりも若干速めました)

不具合修正ではありませんので旧バージョンのままでもお使い頂けます。

更新履歴 2018.3.6
  • iOS11.2.6でモーダル検索が開かない件の修正
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
  • 新変数導入による管理人コメントプロフィールアイコンデフォルト表示
更新履歴 2018.2.1

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

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

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

更新履歴 2017.1.25

・ SNSシェアリンクのUTF-8エンコード
参考記事
SNSシェアリンクのエンコード

更新履歴 2016.10.6

・ 微調整(リストのmarginなど細かな点)
・ ベンダープレフィックスの整理
「Nostalgia」「Little-thing」「Mocha」メンテナンスのお知らせ

更新履歴 2016.9.14

ブログタイトル下 サイト説明文の横幅を調整しました

ちょっと不親切な造りでした 申し訳ないです (*_ _)
以下の通り最大幅を 850px に制限しました

サンプルは294文字です
この部分はSEOにも関連しており 最適文字数は160文字前後 です
青く反転している部分でちょうど160文字ですので参考までに

更新履歴 2016.9.9

リストマーカーの位置を調整しました
参考記事
list-item横の隙間について

更新履歴 2016.7.30

カスタマイズのガイドがひとつ抜けておりました
対象ガイドは以下のものです

// 注)背景スライド画像指定

書いてありませんでしたので検索しても出てきません ごめんなさい ( ̄∀ ̄;)
追加致しましたので再DLで同じ文言でCtrl+Fキー検索して頂くか あるいは

$.backstretch

で検索して頂きますと その直下の行にある3つのアドレスが背景画像です
お手数おかけします よろしくお願いします

4ヶ月ほども前に購入したツムツム編みぐるみがいまだに完成しないあきらでございます (´・ω・`)
しかも一緒に作っている娘のものと 大きさがいたく違うのは何故なのだ。 えー? 何故ゆうぇにぃ〜〜〜? ( ̄∀ ̄;)
(ちなみにちっさい方が娘の)

のすたるじあ
旧作 nostalgia の改訂版です。

サンプル

Samples

ENTER PAGE DEMO
画像クリックでデモ画面へ
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

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

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

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

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

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

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

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

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

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

Font Awesomeについて

About Font Awesome

Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。

FAがどうしても必要、という方はhtml内に

注)Font Awesome(JS)必要な方この一行削除

という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。

CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome

JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。

スライド背景変更

How to change your background slider images

// 注)背景スライド画像指定

htmlソース内終盤にあります。
画像の増減は 最後のスライドだけ末尾にカンマなし。それ以前のものは末尾にカンマが必要ですのでお間違いのないようにお願いします。

最初の1枚目だけCSSソース側にも記載が必要です(表示ラグを無くすための処理)

/* 注)背景スライド最初の1枚 */

上記を目印にURLを差し替えてください。このCSS処理を怠りますと デフォルトの画像が一瞬表示されてしまいます のでご注意ください。
デフォルト画像は全てpublic domain(著作権不在)ですのでそのままお使い頂いても問題ありません。

トップページのメイソンリーについて

How masonry works

メイソンリーレイアウトの特徴は必ずしも左 → 右 → 左下 → 右下 の順が時系列を守るとは限りません。
レンガ状に綺麗に配置することを目的・優先としたレイアウトです。
画面幅が縮小されて記事が縦一列になった際には 時系列通りに並べ替えを行います。

また、ページのローディングスピードを上げるために画像の遅延読み込みを適用していますので、画像が現れると計算をし直して並び替えが行われます。配置がガチャガチャするのはそのためです。
これは軽量化のための処置なのでご了承くださいね。

No image画像変更

How to change alternative image

記事内の然るべき箇所に画像が存在しない場合に代替として表示するNo image画像の変更は

https://blog-imgs-93.fc2.com/v/a/n/vanillaice000/Nostalgianoimage.jpg

上記が該当ですのでURLを変更してください。CSSソース内に2箇所あります。
サイズ・縦横比不問ですが 今回トップページには表示されませんので大きな画像を準備する必要はありません。
長辺300px程度でOKです。

デフォルト画像 (200✕124 5KB public domain)

画像上の白いオーバーレイとNo imageのテキストは自動で乗ります。

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

How to reverse the direction of rows

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

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

ドミナントカラー

Dominant colors

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

rgb(51,51,51) 基本文字色
rgb(129,134,155) 基本リンク色, コメントsend/ deleteボタンホバー時背景色, ページ送り背景色 など
rgb(156,118,134) 基本リンクホバー時文字色, エンターページ上部ナビ現在地 円形背景色, 日付文字色, コメントsend/ deleteボタン背景色, ページ送りホバー時背景色 など

削除可能なJSについて

Delete specific JS if you want to

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

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

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

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

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

Cautions before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(28)

There are no comments yet.

ミロ

2016/07/30 (Sat) 23:44

// 注)背景スライド画像指定

// 注)背景スライド画像指定
これはこの文言を command+Fすればいいのでしょうか?
申し訳ないのですが、見つかりません(涙)
すみませんがご教授いただければと思います。

Akira

2016/07/31 (Sun) 00:46

To ミロさん

大変失礼致しました。
確かにガイドが抜けておりました
カスタマイズ前でしたらお手数ですが再DLして頂くか
あるいはページ内検索(Windowsは Ctrl+Fキー検索, Macは Command+Fキー検索)

$.backstretch

この下の行にある3つのアドレスが背景画像です。
お手数おかけします。
よろしくお願いします (*_ _)

太郎

2016/08/16 (Tue) 23:05

こんばんは、素晴らしいテンプレートですね(^^♪

ひとつ質問させてください。
背景の画像について出来るだけ容量の軽いものを使いたいのですが、
全画面で表示されるので、結構粗くなってしまいます。
BetweenNeoで使われてる網目のようなマスクを掛ければ、アラが飛んで良い感じになると思うのですが、
これはどうやって掛けているのでしょうか(こんな感じのです→#)

よろしくお願いします。

Akira

2016/08/17 (Wed) 00:34

To 太郎さん

ありがとうございます (●'0'●)/

> 全画面背景のアラをごまかしたい(マスク)

まずオーバーレイに利用する画像の準備ですけれども、よくよく検討して頂かないとですね、
基本的には細かいドット柄を敷き詰めるわけなので、画面はかなり暗くなります(黒の場合, 白は逆)。
BetweenNeoで利用しているマスクを流用されても構いませんが、ご想像頂いている以上に暗くなると思ってもらった方が良いです ^^;
難ありだと思われましたらご自身で画像探しを頑張る ╭( ・ㅂ・)و ̑̑
(背景透過のPNGあるいはGIFを探します)
Ctrl+Fキー検索(CSSソース内です)

body:before

こんな感じになってます ↓

body:before {
content: "";
display: block;
省略
}

このすぐ「下」に以下を追加

body:after {
content: "";
display: block;
background: url(//blog-imgs-88.fc2.com/v/a/n/vanillaice000/pattern_20160101014629b86b.png) center center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -900000;
}

アドレスはBetweenNeoと同じPNG画像ですのでとりあえずこのままコピペして様子をご確認ください。
OKならばそのままお使いくださいませ。
よろしくお願いします。

2016/09/01 (Thu) 16:05

此方で宜しいのですね

丁寧に、質問場所を示してくれてありがとうです。
此処を見ると、記事の目次(?)の上に
綺麗な画像が有りますね
之が「アイキャッチ」何や
う~~ん・・・
之も素敵やね
之は、他者の方々に迷惑掛らんで出来るのかな?

其の内、説明有ると思うけ
何時でもエエケ、待ってます

「プロフィールアイコン」は、如何やら
他者様に迷惑(特に金みたいに何も出来ない人は)掛ったらアカンので
やめる事にします

本来の「アイキャッチ」は、出来るのであれば
宜しくです。

金の好きな「女性画像」が貼れたら嬉しく思います

Akira

2016/09/01 (Thu) 16:12

To 金さん

今書いてるとこ ( ゚Д゚)ノ

迷惑がかかる という方が正しいかどうかわからないけど。
基本的にFC2ではプロフアイコンをコメント横に表示できるようにはなってないんです。
私のアイコンが表示されてるのは、私が表示できるように操作してるからです。
つまり「テンプレートの仕様」

これ裏ワザ的実装なので、まずは基本仕様を理解しないことには
いくら説明しても理解できないと思う。
なので今一生懸命書いてる(笑)
できるかできないか、やるかやらないかはそれを読んでから決めたら良いよ。
今決めなくても(笑)

=======

この記事の一番上に表示されているのは
「アイキャッチ」
… と言えないことはないんだろうけど、ここは個別記事なので
「記事に貼り付けてある画像」って感じかな。
サムネイル = アイキャッチ という意味で捉えるのならば「違う」と言っても良い。
ちょっと難しいだろうか (´・ω・`)

ここ開いてみて ↓

http://vanillaice000.blog.fc2.com/blog-category-5.html

記事一覧が出てて、その右横に丸い小さい画像が付いてるよね。
これが「サムネイル画像」です。
正しいサムネイルの意味も含めて書いていますので待っててね。

Akira

2016/09/01 (Thu) 17:24

To 金さん

まずひとつめ。
あちらの書庫に

FC2やweb一般でのいろんな「呼び名」「名称」

のタイトルでUPしました。
次はまた夜書きますヨン様 (o'д`o)ゝ
ちょっと店に顔出してくる(笑)

2016/09/01 (Thu) 18:26

いってら~~~~!

金は、後回しでエエヨ
お仕事頑張ってね!(*^_^*)

2016/09/02 (Fri) 21:31

先程の説明(人''▽`)ありがとう☆です

「管理人ハンドルネーム 」は
やっぱ、止めておきます
何処のソースを弄うのかもわからんし
オカシゲに金がソース弄うて、折角の素敵なテンプレートに
支障が出たら、嫌やもん
別に、今の侭でエエです

で、設定は説明通りにしました(と、金は思うとります( ;∀;))

お手間掛けまして、有り難うでした。(人''▽`)☆

Akira

2016/09/03 (Sat) 00:16

To 金さん

おっつっつ (o'д`o)ゝ

はい。お任せします ( ゚Д゚)ノ
また明日覗きに行きますー!

えるて

2016/09/18 (Sun) 17:29

素敵なテンプレートをありがとうございます


FC2で素敵なブログだな…と思う人の7割8割の方が
Akiraさんのテンプレートをお使いになっていて、
「よし!わたしも」と
今日から使わせて頂いております。

ブログ名が長いので
ディスプレイによっては2行に渡ってしまい、
フォントサイズを下げないと
頭でっかちに見えちゃうな、と
考えあぐねております。

スタイルシートの
#blog-titleのフォントサイズを変えてみたのですが
上手く行きません。

お忙しいところ恐縮ですが、
教えて頂ければ有難いです。

Akira

2016/09/18 (Sun) 22:20

To えるてさん

ありがとうございます

> ブログタイトル折り返しの件

以下のページに調整の仕方が載っていますのでご参照ください。
http://vanillaice000.blog.fc2.com/blog-entry-220.html#object22

Nostalgiaテンプレでの該当箇所は 2箇所 あります。
Ctrl+F(Windows)/ Command+F(Mac) キー検索


<a href="<%url>" id="text-effect"><%blog_name></a>


<a href="<%url>" id="text-effect"><%blog_name></a>

①はトップページ最初の1ページ目のみに大きく表示されるタイトル
②はその他ページで小さく表示される方のブログタイトル
です。
それぞれ赤字部分を修正してくださいね。
よろしくお願いします ( ゚Д゚)ノ

えるて

2016/09/19 (Mon) 10:50

きゃ~ >_<

「よくある質問」も確認しないまま
安直に質問して
申し訳ありませんでしたっ >_<

その上次の質問で
大変恐縮なのですが、
ブログタイトルの表示において
アルファベットと日本語の
フォントサイズを変更することは可能でしょうか?

ブログタイトルの長さが仇になって
日本語の部分が重く見えてしまうので
アルファベットより小さくしたいのです。

お手隙の際にでも
お返事頂ければ幸いです m(__)m

Akira

2016/09/19 (Mon) 21:20

To えるてさん

大丈夫ですー。
お気に病まれませんよう ^^;

> 欧文フォントと日本語フォントの大きさを分ける

結論を先に言いますと「できません」
で、申し訳ございません。
私「エフェクト」の存在をすっかり忘れておりました。
先回お尋ねの「<br>を入れて折り返しを操作する件」についても
今回の「フォントのサイズを分ける件」についても、
エフェクトを取り除く必要があります。
これはJSの関係上致し方ないことですので、そこをまずどうされるかお決めくださいね。
選択肢

① ブログタイトルフォントを操作する = 右からスライドインするエフェクトを排除
② ブログタイトルフォントの操作はしない = エフェクト温存

======== ①を選択される場合の手順

現在のフォントサイズ指定をまずおさらいしてくださいね。
トップページ最初の1ページ目でのブログタイトルのご説明です。
Nostalgiaはレスポンシブデザインですので、画面幅に応じてブログタイトルフォントも徐々に小さくなるよう指定しています。
現在のえるてさんの指定は

パソコンなど画面が大きいとき --- ここだけ指定の形式が異なりますので注意
42px

画面横幅1350pxを下回った時
32px

画面横幅1050pxを下回った時
27px

画面横幅730pxを下回った時
22px


上記の通り。
ですから修正すべき箇所は4箇所です。

#index-blog-title {

でCtrl+F(Windows)/ Command+F(Mac) キー検索 されますと4つヒットします。
縦並びに書いてありますのですぐ見つかると思います。
最初の42pxの部分は

font: bolder 42px/1.2 'Playfair Display', 省略;

こうなってます。42の部分がフォントのサイズ。
あとの3つはそれぞれ

@media screen and (max-width: 数字px) {

で括られています。
まずパソコンでの見た目を決めて(なるべく大きいブラウザサイズで)
少しづつ小さく調整し、最終的に画面730pxの時点で22pxになるようにされると良いと思います。

=====

この段階では欧文と日本語のフォントは同じです。
これから日本語フォントの方を小さくする処理に入りますが、その前にhtmlソース内から以下の項目を削除。
検索

<script src="//blog-imgs-82.fc2.com/v/a/n/vanillaice000/lettering_compress.js"></script>

上記を目印にひとかたまりの部位を削除します。
スクショでご確認ください。

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/a98ue9a_zpsm0e8922b.jpg

さらにCSSソース内から以下を見つけます。
検索

#index-blog-title a,

この項目の

visibility: hidden;

削除です。

=====

続いて日本語フォントの処理。
検索

<h1 id="index-blog-title">

このすぐ下がこうなってますよね ↓

<h1 id="index-blog-title">
<a href="<%url>" id="text-effect">欧文 日本語</a>
</h1>

この段階で<br>による行指定が可能になります。

<h1 id="index-blog-title">
<a href="<%url>" id="text-effect">Fleursdeschamps<br>なげいれの花<br>二十四節気七十二候</a>
</h1>

こんな感じだと仮定して。
これを以下の通り直します。

<h1 id="index-blog-title">
<a href="<%url>" id="text-effect">Fleursdeschamps<br><span id="change-font">なげいれの花<br>二十四節気七十二候</span></a>
</h1>

=======

ここからCSS修正ですが、少し煩雑ですので注意して作業をすすめてください。

最初にフォントサイズを決めて行きました。
こんな感じになっているかと思います ↓
(一番最初の形式が異なるものはひとまず置いておきます)

@media screen and (max-width: 1350px) {
#index-blog-title {
font-size: 35px;
}
}

上記に追加で

@media screen and (max-width: 1350px) {
#index-blog-title {
font-size: 35px;
}
#change-font {
font-size: 日本語フォントの大きさpx;
}

}

これを3つ全てに行います。
欧文よりも小さくされるならば、上にあるfont-sizeよりも小さな数字を。
最初の形式違いのものについてはスクショの箇所に

スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/29fuhaio_zpse4n2ifcw.jpg

これを追加 ↓

#change-font {
font-size: 日本語フォントの大きさpx;
}


=========

以上です。
かなりややこしい作業ですが、まずはエフェクトをどうされるかご検討頂きまして、
作業する・しないをお決めくださいね。
最初のご質問時に気がつきませんで申し訳ありませんでした。
さぞお悩みになられたことと思います。
ホントごめんなさいね

ちなみに私が拝見して
「バランスが悪いなぁ」
という印象はありませんけどもね。
この辺りは個々の感性、というところでしょうか。
あと、お花素敵すぎ(笑)
憧れます ( ゚Д゚)ノ

えるて

2016/09/22 (Thu) 01:05

本当に本当にありがとうございます m(__)m

お忙しいのに
ほんとにほんとに丁寧に教えてくださって
ありがとうございました >_<

一晩悩みましたが
エフェクトの魅力は捨てがたく、
日本語のフォントのみを小さくすることは諦めました。

大きなディスプレイを使用する際
アルファベット部分より
日本語の方が大きく立派に見えるのが気になるので
とりあえずPC用のフォントサイズを改めて下げてみました。

フォント幅が狭いゴシック系の物を指定して
存在感を薄めようか…
などと思ってもみたのですが、
結局は閲覧なさる環境に依存するので
標準添付されているフォント内では難しく
諦めるしかないかなぁ、と思っている次第です。


丁寧に説明してくださって
本当にありがとうございました。

取り急ぎ御礼申し上げますです



Akira

2016/09/22 (Thu) 23:32

To えるてさん

わー ( ̄∀ ̄;)
こちらに頂いたコメントを見逃して後回しになってしまいました。
ごめんなさいね (*_ _)

欧文フォントと日本語フォントは元よりフォルムが全く違いますので、組み合わせると全く大きさが違う、といったものも。
この辺り毎回大変苦労してたりします ヽ( ̄д ̄;)ノ
折れて頂く形になり申し訳ないです。

最終手段としては、ブログタイトルに指定されている欧文フォントをやめて
日本語フォントの游ゴシック体で揃える方法もあります。
ただしアルファベットは美しくありません。
それでも見た目のバランスは整うのではないか、と思います。
もしその方法を取られるのであれば
#index-blog-title の

font-family

の一行を削除してください。
よろしくお願いします。

-

2017/03/16 (Thu) 23:15

管理人のみ閲覧できます

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

Akira

2017/03/17 (Fri) 19:10

To centerタグの件 内緒さん

ありがとうございます。
とっても嬉しいですー

> 電子書籍のアフィリエイトタグがセンタリングできません〜

これはサイドメニューのプラグイン、で合ってますでしょうか。
今私の方でもやってみましたが、フツーにセンタリングされました (´・ω・`)
でね、ちょっとというかかなりうろ覚えなんだけども。
私も前にそんなことが起こった… ような気がする (´・ω・`)
や、でも記憶の捏造かもわからん(笑)
確かプラグインのソースに <div style="text-align: center;">〜</div>
って書いても左に寄ったままで、なんで? e-447
ってことがあった… ような。
どうしたかというとたぶん、一旦プラグインフリーを削除して新しく入れ直したらできた。
ような気がする ( ̄∀ ̄;)
再現ができないのでなんとも言えませんが、一度やってみてください ^^;

それかですね、プラグインについては位置合わせを設定できますので、
該当ソースから <center>〜</center> を外して
<a href="アドレス"〜〜〜〜 省略
に直し「コンテンツの文字設定」で中央を選んでもOKです。

スクショ
http://blog-imgs-102.fc2.com/v/a/n/vanillaice000/w9fh9ewa.jpg

プラグイン限定ですが、この方法でも大丈夫ですよ。
FC2のシステムが自動で<div style="text-align: center;">を追加してくれます。
追加される対象要素が違いますが、問題ありません。

==========

> 見だしの追加〜

こちらは独自クラスですので記事を書かれる際に特定の文字列を書いて頂く必要がありますが、全く同じものでよければ以下の通りです。
CSSソース末尾に追加してください。

--- 一旦削除 ---

使い方(書き方)は以下のページをご参照ください。
よろしくお願いします (●'0'●)/

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


======

ごめんなさい。一旦書きましたが、Nostalgia用に調整しないとダメなんだった。
少しお待ちくださいね。

======

調整してみましたけれど。
Nostalgiaの記事背景は不透明度がついてるんですよね。
で、手書き風のものは問題なく表示されますのでご利用頂けます。
強調の<mark>も大丈夫です。
見だしのdog earとカールに難あり (´・ω・`)
それを調整して以下の通り注意点があります。

● dogear
右側の折れ部分はツギハギしていますので、文章が横目いっぱいになった際、右側の空きが左側の空きよりも若干大きいです。
そんなに気にはならないと思いますけれど、一応お伝えしておきます。

● カール
こちらはテンプレ全体の構造上、本来は
記事背景 > 見だしカール下シャドウ > 見だし
になるところが
見だしカール下シャドウ > 記事背景 > 見だし
と、順番が入れ替わってます。
シャドウが記事背景よりも「下位」になりますので、とても薄い(笑)
けど付いているのがわからないほどではないと思います。
構造上こうしておくのが一番良いと思いますのでこのままで ←

あとは双方見だし背景を何色にするのか、というのもあります。
白… かなぁ (´・ω・`)
グレー系だとわかりにくいかもです。
そちらについては色々試してみてください。
丸投げっぽくてすみません ^^;

以下をCSS末尾に追加

/* 手書き風 */
.freehand {
border: 3px solid rgb(230,230,230);
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
padding: 1em;
font-size: 15px;
font-weight: bold;
}

/* dog ear */
.dogear {
margin-right: 16px;
position: relative;
padding: 1em 0 1em 1em;
background-color: white; /* 背景色 */
color: rgb(51,51,51);
font-size: 15px;
font-weight: bold;
}

.dogear:before {
content: "";
margin-top: 16px;
width: 16px;
background-color: white; /* .dogearの背景色と同じものを指定 */
position: absolute;
top: 0;
right: -16px;
bottom: 0;
}

.dogear:after {
content: "";
width: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: transparent transparent rgb(240,240,240) rgb(240,240,240); /* rgb(240,240,240)が折れ曲がり部分です */
position: absolute;
top: 0;
right: -16px;
}

/* カール */
.curl {
background-color: rgb(240,240,240); /* 背景色 */
padding: .5em .75em;
position: relative;
font-size: 15px;
font-weight: bold;
}

.curl:before,
.curl:after {
content: "";
width: 30%;
height: 50%;
position: absolute;
bottom: 8px;
z-index: -1;
box-shadow: 0 10px 15px black;
}

.curl:before {
left: .3em;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}

.curl:after {
right: .3em;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}

/* 強調 */
mark {
background: linear-gradient(transparent 60%, yellow 60%);
font-weight: bold;
}


コメントを太字にしておきます。
ガイダンスであり、かつ、重要部分ですので意識しながら作業をお願いします。
わかりにくければお尋ねくださいね。
よろしくお願いします。

====== 余談

ところで、Stay goldの作者さんは貧乏神の漫画と同じ方でしょうか。
私、美容室で読んで号泣して美容師さんを超狼狽させたんですけど(笑)
違うかな? ^^;

-

2017/03/17 (Fri) 22:35

管理人のみ閲覧できます

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

Akira

2017/03/17 (Fri) 23:08

To centerタグの件 内緒さん ②

わー。そうでしたか。
私の早とちりで申し訳ないです。

簡単に言うと、
● 原因
ブロックレベル要素だから
● 対処
<div style="text-align: center;">〜</div>
で挟むのではなく
<div style="margin: 0 auto;">〜</div>
で挟んでください。

text-align というプロパティは「ブロックレベル内のインライン」に対して使うプロパティです。
今回の内緒さんのウィジェットは、
「横幅が200pxのブロックレベル要素で、中に画像などのインライン要素が入っている」
という説明でわかるでしょうか。
ブロックレベル要素全体を動かすには text-align ではなく margin を使います。
一度お試しくださいね。
二度手間になって申し訳ない。

======

dog ear の件は「折れて三角になっている部分」でしょうか。
/* rgb(240,240,240)が折れ曲がり部分です */
のコメントが付いている部位が該当です。
ここをもう少し濃い目の色にされると良いと思います。

======

余談の件。
それです。それです(笑)
合ってた ╭( ・ㅂ・)و
絵の雰囲気を見てもしかして、と。
作者さんのお名前もなんとなく覚えてたっぽい(笑)
何気なく手にしましたけど、すっごい泣けました ^^;
我慢できんかった(笑)
あー。教えて頂いたので私これ(貧乏神の)買っちゃうかもわからん((((笑)

-

2017/03/18 (Sat) 13:53

管理人のみ閲覧できます

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

Akira

2017/03/18 (Sat) 15:36

To centerタグの件 内緒さん ③

またしても私の伝え方がよくなかったです。
肝心な「どこに記載するか」をちゃんと書いてませんでした。
margin: 0 auto; の対象は「width指定が行われているブロックレベル要素」ですので、

<div id="creative" style="margin: 0 auto; 〜省略〜">

ここですー。
私の説明を読み返すと、既存ソースを丸っと挟んでそこにmargin: 0 auto;
ってとれますよね。
申し訳ないです (´・ω・`)

で、とりあえず追加作業はまだ置いといてください。
次の要件を先に。

> 一括で置換

それは可能です。
可能ですが、この先テンプレートを変更するたびにJSコードを恒久的に移植する必要は出てきます。

・ JSでのhtml操作はページ表示が遅くなる原因になる
・ ChromeがJSのdocument write とその関連コードをいずれブロックするのではないか… という噂あり(現在は「低速回線(2G)などの時はJSの実行をブロックします」という警告が出ます。「低速回線では」の縛りが外れた時がちょっと怖い)

上記2点に納得ができるようでしたら利用しても良いと思います。

</body> の直前に以下を追加。

<script>
$('center').replaceWith(function() {
$(this).replaceWith('<div style="text-align: center;">'+$(this).html()+'</div>');
});
</script>


これはテキストのセンタリング処理です。
アフィリエイトのセンタリングはCSSで行います。
幸いなことにidが付与されていますので、CSSでできます。
これが無いとできないんですよね。今回はラッキーです (o'ω')ノ
CSSソース末尾に以下を追加。

#creative {
margin: 0 auto;
}

で、これホントはアカンですよ (´・ω・`)
creative がクラス名でなくアイディー名なんですね。
id名というのはページ内に一つしか存在してはいけないルールなんです。
クラスは複数でOKというか、複数要素のために使うのがクラスです。
一つの記事に#creativeがたくさんあるのでバリデートはエラーになっちゃいますね (´・ω・`)
でもアフィリエイトだから仕方ないのかなー?
idとかの操作もダメなのかしら。

で、こちらも一応idからclassへの変更がJSでできるのですが、バリデートは通りません。
なので書き換えないといけない!(笑)
振り出しに戻っちゃう… ( ̄∀ ̄;)
バリデートを気にされないのであれば大丈夫ですよ。
centerタグを使うよりは全然良いと思います(笑)

まとめ
● 既存のログに対してはJSでタグの置換を行う
● これから書く記事についてはcenterの利用避けて、手入力で<div style="text-align: center;">〜</div>と全体コンテンツを挟む。
● テンプレート変更時にはJSコードの移植とCSSスタイリングの移植を忘れない。
● 可能であればアフィリエイトのidをclassに変更して今後はそちらを利用する。

=====

今記事を書いている最中で、そちらで align属性についても触れています。
既にご存知の通りalignも廃止属性です。
センタリングの仕方と廃止属性alignについては最新記事を御覧くださいね。
まだ書き終わってないけど ←

-

2017/03/18 (Sat) 17:58

管理人のみ閲覧できます

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

Akira

2017/03/18 (Sat) 23:03

To centerタグの件 内緒さん ④

出来てますね。
安心しました。

それから、ご紹介ありがとうございますー(笑)
私「魔法がとけて〜」のお話し知らないです。
えー!なんで? ( ̄∀ ̄;)
なんとか版やらなになに版やらの違いでしょうかしら。
すっごい損した気分なので購入しようと思います(笑)
ありがとうございます。
お疲れ様でした

-

2018/03/05 (Mon) 22:15

管理人のみ閲覧できます

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

Akira

2018/03/05 (Mon) 23:00
vanillaice (Akira)

To Nostalgiaの件 内緒さん

こんばんは (o'ω')ノ

> スマートフォンから閲覧すると擬似エンターページが表示されず〜

こちらについては以下の記事をご参照ください。

[FC2ブログ独自変数 index_area はログオフ + モバイル環境では効かない]
https://vanillaice000.blog.fc2.com/blog-entry-592.html

運営の方へ掛け合ってはみましたが今のところは「仕様」という結論になっています。
本来レスポンシブデザインの場合はアクセスデバイスのユーザーエージェント(パソコン or スマホ)の判定をしない(しなくて済む)のですが、FC2ブログはレスポンシブ以外のテンプレートも含めた全体環境をサポートしなければいけませんので、ユーザーエージェント判別を飛ばすことができません。
それが一因だと思います (´・ω・`)
環境別index_areaのプログラムに手を入れてもらえると良いのですが、現状では未解決ということで申し訳ないです。

--------
> スマートフォンからグローバルナビゲーションの検索(虫眼鏡のアイコン)をタップしても、検索ワードを入力する欄が表示されません。〜

私の環境下だと問題なく表示されます。内緒さんのページで検証しました。
iPhone6S iOS11.2.5 --- Safari OK, Chrome OK
iPhone7 iOS11.2.5 --- Safari OK, Chtome OK

最新のインストール「前」です。最新は11.2.6。
恐らく11.2.6へのアップデートで発生するのだと思います。
(現在はiOSのグリッチとして「固定されたinput要素(検索など)のカーソルがずれる」、というものがあります。
こちらの対処は当面見送っております)
ちょっと今からアップデートしてみますね。
内緒さんのiPhoneのOSバージョンを教えて頂けると助かります。

-------
アップデートしました。
あ。ダメですね(笑)開かなくなったわ ( ̄∀ ̄;)

今から修正しますのでしばしお待ち下さい。
公式の方を上書きしますので再DLして頂く形になります。カスタマイズされているのに申し訳ないです。
また、疑似エンターの件もお考え併せの上、再DLあるいはテンプレート変更になるかもしれませんが、ご検討お願いします。

------
公式ページの内容を上書きしました。開けるようになっているはずですのでご確認をお願いします。
(併せて Font Awesomeのバージョンを4から5へアップグレードしました)

-

2018/03/06 (Tue) 11:24

管理人のみ閲覧できます

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

Akira

2018/03/06 (Tue) 15:18
vanillaice (Akira)

To Nostalgiaの件 内緒さん(終了のご報告)

いえ。修正すべきものですので逆に教えて頂いて助かりました。
来週にでもアップデートすれば良いや、ぐらいに思っていたので ^^;

こちらこそお手数おかけしました。お疲れ様でした

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

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