vanillaice (Akira)

vanillaice (Akira)

Bliss13128.jpg


名称 Bliss
カラム数 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC --- 右/ ブラウザ縮小時 下
SP --- 左からスライド
記事幅 可変 最大1040px (内寸 980px)
サイドバー幅 300px
新着サムネイル表示 あり
鍵つきブログの方は表示されませんので削除をお願いします
Google Feed API廃止に伴いFC2独自変数での表示に変更しました
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム スライド画像変更, テーマ色変更, 文字大きさ変更 etc.


valid-html5.png


更新履歴 2017.1.25


・ SNSシェアリンクのUTF-8エンコード

参考記事
SNSシェアリンクのエンコード


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



更新履歴 2017.1.13


・RSS新着サムネイルをFC2独自変数での表示に切り替えました

関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更


更新履歴 2016.10.11


メンテナンス
・ FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 動作が若干軽快になりました
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・その他微調整


更新履歴 2016.9.9


リストマーカーの位置を調整しました

参考記事
list-item横の隙間について


更新履歴 2016.6.6


メンテナンスを行いました
詳細は以下の記事をご参照ください

Blissメンテナンスのお知らせ


更新履歴 2016.1.8



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


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



「頭文字D」のDって何? ドリフト? (´・ω・`)


2015.12.11 申請致しました 通過しました ありがとうございます

ぶりす emo


TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・サイドバーはスマホのみスライド(左から)
・カテゴリ用スライダー(画像変更可)
・トップページは記事要約表示タイプ
・カスタマイズ指南用のナビゲーションは 注) でCtrl+Fキー検索すると出てきます
事前のご確認をお願いします


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


カスタマイズをブラウザ上で行う方は
Ctrl+F(Windows)/ Command+F(Mac) キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします




スライダーの仕様とカスタマイズについて


今回は記事内へアップロードした画像を抽出するのではなく
カテゴリへ誘導するためのものです
各カテゴリに最適と思われる画像の準備をお願いします
デフォルト画像群は全てpublic domain (パブリックドメイン 著作権放棄あるいは存在しない) ですので そのままお使い頂いても構いません

★スライド用画像について
縦長のスライドですが 縦長の画像ってあまり無いので
横長の画像を選んでください
あまり極端な縦横比だとよろしくありません
壁紙などフリーで出まわっているものであれば大抵大丈夫だと思います
左右の端がメインになっている画像は避けて 中央にメインがあるようなものがおすすめです
表示領域が縦に長いですから左右のほとんどは見切れます
横800px以上が理想的

★画像の差し替えや増減について
Ctrl+Fキー検索

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

上記文字列をまず目印に

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

この間に挟まれた内容が画像一枚分の処理です
あとは同じものが連続していますので
表示させたい分だけ繰り返してください
画像の差し替え カテゴリ名やカテゴリ説明分の書き換え等
カスタマイズ指南用ナビに従って作業してください

★仕様
マウスホバーでカルーセルがストップし マウスが離れると再度動きます
左右にある移動ボタン そして 下にあるスライド件数と切り替えボタン
このいずれをクリックしても スライドは停止した状態になり
マウスホバーとは異なり 再度動き出すことはありません
今回はこれが仕様です(笑)



新着サムネイルについて 機能削除しました


Google API の騒動は一旦収束しておりますが
またいつ同じことが起こるとも限りませんので
こちらのテンプレではAPIを利用せずに表示をしています
テキストや画像など 整形の関係上 なるべく簡素化しました (´・ω・`)
この部分のカスタマイズについては自力でお願いします(笑)

Google API を利用する場合と違って 鍵付きブログの方にもご利用頂けます
表示件数の設定については ブログ個人設定のRSS出力件数に倣います
(ここもGoogle API と異なる点です)




ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


みなさんいつもありがとうございますemo

------------ 追記 2015.12.12


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


訪問者コメント(デフォルト)のアイコンはこちら (スクリーンショットです①) ↓

icon sample

管理人コメント用アイコンはこちら (スクショ②) ↓

icon sample


元の画像は同じです
後ろの円形背景色を変えて頂くだけ

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

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に書き換えてください
緑色の箇所がカラーコードですので お好きな色コードに変更をお願いします
(上記サンプルソースはスクショ②と同じ指定です)
rgb(●,●,●) の10進数 #●●●●●● の16進数 どちらでも構いません

* この方法をお使い頂けないハンドルネームの方 *
・文字列最初の文字が「記号」
・最初の文字が「数字」
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)



Colorbox適用版htmlファイル 配布終了致しました


カラーボックス というのはこちらです(画像クリック)
同一ページ内で画像を拡大表示するスクリプトです

sample


*** 配布終了致しました ***

公式から通常版をDLされまして htmlソースを差し替えてください

* このファイルをお使い頂けない方 *
・画像を「アルバムへリンク」に設定されている方
・記事作成画面内にSNSボタン あるいはブログランキング等のタグを貼り付けている方
・全ての画像に拡大が適用されると困る方(過去掲載画像も全て対象になります)

カスタマイズ上級者の方は通常版を用いてColorboxプラグインを「追加」する形をおすすめします

参考記事
Colorbox上級編
関連記事

Comments 33

There are no comments yet.
きろろ  
お久しぶりでございます<(_ _)>

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

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

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

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

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

2015/12/24 (Thu) 01:20 | EDIT | REPLY |   
Akira  
To きろろさん

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

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

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

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

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

2015/12/24 (Thu) 17:17 | EDIT | REPLY |   
きろろ  
できました!

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

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

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

2015/12/25 (Fri) 00:00 | EDIT | REPLY |   
Akira  
To きろろさん

できましたか。良かった

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

2015/12/26 (Sat) 00:52 | EDIT | REPLY |   
はてブから来ました!  
No title

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

2016/01/14 (Thu) 18:46 | EDIT | REPLY |   
Akira  
To はてブから来ました!さん

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

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

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

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

2016/01/15 (Fri) 00:24 | EDIT | REPLY |   
こさもむ  
スマートフォン版につきまして

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

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

2016/01/27 (Wed) 22:18 | EDIT | REPLY |   
Akira  
To こさもむさん

ありがとうございます

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

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

2016/01/28 (Thu) 09:46 | EDIT | REPLY |   
こさもむ  
To Akiraさん

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

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

2016/01/28 (Thu) 21:54 | EDIT | REPLY |   
Akira  
To こさもむさん

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

2016/01/29 (Fri) 14:50 | EDIT | REPLY |   
きろろ  
コメントの返信について

こんばんは<(_ _)>

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

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

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

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

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

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

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

2016/04/02 (Sat) 00:59 | EDIT | REPLY |   
Akira  
To きろろさん

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

さま

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

2016/04/03 (Sun) 00:53 | EDIT | REPLY |   
きろろ  
ありがとうございます<(_ _)>

すみませんe-351

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

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

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

2016/04/03 (Sun) 01:03 | EDIT | REPLY |   
Akira  
To きろろさん

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

2016/04/03 (Sun) 01:05 | EDIT | REPLY |   
FATDRAGON  
Blissの新着サムネイルについて

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

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

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

2016/04/21 (Thu) 20:06 | EDIT | REPLY |   
Akira  
To FATDRAGONさん

こんばんは ( ゚Д゚)ノ

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

.inner-context

この括りの

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

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

2016/04/21 (Thu) 20:50 | EDIT | REPLY |   
FATDRAGON  
To Akiraさん

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

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

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

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


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

2016/04/21 (Thu) 23:30 | EDIT | REPLY |   
Akira  
To FATDRAGONさん

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

.rss-container

の項目

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

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

2016/04/22 (Fri) 08:40 | EDIT | REPLY |   
FATDRAGON  
再度お手数おかけしました。解決しました!

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

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

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

2016/04/22 (Fri) 22:41 | EDIT | REPLY |   
Akira  
To FATDRAGONさん

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

2016/04/23 (Sat) 00:35 | EDIT | REPLY |   
FATDRAGON  
サイドバーの背景画像について

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

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

2016/04/28 (Thu) 08:01 | EDIT | REPLY |   
Akira  
To FATDRAGONさん

こんばんは ( ゚Д゚)ノ

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

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

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

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

2016/04/28 (Thu) 22:45 | EDIT | REPLY |   
FATDRAGON  
お手数おかけしました 自己解決しました

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つで同じように見えているので今のところ問題クリアかなと思ってます。
いろいろお手数おかけしてほんと申し訳ないです><
勉強になりました!ありがとうございました!

2016/04/30 (Sat) 03:03 | EDIT | REPLY |   
Akira  
To FATDRAGONさん

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

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

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

2016/04/30 (Sat) 13:07 | EDIT | REPLY |   
FATDRAGON  
サイドバーのプラグインにテーブルタグを入れると上に余白が出来てしまうのですが、、

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にできません。どこを記述しなおせばよろしいのでしょうか。
お忙しいところ申し訳ございません。お手すきの時にご回答してもらえれば幸いです。

2016/05/18 (Wed) 16:57 | EDIT | REPLY |   
Akira  
To FATDRAGONさん

こんにちは ( ゚Д゚)ノ

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

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

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

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

一旦投稿しますね。

2016/05/18 (Wed) 18:23 | EDIT | REPLY |   
Akira  
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に直接スタイルを指定)で書いています。
どういった見た目にしたいのか青写真なんかがあればお伝えできるのですが (´・ω・`)
ちょっとなさりたいことが見えてこない。ごめんなさい ( ̄∀ ̄;)

2016/05/18 (Wed) 18:36 | EDIT | REPLY |   
FATDRAGON  
To Akiraさん

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

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

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

2016/05/18 (Wed) 19:12 | EDIT | REPLY |   
Akira  
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>
に変更してみてください。

2016/05/18 (Wed) 20:33 | EDIT | REPLY |   
FATDRAGON  
To Akiraさん 出来ました!ありがとうございます!

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

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

2016/05/18 (Wed) 22:25 | EDIT | REPLY |   
Akira  
To FATDRAGONさん

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

2016/05/20 (Fri) 17:46 | EDIT | REPLY |   
理系女子の美容オタクママ  
初めまして

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

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

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

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

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

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

2017/01/12 (Thu) 20:00 | EDIT | REPLY |   
Akira  
To 理系女子の美容オタクママさん

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

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

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

2017/01/12 (Thu) 20:30 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
2017.8.8 本日より10日ほど留守にしますのでお返事遅れます。すみません