The other way round

ARTICLE PAGE

in テンプレート

Basement

-27 COMMENT


名称 Basement
カラム数 3
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー PC --- 左右/ ブラウザ縮小時・スマホ --- 下
記事幅 可変 最大958px (内寸 898px)
サイドバー幅 固定 250px (内寸 220px)
新着サムネイル表示 あり (右サイドメニュー)
鍵つきブログの方は表示されませんので削除をお願いします

Google Feed API廃止に伴い削除致しました
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

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


valid-html5.png


更新履歴 2017.1.25


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

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


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



更新履歴 2017.1.13


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

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


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



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


べーすめんと
4日申請致しました


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・3カラムレイアウト
・プラグイン1・2 は左サイドメニューに プラグイン3 は右サイドメニューに配置されます


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(全文表示から要約表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更


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



ヘッダー画像指定

ヘッダーに画像を指定される方は

#banner

というのがCSSソース内に1箇所ありますので その項目の

background-color: black;

を以下の通り修正してください

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



ナビゲーションのカスタマイズ

今回はナビゲーションリンクを増やせるような造りになってます
リンクを増やしたい方は以下の点に注意してください

・ 左がグローバルリンク 右がSNSリンクです
リンクが下の段へ繰り越さないようにしてください

特定のページへのリンクや外部サイトへのリンクは左側へ設置されると良いと思います

① リンク追加
<ul class="laft-navi-ul">
  <li><a href="ここにアドレス">表示テキスト</a>
  <li><a href="ここにアドレス">表示テキスト</a>
  <li><a href="ここにアドレス">表示テキスト</a>
</ul>

left-navi-ul で検索されまして 上記の形式で揃えてください
終了タグの
</li>
書かないようお願いします

SNSリンクについては アイコンが準備できるかどうかってのもありますので割愛(すみません)

画面幅が小さくなると左側は折りたたまれます

● 通常時

● 折りたたみ時

● 折りたたみ展開時


一定横幅を下回ると折りたたみになりますが
リンクが増えて 折りたたむ前に中のリンクが下に繰り越す(SNSが下に落ちて2段になってしまう)場合には
デフォルト設定よりも早い段階で折りたたむよう修正してください

② JSブレイクポイント変更
'(max-width: 768px)'

というJSの内容がhtmlソース内に1箇所あります
この緑色の数字を大きくしてください

さらに

③ 修正箇所目印
/* navi breakpoint 1/2 */

④ 修正箇所目印
/* navi breakpoint 2/2 */

上記2つの目印がCSSソース内にありますので 双方を

@media screen and (max-width: ②で修正した数字px)

作業工程は全部で4つです

また 展開時の縦幅は決まっており それ以上の高さになった場合には縦スクロールになります
これはスマートフォンのサイズを考慮していますので
スクロールボックスの高さ変更はされませんようお願いします
高さを増やしてしまうとスマホからアクセスした方がナビ内の下の方にあるリンクをどうやっても押すことができなくなってしまいます(画面外に見切れてしまうため)

この処理の理由を簡単に説明しておきます

① ナビゲーションの高さが変わってしまうと ページ遷移+オブジェクト移動の位置が狂う
② 不格好

特に①ですけれども これは FC2検索バー を表示している場合にも発生します
受信コメントをクリックした際に頭出しの位置が狂います
なので非表示推奨
非表示にして頂きますと 頭出しが正しい位置になるよう設定しています
この関係上
リンクテキストやアイコンのサイズを大きくしたら ナビゲーションの縦幅が大きくなっちゃった
という場合にも狂いが生じますので そちらについては自己責任で (o'ω')ノ
これは「固定ナビゲーション」であるが故です
ブラウザ画面スクロールで上に流れていく通常のナビよりも固定ナビの方がカスタマイズ難易度は4割ほどアップ
ナビゲーションについてこれ以上の複雑なカスタマイズは自力でお願いします ╭( ・ㅂ・)و


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

デフォルトはグレー背景アイコン
サンプル




CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別しています 同じハンネの方がご訪問されると… ごめんなさい (割りきってお使いくださいね)



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


みなさんいつもありがとうございます ( ゚Д゚)ノ
関連記事

TemplateFC2HTML5CSS3Responsive

27 Comments

-  

管理人のみ閲覧できます

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

2017/01/07 (Sat) 20:07 | EDIT | REPLY |   

Akira  

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/07 (Sat) 20:22 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/01/09 (Mon) 17:07 | EDIT | REPLY |   

Akira  

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

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

2017/01/10 (Tue) 01:38 | EDIT | REPLY |   

hige  

プラグイン

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

2017/01/10 (Tue) 17:55 | EDIT | REPLY |   

Akira  

To higeさん

こんばんは ( ゚Д゚)ノ

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

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

2017/01/10 (Tue) 18:36 | EDIT | REPLY |   

Akira  

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

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

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

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

追記リンクの前 に変更

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

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

======

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

2017/01/21 (Sat) 18:40 | EDIT | REPLY |   

Akira  

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) 17:34 | EDIT | REPLY |   

よーきー  

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

2017/03/05 (Sun) 21:24 | EDIT | REPLY |   

Akira  

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) 21:50 | EDIT | REPLY |   

よーきー  

To Akira 様

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

質問の回答です。

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

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

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

2017/03/05 (Sun) 22:48 | EDIT | REPLY |   

Akira  

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 で十分だと思いますので。

2017/03/05 (Sun) 22:57 | EDIT | REPLY |   

Akira  

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/05 (Sun) 23:00 | EDIT | REPLY |   

よーきー  

To Akira 様

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

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

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

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

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

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

2017/03/06 (Mon) 21:41 | EDIT | REPLY |   

Akira  

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) 22:39 | EDIT | REPLY |   

よーきー  

To Akira 様

できました~!!!

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

感謝感謝デス。

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

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

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

2017/03/06 (Mon) 23:24 | EDIT | REPLY |   

Akira  

To よーきーさん

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

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

2017/03/07 (Tue) 17:23 | EDIT | REPLY |   

ゆき  

No title

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

2017/03/08 (Wed) 19:46 | EDIT | REPLY |   

Akira  

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/08 (Wed) 21:21 | EDIT | REPLY |   

ゆき  

bannerについて

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

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

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

2017/03/09 (Thu) 00:10 | EDIT | REPLY |   

Akira  

To ゆきさん

良かったですー

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

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

2017/03/10 (Fri) 02:38 | EDIT | REPLY |   

よーきー  

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

2017/03/13 (Mon) 23:15 | EDIT | REPLY |   

Akira  

To よーきーさん

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

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

SNSボタン関連

関連記事

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

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

.insertBefore('.relate_dl')



.insertBefore('.fc2_footer')

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

.insertAfter('.fc2_footer')

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

2017/03/14 (Tue) 02:14 | EDIT | REPLY |   

よーきー  

To Akira 様

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

2017/03/14 (Tue) 07:23 | EDIT | REPLY |   

Akira  

To よーきーさん

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

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

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

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

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


======= 別件

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

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

2017/03/14 (Tue) 17:45 | EDIT | REPLY |   

よーきー  

To Akira 様

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

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

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

2017/03/14 (Tue) 21:25 | EDIT | REPLY |   

Akira  

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/14 (Tue) 22:06 | EDIT | REPLY |   

Leave a comment

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