MaBelle(ブログ内限定配布)

MaBelle(ブログ内限定配布)

テンプレート ブログ内限定配布
2015/10/26
8
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWDLimited

配布終了致しました。

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
Related post

Comments  8

長谷川
2015/10/26 (Mon) 20:41

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

Akira
2015/10/26 (Mon) 22:06

To 長谷川さん

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

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

tak
2015/10/27 (Tue) 01:25

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

Akira
2015/10/27 (Tue) 02:46

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

-----------

使用上注意

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

tak
2015/10/27 (Tue) 08:36

いつもありがとうございます。

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

Akira
2015/10/28 (Wed) 02:22

To takさん

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

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

Leap
2015/11/06 (Fri) 05:33



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


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

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


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

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

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

Akira
2015/11/07 (Sat) 09:31

To Leapさん

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