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

投稿 2017年10月18日
52
テンプレート
FC2TemplateHTML5CSS3Responsive
Genericテンプレート
PCアイコン TBアイコン SPアイコン

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

最終更新 2018.1.11

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

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

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

名称 Generic
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大810px
サイド --- 320px
記事内で利用可能な見出しレベル h2からh6
構造化マークアップ(個別記事のみ) BreadCrumbs(パン屑リスト)
BlogPosting
GTmetrixスピードスコア
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
見出しデザイン
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ ヘッダー画像変更及び背景色変更, 全体幅調整
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 valid-html5.png
パソコン タブレット スマートフォン
パソコン
タブレット
スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
右サイドメニュー
(デフォルト)
下 or 右サイドメニュー
(デバイス幅依存)
下サイドメニュー

さぶい!!!
なんか急に寒くなりましたよね (´・ェ・`)

じぇねりっく
承認されました。ありがとうございます。
今回は超シンプルです。トリッキーなものは一切入れていません。

TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ

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

・トップページの表示タイプ変更・レイアウト変更(全文表示から要約表示へ変更, カラム数変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。

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

全体幅調整の仕方
How to increase or decrease width of container

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

ナビゲーション
About global navigation

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

navi breakpoint

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

(max-width: 768px)

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

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

左右カラム入れ替えの仕方
How to reverse the direction of rows
#main-container

を検索されますと、CSSソース内に4箇所ヒットします。
最初のものが対象です。
この括りの
padding: 50px 60px 80px;
の直下に以下を 追加

flex-direction: row-reverse;

続きまして検索。

#primary

こちらも2箇所ヒットします。やはり最初のものが対象です。
この括りの

margin-right: 50px;

緑部分 rightleft に変更。
以上2手順です。

ヘッダー背景変更について
How to change your header image

冬来る、ということで結晶の画像を入れてありますが、こちらは取り除けます。
オーソドックスな造りですので、デフォルト画像を削除すれば季節を問わずお使い頂けるのではないかと思います。

/* 注)トップページヘッダー画像+グラデーション */

で検索されますと、以下のような内容になってます。

background: url(https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/originbg1.png),
        linear-gradient(to right, rgb(101,112,160), rgb(227,204,193)); /* 注)トップページヘッダー画像+グラデーション */

● 背景画を取り除く

background: linear-gradient(to right, rgb(101,112,160), rgb(227,204,193)); /* 注)トップページヘッダー画像+グラデーション */

● グラデーション変更

background: url(https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/originbg1.png),
        linear-gradient(to right, rgb(234,234,234), rgb(219,219,219), rgb(242,242,242), rgb(172,169,152)); /* 注)トップページヘッダー画像+グラデーション */

● 画像変更

background: url(https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/lemons-686918_1280th.jpg) center center /cover no-repeat; /* 注)トップページヘッダー画像 */

一枚画の設定はおすすめしません。
繰り返し画像を想定したアウトライン構成になってますので、折りたたみナビを展開した際に画像がガバっと拡大されます。
そこを事前にご了承頂いた上で設定をお願いします。

グラデーションの変更や画像変更などでテキストリンクの色変更の必要が生じた場合には

注)ヘッダー内

で検索されますと該当箇所が全て出てきます(全6箇所)
各々どの部位に対応しているかも記してありますので確認しながら作業を進めてください。
画像変更は、縦幅が狭い ですから、あまり無茶な画像設定をしないよう注意です。縦横比は不問ですが横長・長辺1500px以上で。
グラデーションはジェネレータサイトがたくさんありますので上手に利用してください。

shade ← おすすめサイト

ドミナントカラー
Dominant colors

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

例) 51,51,51

rgb(115,122,164) 基本リンク色 など

…いっこだけかい

管理人コメントと訪問者コメントを分ける方
The way to identify admin comments

デフォルトはグレー背景アイコン。

サンプル

CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください。
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません。
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り。

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}
サンプル

* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。

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

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

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

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

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

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

52 COMMENTS

There are no comments yet.

-  

管理人のみ閲覧できます

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

2017/10/18 (Wed) 21:06

Akira  

To Genericテンプレートの件 内緒さん

ほんまやぁーーー!
またしても意味ふめいなミスをしてしまいました(笑)
リンク先変更しました。ありがとうございます。
全然気づかなかったわ。いつものことだけど(笑)

今回固定ナビなんかも全部辞めました。
もうホントにシンプルなものにしてみました。
大きな声では言えませんが、レスポンシブ初心者の方のためというか、旧来のものと見た目が大きく変わらないものを、と思いまして。
ナビの折りたたみもやめようかなぁ、と思いまいしたが、「スマホはナビが折りたたまれて当たり前」を推していこうと思う(笑)

2017/10/18 (Wed) 23:38

Akira  

To OjinAgerさん(移動先)

https://vanillaice000.blog.fc2.com/blog-entry-600.html#comment4457

> 各記事に区切り(空白行)を入れたい〜

既にカスタマイズされていますのでその状態からのお話ですが、トップページの各記事を「分割する(間に全体背景が見える)」のではなく「仕切り線を入れる」という解釈でよろしいでしょうか。
.main-body
で検索して頂きますとCSSソース内に2箇所ヒットしますが最初のものが対象です。
その括りの
padding: 0 0 20px;
の直下に

border-bottom: 数値px solid 色コード;

を追加してください。
数値は線の太さです。直線で良ければsolidのままで。
ボーダースタイルについてもご自身の好みで変更してください。

例) 2px太さ、点線、黒
border-bottom: 2px dotted #000000;

-----------
> サイドメニューのプラグインごとにも区切りを入れたい〜

.side-menu
で検索。5箇所あるうち最初のものが対象です。
width: 100%;
の直下に先の内容(各記事間ボーダー)と同じ要領で同じ内容を追加してください。

よろしくお願いします。

------ 追記
今個別記事の方を拝見したら、個別記事の方は分割されているんですね。
.main-bodyはコメント投稿やトラックバックなども共通クラスですので、ここにボーダーを指定してしまうとトップページ以外・記事以外でも反映されてしまいます。
なので
<!-- トップページ・個別記事ここから -->
を目印に、直近にある
<!--permanent_area-->article<!--/permanent_area--> class="main-body"
の部分を

<!--permanent_area-->article<!--/permanent_area--> class="main-body<!--not_permanent_area--> toppage-border<!--/not_permanent_area-->"

に変更されまして、.main-bodyへのボーダーを指定を避け、

.toppage-border {
border-bottom: 数値px solid 色コード;
}


上記内容をCSSソース末尾に追加してください。
クラス名は変更して頂いて構いません。

2017/10/22 (Sun) 10:18

OjinAger  

ご回答ありがとうございます。

早速、やってみました。背景の色の疑似色を使って枠線を入れてみました。

実は「分割する(間に全体背景が見える)」方式でやりたかったのですが、
その場合は、どのようにすればよいでしょうか。

2017/10/22 (Sun) 13:02

Akira  

To OjinAgerさん

その場合には
.main-body
への
background-color: カラーコード;
追加で良いですよ。
デフォルトが
margin-bottom: 40px;
だったところをOjinAgerさんがカスタマイズとして
margi-bottom: 10px;
に変更されてますので数字を増やすことで後続記事との距離が取れます。
ここはご自身で見た目を確認しながら調整をお願いします。
「共通クラスである」というのを前提に行なってくださいね。
またはせっかくクラス名を追加しましたので、追加クラスの .toppage-border に
margin-bottom: 数値px;
でもOKです。その際にはボーダー指定は消してください。
後者を採用するとトップページの記事ならびのみ適用になります。
CSSはソースの中間に置くのではなく最終に。
よろしくお願いします。

2017/10/22 (Sun) 13:15

OjinAger  

何度も申し訳ございません

「分割する(間に全体背景が見える)」方式で
背景に画像を使っているからか、うまくいきません。
「background-color: カラーコード;」に代替色を使えばうまくいくのですが。

2017/10/22 (Sun) 14:48

Akira  

To OjinAgerさん

「代替色」が何を指すのかわかりませんが、原因はカスタマイズ時に
.fit-sidebar-fixed
にも背景色を指定しているからです。

.fit-sidebar-fixed {
margin-top: 0 !important;
margin-bottom: 0 !important;
position: fixed;
}

こちらがデフォルトですが、これはスクロールアンカー用のコンテナですので、デフォルト値を変更したり色をつけたりなどはしないようにしてください。
現在は

.fit-sidebar-fixed {
margin: auto;
position: fixed;
background-color: #FFF8DC;
padding: 0;
}

になってます。
ここは全てデフォルト値に戻してくださいね。
ソース内で !important の記述がある部位については基本的に「強制」を行なっていますので触らないようにしてください。
よろしくお願いします。

2017/10/22 (Sun) 15:52

OjinAger  

ありがとうございました。

デフォルト値に戻したら出来ました。ありがとうございました。

コメントの書体を指定する「template_comment_js」部分が
スマホで確認すると、はみ出てしまうのですが、
なにか方策はありますでしょうか。

2017/10/24 (Tue) 02:12

Akira  

To OjinAgerさん

背景の件は完了したということで、お疲れ様でした。

> 「template_comment_js」部分がスマホで確認すると、はみ出てしまう〜

これはカスタマイズでpaddingを設けたことが原因です。
コメントJSはjavascriptで出力されますので、サイズなど後付のCSS調整は無効です。
ですからコメントJS側の操作ではなくテンプレートで調整するしかありません。
コメントJSの横幅は267pxですが、現状では収まる範囲が230pxしかありません。そのため超過しています。
#main-containerへのpadding指定及び
.main-bodyへのpadding指定
の2箇所で267px確保できるよう調整をお願いします。

2017/10/24 (Tue) 08:59

OjinAger  

色々ありがとうございました。

色々、試してみましたが、余白が調整できず、
320PX以下では、コメント書式は無くても良いかと、非表示にしてしまいました。

2017/10/29 (Sun) 13:00

Akira  

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

お返事大変遅くなりました (*_ _)

そうですね。スマホでコメントJSは使いづらい面もありますし、OjinAgerさんが納得できているのであればそれも一つの方法だと思います。
お疲れ様でした

2017/11/01 (Wed) 09:12

OjinAger  

ページ送りの画像取得のスクリプトについて

個別記事のエリア(permanent_area)をIEのデバッガーで
チェックすると、途中で終了してしまいます。

</body>直前のページ送りの画像取得のスクリプトを削除すると
正常に動くので、その部分がどこかと干渉しているようなのですが
修正できますでしょうか。

2017/11/23 (Thu) 22:35

Akira  

To OjinAgerさん

こんばんは。
OSとIEのバージョンを教えて頂けませんでしょうか。
よろしくお願いします。

2017/11/24 (Fri) 00:41

OjinAger  

OSとIE

OSはwindows10 IEはバージョン11となります。
よろしくお願いいたします。

2017/11/24 (Fri) 01:00

Akira  

To OjinAgerさん

ページ送りのスクリプト云々というよりもjQueryを外せば動きますよ。
IE11で開発者ツールがホワイトフリーズしたり落ちたり、というのはもう随分前から既知の問題としてMicrosoftもWindows7向けにパッチの提供もしていましたが、IEは既に開発の終了したブラウザですので直らないと思います。
周りの技術はどんどん進んでいき、IEはこれ以上の開発は無いわけですからどうしようもないですね。
デバッグについてはまともなブラウザで行うべきで、Windowsであれば最低でもEdgeを利用するのが良いと思います。

関連についてはweb上に対策などが出ていますのでお調べになっても良いのではないでしょうか。
ちなみに私の環境下のIE11もWindows10にアップグレードした時点で開発者ツールは死にました。
それ以来なんの対策も取っていません。

JS内容にエラーはありませんが(レガシーブラウザで解釈ができない場合は除く)、不信感がお有りならば該当ページ送りを削除されてはいかがでしょうか。
それもまた一つの方法です。
この件について私ができることはありません。
IE11の開発者ツールのために新しい技術を排除するのは理に適っていないと思うので。
ごめんなさいね。

2017/11/24 (Fri) 03:00

あーたろう  

インデックスの番号について

はじめまして。
このデザインに一目惚れしてしまい、早速お借りしております。

まだブログ初心者なのですが、
【INDEX】のナンバリングをマニュアル修正することは可能でしょうか?

ブログを書く際に、
思いついたタイトルを書き溜めて保存しておき、都度最新情報をブログアップしているため、まれにインデックスのナンバリングが30/35/34/31のようにぐちゃぐちゃになってしまっています。

こちらのブログをいくつか拝見して勉強してみたのですが、やはり解決策が分からず、、ご教授頂けますと嬉しいです。

どうぞ宜しくお願い致します。

2017/11/30 (Thu) 06:50

Akira  

To あーたろうさん

ありがとうございます

全記事一覧の特徴は以下のリンク先記事でご確認くださいね。
よろしくお願いします。

https://vanillaice000.blog.fc2.com/blog-entry-564.html

-------

既に振られた番号を変更するというのはエクスポート&インポートしない限りできませんので、出来ることはそれを除けば「今後の対策」だけです。
下書きはhtmlエディターやメモ帳などを用いてtxtファイルで保存しておくか、下書き用記事をひとつだけ残しておき、その一つを使いまわすか。
後者の場合下書きとして保存できるのは1件だけ、ということになりますが。
別に1件にこだわる必要もありませんが、下書き用が多ければその件数がそのまま欠番になりますので最小が良いですよね。
おすすめは前者です。
いきなりhtmlエディターで書くというのは難しいでしょうから、記事編集画面を利用して書き、編集し終わったら保存せずに全コピー → エディターへペースト → txtファイル保存 → 記事をUPする際にそこからコピペ
という段階を踏まれると良いと思います。
うっかり保存するとまた欠番になりますのでお気をつけください。

注意) 新投稿画面の内容をエディターにペーストするとhtml内容が全て取り除かれます。
新投稿画面で作成した場合には「HTML表示」に切り替え、その内容をコピー。UP時にも「HTML表示」の画面へペースト。

2017/11/30 (Thu) 16:29

あーたろう  

To Akiraさん

とても迅速でご丁寧なご返信ありがとうございます!
リンク先のブログも読ませて頂き、連番の仕組みと意味がよく理解できました。勉強になります。

連番がいくつか狂っているのは、
気にせず諦めることにして、
今後綺麗な連番になるように教えて頂いた手順でやってみます。
ありがとうございました。

それにしても美しいテンプレートで、これから記事をアップするモチベーションまで上がりました。
これからも、こちらのブログにちょくちょくお邪魔して知識を増やしたいと思います。ありがとうございました。

2017/12/01 (Fri) 00:14

Akira  

To あーたろうさん

こんにちは。
ご期待に沿えずごめんなさいね。

はい。今後の作成の仕方、ということで多少の面倒はありますが頑張ってください

2017/12/01 (Fri) 14:29

yoshi  

comment_nameについて

いつもありがとうございます。
従来、コメントの管理者ハンドルネームを区別するために管理画面「コメントの管理」→「名前の修飾」で太字にしていました。
するとハンドルネームがspan付きになってハンドル名yoshiの代わりに
<span class="fc2_owner_comment" style="font-weight:bold;">yoshi</span>
となり、コメントのハンドル名の表示が">yoshiとなるなど、表示が崩れてしまいます。
現在は、クラス名からcomment_nameを外し、REPLYの文字リンクのtitleを消して対応しています。

ハンドル名をクラス名に使うのは工夫だと思いますが、私のケースのようにハンドル名を装飾していた場合も影響が出ないよう考慮していただけたらな…というお願いです。

2018/01/10 (Wed) 17:29

Akira  

To yoshiさん

こんばんは ( ゚Д゚)ノ

コメントの仕様はQ&Aに明記していますのでお読みください。

「ご質問の前に「テンプレあるある」」
https://vanillaice000.blog.fc2.com/blog-entry-220.html#object23

よろしくお願いします。

2018/01/10 (Wed) 18:22

yoshi  

To Akiraさん

迅速な回答ありがとうございます。Q&Aはざっと目を通したつもりでしたが、該当することに気がつきませんでした。お手間をとらせてすみませんでした。記述に沿って対応しようと思います。ありがとうございました。

2018/01/11 (Thu) 01:03

Akira  

To yoshiさん

こちらこそご理解頂きありがとうございます
お手数おかけします。

2018/01/11 (Thu) 02:13

素姓乱雑  

あらためてお願いします

Genericを使わせていただいています。
現在では本文と「続きを読む」の間にスポンサーサイトがあって
本文と「続き」が離れているので、「続き」があると認識されないので
困っています。できるだけ近づける方法はないでしょうか。
たとえば、本文の後に「続きを読む」が来て、その後に
スポンサーサイトが表示されるとか。よろしくご教示ください。
また、最新バージョンをアップしたところ、ドロップシャドウの右側が
反映されません。たとえば、http://usodamari.blog.fc2.com/blog-entry-158.html
ですが、右シャドウが出てこないのです。

2018/01/18 (Thu) 20:03

Akira  

To 素姓乱雑さん

ご協力ありがとうございます。

> 「続き」があると認識されないので困っています。できるだけ近づける方法はないでしょうか。〜

「続きを読む」の先行及び後続要素との距離設定は
.read-more {
で検索されますとCSS内に1箇所ありますので、その中の
margin: 20px 0;
赤字の部分で調整してください。

> たとえば、本文の後に「続きを読む」が来て、その後にスポンサーサイトが表示されるとか。〜

表示の順序はFC2ブログの規定内容・仕様ですので操作不可能です。
スポンサーサイトを非表示にされてはいかがでしょうか。
設定画面
https://admin.blog.fc2.com/control.php?mode=setting&process=2#ads
非表示設定をされますとCDNの利用ができなくなりますのでよくよくお考えの上でどうぞ。

> ドロップシャドウの右側が反映されません。〜

#primary {
で検索すると1箇所出てきます。この中の
overflow: hidden;
削除してください。
この場合には記事内で利用するhtml内容のwidth指定を正確におこなってください。
でないと記事の幅が拡がってしまいます。
(既存の内容を拝見したところちゃんと対策なさっているので問題はなさそうです。)

またはCSSソース末尾に以下の内容を追加

img {
max-width: calc(100% - シャドウの幅px);
}


このいずれかで対処可能です。後者をおすすめします。

よろしくお願いします。

---------- ごめんなさい追記です。

shadow-attachmentクラスをお使い頂いてるんですね。
でしたら
.shadow-attachment
で検索されまして、そちらに
max-width: calc(100% - 8px);
を追加、という形の方がベターですね。
最初から私がそう設定しておけば良かったのですが、考えたらずですみません(公式は上書きしておきます)
お手数おかけします。よろしくお願いします。

2018/01/18 (Thu) 20:14

素姓乱雑  

ありがとうございました。

位置変更できない訳はFc2仕様ということで理解しました。
また、marginを変更してもそんなに変わりませんので、
いい方法がないかを模索して見ます。
overflow: hidden;削除ですが画面が乱れると
怖いので、画像を小さくして対処してみたいと思います。
お忙しい中ありがとうございました。

2018/01/18 (Thu) 20:30

Akira  

To 素姓乱雑さん

たぶんコメントが行き違いになっていると思いますので、追記の部分に気づいて頂けると良いのですが ^^;

あとは広告を非表示にされない場合は広告側に上下marginが付いていますので、CSS末尾に
#fc2_text_ad{
で検索されまして(横にズラーっと書いてあり見辛いですが)
その中の
margin:20px 0!important;
こちらも調整してください。これは「続きを読む」の上の距離になります。

2018/01/18 (Thu) 20:32

素姓乱雑  

再びお礼です。

シャドーの件追加されていたのですね。
ありがとうございました。

2018/01/18 (Thu) 20:34

Akira  

To 素姓乱雑さん

お手数おかけします。よろしくお願いします。

2018/01/18 (Thu) 20:47

素姓乱雑  

その後の結果です

ご指導いただいたように、両marginを少なくし、本文が縦書きなものですから一行の文字数を少なくして、画面上に本文と「続きを読む」が収まるように調整、「続き」では文字数を戻すことにしました。
シャドーの件、素早い対応ありがとうございました。

2018/01/21 (Sun) 07:38

Akira  

To 素姓乱雑さん

こんにちは。
理想に近づけたのであれば良かったです

縦書きを画像ではなくちゃんとテキストで行っている点が素晴らしいと思います。
とても読みやすいです。
お疲れ様でした

2018/01/21 (Sun) 15:42

-  

管理人のみ閲覧できます

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

2018/03/13 (Tue) 04:02
vanillaice (Akira)

Akira  

To Genericプロフアイコンの件 内緒さん

お疲れ様です (o'ω')ノ

.name管理人ハンドルネーム:before

太字を入れ替えます。
例えば私の場合は

.name管理人Akira:before
ではなく
.nameAkira:before
です。「管理人」の漢字3文字が不要という意味です。
よろしくお願いします。

-------- 別件
サイドメニューの「最新記事」がスクリプトエラーです。
日付のスクリプト構文に問題があるもよう。たぶんnewマークかな (´・ω・`)

2018/03/13 (Tue) 13:53

-  

管理人のみ閲覧できます

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

2018/03/13 (Tue) 13:59
vanillaice (Akira)

Akira  

To Genericプロフアイコンの件 内緒さん②

入れ違いで追記しちゃった(笑)
気づいてもらえると良いのですが ^^;

2018/03/13 (Tue) 14:01

-  

管理人のみ閲覧できます

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

2018/03/13 (Tue) 17:42
vanillaice (Akira)

Akira  

To Genericプロフアイコンの件 内緒さん(終了のご報告)

気づいて頂けて良かったです(笑)
お疲れ様でした

2018/03/13 (Tue) 22:54

-  

管理人のみ閲覧できます

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

2018/03/15 (Thu) 00:13
vanillaice (Akira)

Akira  

To Generic画像リストの件 内緒さん

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

不具合ではなく書き漏らしですね。
data-sizes="auto" を利用する時は必ずその対象となるimg要素にfont-family指定が要ります。

.box1 img,
.box2 img,
.box3 img,
.box4 img {
既存内容省略;
font-family: 'object-fit: cover; object-position: center center;';
}

これは以前にお伝えした通りです。
あとまたflexの指定が違っているようです。以前再DLして頂きましたよね。
古いファイルの方からコピペされてないでしょうか。
-ms-flex(ie用フォールバック)の値は
-ms-flex: 1 1 auto;
でないといけませんね。内緒さんの今の指定は
-ms-flex: 1 1 0;
になってます。
今一度ご確認ください。
よろしくお願いします。

https://vanillaice000.blog.fc2.com/blog-entry-488.html#comment5175

2018/03/15 (Thu) 00:20

-  

管理人のみ閲覧できます

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

2018/03/15 (Thu) 01:06

-  

管理人のみ閲覧できます

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

2018/03/15 (Thu) 01:26
vanillaice (Akira)

Akira  

To Genericヘッダー遅延の件 内緒さん

ヘッダーはたぶんやってもあんまり意味ないですね。
ヘッダーですよね?フッターでなく(一応確認)
ヘッダーは大抵の場合ファーストビューに入ってます。遅延読み込みはファーストビュー「以外」に効果を発揮するものなので効能がないというかなんというか。

鍵コメントの件はお任せします。ご自分がやりやすいようにしてくださいね。
FC2の鍵コメントはホントに使いにくいですよね。
自分で書いたものが二度と見られないとか… どうなん ( ̄∀ ̄;)

* ヘッダー画像で対策をするならばブレイクポイントの設定で例えば

@media screen and (max-width: 414px) {
#header-banner {
background-image: url(横800程度の画像アドレス);
}

こうしてパソコン用よりも小さい画像に差し替える方法がありますよ。
htmlのimg要素と違いCSSのbackground-imageは画面サイズの指定に沿っていないものは読み込みませんので、パソコン用画像アドレスが記載されていても、スマホ画面414px以内では小さい方の通信リクエストだけになります。
これも一つの方法かと思います。
またこの件についても記事を書く予定にはしています。
っていっても次から次へと自分のチョンボやらOSのバグやら出てきてなかなか書けない (∵`)

2018/03/15 (Thu) 01:58

-  

管理人のみ閲覧できます

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

2018/07/12 (Thu) 21:07
vanillaice (Akira)

Akira  

To SSL化の件 内緒さん

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

> テンプレート内自体に”http”の記述が見られるからか、
または他に原因があるのか分かりません。
テンプレートの”http”を勝手に変更するわけにもいかないし
悩んでいます〜

テンプレートに混在コンテンツの原因はありません。
テンプレート内に見られる http: は
1. og: http://ogp.me/ns# --- OGPに関する記述。混在コンテンツ対象外(httpsに書き換え可ですが正式URLはhttpです)
2. <a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);" 〜省略
--- トラックバック先のリンクを開くためのJS。混在コンテンツ対象外(リンクなので対象外。httpsへの書き換え不可(SSLしていない相手先が開けなくなります))
3. http://schema.org --- 構造化マークアップ。混在コンテンツ対象外(OGPと同様httpが正規識別です)

-----
内緒さんのページ内で指摘されている混在コンテンツ対象はサイドメニュー部「訪問感謝」の2種・計5つの画像です。
アップロードし直すか、あるいは極小とはいえ画像ですから通信リクエストが発生する点などを踏まえFont Awesomeなどのwebアイコンに変更するか、dataURIに書き換えるなどされると良いと思います。
よろしくお願いします。

----- 余談
head内にある追加CSSファイルですが、内容量もさほど多くないですし最優先で読ませる必要のない内容です(が実際には優先順位がhighestになっています)
外部ファイル化せずデフォルトCSSに含めることをおすすめします。

参考記事
https://vanillaice000.blog.fc2.com/blog-entry-738.html

あと、クラス属性を追加する際には前の属性との間に半角スペースを入れることを忘れないようにしてくださいね。
例)
×
<img src="アドレス"class="shadow-attachment">

<img src="アドレス" class="shadow-attachment">

2018/07/12 (Thu) 22:20

-  

管理人のみ閲覧できます

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

2018/07/13 (Fri) 18:55

-  

管理人のみ閲覧できます

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

2018/07/13 (Fri) 19:15
vanillaice (Akira)

Akira  

To SSL化の件 内緒さん(完了のご報告)

こんばんは。
「保護された通信」の表示を確認できました。
お疲れ様でした

2018/07/13 (Fri) 22:01

-  

管理人のみ閲覧できます

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

2018/08/09 (Thu) 17:36
vanillaice (Akira)

Akira  

To テンプレートの件 内緒さん

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

このテンプレートなんですが、自分の好き勝手に制作した専用という感じなんですね。
なので共有に出せるものではないなぁ、と思っています。
カスタマイズなどされます際は非常に苦労を強いられると思う ^^;

なので「カスタマイズ完全自己責任」という形で良いのであれば、共有には出さずにブログ内限定配布なら可能です。
いずれにしろ取り除かなければいけない独自性など修正しまして、8月内を目処ということでよろしければ。
今しばらくお待ち下さいね。よろしくお願いします。

2018/08/10 (Fri) 01:37

-  

管理人のみ閲覧できます

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

2018/08/10 (Fri) 23:42
vanillaice (Akira)

Akira  

To テンプレートの件 内緒さん②

こんばんは。
今FC2ブログ変数に不具合があるようなのでちょっと遅くなるかもです。
運営のお仕事次第ということで。すみません (´・ω・`)

2018/08/12 (Sun) 18:39

-  

管理人のみ閲覧できます

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

2018/08/13 (Mon) 04:56