attention admin about comments trackbacks you may also like

Little-thing - FC2ブログテンプレート

2016年07月16日
テンプレート
47
HTML5 CSS3 RWD
Little-thingテンプレート

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

最終更新 2019.11.6
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
名称 Little-thing
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大1060px
サイド --- 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.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-->

続きまして <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> から <h3 class="another-title">Leave a comment</h3> までを 削除

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

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

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

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

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

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

更新履歴 2017.3.14

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

  • iOS11.2.6で検索モーダルが開かない件
  • Font Awesomeをバージョン4(CSS)からバージョン5(JS)へアップグレード
  • 画像遅延読み込みの導入(デフォルト設定: グリッドサムネイル, 管理人コメントプロフィールアイコン)
  • 新変数導入による管理人コメントプロフィールアイコンのデフォルト表示
  • floatレイアウトからflexレイアウトへ変更
  • フォントサイズ指定にrem単位を導入
  • リセットCSS及び一部CSS内容を圧縮
  • 構造化マークアップを導入(個別記事のみ)

iPhoneに関連する不具合修正も含まれます ので是非アップデート(再DL)をお願いします。

更新履歴 2017.1.25

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

更新履歴 2017.1.13

・RSS新着サムネイルをFC2独自変数での表示に切り替えました 関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

更新履歴 2016.10.6

・ Microsoft10 の IE11及びMicrosoft Edgeのバグ用ハックJSを削除
FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- ページ表示の動作が軽快になりました
・ Microsoft Edgeのリンクホバー継承バグをハック
・ ベンダープレフィックスの整理
・ その他微調整

「Nostalgia」「Little-thing」「Mocha」メンテナンスのお知らせ

更新履歴 2016.9.9

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

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

南の庭が樹海のようになっているあきらでございます(号泣)
草刈りとかホント無理 o(`ω´*)o
(田舎ゆえ土地だけは広い)

りとる しんぐ
承認されました。ありがとうございます。

サンプル

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

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

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

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

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

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

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

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

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

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

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 header image

注)ヘッダー画像

で検索し、URLを差し替えてください。画像中ほどから下にかけて徐々に自動で透過されます

カスタマイズサンプル

プラグインについて

Important thing to be careful when categorizing your plugins

プラグイン1と2は右サイドメニューに、プラグイン3はフッター上サイドメニューに それぞれ表示されます。
右サイドメニューは スマートフォンではドロワーに切り替わりますので
折りたたまれたくないものはプラグイン3への登録をお願いします。

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

How to reverse the direction of rows

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

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

No image画像変更

How to change alternative image

記事のしかるべき箇所に画像が存在しない場合に表示される No image画像を変更する場合以下の画像アドレスを書き換えてください。

https://blog-imgs-93.fc2.com/v/a/n/vanillaice000/littlethingnoimage2.jpg
デフォルト画像 (縮尺掲載 1000✕667 36KB public domain)

ドミナントカラー

Dominant colors

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

rgb(51,51,51) 基本文字色
rgb(210,210,210) 右サイドメニューボーダー色, トップページ要約記事ボーダー色
rgb(45,48,62) フッター上プラグイン3背景色, ナビゲーションホバー時背景色, ページ送りprev/ next背景色 など
rgb(240,163,141) ドロワーハンバーガーボタンの色(スマホのみ), ページ送りマウスホバー時背景色 など

削除可能な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はサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(47)

There are no comments yet.

きろろ

2016/07/22 (Fri) 19:47

お借りしました

こんばんは。
お借りして、カスタマイズ完了しました。

毎回、ほんと勉強になります。

ちなみにSNSボタンの表示はですね。
必要がなければHTMLから削除したほうがよろしいのでしょうか?

今まで普通につけたままだったんですがw

Akira

2016/07/22 (Fri) 20:46

To きろろさん

利用しないのであれば削除した方が良いと思います。
私はテンプレの状態を確認して頂きたいので表示させてますけれども(笑)
空リンクがあると閲覧する側の方々が混乱しますので、空ならば無い方が良いと思います。
スマホ版非表示も同じく、mobileリンクは外した方が良いですね。

きろろ

2016/07/23 (Sat) 01:19

SNSは利用していないので、
削除したほうがよいのなら、削除します!(^^)!
MOBILEリンクも外すんですね。了解いたしました<(_ _)>

Akira

2016/07/23 (Sat) 14:18

To きろろさん

モバイルリンクは
「スマホ版を非表示にしている」というのが前提ですけれどもね。
よろしくお願いします

MARBLEGUM

2016/09/04 (Sun) 00:06

ご質問させてください

はじめまして。

大変素晴らしいテンプレート
お借りさせていただきました!

少しカスタマイズをしたいのですが
ブログタイトルの下か上に
ロゴ(画像)を表示させたいのですが
どの部分に書き込んだらよろしいのでしょうか?

<h1 id="blog-title">
<a href="<%url>"><%blog_name></a>
</h1>

の下に<h2>で書き込んだのですがセンターに表示できないのと
homeやindexで画面が切り替わった際に、消えてしまいます。

専門的なことが全くわかりませんので
ご迷惑でなければご教授いただければ幸いです。

よろしくお願いします。

Akira

2016/09/04 (Sun) 14:35

To MARBLEGUMさん

ありがとうございます

「ブログタイトル上か下にロゴ」

ということですが
・ブログ名を表す(あるいはブログを表す)類のロゴでしょうか
・<h2>を利用することに何か意味はありますでしょうか

まず<h2>の利用についてですが、もしこれが確定であるのならば
「ブログタイトルの上」にはしない方が良いと思います。
大見出しの<h1>よりもhtml順序が「上(先に書いてある)」というのはあまり良くないですー。
Googleの検索ロボットは「別に大丈夫だよ。」と言っていますが、
あくまでもそれは「Googleの技術でhtmlのミスは判断できるから問題ない。」
と言っているだけで、html構文上正しい記述である、という意味ではありません。

ロゴがブログタイトルを示すものなのであれば、それはブログタイトルのテキストと同格ですから
<h1>の定義になると思います。
ただ<h1>を並べてしまうと、こちらは構文上のミスには当たりませんが、
「大見出し(表題)が複数並んでいる意図はなんぞ?」
ということになってしまいます。
ロゴを拝見しておりませんのではっきり判断できませんが、
私なら<h2>は使わずに<div>を使いたいところです。

このあたりをお考え併せの上、方針をお決めくださいね。
その上で<hx>の利用云々・貼り付け位置についてはお任せします。

==========

具体的手順

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/The%20other%20way%20roundth__zpsyoqn1unm.jpg

↑ こんな感じでよろしいでしょうか。
大げさに、というかわかりやすく大きい画像を入れてあります。

Ctrl+Fキー検索 (htmlソース内にあります)
ブログ名の「上」に入れる場合

<h1 id="blog-title">

ブログ名の「下」に入れる場合

<p id="site-description">

それぞれこのすぐ「上」に以下を追加

<div id="site-logo">
<img src="画像アドレス" alt="代替テキスト">
</div>



<h2>をお使いになるのであれば

<h2 id="site-logo">
省略
</h2>

に変更してください。
続きまして CSSソース末尾に以下を追加

#site-logo {
text-align: center;
}

これで中央寄せになります。
画像のサイズを指定する場合にはさらに以下を追加

#site-logo img {
width: 横サイズpx;
max-width: 100%;
}


ブラウザ横幅が縮小されたり、デバイス変更によって画面が縮小された際には
指定した横幅指定を無視して 画面幅に自動縮尺で収まるようにしてあります。
(でないとスマホなどでレイアウトが崩れます)

ロゴ画像については指定サイズの倍の横幅で作成されると良いと思います。
こちらは高解像度ディスプレイ対策です。
(元画像は表示サイズの倍で準備しないとスマホで画像がぼやけます)
横を400pxで指定するのならば、元画像の横幅は800px
という意味です。

以上です。
よろしくお願いします ( ゚Д゚)ノ

MARBLEGUM

2016/09/04 (Sun) 18:53

お礼

非常にわかりやすく丁寧にご説明いただきありがとうございました!

おかげ様で解決いたしました!!

より良いページを作りたいと思います。

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

Akira

2016/09/05 (Mon) 13:38

To MARBLEGUMさん

できましたか。
良かったですー。
作業お疲れ様でした

mika

2016/09/30 (Fri) 04:03

初めまして

本当に夜分遅くにすみません。(早朝?汗)
こちらのテンプレートLittle-thingを使わせて頂いています。
いつも素敵なテンプレートをありがとうございます(*´꒳`*)
少しややこしい話なのですがお知恵を拝借できませんでしょうか?
実はさっきまで背景画像(ヘッダー画像?)の変更と文字の色を変えるカスタマイズをしていましたところ、急にテンプレートが崩れてしまいました汗
崩れているというレベルではなくCSSが無効(?)になっているようなんです。
何度もリロードしてキャッシュとクッキーの履歴も削除して、パソコンの再起動もしましたが改善されません・・・泣
パソコンはWindows8、ブロウザーはGoogle Chromeです。
そこで気づいたのですが、Little-thingテンプレートなのにCSSフォルダ(?)ファイル(?)の上の方にあるwebsite skin nameの名前がAll-about-usになっているんです。
右クリックのソースを確認を開いたら.CSSをクリックするのですよね?
そうしたらそうなってました。
でもテンプレート編集のCSS編集はLittle-thingになっているんです。
これはFC2の不具合でしょうか?
私が何かをしてしまったせいでしょうか?
いままで頑張りましたが私ではどうにもできなくて恥ずかしながらお願いに来ました。
このテンプレートをどうしても使いたいです泣
よろしくお願いします(>人<;)

-

2016/09/30 (Fri) 04:11

管理人のみ閲覧できます

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

Akira

2016/09/30 (Fri) 10:29

To mikaさん

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

> htmlとCSSが噛み合わない件

まず、ブログアドレス掲載のご協力ありがとうございます。
で、スクショも今拝見しました。
これなんですけどもね (´・ω・`)
非常にレアケースだと思うのですが、私も二度ほど経験があります。
ブラウザの悪さかFC2サーバーの不調かはわからないんだけども ^^;
パソコンのクリーニング等既にされているということなので、たぶん私が遭遇したのと同じじゃないかと。

対処
一旦別のテンプレートに変更後、Little-thingに再設定

同じであるならばこれだけで直ると思います。
ダメでしたらその旨お伝えくださいね。
FC2はたまにCSSがごっそり抜け落ちたりもしますね。
これもレアだと思いますけれど、CSSファイル書き換わりは更にレアな気がする(笑)
申請テンプレがなかなか承認されないところを見ると、もしかしたら何かしらシステムの調整をしているのかもしれませんね。
私がこの件に遭遇した時もそうでした。
(審査が遅い・ビミョーなシステム変更や不具合)

一度お試しくださいませ。

mika

2016/10/01 (Sat) 04:55

To Akiraさん

なおりました!。゚(゚´ω`゚)゚。
それから再DLすればよかったってこと、コメントしてから気がつきました汗
教えて頂いたとおりに再設定しただけで元に戻りました!よかった。゚(゚´ω`゚)゚。
こんなくだらないことに時間を割いて頂き感謝します
本当にありがとうございました!

追伸、CSSがなくなる現象は私も数回見たことがあります笑

Akira

2016/10/01 (Sat) 10:56

To mikaさん

それは良かったです (o'д`o)ゝ
良かったって表現で合ってるかわかりませんが(笑)
お疲れ様でした

瑠奈

2016/10/13 (Thu) 22:30

レイアウト変更

初めまして。
カスタマイズの事で質問があります。

コメント欄の下に、ブログトップページへのボタンと一つ前の記事へのリンクがありますが、これをコメント欄の上に配置する事は可能でしょうか?
そして、リンクの文字を大きくしたいので、どこをどの様にすれば出来るのか、可能であれば教えて頂きたいです。よろしくお願い致します。

Akira

2016/10/14 (Fri) 00:27

To 瑠奈さん

こんばんは ( ゚Д゚)ノ

> 時系列ページ送りを移動させたい件

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

<!-- 個別記事用ページナビ -->
省略
<!-- 個別記事用ページナビ -->


上記をカットし

<!-- コメント関連 -->

このすぐ「上」にペースト。
コメントアウト(カスタマイズ用ガイダンス)は最新バージョンにしか付いていないかもしれません(うろ覚え)が、それに準ずるコメントが付いている… と思います。
わかりにくければその旨お伝えください。

======

> リンクの文字を大きくしたい件

これは「ページ送りの」という解釈でよろしいでしょうか。
CSSソース末尾に以下の内容を追加。

.prev-a,
.next-a {
font-size: 数値px;
}

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

瑠奈

2016/10/14 (Fri) 12:44

出来ました!ありがとうございます!
これで理想のスタイルになったので、大満足です。
ハイクオリティで素敵なテンプレートをありがとうございます。

Akira

2016/10/14 (Fri) 14:31

To 瑠奈さん

期待通りになりましたなら幸いですー。
こちらこそありがとうございます。
作業お疲れ様でした

-

2016/10/15 (Sat) 21:54

管理人のみ閲覧できます

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

Akira

2016/10/15 (Sat) 22:57

To ランキングバナーの件 内緒さん②

> 応援してくださいというのも変な文字

現在プラグインのフリースペースの「タイトル」として「応援してください」を入れているわけですので、サイドメニュープラグインの各タイトルと同じ表記になります。
ランキングバナーをひとつのフリーエリアにまとめるのであれば、タイトルを
「ランキング」にされるなど工夫してください。

========

> バナーを記事作成時に毎回記載するのではなく、テンプレートに組み込みたい

その前に準備されている画像ですが、一つ目はブログ村がデフォルトで用意している国際規格サイズ(88×31)の画像。
二つ目については自作だと思われますが、サイズが240×151。
この2つのサイズ違いのバナーをどういった形で並べたいのかは私ではわかりません。
> 文中最後らへんに、並べて二つとも表示
とのことですが、上下中央に合わせて並べるのか、上辺合わせにするのか。
左右位置はセンタリングにするのか、左に寄せるのか 等々。
漠然と「並べたい」だけではサイズが違う以上イメージができません (´・ω・`)

とりあえず、2つのコードをそれぞれ併せて以下の通りにしてください。

<div class="ranking">
<div>一つ目バナー内容</div>
<div>二つ目バナー内容</div>
</div>

バナー画像を上辺合わせにされるのであれば

<div class="ranking">
<div style="display: inline-block; vertical-align: top; padding: 5px;">一つ目バナー内容</div>
<div style="display: inline-block; vertical-align: top; padding: 5px;">二つ目バナー内容</div>
</div>

中央ならば赤字の top を middle に変更。
下辺合わせならば top を bottom に変更。

以上が上下の位置合わせです。
次にバナー全体の左右位置を合わせますが
中央ならば最初の<div class="ranking">を以下の通り。

<div class="ranking" style="text-align: center;">

右寄せならば center を right に変更。

========

> 更新の前にプレビューを押しても何のランキング表示のボタンも出て来ない

更新しなければいつまで経っても出てきません。
FC2ではトップページしかプレビューできませんので、個別記事にあるランキングバナーの状態を確認しようと思えば更新を行うしかありません。
事前にテンプレートの複製をおとりになられまして、思い切って更新をしてください。

========

<!--/more> の直下に貼り付けで間違いではありませんが、それでは記事下には入りません。
FC2の仕様上、必ず
記事 → SNSシェアボタン(テンプレではなくブログ個人設定のもの) → 関連記事リスト → スポンサーサイト表示(非表示可) → ランキングバナー
という順序になります。
それがお困りということであれば、記事を書かれる際に逐一記載されるか あるいは以下の記事にある内容をお試しください。

http://vanillaice000.blog.fc2.com/blog-entry-220.html#object18

内緒さんの場合は

$('<div style="text-align:center; margin: 30px auto;">バナー関連ソースコード</div>')

赤字部分を上記で記した内容にそっくり差し替えてください。
よろしくお願いします。

-------- 追記

上のコメント今拝見しました。
記事違いコメントの件はどうぞお気になさらず(笑)
アップデートもちゃんとできてます。
お手間取らせてごめんなさいね。

-

2016/10/15 (Sat) 23:56

管理人のみ閲覧できます

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

Akira

2016/10/16 (Sun) 00:11

To ランキングバナーの件 内緒さん③

ここのコメント欄からひな形をコピーし適宜内容を差し替えるだけですので、そんなに難しく考える必要はないですー。
バナー内容はお伝え頂いたものをそのまま放り込むだけですし。
何かものすごく難しい… と思った時は手順が違っているのかもしれません(笑)

頑張ってくださいね (●'ω')ノ

-

2016/10/22 (Sat) 18:42

管理人のみ閲覧できます

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

Akira

2016/10/22 (Sat) 20:13

To Little-thingランキングバナーの件 内緒さん

ちょっと今時間があまりとれませんので細切れのお返事になることをお許しくださいね。
ちょこちょこ覗いて頂けると助かります ^^;

● バナー画像のサイズ

まずリンクバナーの作成ですが、
・縦横を同じサイズにすること
・ブログランキングのバナーサイズを画像のどこに入れるか、その位置を合わせること
この2点は基本だと思います。
現状ですと
「猫ブログ」のサイズは240×203, バナー位置は左右上下ほぼ中央
「男前インテリア」のサイズは240×151, バナー位置は上下中央・左右は左寄せ
見た目の統一感がないのは位置合わせとサイズをバラバラに作成しているからです。
この件については内緒さんが作り直す以外に方法はありませんので、再製作されるのであれば上記2点を気にかけながらされると良いと思います。
そしてさらに、『元サイズ(原寸)は掲載サイズの倍』を意識すると良いですね。
スマートフォンなどは高解像度ですので、例えば横200px掲載の画像をぼやけずにキレイに見せたいと思えば実寸は400px必要です。
300pxのものを200pxに『縮尺掲載する』という意味です。
せっかく作ってもぼやけてしまっては勿体ないですよね。
作成し直すのならばなおさら。
尺が小さいことによるぼやけはスマホユーザーから見ると結構気になるものです(笑)

● 記事掲載画像のサイズ

こちらも同じです。
『実寸は大きめにしておく』ことをおすすめします。
私は全ての画像を長辺1000pxで揃えています。
そして画像の容量削減は必ず行います。

参考ページ
http://vanillaice000.blog.fc2.com/blog-entry-376.html

内緒さんは画像をデコってますよね。
恐らくスマホアプリか何かでしょうか。
あるいはパソコンからwebサイトを通じて行っているかもしれません。
画像加工サイトというのは大抵の場合、加工済みの画像が勝手に縮小されてしまいます。
例えば元画像1000×1000のものを加工してDLしたら600×600になっていた、といった具合。
そのあたりもよくお調べになられた方が良いと思います。

で、画像掲載のコツなんですけども、
・実寸は全画像なるべく揃えておくこと
掲載時にサイズの指定を行うこと
・掲載時に位置合わせをしっかり行うこと
この3点。
最後の「位置合わせ」については現状でもきちんとされています。
ソース内容から内緒さんが「新投稿画面」をご利用だということがわかります。
新投稿画面は旧投稿画面と違い、要素(画像など)の位置合わせが容易になってます。
が、その代わりにサイズ指定が難しくなってるんですね (´・ω・`)
画像を貼り付けると元画像がそのままペタリと出てきてしまいますでしょう?
だから画像貼り付けの際のソースコードが出てこないですよね。
ソースが目で確認できる状態にあると、画像のサイズ変更というのはとっても容易なんです。
ですがソースが隠れていると難しいというか、できない(笑)
内緒さんがおっしゃる

> ブログの記事内に写真を差し込む際も、何もかもが統一させなければ、全然きれいにそろわない

この点はですね、本来は記事を書かれる際のソース内容でどうにでもなるんです。
例えば
画像A --- 横800px
画像B --- 横600px
画像C --- 横300px
これを
画像A, B, Cを横300pxで掲載する
というのは簡単なことです。
でも内緒さんは新投稿画面をご利用ですので、その簡単なことがとっても難しくなってます。
サイズ変更の仕方がわからないが故に、元サイズ(実寸)依存の掲載になっている = 画像の実寸を全部揃えなきゃ… と思っている
ってことですね (´・ω・`)

私のように画像のサイズを極力合わせるのが当たり前、というのが身についてる方は稀ですし、画像加工をされる方はなおさらです。
ですから新投稿画面からでもサイズ調整の仕方を覚えるのが一番だと思います。

一旦投稿します。

Akira

2016/10/22 (Sat) 20:23

To Little-thingランキングバナーの件 内緒さん②

画像掲載サイズの合わせ方については後ほど記事にしますので少しお時間ください。

● 拍手ボタンの前にランキングを入れられるように〜

こちら、内緒さんが純粋に「初心者である」という仮定でお話をすすめますね。
なので失礼があったらごめんなさい。
そのぐらい知っとるわ o(`ω´*)o とかあるかもしれません(笑)

まず、この作業というのはJS(じぇいえす = ジャヴァスクリプト)という言語を用いて行います。

html = ページの構造を構成する言語
CSS = ページの見た目を装飾する言語
JS = ページのなんらかの要素に特定の動きを与えるための言語

FC2の「テンプレート編集」の画面には
上段にhtmlソース
下段にCSSソース
と分かれていますが、JS専用の場所はありません。
JSはhtmlソース内に含まれています。

JSがhtmlではなく「JSである」ことを宣言するためには
スクリプトタグ
というのが必要です。

<script>
内容
</script>

これがそうなんですが、それが記されない限り、ソース内容がJSであるという解釈がなされません。
内緒さんがお伝えくださったまんまの内容をhtmlソース内に書いただけなのであれば、このタグが欠損していますのでいつまでたっても動作しません。
そして

function

というのも必須です。
これが「今から動かしまーす」という宣言ですので、これも無ければ動いてくれません。
必ず

<script>
$(function() {
ここに何かしらやりたいこと
</script>

この形式になっていなければいけません。
それから肝心な「何をしたいか」の内容が書かれていません。
それを担うのが

.insertBefore('.fc2_footer');

ですが、この内容も欠損しています。
もう一度参考ページのコード内容をご覧くださいね。

http://vanillaice000.blog.fc2.com/blog-entry-220.html#object18

一旦投稿。
頂いた内容が実行できるか確認してからまた追記します。

Akira

2016/10/22 (Sat) 20:43

To Little-thingランキングバナーの件 内緒さん③

もう一度念のため説明。

<script>
$(function() {
$('<div style="text-align:center; margin: 30px auto;">バナー関連ソースコード</div>').insertBefore('.fc2_footer');
});
</script>

これを </body> の直前へ記載します。
バナー関連コード
の部分に内緒さん専用のバナー関連htmlソース内容を入れるわけです。
で、結果としてそのhtml部分に若干の間違いはあったのですが、正しく修正するとこうなります ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2016-10-22%2020.32.57th__zpsde60qyhu.jpg

拍手やSNSボタンよりも「前」
そしてバナー同士は横並びの中央合わせ

これがご希望に沿う形なのであればそのままお伝えすることが可能ですけれど。
内緒でご投稿頂いている以上、ここに記載して良いものかどうか (´・ω・`)
該当部分ご自分で置き換えてくださいね。
これで確実にできるはずなので、できない場合には何かしらミスったと思ってください(笑)

<script>
$(function() {
$('<div class="ranking" style="text-align:center; margin: 30px auto;"><div style="display: inline-block; vertical-align:top; padding: 5px;"><a href="ブログ村アドレス" target="_blank"><img src="ブログ村バナー画像アドレス" width="auto" height="15" alt="ブログランキング・にほんブログ村へ"></a><br><a href="ブログ村アドレス" target="_blank" >にほんブログ村</a></div><div style="display: inline-block; vertical-align:top; padding: 5px;"><a href="人気ブログランキングアドレス" title="人気ブログランキングへ" target="_blank"><img src="人気ブログランキングバナー画像アドレス" width="auto" height="15" alt="人気ブログランキングへ"></a><br><a href="人気ブログランキングアドレス" target="_blank">人気ブログランキングへ</a></div></div>').insertBefore('.fc2_footer');
});
</script>

とりあえず以上です。
記事内での画像サイズの指定の仕方はのちほど記事として。

-

2016/10/22 (Sat) 23:15

管理人のみ閲覧できます

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

Akira

2016/10/22 (Sat) 23:34

To ランキングの件 内緒さん

いえいえもう、レベル的なことを言えばピンキリなので。
臆すること無くご質問頂くのが一番です。
そもそもブログやるのにそんな知識など持ち合わせなくとも良いですし。
良く知ってる人が偉いとかそういったことも全然無いですしね (´・ω・`)
ただツール的なものを使うなら知っておいた方がちょっと得、ぐらいで良いんじゃないでしょうかね。
自分のストレスが減らせる、という意味で(笑)

JSコードの注意点としては、見づらくとも「改行を入れない」ことです。
雛形の通り、必ず横一列で書いてください。
雛形をコピーしたら、赤字部分以外は決して触らないことです。

どうにも躓くようでしたら、ソースを記載した状態でお声かけください。
私の方でチェックします。
実物がどうなっているかわからないことには指摘もできませんので、必ず「記載した状態」を見せてくださいね。
(htmlソースの</body>直前に記載し、「更新」した状態 という意味です)
よろしくお願いします。

-

2016/10/31 (Mon) 18:10

管理人のみ閲覧できます

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

Akira

2016/10/31 (Mon) 21:24

To Little-thingランキングバナーの件 内緒さん

お出来になりましたか。
良かったです
ご報告ありがとうございます

Akira

2017/10/22 (Sun) 10:43

To marukomuさん(移動先)

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

> グーグルクロームとIE&ファイアーフォックスではブログ一覧の題名の文字の形が変わりますよね〜

ごめんなさい。「ブログ一覧」というのがちょっとわからないのですが、全記事一覧(Index)のことでしょうか。
それともトップページのことでしょうか。
いずれにしても題名文字(記事タイトル?)のフォントが変更になる指定はしていません。
Little-thingの最優先日本語フォントは「游ゴシック体」、下位指定が「メイリオ」ですので、marukomuさんのOSがWindows8.1以下であればメイリオが表示されることになります。

どこの部位を指しているのかが私の方で不明ですので、恐れ入りますがスクリーンショットをお見せ頂けるようなら助かります。
(各ブラウザの比較だとなお助かります)
また、OSのバージョンも合わせてお知らせください。
よろしくお願いします。

marukomu

2017/10/22 (Sun) 10:46

移動しました。

ご質問させていただき、こちらに移動いたしました。宜しくお願いします。

marukomu

2017/10/22 (Sun) 10:53

そうですね

ご指摘ありがとうございます。自分のブログはウィンドウズ7で書いていて、
スクリーンショットを取って比較しますね。
(グーグルクローム)
https://blog-imgs-116.fc2.com/g/a/m/gamecolumn/WS000614_20171022105009302.jpg
(IE&ファイアーフォックス)
https://blog-imgs-116.fc2.com/g/a/m/gamecolumn/WS000615_201710221050119c7.jpg

違いはわずかなんですけど、クローム側にあわせたいと思いました。宜しくお願いします。

Akira

2017/10/22 (Sun) 11:14

To marukomuさん

これ同じフォントですよ (´・ω・`)
メイリオです。
Firefoxは基本的に他のブラウザよりも文字が太いです(高解像度ディスプレイでない場合)
これはもう根本的にどうにもできないというか。

Macではアンチエイリアスが使えますのでこういったことはよほど起こらないのですが、Windowsはアレでソレですねぇ (´・ω・`)
敢えてできることとなると

/* 注)記事タイトル文字関連(トップページ・個別記事共通) */

で検索されますと
.entry-titleへの指定に
font-weight: bolder;
というのがありますので、ここをbolder から bold に変更してみても良いかもしれません。
ただそれやっちゃうとChromeが太くなりますので結局同じかもしれません。
ちなみに私のPCは高解像度ディスプレイなんですが、ChromeとFirefoxの見た目(Windows10)はほとんど変わりません。参考までに。

marukomu

2017/10/22 (Sun) 11:20

そうですか・・・

あらら、同じだったんですね。変更できないのであれば、致し方ないですね・・・
見ていただきありがとうございました。
後、ちょっとしたご要望なんですが、スマートフォン版のテンプレートを
作る予定とかはないんでしょうか?作られるであれば是非お借りしたいと
思っています。ご質問になりますが宜しくお願いします。

Akira

2017/10/22 (Sun) 11:36

To marukomuさん

レスポンシブテンプレートを作ってるわけですからスマホ版を作る意義がありません (´・ω・`)
Little-thingもそのままスマホにも適用できます。
なので製作予定はありません

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

あとちなみにMacでの見え方を掲載しておきますね。
表示フォントは游ゴシック体ですが、Macでもやはりビミョーに幅などが違いますので全く同じにはなりません。

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/9w8urd9wth.jpg

上がChrome、下がFirefoxです。

marukomu

2017/10/22 (Sun) 11:49

ありがとうございます。

レスポンシブテンプレートなんですね。スマホから見た場合でも対応されていると
いう事で、(自分、実は節約のため、頑なにガラケーなのでよくわかっていなんですよね)
見え方もしっかりと対応されているんですね。後比較ショットありがとうございます。
変化はほぼないですね。OSやブラウザで結構代わるものなんですね。
質問に付き合っていただきありがとうございます。

Akira

2017/10/22 (Sun) 12:04

To marukomuさん

ご理解をありがとうございます。
スマホでの見え方確認はChromeの要素検証でできますよ。
ブラウザ幅を狭めていくだけでも確認できます。
画面サイズに応じて調整される様子がわかると思います。

こちらこそありがとうございます (o'ω')ノ

marukomu

2019/11/03 (Sun) 16:16

グーグルアアドセンスにて・・・

お世話になっています。先ほど、Googleアドセンスが何やらアップデートしたらしく、PC版で閲覧した際、自動広告をONにしていると記事の間にもアドセンスが入るようになりました。その弊害?かどうかはわかりませんが、グーグルクロームなど大抵のブラウザでは問題なく映りますが、ファイアーフォックスはバグってしまいます。(上部に大きな余白ができる)Googleにも問い合わせてみたんですが、閲覧したエキスパートの人は問題なく映っているといっていますが・・・その辺は使うPCによってまちまちなのかもしれません。自分のPCはマウスコンピュータのウィンドウズ10で昨年購入したものです。デスクトップPCで液晶にはアクオスを使っています。何か見落としている点や可能性があればご指摘してくださると助かります。よろしく尾根以外します。

Akira

2019/11/03 (Sun) 16:37
vanillaice (Akira)

To marukomuさん

こんにちは。

自動広告は好き勝手な位置に挿入されますので、レイアウトの都合は考えてくれません。
ひどいものだとナビゲーションのように高さの狭いところにまで入ることがあります。

テンプレートやFC2ブログという小さな括りではなく様々なサイトで同じような報告が行われていますので参考にされると良いと思います。
参考記事: AdSense自動広告設定で表示が崩れるときのCSSカスタマイズ/ はるなぴログ様
https://www.halu7.com/entry/autoad-css-setting

参考記事: 自動広告からユニット広告に変えたらメリットしかなかった【Gooogle Adsense】自動広告のデメリットを紹介/ abstract-ous様
https://abstract-ous.net/web/advertising_google-adsense

Firefoxについてはバージョンがわからなければなんとも言えません。よろしくお願いします。

marukomu

2019/11/03 (Sun) 16:46

返信ありがとうございます。自分の場合、一番上のグーグルアドセンスは自動広告ではない、レスポンシブテンプレートで、自動広告とは直接的には無関係なんですよね。自動広告を入れてくるスペースではないんですが、今回のアップデート?らしき際に発見したものです。なので、因果関係があるのかどうかがよくわからないんですよね。ただ、自動広告が影響している可能性もありえるので、その辺は検討してみたいと思います。上の2つを拝見しましたが、デメリットが強調されていますね・・・その辺は参考にしたいです。ありがとうございます。

marukomu

2019/11/03 (Sun) 16:59

忘れていました・・・・

書き忘れました。ファイアーフォックスは最新バージョンと書かれています。70.0.1(64ビット)版です。よろしくお願いします。

marukomu

2019/11/03 (Sun) 17:02

忘れていました・・・・

一度書いたんですが、表示されなかったので一応もう一度。ファイアーフォックスは最新バージョン(70.0.1)の64ビット版です。よろしくお願いします。

Akira

2019/11/03 (Sun) 19:27
vanillaice (Akira)

To marukomuさん

えーと。自動広告は「利用していない」ということなんでしょうか。
> 自動広告をONにしていると〜
という一文があったのでそう判断(利用していると判断)したのですが。
使用していない別タイプの広告がそのまた別のタイプに影響を及ぼすといったことはまず無いですよ。

Firefoxはトラッキング系の広告をデフォルトでブロックしますのでそのせいではないですかね。
盾マークをクリックすると確認できます。
ただこれは個人環境なのでmarukomuさんがブロックを解除したところで第三者の設定まで変えることはできませんのでアレですが。

marukomu

2019/11/03 (Sun) 21:05

遅れました。自動広告はONですね。ただ、空白になる部分には活用していないということですね。
ですから、レスポンシブのGoogle広告を利用しているところがバグってるんですね。
紛らわしくてすみません。

marukomu

2019/11/03 (Sun) 22:27

アドブロックについて

アドブロックはOFFにしています。ですので、関係はないですね。単純にGoogleアドセンスの不具合の
せいだと思います。ですから曖昧な結果になってしまっています。

marukomu

2019/11/03 (Sun) 22:44

グーグルで修正されたみたいです。

22時42分で、グーグルアドセンスが勝手に修正されました。ファイアーフォックスで
自分のサイトでバグっていたのが直っています。
こちらからは何もしてないので、何か悪さをしていたものが直されたと思います。
大変お騒がせしました。

Akira

2019/11/04 (Mon) 12:48
vanillaice (Akira)

To marukomuさん

こんにちは。

私が言ったのは拡張機能ではなくFirefoxが元々持っている機能のことです。
Firefox69からはトラッキング防止「有効」がデフォルトなので、そのことをお伝えしました。

Firefoxへの最大の出資者はGoogleですから、Googleの広告は無条件でホワイトリスト入り、というのをmozillaは過去にも行っていますので、そのあたりの調整が入ったのかもしれませんね。
いずれにしろ表示されるようになったということで、お疲れ様でした。

* 念の為①「拡張機能(Adblock)」と②「Firefoxのトラッキング防止」の見分けについてお伝えしておきます。
①の場合は広告の専有領域はゼロ(横も縦もゼロpx)なので「無い」ように見えます。②の場合は専有領域はそのまま確保(横も縦も存在)しているので「余白」となります。
この見分けを知っておくと迷う場面を減らせると思います。

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

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