attention admin about comments trackbacks you may also like

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

2018年02月28日
テンプレート
42
HTML5 CSS3 RWD
Donnaテンプレート

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

最終更新 2019.11.2
  • コメント主のリンク表示用JS及びデザインの変更
  • 独自クラス.curlのIE向け調整
  • 関連記事サムネイルNo image画像消失を修正
名称 Donna
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大788px
サイド --- 258px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 なし(インラインSVG)
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要素を利用する方向け)

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

【重要】テンプレートの変更点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 を追加(セキュリティ対策)

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

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

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

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

サンプル

Samples

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

カスタマイズのコツ

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

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

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

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

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

Font Awesomeについて

About Font Awesome

リリース直後は Font Awesome 5(SVG) を入れていましたが、どうにもこうにも動作が遅いものですから思い切って排除しました。Font Awesome(以下 FA と称す)のライブラリに頼らずインライン化することでパフォーマンスが若干改善されました。

FAがどうしても必要、という方はhtml内に

注)Font Awesome(JS)必要な方この一行削除

という形でコメント化してありますので、ガイダンスに従ってコメントの解除を行ってください。FAのメインJS+疑似要素が使えるようになります。

CSS(webフォント)のFAをご希望の場合にはFA本家サイトから直接コードを取得してください。
Font Awesome

JSかCSSかの選択も含め自己責任で導入をお願いします。テンプレートで表示しているアイコン類についてはFAのファイルと干渉しないはずです。

ナビゲーションについて

Important thing to be careful when adding links to navigation

ナビゲーションリンクテキストの日本語変更やリンク追加などをされます方は、デフォルト設定よりも早い段階でナビゲーションが折りたたまれるよう調整してください。
(見た目・操作性の問題とスクロール位置のズレ対策)

navi breakpoint

で検索されますとhtml内に1箇所、CSS内に1箇所、合計2箇所出てきます。
いずれも直近(すぐ下にあります)の 560px の数値を大きい数字に変更してください。

全体幅調整の仕方

How to increase or decrease width of container

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

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

How to reverse the direction of rows

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

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

ドミナントカラー

Dominant colors

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

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

rgb(250,250,250) 全体背景色
rgb(167,102,108) 基本リンク色

削除可能な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はサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(42)

There are no comments yet.

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#

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

Akira

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

To 幸さん

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

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

2018/03/04 (Sun) 20:26

To Akiraさん

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

Akira

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

To 幸さん

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

さっちぃ

2018/03/07 (Wed) 18:10

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

こんばんは。

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

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

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

Akira

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

To さっちぃさん

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

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

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

さっちぃ

2018/03/09 (Fri) 06:48

To Akiraさん

おはようございます。

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

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

Akira

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

To さっちぃさん

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

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

さっちぃ

2018/03/11 (Sun) 08:58

記事下のサムネイル

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

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

Akira

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

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に戻しておきました。

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

Akira

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

To さっちぃさん

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

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

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

hige

2018/03/23 (Fri) 23:39

テンプレのカテゴリ

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

Akira

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

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化で、
素敵なデザインなブログにたどり着いて、

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

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

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

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

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

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

以上です。

Akira

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

To 深緑の女魔術師さん

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

Macky

2018/06/29 (Fri) 01:56

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

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

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

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

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

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

Akira

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

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化以前は別の製作者様です。

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

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

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

Akira

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

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

こんばんは。

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

エリオット

2018/07/01 (Sun) 17:00

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

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

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


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

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


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

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

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

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


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

Akira

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

To エリオットさん

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

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

エリオット

2018/07/01 (Sun) 22:25

解決のご報告

Akiraさま

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

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

Akira

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

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

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

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

嘉月

2018/10/17 (Wed) 09:15

ツイッターの設定方法

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

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

Akira

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

To 嘉月さん

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

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

よろしくお願いします。

嘉月

2018/10/17 (Wed) 16:23

Akira様

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

ありがとうございます。 

Akira

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

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

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

神谷 幸弥(さや)

2018/11/25 (Sun) 22:14

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

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

Akira

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

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

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

Akira

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

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でした。お騒がせしました、お忘れください…。

Akira

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

To Janedoe1471さん

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

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

-

2019/10/31 (Thu) 02:10

管理人のみ閲覧できます

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

Akira

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

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

管理人のみ閲覧できます

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

Akira

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

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

こんばんは。

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

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

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

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

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

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

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

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

-

2019/11/02 (Sat) 18:57

管理人のみ閲覧できます

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

Akira

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

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

こんにちは。

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

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

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

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