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

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

テンプレート
2016/12/23 34
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD
Juvenileテンプレート

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

最終更新 2020.4.5
  • ページ送りのJSを修正
名称 Juvenile
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大790px
サイド --- 320px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.4.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 右(デバイス幅依存) サイドメニュー --- 下
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.25
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.4
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)

カスタマイズ済みなど、再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-->

続きまして <footer class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </footer> まで(この文字列も含む)を以下の内容に 変更

<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> から <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;
}
③について

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

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

更新履歴 2018.12.26
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

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

更新履歴 2018.3.30

大規模なメンテンナスを行いました。

  • フッター上カラムを削除(プラグイン3利用者が少ないため)
  • カルーセルスライダー内サムネイル, トップページ要約記事サムネイル, 管理人コメントアイコン に対し画像遅延読み込みを導入
  • 構造化マークアップ導入(個別記事のみ)
  • 個別記事のタイトルをh1に昇格
  • 新変数導入による管理人コメントプロフィールアイコンデフォルト表示
  • ベンダープリフィックスの整理
  • floatレイアウトからflexレイアウトへ変更
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
  • その他調整多数

不具合修正ではありませんので旧バージョンも継続してご利用頂けます。
アップデートに関しまして以下の点にご留意頂き再DLをご検討ください。

  • レイアウトが若干変更になります(プラグイン3用カラムは無くなりプラグイン1.2と同じ扱いになります)
  • テンプレート専用新着記事リストが無くなります(代替として公式プラグインをご利用ください)
  • 画像遅延読み込みによりパフォーマンスが若干UPしています
  • jQueryファイルを始め、関連jQueryプラグインのバージョンが全て最新になります
  • 個人の記事内でFont Awesomeの旧バージョン書式を多用している場合は表示不備が生じることがあります
更新履歴 2017.4.17

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

更新履歴 2017.1.25

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

更新履歴 2017.1.13

・RSS新着サムネイルをFC2独自変数での表示に切り替えました
・PCでの閲覧時にナビゲーションに「mobile」(スマホ専用版)へのリンクが表示される件を修正しました

関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

本ページ内容は2018年12月26日アップデート以降が対象です。

こーんこーん♪ こーんこーん♪
釘〜を刺す〜〜♪
山崎ハコさんの破壊力 (´・ω・`)
このフレーズが頭から離れません… 困った…

じゅべないる
12月23日 申請致しました

サンプル

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で内容を取り込むタイプのものです。表示されない、という症状が出ている場合には スクロールアンカーの解除を行ってください。

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

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 remove the carousel slider

カルーセル内容・表示数は各ページに表示される記事と連動します。不要と思われます方は

注)カルーセル不要の方ここから削除

で検索されますと 3箇所 出てきますので
それぞれガイダンスに従ってください

ナビゲーションについて

Important thing to be careful when adding links to navigation

ナビゲーションリンクテキストの日本語変更やリンク追加などをされます方は、デフォルト設定よりも早い段階でナビゲーションが折りたたまれるよう調整してください。
(見た目・操作性の問題とスクロール位置のズレ対策)

navi breakpoint

で検索されますとhtml内に1箇所、CSS内に1箇所、合計2箇所出てきます。
いずれも直近(すぐ下にあります)の 560px の数値を大きい数字に変更してください。

全体幅調整の仕方

How to increase or decrease width of container

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

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

How to reverse the direction of rows

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

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

ドミナントカラー

Dominant colors

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

rgb(51,51,51) ブログタイトル文字色, 基本文字色, ナビゲーションハンバーガー色(スマホのみ)
rgb(204,102,153) 基本リンク色
rgb(250,250,250) 関連記事リスト・コメント一覧など背景色
rgb(30,30,30) コメントsend/ deleteボタン・ページ送り・フッターなど背景色

削除可能なJSについて

Delete specific JS if you want to

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

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

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

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

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

Cautions when copying pagination in permanent page

2020.3.25バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内の <!-- 個別記事ページナビ --> から <!-- 個別記事ページナビここまで --> までをコピーし、掲載希望場所へペーストしてください。

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

Cautions before asking for something.

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

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

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

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

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

 34

There are no comments yet.
vanillaice (Akira)
Akira
To ユキさん(移動先)

> カルーセル, ヒーローヘッダーが不可視になってしまった件の修正について

デフォルトでは画像上にあるテキストが読みやすいように、画像に透過黒オーバーレイ(マスク)をかけてあります。
そちらを完全不透明「白」に変更されているので下の画像が透けてみえることもなく、また、画像上のテキストも同色ですから読めません。

● オーバーレイを「黒」から「白」にする必要があるのかどうか Yes/ No
No の場合はデフォルトに戻してください。
Yesの場合は以下の通り

① 完全不透明を不透明度指定ありに変更
Ctrl+F(Windows)/ Command+F(Mac)キー検索

.grid-overlay

この項目の background-color の指定が現在
#FFFFFF
になっていますので、

rgb(255,255,255,.3)

上記の通り不透明度指定をしてください。
赤字になっている小数点以下の数値が大きいほど不透明度が高くなります。
「透明度」ではなく「透明度」ですので、数字が大きいほど透けなくなります。
この指定では#●●●●●● あるいは #●●● の16進数コード指定はできませんので、必ず上記のような10進数での指定をお願いします。
デフォルトは rgba(0,0,0,.2) で、黒の不透明度0.2に設定してあった箇所です。
同じ要領でヒーローヘッダーのマスクも変更。

注)ヒーローヘッダー上記事タイトルが読みづらい方は .2 の数字を大きくしてください(.4〜.9の間 1で完全不透明黒)


の注釈が付いていますのでそちらを目印に。

=========

マスクの色が決まりましたら上に乗る要素(記事タイトル+記事要約+日付+SNSシェアボタン(個別記事のみ))は反対色を設定する必要があります。
どのようにされるかは私ではわかりませんので該当箇所だけ記しておきます。
それぞれ検索して割り出してください。

① カルーセル画像上の「タイトル」と「記事要約」とを分けるボーダーの色。
デフォルトは rgba(255,255,255,.3)

.grid-context:before,

② カルーセル画像マウスホバー時の背景色
デフォルト rgb(30,30,30)

注)カルーセルマウスホバー時背景色

③ ヒーローヘッダー上記事タイトル。
デフォルト white

#hero-title,

④ ヒーローヘッダー上SNS
デフォルト white

.inner-image-parent a

========

ともかく同系色の組み合わせでは当然不可視になりますので、ご自身で組み合わせをお考えくださいね。
また、カスタマイズ箇所の抜き出し等これ以上の細かな指摘・修正(デフォルトに戻す作業)は私の方では致しかねますので、混乱された場合にはデフォルトテンプレの再DLをお願いします。

=========

続きまして
> カテゴリ等の欧文フォントを変更したい件

デフォルトでは
● 基本英文フォント(記事内やナビゲーション) --- Lato
● カテゴリやブログタイトル --- Berkshire Swash
をそれぞれ指定しています。
Berkshire Swashが不要、という解釈で合ってますでしょうか。
Ctrl+F(Windows)/ Command+F(Mac)キー検索

'Berkshire Swash',

上記をコピペして検索してください。
(カンマや空白などが含まれています)
ヒットした箇所の上記文字列を全て削除
全部で11箇所あります。
あるいは Lato に変更されるのならば

'Lato',

に修正。
また、'Berkshire Swash', の後ろが 'cursive' になっているものについては同じく Lato に揃えるのであれば

'Lato',

に変更必須(変更しないとブラウザデフォルトのcursiveフォント(装飾系フォント)に書き換わってしまいます)、あるいは日本語フォントで構わないのであれば font-family の一行を削除。
また font-family ではなく font という指定になっている場合には

font-family: 'フォント名';
font-size: フォントサイズpx;
line-height: 行間;

に分割する必要もあります。
font-family については 'Lato' を指定されるか行ごと削除されるかのいずれかです。

=======

[余談]
ヘッダーをバナー画像に変更されていますが、現在

<a href="ブログアドレス" title="ブログタイトル" alt="ブログタイトル"><img src="画像アドレス"></a>

になっています。
alt属性は<a>ではなく<img>の方に追加した方が良いです(html構文的にもSEO的にも) ↓

<a href="ブログアドレス" title="ブログタイトル"><img src="画像アドレス" alt="ブログタイトル"></a>

検索エンジンに画像を言語として伝えるために使うのがalt属性で、画像の方へ付加します。


以上です。
お手数おかけします。
よろしくお願いします。

2017/01/03 (Tue) 01:29
ユキ
No title

ありがとうございました。
変更できました。
とてもたすかりました!大事に使っていきたいと思います。

2017/01/03 (Tue) 13:30
vanillaice (Akira)
Akira
To ユキさん

良かったですー。
作業お疲れ様でした。
嬉しいお言葉もありがとうございます :)

2017/01/03 (Tue) 18:40
Akira
To 理系女子の美容オタクママさん(移動先)

まず最初に、最新版がDLできるようになっておりますので、お手数ですが再DLをお願いします。
DLされますと、パソコンで出てくるナビゲーションの「mobile」がなくなります。
これはスマホでのみ表示させるものですが、私のポカでPCでも表示されておりました… ( ̄∀ ̄;)
誠に申し訳ございません (*_ _)

> mobleボタンの意味

こちらはスマホ版の設定を行っている方のみ有効です。
このボタンでスマホ専用版へ誘導します。
ママさんの場合にはスマホ版非表示設定・レスポンシブ利用ですので不要です。
不要な方へは削除をお願いしています。
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<!-- 注)スマホ版非表示の方この行削除 -->

上記を目印に削除をお願いします。

=====

> aboutボタンの意味

こちらはユーザーさんが特定のページに誘導したい際に使って頂く空ボタン(空リンク)です。
例えば「information」など。
適宜表示テキストをaboutから変えてお使いください。
(例だと about を information に書き換えて、該当リンク先を#に差し替え記載)
不要であれば削除をお願いします。
(上の mobile の直下にあります)

======

> indexにサムネイル

FC2ブログのindex(全記事ページ)は特殊なもので、他ページの変数が一切利用できません。
残念ながら現状ではこのページでサムネイルを取得することはできません。

======

> 人気記事リスト

こちらも現在FC2では実装されていません。
ACR web等、外部プラグインに頼るほかありません。
こちらについては私の方でお手伝いすることはできません。
(ID取得等が必須です)

よろしくお願いします。

2017/01/12 (Thu) 20:42
理系女子の美容オタクママ
No title

Akiraさん

早速丁寧に回答いただきありがとうございます。
お手数かけますが、またいくつか質問させてください。

1.サイドバーの文字の大きさ

サイドバーのタイトルではなく、その下の説明文?の箇所の文字を
もう少し大きくしたいのですが、どこを変更すればいいですか?
簡単なブラグインはfontで変更できたんですが、タグがややこしいプラグインは
変更の仕方がわからないので、全体的に大きく変える設定があれば教えてほしいです。


2.サイドバーのずれ

最初にページを表示した際に、サイドバーの上の方が、カルーセル?に
隠れてしまうのですが、これは直せますか?


3.はてなブックマークの追加

はてなブックマークを記事下の拍手の左側に入れたいのですが、
ネットで調べた「topentry」の間に貼る、というのを試しても出てきません。
何か独自の設定があるのでしょうか。


4.上のツールバー?の表示

上のツールバーのようなバーや、記事下にあるツイッターやフェイスブックへの
共有アイコンが目立ちにくいので、もう少し大きくする方法を教えてください。


5.新着記事の位置

現在、新着記事の位置がフッター?で固定されていますが、
これをサイドバーに表示させることはできますか?


質問は以上です。
お手数おかけしますが、回答お願いいたします。

2017/01/14 (Sat) 00:40
vanillaice (Akira)
Akira
To 理系女子の美容オタクママさん

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

> 1.サイドバーの文字の大きさ

これはサイドメニュー内のプラグイン全て同じ大きさで、という解釈でよろしいでしょうか。
で、<font>というタグは使わない方が良いですね。
現在では既に廃止されています。
(いまだに使えているのは後方互換の原則に則ってブラウザが補完してくれているだけです)
そこはお任せします。
Ctrl+F(Windows)/ Command+F(Mac)キー検索

.side-menu

7箇所ヒットしますが一番最初のものが対象です。
この項目の

font-size: 12px;

赤字部分をご希望のサイズに修正してください。

========

> 2.サイドバーのずれ

こちらは私の環境では確認できませんでしたが、各人のパソコンのスペックや通信環境にもよるかと思います。
スライダーの整形よりもサイドメニュー部の方が早く構築されているのが原因です。
これを解消するにはスライダーを削除するぐらいでしょうか。
スライダーの削除については

注)カルーセル不要の方ここから削除

を目印にガイダンスに従ってください。
また、アドレス入力でのページ表示ではなくリロードでの表示を行いますと、サイドメニューがボトムアンカー(下まで行くと止まる)という特殊な仕様ですので、動作環境に関係なく重なることがあります。
(スクロールすると解消されます)

========

> 3.はてなブックマークの追加

この情報だけでは何をお伝えしたものやら (´・ω・`)
そもそも拍手の横に入れるのは至難の業です。
拍手やfbボタンの位置というのはFC2で予め強制的に決められています。
強引に左側に割り込ませるにはJSコードを組む必要があります。
「topentryの〜」につきましては記事内自体がtopentry内です。

① ソース内のどこに
② どのようなソースコードを(はてなの)書いたのか

をお知らせ頂かないとどうにもなりません。
一口に「はてなボタン」と言っても色んな書き方、色んなタイプがあります。
(はてなコード生成のお手伝いは致しかねます)
「拍手の左側に」という位置にこだわるのならばJS必須で描画が遅くなりますのでおすすめはできません。

========

> 4.上のツールバー?の表示

こちらはアイコンの大きさを変える、という内容だけでお願いします。
ナビゲーション自体の縦幅を大きく変更されますとCSS及びJSの変更など大掛かりになります。
CSSソース末尾に以下を追加

.right-social .fa {
font-size: 20px;
}

赤字部分はお好きな数字で構いませんが、20px以上にはされない方が良いと思います。

=======

> 5.新着記事の位置

検索

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここから削除 -->

から

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここまで削除 -->

に挟まれた内容(上記コメント含む)を

① <!--plugin_first-->の「すぐ上」
② <!--/plugin_first-->の「すぐ下」
③ <!--/plugin_second-->の「すぐ下」

このいずれかの位置へカット&ペーストで移動をお願いします。

=======

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

2017/01/14 (Sat) 01:16
理系女子の美容オタクママ
No title

遅くなりましたが、以前は丁寧な回答ありがとうございました。
また質問させてください。

<div class="ninja_onebutton">
<script type="text/javascript">
//<![CDATA[
(function(d){
if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_b8229fe7ed82d68841d80fa7378b7635)=='undefined'){
document.write("<sc"+"ript type='text\/javascript' src='\/\/omt.shinobi.jp\/b\/b8229fe7ed82d68841d80fa7378b7635'><\/sc"+"ript>");
}else{
window.NINJA_CO_JP_ONETAG_BUTTON_b8229fe7ed82d68841d80fa7378b7635.ONETAGButton_Load();}
})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;"><%topentry_link></span><span style="display:none;" class="ninja_onebutton_hidden"><%topentry_title></span>
</div>

を記事下に追加したいのですが、サイトの説明通りに挿入したらページ全体の一番下に表示されてしまいました。
どこに挿入すれば、各ページの記事下に挿入できますか?
(できれば、現在拍手やツイッターボタンが表示されているあたりに入れたいです)

また、それに伴い現在の拍手ボタン等は削除可能ですか?

拍手ボタンの列と関連記事タイトルの間に結構空白があるので、それを極力狭くしたいのですが、
それはどのようにすればいいか教えてください。

よろしくお願いします。

2017/02/12 (Sun) 02:09
-
管理人のみ閲覧できます

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

2017/04/11 (Tue) 23:55
vanillaice (Akira)
Akira
To Juvenile表示カルーセル表示件数の件 内緒さん

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

> カルーセルスライダーで表示できる画像数を5.6枚に増やせないかと 〜

カルーセルに表示される画像点数は1ページあたりの記事表示件数に依存します。
画像なしの記事の場合はカルーセル対象外です。
例)
1ページあたり記事 10件
・画像あり 6件
・画像なし 4件
= カルーセル 6件表示

参考
http://vanillaice000.blog.fc2.com/blog-entry-220.html#object6

よろしくお願いします。

2017/04/12 (Wed) 19:22
とーしろう
対応ありがとうございます。

言葉足らずでしたm(__)m

<a href="http://vanillaice000.blog.fc2.com/" target="_blank">http://vanillaice000.blog.fc2.com/</a>
↑このakiraさんのトップページみたいに画面いっぱいにカルーセルをひろげて
スクロール枚数じゃなく表示されてる画像数増やしたり
カルーセルのサイズ変更をしたかったんです

またまた説明へたですいません。

2017/04/12 (Wed) 20:46
Akira
To とーしろうさん

そういうことでしたか (´・ω・`)

現在設定中のテンプレートのカルーセルは、ブラウザ幅が拡・縮されてもほぼ一定の大きさを保つようにしてあります。
(600〜650pxに制限)
Juvenileについてはそういった制限を設けていません。
で、表示件数(枚数)を操作するとなると、同時に左右矢印の位置も計算して変更する必要が生じます。
結構緻密な計算が必要ですので、カスタマイズ難易度としては高いと思います。
難易度というより、めんどくさい(笑)
んー。たぶんかなり難しいんじゃないでしょうか (´・ω・`)

現在のテンプレートは次回申請予定ですので、公開されたらDLして頂いて該当部位のソースを移設するのが良いかもしれません(その際のお手伝いはできませんが)
現在のものを変更、となると手順説明もかなり難しいです。ごめんなさいね (*_ _)

2017/04/12 (Wed) 22:45
とーしろう
度々の対応感謝です

今回は断念して
コツコツ勉強します。

ありがとうございました!

2017/04/12 (Wed) 22:58
vanillaice (Akira)
Akira
To とーしろうさん

お役に立てず申し訳ないです。
こちらこそありがとうございます :)

2017/04/13 (Thu) 13:08
-
管理人のみ閲覧できます

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

2017/05/13 (Sat) 11:21
vanillaice (Akira)
Akira
To Juvenileトップページ画像の件 内緒さん

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

> Topページの画像を設定するにはどのようにすれば〜

「トップページの画像」というのは各記事のサムネイル画像のことでしょうか。
それともスライダーの画像のことでしょうか。
スライダーについてはhtmlから削除されているようなので、恐らく前者かと思います。

サムネイル抽出は「本文」に添付した一番最初の画像
(外部直リンク, FC2エディター絵文字 除く)が対象となります。
本文内に画像が無い場合には現状のようなNo imge画像になりますので、以下の記事を参考に。

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

新規実装の「アイキャッチ」そして「No image」
が見出しになっている内容が該当です。
ご質問の意味を取り違えているようでしたらご指摘ください。
よろしくお願いします。

2017/05/13 (Sat) 20:11
-
教えてください

こんばんは。
現在レスポンシブ設定しているのですが、スマホ表示のカスタマイズのことで教えていただけないでしょうか。

全体的にスマホ表示ではスクロールを極力少なく済むようにしたいというのが根底にあり、トップページは極力余白を減らしたので、個別記事ページ表示の際の質問です。

1.ブログタイトル下に表示されているARTICE PAGEという表示を消せますか?ブログタイトルの下がすぐ画像と記事タイトルになるのが理想です。

2.上記消した場合の余白も含め、その下のサムネイル画像(記事タイトル)と上のブログタイトルの間の余白を極力狭めるためにはどうすればいいですか?

3.記事の見出し(h3)の文字の大きさが所々変わってしまっているのですが、何か原因はあるのでしょうか?できれば統一したいです。(私が色々カスタマイズしている中で何か変な記述をスタイルシートにしてしまったのかもしれません・・・)

4.記事下のユーザータグの下と前後記事へのリンクの間の余白を狭めるにはどうすればいいでしょうか?

色々細かくて申し訳ないのですが、教えていただけると大変助かります。
よろしくお願いいたします。

2017/06/04 (Sun) 01:08
しぇいく
忍者おまとめボタンについて

こんにちは。
ヒーローヘッダーに惚れて愛用させていただいています。
今回シェアボタンについて質問したいのですが、はてなブックマークの追加ボタンを設置したいのですが色々試しても忍者おまとめボタンが表示されません。
どの位置にコードを埋め込めば良いでしょうか?
宜しくお願いします。

2018/01/30 (Tue) 13:36
vanillaice (Akira)
Akira
To しぇいくさん

こんにちは。

この手の質問が非常に多くて困っているのですが
「何を」「どこに」「どのように」の最低限の情報はください (´・ω・`)

何を --- プラグイン名称ではなくコードをください。私が忍者まで出向いてアカウントを取るといったことは致しません
どこに --- どの位置に埋め込めば良いか ← 逆にどこに表示させたいのですか?トップページですか?個別記事ですか?具体的な希望の位置はどこなのですか?
どのように --- 実際に行なった作業は何ですか?どこにどんな内容を貼り付けたのですか?

そして「はてなボタンを追加したい」だけなのですか?それとも忍者〜にこだわりがあるのですか?

基本的にFC2ブログ外サービスのプラグイン導入などのお手伝いはお断りしています。
ただテンプレートのJS内容との干渉などが原因になることもありますので確認はしますけれど。
今回は位置を尋ねておられるだけですが情報が少なすぎて何もお答えできません。
お返事待ちにさせてくださいね。よろしくお願いします。

2018/01/30 (Tue) 17:11
しぇいく
To Akiraさん

こんにちは。抜けているところばかりで申し訳ありません。
・「何を」
『<div class="ninja_onebutton">
<script type="text/javascript">
//<![CDATA[
(function(d){
if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_a912edfd4a2e9772d7745d4fbd68c8f5)=='undefined'){
document.write("<sc"+"ript type='text\/javascript' src='//omt.shinobi.jp\/b\/a912edfd4a2e9772d7745d4fbd68c8f5'><\/sc"+"ript>");
}else{
window.NINJA_CO_JP_ONETAG_BUTTON_a912edfd4a2e9772d7745d4fbd68c8f5.ONETAGButton_Load();}
})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;"><%topentry_link></span><span style="display:none;" class="ninja_onebutton_hidden"><%topentry_title></span>
</div>』
忍者おまとめボタンを。
・「どこに」
個別記事下に。
・「どのように」
私が試したのは、忍者ツールズの公式ページに紹介されていたHTML編集内で「entry_footer」の下に上のコードを埋め込む方法ですが、「entry_footer」が見つからず断念
次に同じく公式ページで紹介されていた記事本文をドラッグ&コピーしてページのソースを表示して記事本文の手前にあるコードの下に上のコードを埋め込むという方法でしたが、知識が追い付かずわからないまま終了
「</head>」の上にも埋め込んでみましたが変わりなしでした。

ボタンは、忍者にこだわりはないですが、バランスよくSNSボタンを付けたいです。その中にはてなブックのボタンは必ずいれたいです。

理想ボタンは「はてブ」・「ツイッター」・「フェイスブック」・「Feedly」です。

2018/02/02 (Fri) 11:27
vanillaice (Akira)
Akira
To しぇいくさん

こんにちは ( ゚Д゚)ノ

んまっ。そんないい加減な説明が書いてあるんですか (´・ω・`)
entry_footer
なんてのはクラス名かアイディー名なのでFC2ブログ全テンプレートに入っているとは限りません。
というよりFC2ブログ公式テンプレートのごく一部にしか含まれない内容です。
探してもあるはずのない要素です。
ちょっと説明がひどいね (´・ω・`)

<!--/more-->

でCtrl+F検索すると1箇所ありますので、その直下に貼り付けてください。
表示順序はFC2の仕様で決められていますので、関連記事リストのすぐ下に表示されることになります。
この順序はJSを利用しない限り変更できませんので予めご了承くださいね。

2018/02/02 (Fri) 12:14
しぇいく
To Akiraさん

おはようございます。
朝市で教えてもらったところにコードを入れたら無事表示されました!!
長い間悩んでいたのでとてもうれしいです。
Akiraさんのテンプレートを選んでよかったです。こんな素人のわがままを解決して頂き本当にありがとうございました!!

2018/02/03 (Sat) 08:21
vanillaice (Akira)
Akira
To しぇいくさん(完了のご報告)

お出来になったということで良かったです。
お疲れ様でした :)

2018/02/03 (Sat) 11:35
ナレイ
Akiraさんへ

ナレイと申します。以前SSL化の際、higeさんとお手伝い頂いた者です。
その節は、大変お世話になりました。

今また、非常に困っていることがあり、コメントさせて頂きます。
Akiraさんのテンプレの中で、私は現在Juvenileをお借りしています。
ところが、これが昨日の朝からアクセスカウンターが表示されなくなりました。
カウンターが見えないと非常に不便なので、いろいろやってみました。
クロームをいったんアンインストールして、再度インストールしたり、
カウンター画像を替えてみたり、
どうやっても表示されないんです。
でも、Akiraさんのテンプレの中で、全文表示タイプだとカウンターが表示されます。
要約表示だけ、カウンターが表示されません。

また、IEやEdgeだと問題なく表示されます。

クロームだと表示されません。
昨日一日あれこれいじってみましたが、ダメでした。
困り果てています。

なので、もし何かおわかりになることがあれば、ご教示頂きたく、
コメントさせて頂きました。

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

ナレイ




2020/04/02 (Thu) 05:16
ナレイ
追伸

ブログURLの記載を忘れてしまいました。

https://slowly48.blog.fc2.com/

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

ナレイ

2020/04/02 (Thu) 05:20
ぼっちん
To ナレイさん

横から失礼致します。

レイナさん、はじめまして ^^
私もChromeでレイナさんのブログを拝見しましたら、やはりカウンターが見えていなかったです。
ただ、Chromeのアップデート(バージョン: 80.0.3987.162(Official Build))が来ていましたから、同アップデートしましたら、カウンターも見えるようになりました。
カウンター 314900 でした ^^

Chromeのアップデートを行ってみてはどうでしょうか? ^^

2020/04/02 (Thu) 08:14
ナレイ
ぼっちんさん

ご助言、ありがとうございます。
でも私ってとてもITに疎くて・・・
クロームのアップデートというのはどうやればいいのかわからないんです。
確か・・・・クロームをインストールしたとき、「LLC」と出てた気が。
それが何かの原因のような・・よくわからないのですが。

ありがとうございます。
ちょっと調べてみます!
もう不便で不便で仕方ないけど
Akiraさんのテンプレ、使いたい~~!のです。

ナレイ

2020/04/02 (Thu) 11:14
vanillaice (Akira)
Akira
TO ナレイさん

こんにちは ('0')/
ぼっちんさんからのアドバイスもご覧頂きましたでしょうか。で、本件については「スクロールアンカーを削除する」というのが一番良いと思います。

Chromeのバージョンによってバグが再発したり収まったり繰り返しています。この減少は特定条件下で起こり、ナレイさんの場合は「カウンター」ですね。このJSがスクロールアンカーのそれと足すことのChromeと相性が悪いんです。
なのでアンカー(スクロールで短い方のカラムがページ内に留まる)が失われてしまいますが削除という方法でお願いします。

注)スクロールアンカー不要の方
で検索するとhtml内に該当箇所が出てきますのでガイダンスに従って削除してください。
お手数おかけします。よろしくお願いします。

----- 追記 14:44
このコメントが行き違いになっていたようです。ぼっちんさんのコメントはお読み頂いてたんですね。
Chromeのアップデートは

1. ブラウザ右上にある点が縦に3つ並んだマークをクリック
2. 一番下にある「ヘルプ」にマウスオーバー
3. 「Google Chromeについて」をクリック

すると自動でアップデートが始まります。再起動を求められますので何かの作業中(記事を書いている最中など)に行わないよう注意してください。作業内容は保存されますが万一のためです。

2020/04/02 (Thu) 11:15
vanillaice (Akira)
Akira
To ぼっちんさん

ぼっちんさん、こんにちは ('0')/
いつもご協力ありがとうございます :)

2020/04/02 (Thu) 11:16
ナレイ
Akiraさん

返信、ありがとうございます。

スクロールアンカーの削除 というのは、
プロフィール欄とか、カテゴリとかの右側が
消えてしまう、ということなのでしょうか?
つまり1カラムになってしまうことなのですか?
それは・・・・ちょっと厳しいですね・・・
それともそういう意味じゃないのかな?

それから htm とは何でしょう?
何にもわからなくてすみません。
調べます。

それとは別に、私はクロームを2度ほどアンインストールして、
再インストールしています。
きちんとインストールされていない、ということはないでしょうか?
度々申し訳ありませんが、よろしくお願い致します。

2020/04/02 (Thu) 18:44
ナレイ
クロームのアップデート

先ず、私にもできそうなクロームのアップデートをやってみました。
すると以下のような表示になってしまい。アップデートできませんでした。

「更新の確認中にエラーが発生しました:
更新チェックを起動できませんでした(エラー コード 3: 0x80004002 -- system level)。
詳細
バージョン: 80.0.3987.162(Official Build) (64 ビット)

どうも・・・私がやったクロームのアンインストール、
再度インストールをしてしまったこと、つまり正確にアンインストール、インストール
をしてしまったことも、影響している気がしてなりません。

あまり何度もアンインストール、インストールをするのは良くない気もしますが、
以前、にほんブログ村のバナーが一切表示されなかったときには
アンインストール、インストールを行ったところ、表示されるようになったので。

先ずはこれを正確に行って、その次にAkiraさんにお教え頂いた
「スクロールアンカーの削除」というのをやってみようと思います。
・・・・私にできる作業かどうかはわかりませんが。

Akiraさんの今のテンプレ、すごく気に入っているんです。
全文表示であれば、カウンターは表示されますが、
今のテンプレを使いたい・・・・!ので。


2020/04/02 (Thu) 20:42
ナレイ
出た出た出た出ました~~!!!!

Akiraさーん!

HTML編集????・・・をいじる・・・
私には・・・無理なんじゃ・・・と思いつつ、編集画面を眺めていたところ、
スクロールアンカー の文字を見つけて、びくびくしながら
削除してみた・ら、
カウンターが表示されましたーーー!!!

ありがとうございます!!!!!
ずうっと困り果てていたので、助かりました!
うれしい~~!

本当に本当に

ありがとうございました!!!!!!

2020/04/02 (Thu) 21:25
vanillaice (Akira)
Akira
To ナレイさん(完了のご報告)

こんばんは ('0')/
解決できたということで安心しました。以下は今後に向けての内容です。

-----
【0x80004002 エラーについて】
windowsをご利用だと仮定して、このエラーコードの場合は単純にChromeのデータ破損ということもあるんですが、windowsのシステム側のデータ破損であることも多いです。
なのでできればこの機会にOSのクリーニングをおすすめします。クリーニングソフトは有名どころだと
CCcleaner
https://www.ccleaner.com/
とか色々あります。日本語で操作できるソフトを知らないのでご紹介できずごめんなさい。

クリーニングは別として(でもやったほうが良いと思いますが)、Chromeを起動するときにアイコンダブルクリックではなくアイコン上で右クリック「管理者として実行」で行ってからアップデートすると上手くいくこともあります。

ブラウザはときどき(年に1回とか)クリーンインストール(一旦アンインストールしてから再インストール)を行ったほうが良いので、インストールを「繰り返したから」何か問題が生じる、ということは起こりにくいですが、インストール時にデータが破損することは回数に関わらずあります。

-----
【テンプレートの編集について】
テンプレート編集の必要が生じたときはまず「パニックに陥らないこと」「指南をしっかり読み、そのとおりに行う」ことです。
そして「記事内容をよく読む」ことも大事です。
例えば今回のような作業ではCtrlキーとFキーを押すことで検索窓が出てきて、そこに検索ワードを入れれば嫌でも該当箇所が出てきます。長大なソースコードを目で追って探す必要はありません。
文字列検索の仕方は記事内に記載してあります。

そして編集する前にかならず「複製」を取ることも大事です。これさえ行っておけば何かミスをしても元の状態にすぐ戻すことができます。

これらを覚えておけば応用が効きますので対処がしやすくなります。
お疲れ様でした :)

2020/04/03 (Fri) 01:58
ナレイ
ありがとうございます!

そうですね。
私はwin.10です。なのでクリーニングできたらしたほうが良いと思います。
或いはきちんとわかってる人と一緒にアンインストール、インストールを行うのも
良いかなと思っています。

>テンプレート編集の必要が生じたときはまず「パニックに陥らないこと」
>「指南をしっかり読み、そのとおりに行う」ことです。
>そして「記事内容をよく読む」ことも大事です。
(複製、これは以前higeさんに言われたことを思い出しました)

はい!
やっぱり苦手意識が先に働いてしまって
凄いパニックに陥ります・・・
「落ち着いて、落ち着いて」と自分に言い聞かせているのですが
もう~困ったヤツです。

でもお陰様でとりあえず安心しました。

Akiraさん、
ぼっちんさん
本当にありがとうございました。

ナレイ

2020/04/03 (Fri) 03:10
vanillaice (Akira)
Akira
To ナレイさん

こんにちは ('0')/
こちらこそお手数おかけしました。また何かありましたらお尋ねくださいね :)

2020/04/03 (Fri) 17:24

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

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

テンプレート