attention admin about comments trackbacks you may also like

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

2016年11月04日
テンプレート
96
HTML5 CSS3 RWD
Basementテンプレート

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

最終更新 2019.11.4
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
名称 Basement
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大798px
サイド --- 220px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 なし(インラインSVG)
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 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
3カラム 1 or 3カラム
デバイス幅依存
1カラム
サイドメニュー --- 右と左 サイドメニュー --- 下 or 右と左
デバイス幅依存
サイドメニュー --- 下
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点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-->

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

<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"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></a>
  <li><a href="#comment_form"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></a>
</ul>

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

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

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

#community で検索するとhtml内に1箇所ありますので #comment_form変更

続いて#main-body-top で検索するとhtml内に1箇所ありますのでこちらも #comment_form変更

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

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

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

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

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

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

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

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

<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;
}

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

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2018.12.27
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • 左右サイドメニュー各最下部の要素をstickyにしました(解除可)
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • UA判別のJSを削除しCSSに変更

不具合修正ではありませんので旧バージョンのままお使い頂けます。

更新履歴 2018.3.6
  • iOS11.2.6でモーダルが開かない件修正
  • Font Awesomeバージョン4(CSS)からバージョン5(JS)へアップデート
  • 新変数実装に伴い管理人コメントにプロフィールアイコンをデフォルト表示
更新履歴2018.1.5

大規模なメンテナンスを行いました。
詳細は以下のページでご確認ください。

Basement大規模メンテナンスのお知らせ - テンプレ不具合・修正など

Basementテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 今回のメンテナンスでは html構造及びCSS装飾及びJS内容全てに大規模な修正を入れています。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

更新履歴 2017.1.25

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

更新履歴 2017.1.13

・RSS新着サムネイルを削除しました

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

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

最近の作業用BGMは System Of A Down ( ゚Д゚)

べーすめんと
承認されました。ありがとうございます。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST 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

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

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

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

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

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

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

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

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

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

Font Awesomeについて

About Font Awesome

リリース直後は Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。

FAがどうしても必要、という方はhtml内に

注)Font Awesome(JS)必要な方この一行削除

という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。

CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome

JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。

ヘッダー画像指定

How to add image in header

ヘッダーに画像を指定される方は #banner というのがCSSソース内に1箇所ありますので その項目の background-color: black; を以下の通り修正してください。

background: url(ここに画像アドレス) center center /cover no-repeat;

ナビゲーションについて

Important thing to be careful when adding links to navigation

ナビゲーションリンクテキストの日本語変更やリンク追加などをされます方は、デフォルト設定よりも早い段階でナビゲーションが折りたたまれるよう調整してください。
(見た目・操作性の問題とスクロール位置のズレ対策)

navi breakpoint

で検索されますとhtml内に1箇所、CSS内に1箇所、合計2箇所出てきます。
いずれも直近(すぐ下にあります)の 767px の数値を大きい数字に変更してください。

目次へ戻る↑

削除可能な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はサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(96)

There are no comments yet.

-

2017/01/07 (Sat) 20:07

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/01/07 (Sat) 20:22

To Basementバリデートエラーの件 内緒さん

ありがとうございます ( ゚Д゚)ノ

> 急にバリデートでエラーが表示された件

結論から言うと、公式プラグインの「新着記事(サムネイルつき)」を導入されたのが原因です。
それ以外にはテンプレのhtml内容及び内緒さんの記事内容にエラーはありません。
(トップは最新から3ページ目まで+個別記事最新から3件、全記事リスト(index)+検索結果+カテゴリページ3カテゴリ を検証しました)

この公式プラグインではデザインをするにあたり
<style> というhtmlタグを利用しています。
現在のweb標準であるhtml5はこれを良しとしていません。
ですがプラグインである以上テンプレートとのデザイン連動はできませんので、致し方ないっちゃー致し方ない (´・ω・`)
これがstyle「タグ」ではなくstyle「属性」ならばエラーにはならないんですけどね (´・ω・`)

========= 対処法

プラグインのhtml内に含まれる
<style>〜</style>
を全て削除。
削除しただけではデザインが失われてレイアウトが狂いますので、削除した項目をCSSファイルとして保存 → アップロード → テンプレの<head>〜</head>間に

<link rel="stylesheet" href="アドレス">

こうして外部ファイルとして管理すると良いと思います。
あるいはテンプレのCSSに追加するかのいずれか。
外部ファイル化するにしろ、CSSに追加するにしろ、テンプレを変更されますと内容が失われますのでしっかり管理する必要があります。
つまりテンプレを変更したら同様の手順を恒久的にやっていかないとだめですね (´・ω・`)
そのあたりはおまかせしますが、いずれにしろ
「公式プラグインが原因です」という答えで締めくくってよろしいでしょうか(笑)

-

2017/01/09 (Mon) 17:07

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/01/10 (Tue) 01:38

To Basementバリデートエラーの件 内緒さん②

お役に立てたならば幸いです。
こちらこそありがとうございます

hige

2017/01/10 (Tue) 17:55

プラグイン

あれま。公式でですか?
共用プラグインでは、なんかちょこちょこエラーが出てるのがあります。
私が確認したのは、リンクファイルが亡くなってるとか。
あっ違った! 無くなってる とか
FC2は管理してない様です。

Akira

2017/01/10 (Tue) 18:36

To higeさん

こんばんは ( ゚Д゚)ノ

html5を考えるならば公式プラグインはエラーだらけです (´・ω・`)
共有の方はちょっとわかんない ^^;
仕方ないと言えば仕方ないんですよね。
CSSデザインは必須なので、どこかで指定しなきゃいけないわけで。
<style>〜</style>というのは<head>〜</head>内に入れなきゃダメ、という決まりがありますけれど、プラグインですからhtml中ほどに放り込まれることに。
これだけで大きなエラーです。
ただ「機能しない」ってのとは違って「正しい文法ではない(けどまぁよきにはからいましょう)」という感じ。

私としては各サムネイルのサイズが全く統一されていないことが気になります(笑)
一つの画像に対して一つを生成・格納して、それを呼び出せば良いのに、って思うけど素人考えなんでしょうか… ( ̄∀ ̄;)
サイズ自体も小さすぎて解像度が悲惨… ( ̄∀ ̄;)
全サムネイルを150px四方ぐらいで揃えてもらえると良いんだけど (´・ω・`)

Akira

2017/01/21 (Sat) 18:40

To 拍手ボタン表示の件 内緒さん(移動先)

> 拍手ボタンを表示したい件

個別記事では表示されているはずですので、
「トップページでも」表示させたい、という解釈で合ってますでしょうか。

方法①
ブログ個人設定の
拍手ボタンの設定 > 拍手ボタンの表示位置

追記リンクの前 に変更

方法②
テンプレートhtmlソースを操作

手順の記事
http://vanillaice000.blog.fc2.com/blog-entry-400.html

======

いずれかの方法でお願いします。
また、この仕様へのご理解も頂ければ幸いです。
よろしくお願いします (o'ω')ノ

Akira

2017/03/05 (Sun) 17:34

To よーきーさん(移動先)

> 個別ページの「関連記事」の上に画像を挿入したい〜

関連記事リストの出力場所はFC2の仕様であらかじめ決められていますので、その順序を変更することはできません。
htmlを記載しただけではできませんので、JSを使います。
htmlソース
</body>
の直前に以下を追加。

<!--permanent_area-->
<script>
$(function() {
$('<div style="text-align:center; margin: 30px auto;"><img src="画像アドレス" alt="代替テキスト"></div>').insertBefore('.relate_dl');
});
</script>
<!--/permanent_area-->

赤字部分は前後内容との空白ですので調整してください。

==========

現状でいくつか問題点があるようですので、ここからの内容修正の判断はお任せします。

① ヘッダー画像のサイズ調整とalt属性

ヘッダーのheightに「600px」という具体的数値を入れてしまったために、画面幅が縮小された際にバナーだけに縮尺かかり、最終的に上の方にこじんまりと表示されるようになっています。
ヘッダー部位だけがやたら大きく、バナーが小さい状態です。
そしてバナー自体がSEO的によろしくありません。
以下の通り修正。

htmlソース

<!-- ヘッダーここから --><header id="banner"> から <!-- グローバルナビゲーション --> までの内容を

<h1><a href="ブログアドレス"><img style="max-height: 600px;" alt="ほびらぼん" src="画像アドレス"></a></h1>

・ ブログタイトルには<h1>を指定してください。
・ alt属性にはブログタイトルを入れてください。
・ リンクに target="_blank" をつけてしまうと、閲覧者がクリックするたびに別タブが開かれて若干迷惑かと思います。

続きましてCSSソース
Ctrl+F(Windows)/ Command+F(Mac)キー検索で #banner を見つけて以下の通り変更。

#banner {
margin: 0 auto;
width: 100%;
background-color: rgb(255,82,162);
padding: 50px 0 150px;
text-align: center;
}

参考
http://vanillaice000.blog.fc2.com/blog-entry-468.html
http://vanillaice000.blog.fc2.com/blog-entry-458.html

=======

② これは私のミスです。申し訳ございません。
trackback の内容が左右に拡がりすぎていますので、
<h3 class="another-title"><!--topentry--><%topentry_tb_num> <!--/topentry-->Trackbacks</h3> の下に

<div class="contents">

を追加。さらに <!--trackback--> の上に

</div>

を追加。
お手数おかけします。

よーきー

2017/03/05 (Sun) 21:24

To Akira 様

早速のご回答、誠にありがとうございます。
非常に助かりました。
①に関しては実装済みで画面での確認が取れております。
②に関しては実装してみましたがなにぶんド素人なので違いが分かりませんでした(涙
可能であればソースを見て頂き実装が正しく行われているか確認をお願いしたいです(血涙

そして実はこれは僕の言葉足らずだったので申し訳ないのですが
関連記事一覧の上に出したいのは画像ではなく
ブログランキングバナーなのです。

具体的には下記のようなテーブルに5つのバナーアイコンが仕込まれているものを
関連記事の直上に表示させたいのですが可能でしょうか?

<table width="600" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td style="text-align: center;"><a title="おもちゃ・玩具 ブログランキングへ" href="URL"><img alt="" height="31" width="110" border="0" src="http://image.with2.net/img/banner/c/banner_1/br_c_1460_1.gif" /></a></td><td style="text-align: center;"><a href="URL"><img alt="" height="31" width="88" border="0" src="http://collection.blogmura.com/toy/img/toy88_31.gif" /></a></td><td style="text-align: center;"><a href="URL" target="_blank"><img alt="" src="http://blogranking.fc2.com/ranking_banner/b_02.gif" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" /></a></td><td style="text-align: center;"><a title="ブログランキング" href="URL"><img alt="ブログランキング" border="0" src="http://img.dendou.jp/b_b_rd.gif" /></a></td><td style="text-align: center;"><a href="URL"><img alt="blogramで人気ブログを分析" height="31" width="88" src="http://widget.blogram.jp/images/bgButton1_pin.gif" style="border: none;" /></a></td></tr></tbody></table>

わがままを言って申し訳ありません。
何卒、宜しくお願い致します。m(_ _)m

Akira

2017/03/05 (Sun) 21:50

To よーきーさん

ランキングバナーじゃなくて画像で良いのかしら (´・ω・`)
と思っておりました(笑)
ランキングバナーとなるとコード内容が全く異なります。
実際の作業に入る前に事前確認です。

① tableにこだわる理由があるかどうか YES/ NO

tableというのは「表」という定義を持っています。
ランキングバナーの集合体を「データをまとめてある『表』である」という定義をしたいという希望があるのならばそうするべきですが、
単純に「レイアウトの都合」であるならばtableを使う必要はないと思います。
htmlタグはレイアウトのためのものではありません。
横並びさせたいだけならばCSSの float あるいは displayのinline-block へ変更されることをおすすめします。
また、このテンプレートはhtml5ですが、記して頂いたtable要素はhtml4の書式で、既に廃止された属性などが含まれています。
tableを用いるにしろ正しく書き換える作業は必要です。

② 横幅の絶対値が必要かどうか YES/ NO

widthに600pxという指定がありますが、このテンプレートはレスポンシブデザインです。
ページ内に存在する要素に絶対値があり、その数値が画面幅を超過している場合には当然ながらはみ出します。
はみ出すと訪問者は閲覧が困難になります(ページ全体に横スクロールバーが出る状態 = 画面ブレ)
そしてGoogleから警告を受けます (not mobile friendly)
こちらも意図があって 600px という数字を設けているのかどうかのご確認をお願いします。
横並びの要素が画面幅を超過したら超過分は下へ繰り越す、というレイアウトが一番適切かと思います。
(tableは要素の自動繰越し(自動折り返し)はできません。それはtable及びtdというhtmlタグの特徴です。)

一旦投稿します。
お読み頂きましたらお返事をお願いします。
その間に私の方はパターン毎のコードを作成しておきます(笑)

よーきー

2017/03/05 (Sun) 22:48

To Akira 様

早速のご回答、ありがとうございます。

質問の回答です。

① tableを使用しているのは単にバナーアイコンを横並びで綺麗に整形したかった
  だけなので特にこだわっていません。他に良い方法があればそちらを選択したいです。

② 横幅の絶対値も単に見栄えだけの調整で特に意図はありません。固定値にした方が良いのかなぁ
  と思っただけの素人考えです(汗だく
  おっしゃる通り画面幅を超過した場合は折り返した方がキレイだと思います。

以上です。
宜しくお願い致します。m(_ _)m

Akira

2017/03/05 (Sun) 22:57

To よーきーさん

とりあえずhtml内容を書きますが、実装の際には改行などを取り除く(横一繋ぎでの記述)が必要なのと、一番大事なJSコードと組み合わせる必要がありますので、
そちらについては最後に載せます。
まずはそれぞれのhtml内容とその説明です。
(注) アドレスは全て相対パス(httpスキーム省略)で書いてます。スキームは省略しておかれることをおすすめします。

① どうしてもtableを使いたい、という場合

<table style="margin: 20px auto; border: 0; border-spacing: 0; text-align: center;">
<tr>
<td style="padding-right: 10px;">
<a href="URL" target="_blank" title="おもちゃ・玩具 人気ブログランキングへ">
<img style="max-width: initial; height: 31px;" src="//image.with2.net/img/banner/c/banner_1/br_c_1460_1.gif" alt="代替テキスト">
</a>
</td>
<td style="padding-right: 10px;">
<a href="URL" target="_blank" title="おもちゃ・玩具 ブログ村ランキングへ">
<img style="max-width: initial; height: 31px;" src="//collection.blogmura.com/toy/img/toy88_31.gif" alt="代替テキスト">
</a>
</td>
<td style="padding-right: 10px;">
<a href="URL" target="_blank" title="FC2ブログランキングへ">
<img style="max-width: initial; height: 31px;" src="//blogranking.fc2.com/ranking_banner/b_02.gif" alt="代替テキスト">
</a>
</td>
<td style="padding-right: 10px;">
<a href="URL" target="_blank" title="ブログの殿堂ランキングへ">
<img style="max-width: initial; height: 31px;" src="//img.dendou.jp/b_b_rd.gif" alt="代替テキスト">
</a>
</td>
<td style="padding-right: 10px;">
<a href="URL" target="_blank" title="ブログラムランキングへ">
<img style="max-width: initial; height: 31px;" src="//widget.blogram.jp/images/bgButton1_pin.gif" alt="代替テキスト">
</a>
</td>
</tr>
</table>

★ margin: 0 auto
全体をセンタリングにする設定になってます。
左寄せにするならば
margin: 20px auto 20px 0
に変更。
最初の20pxが上空白、二つ目の20pxが下空白ですのでそれぞれ調整してください。

★ padding-right: 10px;
各セルの右側に空白を設けて隣接要素とくっつかないように処理しています。
10pxの数値はお好きに調整してください。

★ html5では不要である空要素への / (末尾スラッシュ)を削除してあります。
(例: <img src="12345.jpg" />

★ <tbody>は特に書く必要なし。

★ cellpadding, cellspacing などの廃止属性を削除してCSSに置き換えてあります。

★ <a>タグに target="_blank" を追加してあります。
先程のブログタイトルと違い、外部のページを開きますので別タブ表示にしておいた方が良いと思います。

★ 各バナーのそれぞれの書式を統一してあります。
属性の記述順など、揃えておいた方がメンテナンスの際に楽です。

★ img のwidthに関するテンプレート側の制限を適用外にしてあります。
max-width: initial; がそれにあたります。
これを書かないとバナーの縦横比が崩れますので記述削除不可。

注意事項
・ 先程お伝えした通り、tableでの構成ですので画面幅が小さくなればはみ出します。
・ 画像への alt属性 は必ず書いてください。適切な文言が見つからない場合には alt="" という風に空白(何も指定しない)でも構いません。
alt属性の 削除 はしないようにしてください。

スクショ
画面幅1162px, はみ出した部位は強制カット(見切れ, 横スクロールバーなし)
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/w9dwe9fdwth_zpsfcbuwqfg.jpg

画面幅407px(サイドメニューが下へ繰り越した際), はみ出した部位は画面を押し広げて画面全体に横スクロールバー) ← これ大変よろしくない状態です。
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/qw8dy32reth_zpszn8858qd.jpg

=======

② displayの inline-block を使う場合

<div id="ranking-banners" style="margin: 20px auto;">
<div style="display: inline-block; padding: 0 10px 10px 0;">
<a href="URL" target="_blank" title="おもちゃ・玩具 人気ブログランキングへ">
<img style="max-width: initial; height: 31px;" src="//image.with2.net/img/banner/c/banner_1/br_c_1460_1.gif" alt="代替テキスト">
</a>
</div>
<div style="display: inline-block; padding: 0 10px 10px 0;">
<a href="URL" target="_blank" title="おもちゃ・玩具 ブログ村ランキングへ">
<img style="max-width: initial; height: 31px;" src="//collection.blogmura.com/toy/img/toy88_31.gif" alt="代替テキスト">
</a>
</div>
<div style="display: inline-block; padding: 0 10px 10px 0;">
<a href="URL" target="_blank" title="FC2ブログランキングへ">
<img style="max-width: initial; height: 31px;" src="//blogranking.fc2.com/ranking_banner/b_02.gif" alt="代替テキスト">
</a>
</div>
<div style="display: inline-block; padding: 0 10px 10px 0;">
<a href="URL" target="_blank" title="ブログの殿堂ランキングへ">
<img style="max-width: initial; height: 31px;" src="//img.dendou.jp/b_b_rd.gif" alt="代替テキスト">
</a>
</div>
<div style="display: inline-block; padding: 0 10px 10px 0;">
<a href="URL" target="_blank" title="ブログラムランキングへ">
<img style="max-width: initial; height: 31px;" src="//widget.blogram.jp/images/bgButton1_pin.gif" alt="代替テキスト">
</a>
</div>
</div>

★ margin設定については先程のtableと同じです。

★ 画面幅を超過しないよう下へ繰り越します。
スクショ
http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/w9d9q2dth_zps4s9huqk1.jpg

こちらがおすすめですが、どちらを選択するかはお任せします。
tableを選ばれる場合は注意事項について自己責任でお願いします。
あとは float という手法もありますが、バナー同士を隙間なくピッタリくっつけたいという場合以外は必要ないと思います。
inline-block で十分だと思いますので。

Akira

2017/03/05 (Sun) 23:00

To よーきーさん(追記あり)

実際のコード。
</body>直前に記載。

① table

<!--permanent_area-->
<script>
$(function() {
$('<table style="margin: 20px auto 20px 0; border: 0; border-spacing: 0; text-align: center;"><tr><td style="padding-right: 10px;"><a href="URL" target="_blank" title="おもちゃ・玩具 人気ブログランキングへ"><img style="max-width: initial; height: 31px;" src="//image.with2.net/img/banner/c/banner_1/br_c_1460_1.gif" alt="代替テキスト"></a></td><td style="padding-right: 10px;"><a href="URL" target="_blank" title="おもちゃ・玩具 ブログ村ランキングへ"><img style="max-width: initial; height: 31px;" src="//collection.blogmura.com/toy/img/toy88_31.gif" alt="代替テキスト"></a></td><td style="padding-right: 10px;"><a href="URL" target="_blank" title="FC2ブログランキングへ"><img style="max-width: initial; height: 31px;" src="//blogranking.fc2.com/ranking_banner/b_02.gif" alt="代替テキスト"></a></td><td style="padding-right: 10px;"><a href="URL" target="_blank" title="ブログの殿堂ランキングへ"><img style="max-width: initial; height: 31px;" src="//img.dendou.jp/b_b_rd.gif" alt="代替テキスト"></a></td><td style="padding-right: 10px;"><a href="URL" target="_blank" title="ブログラムランキングへ"><img style="max-width: initial; height: 31px;" src="//widget.blogram.jp/images/bgButton1_pin.gif" alt="代替テキスト"></a></td></tr></table>').insertBefore('.relate_dl');
});
</script>
<!--/permanent_area-->

② inline-block

<!--permanent_area-->
<script>
$(function() {
$('<div id="ranking-banners" style="margin: 20px auto;"><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="おもちゃ・玩具 人気ブログランキングへ"><img style="max-width: initial; height: 31px;" src="//image.with2.net/img/banner/c/banner_1/br_c_1460_1.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="おもちゃ・玩具 ブログ村ランキングへ"><img style="max-width: initial; height: 31px;" src="//collection.blogmura.com/toy/img/toy88_31.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="FC2ブログランキングへ"><img style="max-width: initial; height: 31px;" src="//blogranking.fc2.com/ranking_banner/b_02.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="ブログの殿堂ランキングへ"><img style="max-width: initial; height: 31px;" src="//img.dendou.jp/b_b_rd.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="ブログラムランキングへ"><img style="max-width: initial; height: 31px;" src="//widget.blogram.jp/images/bgButton1_pin.gif" alt="代替テキスト"></a></div></div>').insertBefore('.relate_dl');
});
</script>
<!--/permanent_area-->


最後に双方の注意点
JSでhtml自体を挿入・描画しますのでローディング負荷がかかるのと、描画タイミング自体も遅いです。
そこは事前にご納得くださいね。
よろしくお願いします。
コメントした直後にお返事に気づきましたが、せっかくですので table の方も書いておきました(笑)
実装時には URL の部分を実際のアドレスに置き換えるのをお忘れなく。
また、そちらのアドレスもスキーム省略がおすすめです。
(https化が進んでいますので、向かう先がhttp: から https: に変更された場合にアクセスできなくなります。
相対で書いておけば相手方のディレクトリなどが変更にならない限りアクセスの確保ができます)

======= 追記

なにか苦労されているようですけれど ^^;
コード内容はコピペしてくださいね。
で、今一つ気づいたのですが、フォントを変更されていますよね。
その書き方が間違っています。

body

に与えられているフォント内容を以下のような形に修正されているかと思います。

font: 14px/1.7 ''メイリオ';

シングルクォーテーションが重複していますので無効(エラー)になって指定が効いていません。

font: 14px/1.7 'メイリオ';

が正しいのですが、これでも問題あり。
メイリオフォントはMacには入っていません。
Mac用のフォントも指定してあげてください (;´Д`)
(対応フォントが見つからない場合にはブラウザ設定のフォントになります)

font: 14px/1.7 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'メイリオ', 'Meiryo', '游ゴシック', 'YuGothic', 'sans-serif';

メイリオの手前まではMac用フォントでWindowsにはバンドルされていませんので無視されます。
Macの第一優先フォントは ヒラギノ角ゴ ProN W3
Windowsの第一優先フォントは メイリオ
というのが上記指定内容です。

欧文フォントが指定されていないのは大丈夫なんでしょうか。
デフォルトは Oswald フォントと Lato フォントですけれど。
どちらも も不要でメイリオに揃えるのであればGoogle fontsへのhttpリクエストも不要です(ローディングに無駄が生じます)。
欧文フォント削除は

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oswald%7CLato">

の一行を削除してください。
それからメイリオフォントは傾けられないフォント種ですので、仮に
<i>あいうえお</i>
あるいは
<span style="font-style: italic;">あいうえお</span>
などの指定を記事内で行ったとしても絶対に傾かない(イタリック or オブリーク にはならない) ことを事前に知っておいてくださいね。
よろしくお願いします。

参考
http://vanillaice000.blog.fc2.com/blog-entry-484.html

よーきー

2017/03/06 (Mon) 21:41

To Akira 様

こんばんは。ご回答、ありがとうございました。
でも、ちょっと僕にはハードルが高いようでして・・・・(涙

えっと、やった事は次の通りです。
① <script> </script> のブロックを</body>直前にコピペ(urlは書き換えました)
② <div id="ranking-banners" style="margin: 20px auto;"> </div> のブロックを①の直前にコピペ
  (こちらもurlを書き換えました)

お察しの通りうまくいきませんで
トップページフッターの下にバナーが出現してしまいました(笑

多分、②のコピペ場所が違うんだと思うのですが・・・。
ご教授頂けると幸いです。

それから先ほど、これをやっていて気づいたのですが
個別ページへ遷移するとヘッター部に「ARTICLE PAGE」という文言が出現するようになってしまいました。
テンプレを検索してもこのような文言はなく首を傾げております。

こちらも合わせてご教授して頂けると幸い至極でございます。m(_ _)m

Akira

2017/03/06 (Mon) 22:39

To よーきーさん

こんばんは。お疲れ様です (o'ω')ノ

えとですね。
よーきーさんが行う作業は

② のコードをコピペし、

<!--permanent_area-->
<script>
$(function() {
$('<div id="ranking-banners"
.....
省略
.....
});
</script>
<!--/permanent_area-->

</body>の直前へ貼り付ける。
これだけです (´・ω・`)
スクショでご確認ください。

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

</body>はhtmlソースの最後の方にあります。
ここへ貼り付けてください。
で、現状の内容を確認しましたところ、当該コードがどこにも存在しません。
ポカーンと空白になってます。

ともかくコピペするのは一番最後に載せた inline-block 用のコードだけです。
このコードは「JSでhtmlを書き出す」という目的です。
最初に載せたhtmlだけのソース内容は、説明をしてある程度意味を把握しておかないと自力での修正などができませんので「実際に掲載するコードは最後に載せます。まずはそれぞれのhtml内容とその説明です。」
ということであって、双方を載せなさい、という意味ではありませんですー (´・ω・`)
最初のはJSによって吐き出されるhtml内容の説明を行っただけです。
改めて、以下の内容をコピーしてください(太字の部分全て)

<!--permanent_area-->
<script>
$(function() {
$('<div id="ranking-banners" style="margin: 20px auto;"><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="おもちゃ・玩具 人気ブログランキングへ"><img style="max-width: initial; height: 31px;" src="//image.with2.net/img/banner/c/banner_1/br_c_1460_1.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="おもちゃ・玩具 ブログ村ランキングへ"><img style="max-width: initial; height: 31px;" src="//collection.blogmura.com/toy/img/toy88_31.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="FC2ブログランキングへ"><img style="max-width: initial; height: 31px;" src="//blogranking.fc2.com/ranking_banner/b_02.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="ブログの殿堂ランキングへ"><img style="max-width: initial; height: 31px;" src="//img.dendou.jp/b_b_rd.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="ブログラムランキングへ"><img style="max-width: initial; height: 31px;" src="//widget.blogram.jp/images/bgButton1_pin.gif" alt="代替テキスト"></a></div></div>').insertBefore('.relate_dl');
});
</script>
<!--/permanent_area-->



そしてコピーしたものを
</body>の直前に貼り付けてください。
そして「更新」を押し、個別記事を開いて関連記事の上に現れるかどうかを確認してください。
必ず更新してくださいね。
個別記事はプレビューできませんし、キャッシュが残りますので編集箇所が上手く出てこないことがあります。
必ず「更新」です。

===========

> ヘッダー部に「ARTICLE PAGE」という文言が〜

これは最初にご説明した通り以下のスクショのようになっていなければいけません。

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/2938ry932rth_zpsxrriaajz.jpg

現状ではまだ <!-- グローバルナビゲーション --> の上にたくさん要素が残っているはずですのでそれを消去してください。

よろしくお願いします ( ゚Д゚)ノ

よーきー

2017/03/06 (Mon) 23:24

To Akira 様

できました~!!!

アイコンも無事表示され、「ARTICLE PAGE」も表示されなくなりました

感謝感謝デス。

というか、ちゃんと説明聞けって感じですね。すみません。m(_ _)m

また些細な事で質問するかもしれませんが

宜しくお願い致します。(^^)/

Akira

2017/03/07 (Tue) 17:23

To よーきーさん

出来ましたね。
安心しましたー。

はい。お気軽にお尋ねください。
お疲れ様でした

ゆき

2017/03/08 (Wed) 19:46

No title

初めまして。
早速ですが、banner(上部の黒い所)の大きさは変更できませんか?
100pxくらい記事と被ってる部分を短くしたいなぁと考えているんですが…どこを触ったら良いのかわかりません。
宜しくお願いします。

Akira

2017/03/08 (Wed) 21:21

To ゆきさん

こんばんは。

> ヘッダーとコンテンツの被りを小さくしたい件

Ctrl+F(Windows)/ Command+F(Mac)キー検索

#whole-container

2箇所ヒットしますが最初のものが対象です。
この項目の

margin: -150px auto 0;

赤字の部分を大きくしてください。(マイナス値ですので「大きく」というのは-100pxや-50pxといった正の値に近くするという意味です)
margin: 0 auto 0; で重ならなくなります。

========

ヘッダー自体の大きさ変更は、

#banner

を検索し、

padding: 150px 0 250px;

赤字の最初のものがヘッダー上辺からブログタイトルまでの距離、二つ目のものがヘッダーブログ説明文とヘッダー下辺までの距離ですのでそれぞれ調整してください。

========

ご使用の画像のオブジェクトポイントが「右」ですので、画像表示基準位置も変更された方が良いと思います。
同じく #banner 内の

top center

を top right へ変更。

よろしくお願いします。

ゆき

2017/03/09 (Thu) 00:10

bannerについて

出来ました!
コンテンツ位置はあのままで、画像にするbanner部分はもう少し縮めたかったので、
#whole-containerを大きくして、#bannerのpaddingは小さくしてみました。
後でもう少し調整してみます♪

あ、画像は上からが良いけど、左右は中央からでも良いかなー?と思ったのでcenterのままにしていたんですが、righに変えておきました。

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

Akira

2017/03/10 (Fri) 02:38

To ゆきさん

良かったですー

right に指定する意味というのはですね、この指定は「見切れさせたくない部位」を指定しておくのがベストなんです。
デフォルトの center のままですと、ゆきさんの画像の場合にはブラウザの横幅をどんどん小さくしていくと、最終的に右のオブジェクトが画面上から居なくなります。
ヘッダーが動いているわけではなくてですね、指定された右側が画面から見切れないように画像自体の表示位置調整を行っているわけです。
デフォルトの center でブラウザを小さくされるか、スマートフォンから閲覧して画像の状態をご確認頂くと意味がわかると思います。
よろしくお願いします (o'ω')ノ

* コメント見落としておりまして、お返事が遅れてしまいました。
他の方にはリコメを済ませておりましたので、無視したみたいになっちゃってごめんなさいね (*_ _)

よーきー

2017/03/13 (Mon) 23:15

To Akira 様

こんばんは。以前、関連記事の上に下記の画像を表示したい旨をお願いしたのですが
関連記事がない場合は表示されないようです。関連記事がなくても表示は可能なのでしょうか?
宜しくお願い致します。

<!--permanent_area-->
<script>
$(function() {
$('<div id="ranking-banners" style="margin: 20px auto;"><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="おもちゃ・玩具 人気ブログランキングへ"><img style="max-width: initial; height: 31px;" src="//image.with2.net/img/banner/c/banner_1/br_c_1460_1.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="おもちゃ・玩具 ブログ村ランキングへ"><img style="max-width: initial; height: 31px;" src="//collection.blogmura.com/toy/img/toy88_31.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="FC2ブログランキングへ"><img style="max-width: initial; height: 31px;" src="//blogranking.fc2.com/ranking_banner/b_02.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="ブログの殿堂ランキングへ"><img style="max-width: initial; height: 31px;" src="//img.dendou.jp/b_b_rd.gif" alt="代替テキスト"></a></div><div style="display: inline-block; padding: 0 10px 10px 0;"><a href="URL" target="_blank" title="ブログラムランキングへ"><img style="max-width: initial; height: 31px;" src="//widget.blogram.jp/images/bgButton1_pin.gif" alt="代替テキスト"></a></div></div>').insertBefore('.relate_dl');
});
</script>
<!--/permanent_area-->

Akira

2017/03/14 (Tue) 02:14

To よーきーさん

あー。なるほど。
よーきーさん、記事を消してしまわれたんですね (´・ω・`)
そうですよね。表示する設定にしていても記事がなければ出てきませんものね ^^;
ちょっと私の考えが浅かったです。申し訳ない。

関連記事は今回のように表示されないこともありますので、別の基準を決めましょう。
Twitter/ FB関連のボタンは「表示する」ことで決定で大丈夫でしょうか。
これらのボタンを基準に配置しようと思います。
デフォルトの順序は

SNSボタン関連

関連記事

ですので、SNSボタンの「上」にするのか「下」にするのかを決めてください。

● 上にする場合
ソースコード終わりの方の

.insertBefore('.relate_dl')



.insertBefore('.fc2_footer')

に変更。
● 下にする場合は

.insertAfter('.fc2_footer')

にしてください。
関連記事が表示されない今回の場合と同じで、仮によーきーさんがSNSボタン関連を非表示設定に切り替えた場合にはランキングバナーも表示されなくなります。
一度お試しください。
よろしくお願いします。

よーきー

2017/03/14 (Tue) 07:23

To Akira 様

ありがとうございます。無事表示する事ができました。
今回はボタンの下に表示する事に。
ちなみに今回、レビュー記事をアップして気づいたのですが
記事の最後に「Tag:」というのが表示されますが
これを表示しないとプラグインのタグクラウドに反映しないもの
なのでしょうか。テンプレとあまり関係ないかもしれませんが
もしご存じでしたら教えて頂けると幸いデス。

Akira

2017/03/14 (Tue) 17:45

To よーきーさん

こんにちは (●'0'●)/

ランキングバナーの件は修正できたようで良かったです。

> 記事の最後に「Tag:」というのが表示されますが
これを表示しないとプラグインのタグクラウドに反映しないもの
なのでしょうか。〜

これが「記事下のタグリストを削除したらプラグインのタグも非表示になるのか。」
という意味でしたらNOです。
よーきーさんが記事を書かれる際にタグ付けをしたのであれば、テンプレートはテンプレートで、プラグインはプラグインで別々にその内容を抽出しており、両者間に関連はありません。
Basementでは記事下のタグはそのブログ内のタグページに飛ぶのではなく、FC2ブログ内で同じタグがついている記事の一覧ページに飛びますので、外部に向けてのタグ表示です。
というのをお伝えした上で、記事下タグを削除される場合には

<!--topentry_tag--> から <!--/topentry_tag--> までの3行を削除してください。


======= 別件

● 画像のはみ出しについて

最新記事の中ほどでtableを利用した画像配置をされていますよね。
tableというのは具体的な数値(絶対数値)を与えてしまうと記事幅から確実にはみ出します。
tableのセルは画面幅に合わせて下へ繰り越す、といったことはしてくれません。
記事の幅・画面幅が狭かろうとなんだろうと強引に横並びになります。
Basementはレスポンシブテンプレなので最小画面では現行機種最小で320pxまで画面が小さくなります。
tableのwidthが960xもあれば当然ながら画面超過です。
メインコンテンツの最大幅を拡げたところでレスポンシブですからブラウザ幅・デバイス画面幅に応じてコンテンツ幅は縮小されます。
また、モバイル版テンプレートに表示を切り替えてもこれは同じことです。
画面超過は閲覧者にとって苦痛ですので、できれば修正された方が良いと思います。
そして例えモバイル専用版を用意しようと、レスポンシブテンプレートを採用しようと、コンテンツの画面幅超過はGoogleから「モバイルフレンドリー」ではないという判断をされ、検索順位に影響します。
これは強制ではありませんので、実際にスマホの状態をご確認頂きまして、あとの判断はお任せします。
よろしくお願いします。

よーきー

2017/03/14 (Tue) 21:25

To Akira 様

ご回答、ありがとうございました。
僕としては記事内のタグから他の記事へ飛ぶ必要はないので
<!--topentry_tag-->の部分は削除しました。

それからtableについて色々と教えて頂いてありがとうございます。
実は今日、スマホで見てた時にテーブル部分だけ画像が巨大になっていて
アレ?っと思っていたのです。実装として正しいかどうか良くわかりませんが
tableのwidth=の部分を削除した所、スマホで見ても巨大な画像にはなりませんでした。
ただ、1段目に画像が横並びで2枚、2段目に画像が1枚の構成なのですが
スマホで見ると2段目の画像が1段目の横幅と同じになっていました。

あとpcで見るのとスマホで見るのではtable内のテキストの見え方が
若干変化していたのが気になりました。これは改行コードのせいなのかなぁと
勝手に想像しております。

Akira

2017/03/14 (Tue) 22:06

To よーきーさん

申し上げにくいのですが、現時点でモバイル閲覧に於けるよーきーさんのブログはとても残念なことになっています (´・ω・`)

ちょっとtableの話しは置いといて。

お使いの公式のスマホテンプレートですけどもね。
みなさんいつ気づくんだろう、ってゆーか、誰も気にならないのかしら(汗)
ってずっと思ってるんですけど(笑)
みなさん自分で対策されてるからかな?

そちらの公式テンプレ、本文が収まる場所の名前は .entry_body です。
追記が収まる場所の名前は .entry_more です。
で、.entry_body の方には

img {
max-width: 100%;
]

という指定がしてあるはずです。
この意味は「画像の横幅は最大でも記事幅と同じ。それ以上にはならない」
これははみ出させない対策です。
ところが追記が収まる .entry_more の方はこの指定が無いんです。
それでどうなるかというと、はみ出しますわね。当たり前に (´・ω・`)
スマホからスマホ版に切り替えて見てみると、追記以降の画像は全てはみ出してます。
これは公式のCSSがアカンわなー (´・ω・`)
公式のコーダーさん、たぶん書くの忘れたんだと思う(笑)

.entry_more img {
max-width: 100%;
}

を追加するとはみ出なくなります。
公式テンプレは私のテンプレとは無関係ですので、今回限りの情報ということでお願いします(笑)
よーきーさんはレスポンシブで表示させたいんですかね?
それともスマホ版が別途必要とお考えなんでしょうか。
前者であれば個人設定から「スマホ版非表示」の設定をお願いします。
前者の考えの場合、せっかくのレスポンシブの利点が失われてしまいます(SEO的に)ので、要設定です。

=======

テキストの件、画像サイズの件は改行のせいではないです。
tableのせいです (´・ω・`)
cell(td)の垂直位置合わせが vertical-align: inherit; ですので、上位要素を継承してmiddle合わせです。
そもそもtableは段組みの為に使うものではありません。
ランキングバナーと同じで、横並びにされるならば float あるいは画像はもとよりinline要素ですので、

<img src="一枚目アドレス" style="width: 50%;"><img src="二枚目アドレス" style="width: 50%;">

と記述して横に並べるのが良いと思います。
こうしておくとスマホでも横並びになります。
その代わりめちゃくちゃちっさいですけど (´・ω・`)
それが嫌なら min-width を指定されるとか。

<img src="一枚目アドレス" style="width: 50%; min-width: 250px;"><img src="二枚目アドレス" style="width: 50%; min-width: 250px;">

例えばの話しです。
このあたりの扱いは難しいので記事にしようと思って今書いてる最中です。

アマネ

2017/03/30 (Thu) 20:13

プラグイン3について

お返事のご対応いただける件ではない場合は申し訳ありません。
プラグイン3によってトップページや各個別記事の上部に「フリーエリア」設けたく、
自分で色々調べてチャンレンジしたのですが上手くできません。
どのようにすればよいかご教示いただけると幸いです。

-

2017/03/30 (Thu) 20:18

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/03/30 (Thu) 23:46

To アマネさん

こんばんは ( ゚Д゚)ノ

記事に記しております通り、トップページなどのレイアウト変更のお手伝いはお断りしております。
プラグイン3をメインコンテンツ上に移動させますとCSSを改めて追加する必要が生じます。
(サイドメニューは縦長ですがヘッダー下は横長です)
htmlについては移動させる程度ですのでさほど難しくはありませんが、CSSの方が大変だと思います。
レスポンシブデザインですし (´・ω・`)
(副コンテンツがメインコンテンツよりもhtml前方にあるのもあまりよろしくない、とお伝えしておきます)

最初からそういったタイプのテンプレートを選ばれる方が良いと思いますよ ^^;
お役に立てず申し訳ありません。
ご理解頂ければ幸いです。

よーきー

2017/04/04 (Tue) 01:58

サイドバーの幅変更

こんばんは。
サイドバーの幅を広めに変更したいのですが可能でしょうか?

Akira

2017/04/04 (Tue) 05:00

To よーきーさん

申し訳ないんですが、一つづつ済ませてからご質問願えませんでしょうか。

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

よーきー

2017/04/04 (Tue) 07:40

よーきー>>keitai70様 

すみません、前回のご報告をするのをすっかり忘れておりました。ごめんなさい。m(_ _)m

結局、色々思案したのですがあまり難易度の高い事はせずに以下のように決めました。

① tableはFC2の記事を書くのに楽なので使用する。
② ただし多用はしない。
③ 使用しても画像の拡大を防ぐため必ず偶数カラムとする。

以上になります。

Akira

2017/04/04 (Tue) 08:39

To よーきーさん

とりあえず keitai70様 というのがどなたのことなのかわかりませんが、こちらはスルーで良いんですかね。

> サイドバーの幅を広めに変更したい

① 左サイドメニューの幅変更
Ctrl+F(Windows)/ Command+F(Mac)キー検索

#central-contents

margin-left: 数値px;

検索(#central-contentsのすぐ下にあります)

#primary-column

margin-right: -数値px;
width: 数値px;

赤字の数値を全て同じにします。

=====

② 右サイドメニューの幅変更
検索

#whole-main

margin-right : -数値px;

検索(#whole-mainのすぐ下)

#whole-central-contents

margin-right: 数値px;

検索

#secondary-column

width: 数値px;

こちらも赤字を同じ数値で揃えます。

=====

左右のサイドメニューを拡げますと必然的にメインの幅が縮小されます。
デフォルトのブレイクポイント(レイアウト切り替えのポイント)では見た目の体裁が取れないと思います。

③ ブレイクポイント変更
検索

@media screen and (max-width: 1050px)

CSSソース内に3箇所あります。
3箇所全てが対象です。
赤字部分の数字を大きく変更してください。
また、早い段階でシングルレイアウトに切り替わりますので、逆にヘン、と感じることもあるかと思います。
そのあたりの調整はご自身でお願いします。

ブレイクポイントに関するまとめ
● メイン幅がかなり小さくなっても構わない場合にはソース変更なし(触らない)
● メイン幅が小さくなりすぎだと感じる場合はブレイクポイントを調整。その場合にはブラウザ幅に十分な大きさがあってもシングルになる。

レスポンシブ3カラムの体裁は難しいですよ。
実際に作業されるとよくわかると思います。
以上です。
よろしくお願いします。

よーきー

2017/04/05 (Wed) 01:03

To Akira 様

こんばんは。
「keitai70様」は・・・・・・オートコンプリートの罠にまんまとはまりました、すみません。

ご教授頂いた通りにやってみたのですがどうもうまくいかず・・・・

それでもう一度、何がしたいのか具体的にお伝えします。

① 両サイドメニューのwidthを350pxにしたい
② 真ん中のエリアの幅はこれまで通りで縮小しない

です。

今回、ご教授通りに設定値を変えてやってみたのですが以下の状況になりました。

① 左サイドメニューのwidthを350pxにすると真ん中のエリアの真下に出現してしまう。
② 右サイドメニューのwidthを350pxにするときちんと幅が広がり位置もずれない。
③ @media screen and (max-width: 1050px) の値をじょじょに増やしていったのですが
  真ん中のエリアの幅は変わらず2000を指定した段階で右サイドバーも真ん中のエリアの真下に出現。

といった具合です。

とりあえず、今は全て元の値に戻しました。

解決方法をご教授頂ければ幸いでございます。m(_ _)m 宜しくお願い致します。

Akira

2017/04/05 (Wed) 04:53

To よーきーさん

> 真ん中のエリアの幅はこれまで通りで縮小しない〜

それは無理ですね。レスポンシブデザインですから (´・ω・`)
それに元々今までも縮小されていました。

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

上記ページのスクリーンショットをご覧頂きたいのですが、デバイス幅に合わせてサイドメニューが下に移動してますよね。
これがレスポンシブデザインですよ (´・ω・`)
デバイスが違えば画面幅が違うわけですから、カラムが常に同じ大きさならば収まるはずがありません。
これは物理的な問題です。
まずレスポンシブデザインがなんなのか、というところをおわかり頂けていないように思います。

レスポンシブを使いたい方
・ SEOを重視している
・ html,CSSの管理を楽にしたい
・ スマートフォンやタブレットでも同じデザインを使いたい

これらに該当しない場合は固定幅テンプレをお選びになることをおすすめします。
よーきーさんの場合は両サイドメニューだけで既に700pxですよね。
一般的なパソコン画面は1024〜1366pxあたりです。
ブラウザ幅いっぱいを使い切ってしまうと非常に見づらいページになってしまうので、許容幅はよく使っても90%程度。
すると1024の画面では全体幅で950pxがベストです。
メインコンテンツは250pxしか取れなくなります。
1300以下を捨てるつもりであれば、それでも1100px程度。
メインコンテンツは400px。

何が言いたいかというと、固定幅にしろレスポンシブにしろ、3カラムでサイドメニュー350pxというのは無茶です(笑)

・レスポンシブの場合
メインコンテンツはブラウザ幅が縮小されればそれに応じて縮小されます。
メインコンテンツが狭くなりすぎないように、一定の横幅を下回ったらサイドメニューをメインコンテンツの下に移動させます。

・固定幅の場合
メイン、サイド共に常に一定。
パソコンのサイズによっては見切れが発生(横スクロールバー)
スマートフォンでの利用不可(スマホ版別途設定の必要あり)
タブレットでは全体の縮尺表示になります。
全体幅が1600px(よーきーさんの希望だとこのぐらい必要です)ならタブレットで768pxまで縮尺。

まずレスポンシブと固定幅(ソリッドデザイン)の特性をお考え頂きまして、テンプレート選びの再考をされてはいかがでしょうか。
よーきーさんの場合にはスマホ版を設定されていますし、メインコンテンツの幅を縮小したくないということですので固定幅で十分のように思います。
(いずれにしろ横スクロールバーがすぐにでてしまうようでは良くないですが。)
固定幅であれば比較的構造が単純(シンプル)ですので、カスタマイズの難易度はレスポンシブのそれと比べて半分程度になります。

たぶんよーきーさん、作業したり閲覧したりの時に常にブラウザの幅が同じだと思うんです。
今デフォルトの状態に戻されたということなので、マウスで少しづつブラウザの横幅を狭くしていってください。
そしてカラムの大きさや位置がどうなるかの確認をしてください。
そしてそれがレスポンシブデザインです。

よーきー

2017/04/05 (Wed) 22:00

To Akira 様

こんばんは。

リンク先の記事を読ませて頂きました。

十分に理解ができた訳ではありませんがレシポンシブとは何なのかなんとなーく分かった気がします。


一つだけ訂正があります。

> 真ん中のエリアの幅はこれまで通りで縮小しない

というのは表現が違いました。

正確には

「画面サイズが変更されてもメインコンテンツの全体に対する幅%が変わらない」

です。

例えば両サイドバーが25%だとするとメインコンテンツは50%。

この比率が画面を縮小されても変わらないという事です。

実際にブラウザを縮小させて実験してみましたがサイドバーがメインコンテンツの下へ移動して

メインコンテンツの画像は縮小しましたが幅%には変化がないようでした。

つまり今でもそれは実現できている訳ですね。


それから

一般的な画面が1024pxで余裕を持って950pxで全体の幅を設定するとして

今回の依頼で両サイドバーの幅を350pxにするとメインコンテンツはたしかに450pxに

なってしまい現在のコンテンツスタイルを維持できなくなります。

例えば横幅が広めの画像のUPができなくなってしまいます。


実を言えばサイドバーを広げる事は絶対しなくてはならない事ではなくて

「簡単にできたらやりたいな~」という軽い感じで考えていたので

結論を言えば

「簡単にできたらやりたいな~」 < レシポンシブによるメリット

と考えるようになりました。


きっと技術的には可能なのでしょうけれど

それに伴って現在のコンテンツスタイルを維持できなくなるのは避けたいので

現状維持でやっていこうと思います。

色々とご教授頂きありがとうございました。m(_ _)m

Akira

2017/04/06 (Thu) 11:19

To よーきーさん

こんにちは (●'0'●)/

そうですね。サイドメニューを広く取りたい方は2カラム構成かシングルカラムにされた方が良いと思います。
サイドメニューは副コンテンツであって主ではありませんので、主が副に圧迫されるというのはよろしくないですね (´・ω・`)
レイアウトって見た目のことだけじゃなく用途もよく考えて選ばないと、です。
そしてデバイスの幅は閲覧者によって大きく異るんだ、という点も。

ご納得頂けたのであれば幸いです。
ありがとうございます

よーきー

2017/04/13 (Thu) 03:09

To Akira 様

こんばんは。

サイトを立ち上げて1か月が経過しました。

旧サイトからの連携アクセスの恩恵もあってそこそこのアクセス数になっていますが

もう少しアクセス数を増やしたいと思っています。

そこで色々調べてみたのですが「はてなブックマーク」なるものが有効だという情報を得ました。

そこで「はてなブックマーク」のボタンを個別記事の拍手ボタンの左に配置したいのですが

ソースのどこにコードを貼り付ければ良いでしょうか?

今回もご教授の程、宜しくお願い致します。m(_ _)m

Akira

2017/04/13 (Thu) 13:17

To よーきーさん

こんにちは (o'ω')ノ

> 「はてなブックマーク」のボタンを個別記事の拍手ボタンの左に配置したい

結論から言うと、できません (´・ω・`)
以前お伝えしたと思うのですが、ブログ個人設定で出力する「拍手を含むSNSボタン」や「関連記事リスト」は予め表示位置が決められており、ユーザーが自由に変更することはできません。
拍手については他SNSボタンと同じアウトラインで囲まれます。

自由に配置をしたい場合にはブログ個人設定での出力は利用せず、コードを取得してテンプレートソースに記載する必要があります。
拍手は「FC2拍手」というプラグインがあると思いますので、ブログ個人設定の拍手は非表示にしてそちらに差し替え、はてなブックマークのスクリプトと一緒に掲載する方法をお取りください。
またその際には今度はブログ個人設定のSNSボタンと並べることができなくなります。
そしてSNSボタンについては以前のカスタマイズでランキングバナーを関連記事リストの上に表示させるための基軸になっていますので移動や非表示不可です。
(非表示にするとランキングバナーも表示されなくなります)
これらはFC2ブログの仕様ですので私ではどうにもできません。
また、はてなブックマークの仕様については私のテンプレートとは関連がありませんので、ご自身でお調べになってくださいね。

まとめ
・拍手と並べたいのならばブログ設定の拍手は非表示、FC2拍手を利用
= SNSボタンとは並べられない

よろしくお願いします。

よーきー

2017/04/14 (Fri) 00:53

To Akira 様

こんばんは (*´▽`*)

特に拍手ボタンにこだわった訳ではないのです。

ただ見た目的に他のSNSボタンと並んでた方が良いかなと思った程度で・・・。

なのでSNSボタンの上でも良いのです。はてなブックマークのボタンが配置できれば。


いつも、やりたい事をきちんと伝えきれない僕が悪いのですが

やりたい事というのは

「個別記事の一番最後(つまりSNSボタンの直上)にはてなブックマークのボタンを配置できるように

 はてなブックマークのソースをテンプレに貼り付けたい、その場所を知りたい」

です。


んで、結局どうしたかというと

はてなブックマークのソースを以下のように使用しました。

① プラグインのフリーフォームに貼り付けて左サイドバーの一番上に配置
  (この場合のURLはサイトURL、タイトルは"ほびらぼん")
② 個別記事の最後に貼り付け
  (この場合のURLは<%topentry_link>、タイトルは<%topentry_title>)

これだと②の場合、記事を作成するたびにソース貼り付け作業が発生しますが

その程度の手間は仕方ないかなと。


実はこれをやる前に以前、教えて頂いた

<!--permanent_area-->
<script>
$(function() {
$('<div id="ranking-banners" style="margin: 20px auto;">

</div>').insertAfter('.fc2_footer');
});
</script>
<!--/permanent_area-->

の中にソース貼り付ければ見た目上はSNSボタンの直下にはてなブックマークボタンが配置されるだろうと

考えてやってみたのですがダメでした。

よくは分かりせんがはてなブックマークのソースの中に

<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

というのがあってこれが悪さをしているっぽいですね。

というか、<script>の中に<script>を入れるのがNGなんでしょうか。(´・ω・`) ウーン


それからFC2拍手についてですがサービスを追加してコードの取得はできたものの

ヘルプでは「テンプレのお好きな所に貼り付けてください」とだけ書かれていて

どこに貼り付ければ記事の最後に配置されるのか分からないから悩んでいる訳で

結局、プラグインのフリーエリアとかに貼り付けるしかないのです。

それだと僕のやりたい事は実現できないので諦めました。


といった次第デス。

以上、ご報告でした。

今回も色々とご教授、ありがとうございました。m(_ _)m

Akira

2017/04/14 (Fri) 01:09

To よーきーさん

その「記事の最後に貼り付ける」
こと自体が「できない」んです (´・ω・`)
記事の最後にしたい場合にはテンプレートへのコード掲載ではなく記事を書く度に一番最後に毎回貼り付けます。

本文

追記

SNSボタン

関連記事リスト

テンプレートで貼り付けられるのはここ

この順番です。
たとえテンプレートの追記に係る内容の直後に書いたとしてもFC2の仕様でボタンと関連 記事リストがその間に割り込みます。
ブログ個人設定でボタンや関連記事リストを表示させている時点でテンプレートでの位置操作は不可能なんです。

そういった事情があるのでブログ個人設定には「テンプレート変数のみ」という選択肢があるわけです。
つまりボタン関連のhtml, JSを全てFC2の出力に頼らず自分で書きます。
関連記事リストも同様。
テンプレート変数のみにすれば配置は自由になりますが、ソースは自分で書かなければいけません。
よーきーさんのご希望を叶えるにはテンプレート変数のみを選択することです。
妥協して簡単な個人設定を選ぶか、妥協を許さずソースを自分で組むかのいずれかです。

なかなか難しいところかと思いますが、これはもう仕方がない(笑)

それから、ランキングバナー貼り付け等、PCテンプレートのみ行われているように思いますが、スマホ版を設定されているのであればそちらにも同じ作業が必要です。
私のPCテンプレートとお使いのスマホ版テンプレートの間に関連性も連動性もありませんので、ランキングやシェアを重要視されるのであればスマホ版にも設置をしないと、です。
スマホ版を設定している時点でサイト評価は分散しますので、せめて必要なものは設置を怠らないようにされると良いですね。
今後はモバイルファーストインデックスの施策が待っていますので、サイトの第一評価対象はスマホ版になります。
(完全レスポンシブの場合はPC版とスマホ版が等価、というより同一)
PC版とスマホ版の両者を抱えるのならば、双方の内容がほぼ同等になるような管理が必要です。

-

2017/05/12 (Fri) 22:35

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/05/13 (Sat) 00:42

To Basementの件 内緒さん

ありがとうございます

> ①記事本文の余白を増やしたい〜

これは「どこの」余白でしょうか。
左右ですか?上下?
お返事待ちにしますね。

> ②記事下のprev~Nextのページ送りボタンを消すことは可能でしょうか〜

記事下、ということですが、その前に個別記事(パーマリンク)を辿るためのリンクがありません。
なので閲覧者は個別記事に飛べませんが大丈夫なんでしょうか。
この点はお任せしますが、ページ送りについては既に削除済みのように思います。

=====

余白の件はお返事待ちにしますね。
レスポンシブデザインですのでスマホでもそのままご利用頂けますが、現状ではスマホ版が別途設定されています。
レスポンシブでお使いの場合、記事の左右余白を大きくされますとスマホでの可読性は下がってしまうかもしれません。
(そもそも画面横幅が狭い)
その点もお考え併せの上でお返事をお願いします。
(スマホ版を利用する、ということであればそれでもOKです)

-

2017/05/13 (Sat) 19:47

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/05/13 (Sat) 20:25

To Basementの件 内緒さん②

お返事ありがとうございます (o'ω')ノ

> 左右を少し増やしたい

ということで良かったですかね。

----- ①記事だけの場合

Ctrl+F(Windows)/ Command+F(Mac)キー検索。

.contents {

2箇所あります。
1つ目がPC(タブレット含む)での余白。
2つ目がスマホでの余白です。

1つ目の

padding: 20px 30px;

の赤字の意味は「上下」余白が20px、「左右」余白が30px
という意味ですので、30の方を大きい数字に変更して頂くことで余白が拡がります。

2つ目の

padding: 20px;

の意味は「上下左右」余白が20pxという意味です。
ここでスマホとの振り分けをしても良いと思います。

例) 上下余白20px(デフォルトのまま)、左右余白30px

padding: 20px 左右px;

こういう形です。

padding: 上px 右px 下px 左px;
あるいは
padding: 上下px 左右px;
あるいは
padding: 上px 左右px 下px;
あるいは
padding: 上下左右px;

これが指定のルールですので、ご希望に沿う形で修正してください。

------ ②全体の場合

上記の修正ですと、記事のタイトルやフッター(SNSボタンなど)は変わりません。
今の見た目で全体像を縮小する(余白増やし)には

.main-body

1箇所あります。
こちらの

padding: 10px 0;

赤字の0をご希望の数値(左右余白)に変更(pxの単位必須です)。
内緒さんのご希望は②の方かもしれないな (´・ω・`) と思う。
たぶん(笑)


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

-

2017/05/13 (Sat) 23:01

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/05/14 (Sun) 20:09

To Basementの件 内緒さん③

> 試しに極端な数値「500」などを入力しても変わらず〜

単位はお付けになられましたでしょうか。
単位なしは値がゼロの時のみ許可されてます。

X
padding: 0 50;

padding: 0 50px;

=====

そのままお使いになる、ということなので終了でよろしいでしょうか。
嬉しいお言葉もありがとうございます。
励みになりますー
作業お疲れ様でした

-

2017/05/15 (Mon) 14:54

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/05/15 (Mon) 22:05

To Basement完了のご報告 内緒さん

単位でしたか。
私が例えを一つ書いておけば良かったですね。
気が利かず申し訳ない ( ̄∀ ̄;)

出来たようで安心しました。
お疲れ様でした

-

2017/10/06 (Fri) 17:21

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/10/06 (Fri) 17:41

To Basementカスタマイズの件 内緒さん

ありがとうございます

------

> 背景にパターンを敷き詰めることは可能でしょうか〜

技術的には可能ですが、確認したい点がいくつかあります。
① スクロールした際に背景画像が一緒に付いてくる or 固定されて動かない、どちらが希望か。
② 継ぎ目のないシームレスの画像を製作可能か。
・現在の画像を繰り返し表示すると継ぎ目がかなり目立ちます。
・現在の画像を繰り返さずに一枚画として全面敷きにすると解像度が追いつきません。

上記2点についてそれぞれ対応が異なりますので、方針をお決め頂いてお伝えください。
** 画像を製作する場合 **
・ できればシームレスで準備する
・ シームレス化が難しい場合には長辺2000px程度のものを準備
・ 背景を固定する場合にはシームレスの繰り返し表示の方がベターです。一枚画固定はスマホ閲覧スクロール時に若干嫌な感じになります(ステータスバーの状態によって拡大・縮小を繰り返す)
・ シームレスを作成する際には実際の表示サイズよりも大きめ(1.5倍〜2倍程度)で準備

--------

> トップページに表示されるページ送りの表示を消すことは可能でしょうか〜

可能ですが、検索結果のインデックスには影響すると思います。
(リンクが無いとクローラーが各ページを辿れません)
そこをご理解頂いた上で
<!-- 汎用ページナビ -->
でCtrl+F(Windows)/ Command+F(Mac)キー検索。
<!-- 汎用ページナビ -->
から
<!-- 汎用ページナビここまで -->
までを削除し、同じ位置に以下を追加。

<!--category_area-->
<div class="pager">
<div class="pagenation"></div>
</div>
<!--/category_area-->
<!--date_area-->
<div class="pager">
<div class="pagenation"></div>
</div>
<!--/date_area-->
<!--search_area-->
<div class="pager">
<div class="pagenation"></div>
</div>
<!--/search_area-->
<!--tag_area-->
<div class="pager">
<div class="pagenation"></div>
</div>
<!--/tag_area-->


以上です。背景の件についてはお返事待ちで。
よろしくお願いします。

-

2017/10/06 (Fri) 18:07

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/10/06 (Fri) 20:56

To Basementカスタマイズの件 内緒さん②

シームレス画像あり、固定背景
ということでよろしいでしょうか。


まず
#banner
に設定している
background: 内容;
の一行を削除してください。
この部位が現在指定しているヘッダー画像です。


layout
で検索されますと、近接に

body {
内容
}


が出てきます。
その直下に以下を追加。

body:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background: url(画像アドレス) left top /数値px auto;
}


赤字の部分ですが、元画像の横幅の0.8〜0.5倍の数値をpxで入れてください。
例えば横実寸600pxならば 400px といった具体。大体の数字で良いです。

このままですと最終記事の終わり(下辺)がブツっと切れてしまうというか、突然終わってしまいますので、それが気になる場合には
#whole-central-contents
を検索し、
margin-right: 270px;
の直下に

padding-bottom: 60px;

を追加。
これは任意です。赤字の数値は変更可。

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

---------

ごめんなさい。追加です。
固定背景にz-indexのネガティブ値(マイナス)を指定していますので、IE11ではスクロールの度にガクガク画面が震えます(IEのグリッチです)
この対処は

<script>
if (/Trident\/7\.0|Edge\/\d+\.\d+/.test(navigator.userAgent)) {
$('body').on('mousewheel', function () {
event.preventDefault();
var wd = event.wheelDelta;
var csp = window.pageYOffset;
window.scrollTo(0, csp - wd);
});
}
</script>


上記内容を
</body>
の直前に記載してください。
<body>ではなく終了タグの</body>ですのでhtmlの最後方にあります。

-

2017/10/06 (Fri) 22:58

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2017/10/06 (Fri) 23:08

To Basementカスタマイズの件 内緒さん③

ブログタイトル背景は別で必要ということなんでしょうか。
でしたら①で削除した「この部位が現在指定しているヘッダー画像です」の部位を元に戻してください。
よろしくお願いします。

-

2017/10/06 (Fri) 23:39

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

あやめ

2017/10/08 (Sun) 13:12

はじめまして!

素敵なテンプレートをありがとうございます! 使わせて頂いています!
質問なのですが、トップページにサムネイル画像が表示されません; こちらのブログでも表示されないときの対応方を読んだのですが、上手く表示されません…。 アイキャッチも使ってみましたが何も変わらずorz
vanillaice様の他のテンプレートだと表示されているのですが、何が原因でしょうか…。

あやめ

2017/10/08 (Sun) 13:13

http://alicetiar.blog108.fc2.com/ ブログはこちらです;

Akira

2017/10/08 (Sun) 15:12

To Basementカスタマイズの件 内緒さん(完了のご報告)

お返事遅くなりました (*_ _)

お出来になったということで、お疲れ様でした。
こちらこそありがとうございます

Akira

2017/10/08 (Sun) 15:20

To あやめさん

ありがとうございます。
ご利用のテンプレートは「Pinboard」で合ってますでしょうか。
こちらのページは別のテンプレート専用ですので、Pinboardのページへ移動お願いします。
お返事もそちらで致します。

https://vanillaice000.blog.fc2.com/blog-entry-577.html#comment4310

-

2018/02/04 (Sun) 19:22

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2018/02/04 (Sun) 19:59
vanillaice (Akira)

To Basementカテゴリ・タグページの件 内緒さん

こんばんは。
2案についてはhtml内容の追加が必要ですので自力でお願いします。

-------
<!-- カテゴリここから -->
から
<!-- カテゴリここまで -->
を削除。

<!-- タグここから -->
から
<!-- タグここまで -->
を削除。

<!-- トップページ・個別記事ここから -->
を目印に直下にある

<!--not_edit_area--><!--not_search_area--><!--not_titlelist_area--><!--not_category_area--><!--not_date_area--><!--not_tag_area-->

赤字部位を削除。

<!-- トップページ・個別記事ここまで -->
を目印に直前にある

<!--/not_tag_area--><!--/not_date_area--><!--/not_category_area--><!--/not_titlelist_area--><!--/not_search_area--><!--/not_edit_area-->

赤字部位を削除。
以上です。よろしくお願いします。

別件ですがナビゲーション内容が増えていますので折りたたみポイントを修正した方が良いと思います(途中で右側のSNSナビが機能しなくなるため)
本記事内容の
ナビゲーションのカスタマイズ
の章を読まれまして対策をお願いします。
また、バージョンが古いので最新へのアップデート(再DL)もご検討ください。

参考記事: Basement大規模メンテナンスのお知らせ
https://vanillaice000.blog.fc2.com/blog-entry-644.html

-

2018/02/04 (Sun) 21:32

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2018/02/04 (Sun) 21:46
vanillaice (Akira)

To Basementナビの件 内緒さん ②

大変失礼しました。
メンテナンス時に私がカスタマイズのガイダンスを削除しておりました ( ̄∀ ̄;)
公式配布のものはコメントを書き足しました。
記事内容も書き直しました。ごめんなさい ( ̄∀ ̄;)

内緒さんは既に再DLを済ませて頂きましたので、htmlに関しては今ここでご自身で記して頂いている通り
767px
の部分を適切な数値に変更してください。
今拝見しましたら950pxに指定されてますね。その数値で良いと思います。
CSSの方も正しく変更してありますのでナビゲーションのカスタマイズは現状でOKです。

お手数おかけしました。お疲れ様でした

-

2018/02/04 (Sun) 22:01

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2018/02/05 (Mon) 01:01
vanillaice (Akira)

To Basementナビの件 内緒さん(完了のご報告)

コメントが消失していることに気づきませんでしたので逆にありがとうございます(笑)

お疲れ様でした

-

2018/11/29 (Thu) 14:18

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-

2019/06/24 (Mon) 22:36

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2019/06/24 (Mon) 22:44
vanillaice (Akira)

To Basement 画像表示の件 内緒さん

こんばんは。

> スマホでこのテンプレートを閲覧時に画像表示が小さく見えてしまい〜

画像は最大でも記事の幅と同等(100%)になり、記事からはみ出させるわけにはいかないんですが、要は文字や画像周りの余白が邪魔ということなんでしょうか。
記事のボーダー内側の余白を無くせば多少は記事の幅が広がります。

#primary
で検索するとスタイルシート内に2箇所あります。2つ目の方に
padding: 10px;
という行がありますので削除。左右併せて20px大きくなります。
また、記事幅ではなく画面の横幅いっぱいを使いたい時には以下のような方法もあります。

参考記事: アメーバブログの【スマホでは画像は画面横いっぱい、テキストは余白あり】をFC2でやってみよう
https://vanillaice000.blog.fc2.com/blog-entry-596.html

また、今回は「スマホで」というお問い合わせですが、大きな画像を掲載するならばBasementのような3カラムではなく2カラムをおすすめします。(いずれにしろスマホでは1カラムになるのでパソコンの話です)
現在3カラムで左側にプラグインが無い状態で場所だけ取っていますのでもったいないかもしれませんね。

-

2019/06/26 (Wed) 09:50

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2019/06/27 (Thu) 17:24
vanillaice (Akira)

To Basement 画像表示の件 内緒さん(終了のご報告)

こんにちは。

テンプレートデザインによって記事の幅が結構違います。それは文字の左右に設ける「余白の数値」が関係することもあり、Basementはその余白が比較的多めなんですね。
そのあたりを踏まえて納得できる形に整えてくださいね。
お疲れ様です :)

-

2019/06/28 (Fri) 00:10

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2019/06/29 (Sat) 19:44
vanillaice (Akira)

To Basementの件 内緒さん

こんばんは。

> スマホ画面右側に↑menu↓と表記されているナビゲーションアイコンを消す〜

ページ内スクロールのことですよね。削除するとページ内の主要位置への移動が困難になるのと、スムーススクロールも同時に機能しなくなりますので事前にご了承くださいね。

<div id="page-scroll">
で検索するとhtml内に1箇所ありますのでそこを目印にして頂いて、あとはスクリーンショットに従って削除してください。

https://file.blog.fc2.com/vanillaice000/capture4/capdelete----1200.png

よろしくお願いします。

-

2019/07/03 (Wed) 20:22

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2019/07/03 (Wed) 22:38
vanillaice (Akira)

To Basementの件 内緒さん②

こんばんは。

> 色々問題が起きる〜

具体的な問題が何を指すのかが不明なので的確なお返事はできませんが、画像をスマホで画面幅いっぱいにするCSSをご利用ですよね。
旧投稿画面の「改行の扱い」を「自動」に設定している方は以下のような書き方はNGです。

× この書き方は「改行の扱い」を「HTMLタグのみ」に指定している場合のみ
<div class="exImage">
<div class="exImage-item">
<img src="" alt="" style="width: パソコンでの横幅px;">
</div>
</div>


<div class="exImage"><div class="exImage-item"><img src="" alt="" style="width: パソコンでの横幅px;"></div></div>

こうしてソース間の改行やスペースは取り除くようにしください。でないとレイアウトが崩れます。
また、srcなしのimgがいくつか入っているようなのでこれも崩れの原因になります。
これはFC2ブログエディターの仕様なので一度ご確認くださいね。

アダルトブログ管理人

2019/09/01 (Sun) 11:58

アダルトブログへの利用は可でしょうか

アダルトサイト用に3カラムのテンプレートを探しておりますが、
シンプルでカッコいいものがなかなかありません。

Akira様のBasementを発見して
とても素敵だなと思っているのですが
アダルトサイトに利用してもよろしいものでしょうか。

何卒よろしくお願い申し上げます。

Akira

2019/09/01 (Sun) 14:01
vanillaice (Akira)

To アダルトブログ管理人さん

こんにちは。

はい。どうぞご利用ください。
アダルトジャンルに登録したアカウントでログインした状態で配付ページを開いた時、ダウンロードリストに掲載されているテンプレートは全て利用可能です。
テンプレート申請時には「アダルトジャンル・アフィリエイトジャンルでの使用を許可するかしないか」の選択項目がありますので、リストにあるということは「許可を選択している」ということです。参考までに :)

アダルトブログ管理人

2019/09/01 (Sun) 18:06

To Akiraさん

早速のご回答誠にありがとうございます。
利用可とのことでしたので是非活用させていただきたいと思います。

また利用可否の判別の仕方のご説明も大変参考になりました。


重ねての質問で恐縮ですがGoogle analyticsのタグはhead内へ配置と
HTML編集コード内に記述がありましたが、3行目の次の文字列の直後でよろしいのでしょうか。
(動画再生がされるとカウントされるトラッキングタグも同じ個所に設置したいです)

■ 3行目文字列
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

よろしくお願い申し上げます。

アダルトブログ管理人

2019/09/01 (Sun) 19:38

To Akiraさん

追記です。

動画再生がされるとカウントされるためのコードは
<head>と</head>の間に設置するそうです。

</head>は見つけられるのですが、
<head>もしくはそれに相当するタグがよく分かりません。

全くの初心者で恐縮ですがよろしくお願い申し上げます。

Akira

2019/09/01 (Sun) 23:10
vanillaice (Akira)

To アダルトブログ管理人さん

こんばんは。

> 3行目の次の文字列の直後でよろしいのでしょうか〜

</head>の直前(すぐ上)が望ましいと思います。

-----
> <head>もしくはそれに相当するタグがよく分かりません。〜

<head prefix="og:〜省略
これがそう(head開始タグ)です。prefixはOGP用の記述です。

諸々の記載位置は</head>の直前にまとめると良いと思います。
head内容を操作する時は注意が必要ですから以下の記事をご参照くださいね。特に全角スペースによるインデントには重々お気をつけください。

参考記事: head情報に何かを追加する際は細心の注意を
https://vanillaice000.blog.fc2.com/blog-entry-791.html

-

2019/09/01 (Sun) 23:33

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

アダルトブログ管理人

2019/09/02 (Mon) 10:09

To Akiraさん

詳しくかつ丁寧にご教示いただきありがとうございます。

公式テンプレートの方が無難に使えるという勝手なイメージを持っていましたが、
きちんと勉強しておられる方が真剣に制作された共有テンプレートの方が
しっかりとした構造になっていてメンテナンスもされているという認識に変わりました。

今回は3カラムのものを探していたのでBasementを選択させていただきましたが
Akiraさんの他のテンプレートもとてもカッコよく、非常にセンスのある方だなと感じました。

今後ともよろしくお願い申し上げます。

Akira

2019/09/02 (Mon) 14:49
vanillaice (Akira)

To Basement プラグインの件 内緒さん

こんにちは。

> 月別アーカイブやカテゴリを折り畳み式(ツリー表示)することは可能でしょうか?〜

プラグインとテンプレートは無関係なのでご自身で希望に該当するプラグインを選んでください。

公式プラグイン
https://admin.blog.fc2.com/control.php?mode=plugin&process=public

共有プラグイン
https://admin.blog.fc2.com/control.php?mode=plugin&process=user

「折りたたみ」「展開」「ツリー」などで検索すると候補が出てきますが、この検索は製作者が任意に入れた説明文なので該当していても出てこないことはあります。
また、恐らく公式にはありませんので共有の方で探されると良いと思います。

あるいは自分で折り畳みにする方法もあります。
参考記事: サイト改装 脱jQueryなど
https://vanillaice000.blog.fc2.com/blog-entry-724.html

「開閉スクリプト」の章をお読みください。htmlのdetail要素を利用する方法です。

-----
公式プラグインのメリット --- 簡単に導入できる
公式プラグインのデメリット --- htmlの途中でJSを処理するためスピード面で劣ることがある

htmlのdetail要素による折りたたみのメリット --- スピード面に影響しない
htmlのdetail要素による折りたたみのデメリット --- 自力

それぞれのメリット・デメリットは上記の通りです。よろしくお願いします。
*注!
jQueryファイルを含むプラグインは悪影響が出ますので選ばないようにしてください。
jQuery使用の有無がわからなければお尋ねください。動作がおかしくなる、表示スピードが著しく遅くなるなどの場合は該当している可能性があります。

Akira

2019/09/02 (Mon) 14:53
vanillaice (Akira)

To アダルトブログ管理人さん

こんにちは (o'ω')ノ

はい。公式・共有を問わず信頼できると感じるものを選ぶと良いですね。
お疲れ様です :)

-

2019/09/03 (Tue) 19:21

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2019/09/03 (Tue) 19:24
vanillaice (Akira)

To Basement プラグインの件 内緒さん(終了のご報告)

こんばんは。

内緒さんは記事数が少ないので折りたたみの動作検証自体しづらいと思います。記事が蓄積されて表示が煩雑になってからでも良いのではないかと思います。個人的意見として。
お疲れ様でした :)

-

2019/09/04 (Wed) 01:54

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2019/09/05 (Thu) 21:22
vanillaice (Akira)

To Basement展開の件 内緒さん

こんばんは。

本来はテンプレートのhtml操作はせず、プラグイン内で完結させると良かったんですが(summary要素のタイトルは「クリック展開」などにする)、見出し(プラグインタイトル)をsummary要素として流用するための処置をされた、ということですよね。

【html】

<!-- 左サイドメニュー(プラグインカテゴリ1) -->
<aside id="secondary">
<!--plugin_first-->
<details class="acmenu side-menu">
<summary class="actitle" aria-expanded="false"><%plugin_first_title></summary>
<div class="acmenu-inner"><%plugin_first_content></div>
</details>
<!--/plugin_first-->
</aside>
<!-- 左サイドメニュー(プラグインカテゴリ1)ここまで -->

上記内容に変更。赤字部位はsecondとthird(プラグイン2と3)がありますのでそれぞれ変更して記載。こちらは<aside id="tertiary">なので注意。

【CSS】

.side-menuの
border: 1px solid rgb(150,150,150);

padding: 0 15px 20px;
を削除。

.actitleの
margin: 30px auto 0;
を削除。

以上です。

-

2019/09/20 (Fri) 00:39

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2019/09/20 (Fri) 11:23
vanillaice (Akira)

To Basement展開の件 内緒さん(終了のご報告)

こんにちは。

> マーカー部分がくどい気がして修正したいのですが、何処をいじっても消えない〜

リストマーカーのことでしょうか。
.side-menu ul
で検索するとスタイルシート内に出てきますので、このルールセットを削除すれば消えますよ。一度お試しください。
お疲れ様でした :)

-

2019/10/28 (Mon) 10:00

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2019/10/28 (Mon) 10:13
vanillaice (Akira)

To Basement Twitterの件 内緒さん

こんにちは。ありがとうございます :)

> Twitterのタイムラインのコードを取得して、プラグインのフリーエリアに貼ってみたのですが、表示できません。〜

現状では該当コードが掲載されている様子はありませんでした。コード内容自体に誤りなどはありませんので、該当フリーエリアの「表示する」にチェックが入っているか今一度ご確認をお願いします。
https://admin.blog.fc2.com/control.php?mode=plugin

----- 別件です
ページ上部の検索バーがあるとタブレットユーザーさんが閲覧しにくい(バーが画面を超過するため)ので、できれば非表示をおすすめします。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar

-

2019/10/28 (Mon) 10:59

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-

2019/10/28 (Mon) 11:01

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

2019/10/29 (Tue) 16:01
vanillaice (Akira)

To Basement Twitterの件 内緒さん(完了のご報告)

こんにちは。

表示されているのを確認しました。お疲れ様でした :)

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

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