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

Donnaテンプレート

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

名称
Donna
だな
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • SNSリンクリスト
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Playfair Display
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.19
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.14
  • IE対応終了
  • Font Awesomeの利用を停止
  • jQueryの利用を停止
  • Twitter名称・ロゴ変更に対応
  • スクロールアンカー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>function changeTextValue(e){document.getElementById("subject").value=e};</script>

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

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

【コメント送信ボタンの背景色調整】
#sendbtn, で検索するとスタイルシート内に1箇所あります。このルールセット内 transition: .3s ease-in-out; の直下に background: rgb(235,235,235); を追加。インデントにタブや全角スペースを利用しないよう注意。

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

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

更新履歴 2019.12.16
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.12.16
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.2
  • コメント主のリンク表示用JS及びデザインの変更
  • 独自クラス.curlのIE向け調整
  • 関連記事サムネイルNo image画像消失を修正
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

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

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

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

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

①について

callee)});</script> で検索するとhtml内に1箇所あります。この部位を以下の通り 変更(変更範囲を間違えないよう十分注意してください)

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

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

<ul class="comment-info">
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><svg class="svg-inline svg-inline-arrow-up" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-up"></use></svg></a>
  <li><a href="#comment_form"><svg class="svg-inline svg-inline-arrow-down" viewBox="0 0 448 512" role="img"><use xlink:href="#inline-arrow-down"></use></svg></a>
</ul>

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

.comment-info li {
  display: inline-block;
  margin-right: .7em;
}

.comment-info li:last-of-type {
  margin-right: 0;
}
②について

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

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

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

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

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

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

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

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

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

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

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

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

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

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

④について

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

.contents {
  padding: 20px 0;
}

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

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

#inner-contents p:not(.relate-title) {
  margin: 1.9em 0;
}

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

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

更新履歴 2019.4.27
  • C版Safariでモーダル検索背景が白くなる件修正
更新履歴 2018.12.20
  • Font Awesome(JS)を廃しインラインSVGに変更
  • レイアウト関連CSSの追加及び一部削除
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

不具合修正ではありませんので旧バージョンのままでもお使い頂けます。

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

盛りなしガチで週に2回はモッツアレラチーズを食しているあきらでございま (o'ω')ノ

だな
承認されました。ありがとうございます。

サンプル

Samples

TOP 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'●)/

2018/03/04 (Sun) 06:06

submitでエラー

おはようございます。
出来たてのテンプレを早速お借り致しました。

W3Cマークアップ検証で
input[type="submit"] “button” は “appearance” で利用できる値ではありません : button
と出ました。

こちらです。
https://validator.w3.org/unicorn/check?ucn_uri=https%3A%2F%2Ftoyamaben.blog.fc2.com&ucn_lang=ja&ucn_task=conformance#

修正しなくても差し支えないエラーなのでしょうか?

vanillaice (Akira)
Akira
2018/03/04 (Sun) 12:48

To 幸さん

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

appearanceや::placeholderなど一部のプロパティは標準実装になっていませんので、-webkit-, -moz- などのベンダープリフィックスが必要です。
正規実装に備えて一般表記を入れていますが気になるようでしたら削除しても構いません。
ただし実装された際にはご自身で改めて記述して頂く必要はあります。
よろしくお願いします。

2018/03/04 (Sun) 20:26

To Akiraさん

こんばんは。
標準実装ではない・・・
オプションというか裏技みたいなものでしょうか。
機能しなくなるというエラーではないんですね。
ホッとしました。←無知ですσ(•ω•*)

vanillaice (Akira)
Akira
2018/03/04 (Sun) 22:10

To 幸さん

CSSはブラウザが先んじて実装し、後から公式採用になる場合もありますし、標準仕様で間に合わない場合にも独自仕様としてベンダープリフィックス付きで行われることもあります。
裏技ということではなく、単に「実装状況」の違いです。
正式採用されないことももちろんあります。

さっちぃ
2018/03/07 (Wed) 18:10

トップページの表示と画像の大きさ

こんばんは。

とうとう、画像表示ありの要約タイプに踏み込み?ました。
記事に入れなくても良いってことに今頃になって気付いた鈍感者です。

ところで、このテンプレのトップページの表示ですが、一番新しい記事のみ拡大されるんですね。
デモと違うなって思ってたら、ページを進んで戻ったらデモと同じ2列表示になるという仕掛けが…
1ページの記事数の設定に迷いますね。

それから用意する画像の大きさは長辺が1000pxで妥当でしょうか?

vanillaice (Akira)
Akira
2018/03/07 (Wed) 18:51

To さっちぃさん

さっちぃさん、こんばんは ('0')/

はい、最新1件だけ大きくしてあります。
不要であれば解除できますのでお申し付けください。

画像サイズはやっぱり1000px程度あったほうが良いと思います。
ただ、トップのサムネイルだけを考えるならば600〜700pxでOKです。
今後のテンプレート変更でスライダーなど画像をひけらかす系(笑)のものを選ぶ可能性があれば1000px欲しいですね。

さっちぃ
2018/03/09 (Fri) 06:48

To Akiraさん

おはようございます。

利用しているのは自前の画像ではないので、ひけらかす(笑)予定は無いかと。
なるべく容量を落としたいので700px辺りを目処にしようと思います。

因みにGTスコアでの評価はBの84辺りでした。
スケータリングされた画像を云々の評価で赤点を喰らっちゃいました。
見た目重視でいくので仕方がありませんけど。

vanillaice (Akira)
Akira
2018/03/09 (Fri) 12:50

To さっちぃさん

> 赤点を喰らっちゃいました。見た目重視でいくので仕方がありませんけど〜

そうなんですよね。「一体どうすれば…?」って感じ(笑)
ここは個人のメンタル次第ということで(笑)

さっちぃ
2018/03/11 (Sun) 08:58

記事下のサムネイル

おはようございます。
憤慨して別の所にコメントしてたら、肝心の質問の件を忘れておりました。

記事下の関連記事の場所
you may also like 直訳したら「貴方も好きかもね」でしたっけ。
その場所の表示を縦1列じゃなくて2列表示(此方の表示のように)にすることは可能でしょうか?

vanillaice (Akira)
Akira
2018/03/11 (Sun) 16:05

To さっちぃさん

そうですね。「こちらもいかが?」みたいなニュアンスです。
mayをmightにするともう少し遠回しな表現になります。mayの方がくだけた感じですね。

> 縦1列じゃなくて2列表示(此方の表示のように)にすることは可能でしょうか?〜

関連記事のことですよね。
さっちぃさんのデバイスの横幅がいくつなのかわかりませんが、記事全体幅はmaxで1300pxです。
デフォルトでは1021px〜1300pxを含みそれ以上の場合は2列、1020pxを含みそれ以下の場合は1列、という切り替えになっています。
こいういうのを「ブレイクポイント」と言いますけれども、そのブレイクポイントを変更したいということでしょうか。
(もっと画面が狭くなってから1列にする、という意味です)

スクショ
画面1021pxの時
https://blog-imgs-120.fc2.com/v/a/n/vanillaice000/capture1021.jpg

画面1020pxの時
https://blog-imgs-120.fc2.com/v/a/n/vanillaice000/capture1020.jpg

スクショはMacで撮っています。WindowsとMacはビューポートのサイズが違いWindowsの方が狭いです。
なので2列表示のスクショが窓ならばもっと幅が狭いですね。
もうこれギリギリじゃないかと思いますが、変更されるのであれば
@media screen and (max-width: 1020px) {
というのがCSSに1箇所ありますので1020を希望の数値に変更してください。
1019から970までの範囲でお願いします。

さっちぃ
2018/03/11 (Sun) 22:17

To Akiraさん

こんばんは。

デバイスの解像度依存になっているんですね。
私が使用しているのは8インチのタブレットです。
縦長にして使っているので横幅はせいぜい800だと思います。
970に変更しても結果は同じでしたので、元の1020に戻しておきました。

結局、聞いてみただけ・・・で終わっちゃいました(笑)

vanillaice (Akira)
Akira
2018/03/12 (Mon) 23:28

To さっちぃさん

ごめんなさい。コメント見落としておりました。

シングルカラムで見てらしたんですね。
でしたらブレイクポイントは720pxですので、それよりデバイス画面が狭いということかしら。

@media screen and (max-width: 720px) {
で検索すると1箇所出てきます。
で、この720pxを変更するだけですが、さっちぃさんのタブレットサイズがいまだ不明ですのではっきりとした数字をお伝えできません。
720を徐々に小さい数字に変更してみてください。
(最低でも680pxぐらいまでに1列にした方が良いと思います。)
よろしくお願いします。

hige
2018/03/23 (Fri) 23:39

テンプレのカテゴリ

 先生にちょっと要望があります。
 カテゴリーのテンプレートで要約表示と全記事表示を分けていただきたいのです。
 私の勝手な要望です。すいません。
 あと、ユーザー要望てなカテが欲しいと
 無理強いですよね。

vanillaice (Akira)
Akira
2018/03/24 (Sat) 01:07

To higeさん

higeさん、こんばんは (o'ω')ノ

> カテゴリーのテンプレートで要約表示と全記事表示を分けていただきたい

ちょっと色んな意味にとれるのですが、「弊ブログの『テンプレート』カテゴリを全文と要約とで分けてくれ」という意味でしょうかね。
こちらからどうぞ。
https://vanillaice000.blog.fc2.com/blog-category-95.html

> ユーザー要望てなカテが欲しい〜

えーと。弊ブログ内で「リクエスト受け付け」を行なって欲しいということでしょうか。
できれば好き勝手にやらせてください ^^;
こうして個人的にその都度要望はお聞きしますが、必ずやるというお約束は致しません。
そして公に募ることもできないです。キャパの限界があります(笑)
ご理解頂ければ幸いですー ('0')/

hige
2018/03/24 (Sat) 20:20

表示タイプ別の記事

リリーステンプレート早見表(表示タイプ別) (1)
と云う記事があったんですね。
私の見落としでした。申し訳ありません。

リクエストの受付は、そうですよね。無理なお願いでした。
お忘れ下さい。

深緑の女魔術師
2018/03/28 (Wed) 18:57

テンプレートとブログカード お借りします

始めまして
深緑の女魔術師と申します。

スレチなコメントだったら、
ごめんなさい。

バグ報告でなく、
素直な感謝コメントです。

FC2ブログのSSL化で、
素敵なデザインなブログにたどり着いて、

テンプレのレスポンシブしようと思ったら、
同じブロガーさんでビックリ。
#この記事のテンプレートを採用しました。

ブログカードの存在も最近しって、
しらべてたら再びここにたどり着きました(笑)

二度あることは三度あるっていうけど、
ここまでお世話になったら、
コメントしないと・・・

テンプレとブログカードの作成、
本当に感謝です。

大切に使いたいと思います。

今後も開発?デザイン?
頑張ってくださいませ☆彡

以上です。

vanillaice (Akira)
Akira
2018/03/29 (Thu) 02:43

To 深緑の女魔術師さん

ご丁寧にありがとうございます。
お役に立てたのであれば幸いです :)

Macky
2018/06/29 (Fri) 01:56

サーチコンソールでのページの重複

始めまして
Mackyと申します。

FC2のSSL化に伴い現在Donnaのテンプレートを使用しています。
どうしても解決できていないので質問させてください。

Donnaに移行後サーチコンソールでページ重複(Canonicalタグなし)が発生していて最初は件数も少なく余り気にしていなかったのですが、ここ最近急にページ重複が大量に増えてきた為対処しようとしているのですが対策がさっぱり分かりません。

重複しているコンテンツは全て画像になっているので恐らくブログにあげているほぼ全ての画像が重複状態になっております。

宜しくお願いします致します。

vanillaice (Akira)
Akira
2018/06/29 (Fri) 10:35

To Mackyさん

こんにちは。

この情報だけでお返事することはできません。
重複を指摘されているURLも不明ですし、まして私にはMackyさんのSearch consoleの閲覧権限もありません。

以下の内容への返答をお願いします。

1. 「SSL化に伴い」とのことですが、SSL設定を行った際に Search consoleへのhttpsスキーム追加登録は済ませましたか?
(Search console登録者のみ必須作業)

2. 301リダイレクト設定ですか?302ですか?

3. SSL化以前のテンプレートは私が制作したものですか?
(NO の場合テンプレ名・製作者名の記載は不要です。YES/ NO だけで結構です)

4. ページ重複を指摘されているURLを複数件 正確に 教えてください。5件ほどあれば助かります。

よろしくお願いします。

Macky
2018/06/30 (Sat) 13:10

To Akiraさん

akira様

返信ありがとうございます。

1.スキーム追加登録済みです。
2.「301」リダイレクト設定です。
3.SSL化以前は別の製作者様です。

ここまで順ををって再確認していったところ、最後の画像アドレスの再確認で
画像の表示方法を途中で変えていて、もともとアルバム表示機能を使っていたのを、
元画像にリンクに変更したのですがそれによりアドレスが変わることを今知りました。

なので自己解決になってしまいましたがアドレスミスによる重複のようでした。

お手数をお掛けしてすみませんでした。

vanillaice (Akira)
Akira
2018/07/01 (Sun) 00:57

To Mackyさん(終了のご報告)

こんばんは。

原因がわかって良かったですね。
お疲れ様でした :)

エリオット
2018/07/01 (Sun) 17:00

TOPページの吹き出し型コメントアイコンについて

Akiraさま、初めまして。エリオットと申しますm(_ _)m
テンプレートDonnaを使わせて頂いております。

TOPページの吹き出し型コメントアイコンについて質問をしたく、コメントさせて頂きます。


TOPページで表示される新着記事のサムネイル画像内、ちょうど右下あたりに吹き出し型のコメントアイコンがあります。
(その記事に付いたコメント数が表示されるアイコンです)

この吹き出し型のコメントアイコンを非表示にすることは可能でしょうか?


説明が下手なもので、伝わらなかったら申し訳ありません;

念のため どの部分のことを言いたいのかを画像付きでご説明した方が伝わるかも?と思い、当ブログ内に説明記事をアップしてみました。

記載させて頂いているブログURLにアクセスして頂き、TOPページ→カテゴリの『その他雑記』→一番上の『確認用』というタイトルの記事をご覧いただけますと幸いです。

大変お手数ですがよろしくお願いします。


◆利用端末:Windows10
◆ブラウザ:Googlechrome

vanillaice (Akira)
Akira
2018/07/01 (Sun) 21:57

To エリオットさん

こんばんは。詳細なご説明をありがとうございます :)

class="grid-comment"
で検索されますとhtml内に1箇所見つかります。
この直近(すぐ上)にある
<!--allow_comment-->
から
<!--allow_comment-->
までを削除してください。
よろしくお願いします。

エリオット
2018/07/01 (Sun) 22:25

解決のご報告

Akiraさま

教えて頂いた通りに指定箇所を削除し、無事にコメントアイコンを非表示にすることができました。
お忙しい中迅速にご対応頂き、本当にありがとうございます!

またわからない箇所があれば質問に伺うかもしれませんが、その時はどうぞよろしくお願いしますm(_ _;)m

vanillaice (Akira)
Akira
2018/07/01 (Sun) 22:34

To エリオットさん(完了のご報告)

こちらこそわかりやすくお伝え頂いたので助かりました。
お時間もかかったと思います。ありがとうございます。

はい。またお気軽にどうぞ :)

嘉月
2018/10/17 (Wed) 09:15

ツイッターの設定方法

お忙しいところ、失礼したします。
こちらのテンプレをお借りしたいのですが、右上のFollow Meの一覧の中のツイッターにリンクを設定したいのですが、
どこの構文に入力したらよろしいでしょうか?

お手数をおかけしますが、よろしくお願いいたします。

vanillaice (Akira)
Akira
2018/10/17 (Wed) 15:57

To 嘉月さん

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

注)リンク不要な方行単位削除
で検索されますとhtml内に1箇所ありますのでガイダンスに従ってください。
本記事内に明記のあります通りカスタマイズが予想される箇所については事前にガイダンスを付けてあります。
(検索の仕方と見つけ方は記事内容を参照のこと)

よろしくお願いします。

嘉月
2018/10/17 (Wed) 16:23

Akira様

素早いお返事、ありがとうございます。
無事、リンクを張ることが出来ました

ありがとうございます。 

vanillaice (Akira)
Akira
2018/10/17 (Wed) 17:40

To 嘉月さん(完了のご報告)

ご報告ありがとうございます。
お疲れ様でした :)

神谷 幸弥(さや)
2018/11/25 (Sun) 22:14

1番目の最新記事の画像の大きさ

こんばんは。
トップページに表示される1番最新記事の画像を、2番目以降の画像と同じ大きさに出来ますか?

vanillaice (Akira)
Akira
2018/11/25 (Sun) 22:51

To 神谷 幸弥(さや)さん

こんばんは。

<!--index_area-->index-grid-item<!--/index_area-->
で検索されますとhtml内に1箇所ありますのでこれを削除。文字列の前に半角スペースがひとつ入っていますが、それも含めて削除。後の形は以下のようになるはずです。

<section class="grid-item">

続いて
.index-grid-item:first-of-type
で検索するとCSS内に1箇所あります。
.index-grid-item:first-of-type {
width: 100%;
}
を削除。

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

神谷 幸弥(さや)
2018/11/26 (Mon) 03:50

To Akiraさん

出来ました。
ありがとうございます!

vanillaice (Akira)
Akira
2018/11/26 (Mon) 17:06

To 神谷 幸弥(さや)さん(完了のご報告)

ご報告ありがとうございます。
お疲れ様でした :)

Janedoe1471
2019/05/31 (Fri) 22:16

お忙しいところを、申し訳ありません。
ちょっと、私には理解のできない挙動があって、テンプレートのせいかどうかは、まだ、不明なのですが。
https://janedoe1471.blog.fc2.com/blog-entry-13.html#comment4
↑のコメント欄で、投稿者さんのプロフ画像を、疑似要素のbackgroundで貼りました。
そうしたら、pngなのに、背景色がついていて、border-radiusで円形にしても、それでもついているのです。
これはちょっと、どうしてなのか、私には、わからないので、教えていただけると、非常に助かります。
よろしくお願いいたします。

Janedoe1471
2019/05/31 (Fri) 23:06

解決しました

user-iconのbackgroundでした。お騒がせしました、お忘れください…。

vanillaice (Akira)
Akira
2019/06/01 (Sat) 00:48

To Janedoe1471さん

Janedoe1471さん、こんばんは ('0')/

解決済み、ということで大丈夫でしょうか。おっしゃる通りuser-iconの背景色です。
お疲れ様でした :)

-
2019/10/31 (Thu) 02:10

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/10/31 (Thu) 02:53

To Donnaカスタマイズの件 内緒さん

こんばんは。

> ヘッダー画像の横幅を自分の画面に合わせることは可能でしょうか?〜

「自分の画面」というのは内緒さんのパソコンの画面のことでしょうか。その場合は私は内緒さんのパソコンサイズを知りませんのでお返事できません。
それとも「ブラウズ画面の横100%」という意味ならば縮小されるようになっているはずですが、縦横比は固定されません。

もう一度確認します。内緒さんの希望は「縦横比を固定したい」のですよね?ならばDonnaのように横100%を利用するヘッダーでは無理です。
もう一度私の先回のコメントと以下の記事をしっかりよく読んで理屈の理解をお願いします。

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

ここの方針が決まらないと先に進めませんので理解できるまで何度も読み返してくださいね。
念の為もう一度言います。横幅に制限を設けない場合には縦横比は固定できません。
大画面のパソコンでヘッダーがめちゃくちゃ大きくなってしまうからです。

-----
> blog-name-containerのmin-widthでぼかしの横幅を変えられることは確認したんですが、縦幅は変えられますか?〜

「ぼかしの横幅」の意味がよくわかりません。高さを増やしたいのは「ぼかしがかかっている部位」ですか?それとも「ぼかしがかかっていない部分(ブログタイトルなどが記載されている部分)」ですか?

前者ならば
#header-banner

padding:110px 60px 80px;
赤字の数値を増やしてください。110が「上」80が「下」です。上の数値は下の数値に30足した数を指定してください。

後者ならば
#blog-name-wrapper

padding: 40px;
赤字部位の数値を増やしてください。

-----
> navi-menuのline-heightを5~10px増やした時、その分ヘッダーの縦幅を増やすとレイアウトは崩れるんでしょうか?〜

グローバルナビの高さを変えるとスムーススクロールの頭出しの位置が狂いますのでhtml内にある以下の部位をナビの高さと同数値に変更してください。

additionalMarginTop:35

var o=35;

ヘッダーの高さとナビゲーションの高さの関連は「ナビゲーションの高さの分ヘッダーの上部が隠れる」点です。意味がわかりづらいようでしたらテストとして
.navi-menu

line-height: 35px;
赤字部位を100など極端な数値に変更して目視確認を行ってください。また、ナビの高さはこの部位で指定してください。

-----
> メニューのログインを鍵アイコンにはできないでしょうか?〜

インラインSVGは簡単ではありませんので(FC2サーバーへのアップロードができないため)、Font Awesomeをご利用ください。

-----
> 個別記事の更新順や同カテゴリの画像が出ないのは何ででしょう?〜

個人設定を確認してください。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#setting2

表示場所は「個別ページの記事下」に、表示件数は「0」以外に。

それともページ送りのことですかね。
個人設定のOGPを有効化してください。
その前に記事内容を読んでから質問してもらえると助かります。

よろしくお願いします。

-
2019/10/31 (Thu) 18:33

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/10/31 (Thu) 22:19

To Donnaカスタマイズの件 内緒さん

こんばんは。

えっともう一度しっかり読んで頂きたい(笑)

> 画像表示部分の縦幅も一緒に変わってしまったんですが、もしかして縦幅何pxと決まっていないんでしょうか?〜

この件についても書いてあります。ヘッダーの上にテキストが乗っている場合には縦幅を何pxと決めることはできません。何故なら テキストは折返しがかかりますので、常に一行のままだとは限らず、行数が増えた結果オーバーフロー(溢れ・はみ出し)が起こる可能性があるから です。

私が原則「ダミーブログやテストブログで質問するのはやめてくれ」というのは、そういった総合的な目視確認が必須だからです。「ブログタイトルが何文字なのか」「ブログ説明文がどの程度の長さなのか」も判断しなければいけないんです。
質問する側は簡単に尋ねるんですが、実際は部分的なことだけ見ればOKというわけではないんですね。

-----
ともかくもう、内緒さんの場合は 実際のブログを見せて頂かないことにはなんともなりません
スクリーンショットで数値までわかるわけがありません。ソースコードを見せて頂かないと。
今私が見られるDonnaのデフォルト画像は上手く表示されているにきまってます。私がそのように製作したのですから。
でも画像を変更されたときに上手く行っているのかどうかは わかりません。実際に目で見ていないから。
理論値だけで言っても左側のキャラは大きめパソコンで顔が見切れますね。縦横比を固定しなければ必ずどこか(主に上下)が見切れます。でも実際の画像を見せて頂けないのではっきりとは言えません。

-----
> You may also likeは出ました!が、コメント下がグレー(黒)のままなんですが何故でしょう?〜

コメント及び当記事内容をしっかり読んで頂けないものでしょうか。
OGP設定を有効化してください。

よろしくお願いします。
ごめんなさい。私ちょっと疲れてきました (´・ω・`)
「読んでください」とお願いしたものは必ず読んでくださいね。もーホントお願いします(笑)

-
2019/11/02 (Sat) 18:57

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/11/03 (Sun) 15:27

To Donnaカスタマイズの件 内緒さん(移動あり)

こんにちは。

DonnaからBlowingに変更、ということで良いでしょうか。
その前に、ご質問時のお願いごととして「ダミーブログでの質問は受け付けません」とはっきり明記しています。
内緒さんの場合ダミーと気づかず回答していましたので今回はお受けしますが、今回限りでお願いします。
次回以降はダミーでのご質問にはお返事致しません。でないと他の方と不公平が生じます。よろしくお願いします。

Blowingの方へ移動をお願いします。

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