attention admin about comments trackbacks you may also like

Bliss - FC2ブログテンプレート

2015年12月11日
テンプレート
33
HTML5 CSS3 RWD
Blissテンプレート

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

最終更新 2019.11.10
  • コメント主のリンク表示用JS及びデザインの変更
名称 Bliss
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大780px
サイド --- 300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 あり(v5.6.3 CSS)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 動画縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 左右カラム入れ替え, 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 スマホのみサイドメニューがドロワーに切り替わります。
IE11 一部表示難あり
パソコン タブレット スマートフォン
2カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 左右
(デバイス幅依存)
サイドメニュー --- 左ドロワー
更新履歴 2019.8.3
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}
②について

#community" で検索するとhtml内に2箇所あります。2つとも #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h2 class="another-title">Leave a comment</h2> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。このすぐ上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 40px;
}
③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

#inner-contents { で検索するとスタイルシート内に1箇所ありますので padding: 20px 0;margin: 20px 0;変更

続きまして、スタイルシート末尾に以下を 追加

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

更新履歴 2019.1.17
  • Font AwesomeのCSSバージョンを5.6.3にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • lazyloadingを導入
  • 構造化マークアップを導入
  • パンくずリストを追加
  • レイアウト関連CSSの追加及び一部削除
  • Pinterest・はてなブックマークのシェアアイコンを追加
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • 管理人コメントにプロフィールアイコンを自動出力
  • fontサイズの指定にremを導入
  • 記事更新日時の表示を追加
  • lazyload導入(スライダー及びグリッド)
  • newマーク表示を全記事一覧・検索結果にも追加

不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、lazyloading・構造化マークアップの導入など追加内容多数、パフォーマンスの向上など が適用されていますので是非アップデートをおすすめします。

更新履歴 2017.9.22

SSL化に伴うURL正規化

更新履歴 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対策)

本ページの内容は2019年1月17日メンテナンス以降のバージョンが対象です。

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

ぶりす
承認されました。ありがとうございます。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ
DOWNLOAD
FAQ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • サイドバーの形状変更
  • トップページの表示タイプ変更(要約表示から全文表示へ変更、グリッド並び数変更 など)
  • レスポンシブを固定幅化
  • カラム数変更
  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

コメント設定 > コメンテーターの情報「記憶する」

コメント設定 > コメンテーターの情報「記憶する」

管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。

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

Customization of slider

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

★スライド用画像について
縦長の画像を選ぶと効率良く表示できます(細かい縦横比は不問)
左右の端がメインになっている画像は避けて 中央にメインがあるようなものがおすすめ、横600px以上が理想的。

★画像の差し替えや増減について

注)ここから画像一枚分

上記文字列をまず目印にガイダンスに従ってください。基本的には該当部位htmlの複製 + URLなどの差し替え で出来ます。

IE11の表示不備について

Not centering vertically in IE11

スライダーオーバーレイ内のコンテンツがIE11では上下中央にならず上揃えになりますことをご了承ください。

左右カラム入れ替えの仕方

How to reverse the direction of rows

#main-container { を検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの padding: 0 60px 100px; の直下に flex-direction: row-reverse;追加

続きまして #primary { で検索。2箇所ヒットし、やはり最初のものが対象です。この括りの margin-right: 40px; 緑部分 rightleft に変更。
以上2手順です。

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の2項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

上記を目印にガイダンスに従って削除。

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

いつもありがとうございます (●'0'●)/

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(33)

There are no comments yet.

きろろ

2015/12/24 (Thu) 01:20

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

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

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

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

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

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

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

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

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

Akira

2015/12/26 (Sat) 00:52

To きろろさん

できましたか。良かった

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

はてブから来ました!

2016/01/14 (Thu) 18:46

No title

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

Akira

2016/01/15 (Fri) 00:24

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

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

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

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

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

こさもむ

2016/01/27 (Wed) 22:18

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

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

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

Akira

2016/01/28 (Thu) 09:46

To こさもむさん

ありがとうございます

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

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

こさもむ

2016/01/28 (Thu) 21:54

To Akiraさん

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

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ブログでだんだんとできるようになりました。

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

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

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さんのテンプレお借りして
違うバージョンをつくってみたいなぁと思います。
自分のやりたいことがほとんど詰まっているテンプレートですので
ほんとすごいなぁと思っていて壺にハマっております!
今後ともよろしくお願いいたします!

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

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さん 出来ました!ありがとうございます!

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

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

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

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

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧