Bliss - FC2ブログテンプレート(配布終了 2020年4月31日)

Bliss - FC2ブログテンプレート(配布終了 2020年4月31日)

テンプレート 配布終了・旧作
2015/12/11
33
vanillaice (Akira)
vanillaice (Akira)
HTML5CSS3RWD

配布終了致しました。ご利用ありがとうございました。Sorry, this theme is no longer being developed.

Blissテンプレート

Blissテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ
Related post

Comments  33

きろろ
2015/12/24 (Thu) 01:20

お久しぶりでございます<(_ _)>

Bliss お借りしました~
Colorboxも問題なく動いております。

ただ……
カテゴリーを表示させるところなんですが……
頭から順番にリンクさせていったのですが、
どうしても、最後があまるのです(>_<)

カテゴリーが5個しかないものですから、
頭のほうに、「カテゴリ名」『説明文』と来てしまいます。
これを回避するのにはどうすれば良いのでしょうか?

画像を1枚削ってみようかと思いましたが……
物の見事にレイアウトが削れました。

説明を読んでみたのですが、今ひとつわかりません。
年末のお忙しいときにすみません。
お手すきの時にかまいませんので、よろしくお願いします<(_ _)>

vanillaice (Akira)
Akira
2015/12/24 (Thu) 17:17

To きろろさん

お久しぶりです (*'-'*)ン

> スライダーを5件に減らす件

<!-- 注)ここから画像一枚分 -->
から
<!-- 注)ここまで画像一枚分 -->

上記コメントアウト及びそれに挟まれた内容を全て削除でOKです。
5枚なら体裁を変えずにそのまま利用できるはずでございます。
スクショ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/238473_zpsrbevzhgg.jpg

きろろ
2015/12/25 (Fri) 00:00

できました!

なんと……
そう言うことだったんですね。
すっごい、あれやこれや試行錯誤して
レイアウト壊れて……(ё_ё)
やはり、素人があれこれ考えるもんじゃないですねw

ありがとうございました!(^^)!

今年はほんとにいろいろとお世話になりました。
来年もよろしくお願い申し上げます<(_ _)>

vanillaice (Akira)
Akira
2015/12/26 (Sat) 00:52

To きろろさん

できましたか。良かった :)

こちらこそ大変お世話になりました。
くる年も変わらずお付き合い下さると嬉しく思います。
しかしもうそんな時期なのですね ( ̄∀ ̄;)
なにも支度できてない ( ̄∀ ̄;)

はてブから来ました!
2016/01/14 (Thu) 18:46

No title

こんばんは!はてなブックマークからたどってきた者です!
早速質問です、このテンプレートをどうしても使いたいんですがlivedoorで配布の予定ってありますか??
もしだめならFC2開設しようと思ってます!
でも結構長くlivedoorしてるのでできれば続けたい気持ちもあります><
FC2って使いやすいですか?よろしくお願いします!

vanillaice (Akira)
Akira
2016/01/15 (Fri) 00:24

To はてブから来ました!さん

はてブから ( °д°)
ありがとうございますー :)

livedoorで配布の予定はありません。
ごめんなさい (*_ _)

> FC2が使いやすいか
こちらについては、FC2単体で見た時にはかなり使いやすいと思います。
初心者から上級者までオールオッケーって感じでしょうか。
ただ他のブログサービスと比較してどうか、と言われるとわかりません (´・ω・`)
livedoor使ったこと無いです(笑)

FC2にはいろんなテンプレートが揃っていますので、数ある共有テンプレートからお気に召す物をお選びください :)

こさもむ
2016/01/27 (Wed) 22:18

スマートフォン版につきまして

Blissすごく素敵です!お借りしました!

PC版は上手くいったのですが、スマートフォン版の配布はされていないのでしょうか?
記事の写真にあるような画面にしたいのですが。
素人質問で申し訳ありませんが、ご教授お願いいたします!

vanillaice (Akira)
Akira
2016/01/28 (Thu) 09:46

To こさもむさん

ありがとうございます :)

こちらはレスポンシブデザインと言って、パソコン・タブレット・スマートフォン等のデバイス全てをサポートしています。
スマホからこのページにアクセスして頂きまして、ページ内の
Sample トップ
Sample 個別
を押されますと、スマホでの表示確認ができます。
これで良いと思われましたら、ページ上部の表の中に
任意個人設定「レスポンシブ利用」という項目がありますので、リンク先のページ内容に従って設定を行ってください。
スマホからの閲覧時にスマホ版を非表示にする(パソコン版と共通にする)、というFC2個人設定です。

スマホから回答申し上げております。
説明が大雑把ですみません(笑)
よろしくお願いします :)

こさもむ
2016/01/28 (Thu) 21:54

To Akiraさん

お忙しい中、ご丁寧に説明して頂きましてありがとうございます!
早速スマートフォンで設定しましたら上手く表示されました。

akiraさんのテンプレートはどれもかっこよくて悩みます(笑)こちらのブログも大変お詳しく書いてらっしゃって非常に参考になります。大事にお借りさせて頂きますね。ありがとうございます^^

vanillaice (Akira)
Akira
2016/01/29 (Fri) 14:50

To こさもむさん

できたようで良かったです。
こちらこそありがとうございます。
お疲れ様でした :)

きろろ
2016/04/02 (Sat) 00:59

コメントの返信について

こんばんは<(_ _)>

いま、こちらのテンプレートをお借りしているのですが。

えーとですね。
コメントの返信、Reply を使用した場合に

TO〇〇さん と表示されます。

で、「さん」を「さま」に変えたいのですが……

htmlの中にある「さん」を「さま」に変更するだけでは、反映されないのでしょうか?

またもや今更なことを聞いて申し訳ございません(ё_ё)

お暇な時でかまいませんので、よろしくお願いします。

Akira
2016/04/03 (Sun) 00:53

To きろろさん

お手数おかけします。
Ctrl+F検索で
さん

さま

変更するだけですが、
この動作は情報(コメント主の名前)を取得してwriting(書き込む)、というものです。
一旦書き込まれた内容 = 既存コメント
について、テンプレートを「さん」から「さま」へ変更されましても自動的に内容が書き換わることはありません。
既存情報の上書きをする機能はありません。
あくまでも修正後のコメントフォームで機能するだけです。
よろしくお願いします。

きろろ
2016/04/03 (Sun) 01:03

ありがとうございます<(_ _)>

すみませんe-351

反映されておりました(ё_ё)
キャッシュを削除後、ブラウザの再起動後、『さん』は『さま』になっておりましたσ(^◇^;)

既存のコメに反映されないのは理解していたので、
そこは気にしていませんでした。

わざわざ、ありがとうございました<(_ _)>

Akira
2016/04/03 (Sun) 01:05

To きろろさん

キャッシュが残ってましたか。
作業おつかれ様です。
きろろさんも夜族なのですね(笑)

FATDRAGON
2016/04/21 (Thu) 20:06

Blissの新着サムネイルについて

Akira先生こんばんわ
Blissお借りしております。Bliss素敵すぎて大満足です!
Yahoo!ブログでやりたくても出来ないことが
FC2ブログでだんだんとできるようになりました。

超基本的な質問で申し訳ないのですが
全体の背景色を黒にしたところ新着サムネイルの枠線が気になっておりまして
この枠線を消す記載箇所を教えて頂けないでしょうか(汗)

よろしくお願いいたします。

vanillaice (Akira)
Akira
2016/04/21 (Thu) 20:50

To FATDRAGONさん

こんばんは ( ゚Д゚)ノ

Ctrl+Fキー検索(即本題(笑))

.inner-context

この括りの

box-shadow: 0 1px 4px rgba(255,255,255,.4);

この一行を削除でございます :)
枠線取っちゃうと文字がかなり(さらに)見難くなると思います。
欲を言えばもう少し明るくして頂けると拝読する方としては助かります(笑)

FATDRAGON
2016/04/21 (Thu) 23:30

To Akiraさん

Akira先生 素早いご対応誠にありがとうございます!

あ、やっぱり見づらい程黒くなってしまってるんですが、気づいちゃいましたね><
私も初老入ってるんで自分のブログが見づらいことに目をつむってました(笑)

実は黒基調と白基調の2テンプレを作りたいなと野望を持っているんですが
まだまだそこまで到達できず、、、

そしてごめんなさい。質問の方なんですがTOP画面の新着サムネではなく
本文記事の下 What's Newのサムネ画像の枠線を質問させて頂いておりました。
お手数おかけして申し訳ないです。


お手すきの時で結構です。画面にらめっこしすぎで目が痛いんで少し休憩します^^

Akira
2016/04/22 (Fri) 08:40

To FATDRAGONさん

「新着サムネイルの」って書いてあるじゃんね (´・ω・`)
ごめんなさいね。耄碌しているもので ←

.rss-container

の項目

border: 1px solid rgb(240,240,240);

を削除でございますー。
こちらこそ無駄にお時間使わせちゃってすみませんです ^^;

FATDRAGON
2016/04/22 (Fri) 22:41

再度お手数おかけしました。解決しました!

Akira先生 度々ご丁寧にご教授いただき誠に感謝です。
新着サムネの枠線の件解決しました!

わからずやっていると数値を変更するものなのかな?という素人考えでした。
ご丁寧に設定されている項目を削除するというのも気が引けますが、、

あと数点カスタマイズさせて頂いたらまたAkiraさんのテンプレお借りして
違うバージョンをつくってみたいなぁと思います。
自分のやりたいことがほとんど詰まっているテンプレートですので
ほんとすごいなぁと思っていて壺にハマっております!
今後ともよろしくお願いいたします!

vanillaice (Akira)
Akira
2016/04/23 (Sat) 00:35

To FATDRAGONさん

良かったですー。
はい。楽しんでくださいね。
お疲れ様です :)

FATDRAGON
2016/04/28 (Thu) 08:01

サイドバーの背景画像について

Akira先生 Blissお借りしてます(最高です!)
またまた基本的な質問で申し訳ないですがよろしいでしょうか。

サイドバーのプラグイン背景画像をプラグイン№を取得して変更してみました。
最新コメントなど伸縮する場合
上部画像 固定
本体画像 伸縮してもよいように縦長の画像
下部画像 固定 
というような背景画像を配置することはできるのでしょうか。
(すみません。質問自体があいまいで申し訳ないです)

Akira
2016/04/28 (Thu) 22:45

To FATDRAGONさん

こんばんは ( ゚Д゚)ノ

これは各プラグインに各々背景を設定したいということでしょうか。
それともサイドメニュー全体に一枚のレイヤーを、ということかしら。
はたまたひとつのコンテナ(サイドメニュー)に3つの画像を、ということかしら。

ご希望がいまいち理解できずすみません ^^;
背景の基本的な敷き方はこちらを参考に ↓

https://vanillaice000.blog.fc2.com/blog-entry-213.html#daisy1

ちょっと今時間が無いものでソースが開けませんので、ご希望を再度お伝え頂いてそれからということでお願いします。
修正した方が良い部分もありますが、スマホでの表示をどう捉えているかの個人観なんかもあります。
FATDRAGONさんがスマホをレスポンシブでお使いになるのならばやはり修正した方が良いと思います。
スマホ閲覧はスマホ版で、というお考えならば、まあそのままでも...。
いずれにしろ後日改めて。
申し訳無いですー!

FATDRAGON
2016/04/30 (Sat) 03:03

お手数おかけしました 自己解決しました

Akira先生 お手数おかけしていて申し訳ございません。
上記サイドバーの背景画像の件 自己解決しました。
とにかく質問が投げっぱなしの無茶苦茶なジャーマンスープレックスで恐縮です><

やりたかったことはサイドバー5番目のプラグイン(最新のコメント)の
背景画像を個別に変更することでして
背景を設定したらFirefoxで見ると大丈夫だったんですが、IE、スマホだと画像が寸足らずになってしまいました。
Akira先生のコメントをみましてレイヤーという単語で初めて背景画像を重ねることが出来るのを知りました。

#plg番号 {
background:
 url(上部の画像) left bottom no-repeat,
url(本体の画像) left top no-repeat,
url(下部の画像) left top no-repeat;
padding-left: 2em;
}
こんな感じでテキストもインデント下げて背景画像にあわせてテキストを表示できるようになりました
スマホのレスポンシブはPCと同じように見れればよいなという優先度が低めですが
一応スマホ、IE、Firefoxの3つで同じように見えているので今のところ問題クリアかなと思ってます。
いろいろお手数おかけしてほんと申し訳ないです><
勉強になりました!ありがとうございました!

vanillaice (Akira)
Akira
2016/04/30 (Sat) 13:07

To FATDRAGONさん

解決できたようで良かったです :)

スマホのドロワーの方はですね、iPhone5系の方には不具合というか、コンテンツ超過が起こっています。
もしあれでしたら以下の記事内容をご参照くださいませ。

https://vanillaice000.blog.fc2.com/blog-entry-310.html#object3

FATDRAGON
2016/05/18 (Wed) 16:57

サイドバーのプラグインにテーブルタグを入れると上に余白が出来てしまうのですが、、

Akira先生 ご無沙汰しております。テンプレート制作お疲れ様です。新作も素敵です!
久しぶりに出没して毎度基本的、スレ違いな質問ばかりで恐縮ですがよろしければ教えてください。
サイドバーのプラグイン背景画像に合わせてカウンターを位置合わせしたいと思っています。テーブルタグをあまり理解せずにうってみました。

【プラグイン管理のHTML】
<div class="plugin-freearea" &align>
&freearea
</div>
<table width="100%">
 <tbody>
<tr>
   <th></th>
  </tr>
  <tr>
   <td align="center" valign="middle">忍者カウンターのスクリプト</td>
  </tr>
<tr>
   <td height="50"></td>
  </tr>
 </tbody>
</table>

【CSS】
#plg229757 {
background:
url(背景画像URL) left top no-repeat;
padding-left: 2.5em;
height:600px;
}
#pt229757 {
color: rgba(255,255,255,0);
background-color: rgba(0,0,0,0);
}

こんな感じになっていて、空白のセルの高さで位置を合わせようとしました。
するとテーブル本体が上部から随分と余白がありテーブル本体の上部マージンを0にできません。どこを記述しなおせばよろしいのでしょうか。
お忙しいところ申し訳ございません。お手すきの時にご回答してもらえれば幸いです。

Akira
2016/05/18 (Wed) 18:23

To FATDRAGONさん

こんにちは ( ゚Д゚)ノ

まずこちら。
① 本当にtableタグを使うべきところなのかどうか
② heightの指定が本当に必要なのかどうか

上記2点の方針をまず決めてください。
①について。
tableを使いたいと思うときのパターン
・上下位置を中心に合わせたい(例: 高さ300pxのボックス内にある要素の高さが100pxでちょうど天地中央に要素の位置を合わせる など)
・定義として「表」であると考えられる要素。
・ボックス内に複数の要素が存在し、それぞれを横に並べたい(つまり「セル」という意味です)

特に「表」として定義されるべきものであるのかどうか、というのは重要だと思います。
レイアウトのためだけならばあまりよろしくありません。
レイアウト目的であればtableというhtmlタグではなくCSSボックスモデルのdisplayを利用します。

②について
heightを事前に決めておきたい理由があるかどうか。
tableのtd(セル)に対する50pxという高さ指定、そしてCSS側の
#plg229757
というidを持つオブジェクトへの高さが600px
ちょっとこのオブジェクトがなんなのか私の方ではわかりません。
td内へ入る要素であるのか、それともtableを包括するものであるのか。

一旦投稿しますね。

Akira
2016/05/18 (Wed) 18:36

To FATDRAGONさん

<th>は見出し的なものが無いのならば書かなくてOKです。
tableで必要最小限は

<table>
<tr>
<td>

この3つ。他は無理に使う必要は無いです。
そしてテンプレートがhtml5であるのに対し、掲載されているソース内容はhtml4です。
既に廃止された属性が含まれますので、私ならばこう書きます ↓

<table style="margin: 0 auto; width: 100%; border-spacing: 0; background: url(アドレス) center center no-repeat; background-size: cover;"><tr><td style="padding: 上下余白px 左右余白px; text-align: center; vertical-align: middle;">忍者スクリプト</td></tr></table>

table本体の位置は入れ子されるボックス(サイドメニュー部)の左右中央、そして横幅は許可されている寸を全て使い切る100%指定 (=Blissの場合は300px)
セル内に余白が必要であれば<td>のstyle属性にpaddingとして作成。
全体の高さは指定なし、つまりautoでセル内容に依存。
背景の指定が必要ならば<table>へ直接指定、画像のサイズや縦横比を柔軟に扱うbackground-size: cover; を指定。

あるいは

<div style="margin: 0 auto; padding: 上下余白px 左右余白px; background: url(アドレス) center canter no-repeat; background-size: cover;">忍者スクリプト</div>

これで十分な気もします。
高さ600pxが決定しているのであれば、min-height: 600px; を追加します。
高さが必要なパターンというのは背景画像の寸に合わせたいからかしら。
その場合にはbackground-size指定がなんかうまいことやってくれます (´・ω・`)
ちなみにテンプレートCSSソース内容を触らなくて済むインラインCSS方式(htmlに直接スタイルを指定)で書いています。
どういった見た目にしたいのか青写真なんかがあればお伝えできるのですが (´・ω・`)
ちょっとなさりたいことが見えてこない。ごめんなさい ( ̄∀ ̄;)

FATDRAGON
2016/05/18 (Wed) 19:12

To Akiraさん

Akira先生!素早いご対応誠にありがとうございます!
ななななななるほど!!
いや、ご回答をまるで理解できない自分が恥ずかしいですが、、><

まず背景画像が600pxでしてその高さに固定した上で中のものの位置を決めたいってことなんですが、
レイアウトをするのにテーブルタグはだめですよ!ってのは理解できました!

私にとって新しい単語がバリバリ並んでいるのでこのコメント見て再考します!
取り急ぎご回答ほんとにありがとうございます!お手数おかけしてしまって申し訳ないです!ほんとコメ欄汚しちゃって申し訳ないです><

Akira
2016/05/18 (Wed) 20:33

To FATDRAGONさん

なるほどー (´・ω・`)
その場合にはtableを使う必要は無いと思います。
で、高さ600pxというとかなり大きいのですが、中に入る肝心な忍者はどのぐらいの大きさなんでしょうか。
600pxだとスマホから見た時ほぼ縦画面全部使い切るぐらい大きいです(笑)
あくまでも中身のサイズに合わせる形で、上下余白はpaddingで作成するのがベストじゃないでしょうか。
背景の合わせについてはbackground-size: cover; で調整するという前提で。
見切れる部分など出てきますが、そこが割り切れるかどうかです。
上下のpaddingが同じ数値、かつ、heightはautoとしておけば必然的に忍者の位置は中央になります(忍者側に上下marginが無ければ、の話し)

<div style="margin: 0 auto; background: url(アドレス) center center no-repeat; background-size: cover; padding: 上下余白px 左右余白px; text-align: center;">忍者</div>

テンプレCSSソース及びプラグインソースでの<style>〜</style>指定不要。
上記ソース内の
text-align: center;
指定ですが、忍者がインライン要素であればセンタリングされます。
ブロックレベル要素であれば、中にあるテキストや画像のみがセンタリングされ、忍者自体は左に寄ってます。
(意味がおわかりにならなければスルーで)
忍者が左に寄ってしまった場合には、忍者側が恐らく<div>〜</div>の構成になっていると思いますので、私の書いたソースコードのtext-align: center; を削除した上で忍者側コードを
<div style="margin: 0 auto;">〜</div>
に変更してみてください。

FATDRAGON
2016/05/18 (Wed) 22:25

To Akiraさん 出来ました!ありがとうございます!

先生!出来ました!お騒がせしました><

無知とは恐ろしいもので溢れる情報をなんでも鵜呑みにしてしまうところがありまして、
恥ずかしいけどご指導頂いた方が正しく出来上がるものですね><
ほんと勉強になります!ありがとうございました!

vanillaice (Akira)
Akira
2016/05/20 (Fri) 17:46

To FATDRAGONさん

できましたか。
良かった :)
お疲れ様でした ('0')/

理系女子の美容オタクママ
2017/01/12 (Thu) 20:00

初めまして

とても素敵なテンプレート配信ありがとうございます。
私のブログの見栄えが格段によくなりました!

私のテンプレートはJuvenileですが、探しても見当たらなかったのでこちらで質問させてください。

スマホから見た時に、indexをクリックすると一覧が出てきますが、その際にサムネイル表示付にできますか?

記事下に関連記事ではなく人気記事(自分の指定の物)を表示させることはできますか?

また、すごく初心者の質問で申し訳ないのですが、メニューバー?のmobile、aboutは、どこのページが表示されるものですか?
クリックしても何も変わらないので…
またリンク先は変更できますか?

質問だらけで申し訳ありません。
Akiraさんのテンプレートが素敵すぎるので、より使いこなしたくなってしまって次々と疑問が沸いてきてしまいました。

Akira
2017/01/12 (Thu) 20:30

To 理系女子の美容オタクママさん

ありがとうございます ( ゚Д゚)ノ
こちらは別テンプレートの専用記事ですので、Juvenileの専用ページへ移動お願いします。

https://vanillaice000.blog.fc2.com/blog-entry-452.html

ご質問は移動先でお答えしますね。