Article page

by
  • Comment:38
  • Trackback:0

ivory.jpg


名称 Ivory
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー 右/ ブラウザ縮小時・スマホ 下
記事幅 可変 800px (内寸 660px)
サイドバー幅 300px(内寸 280px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
新着サムネイル 2016.3.9 個別記事ページに追加導入
Windows/ Mac
Chrome Firefox Safari Opera IE9以上 IE8以下
(/_;)/~~
推奨カスタム 背景変更 背景変更に伴う文字色変更 ページ遷移トランジションスピード調整及び削除



更新履歴 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ボタンが消える」件

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

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


Sample トップ
Sample 個別
DOWNLOAD

FAQ



th_4435676.jpg


本日 2015.3.5 申請致しました

============
追記 2015.3.11 公開されました ありがとうございます
============


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


仕様
・サイドバー背景はブラウザ縮小で上に移動します
・サイドバー自体は下へ移動です
・スマホではブラウザ縮小時と同じレイアウトに
・iPadは 縦のときはスマホと同じ 横 (ランドスケープ) のときはパソコンデフォルトと同じです
・ページ遷移後もサイドバーの開閉状態を保持するようにしました
・開閉時はサイドバーが縦に伸びないようスクロールバーを設けました
・スクロールバーはデザインの邪魔をしない半透明にしました
・一度押したリンクがわかるようにしておきました
・記事内に貼り付けた写真がサイズの如何にかかわらず記事内に綺麗に収まるようにしておきました
(記事外にはみ出たり 見切れたりしない という意味です)


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



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



**********************
トランジション効果削除手順
**********************

* 2016.1.13 編集 最新版(2016.1.13)での作業説明です **

Ctrl+Fキー検索 htmlソース内

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


同じくhtmlソース内

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


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



=========================



推奨カスタムについては
html ソース内にわかるように説明書きがあります
背景記述は二箇所あります
ので留意して変更してください
別の画像を設定することもできます ご自由にどうぞ
使用される画像については 配布元の利用規約を遵守されますようお願い申し上げます



これで良し… と何度もチェックしてから申請をしているつもりですが
それでも見つかる不備 ( ̄∀ ̄;)
ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


過去作品をDLしてくださった方 また コメントを頂きました方
励みになります ありがとうございますemo



Colorbox適用版 htmlファイル×1 (2016.1.13 現在最新版)
この日付以前にDLされました方はお手数ですが公式から再DLの上html差し替えをお願いします

file

Colorbox = ページ内画像拡大スクリプト
クリック ↓

sample

起動条件
<img>
<a>
で囲われており 同じアドレスが与えられている

ご利用頂けないパターン
・画像を「アルバムへリンク」している方
・画像ハイパーリンク(外部ページへの遷移)をご利用の方(ランキング, SNS, 拍手等含む)

仕様
・過去掲載画像の全てに適用されます

条件と照らしあわせてご利用の有無をお決めください
(上級者の方はデフォルトのhtmlへご自分でColorboxファイル適用されることをおすすめしています)
公式からデフォルトテンプレをDL後 htmlソースを差し替えてください

参考: Colorbox上級編

関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 38

-  
管理人のみ閲覧できます

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

2015/03/15 (Sun) 04:36 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/03/15 (Sun) 12:24 | EDIT | REPLY |   
Akira  

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

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

これは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

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

2015/03/15 (Sun) 19:44 | EDIT | REPLY |   
Akira  

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

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

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

2015/03/15 (Sun) 19:55 | EDIT | REPLY |   
Akira  

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

2015/03/15 (Sun) 20:06 | EDIT | REPLY |   
Akira  

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

2015/03/15 (Sun) 20:20 | EDIT | REPLY |   
Akira  

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

2015/03/15 (Sun) 21:54 | EDIT | REPLY |   
Akira  

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

>記事幅を653pxに~

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

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

2015/03/15 (Sun) 22:10 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/03/15 (Sun) 22:36 | EDIT | REPLY |   
Akira  

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

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

2015/03/15 (Sun) 22:46 | EDIT | REPLY |   
Lisa  

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

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


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

2015/04/21 (Tue) 01:00 | EDIT | REPLY |   
Akira  
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

2015/04/21 (Tue) 02:04 | EDIT | REPLY |   
Akira  

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

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

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

2015/04/21 (Tue) 02:19 | EDIT | REPLY |   
Lisa  
To Akiraさん

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

2015/04/21 (Tue) 10:05 | EDIT | REPLY |   
Akira  
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) 10:52 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/04/21 (Tue) 18:33 | EDIT | REPLY |   
Akira  
To 内緒の「ま」さん

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

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

2015/04/21 (Tue) 22:40 | EDIT | REPLY |   
まぐまぐ  

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

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

2015/05/06 (Wed) 21:46 | EDIT | REPLY |   
Akira  
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

2015/05/06 (Wed) 22:49 | EDIT | REPLY |   
Akira  
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>

2015/05/06 (Wed) 22:58 | EDIT | REPLY |   
Aya  
タイトル画像

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

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

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

2015/06/13 (Sat) 11:50 | EDIT | REPLY |   
Akira  
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 に書き直します。

2015/06/13 (Sat) 14:45 | EDIT | REPLY |   
Akira  
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

2015/06/13 (Sat) 14:47 | EDIT | REPLY |   
Aya  
To Akiraさん

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

2015/06/14 (Sun) 11:10 | EDIT | REPLY |   
miyu  
No title

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

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

よろしくおねがいします

2015/06/14 (Sun) 23:30 | EDIT | REPLY |   
Akira  
To Ayaさん

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

2015/06/15 (Mon) 13:39 | EDIT | REPLY |   
Akira  
To miyuさん

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

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

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

#blog_title_h {
margin-bottom: 15px;
}

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

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


----------

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

2015/06/15 (Mon) 14:19 | EDIT | REPLY |   
abo  
はじめまして

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

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

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


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


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

2015/11/09 (Mon) 01:07 | EDIT | REPLY |   
Akira  
To aboさん

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

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

2015/11/09 (Mon) 08:50 | EDIT | REPLY |   
Akira  
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

2015/11/09 (Mon) 10:59 | EDIT | REPLY |   
abo  
ありがとうございます

Akiraさん、こんにちわ。

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

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

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


2015/11/09 (Mon) 15:04 | EDIT | REPLY |   
Akira  
To aboさん

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

2015/11/10 (Tue) 00:22 | EDIT | REPLY |   
abo  
ご報告

こんばんは、Akiraさん。

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

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

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

2015/11/10 (Tue) 01:40 | EDIT | REPLY |   
Akira  
To aboさん

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

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

お疲れ様でしたe-257

2015/11/10 (Tue) 10:06 | EDIT | REPLY |   
abo  
新着記事サムネイルについて

こんばんわ。

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

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

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

2016/03/03 (Thu) 01:48 | EDIT | REPLY |   
Akira  
To aboさん

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

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

--------

とり急ぎ原因だけ。

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

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

2016/03/04 (Fri) 03:25 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/03/05 (Sat) 01:31 | EDIT | REPLY |   
Akira  
To Ivoryの件 内緒さん

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

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

2016/03/05 (Sat) 02:05 | EDIT | REPLY |   

Leave a reply

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