Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)



名称 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点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


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

Comments 50

There are no comments yet.
-  
管理人のみ閲覧できます

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

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 |   
アマネ  
プラグイン3について

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

2017/03/30 (Thu) 20:13 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/03/30 (Thu) 20:18 | EDIT | REPLY |   
Akira  
To アマネさん

こんばんは ( ゚Д゚)ノ

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

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

2017/03/30 (Thu) 23:46 | EDIT | REPLY |   
よーきー  
サイドバーの幅変更

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

2017/04/04 (Tue) 01:58 | EDIT | REPLY |   
Akira  
To よーきーさん

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

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

2017/04/04 (Tue) 05:00 | EDIT | REPLY |   
よーきー  
よーきー>>keitai70様 

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

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

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

以上になります。

2017/04/04 (Tue) 07:40 | EDIT | REPLY |   
Akira  
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/04 (Tue) 08:39 | EDIT | REPLY |   
よーきー  
To Akira 様

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

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

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

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

です。

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

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

といった具合です。

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

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

2017/04/05 (Wed) 01:03 | EDIT | REPLY |   
Akira  
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) 04:53 | EDIT | REPLY |   
よーきー  
To Akira 様

こんばんは。

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

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


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

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

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

正確には

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

です。

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

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

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

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

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


それから

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

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

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

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


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

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

結論を言えば

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

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


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

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

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

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

2017/04/05 (Wed) 22:00 | EDIT | REPLY |   
Akira  
To よーきーさん

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

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

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

2017/04/06 (Thu) 11:19 | EDIT | REPLY |   
よーきー  
To Akira 様

こんばんは。

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

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

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

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

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

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

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

2017/04/13 (Thu) 03:09 | EDIT | REPLY |   
Akira  
To よーきーさん

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

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

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

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

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

よろしくお願いします。

2017/04/13 (Thu) 13:17 | EDIT | REPLY |   
よーきー  
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

2017/04/14 (Fri) 00:53 | EDIT | REPLY |   
Akira  
To よーきーさん

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

本文

追記

SNSボタン

関連記事リスト

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

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

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

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

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

2017/04/14 (Fri) 01:09 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/05/12 (Fri) 22:35 | EDIT | REPLY |   
Akira  
To Basementの件 内緒さん

ありがとうございます

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

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

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

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

=====

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

2017/05/13 (Sat) 00:42 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/05/13 (Sat) 19:47 | EDIT | REPLY |   
Akira  
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) 20:25 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/05/13 (Sat) 23:01 | EDIT | REPLY |   
Akira  
To Basementの件 内緒さん③

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

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

X
padding: 0 50;

padding: 0 50px;

=====

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

2017/05/14 (Sun) 20:09 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/05/15 (Mon) 14:54 | EDIT | REPLY |   
Akira  
To Basement完了のご報告 内緒さん

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

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

2017/05/15 (Mon) 22:05 | EDIT | REPLY |   

Leave a reply

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