Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

-重要

こちらは 旧バージョン です
内容をリニューアルしてリリース致しました(見た目上の変更はありません)
動作改善 主に「スライドサイドバーが他プラグインとコンフリクトを起こす件」への対処です
公式より最新版配信を行っております ご迷惑おかけします


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


behappy.jpg


名称 BeHappy
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー 右/ ブラウザ縮小時・スマホ閲覧時 左スライド
記事幅 可変 最大740px
サイドバー幅 300px
Windows/ Mac
Chrome Firefox Safari Opera IE9以上 IE8以下 Edge
ごめんなさい
推奨カスタム スライド幅等変更 ページ遷移エフェクト削除





BeHappy


--------------- 追記 2015.8.29


修正版配信

・ トップページ要約記事 「追記」を利用していてもいなくても READ MOREボタンを表示するよう変更
・ ページtop/ bottomボタン変更
・ 内部SEO
・ ビューポート再調整
・ Javascript若干の軽量化
・ スマホからのテキスト入力時 画面が自動でズームするのを防ぐ処理(プラグインは公式・共有共に適用外です)
・ FC2検索バーがタブレットでレイアウトを壊す問題に対処

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

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


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


2015.6.24 申請致しました (o'д`o)ゝ
6.26 公開されました sawaさんお知らせあざす (●'0'●)/


changeStyle

FAQ
DOWNLOAD



・ 記事内にアップロードした画像をスライド(固定画像に変更可能)
画像解像度の高いもの・画像サイズが大きいもの を好んでご利用になる方向けです
・ 右上に検索バーを設けました
・ ブログタイトル下ナビゲーションはスマホ閲覧時にアイコンに変更されます
・ スマホ閲覧時のサイドバーは左からスライドするタイプに切り替わります
・ コメント欄(投稿フォーム含む) と トラックバックを折りたためるようにしました
・ W3C バリデーションクリア



スライドについて


★ ギャラリー風のスライドですが デフォルトでは記事内へアップロードした画像が流れるようにしてあります
固定画像に変更される方は記事内の注訳に従ってどうぞ

注)

でCtrl+F検索すると該当箇所が出てきます
カスタマイズされる際のナビゲーション的役割ですので 一度お目通しください

解像度の高い画像向けに作成しています
300×300程度の小画像ですと 拡大処理されて解像度がガクっと落ちてしまいます
(元画像に準じますので 記事内で縮小表示するのは問題ありません)
それでもスライダーが大きくて解像度が追いつかない… という場合には
スライダーのサイズ自体を縮小してください
htmlソース内
width: 1000, // 注)横幅の変更ができます
height: 450, // 注)縦幅の変更ができます

が該当箇所です
縦横比(アスペクト比)を気にする必要はありません

★ デフォルトでは『Welcome』の画像を一つ噛ませてあります
最低でも一枚は必要ですので 例えば
" 新設カテゴリで記事が一つだけ そしてその記事は画像を含まない "
といったようなことがあると スライダー自体は表示されず 本来スライダーがあるべき場所が空白になってしまいます
それを避けるための保険のようなものですので 画像なし記事がまず無いという方は削除して頂いて構いません
(もちろん画像の差し替えもできます)


あとはその都度こちらでサポートして行きたいと思いますので
ご質問や不備・不具合がございましたらお気軽にどうぞ
(構造が大きく変更される類のカスタマイズは自己責任・自力でお願い致します(笑))


みなさんいつもありがとうございます よろしくお願い致します ( ゚Д゚)ノ
(Colorbox 適用版はちょっと待っててね 後で追加します)


--------------------- 追記 2015.6.25


DLありがとうございますーemo
こんなすぐ公開されると思わず… 昨日書いておけば良かった すみません ( ̄∀ ̄;)


スライドを固定画像に変更したい方


まずCtrl+F検索

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

この文言を目印に探します
二箇所ありますので これに挟まれた部分に注目(以下はスクショです)

sample


赤い部分を一旦全て削除します
welcome画像が不要な方はついでにその下の
スライド用Welcome画像不要の方~ に挟まれた部分も消してください

必ず複製をお取りくださいね
仮に元に戻そうと思ったとき FC2の変数を扱うことになります
複雑な構造になっていますので修正が困難です
どうにもならなくなった場合には再DLで(笑)

消した箇所に以下を記述

<div class="sp-slide">
  <img class="sp-image" src="ここに画像アドレス" alt="images">
  <!-- キャプション -->
  <p class="sp-layer sp-white sp-hide" data-horizontal="35%" data-vertical="40%" data-width="30%" data-show-delay="800" data-hide-delay="800" data-show-transition="up" data-hide-transition="down">
ここに文章
  </p>
  <!-- キャプションここまで -->
</div>

これが画像一枚分です
画像三枚ならばこのセットが三つ要ります
キャプション不要の方は削除してくださいね
キャプションを付けられます方は ご希望の文章を入れてください
改行するには文章末尾に

<br>


と書きます
文章の縦の長さは個人によってまちまちですので ご自分で調整をお願いします
上記セット記述内の赤字パーセンテージ部分が該当です
上から何%という意味の記述です

レイアウトが崩れてしまう スライダーが表示されない
という方は 終了タグの位置や数が合致していないというケースがほとんどです
終了タグ というのはこれ ↓ 
</div>


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


今回は日付の記された四角形の部分をカスタマイズできるようにしてあります
四角内の色を変えるには

.ご自分のハンドルネーム {
  background: 色コード;
}

こちらをCSSソースの末尾(テンプレ管理画面『下段』) に追加します
ハンドルネームの前の ドット(.) を忘れないように気をつけてください
文字の色も変えたい方は以下の通り

.ご自分のハンドルネーム {
  background: 背景色コード;
  color: 文字色コード;
}


------------- 追記 2015.11.28

コメントマーク背景を分けるにあたり
裏ワザ的なCSSで実装しています
ご利用頂けない場合もあります
使えないハンドルネームのパターンは以下の通り

・文字列最初の文字が「記号」
・最初の文字が「数字」
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)

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



ご質問等ございましたらお気軽にどぞ!

ページ内『画像拡大スクリプト』 Colorbox 適用済htmlソース
(公式からDL後に htmlソース差し替え)

file


画像が重たいよぅemo な方はこちらの記事をどうぞ

画像を圧縮して軽くするおすすめサイト

------------------ 追記 2015.7.8


お問い合わせがありましたので 以下の件追記しておきます

スライダーの左右矢印の色を変更したい方


以下の内容をCSSソース(テンプレ管理画面『下段』)の末尾に追加してください

sp-previous-arrow:before, .sp-previous-arrow:after, .sp-next-arrow:before, .sp-next-arrow:after: { 
background-color: ここに色コード !important; 
} 


色コード後ろに半角スペースひとつ空けて
!important
えくすくらめーしょんまーく いんぽーたんと
これも必要ですのでお忘れなく
カラーコードはこちらを参照されると良いと思います


HTMLリファレンス 様 カラーコード表
関連記事

Comments 24

There are no comments yet.
sawa  
もしかして

1番にGETかも~ o(^o^)oウキウキ

あっ Akiraさん、もう承認されてましたよ~。
素敵なテンプレートを毎度どうもありがとうございます ^^

なにか、Akiraさんテンプレートの収集家になった気分(爆)

2015/06/25 (Thu) 10:04 | EDIT | REPLY |   
Akira  
To sawaさん

え!早っ!e-451
前のは2週間ぐらいかかった気が。
なんかあれかな。
気の向いた時に仕事やってるんでしょうか。スタッフさん(笑)

sawaさんいつもありがとねー!(はぁと)

2015/06/25 (Thu) 20:45 | EDIT | REPLY |   
きろろ  
Colorboxについてw

今回も素敵なテンプレートですね❤

この間と同じようにソースを書き替えればいいのでしょうか?
トリガーが変わっていたら、すみませんが教えてくださいませ<(_ _)>
どうも、最近自力で頑張れないのですよe-350

2015/06/28 (Sun) 01:30 | EDIT | REPLY |   
Akira  
To きろろさん

はい。いらっしゃいまし(笑)

ちょっと一度整理しましょうか。
しばしお待ちを ( ̄∀ ̄)

2015/06/28 (Sun) 09:23 | EDIT | REPLY |   
Akira  
To きろろさん

まずJquery本体が<head>内の<script>情報に入っているかを確認します。
(当然ですが私のソース内に最初から入っています)
私のこちらのテンプレ(BeHappy)ではバージョン2.1.3です。
ie8以下のサポートが打ち切りになっているのと、slidetoggleも非推奨になってるのかな?たぶん。

で、既にライブラリは入っているので 別バージョンを入れてしまわないようにします
Colorbox説明サイトやページにはスクリプト内容と共に「Jqueryも入れろ」という指示が必ず書いてありますが、既にテンプレ内に入っていますので重複しないようにします。

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

<head>内に入れるファイル情報として必要なのは

・<link>のCSSファイル

これ一点のみです。
RSSファイルの「前」に入れておけば良いと思います。
これはきろろさんの所有ファイルねe-140

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

テンプレhtmlソース内に以下の記述があります。

<script>
$(function(){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
});
</script>

ここでColorboxトリガー用クラスの追加をします。

<script>
jQuery(function($){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
$('.トリガークラス名').addClass("nonmover");
})
</script>


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

</body>の直前(htmlソース最後方あたり)に以下を追加。

<script src="スクリプトファイル"></script>
<script>
$(function(){
$("a.トリガー名").colorbox();
});
</script>


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

書式としては以上です。
んで、記事内で気をつけるべきところは

target="_blank"

がしっかり記載されていることです。

<a href="元画像 または youtubeサムネイル" class="トリガー名" target="_blank"><img src="画像ファイルアドレス" alt="代替テキスト"></a>

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

一度これでやってみて、上手く行かないようであれば。
ちょっとColoboxのバージョン確認なんかした方が良いかもわかりません (´・ω・`)

2015/06/28 (Sun) 09:38 | EDIT | REPLY |   
Akira  
To きろろさん

あっ。ごめんなさい。
失念しておりましたけども、きろろさんは記事内でクラスを手打ちしてるんでしたっけ?(笑)
自動付加にするんだった?
どっちだっけ(笑)
上記説明はクラスを記事を書く段階で『手入力』する方向けです。
自動付加ならば以下の通り。

<script>
jQuery(function($){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
$('.contents img').addClass("gazou");
$('.gazou').closest('a').addClass("トリガー名");
$('.トリガー名').addClass("nonmover");

})
</script>

-----------

ピンクの文字が記事内にUPした画像に与えるクラス名なので任意です。
ここでは
.gazou
にしてありますが、変更可。

2015/06/28 (Sun) 09:46 | EDIT | REPLY |   
きろろ  
To Akiraさん

手入力です!(^^)!
いつもありがとうございます<(_ _)>

なんとなく、構造が今度ので見えてきたような気がします。
できましたよ~ありがとうございます!(^^)!

2015/06/29 (Mon) 01:00 | EDIT | REPLY |   
きろろ  
YouTubeが……

できませんでしたo(_ _o)・・ * ドテッ!

スクリプトを……

<script>
jQuery(function($){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
$('a.cpModal').addClass("nonmover");
$(".youtube").addClass("nonmover");
})
</script>

に書き替えてみたのですが……
YouTubeはポップアップされず、フルサイズで表示されてしまいました。
あれ~……、また私がどこかでへんなことをやらかしたのでしょうか?

2015/06/29 (Mon) 01:40 | EDIT | REPLY |   
きろろ  
できましたσ(^◇^;)

ごめんなさい!
また、私の早とちりでした(滝汗

<script>
$(function(){
$(".youtube").colorbox({
iframe:true,
innerWidth:640,
innerHeight:390
});
});
</script>

を、</body>直前に置くのを忘れていました・・・(。_。;)゜:。アセ

BeHappy、無事Colorboxの設置完了しました。
毎回、すごくお勉強になります<(_ _)>
ありがとうございましたσ(^◇^;)

2015/06/29 (Mon) 01:46 | EDIT | REPLY |   
Akira  
To きろろさん

できてよかったー

ツベが拡大されますよね(笑)
スクリプトちゃんと書いても
target="_blank" 外すと全画面に勝手になっちゃう (´・ω・`)
前はそんなことなかったんだけども。
ツベの新しいAPIとユーザースクリプトの絡みだと思うー。
なるのとならないのとある。

お疲れ様でしたe-257

2015/06/29 (Mon) 01:59 | EDIT | REPLY |   
なかじ  
とっても素敵なテンプレート

ありがとうございます!
大切に使わせていただこうと試行錯誤しております。
(ネットで調べ調べながらの万年初心者です)

質問があるのですが、スライダーの
左右の矢印の色が同化して見えないので
をもうちょっと濃い色にしたいのですが、
どうやって変更すればいいでしょうか?

お時間有るときにお返事いただければ幸いですm(__)m

2015/07/07 (Tue) 18:28 | EDIT | REPLY |   
Akira  
To なかじさん

コメント拝見しましたー。ありがとうございます!
ちょっと出かける用がありますので、帰宅次第お返事しますねe-257

2015/07/07 (Tue) 18:35 | EDIT | REPLY |   
Akira  
To なかじさん

帰宅次第なんて言いながらすんごい遅くなってごめんなさいe-447

>スライダー矢印の色を変更したい件

以下の内容をCSSソース(テンプレ管理画面『下段』)の末尾に記入してください。

.sp-previous-arrow:before, .sp-previous-arrow:after, .sp-next-arrow:before, .sp-next-arrow:after: {
background-color: ここに色コード !important;
}



色コードはrgbでも#でもどちらでもオッケーです。
whiteやblackなど、web標準で定義されている色ならば単語でもオッケーです。

参考 カラーコード表 HTMLリファレンス様
http://www5.plala.or.jp/vaio0630/hp/c_code.htm

色コードの後ろに半角スペースひとつ空けての
!important
を必ず付けてくださいね。
お手数おかけします。
よろしくお願いしますe-257

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

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

2015/07/09 (Thu) 23:39 | EDIT | REPLY |   
ふー  

一番上にある、スライダー(?)の部分を私のブログでも使いたいのですが、その部分だけを使うことは可能ですか?

2015/07/21 (Tue) 22:46 | EDIT | REPLY |   
Akira  
To ふーさん

申し訳ありません。
プラグインの切り売りは行っておりません(笑)
スライダー カルーセル
で検索されますとご希望のものが出てくるかと思いますよ。

2015/07/21 (Tue) 23:01 | EDIT | REPLY |   
Akira  
To 内緒さん

大変申し訳ありません!!!
7/9に頂いたコメント、今気づきました! (/_;)

>サムネイルが表示されない件

既にテンプレの変更をされておられるようですので、検証が叶いません。
RSSの設定がもしかしたら上手く行っていなかったのではないかと思います。

心よりお詫び申し上げます (*_ _)

2015/07/21 (Tue) 23:08 | EDIT | REPLY |   
パティ  
カウンターの不具合について

どうもはじめまして。

こちらのBeHappy、とても素敵なテンプレートで
ブログ開設当初より愛用させていただいております。

一点、解決しない問題がございまして
現在、FC2カウンターを設置しているのですが
2重カウントする設定の際
一度のアクセスで、何故か2つずつカウントされてしまいます。
確認のため、公式のテンプレートを設定してみますと
正常にカウントされるようです。

もし何か改善方法等ございましたら
ご教示いただければ幸いです。

2015/09/04 (Fri) 03:50 | EDIT | REPLY |   
Akira  
To パティさん

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

ちょっと帰宅が遅くなりそうですので、取り急ぎのコメントです。
恐らく「ダブルカウントルール」設定等の確認・検証を含めた上でご報告頂いていると思いますので、
サイドバーとカウンターのコンフリクト(干渉)で間違いないと思います。

そこで提案ですが

① カウンターだけをプラグイン3に登録し、フッターのすぐ上に持ってくる
② スライドサイドバーをやめて、ブレイクポイント(スマホ画面サイズ)ではサイドバーを下へ送る
③ ユーザーエージェント判別でスマホのみサイドバースライドを導入する(現在のサイドバーではなく別プラグイン。他プラグインとの干渉が起こりにくいもの)

------

③については今コードを書いているところです。
今日明日でなんとか形になると思います。
一番安全なのは②の方法ですかね。

代替案ということでとりあえず提示させて頂きますね。
詳細は追って記します。ごめんなさい。

2015/09/04 (Fri) 22:43 | EDIT | REPLY |   
パティ  
To Akiraさん

どうもこんばんは。
ご返答ありがとうございますm(_ _)m

対処法をご提案していただいたので
自力で何とかしてみようかと思いましたが・・

正直、まだまだよく分からない事の方が多く
弄っているうちに違うトラブルを招いてしまいそうなので
今回は素直にAkiraさんにお任せいたします(^^;)

お忙しいところ、お手数をおかけいたしますが
どうぞよろしくお願いいたします。

2015/09/05 (Sat) 00:11 | EDIT | REPLY |   
Akira  
To パティさん

大変遅くなりました (*_ _)

まずご確認頂きたいと思います。
今私の方で設置してみました。
提案①ですね。

実際に登録してみましたら、タグ貼り付けだけで動作するようですので、こちらの見た目で問題ない場合には以下の手順でお願いします。

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

❶プラグインの設定 > 詳細 > プラグインの改造「HTMLの編集」

ここを開きましたら、HTMLソース内容を丸っとコピー。
こんな感じだと思います ↓
(ソースごとここからコピーして頂いても良いのですが、個人idが含まれますので掲載を控えますね。)

<div class="plugin-counter" &align>
<script language="JavaScript" type="text/javascript" src="アドレス"></script>
<noscript><img src="画像アドレス"></noscript>
</div>

この記述内容は旧式で、現在のweb標準に合致していませんので以下の通り修正(一部削除のみ 赤字部分)

<div class="plugin-counter">
<script src="アドレス"></script>
<noscript><img src="画像アドレス"></noscript>
</div>



❷コピーされましたらメモ帳などに書き留めてください。
(Windowsであれば標準で「メモ帳」が入っています。エディターをお持ちでしたらそちらでもOK)


❸プラグイの設定画面まで戻り、カウンタープラグインを表示させない設定に変更します
ダブル表示でエラーが発生しますので、必ず非表示にします


❹続きましてCtrl+Fキーで以下の文字列を検索

<p class="foot">Designed by

このすぐ「上」にさきほど編集したコードを貼り付けます。
ここまででカウンター設置は完了です。

❺ここからテンプレのレイアウト崩れを起こさせない処理です
Ctrl+F検索

#wrapper {
width: 100%;
min-width: 80%;
margin: 0 auto -73px;
}

赤字部分を変更して以下の通り

#wrapper {
width: 100%;
min-width: 80%;
margin: 0 auto -106px;
}



❻続きまして以下を検索

#end {
position: relative;
z-index: 3333;
width: 100%;
min-height: 73px;

赤字部分変更で以下の通り

#end {
position: relative;
z-index: 3333;
width: 100%;
min-height: 106px;



❼これで最後です 以下を検索

#push {
height: 73px;
}

#push {
height: 106px;
}

2015/09/05 (Sat) 15:41 | EDIT | REPLY |   
Akira  
To パティさん

で、今パティさんとは別の画像を使用したカウンターを例として表示しています。
このタイプだとマウスオンでツールチップ(吹き出しみたいなやつ)が出ますよね。
そのチップを表示させる場所を確保するために、テンプレに勝手に空白が作成されてしまいますのでおすすめできません(笑)
パティさんがご利用になっているタイプは大丈夫だと思います。

ちなみにこの数値設定だと、スマホからの閲覧時にカウンターの数字がフッター広告に隠れないギリギリの場所に位置します(笑)
ですから数値設定は守ってくださいね。

一度こちらでOKかどうかご判断お願いします。
フッター上がNGとなった場合、代替案の②、③のご説明をしようかと思います。
お手数おかけします。よろしくお願いします!

2015/09/05 (Sat) 15:47 | EDIT | REPLY |   
パティ  
To Akiraさん

どうもこんにちは。

とても分かりやすく丁寧なご説明
ありがとうございますm(_ _)m

先程早速、教えていただいた手順通り
設定の変更をしてみたところ
カウンターがキチンと表示され
問題のカウント数も正常になりました(^ ^)
今回は、これで解決という事でOKです。

この度は、どうもありがとうございました。
今後、また何か分からない事等
お伺いする事があるかもしれませんが
その際はどうぞよろしくお願いいたします。

2015/09/05 (Sat) 17:11 | EDIT | REPLY |   
Akira  
To パティさん

こちらこそ貴重なお時間を頂きました。
はい。何かありましたらお気軽にお問合せください。
ありがとうございますe-454

2015/09/05 (Sat) 20:06 | EDIT | REPLY |   

Leave a reply

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