Article page

by
  • Comment:8
  • Trackback:0

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


更新履歴 2016.1.8


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


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



更新履歴 2015.12.4


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

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


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


ま べるemoji


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

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

Sample トップ
Sample 個別

DOWNLOAD
FAQ



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
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 8

長谷川  

ご子息の合格おめでとうございます!
さて、こちらもダウンロードさせて頂きます。
カラーボックス版もできればお願いします(>人<;)

2015/10/26 (Mon) 20:41 | EDIT | REPLY |   
Akira  
To 長谷川さん

息子への祝辞までありがとうございます(笑)

Colorbox版。
......... また忘れてたe-452
ごめんなさい。すぐやります ^^;

2015/10/26 (Mon) 22:06 | EDIT | REPLY |   
tak  

こんにちは。いつもお世話になっております。
Be Happyを愛用しております。ありがとうございます。
トップページに個別記事のテキストが一定範囲表示されていますが、
範囲を指定してトップページに反映されなくする魔法の呪文はありますか?
個別記事に最近撮影データーを画像の下に書いているのですが、これがトップページに
反映されると、なんだか変なので。
で、最初の外観写真の一枚だけは撮影データーを画像に埋め込みましたが、
料理の写真はテキストを入れ込みたくないのです。
よろしくお願いいたします。

2015/10/27 (Tue) 01:25 | EDIT | REPLY |   
Akira  
To takさん

こんばんは ( ゚Д゚)ノ

ちょっと内容まとめますね。
① トップページに画像当てのウォーターマークやExif情報的なものを表示したくない
例) 20XX.10,XX canon Focal Length: 174mm 〜〜 など
② トップへの上記内容テキスト記載は回避したいが、画像に編集してしまうのは嫌

という内容で合ってますかね (´・ω・`)
うーんe-263
できるかできないか、と問われたら「できます」
おすすめできるかと問われたら「すすめません」(笑)

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

基本的にはFC2の仕様上、無理です。
"テキストは「本文編集」に書かれた内容の1文字目から200文字目までを抽出"
というのが仕様です。

JS(Javascript)で特定文字列のみ除去。
上手くいきそうなものが思いつきません。
毎度同じ文字列なら簡単ですが、Exifが毎度同じなわけないですもんね (´・ω・`)

使えそうな方法をこれから書きますが(検証済み)
たぶん後々困ると思います(笑)
・一度やってしまったらずっと継続しなければいけなくなります。
・テンプレを変更されましたら自力で同じ動作になるようにテンプレ内容を修正する必要が出てきます。
・書き方をちょっと間違えるとえらいこっちゃレイアウトになります。
・過去記事を一気に修正することはできませんので、過去記事に対しては大変地道な作業での修正を強いられます。

上記難点が不問という条件下で以下の方法をどうぞ。
先にお伝えしますが、ややこしいですよ(笑)

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

★ テンプレ側修正

①Ctrl+Fキー検索

.contents {
padding: 0 0 20px;
}

上記に赤字部分追加で以下の通り。

.contents {
padding: 0 0 20px;
position: relative;
}


テンプレ修正はこれだけです。

★ 記事を書かれる際のソース内容

ソースコード書いてもらう必要あります (´・ω・`)
ややこしいですのでよくお読みください(笑)

1. 画像は必ず記事画面の最上部に掲載する
改行での行下げ等NGです。
(テキストを画像に重ねない場合には逆に二行ほど改行してください)
TOPページに掲載している画像は隠し画像ですよね。
隠し画像の内容を記述されましたら、改行せず横に続けて画像内容のソースを書いてください。
例)
<img src="隠し画像アドレス" style="width: 0; height: auto;"><a href="アドレス" 略><img src="アドレス" 略></a>

2. テキスト内容を「本文の編集」側に200文字以上書く
200文字を下回らないよう注意します。

3. ウォーターマークは以下の通り記述してください。

<div style="position: absolute; top: 0; left: 0; font-size: 文字大きさpx; color: カラーコード;">ここにテキスト内容</div>

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

上記手順で画像をレイヤーとしてテキストを重ねます。
編集中はウォーターマークがへんてこな位置に表示されますが、プレビューで確認してください。
テキストの「画像下部」への配置は「できない」と思ってください。
絶対できないかと言われればできますが、緻密なソースを書く必要が出てきますので恐らく扱いが難しいだろうと思います。
記事書くのが嫌になっちゃうレベルだろうと思われます(笑)
ですから「画像上部左配置」です。

これ実際は画像を基準にしていません。
(コンテンツの上辺を基準にしています。ここはあまり深く考えなくて良いです。)

スクショです ↓

TOPページ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/%202015-10-27%202.37.33_zpsbbgdbncb.jpg~original

個別記事
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/%202015-10-27%202.37.20_zps0bof5bvm.jpg~original

記事編集画面
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/%202015-10-27%202.36.53_zpsctv9pnhf.jpg~original

-----------

使用上注意

私からの動作保証はできません。
テンプレートを変更されました際には必ず弊害が出ますが、そちらの責任も持ちかねます (*_ _)
以上を踏まえた上で利用されるかされないかご決断くださいませ。

2015/10/27 (Tue) 02:46 | EDIT | REPLY |   
tak  
いつもありがとうございます。

ご教授頂き感謝します。試行してみます。
いつもいつも本当にありがとうございますm(_ _)m

2015/10/27 (Tue) 08:36 | EDIT | REPLY |   
Akira  
To takさん

はい。お試しください。
念押しですが、テンプレートを変更されました際にお困りになると思いますので、それだけお忘れのないようお願いしますね ^^;

んー、でもやっぱもうちょっと踏み込んだ書き方した方が良いかもしんない (´・ω・`)
手間は増えますけれど、別テンプレにして困ることが確定しているものを使うというのもあれなので...。
結局はtakさんがソースコードを書く手間をどう捉えるかなんですよね。
いけそうだな、と思われましたらご一報ください。
もう少し複雑だけれども困る度数が低いやり方をまたご紹介しますので。
やっぱやーめた!ならそれはそれで良いですし(笑)

2015/10/28 (Wed) 02:22 | EDIT | REPLY |   
Leap  



おはようございます。
Oo(っд・`。)オハヨォ…


ご子息の大学合格おめでとうございます。

素敵な学生生活を送られる事を祈っております。


Jingle OnTheGround 、使わせて頂いております。

何時も、ありがとうございます。

(〃..)) ペコッ...

2015/11/06 (Fri) 05:33 | EDIT | REPLY |   
Akira  
To Leapさん

わー。みなさん祝辞をありがとうございます(笑)
引き続いてのご利用も嬉しいですe-454
こちらこそいつもありがとうございますe-454

2015/11/07 (Sat) 09:31 | EDIT | REPLY |   

Leave a reply

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