attention admin about comments trackbacks you may also like

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

2017年07月18日
テンプレート
39
HTML5 CSS3 RWD
VeryMerryテンプレート

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

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

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

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

①について

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

④について

.inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

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

.inner-contents {
  margin: 20px 0;
}

.inner-contents p {
  margin: 1.9em 0;
}

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

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

更新履歴 2018.12.16
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 個別記事「記事編集リンク」をSNSアイコン並びからSNSアイコン上プロフィール画像に変更(閲覧者に気づかれにくいようカーソル非表示にしてあります)
  • サイドメニュー部プロフィール画像を横100%に調整(旧来よりも大きくなります)
  • 個別記事ブラウザサイドページ送り(カテゴリ間移動用)のスクロール動作を逆に調整(下スクロールで非表示、上スクロールで表示)
  • IE用ポリフィル導入(object-fitプロパティ未実装のため)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • ページ表示時のアニメーション秒数を調整(旧来よりも若干速めました)

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

更新履歴 2018.1.12

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

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

VeryMerryテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

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

学校行事やビザ申請等々で疲労困憊気味のあきらでございます (´-ε-`;)

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

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

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

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

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

必須個人設定

Necessary personal settings

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

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

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

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

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

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

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

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

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

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

全体幅調整の仕方

How to increase or decrease width of container

デフォルトは全体像の最大横幅を 1300px に設定しています。1300 で検索して頂きますと、CSSソース内に 2箇所 ありますので、2箇所全てを希望の数値(同数値)に変更してください。

やー。でもあんまwidth変更とかしない方が良いかもしれん。
クソIEがまたふざけた行動に出るかもなので (´-ε-`;)

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

How to reverse the direction of rows

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

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

サイドメニューのプロフィールについて

About profile picture and description in aside menu

本テンプレートにはサイドメニュー部にプロフィールをデザインの一部としてデフォルト導入してあります。公式プラグイン「プロフィール」を設定されている場合には重複しますので個人設定でプラグインを非表示にするか、テンプレート内のプロフィール関連htmlを削除してください。

【プラグイン非表示】
プラグインの設定

【テンプレートhtml削除ガイダンス目印】

注)プロフィール不要の方ここから削除

ナビゲーションについて

Important thing to be careful when adding links to navigation

● 管理画面への誘導について
Admin という単語が日本では馴染みが薄いようなので。
FC2ブロガー「ではない」方がクリックするとログイン画面に遷移するという点も考慮して、Log in に変更しました。
もちろんカスタマイズとしてテキスト内容を変更しても問題ありません。ご自身(と閲覧者)にとってわかりやすいと思われる単語をお選びください。

● ナビゲーション内リンクについて
ナビゲーション内容の追加やリンクテキストの日本語置き換えをされます方は 各リンク要素が下の行へ繰り越さないよう留意してください。
レスポンシブデザインですのでパソコンでの作業を一定の幅だけで行わず、マウスでブラウザ幅を拡大・縮小しながら見た目を確認してくださいね。文字数が多い、リンク数が多い、などが原因で内容が下に繰り越してしまう場合には

navi breakpoint

で検索されますとhtml, CSS各ソース内に合計2箇所ヒットします。それぞれの

(max-width: 850px)

緑の部分 850 を 大きな数字に変更 してください。この処理でデフォルト設定よりも早い段階で折りたたまれるようになり、レイアウトに影響を与えません。

● Aboutについて
こちらは予備リンクです。誘導したいページがあれば、About を適切なテキストに置き換えた上で、リンクアドレスを設定してください。不要であれば削除。

該当部位検索

注)予備リンク

カスタマイズ

<li><a href="ここにリンクアドレス">テキスト</a>

デフォルトのままでは空リンクですので、削除あるいはリンク設定いずれかの処理をおすすめします。

ドミナントカラー

Dominant colors

以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。
例) 51,51,51

rgb(235,226,217) 全体背景色
rgb(175,166,157) 基本リンク色 など
rgb(170,201,198) ナビゲーション背景色 など

削除可能なJSについて

Delete specific JS if you want to

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

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

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

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

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

Cautions before asking for something.

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

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

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

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

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

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

コメント(39)

There are no comments yet.

Akira

2017/07/20 (Thu) 15:48

To VeryMerryアドセンスの件 内緒さん(移動先)

> アドセンスがはみ出す件〜

http://vanillaice000.blog.fc2.com/blog-entry-170.html#comment3839

ソース自体ちょっとあまり良くないというか、修正の必要がありますが、とりあえず「併せて読む」の部分について。
これのことですよね。サイドメニュー部まで侵食するというのは。
これ「関連コンテンツユニット」だと思うのですが、特徴をお伝えします。
内緒さんにJSの知識がお有りかどうか測りかねますので、なるべく簡単にわかりやすく説明できれば良いのだけれど ^^;

レスポンシブと一口に言っても、2つのパターンがあります。
主に「横幅」についてですので、幅 = 横幅 だと思って読んでください。

① 初回アクセス時(読み込み時、ローディング時)に幅が合致していればOK。
② 初回アクセス時はもちろん、読み込み後にブラウザ幅を変更してもちゃんとそれに合わせた調整を行ってくれる。

私のテンプレート自体は②です。
関連コンテンツユニットはどうかというと①なんですね。
幅を調整するのはローディング時のみ、なんです。
何度か検証しましたが、現在の内緒さんのページでも「ローディング直後にもう既にはみ出している」といったことは起こらないはずです。
ローディングをし、その時点ではちゃんと収まっていて、その後でブラウザサイズを変更するとはみ出す、という流れではないでしょうか。

JSの挙動でいうと、
①は
$(function()
あるいは
$(window).on("load",function()
です。
これは「ローディングする時に処理しますよ」「ローディングして全部内容を取り込んでから処理しますよ」といった動作。

②は
$(window).on('load resize', function()
「ローディングした時に処理しますよ。そしてリサイズが行われた時にも処理しますよ」という動作。

レスポンシブでは「リサイズ」という概念があります。
でもこれはパソコンだけ、なんですよね。
タブレットやスマホでは基本的に画面のリサイズ(ブラウザリサイズ)というのは行われません。
その代わり「ランドスケープ」という「横倒し」状態がありますが、デバイスを横に倒した際にはデバイスを縦で表示する時よりも画面は必然的に「大きく」なります。
ですからリサイズしなくとも画面内からはみ出ることはありません。
なのでローディング時のみ処理をしておけばそれでオッケー。
ところがパソコンではブラウザ幅の任意変更というのが行われることがありますので、ローディング時のみの処理では片手落ちになります。
Googleはこの片手落ち状態で提供しているわけです(笑)

もう仕方がないですよね。Googleはモバイルファーストを進めていて、パソコンの方へ目を向けてはくれないようです。
というわけでこれはGoogleの仕様ですのでユーザーサイドではどうしようもありませんです。残念ながら (´・ω・`)

Akira

2017/07/20 (Thu) 16:10

To VeryMerryアドセンスの件 内緒さん②

で、内緒さんはカラムの入れ替えを行いますので、はみ出す方向は「右側(サイドメニューの無い方)です。
そしてVeryMerryでははみ出した要素は「カット」する仕様ですので、横スクロールバーは出現せず「見切れる」という状態になります。
Ranchuの場合は見切れではなくはみ出し(横スクロールバー)

---------

ソース内容を一度綺麗にした方が良いと思います。

● htmlタグに大文字は用いない
例)
X FONT size
✔ font size

● 廃止要素は利用しない
例)
X <center>〜</center>
✔ <div style="margin: auto;">〜</div>

X <font size="1">〜</font>
✔ <span style="font-size: 10px;">〜</span>

● html要素内で改行を行わない
例) 属性間に半角スペース挿入でなく改行を行っている
X <ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px">

✔ <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px">

修正必須箇所を挙げておきます。


<center> と </center> を

<div style="margin: auto;"> と </div> に変更。2箇所あります(開始タグ1, 終了タグ1, 合計2)


<FONT size="1">スポンサードリンク</FONT>

<span style="font-size: 10px;">スポンサードリンク</span>


<ins class="adsbygoogle"

を目印に。ヒットするのは3箇所。
これに続く内容を、改行を取り除き半角スペースに置き換え。
1箇所目に3つ、2箇所目に3つ、3箇所目に4つ、合計10。
もう一度例えを書いておきます。

X例)
<div class="hoge"
style="display: block;"
data-hoge="hogehoge">

✔例)
<div class="hoge" style="display: block;" data-hoge="hogehoge">

ここについてはGoogleがこのコードを提供してくるのかもしれませんので、良くはありませんがそのままでも仕方がないのかなぁ、と思います。
なので任意修正で。


<div style="font-weight:bold;"><FONT size="3">あわせて読む</FONT></div>

<div style="font-weight: bold; font-size: 13px;">あわせて読む</div>

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

-

2017/07/21 (Fri) 00:54

管理人のみ閲覧できます

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

Akira

2017/07/21 (Fri) 01:43

To VeryMerry ナビゲーション内容追加の件 内緒さん

えーとですね。みなさん結構ナビゲーションにこれがあると便利、あれも欲しいこれも欲しい、という感じでどんどん追加してしまわれるのですが。
本来「グローバルナビゲーション」というのはサイト内の主要ページ間をスムースに行き来するためのものです。
追加事項があるとしても、せいぜい外部に持ちサイトがあるならばそちらへの誘導とか。
ですからやたらと項目を増やす性質のものではないんですね (´・ω・`)
そこをまずご理解頂きたい。
ナビ内リンク数が多いと閲覧者は混乱しますので、便利が翻って寧ろ…と言う感じです。
そして基本的にナビゲーションのカスタマイズというのはタイプにもよりますが、非常に高度です。
単純にリンクをひとつづつ追加するだけならば初心者向けというか、誰にでもできますが。
一覧を出したりモーダルウィンドウにしたり、ロールオーバーやクリック開閉など、導入自体も難しいですし、その手順説明するのも難しい(笑)

FC2ブログの特徴
・カテゴリ一覧 --- 「カテゴリ一覧」つまり全カテゴリリンクが集まったページはありませんので、カテゴリが10あるのならば全部で10の各カテゴリ一覧ページがあります。
例) カテゴリ名「日記」「旅行」「美容」
X 全カテゴリ一覧ページ (同ページ内に全カテゴリの羅列) --- 無い
✔ 各カテゴリ一覧ページがそれぞれ存在 --- 「日記カテゴリ一覧」「旅行カテゴリ一覧」「美容カテゴリ一覧」

・お気に入りのブログ
これはサイト内リンクでもありませんし、それこそasideメニュー(ページ内コンテンツと関連はあるが主にはなり得ない)として考えた方が良いですね。
グローバルナビゲーションに追加する類のものではありません。

・コメント一覧 --- コメントの一覧ページというのはFC2ではスマホ版にしかありません。最新コメントのことでしょうかね。

--------

VeryMerryの一つ前にリリースしたテンプレに「Empty-street」というのがあります。
http://vanillaice000.blog.fc2.com/blog-entry-545.html
こちらはトップページにサイドメニューがありませんので、ナビゲーションに「カテゴリ一覧」「最新コメント一覧」を入れています。
VeryMerryは常にサイドメニューがありますので、ナビに追加する意味があるのかどうか、というところです。
ここまでの内容を踏まえた上で追加される場合には、Empty-streetのナビゲーションとほぼ同じ内容ですので、そちらと照らし合わせてご自身で移設をお願いします。
コメント欄でソースをお伝えするにはあまりにも文字数が多すぎます(笑)
あるいはこちらのページを参考に

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

メールフォームの追加の仕方ですので、内容についてはメールフォームから「カテゴリ」「コメント」に変更が必要です。
そしてFC2独自変数を使わなければいけませんので、大変特殊な内容です。
んー。Empty-streetからの移植の方が楽かもです (´・ω・`)
よろしくお願いします。

-

2017/07/21 (Fri) 22:02

管理人のみ閲覧できます

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

Akira

2017/07/21 (Fri) 23:33

To センタリングの件 内緒さん

> アドセンス広告のタイトル部分から始まるこの部分〜中央揃えではなく左揃えになってしまいます〜

「何を」センタリングするかによります。
margin: auto; というのは「全体像」を中央揃えにします。
その全体像の中にある「テキストや画像」をセンタリングするには margin: auto; は使いません。
テキストのセンタリング、という解釈で合ってますでしょうか。
以下の通り修正してください。

<div style="margin: auto;">〜</div>

<div style="margin: auto; text-align: center;">〜</div>

本件に関する内容は以下のページを参照のこと。

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

よろしくお願いします。

-

2017/07/21 (Fri) 23:51

管理人のみ閲覧できます

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

Akira

2017/07/23 (Sun) 01:13

To センタリングの件 内緒さん(完了のご報告)

なんとか上手く体裁が整いましたでしょうか。
例の「あわせて読む」はサイドメニューに設置し直されたんですね。
そうですね。それが最適解だと思います(笑)
作業お疲れ様です

-

2017/07/24 (Mon) 00:30

管理人のみ閲覧できます

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

Akira

2017/07/24 (Mon) 01:43

To 広告掲載位置の件 内緒さん

こんばんは (●'0'●)/

> 広告位置の違反や位置について〜

違反についてはなんとも言えません。
adsenseの規約が変更になって、現在だと「何点まで」ということにはなってないですよね。
ただし現在でも掲載数が多すぎるページへのペナルティは十分ありえます。
数としては今もうギリギリのところだと思います。
特に全文表示タイプですので、トップページの掲載数を増やせば自動的に1ページ内の広告数も増えますので注意が必要かもしれません。

上記が「数」について。
で、本題の「位置」なんだけども。
基本的に広告は誰からも嫌われるものだ、ってことですよね (´・ω・`)
結論から言うと違反ではありません。
効果的な掲載位置は
・ヘッダーの「上」
・サイドメニューの「スクロールしなくても見えている範囲」
見出し直後
とかまぁ、色々言われていますが。
あくまでもこれは「目立つから」という意味であって、「閲覧者がどう感じるか」とは全く別物です。
「目立つ」を言い換えれば「邪魔」ってことです。乱暴に言えば(笑)

見出し下というのは嫌でも目につきますので、その通り「嫌だ」と感じる方にとっては害でしかないです。
固定読者というのは広告を見に来るわけではなく記事内容を見に来るわけなので、そのあたりのバランスはやはり考える必要はありますよね。
実際に読者の方から「ウザい」という反応があるのならば、やはりそこは考えた方が良いと思います。

あとは広告の種類ですかね。
広告位置がベストだとしても、例えばファッション系ブログに衣類販売のリンク。
例えばweb情報系ブログにエンジニア募集。
こういうのはクリックしてもらえる機会も多いかもですが、全然関係ないものなら押してもらえないどころかただひたすらウザい(笑)

なかなか折り合いが難しいかもしれませんが、私がもし掲載するのならやはり見出し下は避けて記事下に置きます。
理由は「ウザいと思われるだろうから」(笑)

-

2017/07/24 (Mon) 19:58

管理人のみ閲覧できます

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

-

2017/07/27 (Thu) 00:31

管理人のみ閲覧できます

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

Akira

2017/07/27 (Thu) 01:02

To コメント欄の件 内緒さん

こんばんは (●'0'●)/

まず、ごめんなさい。私7/24に頂いたコメントを見落としておりました。
大変失礼致しました (*_ _)

> コメント投稿欄にある太字にしたり下線を引くところが、上下のスクロールバーでほとんど隠れてしまっている〜…これは敢えてこうしたデザインに〜

いえ。していません(笑)
コメント装飾用のツールのことでしょうか。

http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/9a8d9oew2th.jpg

スクリーンショットは内緒さんのページから取得しています。
パソコン閲覧時でしょうか。スマホでしょうか。
あるいは両方?
ちょっと状況が見えてきませんので、ご利用のOSとブラウザ名を教えてください。
例)
Windows10, Microsoft Edge
Android6.0, Google Chrome
など

よろしくお願いします。

Akira

2017/07/27 (Thu) 01:37

To コメント欄の件 内緒さん②

別件で気になる点を一つ見つけましたのでお伝えしておきます。

サイドメニューのプラグインに展開型のアーカイブをご利用かと思います。
この展開の動作はアンカータグ(<a href="#">〜</a>)を用いて行われています

このhrefの#(ハッシュ)なんですが、html5ではURL末尾に #●●● が付いていると「ページ内移動」する仕様になってるんですね (´・ω・`)
ですから
<a href="#">
この意味は # の後ろに続くid名を持つ要素まで移動、ということになってしまいます。
本件の場合はid無しの「空」ですが、空でも移動はしてしまいます。
これhtml4から5へ移行した際の変更点で、htmlのバージョンによって挙動が違ってしまうんです。
(html4では <a name="●●"> がページ内移動として使われていました)
なので私のテンプレートに限らず、
・html5である
・ページ内スクロールが導入されている(ページtopボタンなど)
上記の場合には、クリックすると画面最上部までスクロールしてしまいます。

対処法
① html5に準拠したプラグインに変更する
② カスタマイズをする(プラグイン, テンプレート共に修正が必要です)

カスタマイズされる場合は以下の手順に従ってください。

------- プラグイン

<a href="#" title="OPEN"

を見つけ、以下の通り追加修正

<a id="open-plugin-btn" href="#" title="OPEN"

続いて

<a href="#" title="CLOSE"

を見つけ、同じく以下の通り追加修正

<a id="close-plugin-btn" href="#" title="CLOSE"

---------- テンプレート

htmlソース内の

o=40;$('a[href^="#"]')

の部分を以下の通り追加修正

o=40;$('a[href^="#"]:not(#open-plugin-btn):not(#close-plugin-btn)')


これでできるはずですが、実物で検証したわけではないので絶対とは言いません。
必要であれば一度お試しください。

-

2017/07/28 (Fri) 01:28

管理人のみ閲覧できます

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

Akira

2017/07/28 (Fri) 03:32

To VeryMerry コメントJSの件 内緒さん

こんばんは (o'ω')ノ

アーカイブの修正は完了したようで良かったですー。
お疲れ様でした。

> コメント装飾用ツール(コメントJS)の表示がおかしい件〜

うーん。私の環境下、Windows10, Google Chrome では特に問題ないようです。
キャプチャを取りましたのでご確認ください。
(以下全てWindows, ブラウザのバージョンは全て最新)

● Chrome
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/captureth.jpg

● Edge
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture-edgeth.jpg

● Firefox
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture-firefoxth.jpg

● IE11
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/capture-ie11th.jpg

--------

Chrome以外のブラウザで確認はして頂きましたでしょうか。
EdgeとIE11は必ずバンドルされていますので、それぞれ目視確認をお願いします。
表示がおかしいな、と思った時には別のブラウザからも閲覧してみることで解決の近道になることがあります。

内緒さんにして頂きたいこと
(蛇足も含まれるかと思いますが、一応簡単なやり方等も書いておきます。ご存知でしたらごめんなさい)

① 問題が確認できるよう、スクリーンショットを撮る
Snipping tool というのがWindowsにはありますので、そちらをご利用ください。

② 別のブラウザで表示確認をし、それぞれスクリーンショットを撮る

③ Chromeのバージョンを確認する, bit確認をする
アップデートが手動に設定されている場合、知らずと長く更新していない方もいらっしゃいます。
右上 ︙ マークをクリック → 「ヘルプ」にマウスオーバー → 「Google Chromeについて」をクリック。
これで更新が始まった場合、最新バージョンではなかった、ということになります。
Chromeのサポートは最新版とその一つ前のバージョンのみですので、常に最新の状態を保つようにしてください。
(Firefoxなども同じです)

この時同時に bit確認をしてください
こんな感じで出ます ↓

バージョン: 60.0.3112.78(Official Build) (64 ビット

64か32のいずれかです。

④ Windowsのbit確認をする
コントロールパネル > システムとセキュリティ > システム
「システムの種類」という項目に
●●ビットオペレーティングシステム
と書いてあります。●●の数字はやはり 32 あるいは 64 のいずれか。

-------

bitの確認についてですが、パソコンのOSが64bitなのにも関わらず、Chromeを32bitでインストールしている方が非常に多いんですね。
仮にパソコンが32bitならばChromeも32bitにしておいた方が良いとは思いますが、Chromeは既に32bit版のサポートを終了しています。
もしパソコンが64bit対応であれば、Chromeも64bitに変更してください。
でないと動作が重たいだとか、しょっちゅうクラッシュするだとか、表示がおかしい、といったことが起こります。

もし上記に該当している場合ですが、
32bit版と64bit版は全く別のものですので、クリーンインストールすることになります。
設定が引き継がれるよう、Googleアカウントログインをお忘れなく。

一度これでご確認をお願いします。

---------

> 私のブログのページを私以外の閲覧者さんが見た時、正しく表示されているのでしょうか?
FC2のランキングに参加していて〜そのページを見ると、左サイドバーが消えている〜

これは閲覧者のブラウザのバージョンが既にサポート切れのもの、例えばIE10以下やその他モダンブラウザでもかなり古いバージョンのものだったりすれば、それは正しく表示できません。
サポート切れブラウザについては後方互換を行っていません。
ちゃんとブラウザやOSの更新を怠っていないのであれば、きちんと表示されているはずです。
動作確認については記事内にある表を御覧ください。

ランキングの画像はスクリーンショットです。
内緒さんがカスタマイズを行う前、あるいはカスタマイズ中に撮られたものかもしれません。
それが証拠にメインコンテンツが左に寄っています。
どのタイミングで取得されるかはユーザーでは選べませんので、運が悪かったというかなんというか(笑)
あるいは取得する際に利用したブラウザ(運営が利用しているブラウザ)が古いのかもしれません。
(まぁ、無いと思いますが)
またあるいは、内緒さんのページにはJSが多く含まれます(アドセンスなどがあるため)
なのでショットの時点でページ整形が間に合わなかったというのも考えられます。

それからスクリーンショットというのは、撮り方によっては完璧にはなりません。
固定ナビゲーションなどが崩れて表示されたりするのはよくあることです。
(スクロール動作が行われるとスクショは崩れます)

クリックして実際のページにたどり着いた際には先に述べた要件と合致していれば正しく表示されますし、スクショ自体は小さなものですので詳細はわかりません。
なので特に気にする必要は無いと思います。

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

-

2017/07/28 (Fri) 05:37

管理人のみ閲覧できます

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

Akira

2017/07/28 (Fri) 15:16

To VeryMerry アーカイブと写真の件 内緒さん

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

> 折り畳みを広げる時はいいのですが、たたむ時にアーカイブの位置に戻らず〜

こちらについては私が製作したものではありませんので、機能的な部分を私が修正するというわけにはいきません。
先日のカスタマイズは「IDを付与してスムーススクロール対象外に指定する」というだけで、機能面には一切手を入れていません。
なので製作者様に直接お問い合わせをお願いします。

> 写真のコツ〜

えっと。私も写真の撮り方が下手くそです(笑)
構図とかてんでなってない ^^;
写真の撮り方については他の方にお尋ねくださいね。
ってゆーか、私も教えて頂きたいぐらいで(笑)
ひとつだけアドバイスですが、サムネイル対象の画像には枠などの加工はされない方が良いかもしれません。
画像による編集だとサムネイルになっても枠がついてしまいますが、CSSならば素のままです。
場合によってはテンプレートのイメージと合わないことも出てくるかと思いますので、画像装飾はなるべくCSSで (・ω・)b
(VeryMerryでは img に class="shadow-attachment" を追加することでドロップシャドウがつくようになってます)

-

2017/07/28 (Fri) 17:11

管理人のみ閲覧できます

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

Akira

2017/07/29 (Sat) 00:21

To VeryMerry アーカイブと写真の件 内緒さん

お疲れ様です (●'0'●)/

アーカイブの件はお役に立てず申し訳ないです。
写真の枠の件はそうですね。その方が今後のことも考えるとおすすめです。
いつもありがとうございます

大雪

2017/10/22 (Sun) 20:07

ブログタイトルをファントから画像に変更できますか?

こんにちは。VeryMerryを使用させていただいています。
とても単純な質問で申し訳ないです。ブログタイトルの表示を、フォントから、用意したロゴ画像に変更したいのですが、可能でしょうか?自分で色々調べてみたのですが、力及びませんでした…。
もし仕様で不可でしたら諦めます。可能かどうかだけで結構ですので、ぜひお知らせください。よろしくお願いします。

Akira

2017/10/22 (Sun) 22:23

To 大雪さん

ありがとうございます

> ブログタイトルの表示を、フォントから、用意したロゴ画像に変更したい〜

<%blog_name>
でCtrl+F(Windows)/ Command+F(Mac)キー検索されますとhtmlソース内に10箇所あります。
9箇所目が対象です。

<a href="<%url>"><%blog_name></a>

となっているところを

<a href="<%url>"><img src="アドレス" alt="ブログ名" style="width: 数値px;"></a>

に変更してください。
原寸で表示するならば赤字部分は不要で、自動的に最大でも800pxまでで収まるのがデフォルトの指定です。
表示サイズを800px以下にする場合にはwidthに800以下の数値を入れてください。
基本的にはこれでできますが、用意している画像によります。
対象の画像がどういったものか私ではわかりませんので、以下の記事にある注意点と照らし合わせてくださいね
よろしくお願いします。

https://vanillaice000.blog.fc2.com/blog-entry-569.html
https://vanillaice000.blog.fc2.com/blog-entry-566.html

大雪

2017/10/23 (Mon) 17:40

ブログタイトルをロゴ画像に変更する件

早速の返信有難うございます。
すでに解説記事があるのに気がつかず、慌てて質問してしまってすみませんでした(ーー;)
画像はこれから制作します。
教えていただいた内容で作業を進めます。
ありがとうございました!

Akira

2017/10/23 (Mon) 22:54

To 大雪さん(終了のご報告)

いえいえ。どうぞお気になさらず。
はい頑張ってください

とくさん

2017/11/16 (Thu) 19:02

こんにちは。VeryMerryを使用させていただいています。
以前こちらのテンプレートを利用させてもらい新しくまたこちらのを変えようとしてるのですが
このテンプレートの記事タイトルの色を変更したいとき、どのCSSの場所を変更すればいいのでしょうか?

前よりもかなりコードが増えてたりで中々見つかりません。
colorとentry-titleとかでワード検索かけて変更して探してみたりしてるのですが見つからなくて(汗) 助けてください(><)!

とくさん

2017/11/16 (Thu) 19:04

補足:文字の色じゃなくて記事バーの色です

とくさん

2017/11/16 (Thu) 20:21

補足:2 度々すいませんURLです。本当にすいません( ;;) http://myumyu1412.blog.fc2.com/

Akira

2017/11/16 (Thu) 21:02

To とくさんさん

こんばんは。
テンプレートが違うようですが(Ivory設定中)、VeryMerryで良いんでしょうか。
一応確認です。
そして記事バーというのはナビゲーションのことですか?
設定をして頂くことでカスタマイズ中であればなんとなく判断がつきます(全体の色調などから)が、設定されていないと用語の使い方によっては伝わりません。
作業効率化のために該当テンプレートを設定した状態でお問い合わせくださいね。
(ご質問時のお願いごととしてリンク先に明記しています)
次回からご配慮頂けると助かります。

グローバルナビゲーションということでお話をすすめます。

記事本文の「ドミナントカラー」の見出しで説明してある通り、ナビの背景色は
rgb(170,201,198)
ですのでCtrl+F(Windows)/ Command+F(Mac)キーで検索してください。
naigation と記してありますのですぐわかると思います。
ご質問の要件がナビで合っているのならば、ですが。
リボンの切れ端の色についてもカスタマイズのガイドが入れてあります。
こちらも本文中にあります通り

注)

で検索して頂くことでカスタマイズを行いそうな部位については事前にガイダンスを入れてあります
よろしくお願いします。

とくさん

2017/11/16 (Thu) 21:50

To Akiraさん

お手数おかけしてすみません(><) VeryMerryです。

記事の本文タイトルの部分です。リボンが付いているナビゲーションバーは(※)と色コードで
判別できてすぐ変えられたのですが記事タイトルのほうがどうしてもわかんなくて……。whiteと透明(rgb(51,511,51))ぽいので検索しましたが駄目で。

テンプレート適応しましたのでご確認いただけると幸いです。
複数ブログもってて今HTMLやってるやつがこれです http://idolmstervslovelive.blog.fc2.com/

Akira

2017/11/16 (Thu) 22:15

To とくさんさん

ごめんなさい。やっぱちょっとよくわからないです (´・ω・`)
記事タイトルですか?
ブログタイトルではなく。
「記事の本文タイトル」というのは「記事タイトル」でしょうか。

・日付
・トラバ&コメント
・記事タイトル
・カテゴリ

この4つはセットになって記事のヘッダー(ページ全体のことでなく記事(article)のヘッダー)としてhtmlを組んでありますが、そこへ背景色を付けたいということなんでしょうか。
デフォルトではヘッダー部の背景は transparent です。
つまり「背景色無し」ですからいくら探しても出てはきません。
該当箇所が不明なのでなんともお答えのしようが無いのですが (´・ω・`)
とくさんが「何をしたいのか」を教えてください。

とくさん

2017/11/16 (Thu) 22:33

要領悪くて申し訳ありません……(´・ω・`) 記事タイトルです。
記事タイトルの背景色を変えてみたい、ということでして

たぶん上記4つですと・記事タイトル・カテゴリだと思います。
「最新記事」とか「プロフィール」って出てるところなどで、下に線が伸びてるタイトル部分?のところです。

あと、rgb(170,201,198)などカラーコード差し替えて入れる方法で探しておりました。

Akira

2017/11/16 (Thu) 22:50

To とくさんさん

えーと。ごめんなさい。
ますますわからなくなっちゃったんだけども(笑)

私が言ったのはここのことです
https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/captureheadervery9983.jpg

> 「最新記事」とか「プロフィール」って出てるところなど〜

記事ではなくサイドメニューのことですか?右側にある、プラグインが収まっているところですが。
記事タイトルでなく「プラグインタイトル」のこと… なのかなぁ(汗)

> 下に線が伸びてるタイトル部分〜

??? ごめんなさい。わからない… ( ̄∀ ̄;)

> rgb(170,201,198)などカラーコード差し替えて入れる方法で探しておりました〜

どこを差し替えるのかがわかりません。また、「差し替える」ものであるかもわかりません。
そもそも指定が無ければ「差し替える」というのはできないわけで。

えと。スクリーンショットを取って頂けないでしょうか。
すみません ^^;


------- 追記
下に線が伸びてる〜

というのはボーダーのことかしら。
点線の。

とくさん

2017/11/16 (Thu) 23:21

ここの部分です
https://sukusho.nu/2HbE/
https://sukusho.nu/2HcZ

色を変えたいのですが(文字ではなくメニューバーの色)、本当にすいません名称もよくわかってなくて

タイトルが付いてるメニューバーの事でして、Akiraさんのブログのここのページですと
「VeryMerry - FC2ブログテンプレート」と書いてる記事のタイトルのメニューバーや、
カテゴリの「タグ検索」「最新トラックバック」サイドメニューの名前のバーのところです。

Akira

2017/11/16 (Thu) 23:24

To とくさんさん

パスワードがかかってて見られません。

ちょっと外出しますので、戻り次第お返事しますので、スクショが見られるようにしておいてください(笑)

とくさん

2017/11/16 (Thu) 23:24

違う人のテンプレートサイトですが、青くなってる部分です。
http://fuyutuki703.blog.fc2.com/blog-entry-2971.html

とくさん

2017/11/16 (Thu) 23:55

タッチの差でコメント書いてしまってました。再添付します。
コメント後で消していただいて大丈夫ですし、ぜんぜん急ぎでもないので都合の良い日で大丈夫ですので……
一応Akiraさんのコメントあるまで深夜2時すぎまでいますのでゆっくりしててくださいませ。

https://sukusho.nu/2HbE/ (Pass hm2u)
https://sukusho.nu/2HcZ/ (Pass oo0h)

Akira

2017/11/17 (Fri) 00:18

To とくさんさん

相方を駅に迎えに行っておりました (ノ゚ェ゚)

要するに「記事タイトルとプラグインタイトルに背景色を付けたい」ということですね。
独自用語でお話されますと誤解が生じますので、なるべく避けたほうが解決は早いです。
「メニューバー」というのは一般的に「ナビゲーション」のことを指します。

------
.entry-title {
でCtrl+F(Windows)/ Command+F(Mac)キー検索、CSSソース内に1箇所あります。
以下がデフォルトの内容です。
(赤字の説明は今私がここで付けましたのでソース内には含まれません)

.entry-title {
margin: 0 auto 10px; --- 先行要素(トラバ・コメント)との外側距離は0、後続要素(カテゴリ)との距離は10px
border-bottom: 2px dashed rgb(235,226,217); --- 記事タイトル下ボーダー
line-height: 1.4; --- 行間指定
padding: 10px 0; --- 内側の余白(marginとは役割が違いますが、こちらも先行・後続の距離です) は上下10px 左右0
font-size: 18px; --- フォント大きさ
font-weight: bolder; --- 太字
}


上記内容を踏まえてカスタマイズをしてください。
背景色は「差し替え」ではなく「追加」です。
以下の内容をfont-weight: 〜 の下に記述。

background-color: カラーコード;

-------
背景に色を付けた場合、marginとpaddingをきちんと区別してください。
paddingは 背景色の範囲が増えます(要素の「内側に設定するため)、marginは背景色の範囲よりも「外側」の余白です。

デフォルトでは左右のpaddingを設定していませんので追加した方が良いと思います。
でないと辺にテキストがぴったりくっついて非常に読みづらくなります。

-------- ここまでが記事タイトルです。ここからプラグインタイトルの説明

.side-menu h4 {
が該当です。
デザインを揃える・揃えないはご自身でお決めください。

なかなか噛み合わずお手数おかけしました。
よろしくお願いします。

とくさん

2017/11/17 (Fri) 00:52

カラー変更の確認が取れました。
こんなに丁寧に対応していただいてありがとうございました…。
これ変えるのに2日悩んでて無事、解決できて物凄く安堵いたしました。

そして長い時間、クロストークさせてしまい本当にすいませんでした。
上記の丁寧な解説もとても参考になります。重ね重ねありがとうございました。

Akira

2017/11/17 (Fri) 01:23

To とくさんさん(完了のご報告)

こちらこそお時間頂きました。
お疲れ様でした

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

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