Article page

by
  • Comment:123
  • Trackback:0

valparaiso


名称 Valparaiso
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー 右/ ブラウザ縮小・スマホ 下
記事幅 可変 最大850px (内寸 788px)
サイドバー幅 300px (内寸 270px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = 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シェアリンクのエンコード


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



更新履歴 2016.10.11


不具合修正
・ Windows10 IE11及びMicrosoft Edgeのスクロールバグに対処
● 全体レイアウトの再調整
● 関連記事サムネイルの整形
● ベンダープレフィックスの整理
●その他微調整

メンテナンスに伴い 当該記事内容を大きく書き換えました
お手元のソース内容と合致しない場合はお手数ですが最新バージョンへのアップデート(再DL)をお願い致します


更新履歴 2016.9.9


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

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


● 最優先フォントを游ゴシック体に変更しました
● ページ遷移の動作をJSからCSSに変更しました(若干の高速化)


更新履歴 2016.1.9


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


更新履歴 2015.12.12



新着サムネイル
タイトルリンクが長い時 記事幅からはみ出る問題を修正しました


更新履歴 2015.9.21


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


更新履歴 2015.9.9


・ 公式化に伴うOGP削除

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


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


更新履歴 2015.8.28


修正版配信

・ FC2検索バーがタブレットでレイアウトを壊す問題の対処
・ ページtop/ bottomボタン変更
・ ビューポート設定調整
・ Javascript 若干の軽量化

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

ご迷惑おかけします よろしくお願いします


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



2015.8.14 申請いたしました
したつもりがしてなかった (´・ω・`) バカかよ((((笑) 今した!8月17日(笑)
8.18 承認されました

ばるぱらいぞ ( ゚Д゚)ノ


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・ Welcome文字下の港画像のぼかしは取り除けます
・ トップページ以外は記事を探しやすいリスト表示
・ レイジーロード(偽) を実装しています


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


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



画像のぼかしについて・Windowsブラウザについて


こちらは取り除けますので

バナー画像ぼかし不要の方ここから削除

こちらを検索されましてガイドに従ってください
画像を変更されます方は

ヘッダー画像変更はここ

で検索・修正してください

Windowsのブラウザ Internet Explorer と Microsoft Edge についてはぼかしがかかりません(未実装)



ヘッダー画像の調整について


ブログタイトルが長い・ブログ説明文が長い 方はヘッダーに指定した画像の下辺が寸足らずになることがあります
その場合は以下を検索されまして ガイドに従ってください

ヘッダー画像下が寸足らずな場合はこの数字を増やす



スライダーのサムネイル画像について


FC2公式実装のサムネイル変数を利用しています
画像の縦横比によっては寸足らずが起こり 足りない部分は黒背景で補填されるのが特徴です

sample

一番左の画像がわかりやすいかと思います
また GIF動画については静止画に変換されます
FC2サムネイルの特性としてご理解ください



レイジーロード(偽)について


れいじーろーど かっこ にせ((((笑)
lazy load というのはご存知の方も多いと思いますけれども
画像の「読み込み遅延スクリプト」のことです
何故遅延させるかというと ファーストビュー(ページ遷移して最初に表示される画面範囲) を素早くするため
ページが表示されても画面内に収まっているのは 上部に存在する一部分だけですので
ページ全体にまたがる画像群を一度に読み込むのではなく スクロールされて画面内に入ってから読み込む
こうした役割のものです

こちらのテンプレではあくまでも「偽」であり「風」です
風味です (o'ω')ノ
スクロールすると 出てきた画像がフェードインするようになっていますが 本当の「遅延読み込み」ではなく
単に動作を真似ているだけです
画像の読み込み(httpリクエスト)はページのローディングと同時に行われます

レイジーロードはですね ちょっと特殊な記述が必要でして
テンプレ側のJavascript操作でその記述内容を後付けすることは可能なのですが
それでは効果がありません
遅延させるには みなさんが記事を作成される際にコード記述をして頂く必要があります
それではちょっと酷かな と思います (´・ω・`)
・ リアルタイムプレビューができない
・ テンプレートを変更すると特殊コードを適用した画像が出てこなくなってしまう
などの難がありますので おすすめしません… いや パフォーマンス考えればおすすめだけど
「手間」の観点から言うと勧めない (´・ω・`)

既にご自分でレイジーロードを導入されている方は 本物とコンフリクトしないようになってますのでご安心を



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


sample

デフォルトは一律「黒背景茶文字」です
管理人コメントを変更するには(スクショは一例です)

.name管理人ハンドルネーム {
  display: table;
  width: 100px;
  height: 100px;
  background-color: rgb(179,154,100);
  color: rgb(51,51,51);
  text-align: center;
}

上記内容をCSSソース(テンプレ管理画面「下段」)の末尾に追加
管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません
サンプルのカラーコードは rgb(148,170,201)

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

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


サンプル



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





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


みなさんいつもありがとうございますemo
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 123

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

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

2015/08/17 (Mon) 15:38 | EDIT | REPLY |   
Akira  
To 内緒さん

そうなのー (´・ω・`)
まさかリジェクトか?
と思ったら、申請してねーでやんのー (´・ω・`)
アホさ加減に自分でビビりました。
今日業務をこなされたようなので、気があれば今日審査してくれるかしら。
いや無理だろう((((笑)
なんか気まぐれスケジュールみたいなので、いつ公開されるやら。
ホントすみません ( ̄∀ ̄;)

いずれにしろサイドバー収納タイプは申請していませんので、あとでチェックしてファイル載せておきます。
そこから持っていってくださいませお (´・ω・`)

2015/08/17 (Mon) 15:44 | EDIT | REPLY |   
Akira  
To 内緒さん

スケジュールって私の申請スケジュールのことでしたでしょうか。
FC2の中の人でなく(笑)

んと あとで記事にしておきます。
私も把握していないというオイオイ(;´Д`)状態なので(笑)
いい加減さは天下一品。
すみません。本気ですみません(土下座)

2015/08/17 (Mon) 15:46 | EDIT | REPLY |   
sawa  
承認されましたよ~(笑)

Valparaiso

もう承認されてましたよ~(笑)
やっぱりFC2さんって気まぐれよね~(爆)

2015/08/18 (Tue) 11:00 | EDIT | REPLY |   
Akira  
Re sawaさん

ホントだーe-257
sawaさん毎度お知らせありがとうです。
もう貴方は私のマネージャーってことで((((笑)

2015/08/18 (Tue) 16:05 | EDIT | REPLY |   
グレース  

またお借りしました
今回もカスタマイズしてますが、
とても好い出来なので、
ぜひご覧ください

2015/08/20 (Thu) 17:55 | EDIT | REPLY |   
Akira  
Re グレースさん

いつもありがとうですー!
拝見しました (*´・ч・`*)
良い感じのお写真がありましたね。
縁起の良さそうな(笑)
ミキティも心置き無く逝けるというものです(笑)

2015/08/21 (Fri) 00:57 | EDIT | REPLY |   
だーさん  

こんにちわ
気に入ってテンプレ使用させて頂いております。
早速ですが、管理人と訪問者のコメントの色分けですが、css最後の }の次の段に
管理人ハンドルネームの内容書きいれたのですが、反映されないのですが再度見直す
に当たり、ここ注意!と言う所有りますでしょうか?

2015/08/21 (Fri) 12:31 | EDIT | REPLY |   
Akira  
Re だーさんさん

こんにちは。
お気に召して頂いてうれしいですーe-257

> 管理人コメントの件

私の説明の仕方が不明瞭でしたね。ごめんなさいね。
今ソースの確認をしましたところ、

.管理人ハンドルネーム

と、そのままご記入かと思います。
こちらは だーさんの場合には

.だーさん

に書き直してください。
その上でもう一度ご確認頂いて、変更されないようであれば再度おたずねくださいませ。
ご面倒おかけします。
よろしくお願いしますe-251
(下のコメントにコピペ用の記述を載せておきます)。

2015/08/21 (Fri) 13:17 | EDIT | REPLY |   
Akira  
Re だーさんさん

それからもう一点。
現在の記述位置がこうなってます ↓

.inner-info {
padding: 10px 5px;
}

.管理人ハンドルネーム {
display: table;
width: 90px;
height: 90px;
background-color: #daa520 ;
color: #696969 ;
text-align: center;
}

}


記号(赤字の })がひとつ最後方に回ってしまっていますのと、一部記号が全角になってしまっていますので以下の通り修正してください(コピペでどうぞ。.inner-infoから上書きしてください。
ドラッグ選択して Ctrl+Cキーでコピー)。

.inner-info {
padding: 10px 5px;
}

}

.だーさん {
display: table;
width: 90px;
height: 90px;
background-color: #daa520 ;
color: #696969 ;
text-align: center;
}

2015/08/21 (Fri) 13:27 | EDIT | REPLY |   
ぱぴぷぺぽ  
カスタマイズ方法

Akiraさん、はじめまして。
とても洗練されたテンプレートで気に入ってます。

現在は前のテンプレートで移行はしていませんが
私自身はhtml,cssの知識に乏しくもしカスタマイズ可能であれば
変更箇所を教えていただけませんでしょうか?

1.デフォルトだとブログを初めて開いた時一瞬画面全体がゴールドになる。
2.ブログタイトル(ヘッダー部分?)の高さの変更。
3.TOP画像の高さの変更とWellcomの位置、または削除。
4.プロフィール画像枠が丸なのか切れてしまっている。
5.記事を囲んでいる2重線を一つに変更。
6.一番下のwhats new のイメージが no imegeになっている。

テンプレートの根本的な部分で変更不可の場所もあるかと思います。

なお色の変更はしましたがOKでしょうか?

お忙しい中あつかましいお願いですが、ご返事いただけますようお願いします。

2015/08/22 (Sat) 08:38 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

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

ご質問ひとつひとつお答えしていきます。
(コピーはドラッグ選択した後 Ctrl+Cキーでお願いします)

-------- ページ遷移時の背景色

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

body { /* 注)基本フォント関連 */
background-color: rgb(137,101,25);


赤字の部分が色指定です。
この一行 background~ を削除すると色は「白」になりますが、welcome下に設定した画像が遷移時に一瞬表示されてしまいます。
それではちょっと興ざめだと思いますので、色を変更する形が良いと思います。
カラーコードは#●●●●●● の16進数(ヘクサデシマル)でも構いません(例「白」 #ffffff)

-------- ブログタイトル高さ変更

検索

#blog-name-container {
width: 100%;
background-color: white;
padding: 60px 5px;


赤字の数字を小さくしてください。
height: ●●px と高さを指定したくなるところですが、それをしてしまうとデバイス(PCやスマホ等)が変わったときに文字が範囲を飛び出してしまうことがありますので、高さ指定は行わない方が良いと思います。
この指定の仕方を守って頂くとそれは起こりません。

-------- welcome画像部分の変更

★高さの変更は以下を修正

#photo-blank {
display: table;
table-layout: fixed;
height: 400px;


welcome文字の編集をしても必ず文字が天地中央に配置されるようになっています。
そしてこの部分が画像が表示される「範囲」でもあります。

★welcome文字位置の変更

これは画像の上で左右・上下の位置を変更したい、ということで合ってますでしょうか。
天地(上下)の位置変更は以下を修正

#welcome-blank {
display: table-cell;
vertical-align: middle;


middleの部分をtopにすると上基準。
bottomにすると下基準になります。

左右の変更は上に示した
#welcome-blank{
の直下に以下を追加

text-align: left;

leftで左寄せ、rightで右寄せ。

welcome文字の削除は以下を消去

<p id="welcome-blank"><!-- 注)下記文章変更可 改行する場合は文末に<br>を入れる -->
Welcome to my blog
</p>



一旦投稿しますね。

2015/08/22 (Sat) 10:41 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

-------- プロフ画像が円の中で見切れる

ぱぴぷぺぽさんの画像は横長で白背景なのですね。
円形を解除するには以下を削除。

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


こちらは個人設定から自動抽出ですので、円形にされるのであれば正方形に形成して頂くのが一番良いかと思います(画像の編集、という意味です)。
あるいは上記のように円を解除するか。
あるいは別の方法で円にすることもできますが、ややこしいコードを書きますので「円形解除」で良いのかどうかで留めておきます。

-------- 記事周りの二重線を単線に

以下を検索、赤字行を削除

.main-body {
width: 100%;
background-color: white;
margin: 0 auto 30px;
border: 1px solid rgb(179,154,100);
outline: 1px solid rgb(179,154,100);
outline-offset: -6px;

}


-------- 新着サムネイルがNo imageになる

確認ですが、スライダーの方にはちゃんと画像が表示されてますでしょうか。
スライダーに出ていて新着サムネイルに出ていない、ということかしら。
そしてすべてNo imageなのか、あるいは一部なのか。
No imageの画像が表示されているのか、それとも画像が無い白抜け状態なのか。
こちらをお知らせ頂けると助かります。

新着サムネイルについてはFC2で準備されていませんので、Googleのシステムを利用して表示をしています。
これまでRSSの送信が正常に為されていれば、即反映されるはずなのですが、何らかの事情で上手く送信できていなかった場合、情報の送信及び取得で多少時間を要することがあります。

2015/08/22 (Sat) 11:01 | EDIT | REPLY |   
ぱぴぷぺぽ  
丁寧な解説ありがとうございます。

Akiraさん、早速お返事をいただきありがとうございます。
また、非常に初心者でもわかりやすくひとつひとつ丁寧に説明していただき本当に感謝しております。

新着サムネイルにつきましてはすべてno imageでデフォルトの港の画像が写っています???

このあとちょっと出かけるのでぼちぼちと教えていただいた場所を手を加えていきたいと思います。
少しづつ理想に近づいていくのが楽しみです。

2015/08/22 (Sat) 14:06 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

はい。疑問点は何度でも遠慮なさらずおたずねくださいe-257

No image画像は出てくるんですね。
ということはもしかしたら、「本文の編集」の中には画像が存在せず「追記の編集」の方へ掲載されているのではないでしょうか。
んーでもそれだとスライダー側にも画像は出てこないはずなんですよね (´・ω・`)

この点(本文・追記)を一度ご確認ください。
で、お時間のある時になさってくださいね。
急かすようなことは致しませんので、ご自分のペースでどうぞe-257

2015/08/22 (Sat) 14:55 | EDIT | REPLY |   
ぱぴぷぺぽ  
移行完了しました!

Akiraさん、気にして頂いて恐縮です。
テンプレートの移行が完了すると新着記事にちゃんと画像が入るようになりました(笑)
お手間取らせまして申し訳ございませんでした。
あと配置とかちょこちょこと変えていこうと思ってます。
本当にありがとうございました。

2015/08/23 (Sun) 06:49 | EDIT | REPLY |   
ぱぴぷぺぽ  
No title

なんどもすいません。
ブログに貼ってある各ランキングバナーをクリックすると
This content failed to load.とメッセージが出てリンクされていないようです。
なぜでしょうか???
それと管理人コメントの変更を他の方の返事を参考にしましたが色変更はできませんでした。また訪問者コメントの色変更とかはできないのでしょうか?
急ぎませんし暇な時で結構ですのでよろしくお願いします。

2015/08/23 (Sun) 07:51 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

おはおーごじゃります (●'0'●)/
ご面倒おかけしております (*_ _)

> ランキングバナーの件

まず確認です。
ご利用頂いているhtmlファイルですが、記事内からDLしてもらった
「Colorbox適用版」でお間違いないでしょうか。
で、現状ですね、Colorboxの方が正常に動作していません。
動作していないというのは、ぱぴぷぺぽさんは画像を貼り付けられる際に画像のアドレスのみを拾って記述していらっしゃると思うんです。

<img src="画像アドレス" ~省略~>

という形の「画像タグのみ」での貼り付けです。
Colorboxをご利用になる際には<img>と<a>というリンクタグを同時に使う必要があります。
今は<img>のみの構成ですので、クリックしてもColorboxが起動しない状態です。

Colorbox適用版ではない、通常版をご利用になられる方が良いかもしれない ^^;

というのは、Colorbox版については記事内の『画像』に対してある特定のクラス名を付加し、それに対して拡大スクリプト命令を出しています。
ということは、すべての画像に対してColorboxが準備状態になるわけです。
イコール ブログ村のバナーも画像なので対象になってしまう

ということなんですね (´・ω・`)

一旦投稿します!

2015/08/23 (Sun) 09:50 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

通常版の方が良いかも~ の理由としては、これまでアップロードされました画像に<a>タグを付けるってかなり手間ですよね(笑)

<a href="画像と同じアドレス" target="_blank"><img src="画像アドレス"></a>

ちょっとおおざっぱに省略して書いてますが、上記のように赤字部分を追加しないといけなくなるんです。
それ厳しいですよね ( ̄∀ ̄;)
ここで分岐点。

① Colorboxは使わない方向で通常版に戻す

② Colorboxはこれからアップロードするものに対してだけ行う
= 起動の指示は手打ち作業で行う

②がおすすめ (o'д`o)ゝ
①②いずれをお選び頂いても、ランキングバナーが機能しない件が解消できます。


まとめ。
Colorboxを使うかどうかをまず決める(笑)
②の場合の修正手順は記事内にこれから書きますのでご参照くださいませ。

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

> 管理人コメントの色分けが反映されない

今確認しましたところ、まずこのスクショご覧ください ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/screenshot-greenstyle5291.blog.fc2.com%202015-08-23%2009-44-00_zpspesksqdj.png~original

お名前のところ、他の文字列と比べて全角一文字分下がってるのがわかると思います。
ここは本来揃っていなければいけません。

名前
URL
Re:

といった具合です。
というわけで、お名前を書き込まれる際に全角スペースが入り込んでいますので、そのために機能していないということであります ('0')/
ソース内容は正しいですから大丈夫です。
ってゆーかですね、たぶん最新記事のコメントだけご覧になられてるかと思います。
そしてたまたま名前の前にスペースが入っちゃった と。
別ページのぱぴぷぺぽさんのコメントはちゃんと緑背景の白文字になってますよe-257


まとめ。
コメント(リコメ)する際に気をつける(笑)
ソースの変更などはなし。

2015/08/23 (Sun) 10:03 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

あ。Colorboxがちゃんと動作してるページもあるねー (´・ω・`)
んー。どうしようか(笑)

ランキングのバナーって、毎回手打ちで貼り付けされてますでしょうか。
毎回同じものを貼り付けされるのであれば、ソース側に自動で挿入されるように打ち込んでしまう、という手もありますよ。
その方が記事UPは楽じゃないかしら。
これ方法その③ってことにします(笑)

③にされるのであれば以下の通り修正を加えるだけです。

以下をCtrl+Fキー検索

</div><!--/inner-contents-->

この「下」に以下を追加

<div class="ranking-banner">
ここにランキング関連バナーのタグを記載
</div>


これでオッケーです。
記事本文と上下の余白ととりたい場合には
CSSソースの末尾で良いので

.ranking-banner {
padding-top: ●●px;
padding-bottom: ●●px;
}

上がバナー上余白(記事との空白)
これだと拍手とかがランキングバナーより上にきちゃうけど (´・ω・`)
これが一番おすすめかなー (´・ω・`)
ここだけ修正すればhtmlソースの差し替え等必要ありませんです。
がしかし、今まで貼り付けた記事内のバナーは消さないとダブっちゃうね。
どうすべー ( ̄∀ ̄;)
とりあえず、①~③の方法でお好きなものをチョイス (´・ω・`)

2015/08/23 (Sun) 10:21 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

ご質問もうひとつありましたね。

> 訪問者コメントの色分け

これはお相手のお名前がはっきりわかっているときにだけ使えます。
特定個人ってことになりますね。
例えば私ならば Akira が固定のネームですので

.Akira {
内容
}

という形です。
毎回お名前が違うとか、そういった場合には使えません(笑)

2015/08/23 (Sun) 11:21 | EDIT | REPLY |   
ぱぴぷぺぽ  
おはようございます

昨日仕事の帰りが遅くなり返事できなくてすいませんでした。
自宅に帰ってからいろいろ考えて結局最新の記事のように
バナー画像にリンクを貼らず下のテキストからのリンクに変更しました。
過去の記事すべて変更していく予定です。
ただ不思議なのが他の方が同じテンプレートを使っているのにちゃんと画像からランキングへリンクされている点です。

よくわからないのですが以前のテンプレートでは画像表示のためLightbox2.7.1を導入しており4コマなどはそれを使って連続表示をしていました。

記事もLightbox2.7.1で表示できるような記述です。
ただバナーに関しては別に何も設定はしておりませんでしたが・・・。

それが原因かどうか素人の私には判断しかねますがこれ以上Akiraさんの手を煩わせるわけにもいけないのでこれでヨシとしました。

それと訪問者コメントの色分けですが訪問者別というわけでなく訪問者の方のデフォルトの黒背景を別の色に変更したいという意味でした。
言葉足らずで申し訳ございません。

しかしAkiraさんは本当にいい方ですね。見ず知らずのたった一人の質問にこんなに丁寧にそして対処方法を考えていただけるとは感謝の気持で一杯です。

ありがとうございます。
これからも素敵な作品を公開されることを楽しみにしています。

2015/08/24 (Mon) 06:54 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

いえいえ。お返事のスピードはお気になさらず(笑)

Lightbox2.7.1を導入されておられたのですね。
ということは、デフォルトのソースをご利用頂きまして、以前のテンプレで使っておられましたLightboxの「CSSファイル」「JSファイル」を追加、その上で以前と同じJS記述をhtmlソースに追加。
これでそのままいけるかと思います。
ちょっと難しいですかね ^^;
ご自分でLightboxを導入された、というのを前提にお話ししています。

他の方が普通にバナークリックができるのは、Colorboxを導入していないからだと思います。
公式から配布しておりますデフォルトのソース内容だと画像拡大はできませんが、バナークリックへの影響もありません。

あまりこうしろああしろと言うと気が萎えてしまいますので、時間や気持ちのゆとりがあるときにでもまた挑戦されるようでしたらお声かけください。

こちらこそお勉強になります。
ありがとうございますe-454

2015/08/24 (Mon) 11:23 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

わわわ。訪問者コメントの件を失念しておりました!
以下が該当箇所です。

.stamp-container {
display: table;
width: 100px;
height: 100px;
background-color: rgb(51,51,51);
font-family: 'Droid Serif', serif;
color: rgb(179,154,100);
text-align: center;
}


赤字が背景色、青字が文字色ですので、同じ要領で色コードを変更してください。
遅くなってごめんなさいですー。

2015/08/24 (Mon) 21:16 | EDIT | REPLY |   
mikiママ  
何度もすみません

ここにあるサイドバー収納タイプというのはBe happyテンプレートやCityと同じですか?
だとしたら嬉しいですっ!ダウンロードさせていただきますねi-178

2015/08/25 (Tue) 13:41 | EDIT | REPLY |   
だーさん  

Akira さん コピペで無事完了しました。

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

2015/08/25 (Tue) 17:50 | EDIT | REPLY |   
Akira  
Re だーさんさん

できましたか。良かったですe-454
お疲れさまでしたe-257

2015/08/25 (Tue) 21:28 | EDIT | REPLY |   
Akira  
Re mikiママさん

そうですーe-257
どうぞお持ちください。

えっと。できればFC2検索バーを非表示にしてお使いください (´・ω・`)e-330
これまた記事にしますけれども、なんだかなー (;ωq`)
あ、こっちの話しです! ←

2015/08/25 (Tue) 21:30 | EDIT | REPLY |   
ぱぴぷぺぽ  
おひさしぶりです

Akiraさん、おはようございます。
あれからランキングバナーについてはテキスト付きにすべて置き換えました。
ただそれ以外にも画像からリンクを張っている記事があったのを忘れていました。

Colorboxを使用している場合は記事内のすべての画像に命令が出されるとので

$('.inner-contents img').addClass("gazou");
$('.gazou').closest('a').addClass("expand");を削除し

今後アップする拡大表示の必要な画像に関してclass="expand"を追加する方法がありましたが、その場合は過去の記事内の画像の拡大は諦める必要があるという解釈でいいのでしょうか?

回避するには過去の画像にclass="expand"を追加しなければダメなんですね。

私の場合、結構拡大表示が多いため手間がかかるので逆にこの画像だけは拡大せずにリンクを貼るということは無理なんでしょうか?

あれ?これって結論出ていましたっけ?
なんか訳わからへんようになってきました・・・。
ごめんなさい。

それと私のブログの場合記事内のリンクの色を青に変更したのですが
フッダーの色を緑に変えたためAkiraさんのリンクが非常にわかりづらくなってしまいした。
この部分を他の色に変更できればと思います。文字サイズも含めて。
下の3つの広告は多分非表示にできないのでなんとか緑に変更してカメレオン化できればいいなと思っていますがこれは違約になるんでしょうかね?

お忙しいと思いますので時間があいた時にでもご返事いただければと思います。

2015/08/27 (Thu) 07:16 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

コメント拝読致しましたー!
とりあえず現時点で時間が無いもので、改めてお返事しますね。
一旦頭をクリアにしてお待ちください(笑)
また一から順に整理しながら考えましょうねe-257

2015/08/27 (Thu) 13:56 | EDIT | REPLY |   
Akira  
Re ぱぴぷぺぽさん

えっとねー。まずこの記事をご覧ください ↓

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

htmlソースに一部変更を加えましたので、それに準じてColorbox版も新しいものを準備します。
で、CSSソースはそのまま使えますのでご安心くださいね。
カスタマイズ事項は全て「装飾」に関するものですので、html側変更の影響は(今回は)ありません。

修正版が公式から配信されていますが、ぱぴぷぺぽさんはDLなさらずにしばしお待ちください。
どういう形が一番良いものか、ちょっと考えて専用版を作ります(笑)
そんなに手間ってわけではないので、恐縮されませんよう先にお伝えしておきます(笑)

2015/08/27 (Thu) 15:36 | EDIT | REPLY |   
Akira  
Re ぱぴぷぺぽさん

えー。何から始めましょうかね…。
まず、ブログ村関連のバナーについて。
現在<table>タグを用いて各アイコンをひとまとめに表示されているかと思います。
このtableサイズが画面を超過していますので、ブラウザ幅を縮小すると画面から飛び出してしまいます。
飛び出してしまったものはサイドバーの内容と重なって、サイドバーよりも重なりが『下位』になりますので、結果的に『リンクが押せない』状態になってしまいます。
そしてこの<table>にクラス名を追加すると、Colorboxの起動を制御することもできます。
今こういったソース内容になってます ↓

<table width="600" cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td>
<img alt="" src="バナー1" style="border:0px;" /><br />
<a href="FC2ランキング" target="_blank">FC2 Blog Ranking</a>
</td>
<td>
<img width="88" border="0" height="31" alt="" src="バナー2" /><br />
<a href="人気ブログランキング" target="_blank" style="font-size:12px;">人気ブログランキング</a>
</td>
<td>
<img width="110" border="0" height="31" alt="" src="バナー3" /><br />
<a href="つぶやき" target="_blank" style="font-size:12px;">つぶやき</a>
</td>
<td>
<img width="88" border="0" height="31" src="バナー4" alt="ブログランキング・にほんブログ村へ" /><br />
<a href="ブログ村ランキング" target="_blank">にほんブログ村</a>
</td>
<td>
<img width="88" border="0" height="31" src="バナー5" alt="にほんブログ村 オヤジ日記ブログ 平凡オヤジへ" /><br />
<a href="平凡" target="_blank">平凡オヤジ</a>
</td>
</tr>
</tbody>
</table>

スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/woeiru%201_zpsaf5wwdkc.jpg~original

2015/08/27 (Thu) 17:39 | EDIT | REPLY |   
Akira  
続き

各アイコンとの空白やテキスト同士の位置の調整は『スペース』で作成されているかと思います。
これを以下の通り修正されると良いかなー と。
(コピペでそのまま使えるよう、URLなども入れておきますがコメント制限になりますので★を入れておきます ★は削除してください。 ドラッグ選択後 Ctrl+Cでコピー 記事作成時毎回使いますので要保存)

<div class="ranking-contents"><a href="h★ttp://blogranking.fc2.com/in.php?id=931429" target="_blank"><img alt="banner" src="h★ttp://blogranking.fc2.com/ranking_banner/a_01.gif"></a><a href="h★ttp://blog.with2.net/link.php?1744747" target="_blank"><img alt="banner2" src="h★ttp://blog.with2.net/img/banner/banner_22.gif"></a><a href="h★ttp://blog.with2.net/link.php?1744747:9111" target="_blank"><img alt="banner3" src="h★ttp://blog.with2.net/img/banner/c/banner_1/br_c_9111_1.gif"></a><a href="h★ttp://www.blogmura.com/ranking.html" target="_blank"><img alt="ブログランキング・にほんブログ村" src="h★ttp://www.blogmura.com/img/www88_31.gif"></a><a href="h★ttp://oyaji.blogmura.com/oyaji_heibon/ranking.html" target="_blank"><img alt="にほんブログ村 オヤジ日記ブログ 平凡オヤジ" src="h★ttp://oyaji.blogmura.com/oyaji_heibon/img/oyaji_heibon88_31.gif"></a></div>

tableタグというのは<td>を強引に横並びにさせる特徴がありますので、こういったバナー関係を並べるには適さないんですよね (´・ω・`)
上記ソース内容に変更して頂くことで、範囲の超過を防ぐことができます。
スマホからご覧になられる方にも親切。
上記が記事に貼り付ける内容です。
そしてテンプレのCSSソース(テンプレ管理画面『下段』)末尾に以下を記載

.ranking-contents {
max-width: 100%;
}

.ranking-contents a {
display: inline-block;
padding: .2em .5em;
}


CSS側にしっかり上記の記載をし、記事作成時には毎回同じもの(書き換えたソース内容)を貼り付ける、といった感じで使います。
この両ソースはテンプレートを変更されたときにも使えますので、どちらも保存です。
(専用エディターをお持ちであればそちらを利用して .txt拡張子保存が便利だと思います
エディターが無い場合にはWindowsの「メモ帳」で .txt保存。
メモ帳はWindowsならば必ず入ってます。
ファイルはデスクトップに保存しておくと使いたいときすぐ開けますのでおすすめ。)

2015/08/27 (Thu) 17:41 | EDIT | REPLY |   
Akira  
続き2

上記内容に変更されました際のスクショ

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

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

まずはこれが可能かどうかご判断ください。
ご覧の通り、テキストは削除しています。
従来通りの「画像クリック」で行う形。
これからColorboxの方を上手く調整します。

ちょっと留守にしますが、戻り次第また作業しますね。
取り急ぎバナー関連の見た目修正の件を記しておきます。

2015/08/27 (Thu) 17:43 | EDIT | REPLY |   
Akira  
続き3

当記事の最後にぱぴぷぺぽさん専用ファイルを載せておきましたので、DLしてお使いください。
現在の状態のまま、htmlソースのみ差し替えです
上に記載しましたバナーに関する内容をお使い頂きますと、バナークリックでColorboxが起動することはありません。
記事内の画像には過去掲載分も併せてColorboxが適用されます。

画像によってはColorboxを適用したくないものもありますよね。
その場合に一番確実なのは、<a>タグを削除する ことです。
aタグ(アンカータグ)というのは一言で言うと『リンク』ですよね。
どこへリンクするかと言うと、ブログ村バナーの場合にはブログ村へ、特に任意の遷移さき指定の無い画像の場合には
①オリジナル画像へリンク
②FC2のアルバムへリンク
このいずれかがFC2の仕様です。
Colorboxを利用するには①の『オリジナル画像へのリンク』が必須です。
①はColorboxが適用されていないときには別タブが開いて画像が表示されますよね。
Colorboxはそれを利用してページ内拡大を行っています。

拡大させたくない = リンク先の設定も必要ない
と、完全にイコールではないものの、恐らくはそういうことですよね (´・ω・`)
なので一番早くて確実なのは <a>タグを外すことですe-257

んで、ぱぴぷぺぽさんはCSSソースが旧内容のままなので、今回追加した『画像にドロップシャドウ』の内容が含まれません。
お使いになられるのであればCSSソース末尾に以下の内容を追加してください。


.shadow-attachment {
box-shadow: 6px 6px 6px rgba(0,0,0,.2); /* 注)クラス追加(記事作成時手入力)で画像にドロップシャドウ追加 */
}


ここまででご質問・ご不明点などありましたらお気軽にどうぞe-287

2015/08/27 (Thu) 18:47 | EDIT | REPLY |   
Akira  
Re ぱぴぷぺぽさん

ごめんなさい。
私、ページTOP/BOTTOMボタンの変更してるんでした (´・ω・`)
というわけなので、html, CSS両ソースを差し替えでお願いします。
ZIPファイルの中に両方入ってます。
CSSソースの方はぱぴぷぺぽさんが既に行ったカスタマイズ内容が反映されているはずです(チェック漏れがなければ)
お手数おかけします (*_ _)
ドロップシャドウも追加しておきました。

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

広告の件ですが、完全な「非表示」「背景色と同色化」はやはりマズいですね。
凍結覚悟してまでやることではないと思います(笑)
ただ目安というのはありますよね。
過去に申請済のテンプレ フッタースクショ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/screenshot-vanillaice000.blog.fc2.com%202015-08-27%2020-59-57_zpsetpm6ngw.png

わかりますかね?(笑)
意図的に同系色にしたわけではないのですが、申請した後に「あ。ヤベ。」
って思ったんですけどもね。
通過しました (´・ω・`)
たぶんギリセー((((笑)
なので自身でも目安にしています。
あまり無茶なことはなさらずー (´・ω・`)ノ
FC2だけのことでなく、背景色と同化させるとGoogle先生からお叱りを受けます。
隠しテキスト = スパムサイト
なんて認定されたらえらいこっちゃ、です。

2015/08/27 (Thu) 19:41 | EDIT | REPLY |   
ぱぴぷぺぽ  
感謝感激雨あられ

Akiraさん!ほんっとにありがとうございます。
早速DLしました。
ちょっと仕事の関係でバタバタするのですべて実行できるのは数日かかると思います。

まずは、お礼を申し上げます。

2015/08/27 (Thu) 21:04 | EDIT | REPLY |   
Akira  
Re ぱぴぷぺぽさん

あっ… 上のコメント編集しちゃった(笑)
気づいてね (o'ω')ノ
フッター広告の件書いておきましたのでー。

お仕事お疲れさまですe-454

*注)
私のフォルダUP作業とコメントを頂いたお時間とが重なっているようです。
もしかしたらフォルダ差し替え前のものをDLされたかもしれません。
・ZIPフォルダー内にふたつのファイルが入っているか
・CSSソースの最後の方に 個人設定 という項目があるか
この二点お確かめくださいね。
ZIPファイルが異なるようでしたらお申し付けください
(個人的な内容ですので記事内からは一旦削除しておきました)

2015/08/27 (Thu) 21:06 | EDIT | REPLY |   
よっこたん  
ブログが開かない!?

こんばんわ~
今夏う秋にふさわしい素敵なテンプレート
お借りしてブロ友さんに褒められました。

しかしいつも来てくださる方が何度ブログを見ても
開かずトップの綺麗な色だけが反映して
コメントもかけないと連絡がありました。

他の方からはまったくそんなことはないのすが
こんな場合私自身のPCが悪いのかブロともさんの
PCに問題があるのか?

よくわかりません・・
どんな状態の時にブログが開けないのでしょうか?
スマホで見ても綺麗に見えるのですが=(^_^;)

わかれば教えてくださいませ!

2015/08/29 (Sat) 23:12 | EDIT | REPLY |   
Akira  
Re よっこたんさん

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

> ブログが開かない・コメントも書けない等の件

「レイアウトが崩れていますよ。」
ではなく「開けません。」
ということなんですよね?
ちょっと意味合いが違うと思いますので念のため確認です。

レイアウト崩れ = IEの古いバージョン利用を疑う

というのがあります。
当該テンプレート、というよりも私のテンプレートは全て
HTML5, CSS3 というのを利用して作成しています。
IEの8を含むそれ以下のバージョンはこのいずれも非対応ですので、正しいレイアウトで表示されません。

で、「開けない」については「延々とローディング状態である」
ということではなかろうか と思います。
要するに「重たい」ってことかなー と (´・ω・`)
その方の環境にもよりますが、

・ パソコン自体のクリーニングが長く実行されていない
・ キャッシュが溜まっている
・ Javascriptをオフ設定にしている
・ パソコンのスペックの問題
・ 回線環境
・ FC2の一時的な不具合

考えられるのはこのぐらいでしょうか。
閲覧デバイスがスマホの場合でもやはり同じような問題が考えられます。
FC2の~ については、なにやら最近システムをチョコチョコいじっているようなので、この数日私も作業がスムーズに進まないことが多いです。

お使いのOSとそのバージョン (Windows7, 8 など や Mac Yosemite など)
お使いのブラウザとそのバージョン(IE11 や Google Chrome など)
がわかると何か見えてくるかもしれません。
デバイスによってはテンプレート不具合も考えられますので、情報が頂けるようであればまたお知らせくださると嬉しく思います。
お手数おかけします。よろしくお願いします (*_ _)

2015/08/30 (Sun) 00:22 | EDIT | REPLY |   
よっこたん  
ありがとうございます。

早々にお返事頂きありがとうございます。

私のPCの方の不具合ではないのですね~

自分のパソコンは書かれていることは全て

クリアしていると思いますが・・

多くのブロ友さんはブログも開いてコメント

入れてくださっております。

他のAkiraさんのテンプレートでも同じことが

起きるのでしょうか?

私は画像が少し大きいのが貼れるのが

好きだし今回のテンプレートは

すごくお気にりなんですがお一人でも

見れない方がおられるとそいうわけにも

いかずに悩んでおります。

私自身のOS Windows10  プラウザ Google Chrome

です。

2015/08/30 (Sun) 01:42 | EDIT | REPLY |   
Akira  
Re よっこたんさん

これはあくまでも「閲覧する側」の問題ですので、よっこたんさんの環境やスペックは無関係ですよe-257
お相手のパソコン環境がどのようなものか、というのが焦点になってきます。

こちらのテンプレはJavascriptなんかもかなりリッチになってますので、パソコンのスペックによっては厳しいものがあるのかもしれません (´・ω・`)
そして画像を多く扱われる方につきましては、画像それ自体ページ負荷がかかりますし、こちらは「全文表示」タイプですので
「画像に適切な処理ができる」方へおすすめしています。
適切な処理 = 画像容量の削減等
よっこたんさんはその点は上手にされていると思って拝見しましたけれどもね (´・ω・`)

一時的なものでなく、お相手のスペックによる問題だとすると、どこかで何かを削らないといけませんね。
ソース内に

●●不要の方

という訳注が数か所あります。
これが書いてあるものについては削除してもテンプレ表示への影響はありません。
削除すればその分動作は軽くなります。
が、ちょっとつまらなくもなります ^^;

・ スライダー
・ ページ遷移アクション
・ コメント・トラバ折り畳み
・ 画像フェイドエフェクト

この4点が対象ですが、スライダーは必要でしょうから、以下の3つを削ってみてはいかがでしょうか。
特にページ遷移のアクションはスピード重視の方へは削除をおすすめしています(笑)
これかなり違い出ますので、一度お試しになられても良いかもしれません。
(このコメント欄からのコピー作業はドラッグ選択して Ctrl+C キーでお願いします)

Ctrl+Fキー検索

<!-- 注)ページ遷移アクション不要の方ここから削除 -->

これを目印に訳注に従って削除、さらに以下を検索

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

これを以下のとおり修正

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


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

> 他のテンプレはどうか

こちらはなんとも言えませんです (´・ω・`)
四季シリーズというか、定番テンプレのシリーズものがありますが、
そちらのコンセプトは
「なるべくJavascriptを使わない」
なので軽いかもしれません(笑)
たぶん閲覧者を選ばないものはこれが妥当だと思います。
平たく言うと、見た目にゴージャスな演出は極力避けている、ということです。

このあたりの折り合いをどうつけるか、というのは難しいですよね。
このValparaisoテンプレは特に全文表示タイプですから、ワンクリックでページ内にある画像全てをローディングします。
1ページあたりの記事表示件数を減らすだけでも負荷は減らせますが、今5件表示にされていると思いますので、もうこれは妥当な数字ですよね。

お相手の環境が見えてきませんので、現段階で言えるのはこんなところですー。
ページ遷移アクションをまず削除、ということで。
作業の前に複製をお取りくださいねe-257

2015/08/30 (Sun) 02:21 | EDIT | REPLY |   
Akira  
Re よっこたんさん

ページ遷移のエフェクトを削除するとどんな感じか、一時的にこのブログに設定しておきますのでご確認くださいませー。

2015/08/30 (Sun) 02:29 | EDIT | REPLY |   
よっこたん  
よくわかりました。

おはようございます。

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

すごく良く理解できました。

大変勉強になりました。

これからも是非使わせて

くださいね!

2015/08/30 (Sun) 08:03 | EDIT | REPLY |   
Akira  
To よっこたんさん

ご面倒おかけします。
よろしくお願いしますe-454

2015/08/30 (Sun) 19:35 | EDIT | REPLY |   
ぱぴぷぺぽ  
非常に手間のかかるオッサンですいません。

Akiraさん、また来てしまいました。申し訳ございません。
仕事が一段落ついたので指示通り変更しました。

バナーに関しては現在変更していませんがテストOKでした。
でもでもでもなんかレイアウトが崩れてしまいました・・・。

1.SNSのアイコンがちっちゃくなった。
2.右カラム?の見出しが文字だけになってしまった。
3.右カラム?のリンクが黒から青へ変わった(これに関しては別にいいです。
4.新着画像のサムネイルがでっかくなった。
5.フッター部分が文字だけで左に寄ってしまった。

DLしたファイルはちゃんと2つ入っていましたので差し替えています。

画像をアップすれば説明しやすいのですがどうしていいのかわからず
文章で伝わりにくいかと思いますが・・・。なぜでしょうか?

今は変更前のテンプレですが、必要とあれば差し替えたテンプレに変えておきます。

最後にAkiraさんの仕事のジャマにならない程度で結構です。
急ぎませんし本当にこれ以上迷惑かけるわけにもいきません。

2015/08/31 (Mon) 17:56 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

わー。マジですか ( ̄∀ ̄;)
たぶんというかやっぱりというか、CSSの方に見落としがあったんだと思います。
今出先ですので帰宅次第チェックしますね。
私のミスだと思いますので、ぱぴぷぺぽさんはテレビでも見ておくつろぎください(笑)
すみません ^^;

2015/08/31 (Mon) 20:03 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

iPhoneの方からソース確認しました。

}

この記号が一か所抜け落ちておりましたー!
私の手落ちです。貴重なお時間を潰してしまい申し訳ございません (;ωq`)
きっとお悩みになられたことと思います (*_ _)

取り急ぎ

・ 私の記述ミス 1点
・ カスタマイズ(記事下SNS背景色変更)による不備

この2点把握しました。
下の カスタマイズ~ の方は、ホバー(マウスオーバー)すると背景色が変更され、アイコンがちょっと傾きながら拡大される仕様になってますが、
文字色が「黒」のまま変更されていないようですので、下の方にチラっと見えているんじゃないかしら。

今ZIPファイルの作成ができませんので(職場の事務所なもので)、取り急ぎ修正箇所を記しておきます。

.sns-and-others-link:hover {
background-color: rgb(2,135,96);
}

上記を以下の通り追加修正(マウスオーバーの件)

.sns-and-others-link:hover {
background-color: rgb(2,135,96);
color: rgb(2,135,96);
}


続きまして私がミスした箇所の訂正
検索

.calender-table {
margin: 0 auto;
table-layout: fixed;
width: 100%;
max-width: 350px;
text-align: center;
font-family: 'Droid Serif', serif;
font-size: 12px;

以下の通り追加修正

.calender-table {
margin: 0 auto;
table-layout: fixed;
width: 100%;
max-width: 350px;
text-align: center;
font-family: 'Droid Serif', serif;
font-size: 12px;
}



これでいけると思います。
何度も申し訳ないですホント ( ノД`)
お急ぎの場合にはとりあえずこちらで修正を。
帰宅しましたら再度確認しまして、またZIPで掲載しますのでお待ちくださいね。
後者の方が確実 ^^;

追記
載せました!
再度チェックしましたので今度は大丈夫…だと…思う (´・ω・`) ←
「おかしいな?」と思われましたらどうぞご遠慮なさらずお申し付けくださいね。
私もどんくさいからさーe-258
ホントごめんなさいねe-465

2015/08/31 (Mon) 20:38 | EDIT | REPLY |   
ぱぴぷぺぽ  
もう何がなんだか・・・。

おはようございます。
いつも早い対応に驚いています。早速DLしました。
バナーもOKでした。

でもでもでも、ふ~。

最近の画像はColorboxでちゃんと拡大表示されますが過去の記事の画像に関しては拡大表示されず画面全体が変わり表示されます。

例)自分で作る酒のあてランキングの記事内の画像

<a href="http://blog-imgs-**.fc2.com/*/*/*/********/soumen.jpg" rel="lightbox"><img width="400" border="0" height="300" src="http://blog-imgs-**.fc2.com/*/*/*/********/soumen.jpg" alt="そうめん" /></a>

そこで画像の記述方法をlightbox方式で書いていたのでもしやと思い

例)PCを公開 の記事を

" rel="lightbox"> を
" target="_blank"> に変更しました。

<a href="http://blog-imgs-**.fc2.com//*/*/*/********/******.jpg" target="_blank"><img src="http://blog-imgs-**.fc2.com//*/*/*/********/******.jpg" alt="メインPC" border="0" width="400" height="300" /></a>

すると正常に表示されるようになったのですが今度は同じ記事内で画像が何枚かある場合、
連続に表示されなくなりました(クリックで次画像)

もう何がなんだか!チンプンカンプン!びびでばびでぶーです。
(なんのこっちゃ)

ご教授お願いします。はた迷惑なオヤジでした。

2015/09/01 (Tue) 06:57 | EDIT | REPLY |   
Akira  
Re ぱぴぷぺぽさん

大丈夫ですよー。
なんとかなりますし、なんとかしましょう ( ゚Д゚)ノ

とりあえずですね、ここのコメントが長くなりすぎてお互い辛いでしょうからこちらに移動しましょう ↓

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

また仕切り直しということで(笑)
ちょっと細切れになりそうですが、移動先の方でご説明しますね。

2015/09/01 (Tue) 12:49 | EDIT | REPLY |   
よっこたん  
ありがとうございました。

先日ご質問させていただき
いろいろアドバイスしていただき
ありがとうございました。
ご指導の通りにしてみました。
ブログが開かなかったブロ友さん
さんも見られるようになりました。
嬉しかったです。
お礼が遅くなりましたが
また分からないことがあれば
ご指導くださいね!
また私のブログで不備がありましたら
教えていただきたいと思います。
宜しくお願い致します。

2015/09/01 (Tue) 15:09 | EDIT | REPLY |   
Akira  
To よっこたんさん

安心しました。良かったですe-454
ページ遷移スクリプトが原因だったんですね。
確かにちょっと重たくはなってしまいますよね (´・ω・`)

こちらこそありがとうございます。
お疲れ様でしたe-257

2015/09/01 (Tue) 19:55 | EDIT | REPLY |   
kawa(代理)  
もし可能なら

頼まれてブログの設置をしたのですが、
このテンプレートを一目見て気に入り使用させていただきました。
依頼主にもすごく気に入ってもらえました。

質問です。
スライダーの数を増やすことは出来ないのでしょうか?
最大5枚のようですが、「画像がある程度の枚数存在することを前提」とありましたので、もし増やせるなら嬉しいな。。。ということで質問です。


2015/09/10 (Thu) 19:21 | EDIT | REPLY |   
Akira  
To kawa(代理)さん

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

> スライダーの表示件数について

この「表示件数」の意味合いですが、

①ページ中に全体像が出てくる件数を増やしたい(窓を増やしたい)
現在の設定 1~最大4件 (スマホは1件)

②スライド枚数を増やしたい

どちらでしょう?
恐らく②の方ではないかと思いますので、そちら前提でお答えしますと、
現在kawaさんの記事表示件数が5記事に設定されています。
ブログ個人設定で1ページあたりの表示記事件数を増やして頂きますと、自動的にスライドの枚数も増えます。

参考
http://vanillaice000.blog.fc2.com/blog-entry-220.html#object6

解釈が違っていればご指摘くださいねe-257

2015/09/10 (Thu) 20:07 | EDIT | REPLY |   
kawa(代理)  
ありがとうございます

早々のご返答ありがとうございます。

②で合っています。

そのページの記事のサムネイルが表示するのですね
こんな初歩的な質問、申し訳ございません。

2015/09/11 (Fri) 10:41 | EDIT | REPLY |   
Akira  
To kawa(代理)さん

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

どうぞお気になさらずー。
合ってて良かったです。
ありがとうございますe-454

2015/09/12 (Sat) 13:14 | EDIT | REPLY |   
figaroze  
質問です。

初めまして、テンプレートお借りしております。
皆様のやり取りなど拝見して、初心者の私も色々弄ってみました。
ですが1点、やり方・・というか削除箇所がはっきり分からず、ご教授いただけたらと思います。

上の説明文に「サイドバーのSNSアイコンのリンクは各自設定お願いします 不要の方は削除してください」とありましたが、スタイルシートを見ていてもSNSから始まるものが何か所もありどの部分が該当箇所なのかわかりませんでした。SNSリンクは使いませんので、アイコンごと非表示にしたいのですが、削除部分を教えてください。
初歩的なことで申し訳ありません!

2015/09/16 (Wed) 00:07 | EDIT | REPLY |   
Akira  
To figarozeさん

お返事お待たせしてしまいました (*_ _)
コメント欄をご覧頂くのも大変な労力だったかと思います。
恐れ入ります。

------

> SNSアイコンの記述

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

<!-- snsアイコン不要の方は該当<li>の行を削除 リンク設定必須 # の部分を差し替え-->

上記を目印に探してください。
そして

<!-- snsアイコンここまで -->

この間に挟まれている文字列を全て削除です(目印含む)
こちらはCSSではなくHTML内容ですので、テンプレ管理画面「上段」に含まれる文字列です。

サイト内検索と直下のタイトル(最新記事, 最新コメント等)とが近すぎると感じられるようでしたら以下を修正してください。
(こちらはCSSです)

#search-form {
margin: 0 auto 20px;


赤字部分の数字を大きくすると空白も大きくなります。
お手数おかけします。
よろしくお願いしますe-454

2015/09/16 (Wed) 11:36 | EDIT | REPLY |   
figaroze  
To Akiraさん

早速のお返事ありがとうございます!
スタイルシートばかり見ていて、HTMLを見てませんでした。
お手間掛けて申し訳ござません。
おかげで使いやすくなりました♪

2015/09/16 (Wed) 21:44 | EDIT | REPLY |   
Akira  
To figarozeさん

ご報告ありがとうございます。
安心しました。
お疲れさまでしたe-454

2015/09/17 (Thu) 00:49 | EDIT | REPLY |   
ぱぴぷぺぽ  
おひさしぶりです。

Akiraさん、その節は大変お世話になりました。
今のところ別に問題はないのですが新しいZIPファイルが上がってますが
私の場合も差し替えてた方が良いのでしょうか?
もし差し替える場合の注意点などがありましたらお教え下さい。

2015/10/04 (Sun) 22:28 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

ご無沙汰しておりますe-257

最後のColorboxフォルダのことかしら?
これはですね、この記事内容をご覧頂くと良いかもです。

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

iPhoneの iOS9 がリリースされた当初、Colorboxの挙動がおかしかったんですよね (´・ω・`)
そこでスマホではColorboxを起動させない、というJSに組み直しをしました。
現在はiOSの修正版リリースに伴って、元の状態に改善されとります((((笑)
なので特に変更の必要は無いと思います。
混乱させちゃってすみません ^^;

2015/10/05 (Mon) 10:08 | EDIT | REPLY |   
ぱぴぷぺぽ  
了解しました

いつも迅速な対応ありがとうございます。
とりあえずこのままで行きます(笑)

2015/10/05 (Mon) 22:07 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

はい。とりあえずソレで(笑)
いつもありがとうございます!

2015/10/05 (Mon) 23:04 | EDIT | REPLY |   
Alt  
テンプレお借りしました!

一目ぼれでテンプレートをお借りしたのですが、サイトの雰囲気に合わず、画像とカラーの差し替えをさせてもらいました><;
本当に素敵なテンプレだったのでそのまま使えるようなブログだったら良かったのですが・・・(´・ω・`)

質問です...
自分の写真につく丸い枠を取ってサイズを自由にしたいのですが、どこを弄ればいいのか分かりませんでした;
お手隙の際に教えて頂ければありがたいです…

2015/10/13 (Tue) 15:09 | EDIT | REPLY |   
Akira  
To Altさん

ありがとうございます。
お返事遅くなりました (*_ _)
カスタマイズの件はどうぞご自由になさってくださいませe-257

> プロフ画像の件
以下をCtrl+Fキー検索

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


border-radius: 50% を削除すると円形が解除されます。
widthとheight を指定されます際には、同じ数字を入れると正方形以外は縦横比が狂いますので、

width: 指定したい横幅px;
height : auto;

でお願いします。
横幅の限界値は270pxです。

例) 四角形 横270pxの場合

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

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

2015/10/13 (Tue) 21:32 | EDIT | REPLY |   
Alt  
お返事ありがとうございます!

出来ましたー!
分かりやすく教えてくださり助かりました!
ありがとうございました。
しばらく愛用したいと思います(*´ω`*)

2015/10/19 (Mon) 21:37 | EDIT | REPLY |   
Akira  
To Altさん

こちらこそお手数おかけしました。
ご報告ありがとうございますe-454

2015/10/20 (Tue) 00:58 | EDIT | REPLY |   
あきしな  

はじめまして。
前からブログを拝見させていただいていて、素敵なテンプレートが多すぎてどれにしようか目移りして迷っていたのですが、
ついにこちらのテンプレートお借りしました!
とてもおしゃれなテンプレートで気に入っております。

ところで、ひとつお伺いしたいことごあるのですが、
こちらのテンプレートで特定のカテゴリを非表示にすることは可能でしょうか?

以前に使っていたテンプレートですと、スタイルシートで指定したカテゴリを非表示にさせたり、fc2変数を利用して子カテゴリをまるごと非表示にできていたのですが、
なにぶん仕組みが分からぬままいつもコピペで対応していたのでテンプレートが変わってしまうと自力では分からない状態です…

お手数をお掛けして大変恐れ入りますが、こちらのテンプレートでカテゴリを非表示にできる方法がありましたら教えていただけないでしょうか?


とくに急ぎませんのでお時間余裕がある際に教えていただけましたら嬉しいです。


2015/11/23 (Mon) 20:03 | EDIT | REPLY |   
Akira  
To あきしなさん

ありがとうございます

で、カテゴリ非表示ということですが、なんとなく「こうかなー」と思うものがあるのですが、プラグイン内容の方を修正している、というのが大前提になってきます。
それとも私が思いつかない既存の方法があるのかもしれません (´・ω・`)
以前お使いになられていた該当CSSのコピーを頂くことは可能でしょうか。
コピペしていたのはスタイルシート(CSS)だけかしら。
差し支えなければ鍵付きで構いませんのでソース内容を拝見したく思います。
プラグインを編集されているようであればそちらの方も。
よろしくお願いします

2015/11/23 (Mon) 21:14 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/11/23 (Mon) 22:10 | EDIT | REPLY |   
Akira  
To カテゴリの件 内緒さん

コメント書きましたがちょっと私の方が混乱してしまいましたので一旦破棄します(笑)
内容を整理してまた改めます ^^;

2015/11/23 (Mon) 23:02 | EDIT | REPLY |   
あきしな  
No title

Akiraさま

Valparaisoに合ったやり方でご検討いただけたらと思います!
親子関係の振り分けは終わっています。

もし非表示カテゴリが難しそうでもValparaisoはこのまま使わせていただきたいと思っているので大丈夫です(*^_^*)

お忙しい中本当にすみません。
急ぎませんので、お時間ある際に検討いただければと思います。









2015/11/23 (Mon) 23:39 | EDIT | REPLY |   
Akira  
To あきしなさん

えっとですね。まず私のイメージする「カテゴリ非表示」とはかなり違うような気がします (´・ω・`)
カスタマイズの方法を拝見しましたが、内容的には
「リストにカテゴリを表示させないことでジャンプするのを防ぐ」
というのが一つ。
そしてもうひとつは
「display: none; を指定することで表面上存在しないと偽装する」

これだとページ送りどうなるんやろー (´・ω・`)
そしてCSSで表面上非表示になっているだけですので、例えば
1ページに10記事表示の設定をしており、そのうちの5記事が非表示指定したカテゴリの記事である
→ 1ページに5件しか表示されない

こういう状況になりますよね。
んで、個別ページからページ送りを利用した時に前後に非表示カテゴリの記事があると困ったことになりますね。
非表示にはできますが、記事自体は存在しているのでページ送りだけがポツンとあってコンテンツが無いお化けページになってしまいますよね (´・ω・`)
(こちらは時系列ページ送りを採用しないことで回避できます)
一つ目・ふたつ目のリンク先の記事内容はINDEXページが存在していて、そこに特定カテゴリのリストを書かない、という処理ですよね。
これあくまでも「リスト表示させない」ということで合ってるんでしょうか(笑)
確かにリンクが無ければ辿りつけないけれども...。
ページ送りとページあたりの記事数の不整合、この二点弊害ありますよということを念頭にお願いします。

まとめます。

CSSを利用して「非表示」にすることで「存在しない状態を偽装」します
= 場合によって1ページあたりの表示記事件数がおかしくなります。

一旦投稿しますー。

2015/11/24 (Tue) 00:30 | EDIT | REPLY |   
Akira  
To あきしなさん ②

ちょっと確認しますね。
サイドバーのカテゴリ関連プラグインはご利用になっていない、ということで合ってますか (´・ω・`)
そして、子カテゴリを表示させないためのリスト構成のソースは所持している。
と、こういうことですよね?
それを一体どこに放り込んだものやら?
というのが一つの疑問ってことかしら。
とりあえず現状で思いつく方法を今から書きますけれども、主旨違いのものがあれば省いてください。

ーーーーーー サイドバーへのカテゴリリスト設置

Ctrl+Fキー検索

<!--plugin_first-->

まずここを目印にして頂いて、

ここか
<!--plugin_first-->
内容
<!--/plugin_first-->

ここか
<!--plugin_second-->
内容
<!--/plugin_second-->

ここか
<!--plugin_third-->
内容
<!--/plugin_third-->

ここ

この色分けブロックのどこかの間(ここか, ここ の部分)に以下を追加

<section class="side_bar">
<h3>タイトル</h3>
お手持ちのコード内容
</section>

コードに準ずる内容のCSSがあればそれもCSSソース末尾に記します。
これでサイドバーへのカテゴリリスト設置はOKです。
で、CSSの内容がある場合はこんな感じかと ↓

.クラス名 {
display: none;
}

このクラス名が私の方ではわかりませんので、これ以降の内容と合致させた方が良いと思います。
いくつかありますので、お手持ちコードの内容を変更する方が良いかもです。

ーーーーーー カルーセルスライダーから特定カテゴリ内の画像を非表示にする

これをやらないと意味がないですよね (´・ω・`)
画像出てたらそこからジャンプできてしまいます(笑)
Ctrl+Fキー検索

<div class="item">

以下のとおり修正

<div class="item cate<%topentry_category_no>">

上記内容はhtmlソースです。
続いてCSSソースの末尾に以下を追加

.cate非表示にしたいカテゴリナンバー {
display: none;
}


例えばカテゴリNo.が12ならば

.cate12 {
省略
}

という形です。
これで指定カテゴリ内の画像はカルーセルに表示されません。

ーーーーーー 記事の非表示

ValparaisoにはINDEXページがありません。
一番目リンク先の記事内容はこのINDEXページ(エンターページ・入り口ページ)があることを前提としています。
ですがValparaisoは時系列で記事を表示するタイプ = どのカテゴリに属しているかは無視
という形のテンプレートです。
ここから特定カテゴリの記事を抹殺します(笑)
Ctrl+F検索

<section class="main-body" id="<%topentry_no>">

以下の通り修正

<section class="main-body cate<%topentry_category_no>" id="<%topentry_no>">

これで記事も出てこなくなります。
前述したのはこれですね。
単に非表示になるだけなのでページあたりの件数が〜 という弊害の部分。

ーーーーーー タイトルリストから非表示

Ctrl+F検索

<!--titlelist-->
<div class="contents bottom-adjust20">

修正

<!--titlelist-->
<div class="contents bottom-adjust20 cate<%titlelist_category_no>">

ーーーーーー 検索結果から非表示

検索

<!--topentry-->
<div class="contents">

修正

<!--topentry-->
<div class="contents cate<%topentry_category_no>">

検索はhit数にはカウントしてしまいますので、hit数表示も消す場合には以下を削除

(<%total_num> hits)


結局記事にたどり着くルートがたくさんあるもんですから、そちらを潰しておくということになります。
で、個別記事からのページ送りについてはValparaisoは時系列移動ですからまずいですね (´・ω・`)

ーーーーーー 個別記事ページ送りをカテゴリ間移動に変更

検索

<!--preventry-->
<a href="<%preventry_url>" title="<%preventry_title>"><span class="normalfont"><%preventry_title></span></a>
<!--/preventry-->
</div>

<div class="center-home">
<a href="<%url>" title="<%template_home>">Home</a>
</div>

<div class="right-page-bottom">
<!--nextentry-->
<a href="<%nextentry_url>" title="<%nextentry_title>"><span class="normalfont"><%nextentry_title></span></a>
<!--/nextentry-->

修正

<!--preventry-->
<a href="<%prevcategoryentry_url>" title="<%preventry_title>"><span class="normalfont"><%preventry_title></span></a>
<!--/preventry-->
</div>

<div class="center-home">
<a href="<%url>" title="<%template_home>">Home</a>
</div>

<div class="right-page-bottom">
<!--nextentry-->
<a href="<%nextcategoryentry_url>" title="<%nextentry_title>"><span class="normalfont"><%nextentry_title></span></a>
<!--/nextentry-->

2015/11/24 (Tue) 01:04 | EDIT | REPLY |   
Akira  
To あきしなさん ③

注意点

非表示にはなりますが、読み込み自体は行われますのでページ表示が軽くなるどころか逆に少し重たくなるかと思います。
ですからページ遷移のエフェクトは外された方が良いかもしれない (´・ω・`)
それから度々言及しますが記事数の不整合ですね。
ここをご理解頂ければと思います。

FC2が非表示カテゴリを実装してくれれば済む話しなのにねー (´・ω・`)
今後に期待(笑)

2015/11/24 (Tue) 01:08 | EDIT | REPLY |   
こう  
No title

始めまして。

先日Akiraさんの「Jingle」というテンプレートを使おうとしたのですが、一つ不具合が出てしまったので質問させてください。

私のブログではタグクラウドのプラグインにkc_hajさんの「タグクラウドとサーチ」というプラグインを使っているのですが、テンプレートを「Jingle」にしたところexpandができなくなってしましました。
(kc_hajさんのプラグインにはexpandとcollapse機能があります)

公式テンプレートである「Diary_2column」では正常に動作するのですが・・・
何が原因なんでしょうか?

わたくしHTMLでして、教えていただけると嬉しいです・・。

2015/11/24 (Tue) 04:36 | EDIT | REPLY |   
Akira  
To こうさん

ありがとうございます

>タグクラウド+サーチプラグインが機能しない件

まず原因から。
ご指摘のDiary_2columnでは正常動作し、Jingleでは動作しないという点。
これは「ページ内スクロール」が実装されているか否かの違いです。
右の隅にページtopへジャンプ、ページbottomへジャンプするためのボタンがJingleにはありますよね。
一方公式テンプレの方にはページ内スクロールの機能がついていません。

ページ内で移動させるのに<a href="#">というのを使いますが、このhref="#"が該当プラグインではexpand(展開)、collapse(折りたたみ)の動作に割り当てられています。
ところがJingleテンプレの方ではhref="#"はページ内移動に割り当てられていますので、役割がバッティングしているわけです。

------

で、JSに
preventDefault()
という、特定<a>タグから役割を外すためのコードがありますが、
このパターンの場合には私のテンプレートの方ではなくプラグインの内容を操作する必要があります。
共有プラグインのコード内容については私個人からは不可侵ですので、コード内容の改変についてはできません、とお返事するしかありません。

-------

仮にページ内移動が不要だ、という場合にはテンプレートから該当コードを削除してください。
プラグインは正しく動作する代わりにページ内でのスクロール移動ができなくなります。
あまり長文はかきません・スクロールボタンは要りません、ということであればこれが一番良いと思います。
スマホに「スマホ専用版」のテンプレートを別で設定しているのであればそれでも良いかもしれません。
スマホ版をご利用にならずにJingleをレスポンシブとしてスマホ閲覧時にも採用される場合、
スマホでのスクロール移動は必須だと思いますので、top/ bottomボタン削除はおすすめしません。
上記内容を踏まえて頂いてご検討ください。
ページ内移動を外される場合の手順

Ctrl+Fキー検索

<script src='http://blog-imgs-79.fc2.com/v/a/n/vanillaice000/fade500tmb.js'></script>

上記を削除
続いて

<div id="pagetop"><a href="#wrapper" id="go_top"><span class="fa fa-angle-up"></span></a></div>
<div id="pagemiddle"><a href="#secondary" id="go_middle">MENU</a></div>
<div id="pagebottom"><a href="#end" id="go_bottom"><span class="fa fa-angle-down"></span></a></div>

上記を削除。
これでページ内移動の機能は失われます。
よろしくお願いします (*_ _)

2015/11/24 (Tue) 15:01 | EDIT | REPLY |   
あきしな  
No title

Akiraさま

ご丁寧にありがとうございます!
無事に抹殺(笑)できました。

以前使っていたテンプレートはブログをホームページ風に見せるテンプレートで、
トップページにカテゴリー一覧を並べ、そのカテゴリごとに閲覧してもらう形でしたので、
スタイルシートで特定のカテゴリを非表示にしておけば、読者はそのカテゴリの記事には基本的には辿りつけない感じでした。


だいぶテンプレートのデザインが違うのに、無理を言って申し訳ありません・・・!
そして私自身が仕組みをよく分からぬまま質問してしまっていたので色々と惑わしてしまったことかと思います・・・
でもおかげ様で、無事に表向きは表示されない非表示カテゴリ記事を作ることができました(^^)


丁寧に説明していただき、助かりました。
本当にありがとうございます!

2015/11/24 (Tue) 15:45 | EDIT | REPLY |   
こう  

Akiraさん

お返事ありがとうございます。

とても詳しい説明をしていただいたおかげで
原因は理解できたので、あとは自分で調整してみようと思います。

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

2015/11/24 (Tue) 20:28 | EDIT | REPLY |   
Akira  
To あきしなさん

できたようで安心しました。
お疲れ様でした

2015/11/25 (Wed) 14:17 | EDIT | REPLY |   
Akira  
To こうさん

お手数おかけします。
よろしくお願いします

2015/11/25 (Wed) 14:18 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/11/27 (Fri) 23:06 | EDIT | REPLY |   
Akira  
To Valparaisoコメント色変更の件 内緒さん

ご迷惑おかけしております (*_ _)
ハンドルネームは現在こちらで投稿された文字列と同じでお間違いないでしょうか。

こちら私の説明不足で申し訳ございません。
記号の一部にはCSSでタブーになっているものがあります。
末尾のアスタリスクがそれに該当します。
CSS上でのアスタリスクは特別な意味を持っています。
例えば

* {font-size: 13px;}

こうあった場合には
「ページ内全ての要素に対する命令として フォントのサイズは13px」
といった内容です。
(これを「ワイルドカード」と言います。)
ですからクラス名としては利用できない特殊な文字なんです。
末尾の記号を省いて頂くと反映されるようになります。
(投稿時にも記号を除く必要があります)

とはいえハンドルネームですから思い入れもおありかと思います。
そこをご判断頂きまして、そのままで行かれるのであれば当該記事の方法は「使えない」ということになります。
申し訳ございません。ご理解くださいませ (*_ _)

2015/11/27 (Fri) 23:58 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/11/30 (Mon) 11:16 | EDIT | REPLY |   
Akira  
To コメント欄の件 内緒さん

説明不足で貴重なお時間頂いてしまいました。
ごめんなさいね (*_ _)

折れて頂く形になっちゃって申し訳ないですー (´・ω・`)
何か良い方法を今後思いつきましたらUPしようと思います。
あまり期待できんけど ( ̄∀ ̄;)

こちらこそありがとうございます

2015/11/30 (Mon) 15:04 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/12/24 (Thu) 17:34 | EDIT | REPLY |   
Akira  
To Valparaiso 空白の件 内緒さん

ありがとうございます

> コンテンツ上部の空白を削除したい件

こちらのことでお間違いないでしょうか(赤い部分)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/293847_zpsmijq270z.jpg

以下をCtrl+Fキー検索(CSSソース内にあります)

.element-header {
padding: 20px 30px;
}

以下の通り追加修正

.element-header {
padding: 20px 30px 0;
}


続いて以下を検索(htmlソース内)

<div class="contents">

2箇所出てきますが2件のうちの1件目の方です
(すぐ下に<div class="inner-contents">がついている方)
以下の通り追加

<div class="contents contents-adjust">


続きまして今度はCSSソース末尾に以下の内容を追加

.contents-adjust {
padding-top: 0;
}


スクショです ↓
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/293847a_zpsrj1jjrfi.jpg

お試しくださいませ。

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

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

2015/12/24 (Thu) 20:03 | EDIT | REPLY |   
Akira  
To Valparaiso ご報告頂いた 内緒さん

上手く行ったようで良かったです。
お疲れ様でした

2015/12/26 (Sat) 00:50 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/03/01 (Tue) 17:37 | EDIT | REPLY |   
Akira  
To Valparaisoカスタマイズの件 内緒さん

ありがとうございます

4月末頃までこの状態ですのでどうぞお気になさらずお伝えください。
即日ご返答のお約束が出来ないのが申し訳ないのですけれど。
お気遣いありがとうございます

2016/03/02 (Wed) 01:25 | EDIT | REPLY |   
aya  
新着記事のサムネイルについて

初めまして。

こちらのテンプレートがとても気に入っていて、使わせていただいております。

さっそく質問なのですが、先日からテンプレートの編集をすると(バナーの画像の変更や、バナーの文字など)、

『what's new』のサムネイルがnoimageとなってしまいます。

以前も似たようなことがあり、テンプレートをダウンロードし直しました。

今回はダウンロードしなおしても状況が変わらず、原因がわかりません。

カルーセルには通常通りにサムネイルが表示されていて、what's newのみ、デフォルトの港の画像が表示されているような状態です。

ちなみに、テンプレートをダウンロードして、編集せずに適用すると、what's newには正常にサムネイルが表示されます。


お忙しいなかたいへん恐縮ではございますが、ご教授お願いいたします。

2016/03/07 (Mon) 07:48 | EDIT | REPLY |   
Akira  
To ayaさん

ご面倒おかけしております (*_ _)
こちらの記事をお読みください ↓

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

現時点で直す方法というのはありませんので、記事内容の通りの一時的処置をお願い致します。
ごめんなさいね

以前の同症状については、Googleが一時的にAPIを廃止したためです(笑)
反響が大きかったためか、現在では復活しております。

2016/03/07 (Mon) 08:47 | EDIT | REPLY |   
aya  
ありがとうございます!

迅速なご対応ありがとうございました!
根気強く待ちたいと思います。

今後ともよろしくお願いします(*^o^*)

2016/03/07 (Mon) 11:21 | EDIT | REPLY |   
Akira  
To ayaさん

とりあえずじっと我慢の子で(笑)
私も何もできなくて困ったー ( ̄∀ ̄;)

こちらこそよろしくですー

2016/03/07 (Mon) 11:29 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

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

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

2016/03/13 (Sun) 00:13 | EDIT | REPLY |   
Akira  
To Valparaiso入力ダイアログの件 内緒さん

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

やり方おわかりになったようで良かったです。
お疲れ様です

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

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

2016/03/14 (Mon) 16:19 | EDIT | REPLY |   
Akira  
To Valparaisoランキングの件 内緒さん

こんにちは ( ゚Д゚)ノ

基本的にテンプレートと関連のない内容についてはお答えしておりませんので詳細なご説明や導入手続きのハウツーについてはご容赦ください。
なのでヒント(?)だけ。

まず、内緒さんがどういったことをなさりたいのかがちょっと見えてこないです (´・ω・`)
昨日の時点では「入力ダイアログ」のことかな?
となんとなく感じたのですけれど。
入力ダイアログというのは、パスワードを入れると経路が開かれて閲覧ページへアクセスできるようになる、といったものです。
これはJavascriptを利用しなければ実装できません。
右クリックでパスワードがわかってしまうようですと意味を為しません(笑)
それを防ぐにはJSの使用必須です。

参考記事
イヌでもわかるJavaScript講座 様
http://www.red.oit-net.jp/tatsuya/java/prompt.htm

-------

実際に組まれたコードを拝見しますと。
んー。んー。んーーー(笑)

① まず最初の< /br>の連続。
こちらは前要素と後続要素との距離を取るために空白行を入れている、と解釈します。
これは「ナシ」です(笑)
距離を取るには

<div style="margin: 上の距離px auto 下の距離px">

そしてhtml5ですからxhtmlである</ br>は用いません。
<br>でOKです。

② getElementByIdでの取得IDに数字を用いている

これは望ましくないです。
何故ならFC2ではコメントを数字で振り分けておりますので、IDの混同が起こります。
id名やclass名というのは自分でわかるもの(覚えられるもの)で かつ 他に使用されているものと重複しないように付ける必要があります。

③ <a>タグ連続によるシンタックスエラー

マウスカーソルをポインターに指定するためだけの<a>タグの中に、さらにページ遷移用の<a>タグが挟まれており、これは完全な文法エラーです。
カーソル指定はデフォルトではautoですので、リンク先が設定されていれば自動的にポインターになりますので不要です。
カーソル用<a>の終了タグ</a>が欠落しているようですので、
開始タグ<a style="〜省略>
こちらを削除して修正します。

--------

一度ご自分がなさりたいことと照らし合わせながら、参考リンク先をご覧くださいね。

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

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

2016/03/14 (Mon) 17:36 | EDIT | REPLY |   
Akira  
To Valparaisoの件 内緒さん

参考記事はご覧になりましたか?
ド素人でもなんとかなるものですよ(笑)
まずはやりたいことを明確にすること、そしてどんな語句で検索すればそれに最も違いものが探せるか、というのがミソです。

たぶん「入力ダイアログ」あたりが妥当じゃないかなー と思うのですけれど。
上手くすればまんまソースコードを掲載してくださっているサイトさんに出会えるかもしれません。

2016/03/14 (Mon) 17:44 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/03/15 (Tue) 22:03 | EDIT | REPLY |   
Akira  
To SEOの件 内緒さん

お疲れ様です ( ゚Д゚)ノ

SEO対策は「している」と思ってはおりますが、それを謳ってはおりません(笑)
現時点で最適と思われるものをhead情報として採用しています。
「SEO対策済テンプレート」という名目のもので誤解があるような気もしています。
『このテンプレを使うと検索上位になれるよ!』
というものではなく、
テンプレート内である程度操作できるもの = コンテンツ重複を防ぐ・適切なURLを正規化する 等
言い方を変えると
「ペナルティを極力防ぐ」
ことが重点になるかと思います。

内緒さんのブログが検索上位に挙がっているのは内緒さんのこれまでの積み重ねと考えて良いです。
良質なコンテンツを提供し、リピーターが多く居る、ということでしょうね。
結局SEOで最も大切なのは「コンテンツの質」です。

内緒さんのブログはある一定の内容に特化されていますので、
検索キーワードとしてはご自分で記されている2つの文言が最適です。
その「キーワード」が
・ブログタイトルに含まれており
・各記事のタイトルにも含まれており
・記事内容にも上手に散りばめられている
この3点とっても大事だと思います。
検索キーワードでヒットしやすいタイトルを常に20文字前後で設定する、というのを意識されると良いと思います。
例えば私ですと、テンプレートリリースのお知らせを毎回

Valparaiso

といったようにテンプレート名だけを記しています。
これを

FC2テンプレート Valparaiso

とした方が検索ヒット率としては格段にあがります。
私の場合はわかっててもやらない(笑)

一点だけ。
ページの表示が「遅い」と思われることがありましたら、
その際にはページ遷移のエフェクトを外してくださいね。
ページの表示が遅いとブラウザバックされてしまうこともあります。
エフェクトはアクセス数よりもリッチ感、という方へ向けてのものです(笑)
(現在の状態はそれほど負荷を感じるものではありません)

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

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

2016/03/16 (Wed) 16:19 | EDIT | REPLY |   
Akira  
To ValparaisoSEOの件 内緒さん

はい。そういう解釈で良いと思いますよ

ページ遷移エフェクトの件はこのページの記事内最後の方の
「ページの表示が重たい と感じられます方」
が該当です。
今のところ問題ないと思いますが、なんとなく気になることがありましたら削除をどうぞ。
まだご健在で安心しました(笑)

2016/03/17 (Thu) 20:39 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/03/17 (Thu) 22:39 | EDIT | REPLY |   
Akira  
To Valparaiso 内緒さん

こちらこそありがとうございます。
またいつでもどうぞ

2016/03/18 (Fri) 10:17 | EDIT | REPLY |   
Akira  
To Valparaisoの件 内緒さん

Ctrl+Fキー検索

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

htmlソース内に1箇所あります。
<!-- 注)ここまで削除(この行含む) -->
までを削除してください。

移動の場合には上記該当箇所をカットし、Ctrl+Fキー検索

<div id="primary">
<main>

このすぐ「下」へペースト。
ただしこの新着サムネイルはJava scriptで書き出しているものですので、ページ上部に移動させると画面がガクっと下がることがあります(スマホ要注意)
JSはテンプレ内容を描画した後に出力されますのでタイムラグが発生します。
そしてコメントをクリックした際に該当コメント位置まで下がりますが、この位置もズレます。
そこをご理解・ご検討頂いた上でお願いします。

-------

> トップページに出る写真を選ぶ〜

というのはカルーセルスライダーのことでしょうか。
Valparaisoは全文表示タイプですので恐らくそうだと思いますけれど、一応確認です。
カルーセルへの画像抽出は自動で行われ、条件としては、
・「本文の編集」内最初の1枚
・外部直リンクは抽出されない

出したくない画像は「追記の編集」へ掲載されるか、外部リンクで表示するか、あるいはダミー画像を抽出させるようにするか ↓ 以下が参考記事です。

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

このいずれかの方法でお願いします。

2016/06/03 (Fri) 15:00 | EDIT | REPLY |   
RIN  
追記にすると右側カラム?が表示されない件

Akiraさん、初めまして。

素敵なデザインのテンプレートに一目惚れして
迷いに迷ってこちらを使わせていただいています。
目の保養〜と、演出に見とれる毎日です^^

全くの初心者で気がひけるのですが3点教えてくださいm(_ _)m

・追記にするととカラム(プロフィール欄など)が消える
(PCでは表示なし、iphoneでは背景の白色が消えて項目のみ表示)

・追記を使用した記事と次の記事との間に大きく余白が開く

・追記を使用していない記事を囲む枠のサイズが変化する
(追記利用した記事はいつも通りです)


Twitterのつぶやき1日分を毎日記事化する機能を利用しています。

全文表示で普通の記事が埋もれるのを避けたいので
ツイートまとめだけでも以下のような形にしたいです。

本文:画像 + ツイート1件
追記:残りのツイート数件

単純に、本文記事を切り貼りしてやってみたら
上記のような状態になりました。
現在は本文のみ記載に戻しています。

・切り貼りした方法
本文
<dl class="fc2twtr"><dt><a href="https://twitter.com/アカウント名/">
<img src="http://画像.fc2.com/h/e/a/healingtarot/twitter_icon_画像jpg" alt="" /></a>
<a href="https://twitter.com/アカウント名/">アカウント名</a></dt><dd>
〜1件目のツイート

追記
2件目のツイート〜
</dl>

dl内容を本文と追記に分けるのだから
何か処理がいるかな?と思いながらやったら
案の定・・・という感じです。

つたない説明ですが、教えて頂けると大変ありがたいです。

急ぎませんので、お時間ある時にでも
どうぞよろしくお願い致します。

2016/06/07 (Tue) 11:21 | EDIT | REPLY |   
Akira  
To RINさん

お手数おかけしております。

<dl>内部にある要素
<dd>と<dt>の中身を本文と追記に分けることはできません。
これはhtml文法的な問題です。

<dl>とは定義リストです。
リスト全体を囲ってまとめ、「これは定義されたリストです」と宣言するのが<dl>の役目であり、リストの「親」です。

<dt>とはリスト内容の説明、つまり「タイトル」と考えれば良いかと思います。

<dd>とはリストそれ自体を指します。

<dl>
<dt>タイトル(リスト内容1の説明)</dt>
<dd>リストの内容1</dd>
<dt>タイトル(リスト内容2の説明)</dt>
<dd>リストの内容2</dd>
</dl>

この3要素はセットですので、切り離すことはできません。
中途で分断されたり、他の要素が入り込むのは絶対的NGです。
ですからテンプレートの仕様云々というよりも、シンタックスエラーによる構造崩壊でございます (´・ω・`)
カラム落ちなど発生しました際の原因のほとんどが記事内容に含まれるhtmlによるシンタックスエラーですー。

------

今ページを拝見しましたが、定義リストを無理に使う必要は無いかと思います。
この場合は単純に

<div style="margin-bottom: 以下に続く内容との距離px;"><a href="画像クリックでの遷移先" target="_blank"><img src="画像アドレス" alt="代替テキスト"></a><a href="アカウント名クリックでの遷移先" target="_blank">アカウント名</a></div>
<div style="margin-bottom: 以下に続く内容との距離px; background-color: 背景カラーコード; padding: テキストとボックスとの四方の距離px;">ツィート内容1</div>

上記までを「本文」へ

<div style="margin-bottom: 以下に続く内容との距離px; background-color: 背景カラーコード; padding: テキストとボックスとの四方の距離px;">ツィート内容2</div>

上記は「追記」へ。
内容3があるのなら上記の下へ続ける。

この方が良いと思いますよ (´・ω・`)

2016/06/07 (Tue) 12:15 | EDIT | REPLY |   
RIN  
ありがとうございます

早速のお返事ありがとうございました。

初歩の初歩の質問にも丁寧に解説して下さって
恥ずかしながらとても勉強になりました。

対策ですが、
自動で生成される<dl>形式を毎朝書き直すより
本文=画像のみ、追記=ツイート内容で分ける方が
手間がかからないと判断しました。

お手数おかけしてすみません^^;
少しずつ勉強していきます。

この度はありがとうございました!

2016/06/07 (Tue) 16:01 | EDIT | REPLY |   
Akira  
To RINさん

そうですね。それが良いかもです。
書き直すのは手間ですし大変ですものね。

こちらこそありがとうございます。
いつでもお気軽にどうぞ

2016/06/07 (Tue) 16:36 | EDIT | REPLY |   
blacksarah  
No title

すみません、初心者で・・・
トップメニューの"ADMIN"をクリックすると管理画面になるのですが、これはもし私がログイン中だと他の人もクリックすると私の管理画面が見られるということなのでしょうか?

それと・・・右側のプラグインでGofundmeの上のバナーがipadでは表示されないのですが、どうしてなのか、もしわかれば教えてください。また、そのバナーのサイズを変更したいのですが、出来なくて困っています。もし何か教えて頂ければ助かります。

2016/06/20 (Mon) 22:14 | EDIT | REPLY |   
Akira  
To blacksarahさん

こんばんは (●'ω')ノ

① Adminクリック

こちらは同じFC2ブロガーさんが訪問された際、その閲覧者ご自身の管理画面にすぐに戻れるように設置してあります。
非ログインの方、FC2ブログをお持ちでない方には機能しません。
(非ログインの方はログイン画面に移行し、その後自分の管理ページに移行。FC2ユーザー以外の方は新規アカウント作成を促されます。)
ですからblacksarahさんの管理画面に遷移するわけではありません。
例えば私がblacksarahさんのページでAdminをクリックすると、私自身の管理画面に戻ります。
言い換えると「マイページへ戻る」といった感じでしょうか。
個々の管理画面は第三者からは不可侵ですので、パスワードが知られてログインされない限り見られるということは起こりませんのでご安心ください。

② GofundmeのバナーがiPadで出てこない件

こちらはテンプレートの問題ではなく、原因は「フラッシュだから」です。
フラッシュコンテンツ(Adobe shockwave flash専用コンテンツ)はiPhoneからは閲覧できません。
また、Android端末でも既に公式にフラッシュのサポートを打ち切っていますのと、大元のAdobe自体もモバイル向けフラッシュの開発を終了しています。
ですからスマートフォン全般(タブレット含む)でフラッシュコンテンツは閲覧できない、と思った方が良いです。
閲覧しようと思うならば古いAndroid端末を利用するか(iPhoneは発売当初からフラッシュのサポートはしていません)、あるいは有料ブラウザをダウンロードするかのいずれかになります。
閲覧者を選ぶことになりますのでフラッシュの利用はおすすめしません。

Gofundmeのことはわかりませんが、html5用バナーなど準備されてませんでしょうか。
画像のハイパーリンクでも十分のように思います。
フラッシュのままではモバイル端末ユーザーからのクリックを全て捨てることになります。
そして各PCブラウザでも最近では「フラッシュコンテンツ非表示」がデフォルトになっているのが現状です(任意解除はできます)。

2016/06/21 (Tue) 00:41 | EDIT | REPLY |   
Akira  
To blacksarahさん

今ちょっと調べましたが、フラッシュのウィジェットのみのようです。
こういったサイトこそウェブの動向を気にかけないといけないと思うんですけどね
今フラッシュを使うというのは得策ではないですよねぇ (´・ω・`)
バッジ(フラッシュバナーの下にある緑色のバナー)で代用するしかなさそうですね。

以下の内容、問題あるようでしたら削除しますのでお伝えくださいね。
ウィジェットに掲載されているお写真はお嬢さんですよね。
可能であればお嬢さんの写真をお撮りになられて、そちらをハイパーリンクにご利用になられてはいかがでしょうか。
画像ハイパーリンク、というのは画像をクリックしたら該当ページにジャンプ、という性質のものです。
それから、微力ながら明日募金手続きさせて頂こうと思います。
良い結果になりますことを心からお祈り申し上げます。

ハイパーリンクの仕方

<a href="遷移先ページアドレス" target="_blank"><img src="画像アドレス" alt="代替テキスト"></a>

画像サイズは横600px程度が良いと思います。
ご不明な点がありましたらお尋ねくださいね。

2016/06/21 (Tue) 01:01 | EDIT | REPLY |   
blacksarah  
ありがとうございます

よくわかりました!ありがとうございます!
そんなに詳しくないので大変参考になりました。

また、募金の件、重ねて本当にありがとうございます!
思わぬことで、驚いておりますが、心より感謝申し上げます。
ありがとうございました。
また、何かわからないことが合ったら、相談させて頂きます。

2016/06/22 (Wed) 00:19 | EDIT | REPLY |   
Akira  
To blacksarahさん

はい。一度ご検討くださいね。

募金の件は
「ボランティア活動」の一貫ではなく、「私の(ブログ主の)身内なんです」というのがわかるようにした方が良いかもしれません。
ボランティアだと思われてしまうとスルー率も高くなるのではないでしょうか。

どうぞくれぐれもお体ご自愛くださいね。
陰ながら祈っております。

2016/06/23 (Thu) 16:57 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/09/28 (Wed) 22:54 | EDIT | REPLY |   
Akira  
To スマホ版の件(コメント箇所 Valparaiso) 内緒さん

こんばんは ( ゚Д゚)ノ

> FC2のスマートフォン用のテンプレート〜略〜 おかしなことになっております

とのことですが、それは「スマホ専用版」のことでしょうか。
それともValparaisoテンプレのレスポンシブ表示のことでしょうか。
前者であるならば私のテンプレートとは全く関係ありません。
また、ブログアドレスをお伝え頂かなければお答えのしようもありません。

参考記事
・スマートフォン専用版がおかしいので直してもらえますか?
・URL(ブログアドレス)を知らせずに質問しても良いですか?
の2項目をお読みください。
http://vanillaice000.blog.fc2.com/blog-entry-26.html

======= 以下は上記をご確認頂きまして、Valparaisoのスマホ表示だと仮定してのお返事です。

①サイトのカテゴリ各種部分が表示されていない。

プラグインが表示されないという意味でしょうか。
当方の環境では問題なく表示されています。
デバイス名とブラウザ名を教えてください。

②いつの間にか広告?的な物が沢山表示されている。

スマホ広告については個別記事下のスポンサーサイト(テキスト広告, 非表示設定可)と
画面下部のオーバーレイ広告のみのはずです。
(アダルトジャンルはその限りではありません)
多数の広告及びランキングなどが表示されているならばそれは「スマートフォン用テンプレート = Valparaisoとは無関係」です。

③プラグイン対応の所に☓印が表示されている

拝見しないことにはなんとも言えません。
ごめんなさいね。

当該記事中の「サンプル」ボタンをスマホからクリックされまして、同じデザインになっていないのならば内緒さんがおっしゃっている問題のあるテンプレートは「スマホ版」です。
一度ご確認くださいませ。
よろしくお願いします。

2016/09/28 (Wed) 23:52 | EDIT | REPLY |   
内緒さん  

お忙しい所、ありがとうございますw

確認してみます!!

お手数おかけいたしました^^

2016/09/30 (Fri) 23:19 | EDIT | REPLY |   
Akira  
To 内緒さんさん

はい。よろしくお願いします (●'0'●)/

2016/10/01 (Sat) 00:47 | EDIT | REPLY |   

Leave a reply

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