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

VeryMerryテンプレート

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

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

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

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

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

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

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

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

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

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

更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

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

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("prev-a");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("next-a");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("circle-left");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("circle-right");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>var start_pos=0;$(window).scroll(function(e){var a=$(this).scrollTop();if(a>start_pos){$('.side-pager-left,.side-pager-right').removeClass('appear')}else{$('.side-pager-left,.side-pager-right').addClass('appear')}start_pos=a});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

【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.1
  • コメント主のリンク表示用JS及びデザインの変更
  • SNSアイコンのIE向け調整
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)
【重要】テンプレートの変更点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-->

続きまして <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について

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

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

更新履歴 2018.1.12
  • メンテナンスを行いました

詳細は以下のページでご確認ください。

VeryMerryメンテナンスのお知らせ

VeryMerryメンテナンスのお知らせ

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

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

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

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

サンプル

Samples

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

カスタマイズのコツ

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設定「有効にする」

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

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

Common customization.

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

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

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

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

記事編集リンクについて

The position of edit link.

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

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

Cautions before asking for something.

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

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

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

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

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

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

管理人のみ閲覧できます

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

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

よろしくお願いします。

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

管理人のみ閲覧できます

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

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

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/07/29 (Sat) 00:21

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

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

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

大雪
2017/10/22 (Sun) 20:07

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

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

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

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

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

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

vanillaice (Akira)
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日悩んでて無事、解決できて物凄く安堵いたしました。

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

vanillaice (Akira)
Akira
2017/11/17 (Fri) 01:23

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

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

-
2020/04/14 (Tue) 15:09

管理人のみ閲覧できます

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

vanillaice (Akira)
AKira
2020/04/14 (Tue) 20:27

To VeryMerryをご利用中の内緒さん

こんばんは。

> サイドメニューをクリックした後、そのままカテゴリーページではなく、特定の1ページへ進みたい〜

ちょととよくわからないんですが、サイドメニューの「何を」クリックした後なんでしょうか。「カテゴリページではなく」とあるのでクリックしてカテゴリに行くプラグインというと内緒さんの場合はサイドメニュー部にある「Menu」という名称にしてあるもののことでしょうか。

「今ある(掲載している)ものの何かを修正したい」のか、それとも「特定のページにリンクさせるhtmlを教えてくれ」ということなのか、それともまた別の何かなのか。特定のページへリンクさせるということならばプラグインの「フリーエリア」をダウンロードするなどして掲載場所を設け。html内容を

<a href="ページアドレス" >表示テキスト</a>

やりたいことがよくわからないので「対象の特定(修正したい対象 あるいは新規作成なのか)」と「行いたいことを明確に」お知らせ頂けると助かります。よろしくお願いします。

-
2020/04/14 (Tue) 21:31

管理人のみ閲覧できます

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

vanillaice (Akira)
AKira
2020/04/14 (Tue) 21:50

To VerryMerryをご利用中の内緒さん②

となると、今の「Menu」とは用途が全く違ってしまいますが大丈夫でしょうか。
これは閲覧者が「読みたいカテゴリ」をクリックし、当然期待される結果としてはその「読みたいと思ったカテゴリに分類されている記事のリスト」です。
本来のカテゴリリストというのはそういう使い方なので、カテゴリ分類を見直すというのが一番良いんですが、そうも言ってられないでしょうから今回はまず そのプラグインを非表示 にしてください。
カテゴリ名を押してもそのリストに行かせない、という処理を行うのですから表示させる必要はない、というか閲覧者が混乱するだけだと思います。そしてそのプラグインのhtml内容を変更してしまうと後で困ったことになる可能性も出てきます。なのでこちらは流用しない。

既存のカテゴリプラグインを非表示にした上で、公式プラグインの「フリーエリア」をダウンロード、表示状態にしてください。
html編集をクリックし、そこにリストを手打ちされると良いと思います。雛形は以下の通りです。

<ul>
<li><a href="ページアドレス">適切なページ説明タイトル</a>
<li><a href="ページアドレス2">適切なページ説明タイトル2</a>
<li><a href="ページアドレス3">適切なページ説明タイトル3</a>
</ul>

必要と思われる数だけ li要素 を追加します。別タブで開きたい場合は(同ブログ内だけの遷移だと仮定して)

<a href="ページアドレス">

<a href="ページアドレス" target="_blank">
に変更。

-----
あと余談ですがエラーが非常に多くてですね、現時点で160あまりあります。

参考記事: テンプレートカスタマイズをする方へバリデートのススメ
https://vanillaice000.blog.fc2.com/blog-entry-1002.html

たくさんの指摘が出てきますので嫌になってしまう可能性もあるんですが、ウォーニングは無視するとしてもエラーの方は少しづつでも修正していかないといずれ収集がつかなくなってしまいます。特に「タグの閉じ忘れ」「指定してはいけない単位」などですね。
そしてせっかく追加されたアコーディオンのリンクなんですが、タブレット・スマホユーザー・小さめのパソコンユーザーがリンクを押すことができず困ってしまいますので、再考された方が良いと思います。

よろしくお願いします。

-
2020/04/15 (Wed) 10:31

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/04/16 (Thu) 01:39

To VerryMerryをご利用中の内緒さん(終了のご報告)

こんばんは。
拝見しました。ナビゲーションの掲載方法はもう少し考えた方が良いとは思いますが、とりあえず本件については終了ということで、お疲れ様でした :)

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