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

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

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

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

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

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

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

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

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

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

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

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

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

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

>記事幅を653pxに～

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

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

管理人のみ閲覧できます

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

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

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

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

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


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

To Lisaさん

投稿写真サイズの件

こんばんは
写真サイズの変更は私のテンプレに限らず、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"
こう直します。
やってみてくださいね
ありがとうございます

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

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

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

To 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
が付いているかのご確認をお願いします。

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

でございます！

管理人のみ閲覧できます

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

To 内緒の「ま」さん

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

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

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

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

To まぐまぐさん

こんばんは
サイドバー下の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;
}


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

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>

タイトル画像

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

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

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

To Ayaさん

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

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

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

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

・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 に書き直します。

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;
}


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

To Akiraさん

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

No title

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

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

よろしくおねがいします

To Ayaさん

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

To miyuさん

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

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

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

#blog_title_h {
margin-bottom: 15px;
}

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

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

----------

これで右に寄りますですー

はじめまして

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

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

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


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


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

To aboさん

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

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

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

お試しくださいませ

ありがとうございます

Akiraさん、こんにちわ。

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

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

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

To aboさん

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

ご報告

こんばんは、Akiraさん。

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

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

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

To aboさん

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

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

お疲れ様でした

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

こんばんわ。

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

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

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

To aboさん

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

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

--------

とり急ぎ原因だけ。

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

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

管理人のみ閲覧できます

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

To Ivoryの件 内緒さん

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

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