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

テンプレート配布中テンプレート

2019/08/28

2023/10/14 22

vanillaice (Akira)

LivingStandard RWD

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

名称	Haven へいゔん
動作確認済みブラウザ
トップページ記事並び	要約表示タイプ
記事幅(PC 最大)	メイン --- 最大約960px(内寸約880px) サイド --- 最大約300px
記事内で使える見出しレベル	h2からh6まで
jQuery導入	なし
Google fonts導入	なし
Font Awesome導入	なし
Lazyloading導入	あり
OSダークモード対応	なし
パン屑リスト表示	あり
固有セクション	プロフィール最新記事リスト(サムネイル付き)
構造化マークアップ	個別記事のみ「BreadcrumbList(パン屑リスト)」「BlogPostiong」
Lighthouseスコア (トップページ平均)
固有機能	画像にドロップシャドウ YouTube動画縦横比固定見出し装飾その他使い方詳細はARTICLE DEMOを参照
ライセンス	Required 必須事項・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項・Modification 改変・Personal Use 個人利用・Commercial Use 商用利用 Forbidden 禁止事項・Distribution 再配布・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考

パソコン: 2カラム; サイドメニュー --- 右

タブレット: 2 or 1カラム; サイドメニュー --- 右 or 下
デバイス幅依存

スマートフォン: 1カラム; サイドメニュー --- 下

最終更新 2023.10.3

公式タグプラグインの位置ズレの対策
サムネイル付き関連記事リストを全体リンクに

更新履歴 2023.9.21

No imageの設定方法を変更
YouTube縦横比を自動調整

更新履歴 2023.8.28

Twitter名称・ロゴ変更に対応
カスタムプロパティ加増
『全記事リスト』の名称を『インデックス』に変更(FC2多言語の表現を踏襲)
グローバルナビゲーションからカテゴリリストを削除
ユーザビリティの最適化
idセレクタによるスタイリングをclassセレクタに統一
コメント削除アラート追加
その他UI調整

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

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

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

過去の更新一覧

更新履歴 2022.1.6

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

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再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("pager-prev-image");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("pager-next-image");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("pager-prev-cate-image");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("pager-next-cate-image");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>function changeTextValue(e){document.getElementById("subject").value=e};</script>

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

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

更新履歴 2020.5.28

ページ送りのJSを修正

更新履歴 2020.3.30

コメント返信のJS変更

更新履歴 2020.3.23

個別記事ページ送りの複製を可能にしました

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

更新履歴 2019.11.23

コメント主のリンク表示用JS及びデザインの変更
NEWマークJS変更

更新履歴 2019.10.16

サイドメニュー部プロフィール画像の縦横比が崩れる件修正

再ダウンロードが困難な方はお手数ですが自主修正をお願いします。申し訳ございません。

#side-prof-pic { で検索するとスタイルシート内に1箇所ありますので、ルールセット内 height: 100%; の直下に object-fit: cover; を追加。

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

へいゔん
承認されました。ありがとうございます。

サンプル

Samples

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

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

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

目次へ戻る↑

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

Common customization.

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

目次へ戻る↑

記事編集リンクについて

The position of edit link.

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

目次へ戻る↑

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

Cautions before asking for something.

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

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

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

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

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

Comments 22

2019/09/01 (Sun) 07:58

管理人のみ閲覧できます

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

Akira

2019/09/01 (Sun) 13:57

To Chrome警告の件内緒さん

こんにちは。

この理由は「lazyloadとpreloadが真逆のシステムだから」です。
tremolo以降はリンク先ページをpreloadするスクリプトを導入しています。とはいえ遷移が推測されるページ内容(特に画像)の全てをpreloadする必要はないですよね。
lazyloadの場合は「読み込まない」ために行っており、まして「先に読み込む」必要はどこにもないもので (´・ω・｀)

要は「せっかくpreloadしてやってるのに何故遅延させるのだ」という指摘です(above the fold内のみ)
preloadは帯域の制限やメモリの状態に左右されますがlazyloadはそうではないのと、preloadよりlazyloadで通信量に制限をかけたほうが速いですね。

テンプレートの独自preloadは「遷移」の速さ、特に「全記事一覧」をどうにかしたかったんですね。このページは処理がめちゃくちゃ遅いので。
それが解消されているはずです。よろしければお試しください(笑)

2019/09/01 (Sun) 16:11

管理人のみ閲覧できます

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

Akira

2019/09/01 (Sun) 23:05

To Chrome警告の件内緒さん

こんばんは。

全記事一覧はpreloadを使わないと速度改善できないのでこういった併用をしています。
本来はどちらか選択して採用すべきなんでしょうが。それだと事が足りないんですよね。

長くお使い頂ければ本望です。いつもありがとうございます :)

2019/09/05 (Thu) 15:34

管理人のみ閲覧できます

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

Akira

2019/09/05 (Thu) 21:40

To Haven最新記事リストの件内緒さん

こんばんは。

> プラグイン（サイドバー）の一番下に「最新記事」が表示されてしまいます〜


で検索するとhtml内に該当箇所が出てきますのでガイダンスに従ってください。

本記事に明記の有る通り、
注)
でCtrl + F検索するとカスタマイズ想定部位にガイダンスを入れてありますので事前にご確認くださいね。
よろしくお願いします。

2019/09/05 (Thu) 22:11

管理人のみ閲覧できます

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

Akira

2019/09/05 (Thu) 22:28

To Haven最新記事リストの件内緒さん(完了のご報告)

いえいえ。どうぞ気に病まれませんよう(笑)
お疲れ様でした :)

terubon

2019/09/14 (Sat) 15:48

Haven の件

Havenのダウンロードがされない内に、テンプレート設定してしまいました。
又、違ったテンプレートからの投稿で又ご迷惑を掛けました。
Havenの設定は正しく出来ていると思いますので、一度ご確認ください。

La_Vita　にしようか Haven　にしようか迷う所ですが、画面の明るいレイアウト、拡張性、
操作性等々やはりLa_Vitaの方が私にあっているように、思いますので今後更にについては
勉強し、La_Vitaで行こうと思っています。貴殿の確認して頂いた後、La_Vita　に戻します。
写真の２枚並列の方法を、貴記事を熟読し実験を重ねていきたいと思いますので、
先ずはこれの解決に傾注する積りですので、その節は又お世話になりますが、宜しくお願い致します。
スクリーンショットのアップロード長い試行錯誤の結果、今朝がた何とかできました。
その節はLa_Vitaで投稿させて頂きます。以上、ご報告まで。

Janedoe1471

2019/09/14 (Sat) 16:08

To terubonさん

横レスすいません、terubonさん、以前にも申し上げましたが、もしも、お知り合いや読者さんの中に、IEから閲覧をしている方が、けっこうおられるようならば、Havenよりも、La_Vitaのほうが、見やすいと思います。
ですから、おっしゃるように、La_Vitaのほうが、私としても、おすすめです。
一度、「IEからどう見えているか」ということを、ご自身でも、確認されるとよろしいと思います。
Akiraさん、お手数をおかけして、申し訳ありませんが、IE非対応の件についても、terubonさんに詳しくご説明いただけると、幸いです。

terubon

2019/09/14 (Sat) 16:56

La_Vita

私も個人的にIEはどうも・・・chormeに切り替えて久しいのです。
まだまだAkiraさんにお世話になると思いますが、La_Vitaでいくつもりです。
在職中は大型～中型コンピューターを扱い、パソコンも先駆者的存在でしたが
退職して15年、浦島太郎みたいな物で、Akiraさんに迷惑を掛けています。
宜しくご指導ください。

terubon

2019/09/14 (Sat) 18:58

写真を横に・・

Akiraさんの丁寧な説明と、スクリーショットをみて、何とか理解が出来たのでやってみました。
つまり許される横幅を当分に使えば良いんだ・・・左右の写真の幅を実数で指定するからはみ出してに
下になって段表示に・・これを左50％、右50％+10px・・ちょっと待てよ、10pxをほぼ等分して
左右とも48％にして見たのです。投稿した、伊東市、伊豆市の記事の写真をこの様に幅指定してみました。
両方ともタテになっていたのが、並列になったのです。・・・すごいうれしかったぁ。Akiraさんありがとう。
今はLa_Vitaの設定になっています。一度ご検証下さい。ご意見を頂いてLa_Vitaに切り替えます。
Akiraさんの返信が楽しみで、明朝が楽しみです。その後はLa_Vitaで、文字の統一、改行位置の修正、
ヘッダー部分の写真の入れ替え等々、楽しみが増えました。ありがとう・・・おやすみなさい。

Akira

2019/09/15 (Sun) 17:04

To terubonさん, To Janedoe1471さん

こんにちは。
えーと、ちょっとまとめますね。

terubonさんはLa_Vitaの方を採用される、ということで良かったでしょうか。現在設定されているのはHavenの方なので、一時的に変えているのかそれとも名称を勘違いされているのか判断がつきません(笑)

Janedoe1471さんが心配されているのは、「terubonさんご自身がどのブラウザを利用しているか」ではなく「terubonさんのブログへ訪れる人がどのブラウザを利用しているか」という点です。IE対応については個人の方針ですから以下の記事をお読み頂いた上でご自身での判断をお願いします。

参考記事: IEの対応・非対応の選択に悩んでいる方へ
https://vanillaice000.blog.fc2.com/blog-entry-930.html

IEのセキュリティが切れる2023年までサポートするのか、それとも今のうちに打ち切るのか、ということですね。いずれどこかで切らなければいけませんので、それをいつにするかということです。
Janedoe1471さんへは、terubonさんが「もういまのうちからIE非対応で行く」という決断をされるのであればそれはご本人の意思ということで尊重して頂くようお願いします。
Janedoe1471さんが懸念しているのは「terubonさんが理解した上で行動しているのか」という点だと思いますので、良い機会ですからここではっきり決めてしまうと良いですね。

ただLa_Vitaについても原則「IE非対応」ということで提供している点もお忘れのないようにお願いします。Havenほど「まともに見られない」状態にはなりませんが、なにしろ製作者の私自身がIEをガン無視して作成しています(笑)
そして非対応を明示しているテンプレートについては「IEでの表示が…」というご相談もお受けしていません。

ということでよろしくお願いします (o'ω')ﾉ

Akira

2019/09/15 (Sun) 17:05

To terubonさん

~~2枚並べできてますよ。~~今記事を書きましたのでよろしければご一読くださいね。

参考記事: レスポンシブテンプレートで画像を横に並べる方法
https://vanillaice000.blog.fc2.com/blog-entry-952.html

----- 追記
確認後La_Vitaに戻す、と書かれていますね。失礼しました。
で、少し修正を入れましたので、カスタマイズの前にLa_Vitaの再ダウンロードをして頂けると嬉しい。
お手元のLa_Vitaの名称をLa_Vita1などに変更した上で、配布ページから改めてダウンロードです。名称を変更しておかないと同名テンプレートと判断されてダウンロードできませんので注意。
お手数おかけします。よろしくお願いします ('0')/

あと、横並びですが、できていません。
https://file.blog.fc2.com/vanillaice000/cap5/capterubonsan----600.png

詳細はLa_Vitaへのコメントの返信に書きました。

Janedoe1471

2019/09/15 (Sun) 17:50

To Akiraさん

はい、全部Akiraさんが指摘されているとおりです^^
La_VitaがIE非対応なのは、もちろん、承知しておりますが、見え方は、わりと普通な感じなので、これなら、大きな問題はなさそうだな、と思いまして。
もしも、IE非対応について、理解されていない段階で、いったんHavenに決めてしまって、改造などにも手をつけてしてしまったあとで、固定読者さんや知り合いの方たちから、「見えない」という苦情がガンガン入ったりすると、困ったことになるので、Havenを選ぶなら、あくまでも、IEでの見え方を、ご本人が理解したうえで、というふうに、懸念しておりましたものです。
「助け隊」のほうにお見えになったのがご縁で、terubonさんのブログを拝読していたのですが、Yahooブログからの移行後、テンプレート選びについては、なかなか進まないご様子でした。
ですが、La_Vitaについては、お気に召したようで、おすすめすると、すぐに試されていたので、ああ、ついに気に入ったテンプレートが見つかって、よかったな、と思っていたところです^^

Akira

2019/09/15 (Sun) 18:09

To Janedoe1471さん

そうですね。非対応を選ぶならできれば警告オーバーレイなどを付けて頂きたいなぁ、とは思います(笑)
この件についてはterubonさんがLa_Vitaを選ぶということなので、私は特に異存はありません ^^;

terubonさんへの対応はひとつひとつ片付けて行ったほうが良いな、と思っています。
まずはテンプレートを決定することろから、次が画像並べかしら。できればヘッダーからにしてもらった方が良いけれども。
ちょっと様子を見ながら対応しようと思います(笑)

yoshinon@情報管理LOG

2019/11/15 (Fri) 08:16

No title

はじめまして！
ブログのイメージを変えたくて探していたら、こちらの素晴らしいテンプレートに出会いました。
まずは、作成してくださったことに感謝いたします。
さて、質問なのですが、記事一覧に記事のサムネイルが表示されないのですが、どのようにすればよろしいのでしょうか？お答えいただければ、ありがたいです。

Akira

2019/11/15 (Fri) 12:07

To yoshinon@情報管理LOGさん

こんにちは。ありがとうございます :)

> 記事一覧に記事のサムネイルが表示されない〜

本来有るべきスクリプトをカスタマイズ時に削除されているようです。
再DLされまして、任意追加のカスタマイズを慎重に行うようにしてください。

google analyticsなどのコードは</body>直前ではなく</head>の直前に入れてくださいね。でないとデータを正しく取得できません。
そしてコード自体が古いものなので新たに取得されたほうが良いと思います。
現在ご利用中なのは ga JS (getTracker) ですが現在では gtag JS です。ga JSはたぶん2〜3世代前のコードだと思います ^^;
getTrackerはまだ動作はしますが実際には既に廃止されていますので書き換えをおすすめします。
よろしくお願いします。

yoshinon

2019/11/16 (Sat) 05:18

To Akiraさん

ご教授ありがとうございました。
何度も申し訳ございません。

> 本来有るべきスクリプトをカスタマイズ時に削除されているようです。
ちなみに、CSSの方でしょうか？

あと、Googleアナリスティクスのご指摘ありがとうございました。
かなり前に取得してから、全然更新していませんでした。

Akira

2019/11/16 (Sat) 10:28

To yoshinonさん

こんにちは ('0')/

> ちなみに、CSSの方でしょうか？〜

要素をスタイルシートに書くことはできませんので(今回はscript要素です)、htmlの方です。

yoshinon

2019/11/23 (Sat) 05:09

To Akiraさん

ありがとうございました。
おかげで、解決いたしました！

Akira

2019/11/24 (Sun) 12:51

To yoshinonさん(完了のご報告)

こんにちは。
確認致しました。お疲れ様でした :)

コメントに関する注意事項

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

管理者にだけ表示を許可する

「配布中テンプレート」カテゴリの一覧を見る