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

投稿 2018年02月28日
25
テンプレート
FC2TemplateHTML5CSS3Responsive
Donnaテンプレート
PCアイコン TBアイコン SPアイコン

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

名称 Donna
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大788px
サイド --- 258px
記事内で使える見出しレベル h2からh6まで
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
GTmetrixスピードスコア
推奨カスタマイズ 左右カラム入れ替え, 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 Microsoftブラウザ(IE11, Edge)で一部表示不備あり
valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下(デバイス幅依存) サイドメニュー --- 下

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

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

TOP PAGE DEMO
ARTICLE DEMO
FAQ
DOWNLOAD

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数変更
・テンプレートと無関係なプラグインの導入

カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします

Microsoftブラウザの表示不備
NOT working well on IE11 and Edge

IE11及びEdgeでは ヘッダー画像のぼかし(blur)サイドメニューの内側線(outline) がCSSプロパティ未実装のため表示されません。
この件についての対策は行いませんので事前にご了承ください。

ナビゲーションについて
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

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

rgb(250,250,250) 全体背景色
rgb(167,102,108) 基本リンク色
ページ送りのサムネイルについて
About thumbnail in pagination

個別記事下のページ送りにはサムネイル画像が表示されますが、本作からは対象画像が OGP設定画像 に倣います。
利用にあたりブログ個人設定から OGP設定 を有効化してください。

また、対象画像が無い場合にはプロフィール設定画像が代替表示されます。
プロフィール画像設定 を行うか、記事作成画面下にある「アイキャッチ画像」設定を利用してください。

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

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

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

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

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

25 COMMENTS

There are no comments yet.

幸  

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#

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

2018/03/04 (Sun) 06:06
vanillaice (Akira)

Akira  

To 幸さん

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

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

2018/03/04 (Sun) 12:48

幸  

To Akiraさん

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

2018/03/04 (Sun) 20:26
vanillaice (Akira)

Akira  

To 幸さん

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

2018/03/04 (Sun) 22:10

さっちぃ  

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

こんばんは。

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

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

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

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

Akira  

To さっちぃさん

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

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

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

2018/03/07 (Wed) 18:51

さっちぃ  

To Akiraさん

おはようございます。

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

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

2018/03/09 (Fri) 06:48
vanillaice (Akira)

Akira  

To さっちぃさん

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

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

2018/03/09 (Fri) 12:50

さっちぃ  

記事下のサムネイル

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

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

2018/03/11 (Sun) 08:58
vanillaice (Akira)

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) 16:05

さっちぃ  

To Akiraさん

こんばんは。

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

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

2018/03/11 (Sun) 22:17
vanillaice (Akira)

Akira  

To さっちぃさん

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

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

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

2018/03/12 (Mon) 23:28

hige  

テンプレのカテゴリ

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

2018/03/23 (Fri) 23:39
vanillaice (Akira)

Akira  

To higeさん

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

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

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

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

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

2018/03/24 (Sat) 01:07

hige  

表示タイプ別の記事

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

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

2018/03/24 (Sat) 20:20

深緑の女魔術師  

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

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

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

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

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

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

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

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

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

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

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

以上です。

2018/03/28 (Wed) 18:57
vanillaice (Akira)

Akira  

To 深緑の女魔術師さん

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

2018/03/29 (Thu) 02:43

Macky  

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

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

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

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

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

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

2018/06/29 (Fri) 01:56
vanillaice (Akira)

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件ほどあれば助かります。

よろしくお願いします。

2018/06/29 (Fri) 10:35

Macky  

To Akiraさん

akira様

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

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

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

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

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

2018/06/30 (Sat) 13:10
vanillaice (Akira)

Akira  

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

こんばんは。

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

2018/07/01 (Sun) 00:57

エリオット  

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

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

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


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

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


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

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

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

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


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

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

Akira  

To エリオットさん

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

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

2018/07/01 (Sun) 21:57

エリオット  

解決のご報告

Akiraさま

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

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

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

Akira  

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

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

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

2018/07/01 (Sun) 22:34