(旧)BeHappy

(旧)BeHappy

配布終了・旧作
2015/06/24
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD
-重要

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


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


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検索

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

この文言を目印に探し、ガイダンスに従って削除. 2箇所あります
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リファレンス 様 カラーコード表
配布終了・旧作