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

La_Vitaテンプレート

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

名称
La_Vita
ら ゔぃーた
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.20
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.17
  • Font Awesomeの利用を停止
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • グリッドアイテムをスマートフォンでのみ全体リンクに変更
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

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

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

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

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

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

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 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("prev-a");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("next-a");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("prev-cate-a");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("next-cate-a");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要素を最新バージョンのそれと差し替え。

【コメントボタンの調整】
#sendbtn, で検索するとスタイルシート内に1箇所あります。このルールセットの display: flex;display: inline-flex; に変更。

更新履歴 2020.5.28
  • ページ送りのJSを修正
更新履歴 2020.3.30
  • コメント返信のJS変更
履歴履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

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

更新履歴 2019.11.25
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
更新履歴 2019.9.12

全体横幅に1300pxまでの制限を追加

更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

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

【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点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">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--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;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}
②について

#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箇所あります。この直近、2行上にある </div>削除

</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.22
  • Font Awesome(JS)を廃しインラインSVGに変更
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

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

更新履歴 2018.12.21
  • サイドメニュー部input要素のCSS変更
  • Google Adsense用レイアウト調整CSS追加

不具合修正ではありませんので旧バージョンのままお使い頂けます。adsenseをメインコンテンツ側に掲載される方は少し楽できるかと思いますので再DLをご検討ください(adsense掲載方法の指南は行いません)

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

Facebook連携がAPI単位で廃止されるようですがFC2は広報しなくて良いのだろうか (´・ω・`)

ら ゔぃーた
承認されました。ありがとうございます。

サンプル

Samples

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

カスタマイズのコツ

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

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

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

Common customization.

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

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

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

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

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

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

Cautions before asking for something.

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

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

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

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

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

-
2018/06/30 (Sat) 14:49

管理人のみ閲覧できます

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

-
2018/06/30 (Sat) 15:28

管理人のみ閲覧できます

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

-
2018/06/30 (Sat) 17:39

管理人のみ閲覧できます

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

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

To La_Vita 諸々の件 内緒さん(完了のご報告)

こんばんは。記事のUPが遅くなりお手数おかけしました。
ページ送りサムネイルとパララックス双方が正常に機能したようで安心しました。

> トップページのヘッダー画像をオリジナルに変更したい場合は〜

はい。おっしゃる通りその2箇所の変更で合ってます。
念の為デフォルトURLは
https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/pink-tulips-from-below-picjumbo-comthth.jpg
でhtml内に2箇所ありますので2つ変更してくださいね。

> コンソールのwarningsが、どうやらhttps://ad.ad-arata.com/static/embed.jsという物が原因のようなのですが〜

こちらももうそろそろ修正してくれると良いんですけどねぇ (´・ω・`)
document.writeを辞めてinnerHTMLに直すだけなのに。
arata adはその他にもちょっとした問題が。
いずれにしろこの件は対処不可能(有料登録以外)なので放置するしかないと思います。
お疲れ様でした :)

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

To La_Vita DLリンクの件 内緒さん

私またやっちゃいましたか。
これもう恒例になってますよね。
私がミスし、内緒さんが指摘してくれるという通過儀礼(笑)
今後もご指摘よろしくお願いします ^^;

-
2018/07/01 (Sun) 01:01

管理人のみ閲覧できます

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

hige
2018/07/01 (Sun) 20:33

あっ これ いいですね

 このテンプレは
 タイトルバックに指定画像が入れられるし、primaryのmargin-topを0にすると、折角Akira氏が凝ったレイアウトを残念な普通に変更出来るし。
 これでようやく要約表示のデザインに移行出来そうです。(親爺ギャク)
 テンプレのdonnaに乗換えようとしていたのですが、タイトルのバックの画像処理がめんどくさくて、集中力のなくなった年寄りの私は諦めかけてました。タイトルバックの画像には私がアップした画像の縦横比が出来るだけそのままであって欲しいので。
 これで出来れば、INDEX(トップ)ページの記事の表示が2列表示だと非常に嬉しい。
 と、暗に催促してみる。
 とりあえず乗換える準備を着々と(遅遅と)自力準備中です。
 https://blgid1974.blog.fc2.com/?template=La_Vita01&index

 で、エントリーページのタイトルバックにその記事の画像が出てくるのは、最初は違和感があったのですが、これはこれでおもしろいですねぇ。
 画像のない記事の時には初期指定の画像が出てくるのも秀逸です。

 ひとつ疑問があるのですが、PCでサイドカラムが右に表示されている時、ページの最下段に移動してから上方に移動する時、サイドカラムがすぐにスクロールされなくて、サイドカラムとメイン(primary)の縦のサイズが同じになった時(と思われる時)に、サイドカラムがスクロールし出すようです。
 いつの時期にか何かの理由があって、この様な仕様にされたのだとは思いますが、私は上方へのスクロールはサイドカラムもすぐに付いてきて欲しいなぁ と。

 Akira氏のテンプレを採用されたブログを拝見した時にそれぞれ色々カスタマイズされておられるようですが、それがどのテンプレなのかを知ることが出来ません。
 なにか知る方法は無いのでしょうねぇ。何か埋め込むことなど出来るのでしょうか?

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

To ファイル名称の件 内緒さん

こんばんは ('0')/

そういえば内緒さんは全記事リストにも画像を掲載されてましたよね。
なるほど納得です :)
FC2が全記事リストのサムネイル変数を作ってくれると良いんですけどね。
ただこのページは特殊でどのページ種と比べてもダントツに重たいので現実的ではないかもですね。

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

To higeさん

higeさん、こんばんは (●'0'●)/

カスタマイズ拝見しました。とても良い感じにできてますね :)

スクロールアンカーの件ですが、La_VitaではCSSのみで実装しています。
higeさんが言われる動作を実現するにはhtmlのラッパーをいくつか増やすのと、jQueryが必要になります。
今回はjQueryを用いずに制作しましたので軽快に仕上がっているはず。

動作的にはこれまでのスクロールアンカーの方が遥かに良いのですが、モバイルファーストとスピードの点で今回はこの形を取りました。

参考記事: サイト改装 脱jQueryなど
https://vanillaice000.blog.fc2.com/blog-entry-724.html#toc-3

------
どのテンプレかすぐにわからない件については、独自変数にテンプレート名を表示させる <%style> というのがあるのですが、多くのユーザーさん(管理人)にとっては正直不要というか、テンプレート製作者の名前があるだけでも疎ましいと感じる人もいらっしゃるかも(笑)
あまりこう、ドーンと私や私のテンプレートを主張するのもどうかと思うので利用していません ^^;

毎回CSSの書き出しに Website skin name としてテンプレート名を記していますので、右クリックソース開示からCSSファイルを開いて頂くことで確認できます。めんどくさいけど。

全記事リストの二列並びはカスタマイズで可能ですよ。
確かにパソコンからだと記事幅が広いのでちょっと見た目がアレでソレに感じますよね。
ただ番号のついた(ついているべき)リストなのでやはり縦一列が理想かもしれません。

hige
2018/07/02 (Mon) 21:37

多謝

スクロールアンカーの件、解りました。
この記事読んでました。でも忘れてました。申し訳ありません。

テンプレ名の件、ご指摘の部分にテンプレ名が書かれているのは解っていたのですが、他サイトのHTMLは表示出来てもCSSを表示する方法が解らずにいました。でAkira氏の説明従って試行錯誤の末見つけました。
HTMLの中に書かれてるんですね。
この
<link rel="stylesheet" href="<%css_link>" media="all">
ってなんかのおまじないなんですかね。ていうか、ここで該当のテンプレ専用のCSSを読み込んでいるというか、指定してるというか、のかな?

あと、ごめんなさい!(^_^;)
INDEXページの件。
テンプレートの管理画面でDLしたテンプレ名をクリックするとプレビュー出来ますが、その表示ページのURLの最後の文字がINDEXになってたので、そう表記しました。
私が書きたかったのは全記事のarchivesのページではありません。INDEXという単語が示す意味を間違ってました。私が書きたかったのは一番最初に開くHOMEページのことでした。
もう少しよく吟味してから書くべきでした。
記事も書いて戴いたのに、ほんとにごめんなさい。

このところ、軽率なことばかりやっててちょっと落ち込んでます。

vanillaice (Akira)
Akira
2018/07/02 (Mon) 23:55

To higeさん

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

<%css_link> が各ユーザー専用CSSファイルのアドレスを出力する変数です。
サーバーからレスポンスが返って来た時にはURLに書き換わっています。

INDEXはトップページのことだったんですね。
そうなるともう全く別のデザインなのでまた次回作以降ということで。
いえいえ。語句が統一されていないFC2ブログならでわなので落ち込む必要ないと思います(笑)
私も「全記事リスト」という表現を用いれば良かったと反省しております ^^;

-
2018/07/06 (Fri) 00:34

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/07/06 (Fri) 01:45

To La_Vita colorboxの件 内緒さん

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

La_VitaのJSはjQueryを使わず全てネイティブで書いています。
ColorboxはjQueryが必要なのでhtml内にある
jQuery必要な方コメント削除
を目印にガイダンスに従ってください。
colorboxはCSSリンクだけでなくJSファイルと実行コードも必要なはずなので jQueryファイルの直下に記載してください。
よろしくお願いします。

内緒さんはお元気でなによりです。
なんか私風引いた気がします。 ( ̄∀ ̄;)

-
2018/07/07 (Sat) 00:12

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/07/07 (Sat) 02:18

To La_Vita colorboxの件 内緒さん

こんばんは (o'д`o)ゝ

先回の(過去の)テンプレートと全く同じ位置に記載するだけですよ。

> jQueryファイルの直下にcssを記載しました〜

CSSファイルは<head>〜</head>内にしか置けません。
<link
で始まるものはCSSファイルですから
<%css_link> で検索してヒットした要素のすぐ下に入れてください。

あとJSファイルもあるはずです。
それが無ければ動きません。
<script src="アドレス.js"></script>
となっているものがそれです。
jQueryの下に入れてください。

その下に他にもう一つ
<script>
jQuery(function($){
省略
})
</script>

こんな感じの実行コードがあるはずですので入れてください。

一言一句同じわけではないのでともかく link から始まってるのか script で始まっているのかをよく見分け、link要素はhead内へ、script要素はjQueryファイルの下へ。
実行コードは必ずcolorbox本体のJSファイルの下に書いてください。

というか過去テンプレートと見比べればすぐにわかると思いますよ。

-
2018/07/07 (Sat) 15:32

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/07/07 (Sat) 16:05

To La_Vita colorboxの件 内緒さん③

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

先回のテンプレートと同じ記載であるならば先回も動かなかったはずです。
colorboxを動かすには最低でも2つのファイルと一つの実行コードが必要です。

必須2ファイル
<link rel="stylesheet" type="text/css" href="https://ファイル名.css">
<script src="https://ファイル名.js"></script>

必須1実行コード
<script>
jQuery(function($){
省略
})
</script>

------
今内緒さんのテンプレートに記載されている内容は以下の通り

<head>
.
.
<link rel="stylesheet" type="text/css" href="https://ファイル名/colorbox/colorbox.css" /
.
.
</head>
.
.
<!-- jQuery必要な方コメント削除
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->

無関係な内容

<script type="text/javascript" src="https://ファイル名/jquery-colorbox.js" ></script>
<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>
<link rel="stylesheet" type="text/css" href="https://ファイル名/colorbox.css" media="screen" />
<script>
jQuery(function($){
省略
})
</script>

内容はこのまんまです。「ファイル名」のところだけ伏せています。
これでは動きません。

----
1. まずcolorboxのCSSファイルがhtmlのhead内とhtmlの後方と2つありますが、head内に入れてあるファイルは消失していますし記述エラーです。
<link rel="stylesheet" type="text/css" href="https://ファイル名/colorbox/colorbox.css" />
最後のブラケットが足りません。これはhtml構文エラーです。
記述の位置はここで合っていますがファイルが存在しませんので、後方にある
<link rel="stylesheet" type="text/css" href="https://ファイル名/colorbox.css" media="screen" />
をカットし、head内の間違った内容と差し替えてください。
コピーではなくカットです。後方へのCSSファイルは何度も言いますがルール違反ですから消してください。

2 jQueryのコメント化が修正されていません。
「コメント解除」の意味は
<!--

-->
削除する という意味です。
以下の通り赤字部位を削除。

<!-- jQuery必要な方コメント削除
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->

この作業をしないとjQueryは絶対に動きません。

3. 実行コードがサンプルのままです。
私は
======
<script>
jQuery(function($){
省略
})
</script>
こんな感じの実行コードがあるはずですので入れてください。
======
上記のようにサンプルとしてコードを書き、念の為「一言一句同じわけではない」とも書いておきましたが、
省略 などと書いてあるJS実行コードはありません。
この部分は私のテンプレートとは関係がありませんしcolorboxは私が制作したプラグインではありませんので、私は内緒さんがどんなコードを利用しているのか知りません。
なので「省略」と書きました。このサンプルをそのままhtml内にコピペしろと言ったわけではありません。
今までcolorboxをご利用になっていたのですから、テンプレートを変更する度に移設していたJS内容が必ずあるはずです。
それを書いてください、という意味です。
そしてそれは

<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>

この内容のことです。これがいわゆる「実行コード」「フックアップ」と言われるものです。

-----
まとめ

1. head内<%css_link>を目印にそのすぐ下に正しいCSSファイルを正しく記載
2. jQueryファイルの有効化(コメント解除)
3. 正しい実行コードを記載(既に記載されていますので「省略」の付いたscript要素を削除)

この3点で動くはずです。
coloboxはもう5年ほど更新がありませんのでjQueryファイルのバージョンと整合性があるかどうかは私ではわかりません。
jQueryプラグインなどテンプレートと無関係な内容については私が管理することはできませんので、ご利用になる内緒さんご自身がファイルや導入方法など常にしっかりと管理を行ってください。
よろしくお願いします。

-----
念の為書いておきます

<head>
<link rel="stylesheet" href="<%css_link>" media="all">
<!--permanent_area-->
<link rel="stylesheet" type="text/css" href="正しいcolorbox用CSSファイル">
<!--/permanent_area-->
</head>
.
.
.
<!--permanent_area-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="正しいcolorbox用JSファイル"></script>
<script>
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>

<!--/permanent_area-->


こうですね。
赤字の独自変数はcolorbox利用は個別記事だけでしょうから追加しましたが任意です。
また、html5では type="text/javascript" などは不要な記述ですので削除してあります。
上記内容も丸っとコピペすれば良いわけではないですよ。
<link rel="stylesheet" href="<%css_link>" media="all"> は特に目印として書いただけで既にテンプレートに含まれている内容ですから複製しないように注意してください。
その他書き換えるべきところは書き換え、また、記載する位置もしっかり確認してから行ってください。
内緒さんが加えるべき内容は太字にしてあります。
それ以外は目印だと思ってください。

htmlの終わりは

}]
</script>
<!--/topentry-->
<!--/permanent_area-->

</body>
</html>

こうなっていなければいけません。余分な内容は削除してくださいね。

とにかくcolorboxのJSファイルと実行コードはjQueryファイルのすぐ「下」です。それ以外の場所に入れたり複数書いてしまったりなど無いようチェックしてください。
スクショなどを用いればもっとわかりやすく的確な説明ができますが、非公開コメントなのでできませんというか控えざるを得ません。
これ以上の説明が必要であれば、できれば公開でお願いします。
今回特にファイル名の間違いなどがありますので、非公開の場合にはURLを直接記すとブログの所在が明らかになってしまいますので的確な指摘ができません(笑)

-
2018/07/08 (Sun) 01:56

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/07/08 (Sun) 14:43

To La_Vita colorboxの件 内緒さん④

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

かろうじてというかなんとなく動いてはいますがソースはぐちゃぐちゃです (´・ω・`)
私の説明を何度もよく読み返し、ポイントとなるところを一つ一つ丁寧にチェックしてください。

今回ファイル名などに伏せ字を用いてご理解頂くのは無理だと判断しました。
なのでブログ名などわかってしまいますが全てオープンで説明させてくださいね。
もう一度書きます。

・head内のCSSファイルは存在していません!
これのこと。クリックしてみればわかります ↓
https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/colorbox/colorbox.css
・私の書いた内容を単純にコピペしてはいけない!
・スクリプトファイルなどを重複させてはいけない!
・記述すべき位置は指示に従い、なんとなく適当に入れてはいけない!

-------
現時点での問題
・CSSファイル重複(うち一方はファイル消失)
・CSSファイルはhead以外に入れてはいけない(正しい方のCSSファイルがbody内にある)
・jQueryファイル重複
・記述位置が違う

------
今のところ正しく作業が進んでいるのはjQueryファイルのコメント解除のみです。
スクショです。
注意!
FC2独自変数はブログ管理人にしか見えない仕組みです。第三者には目視確認することができません。
なのでスクショ内には存在しませんが、実際の内緒さんが保有しているソース内には変数が記されています。
なので テンプレートのhtml内容はスクショと全く同じわけではありません

https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/capcbox6676234th.png
https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/capcbox778234th.png
https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/capcbox009834th.png

スクショに従って修正をお願いします。

-------
どのテンプレートでも毎回やることは同じですよ。
ですから 作業手順をしっかりメモしておくなどしてご自身で管理してください

・CSSファイル(ファイル名末尾の拡張子が .css になっているもの)は必ずhead内に入れる
</head>で検索すればすぐにわかります。この</head>よりも「前」に書かなければいけません。
(<%css_link>の文字列を持つlink要素の直下が妥当)
これのこと ↓
<link rel="stylesheet" type="text/css" href="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/colorbox.css" />

・スクリプトファイル(ファイル末尾拡張子 .js)はjQueryファイルよりも下に入れる
(直下である必要はないが心配なら直下で構いません)
これのこと ↓
<script type="text/javascript" src="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/jquery-colorbox.js"></script>

・実行コード(フックアップ, トリガーコード)はcolobox用スクリプトファイルの直下に入れる
これのこと ↓
<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>

-----
またこれも既に書きましたが、記述の仕方は揃えるようにしてください。
空要素(終了タグを持たないもの)末尾のスラッシュはhtml5では不要です
script要素のtype属性はhtml5では不要です

例) 末尾スラッシュ
×
<link rel="stylesheet" type="text/css" href="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/colorbox.css" />

<link rel="stylesheet" type="text/css" href="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/colorbox.css">

例) script要素のtype属性
×
<script type="text/javascript" src="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/jquery-colorbox.js"></script>

<script src="https://blog-imgs-89.fc2.com/r/i/o/riokusunoki/jquery-colorbox.js"></script>

特にhead内要素の末尾のスラッシュあり・なしはOGPなどに影響することがあります。
つけるならつける、つけないならつけない、と方針を定めるようにしてください。

きろろ
2018/07/09 (Mon) 00:46

To Akiraさん

ありがとうございますm(_ _)m
何度も何度もご丁寧に、すみません。
css……
確かにソースから見ると表示されませんね(..;)
おかしいですよねえ……
なので、ファイルアップロードからcssファイルのurlをコピーして張りましたら、
今度はちゃんとcssの内容が見られることができました。
ご指定の場所は直しました。ちゃんと動いています。
なんで今まで動いていたのかしら……(..;)
結構前からhtml5になっていますよね……。
Axisもhtml5? ですよね??
/も、script要素のtype属性もそのまま使っていました。
猛省しておりますm(_ _)m

vanillaice (Akira)
Akira
2018/07/09 (Mon) 01:21

To きろろさん(完了のご報告)

こんばんは ('0')/

私のテンプレートは全てhtml5ですよ。
スラッシュの有無やtype属性については微々たるものというか、無駄が生じるというだけで動作に影響を与えるわけではありません。
(スラッシュは他の要素と揃っていない場合影響が出ることも)
なので猛省する必要はありません(笑)

より重大なのは何かしらのファイルを重複させたり記すべき位置を間違えることです。
これで直りましたので要点をしっかりメモして同じ轍を踏まないことです。
苦労すればした分だけ理解もついてきますし忘れにくくなるはずです。たぶん(笑)

いずれにしろ修正できたようで安心しました。
お疲れ様でした :)

きろろ
2018/07/09 (Mon) 23:49

To Akiraさん

お世話様でした(;▽;)
とりあえず、メモしましたが時代の流れについて行けない歳なのかなあ(・ω・`)

hige
2018/07/11 (Wed) 14:52

なんとか乗換完了

念願のAkira氏の要約表示のテンプレにようやく乗換完了しました。
Akira氏に怒られそうな改造をブログタイトル辺りに施してしまってまして、どうか絶縁状が突きつけられませんように。
要約表示にしてみると、トップページや検索ページなど、記事一覧がすっきり見やすく表示されとても気に入ってます。
で、幾人からか好評の感触があります。
改造の後遺症で、個別記事でもブログタイトルの背景画が、私の指定する特定の画像に固定されてしまいましたが、記事によってはかなり小さい画像のこともあるので、解像度の悪い画像が大写しになるよりこの方がかえって良かったと思ってます。

CSSのrootに、まるで変数の指定箇所

:root {
/* 注)各種カラー指定 */
--base-bg-color: white;/* 全体背景色 */

なんてのがあり、びっくりしました。HTMLでは変数は使用出来ないと聞いていたので、へぇ~っ と。
試しに幾つか自分なりに追加してみるとそれも旨く機能してます。これは便利ですねぇ。

あと、自前のFont Awesomeが表示されなくて四苦八苦しました。
で、
<script>window.FontAwesomeConfig={searchPseudoElements:true}</script>
の一文がHTMLに入ってなかったのでこれを追加してみました。
ところが、疑似要素の
.extlink::after {
display: none;
font-family: "Font Awesome 5 Solid";
content: "\f35d";
}
は表示されないのです。
結局何かの拍子に、ユニコード中の \ をキーボードの¥ではなくバックスラッシュキーで入力し直すと旨くいきます。
何かの加減でバックスラッシュでないのが入力されてたのかも。全角の¥を半角変換してバックスラッシュでない方になってたのかもと、思ってます。

過去記事の要約表示のリストを見ながらご満悦です。
無理矢理やっつけたのでまずいところが出てくるのかもと。

ともあれ
感謝のご報告を。


vanillaice (Akira)
Akira
2018/07/11 (Wed) 23:18

To higeさん

higeさん、こんばんは (●'0'●)/

カスタマイズお疲れ様でした。
winのバックスラッシュは円記号になりますがmacはバックスラッシュなんですよね。
winはバックスラッシュを表示上円にしていて実際にはバックスラッシュというなんか変なシステムですよね (´・ω・`)
winってたぶんsift-JISのバックスラッシュ文字コードが無いんだと思います。
今回の原因ははっきりとはわかりませんが、winは円とバックスラッシュで問題を起こすことが多々あります。

---------
CSS variablesはずっと使いたかったんですが、IEを切らないことにはどうしようもなかったんですよね。
最近の2つのテンプレートはIE非対応にしたのでようやく使えるようになりました(笑)

ぼっちん
2018/07/15 (Sun) 08:48

お助け下さい

いつもお世話になっております ^^

今までテンプレートを Axis にてブログライフを楽しませて戴いておりましたが、脱jQueryに於いて素晴らしい構成のこの「La_Vita」にて私もjQueryからの脱出を図るべく、いまいろいろと苦戦しております。(GTmetrixやPSI等のスコアアップ作業はまだ手を付けずです(笑))

さて、この「La_Vita」で超軽量画像拡大スクリプト「Luminous」を導入しようとしましたら、なんと拡大した画像が記事の下(裏側)に潜り込んでしまうことが起きました (^^ゞポリポリ

もしかして「La_Vita」にちょこっと施してあるカスタマイズをヘマしたことが原因?と疑って、まったく手を付けてないデフォルト La_Vita に Luminous を組み込んでも同じ現象が起きました。
今まで利用させて戴いておりました Axis では全く問題なく正常に拡大画像が表示されるのですが、、、。

とりあえず状況を見て戴けるように、テスト用画像を https://oops0011.blog.fc2.com/blog-entry-244.html の記事ページの一番下に貼り付けてありますのでご確認戴けたら嬉しいです。

■ 追記させて戴きます。

同テスト用画像をクリックした時に、アクセス解析に「代替テキスト」と記録されますが、これ何処から現れる文言なんでしょうか? だいぶ不思議です (^^ゞポリポリ

どうぞ、よろしくお願い致します m(_ _)m

Akira
2018/07/15 (Sun) 12:12

To ぼっちんさん

ぼっちんさん、こんにちは ('0')/

今出先なので症状の確認だけしました。
原因はパララックスのz軸指定です。
translate3dのz軸とz- indexは関わりがあるというか結局は同じです。

帰宅次第対処法など追記しますね。
よろしくお願いします ( ゚Д゚)ノ

---- 追記
.lum-lightbox {
z-index: 4000;
}


これでいけると思いますので一度お試しください。
で、代替テキストの方ですが、画像をクリックするとアクセスとしてワンカウントされるってことなんでしょうか。
私アクセス解析使わないのでよく知らないんです (´・ω・`)
alt属性を拾ってるんだろうとは思いますが、ぼっちんさんはaltをちゃんと書いてますよね。
ちょっとよくわからないです。ごめんなさい (*_ _)
aタグのhrefで開いてるのでそうなるのかもしれないですね。

-----
GTmetrixのスコアですが、単純なことを言ってしまえばトップページのサムネイル表示を
<img src="<%topentry_image_url>">
から
<%topentry_image_w300>
に変更すればすぐ上がりますよ。
結局は「画像の実寸と表示寸の違い」を指摘しているのでここを変えない限りスコアは上がらないと思います。
Axisの場合トップページ最初の1ページ目(index_area)に限ってはCSSの方で画像を差し込んでいましたので600〜800pxなど小さめの画像にできていたかと思いますが、La_Vitaの場合は記事に掲載したサムネイル対象画像の実寸に依存しますのでぼっちんさんの場合は全て1200px以上ということになります。

GTmetrixのGoogleモジュールの結果と、GoogleのSpeed Insightsの結果も違います。
例えば私の今利用しているテンプレートはトップページのGT結果がCからDスコアですが、Speed InsightsだとAの94〜99です。
Speed〜の方はGTのモジュールよりもっとテクニカルな部分(レンダリングパスやラウンドトリップなど)に重点を置いているのでそうなります。
いずれにしろ変数を変更するだけでGTもSpeedもすぐスコア上がります(笑)
それなりのことをすれば99取れると思います。
ただしlazylodingできなくなるので体感速度は落ちると思います。
ここなんですよね。結局は。
スコア上がったけどなんか遅くなった気がする… みたいなの (´・ω・`)

個別記事はまた状況が違いますので高得点取れてるはずです。
サムネイル画像をアイキャッチで指定している場合はなおさら。
ぼっちさんの場合98〜99が平均じゃないですかね。

ぼっちん
2018/07/15 (Sun) 14:27

ありがとうございました

早速に対処方法をご教示くださってありがとうございました ^^
CSS欄末尾に追加しましたところキッチリと正常表示されました、どうもありがとうございます m(_ _)m
これでまた一歩脱jQueryが捗りました(笑)

GTmetrixやPSI等のスコアアップの件では、何やらGoogleって「画像処理に拘りすぎ!」って感じでだいぶ閉口しますよね (^^ゞポリポリ
もうその辺りは「Googleはそういう傾向だから」ってことであまりムキにならないことにしました(笑)
いろいろと試した結果、他にもスコアアップ方法は「幾らでもあるから(笑)」って余裕も出来ましたし(爆)
これからは「スコアより実速度アップ」を目指そうかと (≧ω≦。)プププ

> alt属性を拾ってるんだろうとは思いますが、ぼっちんさんはaltをちゃんと書いてますよね。

そうなんです、最初「代替テキスト」の文字列に気がついた時にalt書き間違えた?と確認したんですけど、ちゃんと書いてありまして、、、(^^ゞポリポリ

> aタグのhrefで開いてるのでそうなるのかもしれないですね。

他の画像のものはキチンとalt設定通りにアクセス解析にも記録されるんですけど、やっぱりその辺りに原因がありそうですねぇ、解析ツールとの兼ね合いもありそうですから、ちょっと追究してみます ^^

いろいろとご教示をありがとうございました m(_ _)m

vanillaice (Akira)
Akira
2018/07/15 (Sun) 17:06

To ぼっちんさん(完了のご報告)

修正できているのを確認しました。お疲れ様です :)

FC2ブログへの要望「サムネイル用変数の見直し」が通れば容易に改善できる問題なんですけどね。
マジで通らないかしら。切実に (´・ω・`)

アクセス解析の方、お役に立てずごめんなさいね ( ̄∀ ̄;)

ぼっちん
2018/07/16 (Mon) 09:30

増えないですねぇ

Akiraちゃん、おはようございます ^^
昨日はご指導をありがとうございました、ほんとに助かりました m(_ _)m

FC2ブログへの要望「サムネイル用変数の見直し」が通れば容易に改善できる問題なんですけどね。
マジで通らないかしら。切実に (´・ω・`)

Akiraちゃんのテンプレートクリエイターとしての切なるこのリクエストなのに支援が全く増えてなくて、私もちょっと「Akira先生の素晴らしきレスポンシブテンプレートを利用中のユーザーさんみんなで支援してねぇ!」っとヤキモキしちゃってます (^_^; アハハ…
その結果、Akiraちゃんのより素晴らしく進化したレスポンシブテンプレートをタダで利用出来るようになるんですから、支援ポチしないんじゃ罪悪だってば! 言い過ぎ? (≧ω≦。)プププ

このコメントを読まれている皆さん、是非に
https://request.fc2.com/ja/request/9473
このFC2リクエストを「賛成」にポチっと参加して下さいね~ よろしくお願い致します~♪ ^^

アクセス解析の方、お役に立てずごめんなさいね ( ̄∀ ̄;)
いえいえ、全然気になさらないで下さいね~。

vanillaice (Akira)
Akira
2018/07/16 (Mon) 14:49

To ぼっちんさん

こんにちは (●'0'●)/

変数を一般ユーザーさんが扱うことは稀なので、リクエストを見たところで「???」という感じだと思います(笑)
ただ可能性はあると思うんですよね。
Googleの動向やweb一般の流れを見ていればそれが「必要かもしれない」という予測は立つわけだから。
賛成票が少なくても運営側に意図が伝わればきっと可能性はある… と思いたい!(笑)

ぼっちん
2018/07/30 (Mon) 14:31

確認をお願いします

毎度お世話になっております ^^

実はいま「La_Vita」のAkiraちゃんスクリプト(笑)
https://blog-imgs-50.fc2.com/tpljs/v/a/n/vanillaice000/pc/La_Vita/201806294edcfbe.js
が存在せず404エラーが起きております。

ご確認くださいまし~ (^^ゞポリポリ

vanillaice (Akira)
Akira
2018/07/30 (Mon) 15:09

To ぼっちんさん

ぼっちんさん、こんにちは (●'0'●)/

その tpljs の文字列を持つファイルなんですが、これは一時ファイルというか格納されているファイルのコピーみたいな感じです。つまりキャッシュファイルというか。
以前はこの形式で配布されていたように思いますが現在は原本のままDLできるようになっていると思うんですよね。
ところが稀にこのtpljsを引っ張ってくることがまだあるみたいです。
なんでかはわかんない (´・ω・`)
テンプレ編集中のページを右クリックソース開示するとcssファイルなどは一時ファイルになってます。
それと同じです。

公式ページから正常なファイルをDLできることを確認しましたので、申し訳ないのですが再DLをお願いしますー ( ̄∀ ̄;)
というのはファイル名が失せているので何に関するファイルなのか私にもわからないんです。
ぼっちんさんがおわかりになればそのファイルアドレスをここで記して書き換えて頂くだけで済みます。
症状が続くようなら運営に報告しようと思います。ご面倒おかけします。

-------
ごめんなさい。フツーに開けたし((((笑)
開けるってことは動作してると思うんだけどどうなんだろ (´・ェ・`)
いずれにしろこのアドレスに差し替えをお願いします。正規ファイルです。 ↓

https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/rellax_moveTo.js

ぼっちん
2018/07/30 (Mon) 15:44

ありがとうございます

超特急なお返事をありがとうございました ^^

正規ファイルに差し替えをさせて戴いて、キチンと動作することが確認出来ました。
なにやらサーバーが変ですねぇ、この症状が発生すると、スムーススクロールがスルスル~じゃなくて、シュパッと遷移しちゃうし (^_^; アハハ…
昨日から様子を見てたんですけど、時々そんな症状が出たり復活したり(笑)

まぁ、正規ファイル戴きましたからもう私の分は再発しないでしょうけど(爆)

ほんとに早急なご対応をありがとうございました m(_ _)m

vanillaice (Akira)
Akira
2018/07/30 (Mon) 15:48

To ぼっちんさん

確かにちょっと嫌な感じですよね (´・ω・`)
前はBehaviorのJSファイルが完全に消失してましたし。
困るっつーの ( ̄∀ ̄;)

hige
2018/08/12 (Sun) 17:00

スマホの横位置で

Androidのスマホで横位置にすると、ページスクロール:ページトップに移動するアイコンが画面上部に隠れてしまいます。
@media screen and (max-width: 768px) {
#page-scroll {
bottom: 50px;/* org 220px; */
}
}
とやって逃げましたが、このPC表示の場合より大きな幅を取っておられるのは何か意図がおありなんでしょうねぇ。
もしかして、FC2の広告ですかねぇ。

vanillaice (Akira)
Akira
2018/08/12 (Sun) 18:43

To higeさん

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

「横位置」というのはランドスケープ, 横倒しのことですよね。
おっしゃる通り広告を考慮しています。
公式テンプレートで有料アカウントを基準にするわけにいかないのと、スマホランドスケープモードは小さめタブレットの通常モードとサイズが被る機種もありますのでブレイクポイントとして切り替えるわけにもいかないんです。
なので有料アカウントの方は自主的にカスタマイズして頂けると助かります。

hige
2018/08/12 (Sun) 20:18

横倒しの時の

やっぱりそうなんですか。
他の方のブログで確認してみました。
画像を大きくして見たい場合、スマホを横倒しでみる時があります。
こんなに広告の専有面積が大きくては、困ったものですね。
写真が中心のブログの方もおられるので、
せめて横倒しで見る時には広告は左右のいずれかに移動してほしいものですが、そんなのは無理なのかな。
まぁ、写真中心のブログの方はスマホなんぞどうでも良いのかも知れませんが。

vanillaice (Akira)
Akira
2018/08/12 (Sun) 23:24

To higeさん

> せめて横倒しで見る時には広告は左右のいずれかに移動してほしいものですが、そんなのは無理なのかな。〜

テンプレ製作者側で、という意味ならば不可能です。
広告を操作したらアカウント抹消されてしまいます(笑)

better ads standardsは「縦30%を超過してはいけない」という決まりですが、現状のランドスケープではめっちゃ超過します。
これがランドスケープにも適用されるかどうかですよね。されるのであれば広告配信側で適切な切り替えが必要だと思います。
いずれにしても日本でローンチされるまで対応は無いと思いますので早く日本でも始まってほしいな (´・ω・`)

-
2018/11/15 (Thu) 12:24

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/16 (Fri) 10:19

To La_Vitaヘッダー画像の件 内緒さん

こんにちは ('0')/

<!-- パララックス -->
から
<!-- パララックスここまで -->
に挟まれている内容を一旦削除、以下の内容と差し替えてください。

<div class="rellax" data-rellax-speed="2" style="background-image: url(ここに画像アドレス);"></div>

上記内容を貼り付けする際、作業をブラウザ上(テンプレート管理画面)で行う場合にはインデントは付けずに、
<!-- パララックス--> の末尾で一度改行したらそのままペーストするようにしてくださいね。
よろしくお願いします。

-
2019/08/09 (Fri) 16:00

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/08/09 (Fri) 18:41

To 再配布の件 内緒さん

こんばんは。

えっと。以前内緒さんご本人からその旨のご連絡を頂いてますよね。「友人を助けたよ」という感じで。
知人・友人のお手伝いをするケースはよくあると思いますし、私自身は特に気を留めていませんでした(笑)
そっか。手伝ってあげたんですね :)
ぐらいの感覚で ^^;

コメント欄の方を拝見しまして、これは私の姿勢も悪かったのかな、と反省しています。
たぶん気に留めなかったのは内緒さんに対する私の信頼からなんですね。これが全く見ず知らずの方だったらどうだろう、と考えた時に同じ受け取り方をするかどうか。
んー。わかんない(笑)
いやまじでわかんない ( ̄∀ ̄;)

もし「カスタマイズ請け負います」と公言するとか「カスタマイズしたものを共有に申請します」とかならもう「それは辞めて」という場面でしょうが。
ただ今回は「お友達を助けた」という感覚で私も受け取っていますし特に気にされませんようお願いします(笑)
あとクレジットの話も出ていましたが、それもまぁ一理ありますね。消し去るのは辞めて欲しいですし、残せば良いのかという問題かと言えばそれも違うと思いますし。
なので双方が正しいという感じです。そして双方が「良かれ」というお気持ちで書かれたのではないかと思います。感謝。

本件については明確なお返事が必要だと思いますので、私としては「どうぞお気になさらず」という結論にさせてくださいね。
また今後お友達でお困りの方がいらっしゃればぜひ協力してあげてください。他製作者さん作品への言及はできませんのであくまでも私のテンプレートの場合は、ということになりますけれど。

ただし改変後の動作不良などのご相談や修正をお引き受けすることはできませんので、その点だけ留意して頂ければと思います。
やっぱね、よく知ってる人がやるのと赤の他人がやるのとでは違った結果になることがあるんですね。
そういうのは「良くない」と言われればそれまでなんだけど。
常連さんのツケは良いけど一見さんのツケはダメ、みたいな。そういうのってあるよね? ^^;
忖度とか言われそうだし今初めてこの単語使ったわ(笑)

「ちょっとした手助け」の線引って難しいですよねぇ (∵`)
それからお気づきになるかわかりませんが、Rさんにもお礼申し上げます。もー感激しちゃいましたよー。とても気遣ってくださってありがたいことです。
いつもみなさんありがとうございます。この件が尾を引かないと良いのですが。

-
2019/08/09 (Fri) 20:12

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/08/10 (Sat) 00:13

To 再配布の件 内緒さん②

はい。大丈夫だと思います。そもそもどちらも相手をやりこめたり服従させたがるような方ではないですしね。
お疲れ様です :)

-----
今コミュの方拝見しまして、「ブログ崩れ」の件ですが、恐らくサーバーが切り替わったことによって(CDNサーバーの利用の有無)、CSSファイルのデータ取得に失敗したのだと思います。
ブログの体裁を為していないというのはたぶん「htmlだけ」のレンダリングを目にしたからではないかと。
一時的な問題ですが切り替えまでは少し時間を要するかも。
(ファイルの切り替わりは一般からCDNは早いですが逆はたぶん遅い)
伝言ゲームのようで申し訳ないんですが、内緒さんからお伝えくださいね。
よろしくお願いします。コミュ管理もお疲れ様です。

terubon
2019/09/12 (Thu) 07:11

始めまして。ご紹介頂き『La_Vita』に更新しました。私はヤフーからの難民の一人でテンプレートは
『Basic White』を使っていました。『La_Vita』が高機能で大変使い良く、作者のAkiraさんのご指導も
大変良いとの事で、昨日更新しました。成程、全体に見易く早速、表面の写真を風景画に・・と思っていました。
『ブログの確認』で最初の記事を目にした時、写真が従来、横に2枚平行におかれていたのですが
『La_Vita』ではそれが、縦1列に変わっており、見難くなり、且つ、全体に空白が多くなるなど
見難くなり、現状では元に戻さざるを得ません。
①横に⒉~3枚並列に並べる様な方法をご教示ください。
②トップページの写真を変えたいのですが、どこを触れば良いでしょうか?

年と共に(75歳)根気が薄れ、良く読めば分かる事の質問と思いますが、ご指導の程お願いします。
別件:貴文中『メタタブ』とありますが、どういう意味でしょう?簡単に教えtれ下さい。

terubon
2019/09/12 (Thu) 08:18

始めまして。ご紹介頂き『La_Vita』に更新しました。私はヤフーからの難民の一人でテンプレートは
『Basic White』を使っていました。『La_Vita』が高機能で大変使い良く、作者のAkiraさんのご指導も
大変良いとの事で、昨日更新しました。成程、全体に見易く早速、表面の写真を風景画に・・と思っていました。
『ブログの確認』で最初の記事を目にした時、写真が従来、横に2枚平行におかれていたのですが
『La_Vita』ではそれが、縦1列に変わっており、見難くなり、且つ、全体に空白が多くなるなど
見難くなり、現状では元に戻さざるを得ません。
①横に⒉~3枚並列に並べる様な方法をご教示ください。
②トップページの写真を変えたいのですが、どこを触れば良いでしょうか?

terubon
2019/09/12 (Thu) 11:21

質問シートに記入したので、不要と判断していました。私のURLは次の通りです。
https://kosaiumeda.blog.fc2.com/

始めまして。ご紹介頂き『La_Vita』に更新しました。私はヤフーからの難民の一人でテンプレートは
『Basic White』を使っていました。『La_Vita』が高機能で大変使い良く、作者のAkiraさんのご指導も
大変良いとの事で、昨日更新しました。成程、全体に見易く早速、表面の写真を風景画に・・と思っていました。
『ブログの確認』で最初の記事を目にした時、写真が従来、横に2枚平行におかれていたのですが
『La_Vita』ではそれが、縦1列に変わっており、見難くなり、且つ、全体に空白が多くなるなど
見難くなり、現状では元に戻さざるを得ません。
①横に⒉~3枚並列に並べる様な方法をご教示ください。
②トップページの写真を変えたいのですが、どこを触れば良いでしょうか?

質問を書く位置が違っていますか?

vanillaice (Akira)
Akira
2019/09/12 (Thu) 11:39

To terubonさん

こんにちは。

まず、「見難いので元に戻した」お気持ちはわかるんですが、答える側としては現状の目視確認をさせて頂かないとすぐに伝わるものも大変時間がかかってしまうことがあります。
ですから質疑応答の最中は質問該当のテンプレートを設定状態にして頂くことをお願いしています。
今回はたまたま「恐らくこういうことだろう」と察しがついたので良いんですが、次回から設定状態でのご質問をお願いします。

----
以下の問い2点についてお返事をお願いします。

1. 「レスポンシブテンプレート」が何であるのか理解していますか?
2. スマートフォンはお持ちですか?

現状の確認ができませんので「たぶん1と2の双方の問についてNOである」と仮定してすすめます。
レスポンシブテンプレートというのは「いかなる画面サイズでもものがはみ出さない」テンプレートです。簡単に言えば。
パソコンの横1200pxを超える画面でも、スマートフォンの横320pxの画面でも、画像や文章は画面からはみ出さないよう調整されます。
ただしCSSによる widthの絶対値指定が無い場合 に限ります。

レスポンシブをご理解頂くために以下のスクリーンショットをご覧ください。設定中のbasic_whiteでの様子です。

【basic〜 画面1400pxの様子】
https://file.blog.fc2.com/vanillaice000/cap5/capbasic1400----1200.png

【basic〜 画面768pxの様子】
https://file.blog.fc2.com/vanillaice000/cap5/capbasic768----800.png

パソコンの画面では全体が綺麗に収まっており、写真も2列に並んで収まっていますが、画面が768px(これは一般的なタブレットのサイズです)になると、全体は画面外へはみ出してしまい、写真は2列並びを維持していますが右側が大きく見切れています。つまりこちらも「はみ出し」が起こっており、はみ出した部位をカット(表示させないように)しているためこういう表示になります。

レスポンシブデザインというのはこういった「はみ出し」が 起こらないようにする テンプレートです。
2列並びの写真をterubonさんと全く同じhtml内容で掲載したLa_Vitaでの様子が以下の通りです。


【La_Vita 画面1400pxの様子】
https://file.blog.fc2.com/vanillaice000/cap5/caplavita1400----1200.png

【La_Vita 画面768pxの様子】
https://file.blog.fc2.com/vanillaice000/cap5/caplavita768----800.png

画面横幅768pxのときには、パソコンで右横にあったサイドメニューがメインカラム(記事のことです)の右横から、メインカラムの「下」へ移動します。何故なら画面内に収まりきらないからです。
同じように画像についても2列並びでは画面内に収まりませんので縦並びに変更されています。
これがレスポンシブテンプレートです。

まずその点をご理解頂いているかどうかが重要です。
terubonさんは今まで写真を掲載するのにこういう発想だったのではないでしょうか ↓

テンプレートの記事の幅を確認する(例: basic〜の場合は818pxです)

2列に並べるには818pxを2等分し、写真と写真の間の余白も計算に入れるので約320pxとする(合計640px + 余剰分)

この計算ならばbasic~では収まりますね。何故ならbasic〜は 固定幅 であり、画面サイズが小さくなればはみ出すだけです。
La_Vitaのようなレスポンシブデザインは全てを画面内に収めなければいけませんので、記事の幅は常に一定ではありません。
画面サイズが768pxのときの記事の横幅は588pxですから、2列並びで640pxの写真をそのまま横並びで表示するのは無理ですよね。
箱のサイズが588pxなのに中身が640pxならば中に入れることはできません。しかし画像の場合は2つに分割できますから、横に並べずに縦にすることで収まるようになります。
この物理的な法則はおわかり頂けますでしょうか。ここに納得がいかないという方へはレスポンシブテンプレートはおすすめしません。

-----
terubonさんの現状の画像掲載のhtmlは以下のようなものです。

<img src="左画像アドレス" alt="" style="width: 320px;">&nbsp;<img src="右画像アドレス" alt="" style="width: 310px;">

双方の画像に「絶対単位」で横幅を指定しています。
320pxと指定したら、画面サイズが仮に280pxであっても320pxで表示しますので、すなわち画面超過です。
レスポンシブの考え方では以下のような指定を行います。

<img src="左画像アドレス" alt="" style="width: 50%;"><img src="右画像アドレス" alt="" style="width: calc(50% - 10px); margin-left: 10px;">

左画像へのwidth指定は 50%
右画像へのwidth指定は calc(50% - 10px)
つまり50%引くことの10pxです。この引いた10pxは画像間の余白に使いますので、右画像には
margin-left: 10px
を指定して余白に使います。

このhtmlで掲載すればいかなる機種(パソコン or タブレット or スマートフォン)でも「2列並び」を実現できます。はみ出すことも縦に並び替わることもありません。

【La_VIta 画面1400pxの様子】(パソコン)
https://file.blog.fc2.com/vanillaice000/cap5/caplavipc----1200.png

【La_VIta 画面768pxの様子】(タブレット)
https://file.blog.fc2.com/vanillaice000/cap5/caplavitb----800.png

【La_VIta 画面375pxの様子】(スマホ)
https://file.blog.fc2.com/vanillaice000/cap5/caplavisp----500.png

並びを崩したくない場合には画像のwidthにpxで数値を入れるだけではいけません。基本は%で指定してください。
とはいえ%だと画像の原寸を超えてしまう場合がありますので、その場合は

<img src="左画像アドレス" alt="" style="width: 50%; max-width: 画像原寸px;"><img src="右画像アドレス" alt="" style="width: calc(50% - 10px); max-width: 画像原寸px; margin-left: 10px;">

とmax-width指定を追加してください。

過去記事については修正が困難でしょうが、これはもう「レスポンシブ」の概念が無いYahoo!で長く運営されていたので仕方がありません。なので「今後は」と割り切るか、可能であれば地道な修正をおすすめします。

vanillaice (Akira)
Akira
2019/09/12 (Thu) 11:42

To terubonさん

ヘッダー下画像変更は

https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/pink-tulips-from-below-picjumbo-comthth.jpg

上記文字列をCtrl+Fキーで検索するとhtml内に2箇所ありますので、希望の画像アドレスに変更してください。

----
質問の場所は「質問該当テンプレート専用記事」にお願いしていますので合っています。ご協力ありがとうございます。
ブログアドレスについてもコメント送信フォームの「YOUR website」への記入でOKです。特定のページに関するご質問の場合には直接そのページに飛べるよう、記事URLをコメント本文内に別途記して頂けると助かります。

----
で、La_Vita含め、レスポンシブテンプレートを採用するか否かをまずご一考ください。
以下のリンクはサンプルページです。それぞれを開き、ブラウザの横幅を広くしたり狭くしたり してどんな表示になるかご確認をお願いします。
この「レスポンシブ」という考え方にご賛同頂ける方へのみ使用をおすすめしています。

【トップページ】
https://blog-imgs-111.fc2.com/v/a/n/vanillaice000/la_vitamin1_top.html

【個別記事】
https://blog-imgs-111.fc2.com/v/a/n/vanillaice000/la_vitamin1_entry.html

terubon
2019/09/13 (Fri) 16:49

ご返事

私の不理解から、大変ご迷惑を掛け申し訳ありませんでした。
以下の問い2点についてお返事をお願いします。

1. 「レスポンシブテンプレート」が何であるのか理解していますか?
  レスポンス・・・反応、返信、等短絡的に単語の理解のみで、本質は全く分かっていませんでした。
  改めて少し勉強したのですが、パソコン、タブレット、スマホと多様化し、夫々の画面の広さに対応した
  ホームページを作っていたら、大変手間と時間が掛かる為、画面の大きさなどのパラメーターを与える事で
  夫々の端末に応じた画面が作る事の出来る高機能なテンプレート・・・と私なりに理解しました。
  どんな端末に対しても「はみ出し」が 起こらないようにする テンプレートです。
  如何でしょうか??

2.スマホは利用しています。イオンモバイルの格安スマホで、シャープの製品です。

途中まで何とか理解できました。

今から歯医者なので帰宅次第、続けて見ます。

スクリーンショットした物をこの質問シートにはどうして乗せておられるのでしょうか。
具体的なやり方が知りたいです。ごめんなさい。中断します。
  


vanillaice (Akira)
Akira
2019/09/13 (Fri) 17:04

To terubonさん

こんにちは ('0')/

いえいえ。ご協力ありがとうございます。助かります。
レスポンシブについて大体理解もできており、スマホもお持ちなんですね。というこは動作検証可能な環境があるということですよね。わかりました。
レスポンシブについてはそういう解釈で合ってます。

----
スクリーンショットの撮り方
パソコンがWindowsかMacかで異なりますが、OS(パソコン)の機能を使うよりもブラウザ拡張を利用した方が便利だと思います。
お使いのブラウザがChromeであれば以下の記事を御覧ください。

参考記事: Google Chromeのおすすめ拡張機能3選
https://vanillaice000.blog.fc2.com/blog-entry-942.html

-----
で、テンプレートの質疑応答の方へ戻ります。
まず、terubonさんはLa_VitaよりもHaven(ヘイブン)の方が向いているような気がします。
というのは、La_Vitaはナビゲーション(ヘッダーの下のリンクが記載されている帯)のテキストが英語なんですね。恐らくこれは日本語に変更したいのではないかと思います。作業自体は簡単ですが結構手間というか。
Havenは元々日本語で記載されていますし、ヘッダーの変更も簡単にできるようになってます。
なのでLa_Vitaに特にこだわりがなければHavenの方をおすすめします。

恐らくhigeさんのブログをご覧になって希望されたのだと思います。が、基本的にLa_Vitaの最大の特徴はヘッダーがパララックス(視差効果, スクロール速度をずらしてあります)になっているだとか、ヘッダーが横100%になっているだとか、そういう点なんですね。higeさんの場合はその特徴を全て取り除いてお使いです。ですからもしhigeさんのブログの体裁を目指すとしたらかなり大変な作業になるのではないかと。

Havenの記事の並びもLa_Vitaと同じタイプですし、差し支えなければ変更もご検討くださいね。

Havenの専用記事
https://vanillaice000.blog.fc2.com/blog-entry-943.html

-----
画像の横並びについてはhtmlを変更する以外方法はありませんので、既に記した内容をコピーしてお試し頂くか、明日以降になると思いますが画像を横に並べる方法について記事を書く予定です。
よろしくお願いします。

terubon
2019/09/13 (Fri) 21:58

こんばんわ

今日はゴルフと歯医者、ほっと一息、一杯飲んで今日も終わりです。
Akiraさんからのご丁寧なご指導も、しっかり読めず理解できない状況です。
ご推薦の『Haven』を試してみました。
私の希望の写真2枚並びも問題ない状況です。私のブログとしては十分です。
テンプレートもこれに変えてあります。一度お送りしますので見て頂き
ご指導をお願いします。

今日は一日あれこれ多忙で疲れました。もう寝ます。おやすみなさい。

vanillaice (Akira)
Akira
2019/09/14 (Sat) 07:28

To terubonさん

おはようございます ('0')/

設定されていないので確認できません(basic_whiteが適用されています)
Havenをご利用になる場合は以降のご質問もHavenの専用記事にお願いします。その前に記事内容を熟読してくださいね。
お疲れ様です。

terubon
2019/09/15 (Sun) 17:29

テンプレートの件

La_Vitaに戻しました。これも48%+48%にしたので、2階建てでなく
平屋の二間続きになりました。まずはこれで一安心です。

ご指摘の件まだ読みもしていません。実は知多の霊場巡りで朝から30000歩余り歩いたので
今日はこの後一杯やって早めに寝ますので、明日以降読ませて頂きます。

霊場巡りのブログもこのテンプレートで書いて、見たいので宜しく頼みます。
疲れました。明日よろしく頼みますね。

vanillaice (Akira)
Akira
2019/09/15 (Sun) 18:03

To terubonさん

ごめんなさい。さきほど別の場所で「横並びできてますよ」と書いたんですが、実際にはできていません。

・画像間の余白を半角スペースで作ってはいけない
・marginの指定が無い

ということでスマホでは結局上下並びになってます。そして画像間の「上下」の空白もなく密接しています。
https://file.blog.fc2.com/vanillaice000/cap5/capterubonsan----600.png

何故かというのは以下の記事に書いていますので熟読をお願いします。
ぬか喜びさせてごめんなさいね。

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

めんどうでも提示したhtmlで書かないと一生実現できませんので、ご自身でアレンジする前にまずは私が指南した通りにやってみてくださいね。その前に再ダウンロードの件もお願いします。

terubon
2019/09/16 (Mon) 10:36

横並び

①昨日の霊場巡りに疲れて朝寝してしまいました。
②新しいLa_Vita ダウンロードしました。
③私が勝手に手抜きした48% + 48%ではスマホ画面ではダメなのを確認しました。
④50% + calc(50%-10px)も試しましたが、ダメでした。
 昨日送って頂いた方法で挑戦します。

別件ですが、IEかChorme ですが、昔はパソコンと言えば、ウィンドウズ・IE・ヤフーが定番でしたね。
私もそうでしたが、ヤフーブログの文字の乱れ、ヤフーブログからの再認証が出来ない、等の問題を
やり取りしていたら『IE』は非推奨なのでChormeでお願いと冷たでい対応で、Chormeに切り替えて
今日に至っています、そんな事で難しい事は分かりませんがChormeでやっております。

vanillaice (Akira)
Akira
2019/09/16 (Mon) 12:44

To terubonさん

こんにちは ('0')/

② 新しいLa_Vita ダウンロードしました。〜
ありがとうございます。お手数おかけしました。

③ 私が勝手に手抜きした48% + 48%ではスマホ画面ではダメ〜
そうですね。半角スペースはフォント種だけでなくフォントサイズにも影響されます。画像は親要素(記事の横幅)を参照し、半角スペースは文字のサイズを参照します。それぞれ参照元(基準になるもの)が違うのですから、半角(及び全角)スペースで余白を取ってはいけない、というのはそういう理由です。

③ 50% + calc(50%-10px)も試しましたが、ダメ〜
この内容が「ダメ」というのは論理的に考えにくいんですが、実際にterubonさんが記載したコードの確認ができませんのでなんとも言えません。何かを試されましたら、その記事のURLをお知らせください。とにかく問題を解決するには「見せてもらう」ことが一番大事なので、自身だけで判断したり結論を出さず、必ず見せてくださいね。

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

上記ページに「おすすめ」としてあるものがあります。見出しの⑥の③「div要素でimgを包含」が該当です。
aタグを含める(画像をリンクにする)場合も追記しましたので再度ご確認をお願いします。

ソースコードはまずはアレンジせず、雛形を忠実に利用してください。まずはそこからです。よろしくお願いします。

vanillaice (Akira)
Akira
2019/09/16 (Mon) 12:47

To terubonさん

IE対応の件について最終です。

terubonさんがどうしているか、ではなくて、閲覧者がどうか、ということなんです。
もしterubonさんのブログへの訪問者にIEユーザーが多かったとしたら、「ブログのレイアウトがめちゃくちゃで読めません」というクレームが入ることもあります。
親交のある方が「絶対にIEから変えない」という方だったとしたら、親交が途絶えることもあるわけなんです。
Janedoeさんもそこの割り切りができるのかどうかを問うています。

私としては「熟考の末の決定」と判断して以後この件には触れませんのでよろしくお願いします (o'ω')ノ

terubon
2019/09/16 (Mon) 13:46

IE

了解しました。

vanillaice (Akira)
Akira
2019/09/16 (Mon) 14:05

To terubonさん

一旦ここで整理をしたいと思います。terubonさんの要件は以下の通り(過不足があればご指摘ください)

① テンプレート選び --- La_Vitaで決定 ✔
② IE非対応の件 --- 非対応でOK ✔
③ ヘッダー画像変更 --- 保留
④ 画像並列 --- 取組中

⑤フォントの色について
⑥ OGP設定について

-----
⑤と⑥についてです。

⑤ の「フォントの色」なんですが、今文章を書く都度色を変更されていますよね。言いにくいんですがこれはおすすめできません。
仮に今後「テンプレートを暗色系(背景色が暗いもの)」に変更したくなったときに文字が読めなくなります。
大抵の人はこのアドバイスをすると「絶対に白背景以外選ばない」とお返事されるんですが、未来のことを今決めて枷にしてしまう必要はありません。もしかしたら「このテンプレートかっこいいな」という感覚で黒背景を選びたくなることがあるかもしれないですよね。
ところが色とりどりで文章を書いているとそれが変更の障壁になります。
現に「変えるつもりのなかった黒背景に変えたくなった、文字が読めず困っている」といった駆け込み的お問い合わせは非常に多いです。


そして文字はやはり背景色の反対色が一番見やすいので、できれば通常のフォント色(黒系)で書き、要所だけに色付けされることをおすすめします。
こちらについてはご自身の方針ですから強制するわけではなく単なるアドバイスです。

参考記事: 背景色と衝突してテキストが読めない!に対処する
https://vanillaice000.blog.fc2.com/blog-entry-944.html

⑥ のOGP設定については、有効にしておくと個別記事のページ送りに前後ページのサムネイル画像が表示されるようになります。
OGP設定 「有効にする」
https://admin.blog.fc2.com/control.php?mode=setting&process=2#meta_tag

terubon
2019/09/16 (Mon) 14:07

IEの件

先程は無礼な返信ごめんなさい。パスワード不一致で送れなかったのです。
色々やってみた結果、パスワード未記入で送れたのがあれです。
この種の問題は起こっていないので、このまま行きます。ご心配感謝します。

テンプの件、48%+48%ではスマホが縦になっていますね。実は自分のブログを
自分のスマホで見るの始めてです。46%+46%にして見たらパソコン、スマホとも
横1列になっていました。でも自分のパソコン、相手のスマホ、タブレットの
画面サイズが変わったら、ダメですね。折角始めたテンプの勉強は続けて見ます。
又ご指導ください。よろしくお願いします。先ほどの50% + calc50%-10px)no
の結果は後刻お送りします。ごめんなさい。

vanillaice (Akira)
Akira
2019/09/16 (Mon) 14:19

To terubonさん

いろいろお試しになっているんですね。ですが根本的にその試み自体が間違いというか(笑)

画像の%というのは「記事の横幅を100%としてその割合」ですよね。記事幅1000pxのときの50%は500pxです。記事幅400pxのときの50%は200pxです。
同じように、余白として取った例えば2%も、記事1000pxの2%は20px、記事500pxの2%は8pxですよね。
一方半角スペースは「文字一つ分を100%としてその割合」なのですから、13pxフォントの0.6倍は7.8pxですし、15pxフォントの0.6倍は9pxですよね。

48%づつを半角スペースで繋いでスマホで横に並ばなかった原因は、半角スペースが記事幅の4%(余白を想定したもの)を超えたからです。結果「画像 + 半角スペース + 画像 = 100%以上」になった、と。100%で収めなければ入り切らないので2枚目が下に移動したわけです。
ですからそもそも「半角スペースを利用したことが間違い」なんです。

あと、無礼とか思ってませんのでお気になさらず(笑)

terubon
2019/09/16 (Mon) 17:01

フォント色

ご指摘の通り何のポリシーもなくバラバラですね。
⑤そこで『ミディアム』 『黒色』 『細字』体に前半の数点を修正してみました。
 この方が何だかほっとして落ち着いて読めますねぇ。

 編集画面で作成した文章を『ブログの確認』で見るのとでは、改行の位置が違い
 『ブログ確認』画面の方が、右側のスペースが大きいのに気が付きました。
 簡単に治る様なら教えて下さい。

⑥有効にしました。こんな機能気が付かなかったです。

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

terubon
2019/09/16 (Mon) 17:36

画像サイズの記入ですが
chrome-extension://nlipoenfbbikpbjkfpfillcgkoblgpmj/edit-react.html
上記URLで左側の写真をWクリックし、50%と記入し
右側写真をには calc(50%-10pv) と記入し、この作業を終わります。

再度、記事の管理画面で上記画面の写真サイズを確認すると、左側は問題ないのですが(50%と表示)
右側は46%と表示されており、calc(50%-10pv)が消えております。どうしてでしょうか?

terubon
2019/09/16 (Mon) 17:41

画面サイズ

前記質問の修正・・・再度『記事の確認』画面からこの写真サイズを見ると
左右両方とも46%となっていました。・・・・ごめんなさい。

vanillaice (Akira)
Akira
2019/09/16 (Mon) 18:45

To terubonさん

えっとですね、真意が伝わらなかったので改めて。

【フォント色】
これは「エディターのツールで色を指定しろ」という意味ではなく、「エディターのツールを使うな」という意味です。ツールを使わなければLa_Vitaの文字色はもともと黒系ですからその色で表示されます。操作する必要はないんです。
そしてフォントの「サイズ」についても、常に一定の大きさで書いているのであれば「ツールでの変更」をするのではなく、「テンプレートのデフォルトフォントサイズを変更する」という方法をとってください。そうすればツールを利用する機会は大幅に減るはずです。

何故頻繁にツールを使ってはいけないかというと、ツールバーを利用して変更したフォントというのは
<font color="#000000">文章</font>
こういうhtmlを出力します。こうなってしまうとテンプレートで指定した文字色が適用されなくなってしまいます。

La_Vitaでは記事を書く際に何もしなければ勝手に黒系の文字になります。そして仮に黒背景のテンプレートに変更した場合、通常は文字色に白系統が指定されていますので、自動で「白文字」に変更されます。
ですがterubonさんの場合はツールを利用して文字を明示的に変更していますから、黒背景に変えた場合その記事の文字色は黒のままで背景色と同化して読むことができません。

要は「必要のない作業はしない」ということです。黒文字で表示されるものにわざわざ「黒」と指定する必要はありません。フォントサイズも常に「このサイズが良い」と思う大きさがあるのであれば何も操作せずともそのサイズになるよう記事を書く度ツールを使うのではなくテンプレートの初期設定を変更してください。

ちょっと混乱するかもしれませんが、ブログエディターのツールを使いまくるとあとで必ず泣くことになりますので、いまのうちに意識を変えた方が良いと思います。

で。過去の記事はどうしようもないのでそのままにするとして、今後は注意されると良いですね。もし過去記事も修正されるのであれば、その旨お伝えください。かなり厄介な作業になることは覚悟の上で ^^;

で、今いろいろとカスタマイズ中ですが、テンプレートのカスタマイズは一旦中断してもらえないでしょうか。説明することがとてもたくさんあり、ひとつづつ解決して頂こうと試みている最中です。その間にterubonさんが別の作業をしてしまうともう私の方がついていけません(笑)
そのために「作業のフローチャート」を提示しました。先走らずひとつひとつ解決していきましょうね。

vanillaice (Akira)
Akira
2019/09/16 (Mon) 18:57

To terubonさん

整理しますね。現時点での最優先事項は

・フォントのサイズを変更すること

です。テンプレートの内容を変更する、という作業です。今はまだやらないでくださいね。ともかくテスト投稿を行ってください。その上でひとつづつ変更を加えていきましょう。
テスト投稿は文字のみです。画像は掲載しないでください。10行程度あると良いですね。後に削除(あるいは下書き化)して頂きますので適当な内容で構いません。

そしてterubonさんは今「画像を横に並べ、それをスマホでも維持したい」という特殊なことに取り組んでおられるのですから、参考記事(画像横並び)に注意点として記したように
新投稿画面では作業が間に合いません。
terubonさんの希望を叶えるにはhtmlのソースコードを書かなければならず、新投稿画面の初期モードではそれができません。ですから画像の件を解決したいのであれば 旧投稿画面 の方を使ってください。

どうしても新投稿画面を利用したいのであれば、「HTMLモード」を利用する必要が生じます。このモードは上級者向けです。文章やhtmlタグなどが全て横に繋がってしまいわけがわからない状態になっているものを操作しなければならないからです。

ともかく一度テスト投稿も頑張って旧投稿画面で書いてみてくださいね。
どうしても新投稿画面が良い、ということでしたらその旨お伝えください。

-----
一応terubonさんが画像に関してされたであろう新投稿画面の作業について「恐らくここでつまずいた」という点を上げておきます。

・ダブルクリックで出てくる「Width」の項目に「calc(50%-10pv)」と記した

calc(50%-10pv)ではなく calc(50% - 10px) です。-の前後には半角スペースが要りますし、単位はpvではなくpxです。

・結局横並びにならなかった

widthの変更だけではなくmarginの指定が必要です。margin指定はダブルクリックで出てくる「画像の挿入」だけではできません。

故に「新投稿画面のHTMLモード」か「旧投稿画面」のいずれかを使用しなければ実現不可能ということです。
これは単に作業工程について説明しているだけです。今は画像のことは一旦置いといてください。

-
2019/09/16 (Mon) 19:07

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/16 (Mon) 19:14

To 内緒さん

> 既に現役を退職されておられるのですか?〜

いえ。飲食店を経営しています。

> FC2の会社の方ではないでしょうね〜

違います(笑)

> お時間はたっぷりですか?〜

今新テンプレートの製作中なので平行してお返事しています。数年前から経営に徹しているので(店舗に出向かないという意味です)以前より自由な時間は増えていますが暇というわけでもない(笑)

html, CSSなんてのは別に知らなくても生きていけるというか、できるからといって特に自慢にもなりません。ただブログ運営で自分の希望がかなったときの喜びは経験した人でなければわからないですよね。
今苦労されていますがその代わり希望通りになったときの達成感はあるはずですから頑張りましょう。

-
2019/09/16 (Mon) 19:56

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/16 (Mon) 20:07

To 内緒さん②

ダブルクリックで出るポップアップ(画像の作成)の「Width」はもともとが単位のpxが省略されています。
calc(50% - 10px)
と記載して「作成」をクリックするとちゃんと記載されますよ。但し再度ポップアップを表示させると
calc(50% - 10)
になってます。ですがちゃんと作成できてますから心配は要りません。どのように出力されたかを確認するには再度ポップアップを出すのではなく、右上にある「HTML表示」をクリックしてください。

というか、画像の件は後にして欲しい旨お伝えしました。テンプレートのフォントサイズの設定を行うためにテスト投稿をまずお願いします。今画像をいくらやったところで terubonさんが利用している新投稿画面の標準モードでは絶対に実現できません ので一旦中止してくださいね。

もう一度お伝えします。

・テスト記事を投稿してください(文章のみ10行程度, 画像なし, ツールバーは一切利用しない)
・テスト記事作成は新投稿画面ではなく旧投稿画面を利用してください(上部にある「ここから旧投稿画面に戻ることができます」をクリックすると旧投稿画面になります)

-
2019/09/17 (Tue) 17:19

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/17 (Tue) 20:31

To La_Vita内緒さん

ごめんなさいね今帰宅途中です。着きましたら改めてお返事します。

vanillaice (Akira)
Akira
2019/09/17 (Tue) 20:48

To La_Vitaテスト投稿の件 内緒さん

改めまして、こんばんは。

投稿した旨お手数ですがお知らせ頂かないと、私が内緒さんのブログを四六時中見張るというわけにいきません。
そして昨日は時間の余裕があったのですが、毎日そうとは限りません。空いた時間でやってますのでご容赦くださいね (∵`)

-----
テスト投稿をしてみて、どうでしょうか。旧投稿画面は使えそうですか?
今まだ画像添付などはしていない状態ですが、この時点で「使えそうにない」と思われましたら新投稿画面を利用する以外ありませんのでお伝えくださいね。

ただ、旧投稿画面は「コードのコピペ(複製して貼り付けるだけ)記載」が可能です。コツさえ掴めばツールバーを利用するよりも効率的に作業できるはずです。
今まだ使えそうかどうかわからない段階かもしれませんので、テストに関してはこのまま旧投稿画面を利用してください。

-----
テスト投稿の状態を見て、やはり文字が小さいでしょうか。
小さいと感じられましたら、ここからカスタマイズの手順です。

font: 1.4rem

でCtrl+Fキー検索すると「スタイルシート編集内」に1箇所あります。
この 1.4rem が記事の文字大きさ指定です。大きくするには数字を大きくします。
これまでツールで「medium」を指定されていましたよね。これは基本フォントサイズの「1.2倍」という意味ですから、約16〜17pxです。まずは
1.5
に変更して様子を見ます。様子を見るというのは、テスト投稿した記事を見るという意味です。まだ小さいと思えば1.6に、さらに1.7にと少しづつ数字を大きくしてみてください。ちなみにブラウザの初期フォントサイズは1.6(16px, 1.6rem)です
作業が終了しましたらその旨ここへのコメント返信の形でお知らせくださいね。

-----
ちょっと気になったんですが、FC2ではYahoo!と違い、内緒コメントにすると自分で送信したコメントも読めなくなってしまいますが大丈夫でしょうか。ご自身で書いた内容をしっかり記憶・把握できていれば良いのですが、情報のすり合わせが難しくなるような気がします。
できれば公開コメントをおすすめします。強制ではありません。

-----
あと、テンプレートを再ダウンロードして頂いたはずですが、新しい方に切り替わっていません。テンプレート管理画面でLa_Vita(新しい方)のラジオボタンにチェックを入れて「適用」をクリックし、設定状態にしてください。

terubon
2019/09/18 (Wed) 05:40

To La_Vitaテスト投稿の件

おはようございます。何時もお世話になっております。確認事項に順次答えて参ります。

・・・投稿した旨お手数ですがお知らせ頂かないと、
  分かりました。お知らせする様にしますが、どんな方法が良いですか?
  この投稿システムの中でAkiraさんにお知らせする方法がありますか? それとも E-Mail ? SMS? LINE? etc。

・・・旧投稿画面は使えそうですか?
  特別違和感もなく、使えました。お送りした10行誓い文章は、新旧の違いは感じず使えました。

・・・旧投稿画面は「コードのコピペ(複製して貼り付けるだけ)記載」が可能です。
  この意味、必要性を理解できませんが、ご指摘の通り、このままの状態で、質問など投稿をさせて頂きます。

・・・テスト投稿の状態を見て、やはり文字が小さいでしょうか。
  やはり文字は小さく「medium」程度が欲しいです。そこで『font: 1.4rem』を『font: 1.7rem』に大きくしてみました。  
  お送りしてある『テスト投稿』の文字も大きくなり、当然『改行』の位置も変化しました。

・・・内緒コメントにすると自分で送信したコメントも読めなくなってしまいます。
  仰る通り質問コメント➡ご回答コメントの流れが分かり難くなりますので、『公開』で行かせて貰います。

・・・テンプレートを再ダウンロードして頂いたはずですが、新しい方に切り替わっていません。
  実は本コメントのやり取りのページの初めの方に、『サンプル』が表示され、その後に『FAQ』『DOWNLOAD』と
  緑のボタンが出るので、この『DOWNLOAD』をクリックしていました。Akiraさんご指摘の『テンプレート管理画面』に
  到達できず、ご指摘のボタンが押せていません。『テンプレート管理画面』への到達方法を教えて下さい。

以上、昨夜頂いたご指摘の回答、状況説明です。よろしくお願いします。






vanillaice (Akira)
Akira
2019/09/18 (Wed) 09:41

To terubonさん

おはようございます。

【お知らせについて】
職業上、仕事関連のメール受信が非常に多いので、プライベートな「ブログ」に関連するものについてはメールでの情報送信を一切受け付けていません。なので「お知らせ」というのは要はこのコメント欄での質疑応答中に「テスト記事投稿したから見て」と教えてくださいという意味です。

【コードのコピペの意味と必要性】
「コピペ」という作業は理解できていると思います。これまでのコメント中に「Akiraさんのをコピー&ペーストしてのですが、calc(50% - 10)とpxが抜けて画像が並びません」とありますのでできるはず。
必要性ですが、htmlのソースコードというのは非常に長く複雑です。それを手打ちでやろうと思うからミスをします。calcの件で実証済(笑)
たった10文字程度のコードの手打ちでもミスが発生するのですから、何百文字にも及ぶhtmlを手打ちするなんていうのは危険です。なので「コピペ」という作業がとても重要ですし必要です。
新投稿画面の初期モードはhtmlをコピペしてもそれを「html」として受け取りません。単なる文字の羅列です。なのでhtmlコードのコピペでは旧投稿画面の方が必要である、ということです。

-----
ここまでの整理です。

完了したもの --- 文字の初期設定(テンプレート編集) ✔
今後の最優先事項 --- テンプレートの再ダウンロード及び適用

一旦投稿します。

vanillaice (Akira)
Akira
2019/09/18 (Wed) 10:06

To terubonさん②

これからテンプレートの再ダウンロードと適用を行います。以下の手順は順序を入れ替えるとできませんので順序どおりに行ってください。

-----

まず以下のリンクをクリックするとterubonさんの「テンプレート管理(PC)」画面が別タブで開かれます。
https://admin.blog.fc2.com/control.php?mode=design

以下のスクショのようになっているはず。これはterubonさんが所有しているテンプレートのリストで、下の方にスクロールすると「[ La_Vita ] のテンプレート名変更」という項目があるはずです。スクショに従ってLa_VItaの名称を変更してください。
https://file.blog.fc2.com/vanillaice000/cap5/teru-temp.png


次に以下のリンクをクリックして配布ページを開き、La_Vitaの再ダウンロードを行います。
https://admin.blog.fc2.com/control.php?mode=design&process=download&no=46046

念の為スクショ。
https://file.blog.fc2.com/vanillaice000/cap5/terutemp2.png


これで入手が済みましたので、現在適用中の「La_Vita1」から新しくダウンロードした「La_Vita」に変更します。
再度「テンプレート管理画面」を開き、La_Vitaのラジオボタンにチェックを入れて適用ボタンクリック。

スクショ。
https://file.blog.fc2.com/vanillaice000/cap5/terutemp3----1200.png

-----
ここまでできましたらコメントで「できた」とお知らせください。確認しまして、次はterubonさんご自身も書いておられました「改行」についてお話します。この説明は必要だろうと思い事前にスクリーンショットを撮っておきました。ともかくテンプレートダウンロードを先に済ませてくださいね。

terubon
2019/09/18 (Wed) 10:44

更新完了・・お知らせ

La_Vita 1 として『La_Vita1』適用中と出てきました。

chrome-extension://nlipoenfbbikpbjkfpfillcgkoblgpmj/edit-react.html となりました。

vanillaice (Akira)
Akira
2019/09/18 (Wed) 11:53

To terubonさん

いえ。変更できていません。
あと先回も気になったんですが、記載されているのはChrome拡張スクリーンショットの一時ページであって、terubonさんのページではないですよ。
スクリーンショットを掲載するにはダウンロードをし(右上の「Done」をクリック、遷移した画面の右上に4つアイコンが並んでいる左端のマウスを乗せると「Download as image」と表示されるものをクリックするとダウンロードできます)、その画像ファイルをご自身のブログサーバーにアップロード(普段の画像アップロードと同じ要領です)し、そのURLでないと。
一時ページはいつまでも見られるわけではありませんし、クリックする度同じ内容が表示されるとは限りません(仕組みの説明は難しいと思いますので避けます)

とにかく 手順どおりに作業を行ってください。
名称変更だけでなく①〜③の手順全てをこなしてからお知らせしてください。テンプレートが設定されているかどうかはterubonさんのブログを訪問すればすぐにわかりますのでスクリーンショットを撮る必要はありません。

terubon
2019/09/18 (Wed) 13:33

テンプレート更新の件

何度もお手を煩わせ大変恐縮です。最初からやり直してみます。

①『テンプレートの設定』の中ほどの『名称変更』の所で、先程誤って作った『La_Vita1』を『La Vita』に戻しました。
 『La Vita』適用中(赤字)となり、『La_Vita1の名前を変更しました。La_VitaのHTML、CSSを更新しました。と赤字で
 表示され、初期に戻った事になりますね。

②すぐしたの『名称変更』で『La Vita1』として『更新』しました。『La Vita1』運用中と赤字で出ました。
 『La Vita1』にラジオボタンがオンです。

③次に共有テンプレート緑のボタンを押しました。・・・追加済
 
④最後に『La Vita』にラジオボタンをオンにし、『適用』としました。『La Vita1』運用中と出てきました。
  前回はこの最後の処理がされていなかったので、途中経過は出来ていても、それは本番用のテンプレートでなく
  事前準用の物で、本番用に戻す事をしていなかったのですね。

これで如何でしょうか? かなり大回りしたようです。 

vanillaice (Akira)
Akira
2019/09/18 (Wed) 13:56

To terubonさん

確認しました。新しい方が適用されています。
先回「文字の大きさ変更(1.4emから1.7emに変更)」をして頂きましたが、正しいテンプレートを適用していなかったため無効です。
古い方のCSS(「スタイルシート」に記してある内容です)は書き換わっていても、新しいものに変えたのですから当然ですよね。
というわけなのでフォントの大きさ変更をもう一度行ってください。
既に一度成功していますので今回は容易にできるはずです。

改行について書こうと思いましたが文字変更を確認してからにしようと思います。一度に多くの情報を得ると却って混乱すると思うので。
フォントサイズ変更ができましたらご連絡ください。

terubon
2019/09/18 (Wed) 14:07

テンプレート更新の意義・・お知らせ

始めは何をやっているのか、よく理解しないでAkiraさんの指示通りウロウロ、時にはイライラ・・・。

ローカルなファイルでの準備をしておいて、最後に本番に戻すのを忘れていて、その本質と言うか意義の一部が
理解できました。それに私がスリーンショットを送らなくても、Akiraさんが私のブログを見れば分かると
仰っておられ何故かな?・・・と不思議でした。ブログの確認で私のを見ると、表示幅が広がり、改行位置の
変化に気が付きました。この様に各ユーザーに共通する表示幅等の変化を、各自でやるのは大変だから
Akiraさんが完成された物を、我々ユーザーがこの手順でやれば、全ユーザーが統一できますね。
でもこんな事をAkiraさんお一人で面倒見ておられるご苦労に頭が下がります。

今時分さんの何言ってるねん・・・と思われるかもしれませんが、現状の私の理解です。お邪魔しました。

vanillaice (Akira)
Akira
2019/09/18 (Wed) 14:17

To terubonさん

そうですね。「時にはイライラ」というのはよくわかります。実際質疑応答の途中で怒って放り出して去ってしまう方も多いです。何かを教えるのは容易ではないという点をご理解頂ければ幸いです。
なかなか進まないからといって私が「こんなこともわからんのかバカタレ」などと言うわけもなし。無償・無料でやっていますので少々分かりづらい点や、時にはイラッとするような文言があるかもしれませんが、こちらも素人ですから大目に見てやってください。

今日は雨が降りまして入っていた予定が無くなりました。私としてはもう今日はterubonさんに時間を使おう、という気持ちでやってます(笑)
明日以降はそういうわけにはいきませんが。

あとですね、私はカスタマイズのご相談に対し本来はここまで細かくお付き合いはしません。terubonさんの場合はいつも懇意にして頂いているhigeさんから紹介されたのに近い形ですから特別待遇ですよ (o'ω')ノ

一部から「不公平」という批判も噴出しそうですが、私は飲食店経営者です。常連さんと一見さんは区別するタイプです(笑)

terubon
2019/09/18 (Wed) 15:38

フォントサイズ

font: 1.4rem に戻っていましたので font: 1.8に修正しました。

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

vanillaice (Akira)
Akira
2019/09/18 (Wed) 16:16

To terubonさん

確認しました。今後はツールを使わなくともこの文字色、この大きさで表示されます。
もちろんテンプレートを変更すれば別のテンプレートの指定に倣います。

で、これで終了ということで良いんでしょうか。なんかそんな文面に感じます(笑)

・ヘッダー画像変更
・画像横並べ

これはどうしますか。これで終了で良いということでしたら私はそれでも構いません。

-----
改行について

https://file.blog.fc2.com/vanillaice000/cap5/capwordbreak----1200.jpg

昨日確認したときのスクショなので文字は小さめです。
変なところで改行しているのはterubonさんが意図的に改行を行ったからです。
文章(テキスト)というのは自動で折り返しますので、文字を打っていて編集画面の一番右に到達したからといって改行してしまうと、何度も言うように端末の横幅というのは様々なのですから、terubonさんが意図したとおりの位置になるとは限りません。
日本語ならば最低でも句点を迎えるまで改行はしないようにしてください。

-----
これで終了であとの指南は不要ということでしたらこれで終わりにしたいと思います。
旧投稿画面で画像の横並べを説明するつもりでしたが、必要がなければ致しませんので、あとは新旧terubonさんが使いたいと思う方の投稿画面を利用してくださいね。

よろしくお願いします。

terubon
2019/09/18 (Wed) 17:31

改行について

お送りしている文字フォントのテスト送信を、新しいテンプレートにお合わせて、修正しました。
作る文章の長さ、及び、その内容によって考えながら改行していく工夫も必要と思います。
改行に関してはこのパターンで行きたいと思います。ご指導感謝します。

ヘッダー部分の写真の変更は、季節兵庫県毎にあるいは旅先毎に変更したく、ご指導をお願い致します。

画像の一列表示は、現在(46%) (46%) でやっていますが、本来の(50%) calc(50% - 10px) もやってみたいです。

せめてヘッダー部分の変更だけでも、ご指導頂ければ幸いです。宜しくお願い致します。
 

terubon
2019/09/18 (Wed) 18:43

お詫び

色々の表示幅の端末に対応できる素晴らしい高機能なテンプレートの紹介を頂き、挑戦を志しました。
でも私には見るもの聞くもの新しい物ばかりで、理解不足と先走りに大変ご迷惑を掛けました。
今日も一日これを考え、対応しておりましたが、更に画像など扱うとなると、更にAkiraさんにお時間とご迷惑を掛けるばかりと
判断し、ご指導は此処までして頂く様、伏してお願い致します。ブログは長いのですが、内容的には自分の日記、備忘録、等々が
主で、他人様に読んで貰える様な物ではありません。残る人生は従来通り、気楽に書き綴っていきたい思っています。

Akiraさんから送って頂く文章に出て来る言葉を理解するのも大変でした。でも大変勉強になり感謝しています。
此処までご指導頂きながら、誠に恐縮ながら此処までとさせて頂く勝手をどうかお許しください。
ご紹介頂いたhigeさんにも大変申し訳ありません。よろしくお伝え下されば幸いです。

間もなく10月で気候の変わり目ですが。お体に気を付けて、お仕事に、ブログに頑張って下さい。
重ね重ねのご指導に感謝の意を込めて、お別れの挨拶とさせて下さい。

vanillaice (Akira)
Akira
2019/09/18 (Wed) 18:48

To terubonさん

改行の件、そうですか。スマホだとこうですね。
https://file.blog.fc2.com/vanillaice000/cap5/capspteru----800.png

私は理解していなさそうな点についてアドバイスをするだけ、というかそれが役目なので、伝えるべきことは伝えます。terubonさんがどうするかは私が指図することではありませんので、terubonさんの指針に従ってください。
ただ「折返し」について理解されていないのでは、と思いましたのでスクショを貼っておきます。「最低でも句点を迎えるまでは〜」と言った理由でもあります。
文章の「横幅」を改行で調整するのは土台無理な話なので、日本語では「句読点」というのがひとつの目安かなぁ、と思います。あとはお任せします。

一旦投稿します。

vanillaice (Akira)
Akira
2019/09/18 (Wed) 18:51

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

コメントが行き違いになりました。ではこれで質疑応答を終了、ということにさせてくださいね。
お疲れ様でした :)

terubon
2019/09/23 (Mon) 11:05

御礼

先般は『La Vita』の件で長時間のご指導を賜りありがとうございました。
最後までに至らず、申し訳ない気持ちで一杯です。
La Vitaの新バージョンに切り替え、従来のテンプレートよりずっと見易くなりました。
見てくれているブロガーさんからも、良くなったと行って貰っています。
スマホで見ても、写真が縦になる事を除き、改行位置も良くなって、喜んでいます。
古い記事の置く一部も修正しましたが、何分多いのでとても根気が続くません。
トップのチューリップも綺麗で可愛く、気に入っております。
改めて御礼申し上げます。ありがとうございました。台風の被害はありませんか?
お気を付けて下さい。私のブログで気になった事があればご指摘くだされば幸いです。

vanillaice (Akira)
Akira
2019/09/23 (Mon) 20:54

To terubonさん

こんばんは ('0')/
ご丁寧にありがとうございます。

どうしても気になる、という点が無いのであれば後はブログの更新に専念して頂ければ幸いです。

台風被害はありませんでしたが、今朝キーボードを水浸しにして殺してしまいました (;ωq`)
去年も同じことやった… ( ̄∀ ̄;)

ナレイ
2020/06/24 (Wed) 23:28

ヘッダーのカスタマイズについて

Akiraさん、こんばんは。
いつもお世話になっております。

ヘッダー画像のカスタマイズができるようになったので
その日の気分に合わせて好きな画像を楽しんでおります。

で、このLa_Vitaについてなのですが、
Akiraさんのご説明はひと通り読ませていただきましたが、
ヘッダーのカスタマイズに必要なURLが見つかりません。
どこにあるのか、それともこれはURLではないのか、
ヘッダーの箇所を教えてください。

お手数ですが、よろしくお願い致します。

vanillaice (Akira)
Akira
2020/06/29 (Mon) 15:30

To ナレイさん

お返事大変遅くなりました (*_ _)
* La_Vitaヘッダー画像の件

対象画像は
https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/pink-tulips-from-below-picjumbo-comthth.jpg
でhtml内に2箇所ありますので2箇所ともご希望の画像アドレスに書き換えてくださいね。
よろしくお願いします。

ナレイ
2020/06/29 (Mon) 18:59

Akiraさんへ

返信、ありがとうございます。
HTML内にURLがあるのですね?
私はずっとスタイルシートばかり見てました。

HTML・・・んーわかるかな?
頑張って探してみます。

いつもありがとうございます!

ナレイ
2020/07/17 (Fri) 07:48

Akiraさん、いつもお世話になっております。
今回は、固定記事について質問させて頂きたく存じます。

私は「当ブログについて」というブログの説明文を
常にトップに持ってきています。
以前は未来表示するしかなかったのですが、FC2のほうで
簡単に固定表示できるようになりました。

なのでもう未来表示にする必要はないと思っておりましたが、
そうすると、「Next entry」の欄が「いつの記事・・?」
みたいに古い記事が表示されてしまい、結局未来表示のままにしてあります。

固定記事だけ、「Next Entry」を表示させないようにはできないでしょうか?
また、それが無理なら、他に何か方法はないでしょうか?
ご教示くださいませ。

よろしくお願い致します。

vanillaice (Akira)
Akira
2020/07/18 (Sat) 20:51

To ナレイさん

こんばんは。

結論から言うと「できません」
FC2のこのシステムは特定記事を時系列から切り離すのではなく、単に表示順序の操作をするだけのものです。時系列から外れるわけではありませんので、存在するページの中に他の記事と同じように位置しています。
FC2ブログの「前後ページ」の移動変数は今の所特定記事を除外できるような構成にはなっていませんのでできないんです。申し訳ない (´・ω・`)

この件を解消しようと思うと全く別のアプローチを選択する以外ないと思います。

・固定機能は利用しない
・未来日付は利用しない
・テンプレートはhtmlにベタ打ちする(つまりhtmlを足す)
・htmlファイルを作成・アップロードし、そのファイルへアクセスさせるようにする。ファイルには現時点で利用しているテンプレートのhtmlとCSSを紐付ける

これはかなり大変な作業ですが可能です。私からはお手伝いができませんので、自力では難しいという場合ここで提案できるのは「諦める」「未来日付のままにする」のどちらかになりますね。個人的には前者をおすすめします ^^;

ナレイ
2020/07/19 (Sun) 19:28

Akiraさんへ

Akiraさん、こんばんは。
返信、ありがとうございます。

やはりできないのですね?

ブログの説明として固定記事にしていたのですが
そんなに読まれる訳でもないと思うし
私もAkiraさんが仰るように「諦める」のが良いと思います。
どうしても説明したいことは短くプロフの中に書いておくことにしますね。

ご多忙の中、返信くださり、ありがとうございました。

ナレイ

vanillaice (Akira)
Akira
2020/07/19 (Sun) 22:53

To ナレイさん

短い文章であればこういう方法もあります。

参考記事: メッセージボードの有効な使い方と導入の仕方
https://vanillaice000.blog.fc2.com/blog-entry-933.html

内容量が豊富な場合はこの方法は向かないかな、と思いますのでご自身の内容と相談してみてくださいね。
お疲れ様です :)

ナレイ
2020/07/23 (Thu) 16:16

Akiraさんへ

こんにちは。
もう一通、返信くださっていたのですね?
んー・・・残念ながら私の文章は長いので
やはり固定記事はあきらめまqした。

今日はもう一つお尋ねしたく、メールしました。
READ MOREで記事を最後まで読むと
「Next Entry」の下に、「同カテゴリ」記事が出てきますよね。
それを消したいのです。
その方法を教えてくださいませ。

それなら多分できるだろうと思います。

お忙しいのにいつもすみません。

vanillaice (Akira)
Akira
2020/07/24 (Fri) 20:42

To ナレイさん

こんばんは ('0')/

拝見したところ既に作業が完了しているようですが終了ということでよろしいでしょうか。

ナレイ
2020/07/25 (Sat) 09:34

Akiraさんへ

返信ありがとうございます。
Akiraさんのお知り合いの方でしょうか?
お名前を名乗らずに、アドバイスしてくださった方がいらして
修正できました。

ありがとうございました。
その方にもくれぐれもよろしくお伝えくださいませ。

vanillaice (Akira)
Akira
2020/07/29 (Wed) 13:36

To ナレイさん

こんにちは。

問いかけておきながらお返事遅くなってごめんなさい (*_ _)
そうだったんですね。私は関係していませんが、親切な方がいてくれたようで良かったです。
お疲れ様でした :)

はるパパ@ちわぐるず
2020/10/07 (Wed) 23:31

こんばん▼o・ェ・o▼ワン!

初めてコメント差し上げます。

こちらのテンプレートをダウンロードさせていただきました。
以前よりレスポンシブデザインの導入を検討ながらなかなか踏み込めずにいたのですが、
そんなことを言っていられる時代ではなくなっていることに気が付き、お借りしました。
いじっているうちにこのテンプレートの特徴をことごとく消してしまってしまいましたが、お許しください。
ならば、ほかのテンプレートでもよかったのかもしれませんね。せっかくのデザインが台無しになってしまい、申し訳ありません。
WEBの知識など全くありませんが、自分なりにカスタマイズをしています。
Akiraさんのテンプレートは非常に緻密で繊細な故、素人には手も足も出ませんが、それでも気に入ったテンプレートを長らく使いたいので、自分好みに近づけたいと試行錯誤しております。
何とか自力で進めていますが、どうしても挫折した時には質問させていただこうと思います。
ほんの少しのヒントでもいただけたら、そこから再度挑戦します。
それでもどうにもこうにもとなったら、その時は解決のお願いに上がります。
それまでは自分なりに頑張ります。
知識がない故にタブー、禁じ手、何でもあり状態ですが、このテンプレートと決めたからには大切にしていきたいと思います。
ありがとうございます。

vanillaice (Akira)
Akira
2020/10/07 (Wed) 23:44

To はるパパ@ちわぐるずさん

こんばんは。
はい。どうぞお好みにカスタマイズしてくださいね。
何かありましたらお気軽にお尋ねください(お返事が遅くなりがちなのでごめんなさい)

ご丁寧にありがとうございます。励みになります :)

vanillaice (Akira)
vanillaice (Akira)
2021/12/08 (Wed) 23:47

ナレイさんのコメント移設

【1】
ヘッダー画像の件

すみません、やはり説明不足でしたね。

>どこにでしょうか。「ヘッダーに」ということなのか、あるいは「記事内に」なのか。
ヘッダーに、ということです。

>ヘッダー画像を変更したら、記事内の画像が表示されなくなった、ということでしょうか。
普段は、記事内の画像がヘッダーに表示されていたのですが、ヘッダー部分が真っ白になるのです。

>上記の私のコメントは全て「La_vita」についてです。
>ご質問の際は必ず質問対象のテンプレートを設定してくださいね。
すみません、「La_vita」です。

>記事を保存してはじめてヘッダー部位に表示されます。
はい、予約投稿で一度保存して、
再編集するとプレビュー画面にヘッダー画像が表示されておりました。

とりあえず一度送信します。
このあとに、症状を確認できるURLを貼り付けます。

>画像を掲載した際のhtml内容
んー・・・これはちょっと私には難しい。。。

お手数をおかけして申し訳ありません。

-----
【2】
症状の出るURL

https://slowly48.blog.fc2.com/?template=La_Vita22&index

上記が、症状の出るヘッダーのURLです。
度々申し訳ございません

-----
【3】
>記事を保存してはじめてヘッダー部位に表示されます。
度々すみません。
この説明が不十分でした。

>予約投稿で一度保存して、
>再編集するとプレビュー画面にヘッダー画像が表示されておりました。
というのは、
再編集すると、記事内の画像がヘッダー画像になって
表示されていましたが、それが表示されなくなり
再編集しても元々のヘッダー画像がプレビューに表示されるようになりました。

度々、わかりにくくてすみません。
お手数をおかけして恐縮です。

-----
【4】
何通にもなってしまい、申し訳ありません。
なかなか活字だと説明が難しいですね。
以下のHTTPS~jpgまでが、私が自分の画像をカスタマイズしている部分です。

厄介なことに、これはプレビューして見る限り正常に表示されます。
が、実際に「適用」して、read more で個別の記事を見ると、
本来記事内画像がヘッダー部分に表示されるところ、空白になってしまいます。


<!-- パララックス -->
<div class="rellax" data-rellax-speed="2" style="background-image: url(<!--not_permanent_area-->https://blog-imgs-129.fc2.com/s/l/o/slowly48/201908111927105ef.jpg<!--/not_permanent_area--><!--permanent_area-->https://blog-imgs-129.fc2.com/s/l/o/slowly48/201908111927105ef.jpg<!--topentry--><!--body_img--><%topentry_image_url><!--/body_img--><!--body_img_none-->https://blog-imgs-129.fc2.com/s/l/o/slowly48/201908111927105ef.jpg<!--/body_img_none--><!--/topentry--><!--/permanent_area-->);"></div>
<!-- パララックスここまで -->


ちょっと自分でももう一度、他の画像などを使用して試してみますね。
私のことですから、ほんの些細なミス、ということも考えられるので。

早々に返信くださり、ありがとうございます。
いつもお手数をおかけして、また、何通にもなってしまい
誠に申し訳ございません。

vanillaice (Akira)
vanillaice (Akira)
2021/12/09 (Thu) 00:05

To ナレイさん

コメントを移設しましたので質疑応答はこちらでお願いします。

個別記事のヒーローヘッダー(ヘッダー部位に各記事の代表画像が表示されるもの)の仕組みをお伝えします。ここを理解して頂ければどんなときにどうなるかも理解できるかと思います。

ヒーローヘッダーの画像というのは、FC2ブログの独自変数を用いて表示させる仕組みです。誰がどんな画像を掲載するか、テンプレート製作者では知る由もないのでFC2ブログの機能を頼ります。
この変数はつまり「アイキャッチ画像の取得」を目的とします。で、その「アイキャッチ画像」というのは
1. 記事「本文」一番最初の画像
2. アイキャッチ画像指定機能で指定した画像
の2パターンあります。ナレイさんの場合 2 が多いのではないでしょうか。

アイキャッチ画像が確定するのはいつかというと「記事が保存されたとき」です。言い換えると「記事が保存されるまでアイキャッチ画像は確定しない」ということです。

ナレイさんのおっしゃる「予約投稿で一度保存して〜」について、一度保存しているわけですから、アイキャッチは確定していますよね。でも編集をし、変更をするのですから再度「未定」「不確定」の状態に戻るわけです。
ヒーローヘッダーに対象画像が表示される場合とされない場合というのは「保存をしたかしないか」の違いです。

-----
で、結局のところ「デフォルトのヘッダー画像を変更したい」という件でよろしいでしょうか。「デフォルト」というのはトップページ種(グリッド形式で記事が表示される類のページ)で表示される画像、個別記事の画像に左右されない画像、という意味です。

変更するのは2箇所だけです。ナレイさんの場合3箇所を書き換えてしまった(うち1つは書き換えたのではなく増やしてしまった)ので「何も表示されない」という不具合を発生させてしまいました。

カスタマイズ前の複製があると思いますので
https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/pink-tulips-from-below-picjumbo-comthth.jpg
で検索し、2箇所ありますのでその2箇所だけを新しく設定したい画像アドレスに書き換えてくださいね。

ナレイ
2021/12/09 (Thu) 01:04

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

今日、再度試してみたところ、元に戻り表示されるようになりました。

ただ、仰る通り自分では2か所しかいじっていないつもりでいましたが、
確かに3か所変更されてしまってますね。

>ナレイさんのおっしゃる「予約投稿で一度保存して〜」について、
>一度保存しているわけですから、アイキャッチは確定していますよね。
>でも編集をし、変更をするのですから再度「未定」「不確定」の状態に戻るわけです。

再編集するのは、記事内画像が表示されるか確認したいためで、変更はしません。

>で、結局のところ「デフォルトのヘッダー画像を変更したい」という件でよろしいでしょうか。

えーっと、本来はread moreで記事を読む時、ヘッダー部分が空白になることを解決したかったのですが、
本来なら、個別記事に左右されない、常にトップの画像を表示させたいと思っています。

>カスタマイズ前の複製があると思いますので
>https://blog-imgs-117.fc2.com/v/a/n/vanillaice000/pink-tulips-from-below-picjumbo-comthth.jpg
>で検索し、2箇所ありますのでその2箇所だけを新しく設定したい画像アドレスに書き換えてくださいね。

ちなみに
https://blog-imgs-129.fc2.com/s/l/o/slowly48/201908111927105ef.jpg
ここは変えなくていいのでしょうか?
この2か所は、変えるんですよね?


とりあえずやってみます。
何分ちょーアナログで、お手間を取らせてしまい、申し訳ありません・・!


ナレイ

vanillaice (Akira)
vanillaice (Akira)
2021/12/09 (Thu) 01:44

To ナレイさん

> 再編集するのは、記事内画像が表示されるか確認したいためで、変更はしません。〜

記事内画像が「どこに」表示されるのか確認したいのでしょうか。記事内ですか?それともヘッダーですか?
ヘッダーであれば先程説明した通りで「記事を保存しなければ反映されない」ということです。要するに「プレビューの段階では見られないよ」ということです。以前は見られた、ということであれば、FC2のアイキャッチの仕組みは幾度かの変更を経ていますのでそのためかもしれません。現状の仕組みを考えれば「プレビューでは表示されない」というのが正しい認識です。

ヘッダーではなく記事内に表示されているのかいないのか、だとして、記事内に掲載したはずの画像が出てこないという場合は「html構文エラーの可能性が高い」ですよ、ということで、どのような構文で掲載したのか教えてください、とお願いしました。

> 本来はread moreで記事を読む時、ヘッダー部分が空白になることを解決したかった〜

何度もお伝えするように原因は構文エラーです。先程お伝えしたように 2箇所 の変更を行ってください。
2箇所、というのは「デフォルトの状態から見て」ということです。カスタマイズ後の状態からではなくデフォルトの内容を参照してください。

> 本来なら、個別記事に左右されない、常にトップの画像を表示させたい〜

これがもともとの目的でありご質問、ということでよろしいでしょうか。その場合は以下の通り修正してください。

<!-- パララックス -->
<div class="rellax" data-rellax-speed="2" style="background-image: url(ここに表示させたい画像アドレス);"></div>
<!-- パララックスここまで -->

> ちなみに
https://blog-imgs-129.fc2.com/s/l/o/slowly48/201908111927105ef.jpg
ここは変えなくていいのでしょうか?〜

これはカスタマイズ後の内容ですからデフォルトの状態から作業を行ってください。そのために「複製があると思いますので」と記載しました。複製をお取りでなければカスタマイズ後の状態から作業せざるを得ませんが、今回の目的は「ヘッダーの統一」ということでしょうから説明を省きます。
カスタマイズ前には複製を取るようにしてくださいね。カスタマイズ後の状態から何かを操作するのはなかなか困難で、特に構文が壊れてしまった場合は特に複雑になります。

もし私の理解が誤っていたらその旨ご指摘くださいね。とりあえず「ヘッダーを共通化(個別記事でも変えない)」というのが真の目的と解釈しました。よろしくお願いします。

ナレイ
2021/12/09 (Thu) 05:41

度々すみません

>記事内画像が「どこに」表示されるのか確認したいのでしょうか。記事内ですか?それともヘッダーですか?
ヘッダーです。

>以前は見られた、ということであれば、
>FC2のアイキャッチの仕組みは幾度かの変更を経ていますのでそのためかもしれません。
>現状の仕組みを考えれば「プレビューでは表示されない」というのが正しい認識です。
以前は見られました。が納得致しました。

元々の目的は、記事を全文表示したとき、ヘッダー部分が空白になることの解決でした。
しかしながら、常々
>個別記事に左右されない、常にトップの画像を表示させたい〜
そのほうが良いのになあ、と思っておりましたのでやってみたいと思います。

但し、私は「同カテゴリ」表示は必要ないのでその部分は全て消します。
そこに被っていなければ、ですが。

何度も何度もお手間を取らせてしまい、申し訳ありませんでした。
ご丁寧にありがとうございます!

がんばってみますね!

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