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

Basementテンプレート

Basementテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。

名称
Basement
べぃすめんと
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
全文
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Oswald
Lato
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.22 2024.2.28
  • リスト型ページネーションの複製を可能に
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.17
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.7
  • Twitterアプリ名変更及びロゴ変更に対応
更新履歴 2023.7.15
  • IE用対応終了
  • jQueryの利用を停止
  • スクロールアンカーJSの利用を停止
  • カスタムプロパティ導入
  • SNSリンク追加
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

左右カラムの入れ替えや横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

更新履歴 2020.5.29
  • ページ送りのJSを修正
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.25
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.4
  • コメント主のリンク表示用JS及びデザインの変更
  • SVGのIE向け調整
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)

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

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

【重要】テンプレートの変更点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大規模メンテナンスのお知らせ

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

更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2017.1.13
  • RSS新着サムネイルを削除しました

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

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

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

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

ご質問・ご相談の前に

Please read the document before posting your issue.

自己解決のためのページを用意しています。ご質問の前に該当するものが無いか事前のご確認をお願いします。

ご質問の前に「テンプレあるある」

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

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

  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

必須個人設定

Necessary personal settings

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

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

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

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

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

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

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事タイトル下の管理人アイコン をクリックすると別タブで開きます。

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

Cautions before asking for something.

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

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

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

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

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

-
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

管理人のみ閲覧できます

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

vanillaice (Akira)
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'ω')ノ

vanillaice (Akira)
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

vanillaice (Akira)
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

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

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

vanillaice (Akira)
Akira
2017/03/07 (Tue) 17:23

To よーきーさん

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

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

ゆき
2017/03/08 (Wed) 19:46

No title

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

vanillaice (Akira)
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に変えておきました。

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

vanillaice (Akira)
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-->

vanillaice (Akira)
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の記事を書くのに楽なので使用する。
② ただし多用はしない。
③ 使用しても画像の拡大を防ぐため必ず偶数カラムとする。

以上になります。

vanillaice (Akira)
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

vanillaice (Akira)
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

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/05/13 (Sat) 00:42

To Basementの件 内緒さん

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

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

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

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

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

=====

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

-
2017/05/13 (Sat) 19:47

管理人のみ閲覧できます

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

vanillaice (Akira)
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

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/05/14 (Sun) 20:09

To Basementの件 内緒さん③

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

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

X
padding: 0 50;

padding: 0 50px;

=====

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

-
2017/05/15 (Mon) 14:54

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/05/15 (Mon) 22:05

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

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

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

-
2017/10/06 (Fri) 17:21

管理人のみ閲覧できます

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

vanillaice (Akira)
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

管理人のみ閲覧できます

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

vanillaice (Akira)
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/ ブログはこちらです;

vanillaice (Akira)
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

管理人のみ閲覧できます

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

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

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

管理人のみ閲覧できます

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

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

To Basementナビの件 内緒さん ②

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

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

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

-
2018/02/04 (Sun) 22:01

管理人のみ閲覧できます

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

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

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

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

お疲れ様でした :)

-
2018/11/29 (Thu) 14:18

管理人のみ閲覧できます

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

-
2019/06/24 (Mon) 22:36

管理人のみ閲覧できます

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

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

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

管理人のみ閲覧できます

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

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

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

こんにちは。

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

-
2019/06/28 (Fri) 00:10

管理人のみ閲覧できます

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

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

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

管理人のみ閲覧できます

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

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

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を発見して
とても素敵だなと思っているのですが
アダルトサイトに利用してもよろしいものでしょうか。

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

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

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>もしくはそれに相当するタグがよく分かりません。

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

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

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さんの他のテンプレートもとてもカッコよく、非常にセンスのある方だなと感じました。

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

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

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使用の有無がわからなければお尋ねください。動作がおかしくなる、表示スピードが著しく遅くなるなどの場合は該当している可能性があります。

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

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

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

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

-
2019/09/03 (Tue) 19:21

管理人のみ閲覧できます

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

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

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

こんばんは。

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

-
2019/09/04 (Wed) 01:54

管理人のみ閲覧できます

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

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

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

管理人のみ閲覧できます

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

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

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

こんにちは。

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

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

-
2019/10/28 (Mon) 10:00

管理人のみ閲覧できます

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

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

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

管理人のみ閲覧できます

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

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

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

こんにちは。

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

-
2020/01/16 (Thu) 10:12

管理人のみ閲覧できます

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

-
2020/01/16 (Thu) 10:30

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/01/16 (Thu) 23:09

To Basementの件 内緒さん

こんばんは。
作業の前にまず以下の点をご一考ください。

① FC2検索バーの非表示化(タブレット閲覧時にバーが画面幅を超過し、閲覧が困難になるため)
② スマートフォン版表示を「表示しない」に変更(レスポンシブデザインを活かすため, せっかくのアフィリエイトリンクも「おすすめブログのバナー」も現在の設定のままではスマホで表示されません)

また、今回カスタマイズを一生懸命行ってもスマホユーザーにそのカスタマイズが反映されることはありません。多くのサイトではPCよりもモバイル閲覧の割合が高いはずなのでもったいないと思います。内緒さんの場合は全文表示タイプの追記なし利用なので本来はスマホ閲覧には向きませんが、カテゴリから入る特殊な仕様にカスタマイズされていますので一般ブログと比べれば問題は少ないと思います。
逆の言い方をするとせっかくそのようにカスタマイズされていてもスマホユーザーにはなんの効力もありません。
なので是非「レスポンシブ設定(スマートフォン版表示の無効化)」をご検討ください。PCとスマホの使い勝手・見た目を共通化することができます。強制ではありませんので今回限りの提案で以後は致しません。この機会にご自身でお決めくださいね。

-----
> トップ画をクリックするとホームになるように設定したい〜

画像リンクに変更する、という解釈で合ってますでしょうか。
まずヘッダー部位を画像に変更するカスタマイズ自体がこのテンプレートには向いていません。なぜかは以下の記事をご覧ください。

参考記事: テンプレートのヘッダー画像を変更する際のヒント
https://vanillaice000.blog.fc2.com/blog-entry-919.html

Basementはヘッダー横幅の制限がありませんので、画像中のオブジェクト(ブログタイトル部位)を常に表示させる場合には縦横比を固定する必要があり、それを行ってしまうと比較的大きな画面のパソコンではヘッダー自体が巨大になります。
こういう場合は本当は背景画像(星背景部分)とタイトル部分(オーナメント含む)を別で準備するのが最も良策です。

参考記事: ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】
https://vanillaice000.blog.fc2.com/blog-entry-569.html

今回内緒さんが「パソコン版とスマホ版を別のテンプレートで表示する」という現在の設定のままにされる場合、本カスタマイズで考慮するのは「パソコン」と「タブレット」です(タブレットはPC表示扱いです)
仮にレスポンシブ設定を行って「全デバイスBasementで表示する」方針に変更される場合には「パソコン」「タブレット」「スマートフォン」などあらゆるデバイスの画面幅を考慮する必要があります。

で、内緒さんの希望は今ご利用中の一枚画では実現できません(物理的に不可能)なので作り直す必要があります。「作り直せ」というのはあまりにも酷でしょうから私の方で背景とタイトルを分離して制作しようと思うんですが、内緒コメントですから画像ファイルの提供ができません(画像提供時にブログタイトルなどが第三者に見られます)
どうしても内緒にしておきたい場合はご自身で画像の分離を行ってください。
・背景(シームレス化必須)
・ブログタイトル部位
この2つに分離します。背景は500px四方程度でOKです。タイトル部位は横800px程度あったほうが良いと思います。自力での作成が無理であれば私の方で今回のみ特別に作りますが、公開コメントが条件です。
また、制作前に「レスポンシブ設定を行うのか行わないのか」をお決めください。あるいはヘッダー画像設定(あるいは変更)が容易なテンプレートに変更する、という方法もありますのでそちらもご一考くださいね。

お返事待ちということでよろしくお願いします。リンクについてもその際にお伝えします。

----- 追記

提供画像の準備はできていますので、コメントを公開できるのであればお渡ししますね。次回の内緒さんのお返事が非公開の場合はお渡しせず削除します。その場合は画像・CSS共に自力ということになります。よろしくお願いします。

未紀
2020/01/17 (Fri) 09:53

Akiraさま、こんにちは。
お忙しい中、迅速にご丁寧な回答をいただき、本当に感謝致します!

> スマホ閲覧に不適との件

承知致しました。おっしって下さる通り、特殊なカスタマイズをしている為
仕方ないとは思いつつ、自分のスマホではサイドバーのアフィリエイトも表示されている為
(最下方にはなってしまってますが…)問題ないと思い込んでいました。

既に詳しく記事にして下さっている

・テンプレートヘッダー画像変更の際のヒント、
・タイトルを画像に帰る際の基本

改めて拝読させていただきました。
全体のこと、端末による見方の違いなどを、深く考えずにカスタマイズしようとしていたのですね。
そんな中、画像作成までしていただけるとの有難いお申し出に本当に何と言ったらいいのか…

ですが、今の時点でヘッダーはひどく問題があるほど見切れているわけではありませんし、
正直、レスポンシブ設定の変更をした後、今度はどんな問題が生じるか分からないことから
(300ページを超える容量なので…)
これ以上はAkira様のお手を煩わせることなく、今のまま維持していこうと思います。

一点だけ、現在白文字で表示されていて、背景画像と二重になってしまっている
タイトルを非表示にする方法だけご教示いただけましたらと思います。
(一般的な非表示設定を、いくつかCSSに書き込んでみたのですがままならず…)
引き続きお手間をお掛け致しますが、何卒宜しくお願いいたします。

vanillaice (Akira)
Akira
2020/01/17 (Fri) 16:27

To 未紀さん

こんにちは ('0')/

えっと、情報が正しく伝わっていないのと、勘違いされている内容もあるようなのでもう一度だけ説明しますね。最終的には未紀さんのご意向を尊重したいと思います。

まず「スマホ閲覧に不適」というのは未紀さんが解釈された内容ではないと思います。私が言いたかったのは、「全文表示タイプテンプレート + 追記なし + レスポンシブ設定」のコンボが良くない「かもしれない」という点です。
理由は以下の記事を参照のこと

参考記事: FC2ブログのトップページ【全文表示タイプ】の難点を語る
https://vanillaice000.blog.fc2.com/blog-entry-557.html

ですが未紀さんの場合これにあてはまりません。なぜならトップページからの遷移を封じて表紙として活用し、カテゴリから入る仕組みにカスタマイズされているからです。つまり「長文記事が一度に大量に表示される」にあたらない、ということです。
なので「本来はスマホ閲覧には向きませんが、カテゴリから入る特殊な仕様にカスタマイズされていますので一般ブログと比べれば問題は少ない」とお伝えしました。

-----
> 自分のスマホではサイドバーのアフィリエイトも表示されている為(最下方にはなってしまってますが…)〜

この表現から推測すると、未紀さんは「スマホでもBasementテンプレートで表示されている」とお考えなのではないかと思いますがそれは勘違いです。未紀さんのスマホページはこれです ↓

https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/user-sp.jpg

こうしてFC2ブログのデフォルトスマホ用テンプレートで表示されます。
未紀さんのスマホでBasementテンプレートによる表示が行われているのであれば、それは未紀さんが意図的に
・FC2ブログ管理画面から「PC表示」を選択している
・スマホのブラウザ設定で「PC版サイトを見る」を有効にしている
のいずれかです。ところが一般のスマホユーザーというのはそういったことはしません。他サイト閲覧にも影響が出るからです。
なのでほとんどのユーザーさんが目にしているのは上に掲載したスクリーンショットの内容です。

FC2ブログの「スマートフォン版の表示を無効(表示しない)」にする設定、つまりこれがレスポンシブテンプレートを正しく使うための設定なんですが、これを行わない限り解消されることはありません。意図的な操作が無ければ確実にスマホ版での表示が行われます。
逆に言えばそれを防ぐための設定でもあり、レスポンシブテンプレートを活かすのに必須の設定です。

参考記事: スマートフォン版の非表示を勧める理由
https://vanillaice000.blog.fc2.com/blog-entry-579.html

現在既に「モバイルファーストインデックス」がローンチ済ですから、未紀さんのサイト評価はFC2デフォルトスマホテンプレートでの見た目や使い勝手が評価対象になっています。なので寧ろ現在の設定のほうが「問題」です。
何故なら「占い」や「美容」といったジャンルのサイトでは「自分が求めているもの」がはっきりしているユーザーさんが多く、例えば7月生まれの方ならばダイレクトに7月の運勢を見たいはずです。
その導線を未紀さんは上手くカスタマイズされていますが、スマホ表示には全く反映されておらず導線が失われています。なので離脱率(検索ユーザーによるブラウザバック率)が低いとは言えないのではないでしょうか。

ここまでは「もしかしたら勘違いされているかも」と感じた点です。上記を理解することはSEO面で非常に重要なので熟読をお願いします。

-----
> 今のまま維持していこうと思います〜

恐らく「どこかを削除すればOK」とお考えなのだと思います。ところがそう簡単でもないんですね (´・ω・`)
何故なら今の状態は「CSSのbackgroundで掲載している」からです。CSSというのは意味を持っていませんのでクローラーに役割情報を渡すことができません。
単純に未紀さんが表現されているところの「現在白文字で表示されていて、背景画像と二重になってしまっているタイトル」を削除してしまえば、「h1」という「大見出し」が失われます。見出しには位があり、h1 → h2 → h3… と整合性がとれていなければいけないんですが、これが失われます。要するにSEO的に良くないということです。
なので「現在のまま」というわけにはいきません。html, CSS内容共に修正が必要です。ブログタイトルを含むロゴなどは「CSSのbackground掲載」ではなく「htmlのimg掲載」が基本中の基本、という説明は昨夜提示した参考記事内に明記してあります。

-----
今お手元にある画像を継続利用する場合の各デバイススクショ(未紀さんの現時点の設定のまま)

小さめPC(見切れあり)
https://file.blog.fc2.com/vanillaice000/miscellaneous/user-wrong-pc.png
大きめPC(見切れあり)
https://file.blog.fc2.com/vanillaice000/miscellaneous/user-wrong-bigpc.png
タブレット(見切れ及び画面超過あり)
https://file.blog.fc2.com/vanillaice000/miscellaneous/user-wrong-tb.png
スマホ(スマホ専用テンプレート表示)
https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/user-sp.jpg

私が準備した画像に変更した場合の各デバイススクショ(検索バー非表示設定, スマホ版非表示設定)

小さめPC
https://file.blog.fc2.com/vanillaice000/miscellaneous/user-right-pc.png
大きめPC
https://file.blog.fc2.com/vanillaice000/miscellaneous/user-right-bigpc.png
タブレット
https://file.blog.fc2.com/vanillaice000/miscellaneous/user-right-tb.png
スマホ
https://file.blog.fc2.com/vanillaice000/miscellaneous/user-right-sp.png

------
html, CSSの修正作業も私が準備した画像を利用される方が簡単です。これ以上はゴリ押ししませんので、利用する・しないに関わらず今日中には削除しますので決断はお早めにお願いします。
私の画像を「使わない」前提で
・リンク
・背景変更
のための修正内容を記します。これで良いということであればそのまま作業を行ってください。私の画像を使う場合には修正内容が異なりますので作業をしてしまう前にその旨お伝えくださいね。

-----

まずご自身で行ったCSS内容追加部位を削除(background指定のことです)

②html編集

<a href="<%url>"><%blog_name></a>
で検索し、以下の通り変更
<a href="<%url>"><img id="title-image" class="fit" src="ここに画像アドレス" alt="ブログ名"></a>

altのブログ名は未紀さんのブログ名称をそのまま入れてください。


スクショに従って該当部位を注意深く削除

https://file.blog.fc2.com/vanillaice000/miscellaneous/user-edit.png

他の部位を巻き込んで消してしまったり、逆に消し忘れにも注意してください。

④CSS編集

#banner
で検索するとスタイルシート内にありますので、そのルールセット内
padding: 150px 0 250px;
を削除


#blog-title
で検索し、ルールセット内
max-width: 800px;
を削除し
height: 500px;
を追加

スタイルシート内末尾に以下の内容を追加
#title-image {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
}

続いて
#whole-container
で検索し、ルールセット内に以下の内容を追加
position: relative;
z-index: 1;

------
以上です。よろしくお願いします。
くれぐれも私が準備した画像を使う場合にはお早めにお申し出ください。そしてその方がhtml, CSS修正は楽ですので、作業する前にお決めになるか、あるいは試すのであればテンプレートの複製を必ずとっておくようにしてくださいね。

-
2020/01/17 (Fri) 18:28

管理人のみ閲覧できます

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

未紀
2020/01/17 (Fri) 18:29

すみません!鍵コメしてしまった為、再コメントさせていただきます!

度々のお早いご回答と、詳しいご説明、そして、各種端末でのスクショまで…!!
本当にありがとうございます!!!
おっしゃる通り、スマホでテンプレート表示されると思い込んでいました!

そして、お手間をお掛けすることを申し訳なく思いますが、
ご用意いただける画像がありましたら、どうか、お力をお借り致したく思います。

詳しく記載していただいた手順でテンプレートを変更できる自信がなく。

つい先ほど、スマートフォン版の表示設定を「無効にする」に設定し直しました。

大変お手数お掛け致します。
以降、必要なご連絡すべきことがありましたら、お願いいたします。
どうぞ宜しくお願い致します。

vanillaice (Akira)
Akira
2020/01/18 (Sat) 03:12

To 未紀さん

こんばんは。
わかりました。先回の内容(html, CSS)は忘れてくださいね。

------
まず提供画像ファイルは2点です。
画像1(ロゴ部分)
* 質疑応答終了につき削除しました
画像2(背景)
* 質疑応答終了につき削除しました

画像1がロゴを切り抜いたものです。できるだけ丁寧にやったつもりですが、これ以上のクオリティは私の手に余りますので、調整が必要な場合はプロの方に依頼するかご自身で行ってください。
画像2は背景です。こちらはシームレス(継ぎ目なし)で表示できるよう調整しておきました。

2つの画像はダウンロードし必ずご自身のFC2サーバーにアップロードしてください。お渡しした後私のフォルダからは削除しますので、直リンク厳禁です。

----- 修正手順
① html編集

<a href="<%url>"><%blog_name></a>
で検索し、この内容を以下の通り変更
<a href="<%url>"><img id="title-image" src="ここに画像1のアドレス" alt="ブログ名"></a>

続いてスクショに従って該当部位を削除。
https://file.blog.fc2.com/vanillaice000/miscellaneous/user-edit2.png

② CSS(スタイルシート)編集

#banner
で検索するとルールセット内に未紀さんが追加した内容があると思います。以下の内容です。
* 質疑応答終了につき削除しました
これを以下の通り変更
background: url(ここに画像2アドレス) left top /600px auto;

続いて同じく #banner のルールセット内にある
padding: 150px 0 250px;
を以下の通り変更
padding: 50px 0 160px;

続いて以下の内容をスタイルシート末尾に追加
#title-image {
width: 600px;
}

-----
以上です。これでレスポンシブ化されているはずですので、PCで作業を行いましたら必ずブラウザの横幅を広くしたり狭くしたりして表示の状態を目視確認してください。
また、スタイルシート編集の最終作業で #title-image に width: 600px; を指定していますが、この値は最大800pxまでOKです。あるいは600px以下でも構いません。PCで見たときに「小さい」と感じましたら600px〜800pxの間で調整してください。

最後にアドバイスです。ロゴをブログタイトルに使いたいときは、画像はやはり「背景」「ロゴ」を別々で制作した方が応用が効きます。
テンプレートによっては一枚画に仕上げても上手くいく場合がありますが、「別々の画像を画像編集でくっつけて一つにする」というのは容易です。ですがその逆の「一つになっている画像からオブジェクト部分だけを分離する」というのはテクニックが必要で難易度が跳ね上がります。
もうそれはプロ, セミプロの分野なので、今後は「別で作成する」と覚えておかれると良いですよ。

未紀
2020/01/18 (Sat) 10:18

ありがとうございます!

AKIRAさま、おはようございます。この様にご対応いただき、心より感謝致します。いま、外出先なので、帰宅し次第ご教示いただいた通りに作業させていただきます。取り急ぎのお礼まで。

未紀
2020/01/18 (Sat) 15:52

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

Akira様、こんにちは。
つい先ほど、スクショ画像まで掲載していただいた手順を、記していただいた通り作業し、その後パソコン上で確認したところ、ウィンドウの大きさをどう変更しても変わりなく同じトップ画像が表示されるようになりました!感動しました。もちろん、トップ画をクリックすればホームになっています。
ご厚意でハイセンスなテンプレートを提供下さり、無償で個人的なカスタマイズのご相談に親身になっていただいたばかりか、画像の作成までしていただき…。このようなことを業者さんに頼んだら個人利用の範疇を超えた費用がかかることは十分存じておりますし、その業者さんが全体の使い勝手やバランスを考えて下さったり、センスが良いとも限りません。ただでさえ、ご提供下さる素敵なテンプレートのお陰様にて楽しくブログライフを送らせていただいてる上に、Akira様にここまでしていただいて本当に、何と申し上げたら良いか分かりません。
画像を背景とタイトルを分離して作る件、理解致しました。スタイルシートの構造を理解出来ていないので、位置合わせするのはずっと難しいことだと勝手に思い込んでおりました。そのくせ「こうしたい」とイメージばかり思い描いていましたのに、Akira様のお陰様にてすべてイメージ通り、それ以上のものになりました。本当にありがとうございました。心よりお礼申し上げます。ずっと、大切に使わせていただきます。

vanillaice (Akira)
Akira
2020/01/21 (Tue) 01:08

To 未紀さん

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

無事済んだようで安心しました。質疑応答中なのにログインする時間が取れず心配していました ^^;
お疲れ様でした :)

-
2021/03/17 (Wed) 02:17

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2021/03/19 (Fri) 23:21

To Basement NEW表示の件 内緒さん

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

> 新着記事を上げても『NEW』の文字が出ないようにしたい〜

<span data-newdate
で検索するとhtml内に6箇所ありますので、この文字列を含む行
<span data-newdate 〜 省略 〜
から
</span>
までを削除。

続きまして、
<script>for(var s=2,c=new
で検索するとこちらもhtml内に1箇所あります。
この文字列のすぐ上にある
<!--not_edit_area-->
から
<!--/not_edit_area-->
までを削除(この間に <script>for(var s=2,c=new〜 省略 〜 n[i].innerHTML="NEW!")}</script> が挟まれているはずです)

ちょっと時間がなくてスクリーンショットを用いた説明ができずごめんなさい。
わかりづらい場合はその旨お伝えくださいね。よろしくおねがいします。

-
2021/03/20 (Sat) 23:06

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2021/03/22 (Mon) 22:55

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

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

ご希望どおりになったようで良かったです。お疲れ様でした。
励みになるお言葉もありがとうございます :)

和田
2021/05/18 (Tue) 18:19

テンプレートについての質問

テンプレートの質問があるのですが、まだ受付をしておりますでしょうか?
ご確認を宜しくお願い致します。

vanillaice (Akira)
vanillaice (Akira)
2021/05/18 (Tue) 20:14

To 和田さん

こんにちは ('0')/
受付自体は随時行っております。ただ現在多忙につき、すぐにお返事できるとは限りませんのでご容赦くださいね。
よろしくお願いします。

和田
2021/05/20 (Thu) 14:58

To Akiraさん

御多忙の所、申し訳ありません。
当サイトのヘッダーについての質問になります。
私の認識ですと、ヘッダー含め、3列構成だと思います。
今回、ヘッダーの部分(3ヶ所全て)に画像を埋め込もうと考えていますが、
ヘッダーの3ヶ所の各々のサイズ(縦×横)や
ソースのどの箇所に画像のパスを埋め込めば良いか
が不明です。
特にサイドのヘッダーについては現在のデザインを見る限り、
正方形とかではなく、【「 】のようなデザインになっていると思います。
この部分の詳細のサイズが知りたいです。
ご教示頂けると幸いでございます。
宜しくお願い致します。

vanillaice (Akira)
vanillaice (Akira)
2021/05/20 (Thu) 21:25

To 和田さん

こんばんは。
えっとごめんなさい。私ご質問の意味を全く理解できていないと思います。
ヘッダーは1箇所(デフォルトで背景色黒、ブログタイトルが記される部位)なので「ヘッダーの3ヶ所」というのがどこを指すのかわかりませんし、どのような画像をどのような形で掲載したいのかもわかりませんので、

https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_basement-top----1000.jpg

・上記スクリーンショットを用いて掲載希望場所の特定をお願いします。
・掲載希望画像の実物をお見せください(恐らく画像の縦横比特定の必要があります)
・「正方形とかではなく、【「 】のようなデザインになっている」というのが具体的にどこのことなのか

など、やりたいことの具体的イメージを伝える、という点に留意してお返事をよろしくお願いします。


和田
2021/05/20 (Thu) 23:21

画像を入れたい箇所

テンプレートの構成が理解できておらず、意図が伝えることができませんでした。
申し訳ありません。

言葉だと難しいので画像でお伝えします。
画像ファイルのブルーの枠の部分に画像を入れたいのですが、可能でしょうか?

https://photos.google.com/photo/AF1QipMSUGEG7wAQb5LhHXiOlUFaSzRgSaTW78B2gWah

引き続き宜しくお願い致します。m(_ _)m

vanillaice (Akira)
Akira
2021/05/21 (Fri) 15:07

To 和田さん

こんにちは ('0')/
アドレスが無効(404 not found)なので、アドレスと公開範囲設定を確認の上再度記入をお願いします。
FC2サーバーにアップロードして頂いた方が確実だと思います(質疑応答終了後に削除して頂いて構いません)
よろしくお願いします。

和田
2021/05/21 (Fri) 16:02

To Akiraさん

FC2サーバーが分からなかったので自分のサイトに貼り付けました。

http://hobbylabon.com/img/20210521160014010.png/

こちらで見れますでしょうか?

引き続きよろしくお願いいたします。

vanillaice (Akira)
Akira
2021/05/21 (Fri) 23:16

To 和田さん

こんばんは。

まず「FC2サーバー」というのは、各ユーザーに割り当てられた画像サーバーのことです。無料・有料を問わず画像を「アップロード画面」からアップロードできるようになっていますよね。その保存先が「FC2サーバー(FC2が所有・管理してユーザーに貸与しているサーバー)」です。
で、この作業(画像をサーバーに保存する)は「アップロード」で、「貼り付ける」と表現した場合一般的には「サーバー内に保存してある画像をブログなどwebサイトに掲載して第三者に見えるようにする」ことを指しますのでちょっと誤解が生じてしまいますね (´・ω・`)
最初に「掲載したい画像の実物を見せてください」とお願いしていたので、その画像を和田さんのブログ内で見られるのかと探してしまいました。

------
で、今回の件は「指定部位に背景画像を敷きたい」ということで合ってますでしょうか。
再度お願いですが 実際に利用する予定の画像の目視確認 をさせてください。でないとサイズの指定等、当てずっぽうな指定しかできません(または指定自体できない)し、それだと恐らく何度も同じ内容の質疑応答を繰り返すことになると思います。改めて画像アドレス記載をお願いします。

今回のご希望ですが、テンプレートの構造は以下のようになっています。

https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_Basementbg.png

本来はこのような配置になっているものを、「左カラム」「メインカラム」「右カラム」をひとつのまとまりとして、上にグイっと引き上げることで 長方形 の「ヘッダー」の上に重なるようにしています。ですから、ヘッダー部位がガクガクとした凹凸形状になっているわけではありませんし、和田さんが青く記したような枠がついているわけでもないんですね。

なのでこれを実現するとすれば、装飾の都合でhtml変更をしたくはないのでCSSだけで行くと仮定して

・ヘッダーの下に背景を敷き、一部露出させる
・コンテンツ部位(まとめて3カラム)の下に背景を敷き、一部露出させる
・レスポンシブ調整をする(タブレット・スマホデバイスの調整)

という形で割と複雑なカスタマイズになります。さらにレスポンシブなのでスマホでの調整も必要です(但し和田さんはレスポンシブとして活用されていないようなので無視しても良いかもしれませんが、SEO的にの良くはありません。レスポンシブについては説明を省きます)

ともかくいずにしろこの部位は10pxという非常に狭い領域ですから、どんな画像を準備されているのかがわかりませんのでなんとも… ^^;
また、背景画像とする場合はシームレス(つなぎ目が無いこと)であることも重要なので、とにかく一度お見せ頂かないことには。

とりあえずこんな感じかなぁ、というのを作成してみましたので、イメージが正しいかどうかご確認ください。しつこいようですが敷く画像によってはサイズ等の調整が必要になりますので、修正作業内容及びソースについては

・画像実物の目視確認
・イメージが正しいかどうかの確認

を済ませてからにしたいと思います。よろしくお願いします。以下は手持ちのシームレス画像から適当に選んだもので作成したサンプルです。レスポンシブの調整はしていません。スマホをお持ちでしたらスマホでも目視確認をお願いします(但しこれまで通りスマホで本テンプレートを利用しない場合は無視して構いません, また、サンプルではページ送りのデザインが崩れていますがあくまでもやっつけで作成したサンプルなのでお気になさらず)

https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sample_basement_wada_san.html

和田
2021/05/22 (Sat) 15:14

To Akiraさん

こんにちは。

ヘッダーに入れたい画像はこちらになります。

https://blog-imgs-136.fc2.com/h/o/b/hobbylabon/43447.jpg

ご確認をお願い致します。

ただ、ヘッダーのサイズの関係で画像の縦横のサイズの変更(もしくは範囲指定切り取りなど)については
可能です。

引き続きよろしくお願いいたします。

vanillaice (Akira)
Akira
2021/05/22 (Sat) 16:38

To 和田さん

こんにちは。
なるほどー (´・ω・`)
この画像は圧倒的に今回の用途には不向きです。何故ならこの類の画像はasbtract image(抽象)といって、全体を見ないとその雰囲気が伝わらないからです。
お伝えした通り、今回の表示範囲は(短い丈が) 10px とかなり狭い(細い) ので、どのように配置しても恐らく納得行く形にはならないと思います。そしてrepeat(埋める範囲に満たない場合に繰り返して表示させる)すればシームレスではないため当然継ぎ目が目立ってしまいますね。

たぶんどう配置しても「これならCSSのグラデーションで良いのでは?」という結果になるような気がしますが、それを踏まえて以下の通り作業を行ってください。

-------
htmlは触りません。スタイルシートに集中してください。

#whole-container {
で検索すると2箇所あります。最初のものが対象です。このルールセットを

#whole-container {
display: flex;
justify-content: center;
background: white;
position: relative;
z-index: 3;
}

に変更。
続いて上記内容のすぐ下に以下の内容2ルールセットを追加(アドレスは忘れずに書き入れてください)

#whole-container::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 160px;
background: url(画像アドレス);
}

#whole-container::after {
content: "";
display: block;
position: absolute;
top: 10px;
left: 10px;
z-index: -1;
width: calc(100% - 20px);
height: calc(160px - 10px);
background: #fff;
}

続いて
#banner {
で検索すると1箇所ありますので、このルールセットを以下の内容に変更

#banner {
position: relative;
margin: 45px auto 0;
width: calc(100% - 20px);
background: linear-gradient(to bottom, transparent 0, transparent 10px, rgb(255,82,162) 10px, rgb(255,82,162) 100%);
padding: 5px 0 250px;
text-align: center;
}

続いて上記内容のすぐ下に以下の2ルールセットを追加。

#banner::before {
content: "";
display: block;
position: absolute;
top: 0;
left: -10px;
z-index: -1;
width: calc(100% + 20px);
height: calc(100% + 10px);
background: url(画像アドレス);
}

#float-container {
position: relative;
}

---------
ここまでが基本の作業です。で、利用する画像の縦横サイズは置いておき、「容量」が約400KBと大きすぎますので、容量の削減(圧縮)を行ってください。でないと現時点で和田さんのページは画像の容量が1枚あたり約1MBと非常に大きいので、さらにページが重たくなってしまいます(今後画像を掲載する際は「削減」をされた方が良いと思います)
削減というのは画像を縮小することではなく、その容量のみを軽量化することを指しています。画像の解像度を極力保った上で削減(ロスレス圧縮)することは可能ですからご検討ください。
第三者の冷静な意見として受け取って頂きたいんですが、和田さんのブログの現状は「表示が遅くて重たい」です (∵`)

参考記事: 画像を圧縮して軽くするおすすめサイト「Tiny PNG」
https://vanillaice000.blog.fc2.com/blog-entry-208.html

--------
ここからは、これまでの作業内容を終えて、背景画像の表示位置を調整したい場合の追加作業です。
画像の横幅が1191pxなので、ブラウズサイズ横幅がこれを超えた場合(つまり画面の大きいPCで見た場合)は自動的に画像が繰り返しになります。継ぎ目はくっきりと目立ちます。これが嫌だという場合には

#whole-container::before

background: url(画像アドレス);

background: url(画像アドレス) center center /cover no-repeat;
に変更してください。
また。上記の指定は「画像の縦中央と横中央を表示起点とする」という内容なので、表示位置をずらしたい場合には、最初のcenterが縦位置で、「top」または「bottom」への変更が可能です。言葉ではわかりづらいと思いますので実際に変更して目視確認を行ってください。
2つ目のcenterは横位置で、「left」または「right」への変更が可能。
また、さらに細かい調整をしたい場合はpxを利用することもできますが、原寸を考慮する必要がありますのでおすすめしません。

とりあえず一度お試しください。

和田
2021/05/22 (Sat) 18:19

To Akiraさん

なるほどです。

少し私には難しい作業ですが、なんとかチャレンジしてみたいと思います。

画像の容量が大きいというご指摘も頂きましたので
ご教示頂いた「画像を圧縮して軽くする」という方もトライしてみたいと思います。

これからがんばって作業を進めていきます。

また進捗がありましたらご連絡差し上げますので

引き続きよろしくお願いいたします。

和田
2021/06/03 (Thu) 21:24

To Akiraさん

ご連絡が遅くなり申し訳ありません。
本日、ご教示頂いた内容でCSSの修正をしたのですが、どうもうまくいかない模様です。

CSS修正後の画面はこのような感じになってしまいます。
https://blog-imgs-136.fc2.com/h/o/b/hobbylabon/20210603211826c64.jpg

スクリプトは以下の通りです。
HTML修正前
https://blog-imgs-136.fc2.com/h/o/b/hobbylabon/202106032118311b6.txt
CSS修正前
https://blog-imgs-136.fc2.com/h/o/b/hobbylabon/20210603211829377.txt
HTML修正後
https://blog-imgs-136.fc2.com/h/o/b/hobbylabon/20120603_HTML.txt
CSS修正後
https://blog-imgs-136.fc2.com/h/o/b/hobbylabon/20210603_CSS.txt

ご教示頂いた通りにCSSを修正しても
HTMLに書かれている以下の部分が反映してしまうので
削除しました。
<h1><a href="http://hobbylabon.com/"><img style="max-height: 600px;" alt="ほびらぼん" src="http://blog-imgs-121.fc2.com/h/o/b/hobbylabon/20170309221339276.jpg"></a></h1>

対処方法をご教示ください。
宜しくお願い致します。


vanillaice (Akira)
Akira
2021/06/03 (Thu) 23:53

To 和田さん

えーとですね、拝見した内容、htmlが壊れてしまってレイアウトが崩れています。そしてテンプレートのバージョンがかなり古くFC2の新機能等に対応ができませんので、できれば最新のバージョンにアップデートして頂いた方が良いと思います。
(再DLという意味です)

でないと現時点でSSL対応などもできていませんので、近いうちにFC2ブログが全ブログSSLを決行したら修正がとても大変ですし、私の方でも古いバージョンに合わせたカスタマイズの提供が難しいので、「どうしても無理」という場合以外はテンプレート再DLをおすすめします。ヘッダーの再カスタマイズが発生しますが、この内容ならばすぐに対応できます(その他追加内容はご自身で適用をお願いします)

再DLして頂いたらhtml内にある

<!-- ヘッダーここから -->

から

<!-- ヘッダーここまで -->

の内容を以下の通り修正します。

<!-- ヘッダーここから -->
<header id="banner">
<<!--not_permanent_area-->h1<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area-->>
<a href="http://hobbylabon.com/"><img style="max-height: 600px; margin: 20px 0;" alt="ほびらぼん" src="http://blog-imgs-121.fc2.com/h/o/b/hobbylabon/20170309221339276.jpg"></a>
</<!--not_permanent_area-->h1<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area-->>
</header>
<!-- ヘッダー ここまで -->

その上でお伝えしたスタイルシート編集を行ってください。ひとつだけ、修正内容の

#banner
の中の
padding: 5px 0 250px;

padding: 5px 0 160px;

160px程度で良いと思います。

-----
先回再DLとSSL化をおすすめしようか迷ってやめたんですが、この際ですから(いずれにしろ修正が必要ですから)、この方法でお試しください。よろしくお願いします。

和田
2021/06/04 (Fri) 10:47

To Akiraさん

お世話になっております。

最新のテンプレートをダウンロードして
ご教示頂いた内容でHTMLとCSSを修正しましたが、やはり駄目でした。

HTML&CSS修正後の画面
https://blog-imgs-136.fc2.com/h/o/b/hobbylabon/202106041043417d0.jpg

以下のスクリプトが原因と考え、スクリプトを削除しましたが、やはり駄目でした。
<<!--not_permanent_area-->h1<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area-->>
<a href="http://hobbylabon.com/"><img style="max-height: 600px; margin: 20px 0;" alt="ほびらぼん" src="http://blog-imgs-121.fc2.com/h/o/b/hobbylabon/20170309221339276.jpg"></a>
</<!--not_permanent_area-->h1<!--/not_permanent_area--><!--permanent_area-->div<!--/permanent_area-->>

スクリプト削除後の画面
https://blog-imgs-136.fc2.com/h/o/b/hobbylabon/202106041043420f7.jpg

もうどうすることもできないので、
最新テンプレートを再度ダウンロードして、
デフォルトのままにしてあります。

申し訳ありませんが、対処方法をご教示ください。

和田
2021/06/04 (Fri) 10:52

To Akiraさん

追伸)
最新のテンプレートにしたところ、フォントが変更されてしまっているようで
過去記事の文字崩れが発生しました。
さすがにこれは許容できないので、
古いテンプレートに戻しました。

vanillaice (Akira)
Akira
2021/06/04 (Fri) 18:01

To 和田さん

こんにちは ('0')/

手順どおりに正しく行えばこうなるはずです ↓
https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_06_04.png

ならない、という場合はどこかでなにかの手順を間違えていると思いますが、作業内容を隠されたり(古いテンプレートに切り替える等)、自己流のアレンジ(指南内容に無いhtmlの操作など)をされてしまってはこれ以上説明のしようがありません (´・ェ・`)

「文字崩れが発生しました」についてもどのように崩れているのか見ないことには全くわかりません。通常「文字が崩れる(?)」といったことは想像しづらいので、どういう意味なのかは見てみないことには ^^;

今記事を書きましたので
https://vanillaice000.blog.fc2.com/blog-entry-1072.html

お読み頂いた上でURLをください。また、「文字崩れが発生している」というページのURLも併せてお伝え下さい。よろしくお願いします。

和田
2021/06/04 (Fri) 20:39

To Akiraさん

どうも、時間が作れず、これ以上、知見のない私では対応できません。
また、会話もやはりテキストベースだと齟齬が発生して
先へは進めませんので、
今回は諦めたいと思います。
ご面倒お掛けしました。
ありがとうございました。

vanillaice (Akira)
Akira
2021/06/04 (Fri) 21:07

To 和田さん(終了のご報告)

はい、了解しました。たぶんデザイン的には今のままの方がより良いと思います。
お疲れ様でした :)

-
2021/11/08 (Mon) 08:59

管理人のみ閲覧できます

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

-
2021/11/08 (Mon) 11:12

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/11/08 (Mon) 14:09

To Basementテンプレートの件 内緒さん

こんにちは ('0')/

解決済、あるいはPianissimoテンプレートへ変更、ということでよろしいでしょうか。
お疲れ様でした :)

-
2022/11/02 (Wed) 18:04

管理人のみ閲覧できます

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

-
2022/11/02 (Wed) 18:24

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/11/03 (Thu) 13:35

To Basement 個別記事でのタグとSNSボタンの位置について 内緒さん

こんにちは ('0')/

Basementのデフォルト状態は本記事中のDEMOでご覧頂けますのでご確認をお願いします。
デフォルトでは記事の最下部にSNS及びタグの表記です。以前は別に位置にあったとすれば個人カスタマイズを行われていたのではないでしょうか。

具体的にどこに記載したいのかが私ではわかりませんので、仮に記事タイトル下などであればSNS関連及びタグ関連htmlを移動させるだけですが、関連記事との相対位置であればFC2の仕様上容易には変更できないのでJSを用いることになります。

関連記事: ランキングバナーやアフィリエイトバナーを好きな位置に表示するには
https://vanillaice000.blog.fc2.com/blog-entry-990.html

-
2022/11/03 (Thu) 18:18

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/11/04 (Fri) 00:57

To Basement 個別記事でのタグとSNSボタンの位置について 内緒さん(終了のご報告)

こんばんは ('0')/

そうだったんですね。
いえ、また何かありましたらお気軽にお尋ねください。お疲れ様でした :)

おりかりお
2023/10/27 (Fri) 10:23

最終更新日のアイコン変更方法などについて

Akiraさん、はじめまして。

Basementのテンプレートを使わせていただいてます。
パンくずリストやページ送りがついており、とても便利です。
前後の記事への送り(というのでしょうか)が個別記事タイトルで表示されるのも、過去記事を見返すときに助かってます。

今回、カスタマイズで教えていただきたいことがあり、コメントしました。

《質問1》
投稿日とは別に最終更新日を表記できるようにカスタマイズしました。
その際、時計マークのアイコンの変更の仕方が分からず、投稿日の前に表記されているアイコンをそのまま使用してます(コードをコピーして貼り付けました)。

最終更新日のアイコンをAkiraさんのテンプレートのように半時計周りのアイコンや、別の時計アイコンに変更するにはどのようにしたらよいでしょうか。

《質問2》
最終更新日を追加したことで、投稿日の時間(時分)と最終更新日の時計アイコンの間隔が詰まってしまいました。
こちらの間隔を調整するにはどのようにすればよいでしょうか。

上記2点を教えていただけないでしょうか。
お忙しいところ申し訳ありませんが、よろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2023/10/27 (Fri) 17:45

To おりかりおさん

こんばんは ('0')/

> 投稿日とは別に最終更新日を表記できるようにカスタマイズしました〜

HTMLの構文ルールでこの状態は許可されませんので正しい内容に修正する必要があります。

> 時計マークのアイコンの変更の仕方が分からず〜

時計を含め各アイコンはSVG画像をインラインで記載しています(FC2ブログでは .svg 拡張子のアップロードができないため)ので、アイコンを変更する場合はその変更希望のアイコンをインラインで追加記載する必要があります。svg画像の文字列は非常に長いのと、使用にあたりそのルールなど理解していないと使えないと思いますので、以下のいずれかをおすすめします。

1. 別テンプレートを参照して追加(HTML上級者向け(svgの知識があること))
2. svgの代わりにpng画像を用意する(中級者向け)
3. 文字のみで処理する(初心者向け)

今回は3をおすすめします。

カスタマイズしたHTML部位は以下のようになっています。
(独自変数が正しいかどうか第三者からは不明なので(サーバーを経由した時点で変数は目視確認不可になるため)、推測を交えた内容です)

<!-- 日付 -->
<time class="entry-info entry-datetime" datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00">
<svg class="svg-fill svg-margin_right" role="img" aria-hidden="true"><use xlink:href="#svg-clock-fill"></use></svg><%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_youbi>) <%topentry_hour>:<%topentry_minute>
<svg class="svg-fill svg-margin_right" role="img" aria-hidden="true"><use xlink:href="#svg-clock-fill"></use></svg><%topentry_modified_year>/<%topentry_modified_month>/<%topentry_modified_day>(<%topentry_modified_youbi>)
</time>

太字部位が追加されている内容です。以下のように修正します。
(投稿日が前 + アイコンつき)

<!-- 投稿日 -->
<div class="entry-info entry-datetime">
<svg class="svg-fill svg-margin_right" role="img" aria-hidden="true"><use xlink:href="#svg-clock-fill"></use></svg><%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_youbi>) <%topentry_hour>:<%topentry_minute>
</div>
<!-- 更新日 -->
<time class="entry-info entry-datetime" datetime="<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day>T<%topentry_modified_hour>:<%topentry_modified_minute>:<%topentry_modified_second>+09:00">
<%topentry_modified_year>/<%topentry_modified_month>/<%topentry_modified_day>(<%topentry_modified_youbi>) (更新日)
</time>

time要素は重要な意味を持ちます。投稿日と更新日双方の記載がある場合、より重要なのは更新日の方なので、以下の形にされても良いと思います(双方をtime要素でマークアップしないよう注意)
(更新日が前 + アイコンつき)

<!-- 更新日 -->
<time class="entry-info entry-datetime" datetime="<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day>T<%topentry_modified_hour>:<%topentry_modified_minute>:<%topentry_modified_second>+09:00">
<svg class="svg-fill svg-margin_right" role="img" aria-hidden="true"><use xlink:href="#svg-clock-fill"></use></svg><%topentry_modified_year>/<%topentry_modified_month>/<%topentry_modified_day>(<%topentry_modified_youbi>)
</time>
<!-- 投稿日 -->
<div class="entry-info entry-datetime">
<%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_youbi>) <%topentry_hour>:<%topentry_minute>(投稿日)
</div>

提案の1, 2を希望される場合は原則ご自身で行って頂くことになりますのでご了承願います。

おりかりお
2023/10/27 (Fri) 19:03

To vanillaice (Akira)さん

Akiraさん、こんばんは。
お返事、ありがとうございましたm(_ _)m

アドバイスいただいたとおり「3. 文字のみで処理する(初心者向け)」で対応しました。
修正内容も記載いただき、ありがとうございます。

>双方をtime要素でマークアップしないよう注意

Akiraさんに問い合わせをしないで自己流のままだったら、両方をtime要素でマークアップした状態のままでした(Akiraさんが推測されたとおりの内容です)。
問い合わせをしてよかったです。

助かりました。
ありがとうございました。


コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)