The other way round

Welcome to my blog

Little-thing

template



名称 Little-thing
カラム数 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC --- 右/ ブラウザ縮小時 下
SP --- 右からスライド
記事幅 可変 最大1140px (内寸 1060px)
サイドバー幅 固定300px (内寸 260px)
新着サムネイル表示 あり
個別記事トラックバック下 デフォルト6
鍵つきブログの方は表示されませんので削除をお願いします

Google Feed API廃止に伴い削除致しました
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム ヘッダー画像変更, テーマ色変更 etc.


valid-html5.png


更新履歴 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横の隙間について

--------- 以下本文



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



りとる しんぐ
グリッドレイアウト 19日申請予定 --- 審査通過しました ありがとうございます



TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・トップページはグリッドレイアウト
前作に引き続き 関連記事サムネイルを導入しました
↑ 公式実装されましたので機能を省きました
・右サイドメニューはスマホのみドロワーになります(右からスライド)
注) でCtrl+Fキー検索されますとカスタマイズのガイドが出てきますので 作業を始める前に一度ご確認ください


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更


カスタマイズをブラウザ上で行う方は
Ctrl+F(Windows)/ Command+F(Mac) キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします




トップページのカスタマイズについて


まず仕様について
記事要約部分の「記事タイトル」ですが
タイトルが長い場合 際限なく表示しているとレイアウトが狂ってしまします
その対処として 最大4行まで の表示に制限しています
4行あればよほど長いタイトルでもなんとか… ^^;
タイトル下の「カテゴリ」表示は 最大2行まで にしてあります
ブラウザ画面縮小・スマホなどへのデバイス変更により レイアウトが縦一列になりました際には
この制限を外して全て表示されるようにしています

● 文字を大きくされる方

そのままでは画像とのバランスが崩れますので 以下の部分を調整してください
Ctrl+Fキー検索

var e=80

htmlソース内に1箇所あるscript内容です
緑色の部分は 本文の表示文字数制限 にあたります
フォントを大きくされました方は この数字を 小さく してください
文字数を減らすことでバランスを調整します



ヘッダー画像変更


検索

/* 注)ヘッダー画像はここです */

画像中ほどから下にかけて徐々に自動で透過されます

カスタマイズサンプル




プラグインについて


プラグイン1と2は右サイドメニューに
プラグイン3はフッター上サイドメニューに

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



No image画像変更


記事のしかるべき箇所に画像が存在しない場合に表示される No image画像
表示されるページは以下の通りです

・トップページ
・検索結果
・RSS新着サムネイル
・FC2関連記事サムネイル

検索

//blog-imgs-93.fc2.com/v/a/n/vanillaice000/littlethingnoimage2.jpg

上記が該当URLですので ご希望の画像のアドレスに変更してください
( は省略していますが 記載しても構いません)
それぞれどのページにあたるのかは検索して頂ければわかると思いますので
ページ毎に別画像を指定することも可能です
共通のものをお使いになる場合の最適サイズは 長辺1000px程度

デフォルト画像 (縮尺掲載 1000✕667 36KB public domain)





ドミナントカラー


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

例) 51,51,51



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



関連記事リストについて(2016.7.23 追記)


関連記事リストのサムネイル表示機能リリースに伴い
サムネイル設定を行っている場合と そうでない場合との表示スタイルを振り分けました

サムネイルを設定された方の表示



サムネイルを設定されない方の表示


ブログ個人設定のみで自動的にスタイリングの振り分けが行われます
「なってないよ!
という方は恐れいります もっかいDLしてください



管理人コメントと訪問者コメントを分ける方


デフォルトはグレー背景アイコン
サンプル




CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)





ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


みなさんいつもありがとうですー ヽ(´▽`)/
関連記事

Comments 29

きろろ  
お借りしました

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

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

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

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

2016/07/22 (Fri) 19:47 | EDIT | REPLY |   
Akira  
To きろろさん

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

2016/07/22 (Fri) 20:46 | EDIT | REPLY |   
きろろ  

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

2016/07/23 (Sat) 01:19 | EDIT | REPLY |   
Akira  
To きろろさん

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

2016/07/23 (Sat) 14:18 | EDIT | REPLY |   
MARBLEGUM  
ご質問させてください

はじめまして。

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

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

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

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

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

よろしくお願いします。

2016/09/04 (Sun) 00:06 | EDIT | REPLY |   
Akira  
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
という意味です。

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

2016/09/04 (Sun) 14:35 | EDIT | REPLY |   
MARBLEGUM  
お礼

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

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

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

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

2016/09/04 (Sun) 18:53 | EDIT | REPLY |   
Akira  
To MARBLEGUMさん

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

2016/09/05 (Mon) 13:38 | EDIT | REPLY |   
mika  
初めまして

本当に夜分遅くにすみません。(早朝?汗)
こちらのテンプレート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:03 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/09/30 (Fri) 04:11 | EDIT | REPLY |   
Akira  
To mikaさん

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

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

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

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

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

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

2016/09/30 (Fri) 10:29 | EDIT | REPLY |   
mika  
To Akiraさん

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

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

2016/10/01 (Sat) 04:55 | EDIT | REPLY |   
Akira  
To mikaさん

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

2016/10/01 (Sat) 10:56 | EDIT | REPLY |   
瑠奈  
レイアウト変更

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

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

2016/10/13 (Thu) 22:30 | EDIT | REPLY |   
Akira  
To 瑠奈さん

こんばんは ( ゚Д゚)ノ

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

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

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


上記をカットし

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

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

======

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

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

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

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

2016/10/14 (Fri) 00:27 | EDIT | REPLY |   
瑠奈  

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

2016/10/14 (Fri) 12:44 | EDIT | REPLY |   
Akira  
To 瑠奈さん

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

2016/10/14 (Fri) 14:31 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/15 (Sat) 21:54 | EDIT | REPLY |   
Akira  
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) 22:57 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/15 (Sat) 23:56 | EDIT | REPLY |   
Akira  
To ランキングバナーの件 内緒さん③

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

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

2016/10/16 (Sun) 00:11 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/22 (Sat) 18:42 | EDIT | REPLY |   
Akira  
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で掲載する
というのは簡単なことです。
でも内緒さんは新投稿画面をご利用ですので、その簡単なことがとっても難しくなってます。
サイズ変更の仕方がわからないが故に、元サイズ(実寸)依存の掲載になっている = 画像の実寸を全部揃えなきゃ… と思っている
ってことですね (´・ω・`)

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

一旦投稿します。

2016/10/22 (Sat) 20:13 | EDIT | REPLY |   
Akira  
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

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

2016/10/22 (Sat) 20:23 | EDIT | REPLY |   
Akira  
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) 20:43 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/22 (Sat) 23:15 | EDIT | REPLY |   
Akira  
To ランキングの件 内緒さん

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

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

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

2016/10/22 (Sat) 23:34 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/31 (Mon) 18:10 | EDIT | REPLY |   
Akira  
To Little-thingランキングバナーの件 内緒さん

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

2016/10/31 (Mon) 21:24 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
About this site
新テンプレ動作確認中。ご迷惑おかけします。
About me
テンプレのご質問の際には
カテゴリ > 利用上のお願い > FC2テンプレートご利用時のお願い
をご一読されましてからお願いします ( ゚Д゚)ノ
* メールでの返信をしておりません
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *