attention admin about comments trackbacks you may also like

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

2019年08月28日
テンプレート
16
HTML5 CSS4 RWD
Havenテンプレート

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

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

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

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

名称 Haven
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大830px
サイド --- 最小300px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾
・ YouTube縦横比固定
使い方詳細はARTICLE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
パソコン タブレット スマートフォン
2カラム 2カラム or 1カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下

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

サンプル

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

メタタグの設定 > OGP設定「有効にする」

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

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

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

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

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

ナビゲーションの「ABOUT」リンクについて

You can change or delete ABOUT link in navigation.

ヘッダー下グローバルナビゲーション内の ABOUT は予備リンクです。遷移したい特定のページがあれば「ABOUT」のテキストを適切な文言に書き換えた上でリンクを登録。不要の方は削除してください。空リンクのまま放置しないよう注意。

ヘッダー画像とブログ説明文について

About header image and site description

ヘッダー画像を 変更 する方は ヘッダー背景 を目印にするとスタイルシート内に パソコン用とスマートフォン用の画像指定箇所 がありますのでこの2箇所のURL(画像アドレス)を変更してください。デフォルトでは同種画像のサイズ違い、パソコン横1500px、スマホ横800pxで指定していますのでサイズ調整の参考にしてください。縦横比は不問ですが横長で。

画像の切り替え(PC, SP)が面倒な方はパソコン用の大きい方を採用し、「スマホ用」「パソコン用」に同じ画像URLを記載しても構いません。が、この部位はlazyloading適用外なのでスピード面に若干の差は出るかもしれません(といっても無視できる程度です)

背景「色」の方も簡単に変更できるようにしてあります。対象部位は ドミナントカラー で検索してください。スタイルシート内に1箇所あります。画像や背景色を変えると随分雰囲気が変わると思いますのでお好きにカスタマイズしてください。

ドミナントカラーとヘッダー画像を変更

ヘッダー画像が 不要 な方は 注)ヘッダー画像不要の方ここから削除 で検索するとhtml内に出てきますのでガイダンスに従って該当箇所を削除。以下のような見た目になります。

ヘッダー画像削除

ヘッダーの「プロフィールアイコン」は自動で取得しますのでプロフィール画像未設定の方は個人設定を行ってください。推奨は500px程度の正方形です。
環境設定「プロフィール」

プロフィール画像の下に続く「ブログ説明文」も自動取得です。プロフィール文ではないことに注意。ブログ説明文の(SEO的な)最適文字数は 120文字以内 です。1300px以上の画面で見た時に 4行 でちょうど120文字。
ユーザー情報の設定「ブログの説明」

ブログ名でweb検索された際に代表ページへのリンクとともに表示される説明文なので重要設定です。プロフィール文(自己紹介文)と混同しないよう適切な説明を入れると良いですね。そしてダラダラと長文にならない配慮も必要です。

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

スピード強化について

Behavior about navigation

Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。

「新着記事リスト」と「プロフィール」について

About recent list and profile

それぞれのプラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策(新着記事リスト)
  • バリデートエラー無し(htmlが正確)

できればプラグイン側を非表示にされた方が良いと思います。表示位置の変更は可能です。

補足事項

Handouts

  1. ナビゲーションリンクなど主要の「単語」について
  2. ページ内スクロールボタンの位置について

【1について】

他社から移転される方向けに ナビゲーションなどの日本語化 を一時的に行いましたが、今回で終了します。FC2ブロガーは日本語圏の方だけではありません。日本人の多くは基礎英語を理解できますが、逆に諸外国の方で日本語を理解できる方はほとんど居ませんので、次作より多言語での提供へ軌道を修正します。ご理解をお願いします。

対象部位(対象単語)をキー検索すれば修正部位をすぐに特定できますので、必要のある方は自主修正という形でお願いします(本テンプレートは日本語なので次作へ向けての予告です)

【2について】

現在FC2ブログでは無料アカウントの方でも広告が出ないようになっています。2020年8月末日までは恐らく確定で、期間限定になるのか同年9月以降は再度広告が表示されることになるのかはわかりません。

本作については「広告は無い」ことを前提にボタン位置を設定していますが、期限を迎えた際に再調整する可能性があります。その際には改めてアナウンスを行います。

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

Cautions before asking for something.

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

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

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

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

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

関連する記事
vanillaice (Akira)
Author: vanillaice (Akira)
* Internet Explorerはサポートしておりません。
* メールでの返信をしておりません。
ブログ内で必ずお返事はしておりますので
ご面倒ですがリコメの確認に再度お越しくださいね *

コメント(16)

There are no comments yet.

-  

2019/09/01 (Sun) 07:58

管理人のみ閲覧できます

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

Akira  

2019/09/01 (Sun) 13:57
vanillaice (Akira)

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
vanillaice (Akira)

To Chrome警告の件 内緒さん

こんばんは。

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

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

-  

2019/09/05 (Thu) 15:34

管理人のみ閲覧できます

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

Akira  

2019/09/05 (Thu) 21:40
vanillaice (Akira)

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

こんばんは。

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

<!-- 注)最新記事リスト不要の方ここから削除 -->
で検索するとhtml内に該当箇所が出てきますのでガイダンスに従ってください。

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

-  

2019/09/05 (Thu) 22:11

管理人のみ閲覧できます

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

Akira  

2019/09/05 (Thu) 22:28
vanillaice (Akira)

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

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

terubon  

2019/09/14 (Sat) 15:48

Haven の件

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

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

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
vanillaice (Akira)

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
vanillaice (Akira)

To Janedoe1471さん

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

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

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

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