Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

BeHappyテンプレート


名称 BeHappy
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC 右と下/ SP ドロワー(左からスライド)
新着サムネイル表示 あり
鍵つきブログの方は表示されませんので削除をお願いします

Google Feed API廃止に伴い削除しました
記事幅 可変 最大620px
サイドバー幅 PC 300px固定 下に移動した際は最大 600px/ SP デバイス幅依存
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = 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新着サムネイルを削除しました

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


更新履歴 2016.10.30


メンテナンス

・ スライダーの仕様を一部変更
・ 全体レイアウトを再調整
・ 主要公式プラグインの整形
・ ベンダープレフィックスの整理
・その他微調整

スライダー内予備(画像が1枚も無かった場合の代替)の「Welcome画像」を不要にし
画像が無い場合にはスライダー自体が非表示になり かつ 全体レイアウトに影響を与えないよう調整しました

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


更新履歴 2016.1.10


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

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

更新履歴 2016.1.9


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


更新履歴 2015.12.12


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


更新履歴 2015.9.21


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


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



TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・トップページ ランダム再生の記事内UP画像スライダー(ランダムはフィクストに変更できます)
・トップページ 各ページ一番上の記事のみ大きめ表示
・サイドメニューはスマホのみドロワーになります


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


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



スライダーについて

2016.10.30のメンテナンス以前は
画像が1枚も存在しない場合に備えてのダミー画像(Welcome)が必要でしたが
メンテナンスに於いてWelcome画像不要に変更しました
画像が無い場合にはスライダー自体が非表示となり 全体レイアウトにも影響を及ぼすことはありません

スライダーの動きで可能なカスタマイズはソース内に注釈をつけてあります

スライダー不要の方ここから削除

上記を目印にどうぞ(htmlソース内 後方にあります)



No image画像変更

記事内の然るべき箇所に画像が存在しない場合に代替として表示されるNo image画像
表示されるページはトップページのみです
画像を変更される場合には

//blog-imgs-91.fc2.com/v/a/n/vanillaice000/behappynoimage.jpg

が対象アドレスですので ご希望の画像に差し替えをお願いします
「No image」のテキストは自動で乗りますが 画像上のマスク(文字を読みやすくするための処理)はかかりません

デフォルト画像 (縮尺掲載 実寸690×460 12KB public domain)






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


みなさんいつもありがとうございます (o'д`o)ゝ
関連記事

Comments 22

There are no comments yet.
Akira  
BeHappyの件 内緒さん

お使いのテンプレートはBeHappyでお間違いないでしょうか。

> スライドをwelcomeのみに固定したい

①read more による特定ページ遷移が必要な場合
②read more からのページ遷移不要の場合

この2パターンご説明しますね。

--------- パターン①

修正範囲をまずCtrl+Fキー検索で探します

<!-- 注)スライド内キャプション不要の方ここから削除 -->

上記文字列を目印にお願いします。
で、これから内容を触る範囲は以下の箇所です。
(わかりにくいのでスクショでご確認ください)

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/%202015-11-27%2021.50.02_zpsne5yetrw.jpg

デフォルトのwelcome画像は中央に文字がありますので、read more の文字は非常に読みづらくなります。
ですからページ遷移先の表示が必要な場合には代替画像をご用意されることをおすすめします。

スクショの緑色付け範囲を全て削除されまして以下の内容と差し替えます。

<div class="sp-slide">
<img class="sp-image" src="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/welcome321.jpg" alt="welcome-image-photo">
<!-- 注)スライド内キャプション不要の方ここから削除 -->
<p class="sp-layer sp-white sp-hide" data-horizontal="35%" data-vertical="30%" data-width="30%" data-show-delay="800" data-hide-delay="800" data-show-transition="up" data-hide-transition="down">
<span class="gallery-title">
ここにテキスト内容
</span>
<a href="ここにページURL" class="gallery-a">
READ MORE
</a>
</p>
<!-- 注)スライド内キャプション不要の方ここまで削除 -->


welcome画像を差し替える場合にはURLの部分を該当の画像アドレスに変更します。
キャプションが表示される際のエフェクトは初回ローディング時のみ適用されます。

---------- パターン②の場合

上記で差し替えた内容からさらに

<!-- 注)スライド内キャプション不要の方ここから削除 -->
から
<!-- 注)スライド内キャプション不要の方ここまで削除 -->

の範囲を削除します。
これでwelcome画像だけが表示されるようになります。

パターン②の場合にはスライダーを形成するJqueryが無駄と言いますか、パフォーマンスを落とすことになります。
気になるようでしたら単に画像を表示させるだけのものに変更した方が良いかもしれません。
その際にはまた一声おかけください。
(Jqueryを除いても劇的に読み込みスピードが速くなるわけではありません)

複数画像(記事内画像ではなく固定で)を表示させるには旧ページの方に記してありますのでご確認をお願いします。
http://vanillaice000.blog.fc2.com/blog-entry-207.html

わかりにくい点等ありましたらご指摘くださいませ

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

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

2015/12/11 (Fri) 13:24 | EDIT | REPLY |   
Akira  
To BeHappy 画像の件 内緒さん

ありがとうございます

ちょっと私の理解力が鈍くて申し訳ありませんですー。
> 主さん
というのは私のことでしょうか。
それから
> ハートを手で囲っている画像
というのはどれを指しているのでしょう。
今私がここで設定中のテンプレですか?
それともBeHappy内かしら (´・ω・`)
その画像をご利用になりたい箇所というのも併せてお伝え頂けると助かります。
よろしくお願いします

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

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

2015/12/18 (Fri) 09:38 | EDIT | REPLY |   
Akira  
To BeHappy ハート画像の件 内緒さん

http://vanillaice000.blog.fc2.com/page-30.html

これのことでしょうかしら。
(テーブルと動画だらけのページなので表示が遅いです。すみません。
最初に表示されるスライダー内の画像のこと。)

こちらの画像はですね、Late Night Alumni(れいとないとあらむない)というアーティストのEmpty Streets(えんぷてぃ すとりーつ)というアルバムのカバーなんです (´・ω・`)
たまたまサンプルを撮るときにこの画像がスライダーに表示されていた、ということであります。
申し訳ない ( ̄∀ ̄;)
私がこの画像を加工して配布、というのは著作権違反であり二次配布にあたりますのでできないんです。
ご希望に沿えずごめんなさい (*_ _)

heart wallpaper free
で検索すると類似の画像に出会えるかもしれません ^^;

参考: Amazon
http://www.amazon.co.jp/Empty-Streets-Late-Night-Alumni/dp/B000AJIANU

2015/12/18 (Fri) 16:45 | EDIT | REPLY |   
永福  
全ての記事の下に定型文挿入

こんにちは、BeHappyテンプレート、とてもきれいで機能的で、大変気に入り使わせていただいてます。どうもありがとうございます。

実は今回、各記事の下部分で、かつfc2拍手やfacebookボタンの上の箇所に定型文(ちょっとした文章とランキングサイトのバナーボタン)を挿入したく、いろいろと苦戦中です。何故か記事上部、あるいは関連記事やスポンサー表示の下に出てしまいます。

HTMLのどこにURLコードを張り付ければ良いのか教えていただけますでしょうか?よろしくお願いします。


2016/07/11 (Mon) 19:44 | EDIT | REPLY |   
Akira  
To 永福さん

ありがとうございます (・ω・)ゞ

ちょっと外しますので後ほど改めて確認しますね。
このコメント欄に追記します。
現時点でレイアウトが崩れてしまってますので、再DLしてデフォルトの状態に戻して頂いた方が良いと思います。
テンプレートがデフォルトの状態からの説明をさせてくださいね。
よろしくお願いします。

------

まずFC2のボタン関連の仕様のご説明です。
拍手等のボタンは表示・非表示が選べることになっています。
その選択ができるということは、
「表示する際はJava scriptを用いて挿入・描画している」
という理屈になります。
htmlソース内に無いものを描画するにはJSが必須です。

その挿入位置はFC2の仕様として既に決まっており、
「追記リンクの前」
「追記リンクの後」
この2パターンしか選択できません。
記事内容というのはFC2の変数によって出力されるわけですが、
その「追記リンクの後」というのは『ユーザーが記事内容としてFC2エディターを用いて書いた文章内容のすぐ後』ということになります。

<!--more-->
<div id="more">
<%topentry_more>
</div>
<!--/more-->

これが追記部分ですが、
<%topentry_more> というのが「追記の編集」内に書かれた本文です。
ボタン関連はこの変数の直後に挿入されますので、仮に<%topentry_more>の直後にランキング関連コードを記載しても… ↓

<!--more-->
<div id="more">
<%topentry_more>
ランキング関連
</div>
<!--/more-->

htmlソース内が上記のような状態でも、結果的にはこうなります ↓

<!--more-->
<div id="more">
<%topentry_more>
FC2ボタン関連
ランキング関連
</div>
<!--/more-->

FC2ボタンの方が優先になります。
これはもうどうしようもないです。
強制力の強いJSを用いて、追記直後(変数の直後)を判断して入れてきます。
これを覆そうと思う場合にはhtml内へのコード記述では不可能です。
従ってJSを利用します。

=======

で、JSでhtml内容を後付することになりますが、
ブログ村やランキング関連コード内容にお間違いはないでしょうか。
現在設定されている3ボタンで私の方でコードを組みますが、

●見た目の形状は今の状態と同じでよろしいでしょうか。
例) ボタンを横並びにしなくてOK?

●そしてFC2ブログランキング以外はボタン下にテキストが必要、ということでお間違いないでしょうか。

これからコードを組みますが、JSコード内では現在のように<br>を利用しての位置合わせは行いません。
ですから仮に修正しようと思ったとき、簡単に変更して頂けないと思います(笑)
なので最初にしっかり方針を決めて頂いた方が良いかな と。

上記2点についてお返事頂ければ幸いです。
とりあえず、今の状態に一番近い形状だと以下の通りです。
htmlソース内
</body>
の直前にコピペ。
*URL掲載オーバーですので置き換えてください。アドレスのみで他のものは入れないよう注意。
*音符記号とハート記号は半角英数字でそれぞれ以下のスクショの通り置き換えてください。
(コメント欄に書くと実態文字に変換されてしまいます。)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2938432_zpsop7g575v.jpg
*置き換えが必要な箇所は太字にしておきます(音符とハートは太くなりませんので省略)。


<script>
$(function() {
$('<div style="margin: 30px auto;"><p style="margin-bottom: 15px;">記事がお気に召したらぽちっとお願いします♪励みになります♡</p><div style="margin-bottom: 15px;"><a href="FC2ランキングリンク" target="_blank" title="FC2 ブログランキングへ"><img src="FC2ランキング画像" alt="FC2 ブログランキング" style="vertical-align: top;"></a></div><div style="margin-bottom: 15px;"><a href="ブログ村リンク" target="_blank" title="にほんブログ村 海外生活ブログ 南フランス情報へ"><img src="ブログ村画像" style="width: 88px; height: auto;" alt="にほんブログ村"></a><p><a href="ブログ村リンク" target="_blank">にほんブログ村</a></p></div><div style="margin-bottom: 15px;"><a href="ブログランキングリンク" target="_blank" title="健康と医療 ブログランキングへ"><img src="ブログランキング画像" style="width: 110px; height: auto;" alt="ブログランキング"></a><p><a href="ブログランキングリンク" target="_blank">健康と医療 ブログランキングへ</a></p></div></div>').insertBefore('.fc2_footer');
});
</script>


注)
① FC2ブログランキングのみwidth指定が記載されていませんでしたので、上記コード内でも省いています。
② $('<div style="margin: 30px auto;">
赤字の部分がランキングバナー全体と記事本文との距離ですので調整してください。
③ 画像リンクにはtitleをつけておきました。
テキストリンクの方はtitleを省いてあります。
④ title属性とalt属性を混同しているような内容でしたので修正しておきました。
title属性 = マウスオーバーした際に出てくるテキスト
alt属性 = 画像に対する端的な説明文
⑤ style="margin-bottom: 15px;"
という箇所が3つありますが、こちらが各バナー間の距離です。
(バナー下に空白を設けています)

結果スクショ ↓

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

2016/07/11 (Mon) 21:32 | EDIT | REPLY |   
永福  
出来ました!

Akiraさん、

早速コードを書いてご対応くださり、どうもありがとうございました。
プログラミングの知識が全くないもので、ご丁寧に教えていただき、
大変助かりました。
おかげさまで求めていた所にばっちり表示されました!

素敵なテンプレートを作ってくださるだけではなく、
配布後もこんなにご親切に対応いただけるなんて、感謝です。

また質問にお邪魔させていただくことがあるかもしれませんが、
今後ともどうぞよろしくお願いします。

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

2016/07/12 (Tue) 06:05 | EDIT | REPLY |   
Akira  
To 永福さん

これで大丈夫でしたか。
良かったです

はい。いつでもお気軽にどうぞ (・ω・)ゞ
ありがとうございます

2016/07/12 (Tue) 10:15 | EDIT | REPLY |   
ricorio  
Akiraさま はじめまして


Akiraさま、はじめまして。
2週間前に始めたばかりのブログで、
BeHappy を使用させていただいております。
最高に自分好みの素敵なテンプレートで、
大変嬉しく思っています。どうもありがとうございます。

現在、少し気になっていることが2点あります。
ご指導をいただけると大変助かります。

    ーーーーーーーーーーーーーーーーーーーーー

1:トップページ、カテゴリー別ページなどに、各記事の本文の冒頭部分が表示されますが、表示される文字数を変更するためには、どのような作業を行なったらよろしいでしょうか?

2:INDEX に表示される記事の通し番号について
思いつくままに記事を下書き保存したり削除したりしたため、公開の順番と通し番号(記事番号、エントリーナンバー)が、まったくかみあっていない状態です。テンプレートの編集により、INDEXでの通し番号を、記事の公開順に直すことはできますか?それができない場合、通し番号でなく「・」などの記号で表示するよう変更ができますか?

    ーーーーーーーーーーーーーーーーーーーーー

お忙しいところ、ご面倒をおかけします。
お時間のあります時に、ご回答をいただければ幸いです。
どうぞよろしくお願いいたします。
     

2017/01/22 (Sun) 08:16 | EDIT | REPLY |   
Akira  
To ricorioさん

ありがとうございます

> トップページで表示される文字数を変更〜

これは文字数を減らしたいのでしょうか。
それとも増やすんでしょうか。
FC2の仕様として、要約で表示できる文字数は
「本文(追記は除く)に書かれている文字をhtml内容なし改行なし200文字以内
と決められています。
現在の設定は最大200文字になってます。
ですからこれ以上「増やす」ということはできません。
(改行の挿入も不可です)
「減らす」作業であればJSコードが必要になります。

Ctrl+F(Windows)/ Command+F(Mac)キー検索

<!-- 注)スライダー不要の方ここまで削除 -->

このすぐ「下」に以下をコピペ。

<!--not_permanent_area--><!--not_edit_area--><!--not_titlelist_area--><!--not_search_area-->
<script>$(function(){var e=120;$('.element-description').each(function(){var a=$(this).text();var b=a.length;if(b>e){var c=a.substring(0,e);var d=c;d+='<span class="omit">…</span>';$(this).html(d)}})});</script>
<!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area--><!--/not_permanent_area-->

上記の設定は、トップページ記事全て最大120文字に制限、という内容です。
文字数変更は赤字部分を200以下の数字でお願いします。
また、ページ内最初の1件だけは大きめのデザインになっていますので、そこを他記事と同じ文字数にされるとバランスがよろしくないかもしれません。
その場合には最初の1件だけを対象外にしてください。
以下の通り

<!--not_permanent_area--><!--not_edit_area--><!--not_titlelist_area--><!--not_search_area-->
<script>$(function(){var e=120;$('.element-description:not(.element-item:first-of-type .element-description)').each(function(){var a=$(this).text();var b=a.length;if(b>e){var c=a.substring(0,e);var d=c;d+='<span class="omit">…</span>';$(this).html(d)}})});</script>
<!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area--><!--/not_permanent_area-->

最初の1件は最大200文字、その他は最大120文字、という内容です。
もちろん赤字部分は変更可。その他記事のみ対象。

=========

> INDEX に表示される記事の通し番号〜

こちらもFC2の仕様をご説明します。
記事番号は「サーバーにアップされた時点での連番」になります。
これはFC2に限らず、どこのブログサービスでも通常の仕様です。


そしてこの連番がページのURL生成にも噛んでいます。
とうことは、番号を操作するとURLが変わってしまいますので、既にインデックス(検索結果に載ること)されてしまった記事については、検索から来られた方に全く別のページを表示してしまうことになります。
内容が修正されるにはGoogleのクロール次第ですが数ヶ月かかると思ってください。


・連番がテレコになる原因
= 時系列と実際に記事を書いた日にちが合致していないため。
(indexは時系列並びです)

・欠番が発生する原因
= 時系列で最も新しい記事(連番の数字が最も大きい記事)以外の記事を削除したため。
例)
1, 2, 3, 4 と記事があり、4を削除して新しい記事を書いたら、新しい記事番号は「4」欠番なし。
1, 2, 3, 4 と記事があり、2を削除して新しい記事を書いたら、新しい記事番号は「5」欠番あり「2」

この仕組は覚えておかれると良いと思います。

● 対処法(連番にこだわる場合)
① 全ての記事内容をそれぞれコピーし、一旦全て削除。
その上でひとつづつ再アップ
② FC2のインポートシステムを利用
(htmlエディターが必要かと思います)

②の方法ですが、欠番を手動で埋める作業になりますので、初心者の方へはおすすめしません。
①②の作業共に一旦全削除の作業が要りますので勇気も必要かと思います(笑)

「無理な場合は数字を無しに〜」というご自身の選択肢もお有りのようですので、個人的にはそちらをおすすめします。
マーカーが不要であれば以下を検索

<%titlelist_eno>:

htmlソース内に一箇所あります。
上記を削除
コロン( : )の後ろに半角スペースが入っていますので、それも含めて削除。
マーカーが必要であれば、削除した後の箇所に全角で ・ を入れてください。
(もっとbetterな方法もありますが、これが一番てっとり早いです)

=====

以上です。
一度お試しくださいませ。

2017/01/22 (Sun) 13:19 | EDIT | REPLY |   
ricorio  
どうもありがとうございます!

    
Akira さま

大変お世話になっております。
早速のとても丁寧で分かりやすいご回答、
どうもありがとうございます!

=====

INDEXの通し番号

教えてでいただいた手順で、
マーカー「・」に変更することができました。
すっきりしました!ありがとうございました!

=====

トップページで表示される文字数の変更

申し訳ありません。こちらは、少々手こずっています。
文字数はできるだけ減らしたいと考えています。
はっきりと書かず、申し訳ありませんでした。
とりあえず、教えていただいた手順に従って、
120文字に減らしてみて、レイアウト等確認してから、
もう少し減らせれば、と考えたのですが、
該当のコードを該当箇所にコピペしても、
うまく反映されず、試しに文字数を「60」まで下げてみたところ、
全体が携帯電話のiモードサイトのようなレイアウトに変わってしまいました…
というような状況ですので、少し時間がかかるかもしれませんが、
まずは自分でがんばってみます。
それでも解決できない場合は、ご負担をおかけして恐縮なのですが、
あらためてご相談させていたきたいと思います。

=====

引き続きどうぞよろしくお願いいたします。

   

2017/01/22 (Sun) 14:18 | EDIT | REPLY |   
ricorio  
解決しました!


Akira さま
  
大変お世話になります。

トップページで表示される文字数の変更、
うまくいきました!
教えていただいたコードの挿入場所が、
ずれていたようです。
なんども確認したつもりだったのですが、
大変申し訳ありませんでした。

あらためてまして、
このたびは、とても親切に丁寧に対応してくださり、
どうもありがとうございました!
また、わたしのうっかりミスで、
お騒がせしてしまい、申し訳ありませんでした。
今後はこのようなご迷惑をおかけしないよう、十分注意いたします。

どこをとっても素敵なテンプレート、
自分のつたない写真も文章も見違えるほどです。
ずっと使わせていただきたいと思っています。
これからもどうぞよろしくお願いいたします。
   

2017/01/22 (Sun) 14:40 | EDIT | REPLY |   
Akira  
To ricorioさん

今確認しました。
該当コードが重複記述になっているようです。
それから気づくのが遅れて申し訳ございません。
テンプレートのバージョンがいくつか前のもののようです。
最新版は2017.1.13版ですので、差し支えなければ再DLをお願いしたいところです。
現在、右サイドメニューの最下部に「What's New」の項目がありますが、こちらはGoogleの該当サービス終了によって表示されなくなっています(JS動作が無駄になります)
お任せしますが、ページ表示の負荷も考えると再DLをおすすめしたい ^^;

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

● JSコード重複修正
● 再DLのご検討

上記2点をお願い致します。
とりいそぎ、作業お疲れ様です

2017/01/22 (Sun) 14:54 | EDIT | REPLY |   
ricorio  
最新版ダウンロードしました!

   
Akira さま


丁寧なご指導ありがとうございます!
いろいろ初歩的なところでうっかりしていて、申し訳ありません。
BeHappy最新版をダウンロードしました!
さきほど教えて頂いたコードも入れました。
確認しましたら、無事に表示されているようです。

最新記事に「New!」と入って、分かりやすいですね。
動きも、以前よりスイスイしているような気がします。
とても嬉しいです。
どうもありがとうございます!


追加の質問になってしまい、恐縮なのですが…
1週間ほど前、投稿記事が増えて行くにしたがい、
スライダーの表示がだんだんスムースでなくなりました。
(特にスマートフォンで、
オリジナルの画像を画面サイズに合わせる過程で、
時間がかかっているような印象でした。)
画像のサイズが各5MB近くあるのが負担になっているのかな、
と考えて、各記事の1枚目画像をすべて2MB未満のものに、
差し替えたことがありました。

スライダーが非常に気に入っています。
動作をもたつかせないための何か注意事項などがありましたら、
ぜひアドバイスをお願いいたします。
Akiraさんのブログ、ちょくちょくのぞかせていただきますので、
いつでもお時間のありますときに教えていただければ、結構です。


どうぞよろしくおねがいいたします!
  
   

2017/01/22 (Sun) 15:53 | EDIT | REPLY |   
Akira  
To ricorioさん

再DLの件、大変お手数をおかけしました (*_ _)

> スライダーの表示がだんだんスムースでなくなりました〜

こちらの件。
やはり大きな原因としては、一枚あたりの画像容量が大きすぎることです。
最低でもMB級の容量は避けた方が良いと思います。
画像というのは掲載サイズを小さくしたところで容量が削減されるわけではありません。
あくまでも元画像(原寸)の持つ容量がそのまま負荷となります。
画像編集で縱橫サイズを小さくすれば容量は小さくなりますが、
JPG画像は拡大はおろか縮小しても解像度が落ちてしまいます。
そして大判スライダーは横1000px程度は欲しいところです。
ですから適切な方法で容量だけを削減されることをおすすめします。

参考
http://vanillaice000.blog.fc2.com/blog-entry-228.html
http://vanillaice000.blog.fc2.com/blog-entry-208.html

下のリンク先で紹介している「TinyPNG」がおすすめサイトです。
この機会に一度お試しくださいませ。

2017/01/22 (Sun) 16:08 | EDIT | REPLY |   
ricorio  
大変助かりました

   
Akira さま


大変お世話になります。
追加の質問にも早速ご回答くださり、ありがとうございます!


そうでしたか…現状でも、使っている画像の容量が大きすぎたのですね。
紹介していただいた、過去の2つの記事も拝見しました。
画像の容量がページ表示与える影響の大きさ…
大変ショックを受けました。

アップロード可能な上限「5MB」にだけ気をつければ大丈夫くらいに考えて、
何も考えずにどんどん画像をアプロードして記事を作っていました…。
使っているパソコンモニタの解像度に合わせ、
日頃、5120 x 2880サイズで自分用の壁紙などを作っていたので、
その感覚のまま、5MB近い容量の画像を、
すでに記事の中でたくさん使ってしまいました…。
ブログを見てくださる相手の環境によって、
画像の表示が遅いくらいならまだしも、
まったく表示されなかったら確かに本末転倒ですし、
万が一クラッシュなんてさせたら、すごく申し訳ないですよね。
とりあえず、記事のなかで小さく表示させている画像について、
容量の小さなものに差し替えていくつもりです。


不幸中の幸い、と言いますか、かなりマイナーな題材のブログで、
訪れる方もほとんどいらっしゃいません。
知人にも、まだ数名にしかブログの開設を知らせていません。
面倒な作業にはなりそうですが、
今のうちに、対応をとることができそうで良かったです。
いろいろとアドバイスくださり、本当に助かりました。
どうもありがとうございました!
これからも、どうぞよろしくお願いいたします。
   

2017/01/22 (Sun) 18:25 | EDIT | REPLY |   
Akira  
To ricorioさん

画像の読み込み負荷はあなどれないものがありますので、webツールを上手に利用されると良いと思います。
少しでもお役に立てたなら幸いです。
こちらこそお時間頂きました。ありがとうございます。
修正作業の方もお疲れ様でした

2017/01/22 (Sun) 22:21 | EDIT | REPLY |   
ricorio  
各記事での画像掲載サイズについて

    
Akiraさん、こんにちは。
半年前には、こちらで丁寧にご指導くださり、どうもありがとうございました。
その後もずっと、BeHappyを大変気に入って愛用しております。
    
今回の質問は、各記事内に掲載される画像のサイズについてです。
現状よりも少し大きくできたら…と考えております。
Akiraさん作の他のテンプレート…
例えばLeaf と同じくらいの画像掲載サイズに設定を変更することは可能でしょうか?
もし、可能でしたら、ぜひ方法を教えていただきたいと思います。

お忙しいところ誠に恐縮ですが、今回もご指導どうぞよろしくお願いいたします。
   

2017/07/24 (Mon) 14:16 | EDIT | REPLY |   
Akira  
To ricorioさん

長くお使い頂き嬉しく思います

で、ご指摘のテンプレートについては私の製作したものではありませんのでなんとも言えません(笑)
要するに「記事幅を大きくしたい」という解釈で合ってますでしょうか。
記事幅が大きくなれば必然的に掲載画像のサイズも大きくなります。

Ctrl+F(Windows)/ Command+F(Mac)キー検索

#container

4箇所ありますが、最初のものが対象です。
この項目の
width: 80%;
赤字部分を
90
に変更。
そして
max-width: 1100px;
赤字部分を…
1300
ぐらいでどうでしょうか。
ブラウザ幅をなるべく大きくしてまだ小さいと感じるようであれば
1400
あるいは
1500
でも良いかもしれません。
あまり大きくしすぎても今度はテキストとのバランスが悪くなりますので1300程度がおすすめです。
よろしくお願いします。

2017/07/24 (Mon) 20:43 | EDIT | REPLY |   
ricorio  
ありがとうございます!できました!

お忙しい中、早速の回答をどうもありがとうございます!
質問の際に例に出したテンプレート、勘違いでした。大変失礼いたしました。

ご指示いただいたやり方で、記事幅を少しだけ大きくしました。
width: 85%
max-width: 1150px
と、書きかえてみました。このままでもなかなか良い感じですが、
しばらく様子を見て、さらにもう少し大きくするかどうか決めたいと思います。

今回も、とても分かりやすく教えてくださり、本当にありがとうございました!
まだまだつたないブログですが、テンプレートだけは最高だと思っています(^ ^)
これからもずっと使わせていただきます。
また何か質問させていただくことがあるかもしれません。
その際は再びご面倒をおかけしますが、どうぞよろしくお願いいたします。

2017/07/24 (Mon) 21:40 | EDIT | REPLY |   
Akira  
To ricorioさん

ご希望の形にできそうでしょうか。
こちらこそありがとうございます。
はい。またお気軽にどうぞ。
お疲れ様でした

2017/07/25 (Tue) 15:10 | EDIT | REPLY |   

Leave a reply

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