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

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

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

管理人のみ閲覧できます

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

To BeHappy 画像の件 内緒さん

ありがとうございます

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

管理人のみ閲覧できます

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

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

全ての記事の下に定型文挿入

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

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

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

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

出来ました！

Akiraさん、

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

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

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

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

To 永福さん

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

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

Akiraさま　はじめまして

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

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

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

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

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

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

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

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な方法もありますが、これが一番てっとり早いです)

=====

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

どうもありがとうございます！

　　　　
Akira さま

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

=====

INDEXの通し番号

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

=====

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

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

=====

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

　　　

解決しました！

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点をお願い致します。
とりいそぎ、作業お疲れ様です

最新版ダウンロードしました！

　　　
Akira さま


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

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


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

スライダーが非常に気に入っています。
動作をもたつかせないための何か注意事項などがありましたら、
ぜひアドバイスをお願いいたします。
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」がおすすめサイトです。
この機会に一度お試しくださいませ。

大変助かりました

　　　
Akira さま


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


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

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


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

To ricorioさん

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

各記事での画像掲載サイズについて

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

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

To ricorioさん

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

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

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

#container

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

ありがとうございます！できました！

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

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

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

To ricorioさん

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

ご教授お願い致します。

Akira様


はじめまして。
母ちゃん家と申します。

お教えいただきたくコメントさせて頂きました。
何卒宜しくお願い申し上げます。

どれも素敵で迷いに迷いましたが、
只今、BeHappyのデザインがとても気に入りを利用させて頂いております。
ありがとうございます。
母ちゃん家のブログのurlは、http://kaachanchi.blog.fc2.com/です。

ブログの名前は、
鹿児島市谷山にある鶏飯・串揚げ Dining『母ちゃん家』
ブログの説明は、
鹿児島市谷山 小松原 笹貫 宇宿周辺で鶏飯・串揚げ・一品料理お探しの方、是非『母ちゃん家』へ
です。

ここの部分をヘッダー画像を作り設定することは可能でしょうか！？
【※FACEBOOK TWITTER INSTAGRAM RSS INDEX ADMIN の上です。】
可能であれば、自身で作りヘッダー画像に変更したいと考えております。

また、【FACEBOOK TWITTER INSTAGRAM RSS INDEX ADMIN】の記載があります、
FACEBOOK
TWITTER
INSTAGRAM
をクリックしても何もならない状態です。

RSS
INDEX
ADMIN
は、クリックするとページが変わります。

上記３点ですが、
自身のページにリンクが飛ぶように設定したいと思っておりますが、
どちらから設定できますでしょうか！？

[ BeHappy ] のHTML編集
[ BeHappy ] のスタイルシート編集
を拝見しましたが、自身の力では、どこに記載があるか分かりませんでした。
申し訳ありません。

お忙しいところ恐れ入りますが、ご教授頂けると幸いです。
何卒宜しくお願い申し上げます。

母ちゃん家

To 母ちゃん家さん

ありがとうございます ( ﾟДﾟ)ﾉ

> ヘッダー画像を作り設定することは可能でしょうか〜

可能ですがBeHappyはスライダーがメインになっていますので、その上にさらに画像ということですとデザインバランスが悪くなるのと、スマートフォン閲覧者はファーストビューが削られます(コンテンツまでの距離が遠い)のでその点も考慮してくださいね。
スライダーは思い切って削除されても良いかもしれません。

------
① サイト内検索の削除

ヘッダーに画像を設けるような構成にはなっていませんのでこちらは削除することになります。
注)サイト内検索不要の方ここから削除
で検索し、ガイダンスに従ってください。

------
② 画像の設定

対象は
#banner
で、CSSソース(テンプレ編集画面下段)に1箇所あります。
text-align: center;
の直下に以下の内容を追加。

background: url(画像アドレス) center center /cover no-repeat;

赤のcenterは画像の水平位置合わせ、紫のcenterは垂直位置合わせですので、使用する画像と相談して適宜変更してください。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-569.html
https://vanillaice000.blog.fc2.com/blog-entry-566.html

背景を設定するだけなら以上です。
ブログタイトルも画像にするとなるとhtmlの修正が必要ですが、どこまで準備されるのか不明ですのでとりあえずここまでで。

------
> FACEBOOK, TWITTER, INSTAGRAM をクリックしても何もならない状態です〜

母ちゃん家さんのアカウントも所有ページも私は存じませんので事前に入れておくことはできません。
ナビゲーションここから
で検索して目印にすると直近にそれぞれのリンク指定先があります。
例)Facebook
<li><a href="#" target="_blank"><span class="sp-hide">FACEBOOK</span><span class="fa fa-facebook pc-hide" aria-hidden="true"></span></a>

赤字のハッシュ(#)を該当アドレスに差し替えてください。
普段はhtml内にガイダンスを付けているのですが、BeHappyにはついてなかったですね。
不親切でした。ごめんなさいね。

以上です。よろしくお願いします。

* 串揚げめっちゃ美味しそうですね。私大好きです(笑)

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

Akira様


母ちゃん家と申します。
ご親切にお返事下さいましてありがとうございました。

思い切ってスライダーを削除との事でしたが、
AkiraさんのBeHappyのデザイン、スライダーも含めて
とても素敵なので、ヘッダーを変更するのはやめました。
お教えいただいたのに申し訳ありません。

FACEBOOK
TWITTER
INSTAGRAM
無事に設定することが出来ました！
ありがとうございました！

また、質問ありましたら申し訳ございませんが何卒よろしくお願い致します。
ありがとうございました。

母ちゃん家

To 母ちゃん家さん(終了のご報告)

こんばんは。
了解致しました。こちらこそよろしくお願いします。
お疲れ様でした

はじめまして。質問があります。

Akiraさま

はじめまして。Jiruと申します。
BE HAPPYを使わせていただいています。
Akiraさんの作品はどれもとても洗練されていてで一つに決め兼ねましたが、
BE HAPPYを見るたび素敵だなあと思いながら使わせていただいています。

ブログのアドレスはandraw.blog.fc2.comです。
教えていただきたいことが3つございます。

・画像が反映されないときがありますが原因はわかりますでしょうか。
　現在1/5と12/23の記事のトップページの画像が反映されていません。
　サイズが原因かもしれないと思いましたが、同じくらいのサイズの他の画像はアップされているので
　原因がわかりません💦

・ナビゲーションの「andRAW Lessonについて　2月Lesson　FACEBOOK　Instagram」のところが
　スマホではFACEBOOKとInstagramのアイコンだけになるのですが、PCのように他の項目ものせる　　ことはできないでしょうか。　

・以前（2015年ごろ）インスタグラムから挿入した画像がno imageになるのは直せないでしょうか。

あまり詳しくなく、手探りでカスタマイズしてしまいました。
急ぎませんのでお時間ある時に教えていただけたら幸いです。

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

To jiruさん

ありがとうございます

まずお願いなのですが、不備が確認できるページがある場合には該当ページのURLを頂けるとダイレクトに飛べますので助かります。今後ご配慮をお願いします。

------
> 画像が反映されないときがあります〜

画像の名称に半角カッコが含まれているのが原因です。
以下の記事をご参照ください。

ご質問の前に「テンプレあるある」
https://vanillaice000.blog.fc2.com/blog-entry-220.html#object11

------
> FACEBOOKとInstagramのアイコンだけになる〜

追加リンクについては私がアイコンを準備しているわけではありませんので、アイコン表示はjiruさんに準備して頂くことになります。
テキスト表示で良いという場合には

<li><a href="アドレス" target="_blank"><span class="sp-hide">Lessonについて</span></span></a>

赤字部分は不要です。
sp-hideはPCでのテキスト表示とモバイルでのアイコン表示を切り替えるために使っています。
追加リンクが表示されなくなるのは「モバイルでは非表示」を意味するこのクラス名が原因です。
また、終了タグの</span>が余分です。これはhtml構文エラー。
消去して以下のように修正してください(追加リンクは全てチェックしてください)

<li><a href="アドレス" target="_blank"><span>Lessonについて</span></a>

それからjiruさんは以下の記事内容の該当者です。

ナビゲーションにリンクを追加した後の見た目がおかしくなる方へ
https://vanillaice000.blog.fc2.com/blog-entry-647.html

htmlの文頭揃えを行わないようにご注意ください。

------
> 以前（2015年ごろ）インスタグラムから挿入した画像が〜

2015年の記事全てを到底拝見できません。
該当ページURLをお伝えください。
恐らく最初に記した参考ページ内に答えがあると思います。
(直リンク or 半角カッコ)

よろしくお願いします。

早速のお返事ありがとうございます！

Akiraさま

早速ごお返事をいたさきましてどうもありがとうございました！！
ご丁寧な解説、本当にありがたいです！感謝いたします。

urlの記載がなく申し訳ありませんでした。今回は入れました。
解説いただいた通りにしてみました。

> 画像が反映されない
については画像カッコが原因なんですね。
「img 1234（5）」のような場合ですよね。
ただ、スマホの写真の容量が大きく、少なく編集すると「img 1234(Edited)」のようにカッコがついてしまいます。カッコをつけない方法はあるのでしょうか。

製作者さまにお聞きすることの範疇を超えているかもしれませんね💦（超えてますよね）
図しく申し訳けありません。

> FACEBOOKとInstagramのアイコンだけになる
についてはご指摘のとおりに訂正し、テキストで表示することができました！
FacebookとInstagramも合わせてテキストで表示したいので
訂正箇所を教えていただけないでしょうか。

> 以前（2015年ごろ）インスタグラムから挿入した画像が～
についてはサムネイルに表示されない画像はInstagramから直接挿入したもので
FC2サーバーにないものでした。納得いたしました。

> ナビゲーションにリンクを追加した後の見た目がおかしくなる
に該当するとのことですが、よくわからないまま手を加えてしまい元の状態がわからなくなっています。
見た目には私にはわからないのですが、直しておいた方がいいところはあるのでしょうか。

基本的な知識もなく質問も的を得ていないかもしれなくて申し訳ありません。
お力添えいただけたら嬉しいです。

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

Jiru

To jiruさん ②

こんばんは ( ﾟДﾟ)ﾉ

URLをください、というのは実際に不備が出ている対象ページのURLのことです(笑)
不具合発生箇所を私が調べる手間を省いてください、という意味ですね。

--------
> 編集すると「img 1234(Edited)」のようにカッコがついてしまいます

「どのデバイスで」作業しているかによります。
スマホからなのかパソコンからなのか。
パソコンからであればアップロード前に名称の変更、あるいはアップロード後にも「ファイル名修正」という項目がありますので簡単に変更できます。
* 注意)既に利用した既存のアドレスが書き変わらないように上書きではなく新規アップロードを行なってください。

スマホの場合はアプリを利用されていると仮定し、画像編集後に「別名保存」「別で保存」を行なった場合には名称が複製されて末尾にカッコが付くことが多いですね。
例)
元画像12345.jpg → 編集後 12345(edited).jpg または (12345).jpg など

元の画像を「残す」を選択するとそうなります 。
アプリは名称を新たに作り出す手間はかけませんので、元名称との区別にこういったことを行うのが一般的です。
元の画像を「残さない」「上書きする」を選択すればカッコなし、元名称がそのまま利用できます。
ただし上書きするわけですから元画像は無くなります。

------
> FacebookとInstagramも合わせてテキストで表示したい

<li><a href="FBアドレス" target="_blank"><span class="sp-hide">Facebook</span><span class="fa fa-facebook pc-hide" aria-hidden="true"></span></a>

赤字部分を削除して以下のように直してください(Instagramも同様の処理)

<li><a href="FBアドレス" target="_blank"><span>Facebook</span></a>

------
> ナビゲーションにリンクを追加した後の見た目がおかしくなる〜

これのことです ↓
https://blog-imgs-118.fc2.com/v/a/n/vanillaice000/capturetitleothersth.jpg

RSSとINDEXを削除した際の影響だと思います。
また、INDEXを削除されていますので閲覧者が全記事リストを見ることができませんがそれは大丈夫ですか？ (´・ω・｀)

よろしくお願いします。

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

Akiraさま

ご丁寧なお返事ありがとうございます！
外出していてPCが見れなかったので連絡が遅くなり申し訳ありません。
そして、、URLの件も理解不足で重ねて申し訳ありませんでした。

・サムネイル画像がアップできない～
　カッコがつかないように元画像を残さないようにすればいいのですね。
　無事にサムネイル画像をのせることが出来ました！
　自分ではどうやっても出来なかったので大変嬉しいです。ありがとうございました！

・ナビゲーションについて～
　教えてていただいた通りに訂正しスマホでもFacebook,instagramをテキスト表示する　ことができました！

　見た目について、わざわざリンクでご提示ありがとうございます。私のPCではFacebook　とInstagramの間に空白は出来ていなかったのでわかりませんでした💦
　Instagramの前のスペースを消しましたがこれで修正できていますでしょうか？

　全記事一覧がないのは構いません。

「ナビゲーションにリンクを追加した後の見た目がおかしくなる方へ」の解説、htmlが　　さっぱりわかっていない私にもわかりやすく説明されていて本当にありがたかったです！
手取り足取り教えてくださって自分では到底できないことが解決できて本当に嬉しいです。
心から感謝です！！どうもありがとうございました！！
　
jiru

　

To jiruさん(完了のご報告)

はい。リンク空白修正できてますよ。

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

コメント欄の位置修正について

Akiraさま、こんにちは。

3年前にブログを開設した当初から、こちらのBehappyのテンプレートを使わせて頂いておりますyukatorukoと申します。
開設当初は、トップ画像の設定の仕方などいくつかの質問にご丁寧にご教示いただき大変お世話になりました。
3年経った今も、他のどのテンプレートよりも1番素敵なデザインでとても気に入っているのですが、今回、遅ればせながら配布を終了されたということを知りました。

その、「配布の終了」と関係があるのかないのかわからないのですが、最近、ブログのコメント欄が以前と異なる位置に表示されてしまう不具合？が起こっています。
調べたところ、

記事ナンバー:104
バレンタインと平和な日々
2019.02.16

↑この記事までは表示が正常で、次の記事より不具合が起きているようです。

コメントがつかない記事はまだ良いのですが、まれにコメントを頂いた際は、記事の横にコメントが表示されてしまい少々見づらくなっています。

テンプレートのHTML編集を変更したりいじったりは全くしていないのですが、なぜこのようになってしまったのか、可能であれば、以前の表示のされ方に戻したいと思っています。
配布が終了したテンプレートということで、今の時点で修正することが可能なのかどうかわかりませんが、お尋ねしてみるだけしてみようと思いメールいたしました。

Akira様のデザインするテンプレートがどれも大変気に入っておりますので、位置の修正が不可能であれば、他のテンプレートに変更も考えておりますが、開設当初から使わせて頂いているBehappyを出来ればこのまま利用したいと考えています。

お忙しい中、大変お手数をお掛け致しますが、ご返答いただけると幸いです。
どうぞよろしくお願いします。

補足:コメント欄の位置修正について

Akiraさま

昨日、質問させていただいたyukatorukoです。

該当記事のURLを記載していなかったので、追記させていただきます。
大変失礼いたしました。

＊以前までの正しい表示のされ方
http://yukatoruko.blog.fc2.com/blog-entry-104.html

＊下記以降の記事より、コメント欄が記事横に表示されサイドバーが下に行ってしまった
http://yukatoruko.blog.fc2.com/blog-entry-105.html

＊コメント欄に投稿があった際の表示のされ方現状
http://yukatoruko.blog.fc2.com/blog-entry-123.html


分かりづらい表現で申し訳ありません。
お忙しい中お手数ですが、ご確認いただけると幸いです。
どうぞよろしくお願いします。

To yukatorukoさん

こんにちは。

原因はテンプレートではなく記事内に貼り付けたランキングバナーの構文エラーです。

正しいhtml
<a href="遷移先アドレス" target="_blank"><img src="バナー画像アドレス" width="125" height="41" alt="代替テキスト"></a>

間違い
<a href="遷移先アドレス" target="_blank"><img src="バナー画像アドレス" width="125" height="41" border="0" alt="代替テキスト" /></a><br /><a href="遷移先アドレス" target="_blank"></a

余分なaタグが有るのと終了タグの右側のブラケットが足りません。htmlの記号、特にブラケットの欠損は致命的な構文エラーです。
修正すると正しい表示になるはずです。ご確認くださいね。

ちなみにBeHappyを取り下げたのはjQueryに依存するテンプレートを減らしていこうという私の方針だけのことで、技術面のことではありませんのでご安心ください(笑)

ご返信ありがとうございます

Akiraさま

お忙しい中、ご返信いただきありがとうございます。
コメント欄の位置修正について、早速ご教示いただいた内容で修正できました！
本当にありがとうございます！！

テンプレートの問題ではなく、貼り付けたバナーの構文エラーということで、大変失礼いたしました。
自分であれば恐らく一生解決することの出来ない問題でしたので、本当に感謝しています。

これからもAkiraさまの素敵なテンプレートを使わせていただきますので、宜しくお願いします。
この度はお手数をお掛け致しました。
本当にありがとうございました。

To yukatorukoさん

こちらこそ長くお使い頂けて本望です。ありがとうございます。
お疲れ様でした :)