Ivory - FC2ブログテンプレート「配布終了 2019年2月6日」

Ivory - FC2ブログテンプレート「配布終了 2019年2月6日」

テンプレート 配布終了・旧作
2015/03/05
38
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWD

>配布終了致しました。ご利用ありがとうございました。

Ivoryテンプレート

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

最終更新 2017.9.22

SSL化に伴う混在コンテンツ排除

名称 Ivory
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大6600px
サイド --- 280px
記事内で使える見出しレベル h3からh6まで
推奨カスタマイズ ヘッダー画像変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下(デバイス幅依存) サイドメニュー --- 下
更新履歴 2017.1.25

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

更新履歴 2016.4.12

CSSソースの一部が文字化けしておりました 申し訳ございません
文字化け対象
・カスタマイズのガイド
・blockquote(引用) の「記号」
見た目に影響するのは blockquoteの方だけです
引用を行うとなにやらアルファベットが表示されてしまいます
ごめんなさい (*_ _)

更新履歴 2016.3.9

細々とした見た目の調整と
新着サムネイルを追加導入しました

Ivory修正のお知らせ

更新履歴 2016.1.10

フッター構造を変更しました
タイトルタグを微調整しました(SEO対策)

更新履歴 2015.11.9

ページ送りが表示されない不具合を修正しました
今回の「不具合」は私の記述ミスでございますー!
ご ごめんなさい ( ノД`)シクシク…
(お知らせ頂きましたAさん ありがとうございます!)

更新履歴 2015.9.22

iOS9 リリースに伴い スマホ・タブレットではColorbox起動させないよう修正しました
Colorbox適用版は記事の最後に掲載しています
配布終了致しました

更新履歴 2015.9.9

・ 公式化に伴うOGP削除

テンプレ付随のSNSボタンをご利用の方は ブログ個人環境のメタタグ設定をお願いします

更新履歴 2015.8.27

・ Javascript を若干軽量化しました
・ FC2検索バーがタブレットでレイアウトを壊す問題の対処

リリース済テンプレ随時更新のお知らせ

大きな変更はありません
ご面倒おかけします よろしくお願い致します

更新履歴 2015.6.4

iOS Safari でブラウザバックでのホワイトアウト問題があったため
現在は修正版をリリースしておりますのでご参照ください

Ivoryその他過去テンプレ修正版配信のお知らせ

更新履歴 2015.3.15

トップページのHOMEボタンが消える不具合があります
本日修正版を申請致しました 申し訳ありません
既にDL済みの方はこちらのページに対処法を掲載しております

Ivory 不具合 「トップページでHOMEボタンが消える」件

ご面倒おかけします よろしくお願い致します

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

今回も記事幅大きくとってあります
サイドバーは固定幅 コンテンツ幅はブラウザに合わせて伸縮

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
・テンプレートと無関係なプラグインの導入

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

今回もページ遷移時にトランジションを設けていますが
特性上 表示不具合を回避するため サイドバーのリンクではアウト効果適用外にしました (インはつきます)
中途半端で嫌だ という方は
Javascript がおわかりになるならば 自力での適用をお願いします (*_ _)
その際の注意としては コメント一覧表示で同じリンクを踏むとページが戻ってこなくなります
(JS がわかる方は意味がわかると思います)

トランジション効果削除手順
* 2016.1.13版(2016.1.13)以降での作業説明です *
Ctrl+Fキー検索 htmlソース内

<link rel="stylesheet" href="https://blog-imgs-71.fc2.com/v/a/n/vanillaice000/animsitionmin.css">

同じくhtmlソース内

<!-- 注)ページ遷移アクション不要の方はここから削除 -->
内容省略
<!-- 注)ページ遷移アクション不要の方はここまで削除 -->

上記2箇所を削除してください html ファイル
というのは「テンプレートの設定」画面で上にある方です (下は CSS ファイル)
トランジションはあくまでもオマケ的につけていますので
ご自身の判断で外す方はコソっと外してくださいね お願いします

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

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

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

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

Related post

Comments  38

-
2015/03/15 (Sun) 04:36

管理人のみ閲覧できます

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

-
2015/03/15 (Sun) 12:24

管理人のみ閲覧できます

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

Akira
2015/03/15 (Sun) 19:44

>トップページに戻るボタンが下にずれて見切れてしまいます

こちらの件確認致しました。
ご面倒をおかけして申し訳ありません (*_ _)

これはHOMEへのurlが消失しているために起こっているようです。
何かの拍子に抜け落ちてしまったのだと思います。

管理画面のCSSソース(文字列が記された二つの段の下の方です)の600行目に

<div id="side_footer"><!-- サイドバー下リンク -->

という部分があると思います。
まずそちらを探して頂いて、そこからさらに4行下に

<a href="<%url>" class="side_btn3"><i class="fa fa-home"></i></a>

という箇所があるはずなのですが、
<%url>が抜けていないでしょうか?
上の通りに修正して頂くか、あるいは
ご自分のトップページを表示して頂くと、ブラウザのアドレスバーにブログのURLが出ていますよね。
こちらをそのまま入れて頂くかのいずれかで対応お願い致します。
後者の場合は

<a href="http://ブラウザに出ているアドレス/" class="side btn3"><i class="fa fa-home"></i></a>

この形になります。
一度お試しください。
直らないようでしたらお手数ですが、再度お知らせくださいませ。
よろしくお願い致しますe-257

* 薔薇の栽培、素敵ですね ←過去に挑戦して挫折した人 (´・ω・`)

Akira
2015/03/15 (Sun) 19:55

> スマホで見た場合、PC版に操作しないと~

はい。大丈夫です。
意味はちゃんと伝わっておりますe-257
なかなか難しいですよね。専門用語なんかもありますので。
スマホから閲覧すると、自動的にスマホ版のテンプレート表示になってしまう
ということでお間違いないでしょうか。

これは私もちょっと困っておりまして (´・ω・`)
最近のFC2の仕様なんでしょうかしらe-263
スマホ版へ誘導するのは簡単にできるのですが、逆の方法というのを私が無知で存じておりません。
ちょっと調べますので、今しばらくお時間頂けると嬉しく思います。
ご迷惑おかけして申し訳ありません。
わかり次第、できる・できないにしろ、なんらかの形でお伝えいたします。
よろしくお願い致しますe-257

Akira
2015/03/15 (Sun) 20:06

今確認しましたが、
<%url>
この変数が機能していないようですe-351
先日の検索不具合同様、FC2のエラーかもしれません。
ちょっと調べますので、今しばらくお待ちくださいね。
申し訳ございません。

Akira
2015/03/15 (Sun) 20:20

少しお待ちくださいね。
ちょっと外出の用ができてしまいました。
また後程お返事致します!

Akira
2015/03/15 (Sun) 21:54

新しい記事で説明と対処を記させて頂きました。
お時間とらせてしまいました。ごめんなさいね。
よろしくお願い致します!

Akira
2015/03/15 (Sun) 22:10

お待たせ致しました (*_ _)

>記事幅を653pxに~

ということでお間違いないでしょうか。
これは「常に」という意味なのかしら。
ivoryテンプレートは『リキッドレイアウト』というのを採用しておりまして、
リキッドというのはブラウザ幅に応じて記事幅が可変のタイプのことを言います。
記事幅が変更されない不変タイプは『ソリッド』と言います。

で、リキッドを採用しているのはスマホ版表示のことを考慮してそうしているんですね。
ですから幅を固定してしまうと、スマホ版の表示で難が出てしまうんです。
そして全体像も崩れてしまうような構造になっています。
ご了承頂けると嬉しく思います (*_ _)

-
2015/03/15 (Sun) 22:36

管理人のみ閲覧できます

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

Akira
2015/03/15 (Sun) 22:46

ご期待に添えず申し訳ありません。

ご理解ありがとうございますe-257

Lisa
2015/04/21 (Tue) 01:00

とっても素敵なテンプレートなので利用させていただこうと思います!

質問なのですが、記事内に投稿した写真のサイズをもう少し小さくしたい場合はどうすればいいでしょうか?


お忙しいと存じますが、ご教授いただければ幸いです。

Akira
2015/04/21 (Tue) 02:04

To Lisaさん

投稿写真サイズの件

こんばんはe-257
写真サイズの変更は私のテンプレに限らず、FC2内での掲載方法ということになります。
図解しましたのでどぞ ^。・x・)b ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/sc0003_zps2iwdfgso.gif~original

❶ FC2に写真をアップロードする際に事前にサイズを変更しておく、というのが一つの方法
= 難点: めんどっちい
そして、
❷ 『サムネイルを作成する』というのがまた一つの方法
= 難点: 画質が劣化する


元画像をそのままUPできて、画質も落とさないためには上記URLで図解したような縦横指定で操作します。
どちらか基準にしたい一辺を『横』か『縦』かいずれかに決めます。
例えば 横 500px に指定するならば

width="500"

単位はつけません
このままでは縦横比が狂いますので

height="auto"

に忘れず変更です。
縦を基準にする場合も同じく、

width="auto" height="500"
こう直します。
やってみてくださいねe-257
ありがとうございますe-454

Akira
2015/04/21 (Tue) 02:19

あるいは全ての画像に対して最大値の制限をかけるには、

.entry_body img {
max-width: 任意の数字%;
}

これをCSSソースの末尾に追加してください。
記事幅に対して指定%以上は大きくならない という指定方法です。
ただしこれだとブラウザ幅を縮小した時、またスマホでの表示でも同じく記事画面幅の指定%を維持しますので、
場合によってはとっても小さくなってしまうことがあります。
なので記事への貼り付け時に任意操作というのがベストだと思います。
お尋ねの内容が違ってるようならご指摘くださいね ^^;

Lisa
2015/04/21 (Tue) 10:05

To Akiraさん

丁寧なご返信、ありがとうございます!
毎回画像のアップ時にサイズ指定がめんどうなので、
全ての画像に対して最大値の制限をかける最後の方法を試したのですが、
記事内画像は指定の%になってくれましたが、
トップページのエントリー一覧の丸い画像が楕円形になってしまいました。。。

Akira
2015/04/21 (Tue) 10:52

To Lisaさん

んー!記述のどこかが、何かが違っているのかな? と。
スクショでご確認お願いします。

まずCSSソースの末尾がこうなります ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/w0er_zpsl8997rcu.jpg~original

上はちょっと極端に20%指定にしてみた例です。
すると記事内でこうなります ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2874293_zpsz3jtmgqb.jpg~original

記事幅に対して20%の割合を守っているのが見てとれるかと思います。
この状態でトップの記事一覧を確認すると ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/293847_zpsm8ceclzr.jpg~original

こうして正円を保つ…はず ( ̄∀ ̄;)
追加する内容が img だけになっていないか、
ちゃんと前に
.entry_body
が付いているかのご確認をお願いします。

どっとえんとりーあんだーすこあぼでぃ 半角スペース あいえむじー

でございます!

-
2015/04/21 (Tue) 18:33

管理人のみ閲覧できます

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

Akira
2015/04/21 (Tue) 22:40

To 内緒の「ま」さん

あ、それわかります (´・ω・`)
確かに「PCではどう見えとるんや?」
っての気になります(笑)
レスポンシブでやっちゃうとわかんないですもんね。

なんかGoogle先生が検索のアルゴリズムを大きく変更する(もうした?)とか。
ますますモバイルファーストのようです ( ̄∀ ̄;)
そうなるとホントに(FC2に於ける)レスポンシブの意義ってなに?ってなる(笑)
SEOのこと考えだすともー、頭痛いe-452
自分自身が無頓着なもので、できれば避けて通りたい課題(笑)

まぐまぐ
2015/05/06 (Wed) 21:46

とっても素敵なテンプレートで愛用させていただいております!
サイドバーの下の丸いアイコン3つなんですが、どれも
あまり使わないため、別のものにしたいと思っています。

アイコン画像はどこで指定されてるのかどうしてもわからなくて…
こちらでご質問させていただくことお許しください!

Akira
2015/05/06 (Wed) 22:49

To まぐまぐさん

こんばんはe-257
サイドバー下の3つのアイコンの該当箇所は以下の通りです。
キーボードの
Ctrl + F キーで文字列検索窓を出してコピペして探してください。
(htmlソースの方に一箇所あります)

<div id="side_footer"><!-- サイドバー下リンク -->
<nav>
<a href="<%server_url>control.php" class="side_btn1"><i class="fa fa-unlock-alt"></i></a>
<a href="<%url>?xml" class="side_btn2"><i class="fa fa-rss-square"></i></a>
<a href="<%url>" class="side_btn3"><i class="fa fa-home"></i></a>
</nav>
</div>



で、上記をまるっと消してしまえば無くなりますが、
一番左の「鍵マーク」は「管理画面」へのリンクになっています。
これが無いと閲覧される方が自分のブログへ戻る経路が断たれてしまいますので、鍵マークはそのまま残されることをおすすめします。
その場合には


<div id="side_footer"><!-- サイドバー下リンク -->
<a href="<%server_url>control.php" class="side_btn1"><i class="fa fa-unlock-alt"></i></a>
</div>



このような形にhtmlソースを修正します。
このままではボタンが左にひとつポツンと残りますので、真ん中に寄せるために以下の文字列を検索し(CSSソース)…

#side_footer {
position: fixed;
width: 300px;
right: -20px;
bottom: 15px;
display: table;
border-collapse: separate;
border-spacing: 20px 0;
}

.side_btn1 {
color: rgb(255,255,255);
text-decoration: none;
text-align: center;
position: relative;
z-index: 10;
display: table-cell;
width: 50px;
height: 50px;
line-height: 50px;
}


これを以下の通り修正します(赤字部分が変更箇所です)

#side_footer {
position: fixed;
width: 300px;
text-align: center;
right: 0;
bottom: 15px;
display: table;
border-collapse: separate;
border-spacing: 20px 0;
}

.side_btn1 {
color: rgb(255,255,255);
text-decoration: none;
text-align: center;
position: relative;
z-index: 10;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
}



これで真ん中に寄ります。
くれぐれも、閲覧される方が困ることのないような選択をされてくださいねe-257

Akira
2015/05/06 (Wed) 22:58

To まぐまぐさん

もしかして「画像を変更したい」
という意味だったのかしら (´・ω・`)

それでしたら、この部分は画像を使っておりません(webアイコンです)ので該当箇所は

<i>~</i>

に挟まれた部分です。
ここを削除して、画像アドレスを

<img src="ここにアドレス" style="width: 指定したい横幅; height: auto;">

こう直してください。
その上で、

<a href="<%server_url>control.php" class="side_btn1">

赤字部分のクラス指定、これがこの名称のまま残っていてはまずいことになりますので、

<a href="<%server_url>control.php">

3つともクラスを削除します。
こうなります ↓

<a href="<%server_url>control.php"><img src="ここにアドレス" style="width: 指定したい横幅; height: auto;"></a>

Aya
2015/06/13 (Sat) 11:50

タイトル画像

はじめまして。
素敵なテンプレートをありがとうございます。

ブログタイトルとサブタイトル(?)を画像にしたいのですが
どうすればよいでしょうか?
また背景画像の最適なサイズなどはありますでしょうか?

お忙しいとは思いますがよろしくお願いします。

Akira
2015/06/13 (Sat) 14:45

To Ayaさん

こんにちは。ありがとうございますe-257

>タイトル・サブタイトルを画像に変更の件

-------------------

まず画像タイトルへの変更の仕方は二種類あります。

・imgとして掲載
= サイズの縮小が起こる(できる)

・background-imageとして掲載
= サイズの縮尺は起こらない (規定幅を超過した分は見切れる)

既に代替画像の準備ができているようでしたら、画像の横サイズと相談して決めてください。
画像横が320pxを超えているようであれば、img掲載の方が良いかもしれません
スマホのiPhone4の横幅が320pxですので、それを基準としてのお話しです。
320px以下であればimg, background-imageどちらを選んでも差し障り無いと思います。
見た目も変わりありません。
この場合の異なる点は

・img = 閲覧者が画像保存できる(右クリック/ ドラッグ&ドロップ)
・background-image = 画像の保存はできない(同上)

このぐらいです。
リンクをつけますのでimgがおすすめです。
background-imageにせざるを得ない場合にはまたご相談ください(笑)
リンクの付け方がちょっと複雑になります。
画像の編集がまだお済みでないようでしたら、横幅320pxを意識して作成されると良いんじゃないかな と思います。

--- img掲載の仕方 ---

Ctrl + F キーで以下の文字列を検索(htmlソース内)

<header id="blog_head"><!-- ブログ名 -->
<h1 id="blog_title_h"><a href="<%url>" id="blog_title"><%blog_name></a></h1>
<p id="subtitle"><%introduction></p>

<div id="top_titlelist">
<a href="<%url>archives.html" title="タイトルリスト"><i class="fa fa-list-ul"></i></a>
</div>
</header>

赤字部分を全て削除します。
以下の通り修正

<header id="blog_head"><!-- ブログ名 -->
<a href="<%url>" id="blog_title">
<img src="画像アドレス" alt="画像紛失時・読み込みエラー時に表示させる代替テキスト" id="任意の名前">
</a>
<div id="top_titlelist">
<a href="<%url>archives.html" title="タイトルリスト"><i class="fa fa-list-ul"></i></a>
</div>
</header>


画像の水平位置はこのままだと「左寄せ」です。
位置を変更したい場合にはCSSソース内末尾に

#任意の名前 {
text-align: center;
}


こうして指定してください。
上記はセンタリングの場合です。
右寄せならば center を right に書き直します。

Akira
2015/06/13 (Sat) 14:47

To Ayaさん

次に レスポンシブでワンカラムになった際のヘッダー画像を取り除きます。
以下の文字列を検索(CSSソース内)

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

#blog_head {
width: 100%;
padding: 30px 10px;
background: url(http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/il_fullxfull.jpg) center center no-repeat; /* スマホ表示時ヘッダー背景 パソコン閲覧時のサイドバー背景と別のものでも可 */
}

赤字の部分を削除。
以下の通り修正。

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

#blog_head {
width: 100%;
padding: 0;
}



これでいけると思います。
わかりにくい点等あればまたご相談くださいませーe-454

Aya
2015/06/14 (Sun) 11:10

To Akiraさん

お早いお返事ありがとうございます。
とても詳しく丁寧に教えて下さり、無事ブログ名を画像にすることが出来ました。
本当にありがとうございました。

miyu
2015/06/14 (Sun) 23:30

No title

貴ブログのようにブログの名前を右寄せにする方法を教えてください

ブログの説明は右寄せに出来たのですが
ブログ名は右寄せにできませんでした

よろしくおねがいします

Akira
2015/06/15 (Mon) 13:39

To Ayaさん

できましたか。良かったですe-454
ご報告ありがとうですe-257

Akira
2015/06/15 (Mon) 14:19

To miyuさん

お返事遅くなりました (*_ _)

>ブログタイトルを右寄せに変更したい件

以下の文字列をCtrl+Fキー検索。

#blog_title_h {
margin-bottom: 15px;
}

一部追加で以下の通り修正。

#blog_title_h {
margin-bottom: 15px;
text-align: right
}


----------

これで右に寄りますですーe-257

abo
2015/11/09 (Mon) 01:07

はじめまして

はじめまして。
Akiraさんのテンプレートを使わせていただいておりますaboと申します。とても素敵なテンプレートばかりで、記事を書くのも楽しくなりました。

質問がふたつほどあるのですが、お暇な時にでもお答えいただけると嬉しいです。

こちらのIvoryの最新版をDLしなおしたのですが(Latest update: 2015.9.9のものです)トップページや、各カテゴリを開いたときに記事一覧の下に表示される『Prev123・・・』というのが、なぜか表示されません。(上手く表現できずすみません)
以前使用していた(Latest update: 2015.6.4のもの)バージョンでは大丈夫だったのですが、原因がわからず困ってしまい質問させていただきました。
一応、何もカスタマイズせずDLした素の状態でも表示してみたのですが、それでもダメでした。
現在は、前のバージョンに戻して使用させていただいているのですが、新バージョンに変更できるならそうしたいなーと思っております。(ちなみにブラウザはChromeです)


あともう一つの質問は、こちらのテンプレートで他のテンプレートに設置されているような新着記事を表示させることはできないでしょうか。今は手動でせっせとサムネイル画像を設定しているので、こちらの機能がつけばすごく嬉しいです。


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

Akira
2015/11/09 (Mon) 08:50

To aboさん

きゃーーー!ごめんなさいe-447
今再申請して公式の方は修正済みです。
お手間で申しわけありませんが再DLお願いいたします ( ノД`)シクシク…

とりあえずこの件だけ火急でしたので対処いたしましたー!
ちょっと出掛けますので、帰宅次第別件併せ改めてお返事させてくださいね。
ご指摘ありがとうございました。
いやホント全然気づかなかったので助かりました ^^;

Akira
2015/11/09 (Mon) 10:59

To aboさん

細切れのお返事で申し訳ない (*_ _)
それからページ送りの件、貴重なお時間削ってしまいました。
重ねてごめんなさい (*_ _)

> 新着記事サムネイルを表示したい件

------------- htmlソース追加

Ctrl+Fキー検索

<!--/trackback-->
<!--/trackback_area-->

この直下に以下を追加

<!--permanent_area-->
<script src="http://www.google.com/jsapi"></script>
<article class="main_body" id="newest">
<h3 class="sub_header">
What's new?
</h3>
<script>function initialize(){function e(e){if(!e.error){for(var t=document.getElementById("feedContainer"),n=0;n<e.feed.entries.length;n++){var a=e.feed.entries[n],l=(a.title,a.link,""),g=a.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/);l+=g?"<img "+g[0]+'" >':i,t.innerHTML+='<div class="rss-container"><a class="image-table-cell" href="'+a.link+'" ><div class="for-img">'+l+'</div></a><div class="for-h-and-text"><h3><a href="'+a.link+'" >'+a.title+"</a></h3><p>"+a.contentSnippet.substring(0,45)+"</p></div>"}for(var o=t.getElementsByTagName("a"),r=0,s=o.length;s>r;r++)o[r].target="_blank"}}var t=new google.feeds.Feed("<%url>?xml"),i="<img src='記事内に画像が無い場合の代替画像' alt='noimage'>";t.setNumEntries(6),t.load(e)}google.load("feeds","1"),google.setOnLoadCallback(initialize);</script>

<div id="feedContainer"></div>
</article>
<!--/permanent_area-->


No image用画像は300×300ぐらいが妥当だと思います。
記事の表示件数は
setNumEntries(6)
の箇所がそれにあたります。
デフォルトは6件にしてありますが、最大8件まででお好きな件数に数字変更をどうぞ。
取得件数はブログ内個人設定も必要ですので、以下の記事内容をご参照ください。

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


続きまして
--------------- CSSソース内容追加

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

/***----- RSS thumbnail
------------------------------------------***/

#feedContainer {
margin-top: 40px;
display: table;
}

.rss-container {
display: table;
width: 100%;
border-bottom: 1px solid rgb(220,220,220);
padding: 15px 0;
}

#feedContainer .rss-container:last-child {
border-bottom: none;
}

.image-table-cell {
display: table-cell;
width: 100px;
height: 100px;
vertical-align: top;
}

.for-img {
width: 100px;
height: 100px;
overflow: hidden;
}

.for-img img {
max-height: 170px;
max-width: 180px;
margin-left: -25px
}

.for-h-and-text {
display: table-cell;
vertical-align: top;
padding-left: 20px;
overflow: hidden;
}


これでスクショのようになります ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/FireShot%20Capture%2087%20-%20Jingle%20-%20%20-%20http___vanillaice000.blog.fc2.com_blog-entry-274.html_zpsg7qrybbl.jpg~original

お試しくださいませe-257

abo
2015/11/09 (Mon) 15:04

ありがとうございます

Akiraさん、こんにちわ。

素早いお返事と対応ありがとうございます。

これから最新版へ変更してみますね。
新着記事の件もありがとうございます!

本当、素早く丁寧なお返事に感動してます。


Akira
2015/11/10 (Tue) 00:22

To aboさん

ご希望に沿う形になると良いのですが。
お手数おかけします。よろしくお願いしますe-454

abo
2015/11/10 (Tue) 01:40

ご報告

こんばんは、Akiraさん。

全て上手くできました!
新着記事も表示できました!

新しいバージョンに変更したら、メタタグの重複がほんのすこーしですが減少しました。ホント嬉しいです。(どうやって対策したらよいのかさっぱりだったので・・・)

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

Akira
2015/11/10 (Tue) 10:06

To aboさん

製作中でコメントし難かったかと思います。
ごめんなさいね ^^;

できましたか。良かったe-454
メタタグ重複は徐々に減っていくと思います。
結構時間かかるので長い目で... 半年ぐらいはゆうにかかると思ってください。
スマホ版をご利用の方はスマホ版がいたずらすることもありますので、別の対策が必要ですね。
URLをご覧になった時に後ろに?spがついていたらそれはスマホ版の悪さです。
現在私の方のメタ重複はゼロになりましたので、ある程度効果はあると思います。
head情報は本当はユーザーさんご自身が管理すると良いですよね。
これで効果あり、と思ったらその<head>をテンプレを変更しても守ると良いですYO ( ゚Д゚)ノ

お疲れ様でしたe-257

abo
2016/03/03 (Thu) 01:48

新着記事サムネイルについて

こんばんわ。

またまた質問です。すみません。

2016.1.10vrのテンプレートにアップグレードしたのですが、上記で教えていただいた新着サムネイルの画像が表示されなくなってしまいました。(旧バージョンでは大丈夫でした)
全ての新着記事になぜか"no img"画像が表示されてしまいます。

原因わからず質問させていただきました。
お時間あるときにでも回答いただければ嬉しいです。

Akira
2016/03/04 (Fri) 03:25

To aboさん

ご迷惑おかけしております (*_ _)

この件少しお時間ください。
FC2自体もなんだか調子が悪いようで、変更が反映されなかったりしてどうにもなんない(笑)
明日改めて検証致しますー (´・ω・`)
申し訳ない。

--------

とり急ぎ原因だけ。

FC2のメンテの影響かわかりませんが、どうもバックスラッシュを受け付けなくなっているようです。
過去に掲載したものは反映されていますけれども、一度でも修正(カスタマイズ含む)をかけてしまうと症状が出るみたい。
ちょっとこの辺りどういったことかはっきりしませんが、原因としてはそれではないかと (´・ω・`)

仕事の合間を縫ってコメントしております(笑)
Ivoryについては個人的に気になるところが多々ございますので、微調整を含めた修正版を申請する予定でおります。
明日・明後日中になんとか ^^;
(新着サムネイルもデフォルト導入する予定です)

-
2016/03/05 (Sat) 01:31

管理人のみ閲覧できます

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

Akira
2016/03/05 (Sat) 02:05

To Ivoryの件 内緒さん

ご不便おかけしますー。
とりあえずFC2からの返答待ちです。
(返答待ちってゆーか、修正待ち)

くれぐれも元に戻されましたテンプレートを今カスタマイズしてしまわないようお願いします。
変更内容を送信した時点で同じことが起こってしまいます。
事が落ち着きましたらまた修正版配信を記事でお知らせしますね。
明日・明後日中に、なんて書いちゃったけど、FC2が直してくれないとなにもできないってことに今気づきました(笑)