Out-of-style - FC2ブログテンプレート

Out-of-styleテンプレート

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

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

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

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

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

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

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

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

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

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

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

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再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("circle-left");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("circle-right");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>var start_pos=0;$(window).scroll(function(e){var a=$(this).scrollTop();if(a>start_pos){$('.side-pager-left,.side-pager-right').removeClass('appear')}else{$('.side-pager-left,.side-pager-right').addClass('appear')}start_pos=a});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

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

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

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

更新履歴 2020.5.29
  • ページ送りのJSを修正
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
最終更新 2020.3.25
  • 個別記事ページ送りの複製を可能にしました

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

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.1
  • コメント主のリンク表示用JS及びデザインの変更
  • 独自クラス.curlのIE向け調整
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

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

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

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

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<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"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .5em 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: 40px;
}
③について

<div class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<div 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要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

更新履歴 2018.12.17
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 個別記事下ページ送りの仕様変更(軽量化含む)
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 個別記事「記事編集リンク」をSNSアイコン並びからSNSアイコン上「Posted by ハンドルネーム」に変更(閲覧者に気づかれにくいようカーソル非表示にしてあります)
  • 要約ページ記事概要文文字数制限をJSからCSSに変更
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

【重要】テンプレートのアップデートについて, Font Awesomeについて

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

更新履歴 2018.1.24

メンテナンスを行いました。
主な変更点は以下の通りです。

  • 画像遅延読み込みを導入しました(デフォルトではグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップのシンタックスをJSON-LDに変更しました

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

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

チェスター・ベニントン氏の訃報がいまだに信じられないあきらでございます
Now he's free. R.I.P.

あうと おぶ すたいる
承認されました。ありがとうございます。

サンプル

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'●)/

ぼっちん
2017/08/05 (Sat) 20:45

また驚かされました

Akiraちゃん、こんばんは ^^

『Out-of-style』のリリース当日にダウンロードさせて戴きまして、早速「色変え」だけしてスタートして、今日になってから
class="entry-header-content"
の中身を1つ追加しようとHTMLやCSS覗いておりましたら、なんとAkiraちゃんったらCSSで演算(笑)してるのを発見。
----------------------------
.entry-header-content-box {
display: table;
table-layout: fixed;
width: calc(100% / 4);
padding: 0 10px 10px 0;
}
----------------------------
もうもう、なんて言うこの素晴らしいテクニック (^_^)ニコニコ 
また1つ勉強させて戴きました m(_ _)m
CSSで演算 calc() 出来るだなんて今日はじめて知りました (^^ゞポリポリ

calc(100% / 5)

にして、Webフォントアイコンを1つ増やして、アイコンサイズ調整して、、、と色々やってる途中で先頭の管理人の顔を除去(笑)すれば、calc(100% / 4)のままでもやりたいことが出来るじゃないって結論付けて(笑)目的達成。

いやぁ、毎度素敵なデザインのテンプレートを開発してくださって、ほんとに感謝申し上げます m(_ _)m

Akira
2017/08/06 (Sun) 01:45

To ぼっちんさん

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

calc functionなんですが、これを使いたい時って奇数で割りたい時じゃないですか。
記事の横並びが3とか5とか。
そういう時こそ使いたいのに、calcの奇数はMicrosoftブラウザが理解してくれません (;`ー´)o
calc(100% / 3)
とかやるとIE11とEdgeでのレイアウトがめちゃくちゃなことに。
flexとcalcの組み合わせがバグるみたいです。

MSブラウザ、もうホント早く死滅して欲しい。Edgeとやらも要らん (;`ー´)o
Microsoftはブラウザを作らないで欲しいなぁ (´・ω・`)

ぼっちん
2017/08/06 (Sun) 08:39

To Akiraちゃん

ノロノロ台風5号の影響が心配ですよね~ (^^;; アセ

> calc(100% / 3)
> とかやるとIE11とEdgeでのレイアウトがめちゃくちゃなことに。
> flexとcalcの組み合わせがバグるみたいです。

あっ! やっぱりなんですね。
calc(100% / 5)でアイコン増やす操作をしている課程で「な、なんか変だぞ!」って、IE11での表示崩れをたまたま目撃しちゃってました。
でも正常表示する時もあったりで、ほんとに変過ぎます(爆)
CSSの違う部分を弄くってしまったか?と思いましたが、Chromeだと安定的に正常表示(笑)
そんなところでバグるなんて、全く困ったちゃんですよね (^_^; アハハ…

また『Out-of-style』で、IE11でマウスホイールでのスクロールがギコギコピコピコと引っかかりのある動作して、滑らかさがなく、Edgeだと「やや正常(笑)」なスクロール。
もちろんChromeだと正常スクロール(笑)

> MSブラウザ、もうホント早く死滅して欲しい。Edgeとやらも要らん (;`ー´)o
> Microsoftはブラウザを作らないで欲しいなぁ (´・ω・`)

私も撲滅運動してるんですけどね~ (≧ω≦。)プププ
MSブラウザのflexとcalcの組み合わせバグ情報もありがとうございました ^^
今日検証してみるつもりだった「な、なんか変だぞ!」の案件が1つ減りました(爆)
やっぱりアイコンは4個のまま「Adminと入れ替え」でこのまま使わせて頂きます(笑)

vanillaice (Akira)
Akira
2017/08/06 (Sun) 12:15

To ぼっちんさん

IEやEdgeはスクロール関連全般がダメですね。
以前は致命的なバグがあったけど、それについてはMSがなんとか改善したって感じ(笑)
IEの開発終了自体は英断だと思いましたが、新ブラウザのEdgeのエンジンが自社開発って聞いて気が狂いそうでしたよー (´・ω・`)
素直にblinkかwebkit使っとけ!!!と(笑)
なんで自社開発しちゃうかなー。やめてくれよ ( ̄∀ ̄;)

IEが滅してくれれば今のCSSもかなりスリムというか、スマートな書き方にできるんだけど。
タチが悪いのは
「実装済み(ただしバグあり)」
なんですよね。
寧ろ未実装の方が対処のしようがある。
calcにしてもIEとEdgeのせいだけで width: 33.33%; とかアホみたいなこと書かなきゃいけない。
割り切れねーっちゅーの!(笑)
近々「IE滅びろ」的な記事を書く予定((((笑)

スクロールのギクシャクは「上に向けて」「下に向けて」のスクロール判定をしているので、それが理解できんらしい。
カテゴリ移動ページ送りのためのものですが。
IEだけはじくのにまたJSが必要。
入れようかと思ったんですが、もういい加減翻弄されるのやめようと思って (´・ω・`)

---------

ぼっちんさんのGIFに関する記事、良いですね。
多くの方に見て頂きたい。
最近flashがダメになったのでGIFを大量に使う方が。
やってほしいなー。容量対策 ( ̄∀ ̄;)
重たくてかなわん ( ̄∀ ̄;)

ぼっちん
2017/08/06 (Sun) 16:09

To Akiraちゃん

> IEが滅してくれれば今のCSSもかなりスリムというか、スマートな書き方にできるんだけど。

うんうん(^-^) いちいちIEハック書くの面倒ですよね~、お察しします(爆)

> タチが悪いのは
>「実装済み(ただしバグあり)」
> なんですよね。
> 寧ろ未実装の方が対処のしようがある。

ネットの進化世界ではもう既に大昔(笑)になってしまってる、IEとNetscapeの二大巨頭(笑)がブラウザ戦争やってた時代の「独自性の強み」が今もまだ忘れられなくて根底にこびり付いてるって感じで、それが今となっては「非協調性」となって、今時のネットユーザーからうとまられてシェア激減となってる (^_^; アハハ…
私もその時代には「IE崇拝」組だったんですけど、今はもう殆ど利用してませんし(爆)

> IEだけはじくのにまたJSが必要。
> 入れようかと思ったんですが、もういい加減翻弄されるのやめようと思って (´・ω・`)

そうそう、もう疲れるお仕事は排除しましょ~(笑)

> 近々「IE滅びろ」的な記事を書く予定((((笑)

(〃^▽^〃)oあはははっ♪ 楽しみに待ってま~す (_ _)ノ彡_☆バンバン!!

> ぼっちんさんのGIFに関する記事、良いですね。
> 多くの方に見て頂きたい。

嬉しいお言葉、ありがとうございます ^^
簡潔明瞭に書きました(笑)
ブログってカテゴリにもよりますけど、私のような記事では長文解説だと読み終わる前に去られてしまう懸念もあります(笑)から、常に「簡潔明瞭」を心がけております。
後で「あっ これも書いておかなくちゃ」ってことが出てくると、こっそり追記しちゃったり(爆)

Akira
2017/08/07 (Mon) 00:47

To ぼっちんさん

IEについては暴言を吐きたくなるんですが、どうしましょう(笑)
普段以上に口の悪い記事になることは目に見えている ( ̄∀ ̄;)

啓蒙関係の記事は疲れますよね。
いくらこちらが懇切丁寧に説明しても、本人がやる気になってくれないことにはなんともならない。
君、該当者やで… やらんのかい… ( ̄∀ ̄;)
とかしょっちゅう(笑)
あんまり言いすぎても押し付けになりますし難しいところですよね。

ぼっちん
2017/08/07 (Mon) 08:38

To Akiraちゃん

> IEについては暴言を吐きたくなるんですが、どうしましょう(笑)

やっちゃえやっちゃえ! 思いっ切り毒吐きしましょ!(笑)
WebクリエーターとしてのAkiraちゃんの日常からのIEに対する苦闘を書いたら、少なからずAkiraちゃんの秀逸なるテンプレートファンに「IEってそんなに酷いんだぁ」って確実に理解して貰えます。
そんな中から、雄志が「MSブラウザ撲滅運動」に参加してくれる人も出てくるでしょうし ^^

私も一生懸命Akiraちゃん記事へのブログカード張りして応援させて戴きますし(それくらいしかやれませんが(笑))
e(^。^)g_ファイト~!! (爆)

Akira
2017/08/07 (Mon) 10:52

To ぼっちんさん

もうホント撲滅運動の域ですよね。
ただほら…過敏というか、過剰反応する方って必ずいらっしゃるので。
それが怖い(笑)
「私に嫌味を書いてる」とか思われると超めんどくさい事態に (´・ω・`)
まぁ、どこでもそういう方は居られますが。
私でもありますけどね。
あ、これ私該当してるわ((((笑)
みたいなのは。
だからといって敵意は出しませんが、出してくる人居るよね (´・ω・`)
該当しちゃったテヘペロ (・υ・)
で済ませないめんどくさい人 ( ̄∀ ̄;)

ぼっちん
2017/08/07 (Mon) 14:27

To Akiraちゃん

(^_^; アハハ…
確かにそういう面倒な人って居ますよね~(笑)

撲滅運動(笑)には応援参加の意思表示して後はAkiraちゃんにお任せです~(笑)
ほんとは仕事関連では「MSブラウザ利用禁止」を高らかに宣言してるんですよ~ (≧ω≦。)プププ



-
2017/08/07 (Mon) 22:56

管理人のみ閲覧できます

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

Akira
2017/08/08 (Tue) 08:13

To Arrivalサムネイルの件 内緒さん

まずArrival専用記事への移動をお願いします。

http://vanillaice000.blog.fc2.com/blog-entry-417.html

お返事もそちらで致します。お手数ですがよろしくお願いします。

きろろ
2017/08/13 (Sun) 01:41

お借りしました!

お久しぶりでございます。
夏バテというものを今年、初めて経験しているきろろです。
もう死ぬほど暑いかと思えば、半袖ではいられないほど涼しい。
うちのにゃんこ先生なんか、風邪をひいてしまいましたよ(^0^;)
そして主のきろろもなんか食欲がなくて、バテ気味です。

Out-of-style、お借りしました。
カスタマイズも無事終了。
今回はABOUTも使うことにして、
メールフォームも無事に作ることができました。

ここで質問です。
メールフォームの件ですが、
ナビゲーションバー? あってますか?
バーの色や、テキストの色がOut-of-styleのように黒と白なら、
Akiraさんのカスタマイズをそのままコピペできるのですが、

バーとテキストの色、例えばVeryMerryやJuliette-Noteに
メールフォームをつけると、テキストの色がw
テンプレートの背景と合わせなければならないのだと、頭では理解しているのですが。
htmlとかcssとかいろいろと挑戦してみたのですが、だめでした。

ちょっことだけ、こつを教えていただけませんか?
時間はいつでもかまいません。

現在はOut-of-styleをお借りしているのでw
よろしくお願いいたします<(_ _)>

追伸
コメントを閉じている件についてなんですが、
うーーん、きろろもコメントを受け付けたいのですが……
ほら、サイトがサイトなので。
すぐ、炎上してしまう。
主にコメントを書いてくれるのが……2hの住人なんですよ。
きろろ、打たれ弱いので一度炎上しただけでびびってしまうのですよ(;.;)
と、いう理由でうちはコメントを閉じています。
以前のようにコメントを受け付けて、交流が持てればそれに越したことはないんですけどねぇ。

-
2017/08/13 (Sun) 04:13

管理人のみ閲覧できます

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

Akira
2017/08/18 (Fri) 13:06

To きろろさん

ご無沙汰しておりますー ( ゚Д゚)ノ
そしてお返事遅くなりました (*_ _)

今年の夏ってすっごい暑くないですか (´・ω・`)
毎年こんなだっけ?もう1年前のこととかすぐ忘れちゃう…(笑)

メールフォームの件、少しお待ち下さいね。
今パソコンを使える環境に居ないもので ^^;

Akira
2017/08/18 (Fri) 13:08

To ノートパソコンの件 内緒さん

お返事大変遅くなりました上にお返事内容が心苦しいのですが。
記載URLの記事は私が執筆したものではありません。
管理者をご確認の上、ご本人様に直接お問い合わせくださいね。
よろしくお願いします。

vanillaice (Akira)
Akira
2017/08/19 (Sat) 12:57

To きろろさん

遅くなって申し訳ないですー!

> メールフォームをつけると、テキストの色が〜

ナビゲーションのテキストリンクの色、という意味でしょうか。
#modal-trigger-label
で検索して頂くと、

color: white;

となっていると思いますので、ここの色指定を変更してください。
よろしくお願いします (●'0'●)/

きろろ
2017/08/28 (Mon) 00:18

To Akiraさん

お返事、ありがとうございます!
ところが、うちのパソコンがお亡くなりなりまして(>_<)
新しいものを買わなければ! と考えていたら、
左目のコンタクトレンズを落としまして……
久しぶりに眼下て見てもらったら、コンタクトを作りなおした方がいいと言われて、5万の出費が痛い(O_O)

ソフトとも考えたのですが、ソフトは目が乾いて長時間つけてられないのですよ。
と、いうことで新しいパソコンを買ったら、試してみます!
後ほど、ご報告します!

Akira
2017/08/28 (Mon) 01:40

To きろろさん

マジですかー ( ̄∀ ̄;)
私もコンタクトですが、よく落とします(笑)
旅行の前日に落とすとか。3回ぐらいやってる ^^;

パソコンはMacを全力でおすすめしますが、お仕事に使う方はそうもいきませんよね。
しかし痛い出費ですね。
きろろさんになにか良いこと起こりますように!(笑)

きろろ
2017/08/28 (Mon) 18:34

To Akiraさん

Macって、ワープロはどうなんでしょうか?
イラストとか音楽を制作する人が使うものだと聞いていたのですが。
Windows10を使っている友人が、10にしてからトラブルが続いて、7に戻したいって言ってましたね。
新しいパソコンだと10ですからねぇ。
悩んでおります(O_O)

Akiraさんもハードでしたか^_^
ハードは目が乾かなくていいんですが、よく落とします。
あーん、もうレーシングでしたっけ?
視力回復する手術!
まじ、コンタクト代を考えると手術の方が安くつくかな?
って、考える毎日です(T-T)

Akira
2017/08/29 (Tue) 00:12

To きろろさん

こんばんは ( ゚Д゚)ノ

windows7はもうメインストリームサポートが終了していますのでワタシ的にはナシです(笑)
macは「無料ソフト」というのが少ないですね。
そこは難点かもしれません。もちろん全く無いわけではありませんが。
もしmacに変更したらwindowsの画面見るの嫌になると思いますよ。
たぶん(笑)

レーシックは私も考えたことはあるんだけども、施術失敗例なんかの情報も出てきて怖くて辞めました ( ̄∀ ̄;)

Akira
2017/08/29 (Tue) 01:08

To Out-of-styleアクセス時のガクつく件 内緒さん(移動先)

http://vanillaice000.blog.fc2.com/blog-entry-565.html#comment4003

> 読み込み時の最新記事の位置が上下に動きます〜

こちらの原因はイージングではありません。
サイドメニューにスクロールアンカーを導入しており、そのscriptの整形の関係です。
なるべく見た目の障害の無いように設定したつもりですが、
・回線速度が遅め
・記事内やサイドメニューなどにJSが多く含まれている
という場合にページの表示に整形が間に合わないんですね。
なので対策としては

① スクロールアンカーを辞める
② フェイドのスピードを遅らせる
[デフォルト]
メインコンテンツ --- 1.2s
サイド --- 1.5s

[修正](提案)
メイン --- 1.8s
サイド --- 2s

どうしても気になるという場合には上記のような対処になるかと思います。
内緒さんの場合はメインコンテンツ下の広告描画に時間がかかっていますので、そのために整形が間に合いません。
当ページの「TOP PAGE DEMO」と比較して頂くとおわかり頂けるのではないかしら。
同じくコンテンツ下に同広告を設けている個別記事でガクガクしないのは、個別記事のみスクロールアンカーを外してあるからです。
原因をお伝えしましたので後はどちらの対処を選ばれるかです。

不要なJSも削除をお願いします。

<%ad> <%ad2>
</footer>
</div>

のすぐ下にある

<!--not_permanent_area--><!--not_edit_area--><!--not_search_area-->〜 省略〜
から
〜 省略〜 <!--/not_search_area--><!--/not_edit_area--><!--/not_permanent_area-->

までを削除してください(scriptファイル2点とフックアップコード1点 計3点)
よろしくお願いします。

* 明日私が私用で一日留守にしますので、お返事できても深夜になるかと思います。ごめんなさいね。

きろろ
2017/08/29 (Tue) 02:11

To Akiraさん

げっ!
Windows7って、サポート終了しているんですか?
知らなかったぁ。
困ったなぁ……

パソコンを初めて使ったのは、実はMacだったんです。
ディスクトップのデカイの^ ^
何年前?
Windows98で乗り換えたのかな。
すっごい古い記憶ですよ。

基本、一太郎が使えればなんでもいいんですよ。
と言うより、Windowsはなんだか最近、OS がころころ変わってついていけません。
調べてみたら、Macでも一太郎をインストールできるみたいですね。

うーーん、どうしようかな……
って、先立つものがない!ヽ(;▽;)
この間、うちのにゃんこ先生が体調を崩しまして、そちらにも諭吉が何人か飛んで行きました。

でもって、今度はコンタクト。
はぁ、諭吉が何人いても足りません。

Macか……
真剣に考えよう^_^

-
2017/08/29 (Tue) 22:02

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/08/29 (Tue) 23:25

To Out-of-styleアクセス時のガクつく件 内緒さん②

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

これ以上は発想の転換が必要かなぁ、と思います。
先回の作業で何を目的としたかというと、
「フェイドのスピードを遅らせる = はっきり画面が出てこないうちに整形を済ませてもらう」
これでした。
ローディングにかかる時間というのは変化が無いのですが、フェイドというのは透明の状態からゆっくり不透明になるわけですので、閲覧者からすれば「遅い」と感じることになります。
わざとゆっくり表示に見せかけているのでそりゃそうですよね (´・ω・`)
で、これ以上秒数を遅らせると「表示の遅いサイトだなぁ…。」という印象になってしまうと思います。
なので発想転換。
そして犠牲もあります。

デフォルトの状態を説明しますと、Out-of-styleはナビゲーションが上部固定です。
ですからスクロールアンカーが機能した際にそのナビゲーションの高さ分「下」に下げないと止まっている要素の上が見切れます。
(ナビが被さるから)
そのための処理をCSSで行っていますが、これがガクっとなる原因でもあります。
ですからこの部位の調整を外し、他の部位に担ってもらいます。
その代わりホールドされた要素はナビが被りますので(45px)、上部が見えなくなります。
あと、固定されたナビが元の位置(ヘッダー下)に戻る時にちょっと嫌な感覚が残ると思います。
PCよりもスマホの方が顕著かも。
(スマホの方は固定される瞬間も気になる… かもしれません)

#main-fit-wrapper {
で検索。
以下のようになっていますので、それを削除

#main-fit-wrapper {
padding-top: 50px;
}

続きまして検索。
#fit-wrapper {
3箇所あります。1番最初のものが対象。
以下のようになっていますので削除。

#fit-wrapper {
padding-top: 50px;
}

続きまして検索。
#pad-wrapper {
4つヒットします。そのうち3つが対象。
まず一番最初のものに対し、以下の部分を追加修正。

デフォルト
padding: 0 60px;

修正
padding: 0 60px 50px;

続いて4つ中の3つ目のものに対し以下の部分を追加修正。

デフォルト
padding: 0 30px;

修正
padding: 0 30px 50px;

続いて4つ中4つ目に対し追加修正。

デフォルト
padding: 0 15px;

修正
padding: 0 15px 50px;

------

上記修正を行った上で、先日行った秒数修正値を元に戻してください。
(特に問題がなければそのままでも構いません)

スクロールアンカーを維持しようと思えばもうこれしかないと思います。
ローディングを遅らせている原因というのははっきりしていて、全て広告関連です。
正しく言うと、スクロールアンカーを実現するためにJSで縦幅を瞬時に計算してもらわないといけないんですね。
だけれども末尾の広告描画が遅いためにタイムラグが発生してしまうんです。
タイムラグというか、計算が終了しないというか。
それでガクっとなります。
これらのscriptファイルの読み込みで対処したいところですが、恐らくそういったことは規約に抵触すると思います。
広告の仕様に手を加えるのが叶わない以上、こうした方法しか無いでしょうね (´・ω・`)

Akira
2017/08/30 (Wed) 02:49

To きろろさん

今だとMacだから使えないというソフトは少ないと思いますよ。
それでも必須ソフトの対応状況は調べないとアレですけどね。

はい。是非ご一考ください(笑)

-
2017/08/30 (Wed) 22:18

管理人のみ閲覧できます

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

きろろ
2017/08/31 (Thu) 04:58

To Akiraさん

おはようございます!
きろろはこれからお仕事です!
お亡くなりになったパソコンが、なんとか戻ってきました!
ここはもうWindows10をいれんといかんばい! インストールいたしました!

暮れのボーナスでMacBookを買おうかとおもうのですが、調べて見たら、一太郎を使うのには、MacOS の他にWindowsもインストールする?
えっ? 大丈夫なんてしょうか?

以前Macを使っていた頃に仮想メモリとやらを使ったのは記憶がなきにしもあらす😨

Macがいいかな? と最近思ったのは絵が描ける!
iPad Proに至ってはなんか、すごい書きやすそうなんですよね〜〜

売れない商業作家なので表紙や挿絵も自分でかけると楽なんですよ。
液晶のペンタブは高すぎて買えないし。
MacBookにらするかiPad にするかまような……

きろろ
2017/08/31 (Thu) 05:03

To Akiraさん

おはようございます!
きろろはこれからお仕事です!
お亡くなりになったパソコンが、なんとか戻ってきました!
ここはもうWindows10をいれんといかんばい! インストールいたしました!

暮れのボーナスでMacBookを買おうかとおもうのですが、調べて見たら、一太郎を使うのには、MacOS の他にWindowsもインストールする?
えっ? 大丈夫なんてしょうか?

以前Macを使っていた頃に仮想メモリとやらを使ったのは記憶がなきにしもあらす😨

Macがいいかな? と最近思ったのは絵が描ける!
iPad Proに至ってはなんか、すごい書きやすそうなんですよね〜〜

売れない商業作家なので表紙や挿絵も自分でかけると楽なんですよ。
液晶のペンタブは高すぎて買えないし。
MacBookにらするかiPad にするかまような……

vanillaice (Akira)
Akira
2017/08/31 (Thu) 15:58

To Out-of-styleアクセス時のガクつく件 内緒さん(終了のご報告)

こんにちは ( ゚Д゚)ノ

はい。了解です。
二度目のアクセスからはキャッシュが効きますので、その効果もあるかもしれません。
取り敢えずこの件はこれで終了ということで、お疲れ様でした :)

Akira
2017/08/31 (Thu) 16:01

To きろろさん

きろろさん、こんにちは (●'0'●)/

私は絵が画けない人なので(へたくそ)、お絵かきツールのことは全くわかりません(笑)
きろろさん、絵も画けちゃうのですね。
すげー。素直に尊敬する ( ̄∀ ̄;)

iPadはパソコンの代用とするにはちょっと無理があると思いますので、MacBookをおすすめします。
うちの相方が使ってます。
私はiMacでございま (o'ω')ノ
Macは仮想というよりも完全にOSを切り分けて使えますよ。
純正Windows OSをブートキャンプで切り替えます。
WindowsをMacに入れることはできますが、MacをWindowsに入れることはできません(独占OSだから)
Appleズルいよね ^^;

きろろ
2017/09/01 (Fri) 03:53

To Akiraさん

おはようございます!
満身創痍のきろろのPCにWindows10を入れてみました。
一度インストールしていたので、無償でインストールできたのですが……

いやーー、大変!
7から10にするだけで半日?
さすがに大げさですが、3時間はかかりました。

そして先ほどまで、どうしたらサクサクと動いてくれるのか、もう疲れはてました。
まず、10をインストール後起動してメールチェックをしようとしたら、固まる……
一太郎を起動すると固まる……(o_o)
なにかしようとすると固まる(o_o)

なんですか? こやつは?

ググりながら、まずWindowsdefender?なるものを停止させて、それもレジストリーから停止させないとなにかのタイミングで、作動するらしくまず、そいつを無効化!

次にプレインストールされている余計なアプリを、コマンド入力で片っ端から消しまくり……

ようやく、動ける環境になりました。
もうWindowsにぐったりです。

年末、ボーナスをもらったらMacBookに乗り換えようと考えています。

ブートキャンプなるものも調べてみました。
Windowsは新しくなればなるほど、不具合が多い……って、Windows7時代のハードウエアは、次のアプデで音が出ないよ! とか、デバイス関連でトラブルが発生しそうな予感です。

あーー、もう嫌だ(o_o)
疲れましたよ。

Akira
2017/09/01 (Fri) 15:00

To きろろさん

きろろさん、ごめんなさい。
うちのダーリンのパソコンは「MacBook Pro」でした ^^;

確か注意点として、接続ポートがUSB-Cとかいうのなんですよね。
次世代ポート、みたいな。
それで相方が「USBケーブルがぁぁぁ!!!」とか苦労していた記憶。
でも私全然わかんないです。
「へー (´・ω・(`)」って感じでスルーしていたので(笑)
なのでそのあたり事前にチェックしておいたほうが良いかもしれません。

Windowsなんですが、今きろろさんが使用しているbitの確認をしておいた方が良いと思います。
もし32bitであればMac購入時には64bitに切り替えた方が良いと思うので。
Windowsをパッケージ版でずっと購入してきた方だと、パソコン自体が64bit対応なのに32bitのOSを入れてしまってることが結構あるんですね。
今もう新規機種で32bit採用は殆ど無いです。
どこぞの通販会社の「限定モデル」みたいな安価なものぐらいじゃないかと。
Macは全てが純正になりますので、新規購入した際には64bit確定です。
なのでWindowsをbootcampに入れる場合には64bitを。
もし現在使用中のOSが32bitの場合は認証をせずに新規でWindows10をインストールする、という形になると思います。
たぶん無料でいける。Macからなら。
絶対というお約束はできないけど ^^;

もしかしたら今の不都合もbitの関係かもしれません。
あとはメモリがいくつあるかですよね (´・ω・`)

きろろ
2017/09/02 (Sat) 00:20

To Akiraさん

いろいろとありがとうございますm(__)m

ふむふむ、MacにはUSBがないんですか?
周辺機器って、みんな無線なんですかね?

まぁ、きろろは出力もコンビニでしていますから
外付けHDDとUSBメモリーくらいかな?
まあ、それもどうにかなるでしょう!
って、うちのPC、USBが4つあったんですが3つ、死んでます(o_o)
残ったUSBは受電式のUSBで繋いで……って、わかりませんよね^_^
ようはUSBのタコ足みたいなもんです。
今は自分のPC環境ではデータの保存は怖いので、FC2のサーバーに預けてあります。

うちのWindows10は32?
あれ、なんか昨日弄り回していた時……
そうだ、プレインストールアプリをコマンド入力するたび、Windows32って表示されたような?

しかし、なんでWindowsはごちゃごちゃいろんなものをつけちゃったんですかね?
10のスタートメニューのにぎやかなことw
まあ、昨日一晩かけて抹消したので、今はすっきりしていますけど。

はやく、ボーナスやって来い!( ;∀;)

Akira
2017/09/03 (Sun) 02:00

To きろろさん

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

無いわけじゃないんだけども、USBポートがひとつしかないもよう。
たくさん繋げる人は困るかもしれないなー (´・ω・`)

Windowsはテンプレ確認のためだけに起動するんだけれど、動作がすごく遅い (´-ε-`;)
とりあえず私はMacに変更して以降、一度もWindowsに戻したいと思ったことはないです。
でも逆の人も絶対いるはず(笑)
スクロール操作も逆なので慣れるまでは戸惑うかも。
慣れたら快適ですよ。
寧ろこっちのほうが正しいんじゃないか、と思うシステムがたくさんある (´・ω・`)

-
2017/09/30 (Sat) 00:38

管理人のみ閲覧できます

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

Akira
2017/09/30 (Sat) 12:45

To ブログカード画像の件 内緒さん

こんにちは。
画像を自動でNo imageに変更するといったことはできません。
貼り付けた後に手作業で img タグの src属性(画像アドレス) を変更して頂くほかありません。
ブログカードというのは相手方のOGPを遵守するようになってますので、基本的には利用者の任意で画像や本文を変更するといったことは不可です。
ただこのカードの場合にはhtmlが出てきますので変更自体はできます。
それはあくまでも自身のページへのリンクの場合と、相手(出典元)が存在する場合には本文の文字数調整程度に留めてください。

相手方のOGP画像が存在しない場合には画像なしでも綺麗に整形されるように作ってあります。
大抵の場合にはページ内に画像が無い場合はプロフィール画像を代替としているところが多いですが。
なにせ相手のOGPがどう設定されているかによります。
これらを踏まえて頂いて、いっそ画像が不要という場合には

<div class="blogcard-image">
から
</div><div class="blogCardFooter">
のすぐ手前までを削除してください。
よろしくお願いします。

-
2017/09/30 (Sat) 21:45

管理人のみ閲覧できます

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

-
2017/10/09 (Mon) 10:14

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/10/09 (Mon) 16:47

To Out-of-styleご質問3件 内緒さん

ありがとうございます (o'ω')ノ

> 1.トップページの記事要約表示のコメントを消したい〜

<div class="grid-comment">
でCtrl+F(Windows)/ Command+F(Mac)キー検索するとhtml内(管理画面上段)に1箇所あります。
該当部位を削除しますので、範囲をスクリーンショットでご確認ください。

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/capturedelete892288th.jpg

-----

> 2.個別記事のタイトル下にある〜省略〜投稿日時とカテゴリーだけを左詰めで表示させたい〜

こちらについては構造化マークアップを行っていますので、管理人とコメントを削除することによって構造エラーになります。
SEOを特に重視していないのであれば表面上問題が出ることはありません。
レイアウトが崩れたり、検索結果に掲載されなくなるといったことは起こりませんが、内部的にはエラーです。
そこをご理解頂いた上でお願いします。

<div class="entry-header-content">
で検索、html内に1箇所あります。
スクショに従って該当範囲を削除。

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/capturedelete47782th.jpg

続いて
.entry-header-content-box
で検索。CSS内(管理画面下段)に2箇所あります。2箇所共に修正します。

一つ目の方

table-layout: fixed;
width: calc(100% / 4);


を削除。
2つ目の方は

@media screen and (max-width: 720px) {
.entry-header-content-box {
width: 50%;
}
}


を削除。
このままだと投稿日時とカテゴリがくっついてしまいますので、

#entry-day {
padding-right: 10px;
}


をCSSソースの末尾で良いので追加してください。
赤字部分が「カテゴリ」との距離ですのでご自身で調整してください。

------

> 3.トップページヘッダーの、ブログタイトル背景に画像を使用したい〜

ヘッダー背景についてはOut-of-styleではナビゲーションがブラウザ横幅いっぱいになっていません。
ですから
① ヘッダーをナビ横幅に合わせるのか、
②ブラウザ幅いっぱいにするのか
で処理が変わります。
いずれにしろナビとの体裁はあまり良くないと思います。
②の場合には比較的大きな修正になるのとデザイン的にアレでソレなので今回は無しでお願いします。
そして仮にナビの方をカスタマイズする場合にもご自身で(自力で)お願いします。

① ナビに合わせる場合

#blog-name-container
で検索。
position: relative;
の直下に以下を追加。

background: url(画像アドレス) center center /cover no-repeat;

赤字部分は画像内オブジェクトの位置によって変えてください。
参考記事
https://vanillaice000.blog.fc2.com/blog-entry-566.html#chapter-8

ご質問については以上です。

------

ナビの内容を変更されていますので、小さめサイズのパソコン・タブレット閲覧時にナビゲーションのリンクが重なって押せません。
また、デザイン的にも崩れています。
当該ページ本文の「ナビゲーション」の項目をお読み頂き修正された方が良いと思います。
レスポンシブデザインですので一定幅でカスタマイズを行わず、ブラウザ幅を拡大したり縮小したりと各画面サイズの見た目を確かめながらの作業をするようにしてくださいね。
よろしくお願いします。

-
2017/10/10 (Tue) 09:04

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/10/10 (Tue) 14:05

To Out-of-styleご質問3件 内緒さん②

大変失礼しました。スクショの方が間違っています。
貴重なお時間を浪費させて申し訳ないです (*_ _)

既に該当部位は削除されていますので、今の状態で改めて以下を検索。

<time class="entry-header-content-box"

このすぐ「上に」

</div>

が残っているはずですので、それを削除。

<div class="entry-header-content">
<time class="entry-header-content-box" 〜 省略

となっていれば正解です。
お手数おかけします。よろしくお願いします。
ホントごめんなさいね (*_ _)

---------

こちら別件ですけれども、ヘッダーに背景画像を入れたことによってブログタイトルが見えなくなってしまいました。
ですからヘッダー上に黒か白のオーバーレイを入れると良いと思います。
ちょうど背景オブジェクトの文字と同じ位置にありますので、テキスト(ブログタイトルリンク)へのシャドウ処理では間に合わないと思います。
ただ、これをやってもかなり厳しいと思います。
文字同士が同じ位置、というのは好ましくありませんので、本当は背景画像の選び直しをおすすめしますがお任せします (´・ω・`)

黒背景を敷くとCSS修正がより多くなりますので、とりあえず白で。

#blog-name-container:before {
content: "";
display: block;
background-color: rgba(255,255,255,.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}


赤字部分
255,255,255
が「白」のカラーコードです。
黒にする場合には
0,0,0

最後の
.6
が不透明度設定で、1で完全不透明(透けなし)になりますので調整してください。
例)
rgb(0,0,0,.8) --- 不透明度0.8の黒
(小数点の前にはカンマが必須です)
いやでもやっぱ厳しいと思うー ( ̄∀ ̄;)

-
2017/10/10 (Tue) 17:24

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/10/10 (Tue) 18:11

To Out-of-styleご質問3件 内緒さん(完了のご報告)

いえいえもう、貴重なお時間でしたのに (*_ _)

形になったようで安心しました。
こちらこそありがとうございます :)

-
2017/11/05 (Sun) 17:39

管理人のみ閲覧できます

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

Akira
2017/11/05 (Sun) 18:04

To Out-of-styleプロフィールの件 内緒さん

ありがとうございます (o'ω')ノ

> プロフィールと自己紹介が余計な感じがするので消したいです〜

テンプレートの方は装飾を行なっていますので、
① テンプレートソース内のプロフィールを削除
② プラグインのプロフィールを非表示
いずれかの方法でお願いします。

① の場合は
<!-- 注)プロフィール不要の方ここから削除 -->
でCtrl+F(Windows)/ Command+F(Mac)キー検索、ガイダンスに従ってください。
こちらはSNSのボタンもセットになっていますので、ボタンも不要であれば
<!-- 注)プロフィール不要の方ここから削除 --> のすぐ上にある
<div class="side-menu">
から
<!-- 注)プロフィール不要の方ここから削除 --> のすぐ下にある
</div>
までを削除してください。

② の場合は個人設定ですので以下のリンク先からどうぞ。
https://admin.blog.fc2.com/control.php?mode=plugin

-
2017/11/06 (Mon) 16:51

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2017/11/07 (Tue) 01:24

To Out-of-styleプロフィールの件 内緒さん(完了のご報告)

プラグインは全て表示・非表示が任意で切り替え可能ですので、今後テンプレートを変更することなどあるでしょうからその都度再設定を行なってくださいね。
お疲れ様でした :)

グリ
2017/11/18 (Sat) 22:04

記事内で使用できる<h>タグについて

Akira様

はじめまして、こんばんは。
グリと申します。

Out-of-styleのテンプレートを使用させて頂いております。ブログ記事内で使用できる<h>タグなのですが、スタイルシート内を検索すると<h4>タグはありました。他の<h1>~<h6>タグはhtml内にありました。

そこでご質問なのですが、ブログ記事内で使用できる<h>タグは、<h4>タグのみになるのでしょうか?

お手数をおかけしますが、お時間があるときにお教えいただけると幸いです。失礼します。

Akira
2017/11/18 (Sat) 22:09

To グリさん

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

各テンプレートの「記事内で利用できる見出し」の明記をしようと思いつつ、記事修正作業が追いついていません。申し訳ないです ^^;

Out-of-styleについてはh2からh6までです。
よろしくお願いします。

グリ
2017/11/18 (Sat) 23:02

To Akira様

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

質問を質問で返すかたちになってしまい申し訳ないのですが、ブログ記事内で見出しタグを使用した場合は下記に記述したデザインを使用したいと考えております。

font-size:18px;
background-color:#ffffff;
border-top: #FF8C00 0px solid;
border-left: #FF8C00 8px solid;
border-right: #FF8C00 0px solid;
border-bottom:#FF8C00 3px solid;
padding:5px 10px;

その場合は、スタイルシート内を編集すればよろしいのでしょうか?それともhtml内を編集すればよろしいでしょうか?また、編集する箇所はどこになるのでしょうか?

テンプレート固有機能説明の記事を読み、div classの記述や<h>タグを私なりに、テンプレート内のhtmlとスタイルシート内を検索していますが、どこをどのように編集したら良いのか分かりませんでした。テンプレート作者の方に、このような質問をする事は失礼なのかもしれませんので、謝ります。申し訳ありません。

もしよろしければ、ご回答いただければ幸いです。

Akira
2017/11/19 (Sun) 18:30

To グリさん

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

> スタイルシート内を編集すればよろしいのでしょうか?それともhtml内を編集すればよろしいでしょうか?〜

今回の場合は編集・修正ではなく追加です。
その前に決めなければいけない方針がいくつかありますので説明しますね。

---------
[1] 独自クラス化するのか、要素に直接スタイルを当てるのか

Out-of-styleにはデフォルトで3種の見出し装飾が使えるようになっていますが、それらは全て「独自クラス」を利用しています。
独自クラスというのはこういうの ↓

<h2 class="dogear">見出し内容</h2>

クラス名「dogear」ですね。
これを書かない限り装飾は適用されません。
それが「独自クラス」

要素に直接〜というのは

<h2>見出し内容</h2>

とこうしてhtmlタグを利用しただけで装飾が付くような形です。
クラス名を書く必要はありませんが、ページ内には記事部分以外にも見出しタグを利用していますので、単純にhxに装飾を付けてしまうと記事以外の他の見出しにも適用されてしまいます。
ですから基本的に要素に直接、というのは避けるべきです。
どうしても、という場合には「ある特定範囲中にあるhx」という縛りでCSSを当てます。
Out-of-styleの場合は記事のアウトラインに与えられている名称はは #inner-contents (クラス名でなくID名)ですので

#inner-contents hx {
内容
}

という指定の仕方になります。
が、例えば記事内でブログカードなどを利用し、そのhtmlの中に見出しが含まれている場合にはやはり同じ装飾が適用されてしまいます。

独自クラス --- 記事内で見出しを利用する都度クラス名を書く面倒がある
要素直接 --- 記事作成は楽だが無関係な部位にも影響を与えることがある

どちらにするかをまず決めてください。
事前に決めないと後々非常に厄介な問題になりますので、まずこれが一番最初に決めるべきところです。

----------
[2] 見出しの位別にフォントサイズを変えるのかどうか

今頂いている内容を見ますと font-size: 18px という指定があります。
記事内で利用可能な見出しはh2〜h6までありますが、どの見出しレベルでも等しく18pxということで良いんでしょうか。
こちらもご一考ください。
個人的にはフォント指定は装飾と分けた方が良いと思います。

例)
#inner-contents h2 {
font-size: 1.3em;
}

#inner-contents h3 {
font-size: 1.2em;
}

#inner-contents h4 {
font-size: 1.1em;
}

#inner contents h2,
#inner contents h3,
#inner contents h4 {
装飾内容(フォント指定は省く)
}

フォントの単位はpxではなくemをおすすめします。
pxは絶対単位ですので、例えば 16px と指定した場合、記事内の基本フォントが14pxでも見出しは16pxです。
仮に記事内基本フォントを16pxに変更すると、見出しもやはり16pxのままで等しくなってしまいます。
相対単位emを利用した場合には、例えば1.3emだと
基本フォント14pxの時の見出し --- 14pxの1.3倍
基本フォント16pxの時の見出し --- 16pxの1.3倍
こうして同等化を避けることができます。

-------------
2項目について方針をお決めください。
おさらい

① 独自クラス化 or 要素直接
② フォント

あと、一部無意味な内容がありますので修正しておきます。

font-size: 18px;
background-color: #ffffff;
border-left: #ff8c00 8px solid;
border-bottom: #ff8c00 3px solid;
padding: 5px 10px;

0値のボーダーは「無」ですから書く必要はありません。
あとは細かいことですが、htmlやCSSで大文字は利用しない方が良いですね。
具体的作業説明はお返事待ちにしますのでよろしくお願いします。

グリ
2017/11/19 (Sun) 22:20

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

Akira様

こんばんは。
詳細で且つ分かりやすい説明をありがとうございます。

1・独自クラス化で運用したいと思います。
2・見出しレベル毎にサイズを変更したいと思っています。

Akira様のアドバイスで猛勉強して考えてみたした。

border h2 {
font-size: 1.3em;
}

border h3 {
font-size: 1.2em;
}

border h4 {
font-size: 1.1em;
}

border h2,
border h3,
border h4 {
background-color: #ffffff;
border-left: #ff8c00 8px solid;
border-bottom: #ff8c00 3px solid;
padding: 5px 10px;
}

上記のコードをスタイルシートに追加し、ブログ記事を書くときに<h2 class="border">見出し内容</h2>と、記述し運用すればよろしいでしょうか。

多忙を極めていると思いますが、ご回答頂けたら幸いです。

Akira
2017/11/19 (Sun) 23:52

To グリさん

独自クラス、ということでよろしいでしょうか。
独自クラスを採用する場合にはテンプレート変更時のCSS移植を忘れないようにしっかり内容を管理してくださいね。
以下の内容をスタイルシート(管理画面下段)の末尾に追加してください。

#inner contents h2 {
font-size: 1.3em;
}

#inner contents h3 {
font-size: 1.2em;
}

#inner contents h4 {
font-size: 1.1em;
}

.border {
border-left: #ff8c00 8px solid;
border-bottom: #ff8c00 3px solid;
padding: 5px 10px;
}

---------
.border h2〜 という指定は誤りですので、上記の内容をコピペで。
よろしくお願いします。

グリ
2017/11/20 (Mon) 00:13

出来ました

Akira様

ありがとうございます。無事に見出しを付ける事が出来ました。Akira様の貴重なお時間を、頂いてしまい申し訳ありません。とても感謝しています。

素敵なテンプレートもありがとうございます。テンプレート作成等、陰ながら応援しています。
では、失礼します。

masagoyuki
2017/11/20 (Mon) 15:25

グローバルナビなるものを組み込みたいのですが…

先日もお世話になりました。テンプレートをお借りしている上に、心優しいリーディングに感謝するばかりです。グローバルナビなるものを組み込みたいのですが…、synchronicityでは無理なのでしょうか? 初心者です。お時間のある時、なんらかアドバイスいただければ幸いです。どうぞよろしくお願いいたします。

vanillaice (Akira)
Akira
2017/11/20 (Mon) 15:58

To グリさん(完了のご報告)

上手く導入できたようで良かったですー。
こちらこそよろしくお願いします。
お疲れ様でした :)

Akira
2017/11/20 (Mon) 16:03

To masagoyukiさん

こんにちは。
ご利用のテンプレートは「Synchronisity」ということなんでしょうか。
明記している通り、テンプレートのご質問は該当専用記事へお願いしています。
お手数ですが今後の質問についてはご配慮頂けると助かります。

グローバルナビはSynchronisityにデフォルトで付いていますよ。
「ページ間の行き来をするためのリンクの集合体」のことを「グローバルナビゲーション」と言います。
ブログタイトル下のindexやadminなどのリンクが入っている部分がそれです。

-
2017/12/13 (Wed) 05:50

管理人のみ閲覧できます

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

Akira
2017/12/13 (Wed) 09:38

To Out-of-styleサムネイルの件 内緒さん

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

この件は記事にしようと思って忘却の彼方に葬っていました。
今書きましたのでご参照ください。
https://vanillaice000.blog.fc2.com/blog-entry-625.html

上記ページ内容と同じ原因かもしれないし、もしかしたら画像の掲載場所を「追記」に変えた、というのが原因かもしれません。
問題のページURLがわからないので推測です。
記事内容と照らし合わせて原因を探ってくださいね。
よろしくお願いします。

*目視できる具体的な症状がある場合には該当URLを頂けると質疑応答が円滑に進みます。

イギリスの西のはしから
2017/12/13 (Wed) 15:21

To Akiraさん

迅速な対応ありがとうございます。
追加いただいた記事で解決しました。
① ご自身のブログアドレスを必ずお書き添えください
とありましたし、みていただいたほうがわかりやすいとおもい、websiteというところに入れたつもりだったのですが、
シークレットってなってしまい、自分でも確認できずでした💦
親切な説明ありがとうございます。

Akira
2017/12/13 (Wed) 21:14

To イギリスの西のはしからさん

FC2ブログの内緒コメントの難点はそこですよねぇ (´・ω・`)
投稿主が二度と内容を見られないというのはすっごく不便 ( ̄∀ ̄;)

-
2018/02/19 (Mon) 15:45

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/02/19 (Mon) 16:49

To Out-of-styleレスポンシブ設定の件 内緒さん

ありがとうございます :)

> スマートフォン版の表示設定”を“無効にする”にしたはずなのに〜なぜか“有効にする”から変更できない〜

テンプレートのJS内容が個人設定を阻害することはありません。
考えられる原因としては
・Adblockを入れている(設定ページでAdblockが機能している)
・FC2ブログの一時的な不具合
ぐらいだと思います。特に前者、お心当たりないでしょうか。
パソコンからどうしても設定ができない場合にはスマホから「PC表示切り替え」を行い、同じ手順を試してみてください。
よろしくお願いします。

------
記事を書きましたので御覧ください。

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

でも内緒さんの原因ではない可能性もあります。
その際はその旨お伝えください。

-
2018/02/19 (Mon) 20:10

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/02/19 (Mon) 20:24

To Out-of-styleレスポンシブ設定の件 内緒さん②

> 結果としてレスポンシブ表示されました〜

いえ。されてないですよ (´・ω・`)
「PC版で表示する」をクリックした場合にはURL末尾に ?pc が付いて強制的にパソコン版を表示させているだけです。
FC2ブログはダイナミックサービングですので、スマートフォン閲覧者は「PC版で〜」を押すかURL末尾のパラメータを付けない限り自動的にスマホ版へ誘導されます。
それを防ぐ為に行うのが「スマートフォン版非表示」です。
つまり ?sp (スマホ版テンプレート強制表示)と ?pc (パソコン版テンプレート強制表示) の境を無くすために利用します。
現在はただ単に内緒さんがご自身でPC版強制表示を行なったのでOut-of-styleになっているだけです。
他の方はスマホ版が表示されます。
Googleもそのスマホ版を見ていますのでサイトの評価はそのスマホ版で行われます(今はまだ過渡期ですが)
SEO面を考えるのならば諦めずにしっかりスマートフォン版非表示設定を行うことです。
私がお伝えした「PC表示切り替え」はその状態から「スマートフォン版非表示設定」を行なってください、という意味であってパラメータを変更してくださいという意味ではありません。
管理画面をPC版と同じ表示にし、そこから個人設定ページを開いて「有効」「無効」切り替えを試してください、ってことです。
(それをやってもダメだったってことですよね)

で、Adblockの確認はして頂いたんでしょうか。
ここ非常に重要なので飛ばさないでくださいね。
私の方はパソコン・スマホ共に切り替え可能ですので、パソコンで別のブラウザを利用してみてはいかがでしょうか。
試した環境
・Google Chrome --- OK
・Firefox --- OK
・Vivaldi --- OK
・Brave --- OK
(全てAdblock「OFF」状態)

もしかしたらあっさりできるかもしれませんよ。

-------
こんな記事がありました。

コレトのブログ様: FC2ブログのスマートフォン版の表示設定を無効にできない場合の対処法
https://coleto84.blog.fc2.com/blog-entry-210.html

-
2018/02/19 (Mon) 21:40

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/02/19 (Mon) 21:59

To Out-of-styleレスポンシブ設定の件 内緒さん③

いやいやいやいや!違います!(笑)
「ads.txt」(アズ テキスト)というのはアフィリエイトをやっている方が不正広告・なりすまし広告を防ぐためにGoogle botに対して許可している広告を通達する役割で、Adblockとは全く違います。
内緒さんがアフィリエイトと関連がなく、自主的にads.txtの送信を行なっていないのであれば良いのですが。
(といってもたぶんアフィリエイターさんでも使っている人は少ない)

上記をよくご確認頂きまして、「よくわからんなぁ」と思われるようでしたらたぶん使ってない(笑)
そこはデフォルト設定のままにしておいてください。
まぁ通常は「無効」ですから大丈夫だとは思ふ。

Adblockをご存知なかったんですね。大変失礼しました。
Adblockというのはブラウザの拡張機能で、ページ内の広告を非表示にするためのものです。
ブラウザにデフォルトで付いているわけではありませんので、内緒さんが例えば誰かから聞いて導入した記憶があるかもしれないし無いかもしれません。
とても多くの方が利用していますので、忘れているだけでもしかしたらインストールしているかもしれません。ご家族の方が入れたかもしれないし、そこは私ではわからないけれども(笑)

ともかくads.txtの確認だけされまして、今私も確認しましたがレスポンシブ設定はちゃんとできてますのでこちらはOKということで。

アフィリエイトに無縁ならそんなに気にしなくても良い… と思う ^^;
とりあえずお疲れ様でした(笑)

PhotoJoy
2018/03/04 (Sun) 07:17

ありがとうございます。

こちらのテンプレートを使わせていただいております。
綺麗なデザインで大変気に入っています。ありがとうございました。

vanillaice (Akira)
Akira
2018/03/04 (Sun) 12:51

To PhotoJoyさん

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

-
2018/03/05 (Mon) 14:48

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/05 (Mon) 17:22

To Out-of-styleレスポンシブ設定の件 内緒さん(終了のご報告)

気づいて頂けて良かったです(笑)

そうですね。ご自身で何か操作した覚えが無いのであれば設定していないということなのでそれで良いと思います。
お疲れ様でした :)

-
2018/09/17 (Mon) 19:42

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/17 (Mon) 22:09

To Out-Of-Style区切り線の件 内緒さん

ありがとうございます :)

> スマホで表示した時に各記事が薄く細い線で区切られているのですが、その線を太くするか濃い色に変更することは可能でしょうか?〜

可能ですがその前に重大なエラーが数箇所ありますのでそちらの修正を先におすすめします。
現時点で80近いエラー項目が存在し、中には致命的なものも。

------
head内のscript要素は全て</head>の直前に入れてください。

文字コードの指定やビューポート設定などは最優先されるべき内容です。その他のスクリプト系は全てそれ以降に記すようにしてください。Analyticsも同様です。
script要素は特殊な内容を除き</body>の直前に移動させた方がページの描画は速くなります。
Analyticsのみ</head>直前に残し、それ意外は</body>の直前に移動させることをおすすめします。

head情報を一旦デフォルトの状態に戻されまして、一つ一つ慎重に追加をしてください。
・script要素は</head>の直前あるいは</body>の直前
head内にあるべき情報がbodyに移動しているような状態で正しく機能していません。

google-site-verificationやbing用meta、及びtwitterカードなどのmeta要素は
<meta name="author" content="<%author_name>">
の下に追加。

鍵つき投稿ですのでスクリーンショットなどを用いての詳細な説明ができません。
また、head内に点在するFC2独自変数の記述の様子は第三者からは確認不可ですのでスクリーンショットが無いと的確な判断ができない点もお伝えしておきます。

------
本題の下線について
.grid-item で検索するとCSS内に2つヒットします。2つ目の
border-bottom: 1px solid rgb(238,238,238);
が対象ですので線を太くするならば 1px を希望の数値に。色を変更するならば rgb(238,238,238) を希望のカラーコードにそれぞれ修正してください。
よろしくお願いします。

headの方を先にやった方が良いですよ ^^;

車アタル
2018/09/17 (Mon) 22:46

To AkiraさんTo Akiraさん

Akiraさん

問い合わせの内容以上の回答をいただき、ありがとうございます。
致命的なエラーがある!ということで、早急に対応します。
見よう見まねでカスタマイズしているので、そういうことになるのですね。
また、わからないことがありしたらご質問させていただきます。
ありがとうございました。

vanillaice (Akira)
Akira
2018/09/18 (Tue) 00:06

To 車アタルさん

お疲れ様です。
修正されたのだとは思いますがまだやはり大量のエラーですね (´・ω・`)
(約80項目エラーから70項目に減りはしました)
一度ご自身の目でご確認くださいね。

https://validator.w3.org/

途中で全角スペース使ってないですかね。
Google Fontsの前のスペースを確認してください。
htmlコード内での全角使用は即エラーなので気をつけるようにしてください。特にhead内ではエラーの視覚的判断がとても難しいです(レイアウト崩れが発生しにくいため)
全角消去だけで全て正常化されるかもしれません(他の問題がなければの話ですが)
そしてhead情報内の書式は揃えるようにしてくださいね。OGPに影響することがあります。

×
<script type="text/javascript" src=""></script>

<script src=""></script>

html5のscript要素type属性の初期値はtext/javascriptなので記述不要。

×
<meta name="google-site-verification" content="" />

<meta name="google-site-verification" content="">

html5はhtmlであってxhtmlではないので末尾スラッシュ不要(site-cerificationに限らず全てに於いて)

ご覧になっているかわかりませんが一応お知らせしておきます。
ともかく今後も全角の使用には十分注意されると良いですね。
html, CSS, JSなど全て英語がベースなので「全角」の概念もありませんしvalidationでも「全角だからエラーになってるよ」といった指摘・提案も行われません。

車アタル
2018/09/18 (Tue) 22:42

To Akiraさん

お疲れ様です。
https://validator.w3.org/ で確認しました。(こういうサイトがあるのですね)
ようやく彼女を部屋に連れてきたら「もうしこし、片付けたら?」と言われたような気分です・・・
全角は秀丸でチェックして修正しました。
ご指摘のところも修正しました。
・html5のscript要素type属性の初期値は~
・html5はhtmlであってxhtmlではないので~

https://validator.w3.org/で確認したエラーは54個まで減らしまたが・・・
cssの知識がないので、勉強しないとこれ以上は減らせそうにないですね。勉強します。
ありがとうございました!

vanillaice (Akira)
Akira
2018/09/19 (Wed) 03:15

To 車アタルさん(終了のご報告)

こんばんは。

そうですね。お時間のある時または実害有りと判断できた際にでも修正してください。
ちなみに今回の件はCSSではなくhtmlの方です。
お疲れ様でした :)

-
2018/09/22 (Sat) 17:07

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/23 (Sun) 00:30

To Out-Of-Style 見出しの件 内緒さん

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

> cssに追加して要素直接タイプで見出しを使いたいのですが一部分しか適用されなかったのと関係ない所にも表示されました〜

要素直接のセレクタ指定(タイプセレクタ と言います)は他の部位に同じ要素が有った場合全てそれに倣いますので用いるべきではありません。

<hx class="yyy">見出し</hx>

スタイリングを行う場合には上記のようにクラス属性を付けて

.yyy {
スタイリング内容
}

こうするか、あるいは場所を限定するなどの対処をしてください。
クラス名を用いず記事内での見出しに限定するのであればCSSを

#inner-contents hx {
内容
}

上記のような形にすることで記事内の見出しのみに限定することができます。この場合には
<hx>見出し</hx>
と書いても大丈夫です(がマッチングに若干の無駄は生じます)

* hx のxは2〜6までの数字、yyyは不特定文字列です

-----
> 同じテンプレートのコメント欄でフォントサイズの指定について指摘がありました。〜

このページのコメント欄のことでしょうか。
全てのコメントをさらうわけに行きませんので特定が難しいです。ごめんなさい。

> <span style="font-size:large;"></span>でフォントサイズを指定してあります。これは見出しに影響はありますか?〜

えっと。お尋ねなのはバリデーション(htmlの整合性検査)のことでしょうか。
<hx><span style="font-size:large;">見出し</span></hx>
こういう書き方をしているという解釈で合ってますでしょうか。
ちょっとお尋ねの内容がはっきりしませんが仮にそうだとして、span要素はdiv要素と同じでタグ自体にこれといった意味はありませんので見出しに悪影響を与えることはありませんが無駄と言えば無駄かもしれません。
通常見出しというのはサイズ指定を行わずとも勝手に大きくなりますので不要のように思いますし。
あと「small」や「large」といった指定は絶対値指定(smallは13px、largeは18px)ですので、できれば相対値の「em」を指定した方が良いと思いますよ。

html
<hx>見出し</hx>

CSS
#inner-contents hx {
font-size: 1.2em;
}

など。記事内標準フォントサイズの1.2倍という意味です。そしてどのみちhxに装飾をあてるのですからこちらに指定をしておけばspan要素も不要になります。

-
2018/09/23 (Sun) 15:30

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/24 (Mon) 17:22

To Out-Of-Style 見出しの件 内緒さん(終了のご報告)

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

> 記事本文でテキスト全体に見出しがかかっていました。〜

こちらについては単純に構文エラーだったのだと思います。
方針が決まったようなので安心しました。お疲れ様でした :)

-
2018/11/28 (Wed) 12:38

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/28 (Wed) 13:03

To Out-of-style混在コンテンツの件 内緒さん

こんにちは。

混在コンテンツ対象はページ内全ての要素なので ページ送りのサムネイル画像 も含まれます。

entry-200のページ
prevエントリーのentry-201ページの記事内画像全て
nextエントリーのentry-195ページの記事内画像全て

entry-394のページ
prevのentry-395 の画像
nextのentry-393 の画像

こうして前後ページに混在コンテンツがあると滞在ページ自体が綺麗でも連動して混在コンテンツになります。
今FC2のプログラム救済も効力がありませんので結局は全ページの画像のスキームを修正する必要があります。

参考記事: FC2ブログ独自ドメインのSSL対応開始のアナウンスが届きました
https://vanillaice000.blog.fc2.com/blog-entry-799.html

滞在ページに心当たりが無い場合には前後ページをチェックしてください。
よろしくお願いします。

コウダイ
2018/11/29 (Thu) 22:04

To Akiraさん

こんばんは!独自ドメインSSL化混在化コンテンツの件で、コメントを元にすべての

記事をチェックして必要な個所を修正しました。youtubeのコードいじっていたりした

ので、必要なところは正規の表記にしてました。記事が360記事くらいあり、画像

リンクや内部リンクを修正するのが結構大変でした~

方針が分からなかったので助かりました、Akiraさんのおかげです、ありがとうございました。

これから301リダイレクトしてきます。では。

-
2018/11/29 (Thu) 23:38

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/30 (Fri) 15:00

To コウダイさん

こんにちは ('0')/

お役に立てたなら幸いです。お疲れ様でした :)

vanillaice (Akira)
Akira
2018/11/30 (Fri) 15:04

To サーチコンソールの件 内緒さん

お疲れ様です ('0')/

> メタタグ(HTMLタグ)は<body>の前ならどこでもいいんですかね?〜

いえ。メタタグを入れて良いのはhead内だけです(構造化マークアップなどを除く)
<body>前ではなく</head>前ですね。
今パソコン環境がありませんので目視確認ができません。もし今<body>の上にメタタグが書いてあるのなら</head>の直前に移動してくださいね。修正必須です。

> サーチコンソールにwww.ありとwww.なしのアドレスをプロパティに加えて〜

FC2ブログの独自ドメインはwww.つきにはできないですよ。www.は登録時にwww.を付けておかないと使えません。
なので登録の必要がない、というよりできません。
よろしくお願いします。

-
2018/11/30 (Fri) 16:46

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/30 (Fri) 23:59

To サーチコンソールの件 内緒さん②

こんばんは。今拝見しましたら

</head>

<meta name="msvalidate.01" content="xxx" />
<body>

こうなってます。

<meta name="msvalidate.01" content="xxx">
</head>
<body>

こうでないといけませんね。

-
2018/12/01 (Sat) 00:21

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/12/01 (Sat) 17:50

To サーチコンソールの件 内緒さん③

こんばんは。

> </head>の上の方がいいんでしょうかね?〜

「の方が良い」のではなく「でないとダメ」ですね。
メタタグは<head>〜</head>にしか書いてはいけない、という構文上のルールですから違えればクリティカルなエラーです。
htmlはいろいろと面倒な決まりごとがあります ^^;

-
2018/12/01 (Sat) 18:38

管理人のみ閲覧できます

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

-
2018/12/01 (Sat) 19:21

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/12/01 (Sat) 21:54

To サーチコンソールの件 内緒さん(完了のご報告)

お疲れ様でした :)

vanillaice (Akira)
Akira
2018/12/01 (Sat) 22:10

To FC2動画レスポンシブの件 内緒さん

box-for-videoクラスのdiv内に直接入れて良いのはiframe要素だけですよ。
FC2動画はJSで書き出すタイプですからiframeではなくscriptです。
そしてFC2動画のiframeはアクセスすることでdocumentから全て書き出します。ちょっと説明が難しいんですが、

<html>
<head></head>
<body>
ここに多数の要素が書き出されてそれが実際の動画です
<script></script>
</body>
</html>

こんな風に別のdocumentとして差し込まれます。親のdocument(テンプレートhtml, CSSのことです)からの操作は原則としてできません。
簡単に言うとFC2動画のCSS操作はできません。

実際にはJSを用いて親documentから操作することができるにはできるんですが、ChromeなどはiframeへのJSをブロックしますので労力の割に見返りはほとんどありません。
「スマホでは画面に収まっている」というのはFC2動画がUAを見分けてサイズを調整するようになっているからです(scriptの内容がそうなってます)
なのでテンプレートCSS内の .box-for-video の効力ではありません。

というわけでFC2動画の仕様の問題ですのでお役に立てずもうしわけないです。

-
2018/12/02 (Sun) 17:15

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/12/02 (Sun) 23:31

To FC2動画レスポンシブの件 内緒さん(終了のご報告)

はい。そういうことです。
なんでわざわざscriptなんて使ってんだろう、っていつも思います。
そう考えるとYouTubeは親切で使いやすいサービスですよね。

お疲れ様でした :)

-
2020/06/02 (Tue) 12:11

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/06/02 (Tue) 17:26

To Out-of-styleフォントサイズの件 内緒さん

こんにちは。

スタイルシート末尾に

#inner-contents {
font-size: 数値px;
}

追加 してください。よろしくお願いします。

-
2020/06/02 (Tue) 18:23

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/06/03 (Wed) 03:22

To Out-of-styleフォントサイズの件 内緒さん(完了のご報告)

修正できたということで良かったです。
お疲れ様でした :)

-
2021/05/22 (Sat) 17:02

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/05/24 (Mon) 16:58

To 最終更新日を表示させたい件 内緒さん

こんにちは。お返事遅くなりました (*_ _)

まず最初に、テンプレートのバージョンがリリース時のものです。その後FC2の仕様変更・新規機能などへの適合等多くの修正を入れていますので、できれば最新のものにアップデート(再DL)して頂いた方が良いと思います。とは言っても内緒さんの場合は必須要件というわけではないようなのでお任せします(利用する機能によっては「必須」になる場合もあります)

----- TOP
</time>
で検索するとhtml内に2箇所あります。
まず1箇所目がtopページなので、この直下に

<span class="grid-datetime">
最終更新&nbsp;<span class="month<%topentry_modified_month>"></span> <%topentry_modified_day>, <%topentry_modified_year>
</span>

を追加。直前にある </time> と頭の位置(文頭)を揃える必要はありませんので、</time>の右横でEnterキーを押したらすぐにそのまま上記内容をペーストしてください。あるいはEnterせず</time>の右にペーストしてもOKです。
(これはインデントの際に全角スペース押下するミスをする方が多いためです, 理解できている場合には従う必要はありません)

注) ソース中、最終更新の後ろの &nbsp; のアンパサンド(アンド)記号は変換を防ぐため全角で入力しています。必ず半角に変更してください。

既存の更新日は文頭に時計のアイコンが付きます。これと同じアイコンにしてしまうと閲覧者が混乱しますので、異なるアイコンが良いだろうと思いますが、テンプレートのバージョンが古く、同じようにfont awesome(アイコン表示のためのスタイルシート)も古いので、適切なものを見つけられませんでした。なので「最終更新」としておきます。任意で変更してください。

注) 「更新日」と「最終更新日」は必ずしも横に並ぶとは限りません。ブラウズ幅によっては最終更新日の記載が更新日の下に移動します。

----- 個別記事
2つ目の</time>の方は

<time class="entry-header-content-box" id="entry-datetime" datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00">
<i class="fa fa-clock-o"></i><span id="entry-day"><%topentry_year>-<%topentry_month>-<%topentry_day></span>
</time>

という内容になっていますので、これを

<div class="entry-header-content-box" id="entry-datetime">
<i class="fa fa-clock-o"></i>
<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00">
<span class="entry-day"><%topentry_year>-<%topentry_month>-<%topentry_day></span>
</time>
<div>
<span class="entry-day">最終更新&nbsp;<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></span>
</div>
</div>

同じくアンパサンドの変更をお忘れなく。
続いてスタイルシートを1箇所のみ修正します。

#entry-day
で検索すると2箇所ありますので、2つとも
.entry-day

に変更。
この個別記事についてもアイコンが無い以上別枠で記載するのが難しいかな、と思いますので、既存の時計アイコンの横、そして既存の更新日の下に記載する形を取っています。

-----
以上です。一度お試しください。
* テンプレートを最新にする場合はまた少し内容が変わりますのでその旨お知らせください。

-
2021/05/24 (Mon) 20:50

管理人のみ閲覧できます

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

-
2021/05/25 (Tue) 02:46

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/05/25 (Tue) 16:35

To ②最終更新日を表示させたい件 内緒さん

こんにちは。

まず確認なんですが、「CSSを使ったテーブルの表示」というのは実際はtableではなくflexの間違いではないかな、と思います。
tableである、という場合には私の方でサンプルを見つけられていませんので、実際の様子が見られるページのアドレスをお知らせください。

私が確認した内容(最新記事内の各商品のカード型ダウンロードリンク)のことだと仮定して、余白が大きくなる原因は p要素が用いられているため です。
具体的にはタイトルの部位とダウンロードリンクの部位ですね。

htmlのp要素というのはもともとがこういった特徴(上下にmarginを取る)という仕様になっています。以前のバージョンでは私の方で意図的にこのp要素に対し「上下の余白を無くす」というリセット処理をしていましたが、最近はhtmlの知識の豊富・仕様に厳格なユーザーさんが増えてきて、そうなると当然「p要素を利用したら上下marginができるもの」として扱いますので、最近のバージョンではp要素のリセットを取り除いています。

そのため内緒さんがボックス内で利用したp要素の上下にも余白がついている、という結果です。
さらに内緒さんの内容の場合は display: flex でのレイアウトで、flexというのは上下のmarginが相殺されないという特殊な仕様なので、p要素が並んだとき(兄弟関係にあるとき)に通常の2倍の余白が空いてしまいます。
* ちょっとこのあたり難しいと思いますので、意味が不明瞭であればスルーで構いません。

------ 対処法
.nfx-amkr-box p {
margin: 0 !important;
}

上記内容をスタイルシート末尾に追加。
ただしボックスのクラス名が
nfx-amkr-box
であることが条件なので、別の名称の場合は別途記す必要が生じます。
または、内緒さんが「今後も自身の文章にp要素は用いない」 or 「p要素利用時の上下余白は不要」
という運営をされるのであれば、上記追加内容は無視して頂いて
/* back to default */
で検索し、この文言のすぐ下にある

#inner-contents p:not(.relate-title) {
margin: 1.9em 0;
}

のルールセットを削除してください。「追加」「削除」のいずれかを選択してくださいね。
その処理が済んだことを確認できましたら本件(最終更新日)の案内に入りたいと思います。よろしくお願いします。

----- ついで
「もくじ」の部位のhtmlが構文エラーなので、かろうじて表示できて機能もしていますが修正されたほうが良いと思います。

<div onclick="obj=document.getElementById('もくじ').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">
<div style="width:140px;">
<div style="background:#A9A9A9; border:1px solid #A9A9A9; padding-left:10px; font-size:1.16em; font-weight: bold; color: #fff;">
<i class="far fa-folder-open"></i> もくじ
</div>
</div>
</a>
</div>
<div id="もくじ" style="display:none;clear:both;">
<div style="border:1px solid #A9A9A9; padding:10px; font-size:1em;">
<i class="far fa-caret-square-right"></i><a href="#移動先id名">内容</a><br />
</div>
</div>

修正するとこうですね。
* font要素は廃止されていますので書き直しています。

で、赤字の部位がアイコンなんですが、font awesome側がこれらアイコンのクラス名を変更してしまったので、古いクラス名では表示が行われないんです。こればっかりはどうしようもないので、今後はなるべくfont awesomeを使わない、というのをおすすめしたい ^^;
アイコン不要、ということであれば過去の内容は放置で問題ない(表示が行われないだけ)ので、書き直すよりは良いかな、と思います。

-
2021/05/25 (Tue) 18:19

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/05/25 (Tue) 21:36

To ③最終更新日を表示させたい件 内緒さん

> 1.個別記事のタイトル下にある〜省略〜投稿日時とカテゴリーだけを左詰めで表示させたい〜

「管理人プロフィール画像」「コメント数表記」の2点が不要、という意味で合ってますでしょうか。
id="entry-author"
を目印にして、以下のスクショを参照しながら該当部位を削除してください。

https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_05_25.png

-----
> 2.ページ下部の汎用ページ送りが左側になっているのを真ん中にしたい。〜

#pager {
で検索するとスタイルシート内に1箇所ありますので、このルールセット内
font-size: 11px;
の直下に
text-align: center;
を追加(インデントする場合は全角スペースを利用しないよう注意)

-----
> ナビゲーションバーにある「お問い合わせ」をクリックしてもメールフォームが開かなくなってしまいました〜

この内容はテンプレートにデフォルトで導入しているわけではないので、これに係るhtml内容がありません。恐らく以下の記事を参照して追加導入されたはずなので、同じ手順で再導入を行ってください。「htmlの追加」の章が該当です(リンク部位の変更とCSSの追加は済ませてあるようです)

参考記事: ナビゲーションにメールフォームを追加する方法
https://vanillaice000.blog.fc2.com/blog-entry-537.html

----- 「最終更新日」追加
</time>
で検索し、2箇所あるうち1箇所目の直下に下記内容を追加(注意点は先日お伝えした内容と同じです, 特にアンパサンドの書き換えをお忘れなく, 赤くしておきます)

<div class="grid-datetime">
<i class="fas fa-history"></i><span class="month<%topentry_modified_month>"></span>nbsp;<%topentry_modified_day>,nbsp;<%topentry_modified_year>
</div>

赤字部位(アンパサンド以外)がアイコンです。このバージョンではhistoryアイコンがありますのでいれておきますが、ストロークが太めであまり格好は良くないので、「最終更新」の文字に書き換えても良いと思います。目視確認をし、どちらにするかご自身で選択してください。アイコンを用いた場合はどのブラウズサイズでも常に横に並ぶかと思います(これは文字数の関係でたまたまそうなるだけです)

ここまでがtopです。続いて個別記事。
先程お伝えしたようにこのバージョンではhistoryアイコンが利用可能ですから、別枠で掲載することができます。

【① 別にする場合】

2つ目の</time>を目印にこの要素の内容は以下の通りなので


<time class="entry-header-content-box" id="entry-datetime" datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00">
<i class="far fa-clock"></i><span id="entry-day"><%topentry_year>-<%topentry_month>-<%topentry_day></span>
</time>

この要素をドラッグ選択し、以下の内容に差し替え。

<time class="entry-header-content-box entry-datetime" datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00">
<i class="far fa-clock"></i><span class="entry-day"><%topentry_year>-<%topentry_month>-<%topentry_day></span>
</time>
<div class="entry-header-content-box entry-datetime">
<i class="fas fa-history"></i><span class="entry-day"><%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></span>
</div>

続いて
#entry-datetime i
で検索すると1箇所ありますので、これを
.entry-datetime i
に変更。続いて
#entry-day
も1箇所ありますので、これを
.entry-day
に変更ここまでの作業で以下のような表示になります(html - 修正1, スタイルシート - 修正2)

https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/20210525204331bab.png


【②同じ枠に掲載する場合】

さきほどの<time>要素を以下の内容に差し替え。

<div class="entry-header-content-box" id="entry-datetime">
<i class="far fa-clock"></i>
<span id="entry-day">
<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>-<%topentry_month>-<%topentry_day></time>
<span>最終更新nbsp;<%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></span>
</span>
</div>

続いて
.entry-header-content-box {
で検索するとスタイルシート内に2箇所ありますので、1箇所目のルールセット内にある
width: calc(100% / 4);
の一行を削除。
続いて以下の内容をスタイルシート末尾に追加

#entry-day time,
#entry-day span {
display: inline-block;
margin-right: 8px;
}

この作業で以下のようになります(html - 修正1, スタイルシート - 修正2)

https://blog-imgs-148.fc2.com/v/a/n/vanillaice000/sc_2021_05_25_3.png

「投稿日」と「最終更新日」を最初から縦並びにしておきたい場合は、追加する #entry-day time, #entry-day span の display: inline-block; を
display: block;
に変更してください。

-----
別枠にするか同じ枠にするかで作業内容が全く違いますので、いずれかをしっかり選択してから作業に移ってくださいね。
よろしくお願いします。

* 伝え忘れましたが、「最終更新日」は更新が無くとも表示される仕様です。その場合は投稿日と同じ日付が表示されます。

-
2021/05/26 (Wed) 14:44

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/05/27 (Thu) 22:51

To 最終更新日を表示させたい件 内緒さん(完了のご報告)

こんばんは。
上手く行ったようで安心しました。

注) topの最終更新のアイコンが本テンプレートの「トラックバック」と同じなので記憶に留めておいてくださいね。今後トラックバックを利用された際に同じものが表示されてしまいます。
ただもうトラックバック自体廃れているのでFC2から機能が無くなる気もします(笑)

励みになるお言葉もありがとうございます。お疲れ様でした :)

-
2022/05/15 (Sun) 16:17

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/05/16 (Mon) 20:10

To Out-of-styleの件 内緒さん

こんばんは ('0')/

> FC2カウンター〜

本件については本記事の「スクロールアンカーについて」の章をご覧いただき、対処をお願いします。各テンプレート専用記事で Ctrl + F キー による文字列検索を利用することで迅速に解決できることも少なくありませんので、是非ご活用ください。
(今回の場合は「カウンター」がキーワードです)

> リンクのカラーのことなのですが〜

まず、rag ではなく rgb なので誤記載のないようご注意くださいね。
rgb(120,120,120)
の記載を確認できません(念の為誤記載の rag(120,120,120) も確認しました) ので、これはたぶん rgb(128,128,128) の勘違いかな?と思うんですが、

【トップページタイトルのリンク色を変更】

.grid-title a {
color: カラーコード;
}

をスタイルシート最終に追加。

【個別記事タイトルリンク色変更】

#entry-title a {
color: カラーコード;
}

をスタイルシート最終に追加

です。一度お試しください。
励みになるお言葉もありがとうございます :)

----- 別件

OGP設定をopt in(ON, 有効化) して頂くことで個別記事下のページ送りに前後ページのサムネイル画像が表示されるようになりますので、無効にする何らかの特殊な理由が無い限りは有効化をおすすめしています。本記事内「メタタグの設定 > OGP設定「有効にする」」の章をご一読ください。

-
2022/05/16 (Mon) 21:44

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/05/29 (Sun) 21:57

To ぽんずさん(完了のご報告)

お返事大変遅くなりごめんなさい。
今更ですが、修正お疲れ様でした :)

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