Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

GirlOnWireテンプレート


名称 GirlOnWire
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC -- 右/ ブラウザ縮小 --- 下/ スマホ --- 左スライド
新着サムネイル表示 あり
鍵つきブログの方は表示されませんので削除をお願いします
Google Feed API廃止に伴いFC2独自変数での表示に変更しました
記事幅 可変 最大850px (内寸 790px)
サイドバー幅 300px (内寸 240px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = 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 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 背景変更


valid-html5.png



更新履歴 2017.1.25


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

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


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



更新履歴 2017.1.13


・RSS新着サムネイルをFC2独自変数での表示に切り替えました

関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更


更新履歴 2016.10.14


メンテナンス及びレイアウト変更

・ ページ遷移エフェクトをJSからCSSに変更 --- ページ表示が軽快になりました
・ カテゴリなど 一部ページをリスト形式に変更しました
・ 主要公式プラグインの整形
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・その他微調整

JSによるページ遷移エフェクトを取り除きました
JSのメリットとして 全てのレイアウトが構築されてから表示するので 表示が行われた時点ではページが整っていますが
CSSでは表示が速い代わりに 一部レイアウト構築前の状態が一瞬表示されてしまうことがあります
(通信環境やデバイスのスペックによります)

本メンテナンスに伴い記事内容を大幅に修正しましたことをご了承ください
お手元のソース内容と記事内容が合致しない場合は再DLをご検討くださいませ


更新履歴 2016.9.9


リストマーカーの位置を調整しました

参考記事
list-item横の隙間について


更新履歴 2016.6.6


メンテナンスを行いました
変更点は以下の記事をご参照ください

GirlOnWireメンテナンスのお知らせ


更新履歴 2016.1.9


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



更新履歴 2015.12.4


Google feed api 廃止に伴う新着サムネイル仕様変更

Google自体がこちらのAPIを排除してしまいましたので
この日付以前にDL頂きました方については新着サムネイルが反映されません
お手数ですが再DLをお願い致します


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


がーる おん わいあ ( ゚Д゚)ノ
2015.9.28 審査通過しました ありがとうございます


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様

・ ヘッダーに小さめのカルーセルスライダーを設けました
・ スマホ閲覧時のサイドバーは左からスライドするタイプです
・ imgに class="shadow-attachment" 追加で画像にドロップシャドウ
・ スライダーは取り除けます
・ ページ遷移エフェクトは取り除けます 2016.10.14のメンテナンスで機能削除致しました


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


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




ドミナントカラー

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

例) 51,51,51


rgb(158,86,154) 基本リンク色, ドロワーハンバーガー, ナビゲーションホバー背景色, CONTINIE READING, コメント/ トラバ数アイコン, SNSアイコン, サイト内検索背景色(不透明度0.2) など
rgb(51,51,51) 基本文字色
rgb(180,193,61) カルーセルprev/ nextホバー背景色(不透明度0.4), トップページ記事タイトルホバー色, ページ送り背景色 など
rgb(248,242,250) トップページ記事ヘッダー背景色



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

以下をCSSソース(テンプレ管理画面「下段」)末尾に追加

.name管理人ハンドルネーム {
  background: url(//blog-imgs-82.fc2.com/v/a/n/vanillaice000/wingpurple_A.png) left center no-repeat;
}

緑色の 管理人ハンドルネーム の部分はご自分がいつもコメント欄でお使いの名前に置き換えてください
訪問者コメントは緑 管理人コメントは紫のちょうちょ



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別しています 同じハンネの方がご訪問されると… ごめんなさい (割りきってお使いくださいね)





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


みなさんいつもありがとうございます ( ゚Д゚)ノ
関連記事

Comments 152

There are no comments yet.
クーちゃ  
おはようございます

はじめまして。Grunge_flowerをずっと使わさせて頂いてますm(._.)m
Akiraさんのレスポンシブな作品のサイドバーが横からニュルと出るのが使いやすいので、私もレスポンシブにしたいなぁと欲が出てきました笑。
でもgrunge_flowerが気に入りすぎて変えられません( ̄◇ ̄;)
これはリクエストになりますか?
もし考えて頂けたらとても嬉しいです。。。
是非ご一考ください>_<

2015/09/26 (Sat) 05:35 | EDIT | REPLY |   
Akira  
To クーちゃさん

こんにちは。ありがとうございますe-257
ちょっとメンテも放置気味ですし(ごめんなさい)、レスポンシブバージョンということで作ろうかと思います (´・ω・`)
もしかしたらブログ内限定になるかもなので、ちょこちょこ覗いてください(笑)
長く使って頂いてとっても嬉しいですe-454

2015/09/26 (Sat) 13:02 | EDIT | REPLY |   
duck  
夜分遅くすいません。

はじめまして、duckと申します。

現在Valparaisoを愛用しております。

この記事でGirlOnWireも気になっているのですがどちらからダウンロードできるのでしょうか。
公式のvanillaice (Akira)様の他の作品を見ても有りませんでした。
申請中なのでしょうか?

もし過去記事に記載があって見逃していたらすいません。

2015/09/27 (Sun) 03:41 | EDIT | REPLY |   
Akira  
To duckさん

おはようございます。ありがとうございますe-257

こちら申請はしてるんだけども、まだ承認されてないんですー。
もう一週間経ってますね ( ̄∀ ̄;)
まさかまた...リジェクト? (´・ω・`) ←
今のところそういったお知らせは来ておりません(笑)
今しばらくお待ちくださいね。
なんか担当の方、気まぐれに審査してるみたいなので。
いやホントに(笑)

2015/09/27 (Sun) 08:24 | EDIT | REPLY |   
duck  
ページ遷移エフェクト削除の件について

おはようございます。
申請通るの楽しみにしていたので早速使わせてもらっています。

ページ遷移エフェクトを削除しようと思って下記二箇所を削除したのですが適用すると真っ白になってしまいます。


HTML
<!-- 注)ページ遷移エフェクト不要の方ここから削除 -->
<script src="http://blog-imgs-50.fc2.com/tpljs/v/a/n/vanillaice000/pc/GirlOnWire/201509216065c93.js"></script>
<script>
$(function(){$("#wrapper a").addClass("animsition-link"),$(".side_bar a, a[target=_blank], a[href^=#], .nonmover").removeClass("animsition-link")}),$(function(){$(".animsition").animsition({inClass:"fade-in",outClass:"fade-out",inDuration:1e3,outDuration:800,linkElement:".animsition-link",touchSupport:!0,loading:!0,loadingParentElement:"body",loadingClass:"animsition-loading",unSupportCss:["animation-duration","-webkit-animation-duration","-o-animation-duration"]})}),window.onpageshow=function(n){n.persisted&&window.location.reload()};
</script>
<!-- 注)ページ遷移エフェクト不要の方ここまで削除 -->

CSS
/* 注)ページ遷移エフェクト不要の方ここから削除 */
.animsition,.animsition-overlay{position:relative;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-loading{position:fixed;z-index:100;top:0;width:100%;height:100%;background:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23ccc%22%3E%0A%20%20%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200%20A16%2016%200%200%200%2016%2032%20A16%2016%200%200%200%2016%200%20M16%204%20A12%2012%200%200%201%2016%2028%20A12%2012%200%200%201%2016%204%22/%3E%0A%20%20%3Cpath%20d%3D%22M16%200%20A16%2016%200%200%201%2032%2016%20L28%2016%20A12%2012%200%200%200%2016%204z%22%3E%0A%20%20%20%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2016%2016%22%20to%3D%22360%2016%2016%22%20dur%3D%220.8s%22%20repeatCount%3D%22indefinite%22%20/%3E%0A%20%20%3C/path%3E%0A%3C/svg%3E%0A%0A)center center no-repeat;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-loading:after{font-size:16px;position:fixed;top:50%;width:100%;margin-top:20px;content:'Loading';text-align:center;color:#aaa}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.fade-in{-webkit-animation-name:fade-in;animation-name:fade-in}@-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}.fade-out{-webkit-animation-name:fade-out;animation-name:fade-out}
/* 注)ページ遷移エフェクト不要の方ここまで削除 */


HTMLだけ削除→真っ白
CSSだけ削除→変わらず
HTML、CSSを削除→真っ白

公式からDLしただけの状態で試しても駄目でした。

Win10、64bit 最新のFirefox、最新のIEで試しました。

何か解決方法がわかりましたら教えて頂きたいです。
よろしくお願いします。

2015/09/29 (Tue) 07:54 | EDIT | REPLY |   
Akira  
To duckさん

わー。ごめんなさい ( ̄∀ ̄;)
もう一箇所あるんでした (*_ _)

Ctrl+Fキー検索

<div id="wrapper" class="animsition">

この赤字部分を削除して以下の通り

<div id="wrapper">

これで正常に動作するはずです。
お手数おかけしました (*_ _)
記事内容も訂正しますー!
助かりました。ありがとうございます ^^;

2015/09/29 (Tue) 08:13 | EDIT | REPLY |   
duck  
できました!

早速のレスありがとう御座います!

おかげさまでかなり思い通りの形になりました!
もう、このテンプレ以上のものはそうそう出てこないと思うので
大事に(?)使わせてもらいます!

これからも頑張ってください!

2015/09/29 (Tue) 09:37 | EDIT | REPLY |   
Akira  
To duckさん

お手を煩わせてしまってごめんなさいね。
こちらこそありがとうございますe-454

2015/09/29 (Tue) 10:59 | EDIT | REPLY |   
sawa@Akiraマネージャー(笑)  
サイドバーの出現方法の質問です

このGirlOnWireをColorbox化して、使い始めてちょっとびっくりしたのですが。。。
質問させて下さいね(笑)
スマホでのサイドバーの表示の方法なんですけど、ご説明では

スマホ --- 左スライド

となっていて、iPhone6+Safariでの表示だと、左上の三本線をタップすると、にゅるんってサイドバーが現れますよね。
ところがですよ(笑)iPhone6+Chromeだと、その三本線は表示されず、その代わりに右側の上下スライダーの間にmiddleボタンである「MENU」ボタンが現れて、そのタップでサイドバーが記事下に現れます(笑)

これはAkiraさんが意図的にそのように作られたんでしょうか?
だとしたら、あなたは天才です(笑)
ほんとに驚きました ^^

2015/09/29 (Tue) 13:58 | EDIT | REPLY |   
とろん。  

管理人さん、初めまして。

申請が通るのを待ち焦がれていたので、速攻でDLさせていただきました。

2点質問があるのですが、

トップの女性の画像を変更するコトが可能でしょうか?

あと、文字部分(個別に読むなど)の色の変更は可能でしょうか?


テンプレートに関して素人なので、初歩的な質問でもうわけないのですが、

変更する場所と適正サイズを教えていただけるとありがたいです。

よろしくお願いします。

2015/09/29 (Tue) 20:30 | EDIT | REPLY |   
Akira  
To sawa@Akiraマネージャー(笑)さん

えっ (▪⌔▪)
ちょっとよくわかってない。
すみません凡人で(笑)

今主人のiPhone6 iOS9.0.1 Chromeでやってみたところ、フツー... (´・ω・`)
えっ?(笑)
なんでや?(笑)

ちょっとsawaジャーマネの情報待ちにします (▪⌔▪)

2015/09/29 (Tue) 22:53 | EDIT | REPLY |   
Akira  
To とろん。さん

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

> ヘッダー画像変更の件

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

注)バナー画像変更はここ

訳注に従って変更してくださいませ。
画像のサイズは極端な話、いくつでも良いです(笑)
ただ元画像が小さいとブラウザ幅が大きくなったときに拡大されて画質が落ちますので、なるべく大きいものが良いと思います。
横1200以上が理想的。
大きい画像は容量が重たいですから、専用サイトなどで削減してからお使いになられると良いですね。
参考記事
http://vanillaice000.blog.fc2.com/blog-entry-208.html

画像の位置合わせについてはこちらを参考にどうぞ
http://vanillaice000.blog.fc2.com/blog-entry-213.html

-----------

> 文字色変更

「個別に読む」の文字については全体リンク色と同じになってます。
リンクの色自体を変更されるのであれば
Ctrl+Fキー検索

注)記事内のリンク色はこちら

「個別に読む」の部分だけを変更される場合には

.read_jump_span {
color: カラーコード;
}


上記をCSSソース(テンプレ管理画面「下段」)の末尾に追加してください。
カラーコード参考サイト様
http://www5.plala.or.jp/vaio0630/hp/c_code.htm

よろしくお願いしますe-454

2015/09/29 (Tue) 23:06 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/09/30 (Wed) 07:24 | EDIT | REPLY |   
Akira  
To sawa@Akiraジャーマネさん

え? (▪⌔▪)

ねぇ!ちょっと!これおかしいよ!((((笑)
だってページ送り見て。
数字が変(笑)

えー なにこれ (▪⌔▪)
んでもって主人のiPhone Chromeではなってないよ。
なんでよー!(笑)
ってゆーかお尻!(笑)

Colorboxは私のファイルなんだろうか。
それともジャーマネがご自分で追加したやつ?
ちょっと混乱中 ( ̄∀ ̄;)
しかもie8以下でしか出ちゃいけないバナーが画像にくっついて表示されてるじゃないdeathか。
どゆこと (▪⌔▪)

今日親類の四十九日法要なんです。
なので帰宅次第。申し訳ないであります (*・x・)/

2015/09/30 (Wed) 17:19 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/09/30 (Wed) 19:08 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/09/30 (Wed) 19:17 | EDIT | REPLY |   
sawa@Akiraジャーマネ  
基本に戻って・・・

たびたびごめんなさい。
基本に戻って、ダウンロードしたデフォルトファイルをそのままブログに適用したら、やっぱり私の

iPhone6+iOS9.0.1+Chrome45.0.2454.89

の組み合わせでは先ほどのスクショと同じ表示になってるの (;^_^A アセ
なんなんでしょ?
Safariは相変わらず正常に左からにゅるんってサイドバーが現れます(笑)

なにか、野球の日ハムの大谷くん(笑)みたいに二刀流的にAkiraさんのテンプレが機能してる(爆)
なんとも不思議ですよ (^_^; アハハ…

2015/09/30 (Wed) 21:13 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/10/01 (Thu) 07:43 | EDIT | REPLY |   
Akira  
To sawa@Akiraジャーマネさん

昨日寝ちゃった ( ̄∀ ̄;)
遅くなってごめんなさい (*_ _)

まとめると、ChromeではColorbox適用する云々に関わらずその状態になる、ってことだよね。
今日また主人の貸してもらって見てみるけども、不思議すぎる(笑)

ChromeのUAがかなり独特だ、というのはありますよね (´・ω・`)
独自の慣性スクロールなんかも効いてるよねぇ...。
それからテキスト入力時のパネルも独自のもののようだし。
OSとデバイスの組み合わせってのもあるのかな?
あるのかな って、実際私のiPhone5Sではなってないわけだからあるだろ、みたいな(笑)
ジャーマネいろいろ検証してくれたのですね。
素敵(笑)

今日の夜やってみますね。
お時間使わせちゃってすみません ^^;

2015/10/01 (Thu) 09:23 | EDIT | REPLY |   
sawa@Akiraジャーマネ  
あのですね(笑)

しつこくてごめんなさい(笑)

だって、GirlOnWireのデフォルトのソースに

<div id="pagemiddle"><a href="#secondary" id="go_middle">MENU</a></div>

って書いてあるでしょ(笑)
これって、スマホじゃ表示しない仕様なら何故書いてあるの?って思ったところから「きっとAkiraさんはナイショでこんなTwo ways仕様に作ったのね(笑)」って、邪推したんでした~(笑)

お騒がせしてスミマセンでした~ ^^

2015/10/01 (Thu) 10:45 | EDIT | REPLY |   
匿名コメント  

こんにちは。はじめまして。
Be Happyi-255Girl On Wire使わせて頂いてます。
今までにスライダーが付いているテンプレートはありましたけど記事に乗せた写真が出てくるものはなかったと思います。
初めて見たときは感動して声が出てしまいましたi-228
背景だけ愛犬の写真に変更して大切に使わせて頂きます。
本当にありがとうございましたi-175

2015/10/01 (Thu) 15:22 | EDIT | REPLY |   
タケノコ  

名前が匿名になってしまいましたi-201
失礼しましたi-229

2015/10/01 (Thu) 15:23 | EDIT | REPLY |   
とろん  

早速のレスありがとうございます!

おかげさまで画像の変更が出来ました。
大事に使わせてもらいます~。

2015/10/01 (Thu) 18:14 | EDIT | REPLY |   
Akira  
To sawa@Akiraジャーマネさん

なんかもう色々思案させちゃってすみません(笑)
そして宅の亭主は自由人のチャラ男なので帰って来やしません((((笑)
また明日以降やりますね。
ごめんよー ( ̄∀ ̄;)

2015/10/02 (Fri) 00:49 | EDIT | REPLY |   
Akira  
To タケノコさん

お名前の件はどうぞお気になさらず(笑)

ありがとうございます。
励みになります ( ᐛ )و

2015/10/02 (Fri) 00:50 | EDIT | REPLY |   
Akira  
To とろんさん

できて良かったですーe-257
お疲れ様でしたe-454

2015/10/02 (Fri) 00:51 | EDIT | REPLY |   
sawa@Akiraジャーマネ  
もしかしてなんですが

> なんかもう色々思案させちゃってすみません(笑)

いえいえ、こういう探求って私大好きなんです(笑)

それでですね、夕べふと
『もしかしてこの現象って、PCのChromeとiPhone6のChromeを同期してるからそうなるの?』って思いがして来たんです。
iPhone6+Safariだったら普通に表示してるし。

Akiraさんのヒントになればいいんですけど(;^_^A アセ

2015/10/02 (Fri) 09:09 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/10/02 (Fri) 15:59 | EDIT | REPLY |   
58  

初めてコメントします。
GirlOnWireのテンプレが格好良くて、すごいイイと思いました。

このGirlOnWireでTOPページに記事が表示されるじゃないですか?
記事全文じゃなくタイトルのみのパターンとかって今後出される予定とかありますか?

2015/10/02 (Fri) 16:11 | EDIT | REPLY |   
Akira  
To sawa@Akiraジャーマネさん

ジャーマネ出勤おつです ( ゚Д゚)ノ

すっごい遅くなっちゃってすみませんです (;´Д`)
同期!それは全く考えておりませんでした(笑)
どうなるんだろうね (´・ω・`) ←
「PC表示をリクエスト」ってのがあるでしょう?
そこ押すとおかしなことになる、ってのはわかった((((笑)
同期もちょっとやってみようかなー (´・ω・`)

2015/10/02 (Fri) 20:11 | EDIT | REPLY |   
Akira  
To GirlOnWire記事幅の件 内緒さん

遅くなりました (*_ _)
記事幅変更手順(2手順)

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

#wrapper

2箇所ありますので、最初の方を修正します。

min-width: 80%;

赤字部分を修正して以下の通り

min-width: 90%;


② 上記で修正した #wrapper のすぐ下にある

#float-container

こちらの
width: 80%;
赤字修正で以下の通り

width: 90%;

さらに
max-width: 1200px;
赤字修正で希望の数値に変更ですが、1500ぐらいが妥当だと思います。以下の通り。

max-width: 1500px;

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

お手数おかけします。宜しくお願いしますe-454

2015/10/02 (Fri) 20:19 | EDIT | REPLY |   
Akira  
To 58さん

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

タイトルのみ、というのは文字通り「タイトルのみ」で良いんでしょうか。
薄い紫色の囲いの中に
・カテゴリ
・タイトル
・投稿日時
があって、その下の記事内容はゴッソリ削って、Read moreでジャンプして読んでもらう、ということかしら。

それとも記事を「要約表示に変更」という意味でしょうか。
たぶん前者かな、と思いますので手順ご説明します。

と思ったけど、修正するより説明する方が手間なので作ろうと思います(笑)
少しお時間くださいね。
出来たら記事の最後にZIPフォルダ置いておきます。

2015/10/02 (Fri) 20:25 | EDIT | REPLY |   
sawa@Akiraジャーマネ  
原因判明(笑)

Akiraさん、原因が判明しましたよ~(笑)

ヒントは「PC版サイトをリクエスト」にありました(^_^; アハハ…
私のを見たらそこがグレーアウトしちゃってて触れなくなってました。
あらぁ?って不思議に思って調べたら、レシポンシブなサイト・ブログを表示してから、一度でも「PC表示をリクエスト」をタップしちゃうと、次から同じブログを開くとPC版表示になってしまうんです(爆)
ですから、私が1人騒いでたようになってたの(^_^; アハハ…
だから、一度PC版表示を「閉じて」改めてURL入力から読み込んだら、ちゃんと正常なサイドバー表示になりました~(笑)

と言うことはですよ、やっぱりAkiraさんのレスポンシブなテンプレートはTwo ways仕様に出来てる!ってことなんです(笑)

やっぱり貴女は天才です~。

ああ、これでやっとこの件終われますね~(爆)
ほんとに、いろいろとお騒がせしちゃってすみませんでした~m(_ _)m

2015/10/02 (Fri) 22:23 | EDIT | REPLY |   
Akira  
To sawa@Akiraジャーマネさん

それかーe-447
私もなんですぐ気がつかなかったのか ( ̄∀ ̄;)
私がiPhoneのChromeを使わないのって、PC版リクエストが超ビミョーだからなんでした(笑)
なんか他のブラウザより全体が縮尺されてるような希ガス (´・ω・`)
でもあのドゥルル〜〜ンな慣性スクロールは快感。

もういいじゃんね。
私が天才ってことで ←
捏造だけど((((笑)

ところでMacOSをEl capitanにアップしたらテキスト入力がー ( ̄∀ ̄;)
便利なような不便なような。
それこそビミョーe-455
ジャーマネお疲れサマンサタバサ ( ゚Д゚)ノ

2015/10/03 (Sat) 11:46 | EDIT | REPLY |   
58  
早い対応ありがとうございます。

昨日、早速ダウンロードし少して弄っていましたw

希望通りのタイトルVer.が凄い気に入ってます。

ありがとうゴザイマス。

2015/10/04 (Sun) 14:42 | EDIT | REPLY |   
Akira  
To 58さん

オッケーでしたか。
良かったですー。
カスタマイズお疲れ様でしたe-454

2015/10/05 (Mon) 09:42 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/10/05 (Mon) 11:04 | EDIT | REPLY |   
Akira  
To GirlOnWire記事幅の件 内緒さん

ご報告ありがとうございます。
良かったです。e-454

2015/10/05 (Mon) 11:57 | EDIT | REPLY |   
きろろ  
がんばってみたのですが……

お久しぶりでございます<(_ _)>
このところ、自力でAkiraさんのテンプレートにColorboxを仕込んでいたのですが……

GirlOnWireはどうにもなりません(/_;)

あれ~~~、どこがどう違うのか……わかりません。

LinkはAkiraさんのColorbox,cssを使わせてもらっています。
トリガーもなんとなくですが、出来ていたんですが……

今回はGiveします・゚・(つД`)・゚・ ウェ―ン
お忙しいAkiraさんのお手を煩わせてはいけなと思ったのですが
どうしても、Colorboxが起動しません。

記事に毎回、スクリプトを書き込むという手間をどうにかし
たいのですが
過去記事がありすぎて、自動での表示ができません。

<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>

これをどこに突っ込めばいいかレクチャーをお願いします(/_;)
急ぎませんので、お手すきの時にお願いいたします<(_ _)>

2015/10/10 (Sat) 01:52 | EDIT | REPLY |   
Akira  
To きろろさん

ご無沙汰でございますーe-257

んー。ちょっと色々と整理をした方が良いような気がします。
まず大前提。

① リンクに target="_blank" が指定されているか
これついてないと起動しません。
特にYoutubeは全画面になってしまいます。

② 私が提供しているColobox適用版は「自分でColoboxのファイルを保持していない方」へ向けてです
きろろさんの場合にはご自分でファイルもお持ちですし、独自の実行コードをお持ちですので
通常版の方へファイルを追加していく形です。
Colorbox適用版への導入は内容がコンフリクト(衝突)します。

---------

もしかしたら上二つの見直しで上手く行くかもしれません。
もう少し踏み込んでコード内容で気になる点がいくつか。
分解して説明します。


<script type="text/javascript">
→ type="text/javascript" は不要です。
初期値ですので書く必要なし、というか寧ろ書かない方が良い
<script>
だけでOKです。


$.fn.colorbox.settings.bgOpacity = "0.5";
→不透明度(opacity)指定にfn拡張を使う必要は無いと思いますので書き換えます(後述)
(全てに同じ指定をするのならこれでOKです)


$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
→rel属性を利用している点
<a>タグ(アンカータグ)のrel属性というのは「定義」を持っています。
そして値(""に挟まれる文字列)は任意でつけることはできません
決まった値以外使用してはいけないことになってるんです。
alternate, author, icon 等々
値として勝手な(ちょっと表現悪いですが)文字列を指定した時点でバリデートでエラーが返ってきます。
ここはきろろさんがバリデート(ソースコードの整合性)にこだわりがなければそれで良いです(笑)
でもあんま良くはない ^^;
Colorbox上でのrelはこういう使い方をします ↓

$(".group-photo").colorbox({
rel: "slideshow"
});

意味
「group-photoというクラス名が与えられた要素はグループ化してスライドショーを適用」

そしてこの二行のうち、上の行でもう一点。
これは振り分ける必要があるんだろうか?
一つは fade というグループ分けをして、「エフェクトは初期値の elastic ではなく fade にしたい。」
もう一つは「スライドショーにしたい」
質問事項
・ 画像のエフェクトは常にfadeですか?それともたまにfadeにしたいだけですか?
常にfadeエフェクトを適用するならば分ける必要はありません。
.cpModalでデフォルト化をおすすめ。


$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});

youtubeは置いといて、その他4つ。
えっとですね、アイディー(#名前)やクラス(.名前)というのはコード製作者が任意で付けるものですので、
私としては「推量」「推察」するしかないんです(笑)
ですから「これはたぶんこれをやる為やろうな〜」という推測で書きます(笑)
その上で、きろろさんにとってそれが本当に必要なのかどうかを決めてください。
使わないものであれば書く必要はありません。
コードが長くなって無駄がでるだけですので見極めをお願いします。

#ajax
外部ファイル参照?
iframeで外部(当該ページ以外)ファイルを表示させるための記述...だと思います。
例えばURLを指定して、リンクをクリックしたら該当ページに遷移するのではなく
遷移させずに自分のページに取り込むのがiframeというHTML要素です。
youtubeやdailymotionなどの動画もこの方法で表示させるのが推奨になってます。
youtube用(動画用)の記述は別で設けてありますので、この記述が必要なのかどうか。

#flash
フラッシュコンテンツ表示?
これ要るかな? (´・ω・`)

#google
これは... なんだろう(笑)
ajaxと重複してる気がするのだけれど。
きろろさんが「んー。わかんね (´・ω・`)」な状態なのであれば不要だと思います(笑)

#inline
これはインラインコンテンツの表示用ですよね。
HTMLソース内容を表示することがあるのならばアレですが、「そんなことしたことないな〜 ( ̄∀ ̄;)」ならば不要。

さらにこの3つの名称がアイディーになっているのも気になります。
アイディーというのはユニーク(単一)ですから、同ページ内に一つしか存在してはいけないことになってます。
ページ内に複数あるとエラー。

例)
×
<a id="photo" 〜略〜><img src="画像1">
<a id="photo" 〜略〜><img src="画像2">


<a class="photo" 〜略〜><img src="画像1">
<a class="photo" 〜略〜><img src="画像2">

---------

すっごい長くなりましたので一旦投稿します。
そして長男を駅まで送ってきます(笑)
パシリかよe-442

2015/10/10 (Sat) 09:34 | EDIT | REPLY |   
Akira  
To きろろさん

> 記事に毎回、スクリプトを書き込むという手間を

これなんですけどもね。
どゆ意味? (´・ω・`)
えっと。もしかして記事を書かれる際に毎回記事投稿画面(FC2エディター画面)にコードを貼り付けてる、ってことでしょうかしら。
もしそうでしたら、その必要は無いですよ。
テンプレートの
</body>
の直前に書いてしまえば一度やるだけで済みます。
あとはちゃんと名称(トリガーになるアイディーやクラス)を覚えておけば良いだけです。

で、確認です。

・クラスやアイディーは毎回手入力をしている(JSによる後付けはしていない)
YES or NO?

・毎回手入力をしている場合にはお知らせ頂いた名称を利用している
YES or NO?

上記二つが両方YESであるならば、もう名称はそのまま使うしかないですよね (´・ω・`)
グループ分けなんかはJSで自動で...というのはまず無理なので(個人の選択によるから)、たぶんそうしてると思います。

--------

きろろさんにまずやってほしいこと

① 上のコメントで指摘したように、必要・不要の区分を行う。
② Colorboxのバージョンを確認し、最新のものを入手する。
③ Colorboxを適用したい画像のアンカータグにtarget="_blank"が付いているか確認する。

まずここまでで (´・ω・`)
んで、今から私このテンプレートにColorboxスライドやらなんやら入れてみますので、そちらお待ちください。

2015/10/10 (Sat) 11:32 | EDIT | REPLY |   
Akira  
To きろろさん

記事を出しましたので、ご自分のクラス名やアイディー名と照らし合わせながら確認をお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-258.html

GirlOnWire動作確認済みです。
わかりにくい点ありましたらご指摘くださいませー。

2015/10/10 (Sat) 15:15 | EDIT | REPLY |   
きろろ  
早速、ありがとうございます<(_ _)>

すっごいよくわかりました<(_ _)>

また別記事を立てていただいてありがとうございます。
最初のお返事に従って、テンプレートを合わせて行ったらできましたw

なんか、いつもどこか私……抜けているのかも(ё_ё)

>これなんですけどもね。
どゆ意味? (´・ω・`)
えっと。もしかして記事を書かれる際に毎回記事投稿画面(FC2エディター画面)にコードを貼り付けてる、ってことでしょうかしら。 <

えーと、これはですね。
画像をサムネイルで取り込んで、target_blankのところを
class="cpModal" title="No Title"に書き替えているわけです。

YouTubeなら
<a class='youtube' href="http://www.youtube.com/embed/YOUTUBEの動画ID/rel=0&wmode=transparent"title="「たいとる」"><img src="「サムネイル画像」" width="「幅」" height="「高さ」" /></a>
みたいにテキスト入力して表示させているということです。


自動で、と書いたのはYouTubeのことですw
AkiraさんのColorboxは、Wordpressなどで使っているプラグインみたいに
YouTubeのサムネイル画像が自動取得になっているでしょう?
それが出来たらいいな~、って思ったんです。

なんだか紛らわしくなってしまい申し訳ありません<(_ _)>
いつもいつもご丁寧なレクチャーで助かります。
ありがとうございました。


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

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

2015/10/11 (Sun) 14:57 | EDIT | REPLY |   
Akira  
To きろろさん

ツベのことでしたか(笑)
今target_blank付けないと上手く開かないんです。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-205.html

それから、youtubeの埋め込みコードがちょっと気になる(笑)
パパっと書いたからミスっただけ、かもしれませんので、その際にはスルーで ( ゚Д゚)ノ

<a class='youtube' href="http://www.youtube.com/embed/YOUTUBEの動画ID/rel=0&wmode=transparent"title="「たいとる」"><img src="「サムネイル画像」" width="「幅」" height="「高さ」" /></a>

rel=0
というのがありますよね。
これたぶん効いてなくないですか (´・ω・`)
「関連動画を表示させない」設定だけれども。

//www.youtube.com/embed/動画ID?rel=0

スラッシュ不要 ハテナマーク必要。
一つ目パラメータは「?」で。それ以降は「&」(あんど えー えむ ぴー せみころん)(変換されてしまうので平仮名で表記)で繋ぎます。
wmode=transparent も要らないんじゃないだろうか。
フラッシュプレイヤーで貼り付けてます、なら要るんだろうけど。
今デフォルトがHTML5プレイヤーだから機能してないと思います。
動画を何かと重ねたりすることがある方は必要かもしれません(でもたぶんCSSでやらないと効かない)
だからシンプルにこれで良いような気が。(http: も省略可能)

//www.youtube.com/embed/動画ID?rel=0

<a class="youtube" href="//www.youtube.com/embed/YOUTUBEの動画ID?rel=0" target="_blank" title="タイトル"><img src="画像アドレス" style="width: 数値px; height: auto;"></a>

この中にある rel は<a>タグのrel属性とは全く別のyoutubeAPIの「relation」です。
念のため。

2015/10/11 (Sun) 15:43 | EDIT | REPLY |   
Akira  
To Colorboxの件 内緒さん

いえいえ。構いません(笑)
きろろさんも気にされないと思います。
(きろろさんと類似要件です。「横から失礼します〜」の一文がありましたもので。)

もう一つのコメントの方にまとめますね。

2015/10/11 (Sun) 15:46 | EDIT | REPLY |   
きろろ  
確かにw

ツベが動きませんでしたw

レクチャーどおり、
//www.youtube.com/embed/動画ID?rel=0 に書き替えたら
表示できました<(_ _)>

何度も、お手数をおかけしてすみません<(_ _)>

自力でなんとか出来るようにならないとダメだと思うのですが、
つい、頼ってしまう(ё_ё)
すみません!<(_ _)>

2015/10/12 (Mon) 00:36 | EDIT | REPLY |   
Akira  
To きろろさん

いえいえ。どうぞお気になさらず。
お役に立てれば幸いですe-257

2015/10/12 (Mon) 02:08 | EDIT | REPLY |   
沙姫  
「記事タイトル」と「INDEX」から個別記事を表示した場合

こんばんは^^
いつも、大変お世話になっております。
「GirlOnWire」を、お借りしております。
以前も書かせていただきましたが、私の大のお気に入りのテンプレートです♪

それでお忙しいのに、お尋ねしてよいか迷ったのですが、
5日間くらい5時間ネットで検索しても、分からないことがありまして、
現在はランキングのバナーとブックマークのタグを、下記の所に、貼っているのですが、「記事タイトル」と「INDEX」から個別記事を表示すると、
なぜかランキングバナーもFC2拍手も、どちらも表示されなくなってしまいます。
表示されるようにするには、どうしたらよろしいでしょうか?
※「FC2拍手」とは、通常のブログ拍手とは違い、別に登録してお礼ページが出る拍手です。

それとAkira様の「ランキングバナーを常に拍手の前に入れたい」
に書かれている方法もやってみたのですが、FC2拍手のコードが、
上手く表示されず、上手くいきませんでした。

できましたら、お時間のある時に、ご返答いただけると、大変有り難いです。
スマホ版のテンプレートも、Akira様の「Grunge_flower_sp_p」を、お借りしております。
これも、タイトルだけではなく、少し内容も表示されるので、お気に入りです^^
どうぞよろしく、お願いいたしますm(__)m

【バナー貼っている位置】
----------------------------

<%topentry_body>
<!--more_link-->
<%topentry_more>
★ここにランキングバナーとその他のタグ挿入★
<!--/more_link-->
★ここにFC2拍手のタグ挿入★

<!--more-->
<%topentry_more>
<!--/more-->
----------------------------

2015/11/06 (Fri) 19:13 | EDIT | REPLY |   
Akira  
To 沙姫さん

ありがとうございますe-257
で、なるほど。
外部プラグイン的な方の「拍手」なのですね。
スクリプトを任意の場所に貼り付ける系の。

お読み頂きました記事内容は、個人設定ページから利用可能の「拍手」への対策です。
沙姫さんの場合にはまた別のやり方です。

GirlOnWireのトップページの記事一覧と個別記事のページの構成が若干異なりますので、
スクリプト+ランキングバナーを貼り付ける場所が二箇所あります。

まずひとつめ(トップページ用)
これは沙姫さんが既に貼られた場所で良いと思います。
そのまま残してください

二箇所目

Ctrl+Fキー検索

<!--permanent_area-->
<!--more-->
<div class="more2">
<%topentry_more>
</div><!--/read_more-->
<!--/more-->
<!--/permanent_area-->

この中に組み込みますので以下の通り

<!--permanent_area-->
<!--more-->
<div class="more2">
<%topentry_more>
</div><!--/read_more-->
<!--/more-->
バナー内容
拍手タグ内容
<!--/permanent_area-->



上記手順を踏まれますと、ランキングバナーと拍手の位置が
「関連記事の下」になります。
これが良いかどうかですよね。
関連記事とバナーの位置を交換したい場合にはまたちょっと手続きが必要です
(html内容の追加が要ります)
まずは一度ご確認頂きまして、位置についてどうされるかお返事くださいね。
お手数おかけしますe-257

2015/11/07 (Sat) 09:39 | EDIT | REPLY |   
沙姫  
お礼・出来ました!(^^)!

こんにちは~^^
Akira様、大変お忙しい中を、即答していただきまして、感謝感激ですぅ♪
ご指示どおりに、いたしましたら、すぐにできました。
これで、「INDEXページからと、タイトルリンクからの個別記事」から飛んでも、別登録の「FC2拍手」と「ランキングバナー」もすべてのリンクからのページで、表示されるようになりました。
まるで魔法をかけるように、ご指導いただけて、本当に嬉しいです。

うちのサイトは画像などを、お借りしているものが多いので、著作権のことでサイドバーに、管理者様のリンクを貼らせていただいております。
Akira様も、リンクさせていただいておりますので、どうぞよろしくお願いいたします。

Akira様のサイトは、テンプレートだけではなく、「正しいコピーの仕方」など、大変お勉強になるので、またお邪魔させていただきます。
今後も、大変でしょうけれど、素晴らしい作品を、期待しております^^
本当に、どうもありがとうございました。

2015/11/07 (Sat) 11:33 | EDIT | REPLY |   
沙姫  
追伸 バナーの出る位置について

位置については、トップページからの通常表示の場合は、思った位置に出ています。「INDXとタイトルと個別に読む」場合のみ、バナーが「関連記事の下」に出ますが、今のところ私の場合はこの位置で結構です。
この位置で、今後差し障りのある場合は、また、お尋ねさせていただくと思いますが、その節はどうぞよろしく、お願いいたします。

本当にご親切に、どうもありがとうございました^^

2015/11/07 (Sat) 13:02 | EDIT | REPLY |   
Akira  
To 沙姫さん

位置的なことも大丈夫でしたか。
良かったですe-454
リンクのお気遣いまで頂きましてありがとうございます。
また何かありましたらお気軽にどうぞ。
お疲れ様でしたe-257

2015/11/07 (Sat) 14:58 | EDIT | REPLY |   
沙姫  
トップ画面の最新記事のnew!(赤字・小)の数の追加について

いつも、お世話になっております。
先日も、ありがとうございました^^

実はトップ画面で、最新記事の横に赤字で小さな「new!」が付きますよね。
この「new!」を最新記事1つだけではなく、もうひとつ前の記事にも、付けたいのですが、どのようにすればよろしいでしょうか?
合計で2つの「new!」を、付けたいのです。

大変お忙しい中を、毎度恐れ入りますが、どうぞよろしくお願いいたします。

2015/11/11 (Wed) 14:31 | EDIT | REPLY |   
沙姫  
質問2 プラグインのフリーエリアを記事の最上部に設置について

こんばんは。度々恐れ入ります。
今、公式プラグインの「フリーエリア」を、TOP画面の記事の最上部に設置しようとしたのですが、プラグインカテゴリを、「1または2」に設定すると、両方共サイドバーに表示され、「3」に設定すると、何も表示されません。

フリーエリアを、「TOP画面の記事の最上部に1つだけ設置」するには、どうしたらよろしいでしょうか?

お忙しい中を、恐れ入りますが、どうぞよろしくお願いいたします^^

2015/11/11 (Wed) 18:23 | EDIT | REPLY |   
Akira  
To 沙姫さん

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

> newマークの件

newマークは時間軸で動いており、記事の1件目・2件目... という概念とは異なります。
投稿された時間から指定した一定時間の表示です。
ですから○○件目に〜 という内容になりますと主旨が違ってきますし、newマーク本来の意味が失われてしまいます。

記事の投稿頻度にもよりますが、マークの表示時間を引き伸ばされてはいかがでしょうか。
Ctrl+Fキー検索

var t=new Date,s=48

赤字の部分が表示時間指定です。
デフォルトは48H(2日間)ですので、こちらを3日表示にされるなら72に、4日ならば96に変更してください。
1件目・2件目に、という記事カウントでの表示にどうしても変更したいという場合にはできなくはないですが、FC2の使用上「投稿された記事の最新から1件目・2件目」ではなく
「ページ内にある記事の一番上と2番目」という情報取得になりますので、
トップページのページ送りから別のページを開いたときに1・2件目にnewがついてしまうことになります。
指定時間を変更されまして様子をご覧頂ければと思います。

2015/11/11 (Wed) 21:44 | EDIT | REPLY |   
Akira  
To 沙姫さん

> プラグインの件

まずFC2の仕様として、同一ブログ内に同じプラグイン(グループ含む)を重複して表示させることはできないと思ってください。
例えばhtmlソース内にプラグイン3が2つ書いてある、といったような記述は誤動作を起こします。

<!--plugin_first-->〜<!--/plugin_first-->
<!--plugin_second-->〜<!--/plugin_second-->
<!--plugin_third-->〜<!--/plugin_third-->

これが各ひとつづつ「のみ」になっていなければいけません。
ですから「複製」ではなく「移動」ですね。
まずここが正しいかどうかの確認。
特にJavascript を利用しているプラグインについては重複は絶対NGだと思ってください。

で、スタイリングの点からですが、
現在サイドバーに入っているものを記事上に、ということになりますと、サイドバーの横幅と記事上の横幅とは随分差がありますよね。
現在の状態はプラグイン1〜3まで全て同じスタイルが適用されていますので、場所が違えば当然その場所に合うようなサイズ設定やスタイリングの必要が出てきます。
それを踏まえた上でどうされるか方針をまずお決めになられまして、
おすすめとしてはプラグインとして扱うのではなく、該当プラグインを「非表示」にした状態で、直接htmlソース内に内容を記述されると良いかな、と思います。
必ずしも「プラグイン」である必要はないわけです。

で、出力された内容につきましては私の方でそれがプラグイン2なのか3なのか、判別ができません。
ですので自己責任の上でカスタマイズして頂く、という形になります。
FC2仕様と絡めてご判断をお願いしますー!

2015/11/11 (Wed) 21:55 | EDIT | REPLY |   
沙姫  
newとプラグインの件

こんにちは^^
いつもお忙しいのに、詳しくご説明いただきまして、ありがとうございます。
1.「newマークの件」
これは、ご指示どおりに、「表示時間指定」を4日で96Hに変更しました。
2.「プラグインの件」
こんなに難しいこととは知らず(@_@;)、お尋ねしてしまい、すみませんでした。結局、考えた末に、現状のまま「未来記事」を最上部へ表示しておくこと にいたしました。それがいちばん、簡単だと思いました。

それと、もうひとつお尋ねしたいのですが、
Q.ページの最下に表示される、「What'new!?」のことなのですが、
この左側の写真の部分が、私は「No image」となっていますが、ここは写 真が表示されるのですか?試しに、新しい記事にjpag画像を、貼り付けて みましたが、何も表示されません。
「どういう場合に、何が表示されるのでしょうか?」お手すきの時にで  も、お返事いただければ、結構です。どうぞよろしくお願いします。

今回も詳しくご説明していただきまして、本当に、どうもありがとうございました。それと同時に、お忙しいのに、お時間を取らせてしまいまして、申し訳ありませんでしたm(__)m

2015/11/12 (Thu) 12:58 | EDIT | REPLY |   
Akira  
To 沙姫さん

お手数おかけしておりますー!

> 新着の「サムネイル画像」がNo imageの件

恐らくブログ個人設定のRSSの詳細設定の問題だと思います。
以下の記事内容をご覧ください

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

既に目は通して頂いたと思うんだけれども、この項を追加したのが最近なものですから見落としがあるのかもしれません。
すみません ^^;
RSSの表示が「全文」になっているかどうかがポイントだと思いますので、一度ご確認くださいませ。

* 取得できる情報 = RSSとして配信が済んでいる記事
* ブログに表示できる文字数 = テンプレソース内で制御(変更したい場合はお知らせください)
* 取得できるサムネイル = 記事の「本文の編集」内に記載されている一番最初の画像(絵文字含む)
* ブログに表示できる最大件数 = 8件(デフォルトは4件 こちらも変更したい場合はお知らせください)

2015/11/12 (Thu) 14:14 | EDIT | REPLY |   
沙姫  
新着の「サムネイル画像」がNo imageの件

こんにちは~^^
いつもお忙しい中を、迅速にお返事をいただいて、大変、恐縮しております。
ご指示のとおりに、「RSS発信の状態をMAXの8件・全文に切り換え」にしましたら、imageがちゃんと表示されました!(^^)!

私の場合はRSSを10件・一部表示にしていたので、表示されなかったようです。
また、「ご質問の前に・・・」を、見落としておりまして、お手数をお掛けしまして申し訳ございませんでした。
本当にどうもありがとうございました。

2015/11/12 (Thu) 16:06 | EDIT | REPLY |   
沙姫  
コメント欄の太字についてのご報告

追伸です。
これは、ご報告です。
「GirlOnWire」のテンプレートのコメント記入の時に、試しに一部の語句だけ 例)「春爛漫」などを、太字に設定してみたとろ「スパム判定」となってしまいました。

それでサイト内を探してみましたら、下記の記事に書いてありました。

「太字について」-雑記
http://vanillaice000.blog.fc2.com/blog-entry-187.html

このご指示のとおりに、CSSに追加したところ、普通にコメントを投稿できました。
これは既に解決済みですので、ご安心くださいませ^^

2015/11/12 (Thu) 16:29 | EDIT | REPLY |   
Akira  
To 沙姫さん

お返事大変遅くなりましたー!

表示されたようで安心しましたe-454
RSSの表示件数は10件でも大丈夫です。
サムネイル用に取得できるのは8件までですので、それ「以上」の数字であれば理想的、ということです。
そこは沙姫さんにお任せします。

----------

strongの件

コメント欄は太字にsrtongを利用してるんですよね (´・ω・`)
これもう変えて欲しい!(笑)
strongはとても強い強調なので、本来はコメント欄などで多用するものではないんですよねぇ (´・ω・`)
ここはFC2さんの対応待ちで ^^;

2015/11/13 (Fri) 16:22 | EDIT | REPLY |   
沙姫  
記事本文のフォントサイズの変更について

こんばんは。日頃、大変お世話になっております^^
実は今回、「記事本文のみ」のフォントサイズを、14pxにしたいのです。しかし「body { /* 注)基本フォント関連 */」の項目で操作してしまうと、全部のフォントが14pxになってしまいます。記事本文のみ(追記・個別記事を含む)のサイズの変更はどのようにしたらよいでしょうか?

大変お忙しい中を、毎度申し訳ありませんが、どうぞよろしくお願いいたします。

2015/11/27 (Fri) 20:48 | EDIT | REPLY |   
Akira  
To 沙姫さん

いつもありがとうございます

> 記事本文のフォントを大きく

以下をCtrl+Fキー検索

.inner-contents {
margin-bottom: 20px;
}

ここに一部追加で以下の通り

.inner-contents {
margin-bottom: 20px;
font-size: 14px;
}

よろしくお願いします

2015/11/27 (Fri) 22:25 | EDIT | REPLY |   
沙姫  
お礼:できました^^

こんばんは。こちらこそ、いつもありがとうございます。お忙しい中を、早速お教えいただいて大感謝です♪
できましたv-221魔法の呪文を、どうもありがとうございました。

これから忘年会のシーズンになりますので、Akiraさんも体調を崩さないように、お気をつけくださいネ^^

2015/11/28 (Sat) 00:50 | EDIT | REPLY |   
Akira  
To 沙姫さん

お返事大変遅くなりました (*_ _)
ご希望に添えたようでよかったです

これからかきいれどきで時間が〜 ( ̄∀ ̄;)
お気遣いありがとうです (・ω・)ゞ

2015/11/30 (Mon) 15:01 | EDIT | REPLY |   
きっぷす  
プロフ写真とカルーセルについて教えてください

初めましてこんにちは。
いつも素敵なテンプレートありがとうございます♪♪

さて、「プロフィール写真」と「カルーセル?(ヘッダーで動いている記事一覧)」を丸型から四角にしたいのですが、カスタマイズ可能であれば方法を教えてください。

お願いしますm(_ _)m

2015/12/23 (Wed) 16:09 | EDIT | REPLY |   
Akira  
To きっぷすさん

ありがとうございます

> プロフ写真を丸から四角へ

以下をCtrl+Fキー検索

.plugin-myimage img {
width: 150px;
height: 150px;
border-radius: 50%;
}

以下の通り修正

.plugin-myimage img {
width: 150px;
height: auto;
}



横幅を150px に設定してありますが、任意の数字に変更できます。
サイドバーの最大横幅が240pxですので、それ以内でお願いします。

-------

> カルーセルの件

こちらははじめから四角だと思うのですけれども (´・ω・`)
ちょっと鈍くてすみません。
カルーセルを丸から四角、というのはどういった意味合いでしょうか。
お返事待ちにしておきますね。
よろしくお願いします。

2015/12/23 (Wed) 17:18 | EDIT | REPLY |   
カルーセルについて  
To Akiraさん

すいません。(ノД`ll)

カルーセルは逆に四角から丸にする場合の方法を教えてください。

2015/12/23 (Wed) 17:23 | EDIT | REPLY |   
Akira  
To カルーセルについてさん

逆でしたか(笑)

以下をCtrl+Fキー検索

.imgLiquidFill {
position: absolute;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
top: 0;
right: 0;
bottom: 0;
left: 0;
}

一部追加で以下の通り。

.imgLiquidFill {
position: absolute;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
}


続きまして検索

.inner-image-parent:before {
padding-top: 60%;
display: block;
content: "";
}

上記を削除して
以下を追加(差し替え)

.item-cell-left {
width: 30%;
}

.item-cell-right {
width: 70%;;
}



レスポンシブですのでスマホ版の調整があります。
ここまでの内容で大丈夫かとは思いますが、修正されましたらブラウザ横幅をなるべく小さくしてご確認ください。
よろしくお願いしますー。

2015/12/23 (Wed) 17:47 | EDIT | REPLY |   
きっぷす  
お礼

ありがとうございます♪♪
おかげで、上手くカスタマイズできましたv( ̄∇ ̄)

これからも、よろしくお願いします!!

2015/12/23 (Wed) 18:17 | EDIT | REPLY |   
Akira  
To きっぷすさん

安心しました。
お疲れ様でした

2015/12/24 (Thu) 17:04 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

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

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

2015/12/28 (Mon) 09:15 | EDIT | REPLY |   
Akira  
To GirlOnWire トップ画像etcの件 内緒さん

ありがとうございます

ひとつづつ整理していきますね。
> トップ画像変更したらスマホ閲覧時に拡大される

まずこちらですが、カスタマイズされます際に変更すべき箇所は1箇所(1行)だけです。
Ctrl+Fキー検索

background: url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/20150812074313061.jpg) center center no-repeat; /* 注)バナー画像変更はここ */

http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/20150812074313061.jpgの画像アドレスを差し替えるだけです。
それ以外に何か追加、あるいは削除しているのであれば、その作業は不要であり間違いです。
まずそこをご確認ください。
ソース内容としては「デバイス幅に合わせて指定範囲に全面表示」というものですので、スマホ側で拡大されるというのはちょっと考えにくいかなー と (´・ω・`)
ただ、デバイス(OS)によってはCSSプロパティが誤解釈されたりすることはあります(バグ)
で、拝見しないことにはなんとも対処ができませんので、上記をご確認頂いた上でまだおかしいということであれば、
鍵付きで構いませんのでURLをお書き添えください。
そしてご利用のデバイス名とOSバージョン(例: Xperia Android4 など)も教えて下さいね。

2015/12/28 (Mon) 14:27 | EDIT | REPLY |   
Akira  
To GirlOnWire トップ画像etcの件 内緒さん②

> カルーセルを削除しても画像の縦サイズは保持したい件

カルーセルは削除済み、と仮定します。
そのまま縦サイズを大きくすると文字の上下バランスがおかしくなりますので、以下の手順をどうぞ。
Ctrl+Fキー検索。

#blog-name-container {
width: 100%;
max-width: 900px;
display: table;
padding: 80px 5px;

赤字部分を修正して以下の通り

#blog-name-container {
width: 100%;
max-width: 900px;
display: table;
padding: ブログタイトル上の空白px 5px 80px;

末尾の80pxの方はブログタイトル+サブタイトルと、その下にあるナビゲーションとの距離ですので見た目を確認しながら調整をお願いします。
もう1箇所

#navigation-container {
width: 100%;
padding: 10px 2px 70px;

赤字部分を修正して以下の通り。

#navigation-container {
width: 100%;
padding: 10px 2px ナビゲーション下の空白px;

赤字部分がナビゲーション下の空白です。
ここの数値と最初に修正した「ブログタイトル上の空白」を大きくすることで画像の縦サイズを大きくできます。
「ブログタイトル上の空白」と「ナビゲーション下の空白」をほぼ同じ数字にされると良いと思います。


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

> ページ頭&最後尾へ移動のアロー

これはページ内スクロールのことでお間違いないでしょうか。
こちらの該当箇所は以下の通り。検索。

#pagetop a, #pagebottom a, #pagetop-sp a, #pagebottom-sp a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
}

一部追加で以下の通り

#pagetop a, #pagebottom a, #pagetop-sp a, #pagebottom-sp a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
color: カラーコード;
}

もう1箇所。検索。

#pagemiddle a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
font-family: 'Poiret One', cursive;
}

一部追加で以下の通り。

#pagemiddle a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
font-family: 'Poiret One', cursive;
color: カラーコード;
}

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

> 一気に変更

これはhtmlエディターをお持ちであれば可能です。
「置換」という機能を使います。
各エディターによって操作方法は異なりますので、ここで「こうやります。」とは言えないです。
ごめんなさいね ^^;
ブラウザ画面上での操作でしたら無理です。
そしてそういった「タグ」というのも存在しません。
タグというのはhtml要素のことを指します。こういうの ↓
<a>
<div>
<table>

装飾を担うのはCSSです (・ω・)ゞ

ブラウザは何をお使いでしょうか。
Chromeを例に取りますと、
変更したいな、と思う箇所の上にマウスを置いて右クリック→検証
すると該当箇所のCSS内容が出てきます。
その中の

rgb(数字,数字,数字)

あるいは

rgba(数字,数字,数字,数字)

こちらが色コードです。
この色コードをコピーされまして、エディター内で「置換」機能を利用して一括変更、というができますよ。
注意としては rgb と rgba は別もので、rgba というのは不透明度を指定するものです。
最初の3つの数字までがカラーコード。末尾のカンマを含む数字が不透明度です。
例)
rgba(0,0,0,.5)

意味 --- カラーコードは「黒」で不透明度は「0.5」(小数点の前は省略)

*置換による一括変換をお使いになると思わぬ部分の色も変更されてしまうことがあります。
なのであまり過信しないよう注意です (●'ω')ノ
わかりにくい点がありましたらお気軽にお尋ねくださいませー

2015/12/28 (Mon) 14:53 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/12/28 (Mon) 16:48 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/12/28 (Mon) 17:30 | EDIT | REPLY |   
Akira  
To GirlOnWire トップ画像の件 内緒さん 壱

今拝見しましたー。
トップ画の部分、現在こうなってます ↓

background: url(画像アドレス) fixed top 44% right 58% no-repeat;

これね、ダメなんです (´・ω・`)
fixed
という記述がありますよね。
これ今ショートハンド(略式・一括記述)で記述していますが、これらを分解するとこうなります。

background-image: url(アドレス);
background-attachment: fixed;
background-position: top 44% right 58%;
background-repeat: no-repeat;

* 注意
background-positionはそのまま抜き出しましたが、
最初の値が水平方向、次に垂直ですから記述順序が逆です *

この中のbackground-attachment(ばっくぐらうんど あたっちめんと)というプロパティですが、
現在スマホでは正しく機能しません。
これは下層にブラウザの左隅を基準として背景を敷く、というものですが、非常にバグが多いプロパティなんですね (´・ω・`)
恐らくスクロール時に画像を連動させたくない(固定したい)ので利用したのだろうと思いますが、現在は「使ってはいけないプロパティ」の代表格です。
(iPhone --- 実装済みだがバグる --- background-size: cover; との併用で背景が拡大表示されて解像度がめちゃくちゃなことになる/ 単体では固定されず単なる繰り返しになる)
Android --- 最近実装されたが同じバグあり)
拝見したところまさしくattachmentの典型的バグ表示でございます(笑)

形状は現在のものを維持したい、ということで良いでしょうか。
スクロール時に背景が固定、という意味です。
こちらを実現するには
background-attachment: fixed;
ではなく
position: fixed;
を利用します。

で、topの44% そして rightの58%
こちらは指定する必要は無いように思います。
ここは一度修正されました上で決めてください。
で、このパターンだとちょっとややこしいというかですね。
htmlソースも一つ入れ子を増やさなければいけません。


------ ① htmlに追加

Ctrl+Fキー検索

<div id="float-container" class="cf">

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

<div id="whole-container">


続いて検索。

<div class="push"></div>

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

</div>

------ ② CSS修正

検索
#banner, #another-banner {
background: url(画像アドレス) fixed top 44% right 58% no-repeat;
background-size: cover;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
}

こちらはご自分で手を加えた箇所ですね。
赤字部分を以下の通り修正、青字部分削除。

#banner, #another-banner {
background: transparent;
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
}


------- ③CSS追加

検索。

body { /* 注)基本フォント関連 */
省略
}

このすぐ「下」に以下を追加。

body:before {
content: "";
background: url(トップ画像アドレス) center center no-repeat;
background-size: cover;
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 600px;
}


赤字部分のheightの数値なんですけどもね。
これ本当は指定するべきではないんです。
でもこのパターンでは仕方ないです (´・ω・`)
ちょっと余裕を見た数値が良いと思いますので600pxが妥当か...。
ここは見た目を確認しながら調整してください。
これ以上小さい数値は『なし』だと思って良いです。


------- ④CSS修正及び追加

検索。

#wrapper {
background-image: url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/backwewo.jpg); /* 注)ブログ全体背景 削除すると白背景に */
省略
}

青字部分(URL含む)を削除したらこのすぐ「下」に以下を追加

#whole-container {
width: 100%;
background-image: url(背景画像アドレス);
}


--------

これでいけると思います。
で、一つお願いなのですが。
FC2の検索バーはできれば非表示にして頂いた方が(笑)
今気づきましたが、以前よりさらにひどいことになっておりますー(タブレット表示)
FC2検索バーを無理やり画面内に収めている結果、コンテンツ全体のサイズが狂ってしまいます。
FC2は何を考えているのでしょう((((笑)
これはひどい ( ̄∀ ̄;)
FC2検索バーを非表示にするだけで解決します。
ご検討ください(笑)

2015/12/28 (Mon) 23:37 | EDIT | REPLY |   
Akira  
To GirlOnWire トップ画像の件 内緒さん 弐

エディターについてはおっしゃる通りです。
コピペでエディターに移して、修正後コピペでエディターからFC2のテンプレ管理画面に戻す という手順です。
カラーコードは右クリック> 検証 を上手く活用されると良いですね。
(Firefoxでも同じ機能があります)

後はローディング中にトップ画像が表示されっぱなしになります。
元々が固定画像で作成されたわけではありませんので、今回はこれでご容赦ください (*_ _)

スマホ画面、タブレット画面を考慮するのならば『background-attachmentは使わない』というのも知っておくと良いと思います。
ご存知ない方もまだ割りといらっしゃいます (´・ω・`)

2015/12/28 (Mon) 23:40 | EDIT | REPLY |   
Akira  
To GirlOnWire トップ画像の件 内緒さん 参

> 矢印の周りの枠と背景色

該当箇所は以下の5箇所です。

#pagetop {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}

#pagebottom {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}

#pagetop-sp {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}

#pagebottom-sp {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}

#pagemiddle {
省略
border: 1px solid rgba(158,86,154,.5);
background: rgba(255,255,255,.4);
省略
}


一行目 --- 枠の色指定(不透明度0.5)
二行目 --- 背景(不透明度0.4)
よろしくお願いします (・ω・)ゞ

2015/12/28 (Mon) 23:56 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/01/01 (Fri) 20:10 | EDIT | REPLY |   
mifune  
検索バー

消せました!!!消せること知らなんだ…!ありがとうございます!!

2016/01/01 (Fri) 20:16 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/01/03 (Sun) 10:07 | EDIT | REPLY |   
Akira  
To mifuneさん

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

検索バーは任意表示ですー。
以外とご存知ない方も多いみたい。
お疲れ様です

2016/01/03 (Sun) 16:10 | EDIT | REPLY |   
Akira  
To GirlOnWire タイトル画像の件 内緒さん

ありがとうございます

ブログタイトルをテキストから画像に変更したい、ということでお間違いないでしょうか。
Ctrl+Fキー検索(htmlソース内です)。

<div id="blog-name-container-cell">
<h1 class="blog-title animated zoomIn"><a href="<%url>"><%blog_name></a></h1>
<p class="sub-title"><%introduction></p>
</div>


赤字がブログタイトル、青字がサブタイトルです。
差し替えたい画像がこの2つを兼ねているかどうかが私からは不明ですが、ここをまずご自分で方針をお決めになってください。
共に画像になっている(一枚の画像の中にブログタイトルもサブタイトルも入っている)方がレイアウトは楽だと思います。
そしてレスポンシブですからデバイスが変更されますと画像は縮小されます。
パソコンでのサイズだけを考えてしまうと、スマホで閲覧した時に読めないほど小さくなってしまうことがあります。
そちらも調整をお願いします。
(横300px程度になってもしっかり目視確認できるようなサイズ設定)
画像はデバイスのサイズに合わせて文字が下へ繰り越す、というのが不可能ですからよくよくお考えになって元サイズをお決めくださいね。

<%blog_name>を以下の通り変更

<img src="タイトル画像アドレス" alt="代替テキスト">

タイトル部分のみ画像であれば上記の通り。
サブタイトルも画像内に含まれるのであれば青字部分は削除してください。
それから、CSSアニメーションが不要(というか使えない)になりますので、

<h1 class="blog-title animated zoomIn">

赤字部分を削除して以下の通り

<h1 class="blog-title">

さらにCSSソース内から以下をCtrl+Fキー検索、赤字部分削除

.blog-title {
display: inline-block;
line-height: 1.2;
padding: 0 40px 5px;
background: url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/wingleft.png) left center no-repeat,
url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/wingright.png) right center no-repeat;

}

.blog-title a { /* 注)ブログタイトルフォント関連 */
font-family: 'Poiret One', cursive; /* 注)タイトルが日本語の方はこの行を削除するとMacはヒラギノWindowsはメイリオになります */
font-size: 40px;
color: white;
text-shadow: 2px 4px 3px rgba(0,0,0,0.2);
}

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}

@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}

50% {
opacity: 1;
}
}

.zoomIn {
animation-name: zoomIn;
}


よろしくお願いします。

-------

なんとなくご質問の主旨に沿っていないような気もしますので、私が内容を取り違えているようでしたらご指摘ください(笑)

2016/01/03 (Sun) 16:26 | EDIT | REPLY |   
きろろ  

GirlOnWireを諦められなくて、
こちらの説明と首っ引きで、colorboxの導入をした結果……
できましたよ~。
あんなにできなかったのに(>_<)
やっぱり、説明をちゃんと読めばできるんですね!
画像のポップアップもYouTubeのポップアップも
記事内に書き込むソースを書き替えずにすんでいます。
ひゃ! 嬉しくてお知らせまで。

あと、やはりAdelのソースが欲しいです。
お願いしてもよろしいですか。
あとのカスタマイズはレクチャーしていただければ
頑張りますe-271

2016/03/10 (Thu) 05:13 | EDIT | REPLY |   
Akira  
To きろろさん

わー。
出来て良かった((((笑)
ちょっとした間違いや勘違いって結構ありますよね。
なんでこんなこと気づかんかったんや
的なやつ(笑)

装飾枠の件ですけれども、
あちらのサイトの既存のものをまずご覧頂いて、お気に召すものがあればタイトルをお伝えください。
んで、私集中力が途切れるともう嫌になっちゃうんですよ。
そういう事情で「ほぼ完成してるけどなんとなく中途半端で放置 = 未公開」
なものがたくさんあります((((笑)
未公開のものはこれからスクショ撮ってコメント欄に追記しますので、
そちらもご覧になってくださいませー。

-----

未公開のものはこちら ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sample1_zpsdhnorods.jpg

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sample2_zps3gvblnvj.jpg

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sample3_zpsnu83jgsc.jpg

画像小さくて申し訳ないです。
どれが合うか、というのはきろろさんにしか決められません。
背景というか、枠部分の画像を変えるのは簡単ですので、とりあえず何か一つまず選らんで練習してみることです (´・ω・`)

2016/03/10 (Thu) 09:51 | EDIT | REPLY |   
きろろ  

できてしまいましたσ(^◇^;)
Akiraさんの新作、colorboxの導入。
実は自分のcssを使って導入したんですね。
行けないかな? 行けるかな? 半信半疑で。
結果、ちゃんと動作したんです。
で、もしかしたら? って思ったら寝ていられなくてw
明け方目がさえて、こちらの説明書をもう一度頭から読み直して、
これは自分のオリジナルcssを使わないとダメ? ってことに気づいたんですよw
よく読みもしないで……随分とお世話をおかけしました。

装飾枠の件ですが、
サイトに行ってみました。
ここはどういうサイトなんでしょうか?
FC2tempとあることから推測すると、Akiraさんのサイトですか?
こういうことに疎くすみませんe-443

装飾枠、既存のものを探してきますv-355

2016/03/10 (Thu) 15:29 | EDIT | REPLY |   
Akira  
To きろろさん

画像のサイトのことかしら。
Photobucketという単なる画像ホスティングサービスです(笑)
有料会員なので使わないと損!
ぐらいの感じで、画像類はなるべくそちらへアップロードしております。
FC2のストレージをあまり消費したくないものでー。

2016/03/10 (Thu) 16:54 | EDIT | REPLY |   
きろろ  

なるほどw
レンタルサーバー的な場所なんですね。
はじめて知りました。
テンプレートを作成していると
素材になる画像とか確かに重いですよねぇ。
FC2のストレージなんて、気にかけたこともありませんでしたw

装飾枠、今片っ端に見させていただいております。
お願いする時は、こちらのコメントに繋げさせていただきますね<(_ _)>

2016/03/10 (Thu) 23:42 | EDIT | REPLY |   
Akira  
To きろろさん

一般ユーザーさんはストレージを気にする必要はほぼ無いです。
テンプレートやってるとやっぱりちょっとは気にしないといかんかなー、ぐらいです(笑)

はい。枠の件了解致しました

2016/03/11 (Fri) 10:12 | EDIT | REPLY |   
きろろ  

装飾枠の件でないのですが……
こちらのテンプレートを現在使用しているので
こちらで質問させていただきます。

プロフィールの画像の件です。
〇で切り抜かれているわけですが、
どうも縦長にストレッチされてしまうんですねw
猫の顔をプロフィール画像にしているんですが
どうもラクダに見えてしまって(爆)

Akiraさんのテンプレートでいくつか同じような現象が見られます。
Ivory……ってテンプレートありましたよね?
そのテンプレートのサムネイル画像もかな?
縦長に伸びている? ストレッチされているような気がしました。

別に気にすることはないのですが、
もし改善策があるようでしたらお願いします<(_ _)>
できないよ、と言うのであればそれはそれでかまいません。
プロフィール画像を変えればすむ話ですので。
よろしくお願いします。

2016/03/11 (Fri) 15:14 | EDIT | REPLY |   
きろろ  
装飾枠のリクエスト候補

I Don't Want To Change You/ Damien Rice
100 Years/ Five For Fighting
By Your Side/ Sade

の中で、シンプルで使い回しができそうなものがいいかもです。
3つとも額縁の中におさまる絵画のようでステキですe-420
きろろでも使えそうだな……と思える物でかまいませんので
よろしくお願いします<(_ _)>

2016/03/11 (Fri) 15:22 | EDIT | REPLY |   
Akira  
To きろろさん

おっつっつですー ( ゚Д゚)ノ

画像縦横比の件から

① プロフ画像円形縦横比固定 --- 可能ですが制約あり。
② Ivoryサムネイル --- 修正済みです。

-------

①の件のご説明はこちら ↓

記事タイトル: FC2プロフィール写真の縦横比について
http://vanillaice000.blog.fc2.com/blog-entry-291.html

記事内容をお読み頂いた上で補足説明。
FC2の訪問者履歴ありますよね。
あそこのみなさんのプロフアイコンは円形です。
そして縦横比も維持されています。
これは公式プラグインでプロフ画像を表示する際に用いられるFC2変数とは別の変数を利用しています

一、画像のサイズをこちらにお伝え頂いてCSSで位置調整
二、画像を正方形でアップロードし直す(これが一番簡単)
三、公式プラグインのプロフィールは非表示にして、新たにフリープラグインを作成する

対処法はこの3つですかね (´・ω・`)
一の方法をお選びになった場合、これは単純に個々のユーザーの個々の画像に合わせた処理、ということになりますので汎用的な方法ではありません。
プロフ画像はユーザー任意の縦横比、あるいはサイズでアップロードできるわけですから、
その画像は横に長いの?それとも縦に長いの?
という点を私が事前に把握するのは不可能です。
公式プラグインを流用する、というのを前提にした話しです。
「個々の」対応というのが一の方法。

二は省略。

三はですね、訪問者履歴で用いられている変数を利用して、予め円形にしておく方法です。
画像表示のhtmlを公式プラグインとは違う内容で書きます。
これを用意しておくとテンプレートを変更しても、自分が円形にしたいと思った時に公式と切り替えればOK。

-------

テンプレートソースに初めからぶっこみでプロフを書いておけば良いんですけどね。
なるべくそれはしたくないんです。
既にカレンダーは毎回公式のものと重複してるわけですけど(笑)
なんでしたくないかというと、
位置の変更がめんどくさい
これですね (´・ω・`)
プラグインになっていればラジオボタンと矢印ですぐに場所の移動ができますが、
テンプレートソース内容となると
「どこからどこまでの範囲を どこに移動させればいいわけ???」
ってのがあるよね(笑)

というわけで、
公式プラグインを流用し、なおかつ円形にしたい、
という場合には一・二いずれかの方法をお選び頂くってことになります。
二が一番簡単だよ。
と再度お伝えしておきます(笑)

2016/03/11 (Fri) 16:24 | EDIT | REPLY |   
Akira  
To きろろさん

I don't want to change you と By your side については既に掲載しておりますー。

http://vanillaice000.blog.fc2.com/blog-entry-322.html

100 Yearsは少しお待ち下さいね (・ω・)ゞ

2016/03/11 (Fri) 16:27 | EDIT | REPLY |   
きろろ  

プロフの縦長、了解しました。
なんだ、こちらで直せるのですね。
申し訳ございません、よく調べもせずに(>_<)
こちらでプロフの画像を正方形でアップロードいたします。
お手数をおかけしました<(_ _)>

2016/03/11 (Fri) 23:42 | EDIT | REPLY |   
きろろ  
装飾枠

ありがとうございます<(_ _)>

早速DLさせていただきます。
使用は前述したように
ColdplayとAdelのYouTubeに使わせていただきますので。
Akiraさんのcopyrightは不要なんですか?

それではお借りします<(_ _)>

2016/03/11 (Fri) 23:48 | EDIT | REPLY |   
きっぷす  
タイトル等を左端に表示したい

こんばんは。
夜分遅くにすいません。

ちょこっとカスタマイズしたくなったのですが、変更の仕方が分からないので、またコメントしました。 ^^;


ヘッダーに表示される、「タイトル」「サブタイトル」「ナビゲーション」を左端に寄せたいのですが、どのようにしたらいいでしょうか?

教えてください!

2016/03/12 (Sat) 01:10 | EDIT | REPLY |   
Akira  
To きろろさん

copyrightの表記は不要です。
改変もお好きになさってください ( ゚Д゚)ノ

2016/03/12 (Sat) 12:40 | EDIT | REPLY |   
Akira  
To きっぷすさん

お疲れ様です (・ω・)ゞ

> タイトル・サブタイトル・ナビの左寄せ

まず「始点」をどこにするかはきっぷすさんの方で決めて頂いて。
始点、というのは
レスポンシブですから画面幅が変わることを前提にしています。
ブラウザの横幅を基準にして一番左にするのか、
それともコンテンツの幅(記事とサイドバーを含めたもの)と左の位置を揃えるのか、という意味です。

● ブラウザ幅基準の場合
Ctrl+Fキー検索

#blog-name-container

CSSソース内にありますのでこれを目印に下記の通り修正

#blog-name-container {
width: 100%;
max-width: 900px;
display: table;
padding: 80px 5px;
line-height: 1.2;
text-align: left;
}


-------
続きまして検索(上の内容のすぐ下にあります)

#blog-name-container-cell

以下の通り修正

#blog-name-container-cell {
width: 100%;
display: table-cell;
}

注意: ブラウザ左辺との距離が5pxしかありません。
もっと離すには
#blog-name-containerのpaddingの指定を

padding: 80px 5px 80px 左の距離px;

に変更してください。

-------
続きまして検索

#navigation-container

以下の通り修正

#navigation-container {
width: 100%;
padding: 10px 2px 70px 左の距離px;
}

-------
上記内容のすぐ下に以下を追加

#navigation-container ul {
text-align: left;
}

=======

● コンテンツ幅基準の場合

Ctrl+Fキー検索

#blog-name-container

内容を以下の通り修正

#blog-name-container {
width: 80%;
max-width: 1200px;
display: table;
padding: 80px 0;
line-height: 1.2;
margin: 0 auto;
}

--------
検索

#blog-name-container-cell

内容を以下の通り修正

#blog-name-container-cell {
width: 100%;
display: table-cell;
text-align: left;
}

--------
検索

#navigation-container

内容を以下の通り修正

#navigation-container {
margin: 0 auto;
width: 80%;
max-width: 1200px;
padding: 10px 0 70px;
text-align: left;
}


======

デザイン的にあまりおすすめしませんが(特にナビゲーション)、以上です(笑)

2016/03/12 (Sat) 12:42 | EDIT | REPLY |   
きっぷす  
回答ありがとうございます♪♪

教えてくださりありがとうございます♪♪
でも、イメージしてたのと違ったので、これまで通りでいきます!笑


でも、でも、勉強になったので助かりました!!今後もよろしくお願いします♪♪😄

2016/03/13 (Sun) 14:10 | EDIT | REPLY |   
Akira  
To きっぷすさん

そうじゃないかと思いました(笑)

はい。こちらこそよろしくお願いします

2016/03/13 (Sun) 22:34 | EDIT | REPLY |   
Akira  
To てっちぃさん

てっちぃさんへのお返事です。
取り掛かろうと思ったのですが、あまりにエラー数が多いもので(笑)
まずこちらをご確認頂けますでしょうか ↓

http://vanillaice000.blog.fc2.com/blog-entry-292.html

それからこちら ↓

http://vanillaice000.blog.fc2.com/blog-entry-341.html

ランキングバナーが表示されない直接の原因は、ユーザーエージェントで
display: none;
が指定されているからです。
しかも !import 付き。
強制力としては最強です(JS+インラインCSS+user agent)
これはCSSでの指定ではなくJSによるものですので、デフォルトテンプレに対して
何を追加したか
を教えてください。
例えば
・アクセス解析コード
・外部プラグイン
など。
テンプレートソース内容に直接打ち込んだものを思い出してお伝えください。
特に<head>〜</head>内に何かを追加しなかったか。

よろしくお願いします。
ひとつ修正点先にお伝えします。
Ctrl+Fキー検索

<%topentry_title>

全部で6つあります。
その2つ目が対象です。
すぐ下に

</a>

があると思いますが、その</a>が以下のようになっているかご確認ください

<!--not_permanent_area-->
</a>
<!--/not_permanent_area-->

赤字で挟まれているかどうか。
無ければ上記のように修正をお願いします。

2016/05/24 (Tue) 12:12 | EDIT | REPLY |   
てっちぃ  

別のテンプレートのコメント欄に書き込んでしまい誠に申し訳ありませんでした。
Facebookのボタンというのは、毎記事最下部に表示されるFC2の拍手ボタンの隣に表示される「いいね!」ボタンです。
環境設定では間違いなく設定されているのに表示されません。(以前は表示されていました)
今回ご質問している内容は確かに自己責任の範囲内でやらなければならないと思いますので、これ以上ご迷惑をおかけするわけにはいきません。
こちらでも一度デフォルトに戻すなど考えてみます。大変申し訳ありませんでした。
これからもAkira様のテンプレートをお気に入りで使用させて頂きます。
ご丁寧なフォローありがとうございます。

2016/05/24 (Tue) 14:59 | EDIT | REPLY |   
てっちぃ  

度々失礼します。
エラーについてのご指摘ありがとうございます。
今すぐに確認ができない環境なのでまた後ほどご指摘内容を確認させていただきます。
ありがとうございます。

2016/05/24 (Tue) 15:03 | EDIT | REPLY |   
Akira  
To てっちぃさん

いえいえ。
コメントする場所についてはどうぞお気に病まれませんよう。
私自身が混乱しないためのお願いごとにすぎません。

で、いいねボタンですが、私の環境では表示されています。
私の端末からはてっちぃさんのブログを拝見するといいねボタンが表示されているよって意味です。
こちらはソース変更をする前から表示されておりました。
ですからこのボタンのことではないと思っておりました(笑)

最新記事へのいいねが32
二つ目の記事に45
となっております。
てっちぃさんの環境ではそれが見られないってことなんですかね (´・ω・`)

一度キャッシュ・クッキーの削除をしてみてください。
コードもちゃんと吐き出されていますので表示するための動作自体は行われていると思います。

2016/05/24 (Tue) 18:41 | EDIT | REPLY |   
てっちぃ  
No title

過去に自分で変更を加えた個所を思い起こしてみました。
内容のみ箇条書きで並べてみます。
① トップ画像(というのでしょうか?)の変更
② 記事内の画像にドロップシャドウを追加
③ サイドバーのプラグインにスクロールバーを追加(2か所)
これはプラグインの設定から【HTML編集】欄に外部からいただいたソースを貼っています。
④ カラムの幅の変更

こんな感じだったと記憶しています(;´・ω・)
あと、私が見る限りではランキングバナーは表示されています。


2016/05/24 (Tue) 18:45 | EDIT | REPLY |   
てっちぃ  

先ほど上記で修正点を教えていただいた件ですが・・・

<%topentry_title>
</a>
<script>
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>
<!--not_permanent_area-->

<!--/not_permanent_area-->

</h3>
<div class="element-datetime">
<span class="fa fa-clock-o"></span> <span class="month<%topentry_month>"></span> <%topentry_day>, <%topentry_year> <%topentry_hour>:<%topentry_minute>
</div>
</div>
</div><!--/element-header-->

太字+下線の部分のことでしょうか?

2016/05/24 (Tue) 18:58 | EDIT | REPLY |   
Akira  
To てっちぃさん

先にソース内容から。
以下の通り修正してください。

<%topentry_title>
<!--not_permanent_area-->
</a>
<!--/not_permanent_area-->
<script>
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>
</h3>
<div class="element-datetime">
<span class="fa fa-clock-o"></span> <span class="month<%topentry_month>"></span> <%topentry_day>, <%topentry_year> <%topentry_hour>:<%topentry_minute>
</div>
</div>
</div><!--/element-header-->

-------

私の環境下ではこう見えています。

パソコン(ランキンバナーなし いいねあり)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/a98ru42ow_zpsmbfrnrv0.png

スマホ(どちらも表示あり)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/CF44147A-D70D-4A61-8F5E-470553DA7B54_zpsi3jpcdep.jpg

いいねが押されている(いいね数が存在)するところを見ると、恐らく私と同じ状態での見え方をしている人の方が多いのかな と思います。
一度上記の通り<a>の修正をして頂きたいと思います。
<a>は見た目にも影響を及ぼしやすいものですので、もしかするとこの部分の修正で直ることもある「かも」しれません。

--------

サイドメニュープラグインのスクロールバーですが、
ソース内に
/* スクロールの高さ設定 */
というCSS用のコメントが含まれているようです。
この書式はhtml内では使えません。
style属性に対してコメントがついていますが、このstyleはあくまでもhtml属性であって、
CSSの <style>とは全く別のものです。
従ってこれはエラーです。
それからスクロールバーに対してデザイン指定がありますが、こちらはIEだけの独自スタイルですから他ブラウザでは無意味です。
さらにMicrosoft自体もこのスクロールバー装飾を既に廃止(廃棄)しています。

<div style="width: 100%; height: 140px; overflow-y: auto;">
内容
</div>

上記への修正が望ましいです。

2016/05/24 (Tue) 19:52 | EDIT | REPLY |   
てっちぃ  

本当に詳細にわたり、ありがとうございます(汗)
後ほど修正を加えてみます。

2016/05/24 (Tue) 20:25 | EDIT | REPLY |   
Akira  
To てっちぃさん

はい。一度お試しください ( ゚Д゚)ノ

2016/05/24 (Tue) 22:17 | EDIT | REPLY |   
てっちぃ  

お世話になっています(^^♪
サイドメニュープラグインのスクロールバーの部分修正してみました。
これでいいのでしょうか^^?

そして、Facebookいいねボタンが表示されない件についてですが
送って頂いたソースを貼ってみた感じでも、こちらでは表示されていない状態が
続いています。 iphone6sではランキングバナー、拍手、いいね!のすべてが
表示されています。
PCではこんな感じです。
↓ ↓ ↓
http://i1224.photobucket.com/albums/ee372/Tetsuji_Hattori/%202016-05-25%2017.38.30_zps6jobhhbi.png

2016/05/25 (Wed) 17:45 | EDIT | REPLY |   
てっちぃ  

先ほど職場にある他のPCで確認したところ
ランキングバナー、拍手、いいね!のすべてが
表示されていました。。。。
これって・・・なんでなんでしょう?

2016/05/25 (Wed) 17:52 | EDIT | REPLY |   
Akira  
To てっちぃさん

こんばんは。お疲れ様です ( ゚Д゚)ノ

プラグイン側のエラーは解消されています。
それから<a>タグの修正も正しく行われています。
私の環境から「ランキングバナー」「fbいいね」共に表示もされています。

てっちぃさんもしかしてAdblock入れてませんかね (´・ω・`)
ランキングバナーは恐らくAdblockに引っかかります。
Adblockにも
・Adblock
・Adblock pro
・その他類似及び派生アドオン
といった種類があるのですが、proだとランキングバナー関連は広告と同じ扱いでブロックされるものも多いです。
fbいいねについてはちょっとわかんないなー (´・ω・`)
Adblockでfbボタンが非表示なる、ってのもちょっと考えにくいかもしれませんが…。

てっちぃさんのブラウズ環境で広告非表示アドオンが搭載されているのであれば、それにひっかかっているという可能性もゼロではないです。
一度ご確認くださいね。

2016/05/25 (Wed) 21:11 | EDIT | REPLY |   
てっちぃ  

こんばんは(^^)
あのぉ〜・・・
Adblock ってなんですか(^^;;
無知でごめんなさい(汗)
恥ずかしい。。。

2016/05/25 (Wed) 22:40 | EDIT | REPLY |   
Akira  
To てっちぃさん

いやいや。
何も恥ずかしいことなどありません。
知ってて当たり前みたいな書き方をした私が悪いです ^^;
ご存知なくてもなんら恥じるようなことではございません。
ごめんなさいね (*_ _)

Adblock(アドブロック)というのはブラウザのアドオン(拡張機能)のことです。
アドオンには色々な種類がありますが、広告の表示をブロックするためのもので有名どころが
「Adblock」です。
ですから言ってみりゃ商品名というか。
Adblockを入れているとwebページだけでなく、youtubeなど動画中に出てくる広告もブロックすることができます。

んで、てっちぃさんご存知ないということなのでたぶん入れてないですよね (´・ω・`)

2016/05/25 (Wed) 22:46 | EDIT | REPLY |   
Akira  
To てっちぃさん

てっちぃさんがお使いのパソコン環境を教えてください。
・OS名 (例: Windows10)
・ブラウザ名 (例: Firefox)

スクリーンショットからWindows10 Firefoxかな? と思うのですけれど。
この記事内のいいねボタンというのはFC2サイドのJSで表示されています。
今まで見られていたものが急に見られなくなり、他者からは見ることができているということは、

・OSのアップデートがあったかどうか
・ブラウザのアップデートがあったかどうか
・アドオンなどを追加しなかったか

fbの仕様というのはコロコロ変わります。
今把握できているものだと、非ログインでシェアボタンをクリックするとタブが開かない(笑)
(ログインフォーム画面を経由してくれない)
ですがいいねボタンの仕様変更というのは情報が今のところ出てきません。

上記以外で考えられるのはOSやブラウザの破損ですかね (´・ω・`)
クリーニング、あるいはセーフブート(セーフモード)で起動すると軽微なOS損傷であれば自動修復されます。
一度セーフモードをお使い頂いた方が良いかもしれません。

2016/05/25 (Wed) 22:54 | EDIT | REPLY |   
てっちぃ  

いつもお世話になります。
お疲れ様ですぅ

先日お送りしたスクリーンショットの画像は
・OS名 :Windows10
・ブラウザ名 : Firefox です。
大正解です(^^)/  あっ・・・失礼しました(^_^;)

win10にアップデートしたのは二日前ですが、アップデート前のWin7でも非表示でした。
お話をお聞きしている限り、こちらの環境に不具合があることは
間違いなさそうなので、「いいね」ボタンの表示に関しては
ひとまず放置してみようかな?って思っています^^

自宅で使用するパソコンはiMacですが、ここ最近開けていないので
こちらで同様の非表示現象が起きているのかは確認できていません。
こちらでも早急に確認してみます。

2016/05/26 (Thu) 08:32 | EDIT | REPLY |   
てっちぃ  

お世話になっています。
ご教授くださいm(__)m

トップ画像内の「 HOME INDEX RSS ADMIN 」のところですが
マウスオンの時に文字を白く表示させるにはどうすればいいでしょうか?

差し替えた画像が明るいため、ちょうどいい表現方法ができないので
何か「こうやったら見やすくなるんじゃないかな?」的な
アドバイス頂けないでしょうか^^?

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

2016/05/26 (Thu) 09:08 | EDIT | REPLY |   
Akira  
To てっちぃさん

当たった ╭( ・ㅂ・)و ̑̑ グッ
なんでだろうね。
私はフツーに見ることができてるのでなんとも…(笑)
やっぱり一度セーフモード試してくださいね。

-------

Ctrl+Fキー検索

#navigation-container ul li a:hover

というのがCSSソース内にありますので、以下の通り追加修正。

#navigation-container ul li a:hover {
background-color: rgb(158,86,154);
color: white;
}

で、ひとつ気になりましたが、そのすぐ上にある

#navigation-container ul li a

の項目を編集されていると思います。
その中の

color: solid navy;

こちらは間違った内容ですので修正をおすすめします。
これはなんだろう。
solidというのはborderに対して付与する内容(ボーダーの見た目)で、色がネイビー…。
テキストの色を変更したかったんですかね (´・ω・`)
その場合は

color: navy;

でOKです。

2016/05/26 (Thu) 11:15 | EDIT | REPLY |   
てっちぃ  

ありがとうございます。

>color: solid navy;
>テキストの色を変更したかったんですかね

また当たってしまいました(^_^;)
テキストの色を変更したかったんですが、手を施しかけたら
何が何だか分からなくなってしまいました・・・(;'∀')

2016/05/26 (Thu) 17:11 | EDIT | REPLY |   
てっちぃ  
No title

こんばんは^^
お疲れ様です。
いつもありがとうございます。

レイアウト(?)のことでご相談です。
1ページごとの最下段記事のすぐ下に「WHAT'S NEW? 」が表示されていますが
最下段の記事と「what's new」の間に「Prev・・・Next」の表示を
割り込ませることはできるでしょうか?

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

2016/05/26 (Thu) 18:56 | EDIT | REPLY |   
てっちぃ  

再度こんばんは^^
自宅のiMacでも同様にFacebookいいねボタンは表示されていないですねぇ〜
http://i1224.photobucket.com/albums/ee372/Tetsuji_Hattori/%202016-05-26%2022.18.06_zpsr5h5deeq.png
不思議ですぅ〜〜〜

2016/05/26 (Thu) 22:26 | EDIT | REPLY |   
Akira  
To てっちぃさん

先にアイコンの件。

肝心なことをお尋ねしますが、表示されないのは全てのページでしょうか。
それとも特定のページでしょうか。
私は前者だと思っているのですが。
特定のページということになると話しが全然違ってきますので、一応確認です。

-------

ページ送りを新着サムネイルよりも前(上)に移動させたい、という解釈でお間違いないでしょうか。
GirlOnWireは記事の上下にページ送りがありますけれど、どちらを移動でしょう。
それとも追加? (´・ω・`)
prev, nextと書いてらっしゃるので上かしら。

2016/05/27 (Fri) 00:06 | EDIT | REPLY |   
てっちぃ  

お世話になっています。
表示されていないのは、全てのページです。再度確認してみました。

ページ送りについて、わかりにくい伝え方で申し訳ありませんでした;^_^A

下側のページ送りを新着サムネイルの上に移動したいなぁ〜という全くわがままなお願いですσ(^_^;)

あと、これは個人的な感想なんですが、ページを送りながら見ていく際に、新着サムネイルの上にページ送りがあると便利かな?と感じていてお問い合わせした次第です。

それか、新着サムネイルが縦長レイアウトではなく 横長レイアウトですと、ページ送りがサムネイルの下にあってもわかりやすいのではないかな?と感じました。

すみません。。。
素人の勝手な戯言ですが(汗)

2016/05/27 (Fri) 08:34 | EDIT | REPLY |   
Akira  
To てっちぃさん

おはようございます ( ゚Д゚)ノ

やっぱり全ページですかー (´・ω・`)
うーん なんでやろ ( ̄∀ ̄;)
で、セーフブートはお試し頂いたんでしょうか。
大事なのは「以前は見られた」というところです。
その間カスタマイズもされておらず、他者からは見られている。
こうなると疑わしいのはやはり個人環境ということになってきます。

・セーフブートを試す --- これで改善されればOS損傷が原因
・他のブラウザで閲覧してみる --- 他ブラウザで閲覧できればFirefoxの損傷あるいはバージョンに起因
・OSやブラウザのアップデートが為されているか確認する(していなければしてください)

上記3つが最優先です。
特にセーフブート。
これをせずにああだこうだ言っても始まりませんのでね。
ともかく一度お試しください。
既にされているようでしたらごめんなさい ^^;
あー。でもiMacでもダメっておっしゃってましたよね (´・ω・`)
ますますわからない(笑)
一応私の検証した環境を書いておきます

Mac OSX yosemite(最新)
・Google Chrome
・Firefox
・Opera
・Vivaldi

Windows10
・Microsoft Edge
・IE11
・Google Chrome
・Firefox
・Opera

-------

ページ送りの件。
Ctrl+Fキー検索

個別記事用ページナビ

htmlソース内に1箇所あります。
こちらを目印にスクショの範囲をカット(切り取り)して移動させます。

スクショ ↓
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/%202016-05-27%209.22.51_zpswrcnnnvw.png

続きましてCtrl+Fキー検索。

<!-- 注)新着サムネイル不要の方・非公開ブログの方はここから削除(この行含む) -->

このすぐ「上」にペースト。

ページ送りデフォルト位置の理由ですが、ページ内の分岐の近接にあった方が使い勝手が良いのではないか、という私の判断に基づきます。
ページ内の分岐 = top, bottomボタンでの移動位置
bottomをクリックしてすぐその近くにページ送りが有る、というのがデフォルトです。
このあたりは個人観によりますので、ご自身の使いやすいように変更してくださいませ。

2016/05/27 (Fri) 09:33 | EDIT | REPLY |   
てっちぃ  
No title

大変ご迷惑をおかけして申し訳ありません。
セーフモードで起動してみました。
その後の状況も変化ありません(;´・ω・)

ボタンの非表示につきましては、とりあえず目をつむることにします^^
これ以上ご迷惑かけれません。ごめんなさい。

まずは取り急ぎ、ご報告まで。。。

2016/05/27 (Fri) 16:24 | EDIT | REPLY |   
Akira  
To てっちぃさん

お役に立てずごめんなさいね (*_ _)
しかしなんでだろう。
すっごい気になる… ( ̄∀ ̄;)

2016/05/28 (Sat) 23:07 | EDIT | REPLY |   
てっちぃ  
No title

とんでもありません。
様々なわがままに対応してくださり誠にありがとうございました。
その後もAkiraさんのテンプレートを物色しております(笑)
またご指導をお願いいたします。

2016/06/01 (Wed) 16:49 | EDIT | REPLY |   
Akira  
To てっちぃさん

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

こちらこそ貴重なお時間頂きました。
ありがとうございます

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

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

2016/07/15 (Fri) 13:03 | EDIT | REPLY |   
Akira  
To  GirlOnWireメンテの件 内緒さん

長くお使い頂き嬉しく思います。
ありがとうございます

こちらがGirlOnWireのメンテナンス要件です ↓
http://vanillaice000.blog.fc2.com/blog-entry-367.html

① フォントやメールフォームの件

こちらは意図的な変更です。
Windows10ということですので、フォントは游ゴシック体に変更されているはずです。
メールフォームなど主要公式プラグインについては整形を行いましたので、それが反映されています。

② コメント返信にある修正点〜

カスタマイズについては以前のバージョンとほぼ変わりません。
メンテナンスのお知らせページにある内容との照らしあわせをお願いします。

③ カルーセルの件

こちらは複雑なJSで動いていますので、プレビュー画面では確認できません。
参考
http://vanillaice000.blog.fc2.com/blog-entry-220.html#object14

お手数ですが「上書き」を行っての確認をお願いします。
作業中のテンプレートを設定しておきたくない場合には、
「プレビュー」ではなく、上書きをしたうえでテンプレート名をクリックしてご確認くださいね。
設定中テンプレートに間違って上書きしないようご注意ください。
上記方法でも変更がリアルタイムに反映されないことはあります(キャッシュの関係)

よろしくお願いします

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

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

2016/07/16 (Sat) 10:41 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/16 (Sat) 11:04 | EDIT | REPLY |   
Akira  
To GirlOnWireの件 内緒さん

いえいえ。どうぞお気になさらず。
いつでもお気軽に

2016/07/16 (Sat) 11:56 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/16 (Sat) 12:14 | EDIT | REPLY |   
Akira  
To GirlOnWire ランダム表示の件 内緒さん

JSのmath randomを利用すれば可能ですよ (´・ω・`)
Ctrl+Fキー検索(htmlソース内)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

<script>
RANDOMimageURL = new Array();
RANDOMimageURL[0]="画像1アドレス";
RANDOMimageURL[1]="画像2アドレス";
Rndm = Math.floor(Math.random()*RANDOMimageURL.length);
document.getElementById("banner").style.background="url("+RANDOMimageURL[Rndm]+") center center no-repeat";
</script>


* 不備ありコードですので打ち消し線を入れておきました (2016.7.17)

続きましてCtrl+Fキー検索(CSSソース内)

#banner

この項目の以下を削除

background: url(http://blog-imgs-77.fc2.com/v/a/n/vanillaice000/20150812074313061.jpg) center center no-repeat; /* 注)バナー画像変更はここ */

------

以上です。
あくまでもランダム表示ですので、同じ画像ばかりが連続して出てきたり、なんてこともあります。
それから、特殊なカスタマイズですのでサポートは対象外にさせてくださいね。
自己責任の上でご利用をお願い致します (・ω・)ゞ

2016/07/16 (Sat) 13:27 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/17 (Sun) 07:30 | EDIT | REPLY |   
Akira  
To GirlOnWire画像サイズの件 内緒さん

大変失礼致しました。
一部書き忘れ ^^;

こちらに変更 ↓

<script>
RANDOMimageURL = new Array();
RANDOMimageURL[0]="画像1アドレス";
RANDOMimageURL[1]="画像2アドレス";
Rndm = Math.floor(Math.random()*RANDOMimageURL.length);
document.getElementById("banner").style.background="url("+RANDOMimageURL[Rndm]+") center center /cover no-repeat";
</script>

赤字部分を追加です。
これが「指定範囲全画面」にするためのおまじない。
これでできると思いますが、元に戻される等お任せします。
貴重なお時間潰してしまいました。
ごめんなさいね。

2016/07/17 (Sun) 09:48 | EDIT | REPLY |   
戸村サキ  
ブログ記事のフォントについて

管理人様、はじめまして。いつも素敵なテンプレありがとうございます。

質問ですが、当方のブログを見ていただければ分かるように、ブログ記事本文だけ、MSゴシックになってしまうのです(遊ゴシック希望です)。
CSSは、カラーとfont-size, 見出しの作成、font-familyの追記をした程度です。

試しに別のブログにテンプレを適応したところ、普通に遊ゴシックになりまして、二つのHTMLおよびCSSの比較もしたのですが原因がわからず…

祝日に恐縮ですが、ご回答いただければと思います。
よろしくお願いいたいます。

2016/11/03 (Thu) 12:38 | EDIT | REPLY |   
Akira  
To 戸村サキさん

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

ご質問の際にご利用の環境を併せてお知らせ頂けると助かります。
Windows OS(バージョン不明 恐らく8.1以上)、ブラウザはMicrosoft Edge あるいは IE11ではないかと仮定します。

まず、記事内を書かれる際にFC2エディターのツールを用いて、フォントを「ヒラギノ」に変更されていると思います。
ヒラギノフォントは現状ではMac専用で、Windowsにはインストールされていません。
OSに存在しないフォントが書き込まれていた場合にはOSあるいはブラウザの「標準フォント」に書き換わります。
サキさんのお使いのブラウザのデフォルト指定フォントがMS Pゴシックである、ということになります。
記事中でフォントの指定を行わなければ最優先フォントである游ゴシック体が自動的に採用されますが、エディターでフォント変更してしまうと

<div style="font-famly: HiraginoSans-W3">文字列</span>

こういったソース内容になり、この書き方は「インラインCSS」と言って強制力の強い指定です。
CSSソース内で游ゴシック体が指定されていてもインラインCSSが優先されますので游ゴシック体が適用されなくなってしまいます。

まとめ
・ エディターによるフォント指定

・ OS, ブラウザ内に同フォントが見つからない

・ CSSでの優先順位を無視してOS, ブラウザの標準フォントで表示

こういう仕組みです。
他のブラウザ、例えばGoogle Chromeから見たらちゃんとヒラギノになってる!
と思うかもしれませんが、それもヒラギノではないです (´・ω・`)
Chromeに指定されている優先フォントが表示されていて、それがMS Pゴシックではなくちょっと丸みのあるフォント(meiryoや游ゴシック UIなど)というだけです。
CSSフォント設定が外れてしまった際に表示されるフォントは閲覧者のブラウザ設定に依存しますので、こちらも併せてご確認ください。
ちなみに私のマシンはMacですのでヒラギノで表示されてますけどね (´・ω・`)
さらに
inner-contensに対してYu Gothicという指定を追加されておられますが、正しい書き方は
font-family: '游ゴシック', 'YuGothic';
です。
そしてこの追加記述は不要です(書いても最優先にはなりません)
一度ご自分の記事内容とその手順とをお確かめくださいね。
よろしくお願いします。

* FC2エディターでのフォント指定は誤解が多くあるようですので、近いうちに記事にしようと思います。

2016/11/03 (Thu) 20:23 | EDIT | REPLY |   
戸村サキ  
解決しました!

管理人様

質問した後いろいろと試行錯誤をしていたら、原因が分かりました!
普段Win10なのですが、ブログ記事をコピペする際にiPadのテキストエディタを経由していて、その際にフォントが指定されていたようなのです。

Win10から改めてメモ帳にコピペして更新したところ、無事遊ゴシックになりました。

お騒がせして申し訳ありません。貴重なスペースありがとうございました。

2016/11/03 (Thu) 20:48 | EDIT | REPLY |   
Akira  
To 戸村サキさん

なるほど。
意図的に指定したわけではなかったんですね。
コピペをされる際には必ずhtml専用エディターを経由させてくださいね。
コピーというのはhtmlソースなどの情報も拾います。
フォントの種類やサイズ、色などが指定されている場合にはその情報も受け継いでしまいます。
htmlエディターを経由させることでその指定を取り除くことができます。
(特に新投稿画面での直コピペは厳禁)

お疲れ様でした

2016/11/03 (Thu) 20:52 | EDIT | REPLY |   
戸村サキ  
To Akiraさま

先にご回答をいただいていたのに気付かず投稿してしまいました。お手数おかけしてすみません。
色々とご丁寧にありがとうございます。勉強になりました。
これからもクールなテンプレートに期待しています!

2016/11/03 (Thu) 21:36 | EDIT | REPLY |   
Akira  
To 戸村サキさん

ご丁寧にありがとうございます。

はい。お言葉励みになります (●'0'●)/

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

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

2017/08/26 (Sat) 18:42 | EDIT | REPLY |   
Akira  
To GirlOnWire開閉スクリプトの件 内緒さん

こんばんは (o'ω')ノ
こちらこそお世話になります

> サイドバーに折りたたみタグを使用することは可能でしょうか〜

こちら最初は勘違いしてしまいました。
ユーザータグを折りたたみたいのかと(笑)
「タグ」というのは
<header>
<article>
などを指します。上記は「開始タグ」
</header>
</article>
上記のようにスラッシュのついたものが「終了タグ」
<div>あいうえお</div>
上記の中で「タグ」と言える部位は<div>と</div>だけです。
全体を指すのならば div要素 と言います。
ですので内緒さんの今回のソースコードも「タグ」とは言いません。
この機会に覚えておかれると良いと思います。
正しい用語を覚えることが自己解決の近道です。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-453.html

-----

結論から言うとできますが、そちらの既存コードのままではよろしくありません。
まず内容が古い。
aタグというのは昔のように得手勝手に使えるものではありません。
(既存コード内容はhtml4、現在のweb標準はhtml5)
そしてaタグは現在だとほとんどの場合、ページtop/ bottomなどページ内移動を司っています。
内緒さんの言う「どこかへ飛ばされる」というのは、

ページ内移動とページ遷移とが混在しているが実際には遷移先を含むどの移動先も指定されていない + フェイドエフェクトの起動

これらがいっしょくたになって起こっています。
今後はaタグを何かのスイッチ的に使わない方が良いですね。
html5テンプレでページ内スクロールが実装されていた場合にはほぼ間違いなく衝突します。

で、ソース内容自体が結構謎な感じはしますが…。
(clear: both; は不要ですしその他もちょっといろいろ)
他所様のコードである以上私が細かな修正を入れることはできませんので、応急処置としてそのソースの

<a style="cursor:pointer;">



<a class="nonmover" style="cursor:pointer;">

に変更してください。
次にテンプレートのhtmlソース内に
<script src="//blog-imgs-82.fc2.com/v/a/n/vanillaice000/fade500tmb_unit_compress.js"></script>
の一行がありますので、削除してもらいますがその前にこのファイルを開いて
(//blog-imgs-82〜 の前にhttp:を付けないと開けませんので、コピーしてスキームを追加した上でどうぞ)
内容を全コピー(Ctrl + A)してメモ帳などにペースト(Ctrl + V)します。
(Macの場合はControlキーではなくCommandキーに置き換えてください)
htmlエディターをお持ちでしたらそちらへ。
お持ちでなければwindowsなら「メモ帳」Macならば「テキストエディット」をご利用ください。
内容を写しましたらその中に

$("a[href^=#]")

という箇所がありますので、以下の通り修正。

$("a[href^=#]:not(.nonmover)")

修正できましたら全てをコピーし、テンプレのhtmlソース内 </body> の直前に以下のような形でペースト

<script>
ここにペースト
</script>

scriptの開始及び終了タグが必ず必要ですので書き漏らしの無いよう。
そして元々あったscriptファイルの一行を削除することもお忘れなく。

--------

これで機能はするはずですが、根本的解決にはなっていません。
そしてテンプレのアップデートをされた時点でまた改めて書き直すことになります。
あるいは初めからhtml5に準拠した内容で導入するという考え方もあります。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-487.html

---------

記して頂いた既存コード内容の書き換えはこれ以上は致しかねますので(失礼だから(笑))、自身での選択・判断をお願いします (o'ω')ノ

2017/08/26 (Sat) 20:05 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/08/28 (Mon) 00:11 | EDIT | REPLY |   
Akira  
To GirlOnWire開閉スクリプトの件 内緒さん

お疲れ様です (●'0'●)/

> 正規バージョン(?!)で参りたく〜

そうですね。正規というわけでもないのですが、その方が良いかもしれません。
たぶんそちらのほうが後々楽ではないかと思います(笑)

更新の件は慌てる必要はありませんのでどうぞお時間のある時に。
お疲れ様です

2017/08/28 (Mon) 01:38 | EDIT | REPLY |   
m  
m(_ _)m

めっちゃくちゃ使い勝手が良いです。。(そして既にとても楽です^^;)
使い勝手良くて多用しすぎないように気をつけようと思うくらいです(笑)
改めて、ありがとうございました…!

2017/08/28 (Mon) 01:57 | EDIT | REPLY |   
Akira  
To mさん

ご丁寧にありがとうございますー
こちらこそ感謝です

2017/08/28 (Mon) 13:19 | EDIT | REPLY |   

Leave a reply

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