MaBelle(ブログ内限定配布)

MaBelle(ブログ内限定配布)

ブログ内限定配布
2015/10/26
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD Limited

配布終了致しました。

mabell.jpg


名称 MaBelle
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー パソコン・タブレット: 「右」, ブラウザ縮小時「下」
スマホ: 左スライド
記事幅 可変 最大834px (内寸 774px)
サイドバー幅 300px (内寸 240px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
Windows/ Mac
Chrome Firefox Safari Opera Edge IE10以上 IE9 IE8以下
一部難あり サポート外
推奨カスタム 背景変更

valid-html5.png


更新履歴 2017.10.5


SSL化に伴うURL正規化及び混在コンテンツ排除


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



更新履歴 2016.1.8


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


更新履歴 2015.12.4


Google feed api 廃止に伴う新着サムネイル仕様変更

Google自体がこちらのAPIを排除してしまいましたので
この日付以前にDL頂きました方については新着サムネイルが反映されません
お手数ですが再DLをお願い致します




ま べるemoji


長男が某外語大に合格してホッとしているあきらでございますemoji
今回は申請に出しても恐らくリジェクト喰らうと思いますので出しません
リジェクトだと思う理由 = ナビゲーションが固定してあるのでFC2検索バーとぶつかる
逆に申請して許可されたら「なんやそれ(ズコ)」でイラっとしますので出さない(笑)

DLリンクは2016.1.8 最新版です
それ以前にDLされました方はアップデートをお願いします
変更点は更新履歴の通りです

Sample トップ
Sample 個別


th_53454.jpg


仕様
・ナビゲーション上部固定(トップページはスクロールしたら固定)
・レスポンシブデザイン(レスポンシブでお使いになる方は個人設定「スマホ版非表示」をお願いします)
・スライダー画像は記事内へアップロードしたものがクロスフェイドで表示されます
・スライダーのグラデーションは外すことができます
・スライダーは固定画像への変更可能です
・スマホ閲覧時のサイドバーは左からスライドするタイプに切り替わります
・ブラウザ縮小時/ デバイス変更時の動画の縦横比を保てるようにしました(コード記述必須)
・imgに class="shadow-attachment" 追加で画像にドロップシャドウがつきます
・カスタマイズ時のナビゲーション(訳注)はCtrl+Fキーで 注) を検索されますと該当箇所が出てきますのでご確認ください
DOWNLOAD のzipフォルダにはColorbox適用版も含まれます(2016.1.8更新)


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



IE9での表示について


まずグラデーションが無効化されます(非対応)
それからクロスフェードがスライドに変更されますのでご了承ください
レイアウトの崩れ等はありません



サイドバープラグインについて


外部プラグインの横幅をpx(ピクセル)で指定されている方は

style="max-width: 100%;"

を追加して はみ出しを回避してください
スマホサイドバーは開いた時の右側空白(サイドバー外)を一定サイズを下回らないようにしています
(iPhone5Sまでに配慮)
Closeするボタンは左上部に固定していますが 余白タップで閉じれるようにもしてあります
余白が少ないと押しにくいですのでそちらを優先しています
というわけでiPhone5あたりだとサイドバー横幅300px(内寸 240px)を下回りますので
固定幅にされるとちょっとマズいことになります



固定画像への変更


位置的な意味でなく
記事内画像は表示させずに常に同じスライド内容にするには

<!-- 注)固定画像に変更する方はここから修正 -->

から

<!-- 注)固定画像に変更する方はここまで修正 -->

に挟まれた内容が該当箇所です
それを一旦全て削除されまして(コメントアウトの仕方がおわかりの方はそれでも構いません)

            <div class="item">
              <div class="imgLiquidFill">
                <img src="画像アドレス">
              </div>
            </div>

これが画像一枚分です
3枚設定ならばこのセットを3回
5枚ならばセットを5回記入してください



動画の縦横比について


ちょっとしたお悩みということでリクエスト頂きまして
動画埋め込みの際にですね 動画の横幅を300px前後に設定されている方は問題ないのですが
比較的大きめサイズで載せている方は こういうことが起こりますよね ↓(スクショです)


sample


↓ 記事幅や画面幅が狭くなると............


sample


横幅がぐっと押されて正方形に近い形になっちゃった
これが嫌だ ってことよね(笑)
気にならない人は気にならないが 気になる人にはとっても気になる ってやつです(笑)

記事外にはみ出してしまうか といえば (私のテンプレでは)はみ出しません
普通にやってる分には絶対はみ出しませんが 記事内でhtml, CSSをお使いになる方は
ソースの書き方によってははみ出すこともあります(今回はこの件割愛します)

というわけで ブラウザ幅/ デバイス画面幅が縮小されても縦横比が壊れないようにする方法

sample





sample


特に難しいことは何も無いです
みなさんが記事を書かれます際に以下の通り記述してください

<div class="box-for-video" style="max-width: 動画最大横幅px; margin: 0 auto;"><iframe src="動画アドレス" allowfullscreen></iframe></div>

白字部分はFC2エディターが勝手に入れてくれますが 一部修正をお願いします
エディターをご利用になると こんなコードがペタと貼られます ↓

<iframe width="560" height="315" src="動画アドレス" frameborder="0" allowfullscreen></iframe>

赤背景の部分は不要ですので削除します
残しておいても何も良いことはありませんので消してください
あとは雛形の通りです

雛形は動画の位置を中央にしています
左寄せにされます方は margin: 0 auto;削除
右寄せにされます方は margin: 0 0 0 auto;修正します


今回から導入していますので 過去テンプレは対象外です
MaBelle以前のテンプレでも動画縦横比を固定したい方は

/* for video */
から
/* end */
までが対象箇所ですので そっくりコピペで移植してください
ペースト先はCSSソース末尾(テンプレ管理画面「下段」)です
比についてはYouTubeデフォルトの 15:9(5:3) を踏襲しております
不都合のあります方はカスタマイズナビに従って修正してください


実際の動画(こちらはスクショではなく本物です)



編集中と実際の姿(投稿後の状態)が異なりますので
プレビュー画面で確認しながらの作業をおすすめします



その他変更点


これまでのテンプレから若干の変更があります

① meta keyword の削除
メタキーワードとは 読んで字のごとく「キーワード設定」ですが
現在このmetaをサポートしている検索エンジンは皆無ですので(Google, Yahoo!, Bing 等)
御守り的に入れていただけで意味がありませんので思い切って削除しました

② フォント指定変更
Windows OSユーザーさんには無関係ですが
Mac OS X Yosemite El capitan がリリースされまして フォント周りに結構な変更がありましたので
一部記述内容を修正しておきました

③ 先回テンプレからIE8以下のサポートを完全に打ち切りましたので
閲覧者の方へアップグレードを促されます方は以下の記事内容を参考にどうぞ

GirlOnWire


あとはみなさんからのご質問 及び 不具合等のご報告待ちでございます
いつもありがとうございます ヽ(´・`)ノ



--------------- 追記 2015.10.26


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


CSSソース末尾に以下を追加

.管理人ハンドルネーム {
  background: url(//blog-imgs-82.fc2.com/v/a/n/vanillaice000/greyvisitor.png) left bottom no-repeat;
}

管理人ハンドルネーム の部分には普段コメント欄でお使いの名前を入れてください
最初の文字が記号の方は不可です(* や ★ など)

------------- 2015.11.28

ご利用頂けないパターンを補足します
CSSのルールに沿わない場合がありますので ご確認ください
使えないハンドルネームのパターンは以下の通り

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

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


色味など変更されます方は保存した上で加工してください
他テンプレへの流用や再配布はNGです

訪問者用(デフォルト)
sample

管理人用
sample
ブログ内限定配布