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

vanillaice (Akira)

vanillaice (Akira)

Out-of-styleテンプレート
PCアイコン TBアイコン SPアイコン

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

最終更新 2018.1.24

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

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

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

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

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

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

TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



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

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

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

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

ナビゲーション
Important thing to be careful when adding links to navigation

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

navi breakpoint

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

(max-width: 850px)

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

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

● li要素を追加する場合
管理画面上、つまりブラウザ上でカスタマイズをされます方は、li要素追加時に 前後のli要素と文頭の位置を合わせようとしない ようご注意ください。
ブラウザ上で tabキーspaceキー を利用してソースの見た目を整形してしまうと、その空白は描画後の見た目に影響します。
li要素の文頭揃えは行わない を念頭に作業をお願いします。
html専用エディターを利用する方はエディターの仕様に則ってください。

間違い例)

<ul>
    <li><a href="遷移先アドレス">テキスト1</a>
    <li><a href="遷移先アドレス">追加1</a>
    <li><a href="遷移先アドレス">追加2</a>
    <li><a href="遷移先アドレス">テキスト2</a>
</ul>

正しい例)

<ul>
    <li><a href="遷移先アドレス">テキスト1</a>
<li><a href="遷移先アドレス">追加1</a>
<li><a href="遷移先アドレス">追加2</a>
    <li><a href="遷移先アドレス">テキスト2</a>
</ul>

横並びにinline-blockを利用する方法は今後切り替えるかもしれません。
IE11がinline-blockが苦手というかアホ解釈 (´・ω・`)
それも踏まえて…。とりま今回まではこのままで。すみません。

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

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

flex-direction: row-reverse;

続きまして検索。

#primary

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

margin-right: 50px;

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

ドミナントカラー
Dominant colors

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

rgb(21,21,21) ナビゲーション背景色, SNSアイコン背景色 など
rgb(101,69,31) 基本リンク色 など
rgb(211,196,166) style/ Admin のテキスト最初の一文字の色
管理人コメントと訪問者コメントを分ける方
The way to identify admin comments

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

サンプル

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

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

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

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

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

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

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

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

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

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

CSSソース内に一部変な指定がありますが Microsoftブラウザ(IE11, Edge)用のhackですので消去しないようお願いします。
こういうのもホントやめたい (´・ω・`)
でもEdgeを無視するわけにいかないので超嫌々入れてます。

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

You may also like

Comments 71

There are no comments yet.

ぼっちん  

また驚かされました

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

2017/08/05 (Sat) 20:45 | EDIT | REPLY |   

Akira  

To ぼっちんさん

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

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

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

2017/08/06 (Sun) 01:45 | EDIT | REPLY |   

ぼっちん  

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と入れ替え」でこのまま使わせて頂きます(笑)

2017/08/06 (Sun) 08:39 | EDIT | REPLY |   

Akira  

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) 12:15 | EDIT | REPLY |   

ぼっちん  

To Akiraちゃん

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

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

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

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

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

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

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

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

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

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

2017/08/06 (Sun) 16:09 | EDIT | REPLY |   

Akira  

To ぼっちんさん

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

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

2017/08/07 (Mon) 00:47 | EDIT | REPLY |   

ぼっちん  

To Akiraちゃん

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

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

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

2017/08/07 (Mon) 08:38 | EDIT | REPLY |   

Akira  

To ぼっちんさん

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

2017/08/07 (Mon) 10:52 | EDIT | REPLY |   

ぼっちん  

To Akiraちゃん

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

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



2017/08/07 (Mon) 14:27 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/08/07 (Mon) 22:56 | EDIT | REPLY |   

Akira  

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

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

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

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

2017/08/08 (Tue) 08:13 | EDIT | REPLY |   

きろろ  

お借りしました!

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

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

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

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

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

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

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

2017/08/13 (Sun) 01:41 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/08/13 (Sun) 04:13 | EDIT | REPLY |   

Akira  

To きろろさん

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

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

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

2017/08/18 (Fri) 13:06 | EDIT | REPLY |   

Akira  

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

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

2017/08/18 (Fri) 13:08 | EDIT | REPLY |   

Akira  

To きろろさん

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

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

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

color: white;

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

2017/08/19 (Sat) 12:57 | EDIT | REPLY |   

きろろ  

To Akiraさん

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

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

2017/08/28 (Mon) 00:18 | EDIT | REPLY |   

Akira  

To きろろさん

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

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

2017/08/28 (Mon) 01:40 | EDIT | REPLY |   

きろろ  

To Akiraさん

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

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

2017/08/28 (Mon) 18:34 | EDIT | REPLY |   

Akira  

To きろろさん

こんばんは ( ゚Д゚)ノ

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

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

2017/08/29 (Tue) 00:12 | EDIT | REPLY |   

Akira  

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) 01:08 | EDIT | REPLY |   

きろろ  

To Akiraさん

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

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

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

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

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

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

2017/08/29 (Tue) 02:11 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/08/29 (Tue) 22:02 | EDIT | REPLY |   

Akira  

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ファイルの読み込みで対処したいところですが、恐らくそういったことは規約に抵触すると思います。
広告の仕様に手を加えるのが叶わない以上、こうした方法しか無いでしょうね (´・ω・`)

2017/08/29 (Tue) 23:25 | EDIT | REPLY |   

Akira  

To きろろさん

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

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

2017/08/30 (Wed) 02:49 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/08/30 (Wed) 22:18 | EDIT | REPLY |   

きろろ  

To Akiraさん

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

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

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

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

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

2017/08/31 (Thu) 04:58 | EDIT | REPLY |   

きろろ  

To Akiraさん

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

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

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

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

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

2017/08/31 (Thu) 05:03 | EDIT | REPLY |   

Akira  

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

こんにちは ( ゚Д゚)ノ

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

2017/08/31 (Thu) 15:58 | EDIT | REPLY |   

Akira  

To きろろさん

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

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

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

2017/08/31 (Thu) 16:01 | EDIT | REPLY |   

きろろ  

To Akiraさん

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

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

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

なんですか? こやつは?

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

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

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

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

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

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

2017/09/01 (Fri) 03:53 | EDIT | REPLY |   

Akira  

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/01 (Fri) 15:00 | EDIT | REPLY |   

きろろ  

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
まあ、昨日一晩かけて抹消したので、今はすっきりしていますけど。

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

2017/09/02 (Sat) 00:20 | EDIT | REPLY |   

Akira  

To きろろさん

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

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

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

2017/09/03 (Sun) 02:00 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/09/30 (Sat) 00:38 | EDIT | REPLY |   

Akira  

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

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

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

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

2017/09/30 (Sat) 12:45 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/09/30 (Sat) 21:45 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/10/09 (Mon) 10:14 | EDIT | REPLY |   

Akira  

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/09 (Mon) 16:47 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/10/10 (Tue) 09:04 | EDIT | REPLY |   

Akira  

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) 14:05 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/10/10 (Tue) 17:24 | EDIT | REPLY |   

Akira  

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

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

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

2017/10/10 (Tue) 18:11 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/11/05 (Sun) 17:39 | EDIT | REPLY |   

Akira  

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/05 (Sun) 18:04 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/11/06 (Mon) 16:51 | EDIT | REPLY |   

Akira  

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

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

2017/11/07 (Tue) 01:24 | EDIT | REPLY |   

グリ  

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

Akira様

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

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

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

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

2017/11/18 (Sat) 22:04 | EDIT | REPLY |   

Akira  

To グリさん

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

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

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

2017/11/18 (Sat) 22:09 | EDIT | REPLY |   

グリ  

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とスタイルシート内を検索していますが、どこをどのように編集したら良いのか分かりませんでした。テンプレート作者の方に、このような質問をする事は失礼なのかもしれませんので、謝ります。申し訳ありません。

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

2017/11/18 (Sat) 23:02 | EDIT | REPLY |   

Akira  

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) 18:30 | EDIT | REPLY |   

グリ  

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

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>と、記述し運用すればよろしいでしょうか。

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

2017/11/19 (Sun) 22:20 | EDIT | REPLY |   

Akira  

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/19 (Sun) 23:52 | EDIT | REPLY |   

グリ  

出来ました

Akira様

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

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

2017/11/20 (Mon) 00:13 | EDIT | REPLY |   

masagoyuki  

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

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

2017/11/20 (Mon) 15:25 | EDIT | REPLY |   

Akira  

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

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

2017/11/20 (Mon) 15:58 | EDIT | REPLY |   

Akira  

To masagoyukiさん

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

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

2017/11/20 (Mon) 16:03 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2017/12/13 (Wed) 05:50 | EDIT | REPLY |   

Akira  

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

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

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

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

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

2017/12/13 (Wed) 09:38 | EDIT | REPLY |   

イギリスの西のはしから  

To Akiraさん

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

2017/12/13 (Wed) 15:21 | EDIT | REPLY |   

Akira  

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

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

2017/12/13 (Wed) 21:14 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/02/19 (Mon) 15:45 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

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

ありがとうございます

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

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

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

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

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

2018/02/19 (Mon) 16:49 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/02/19 (Mon) 20:10 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

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) 20:24 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/02/19 (Mon) 21:40 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

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

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

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

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

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

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

2018/02/19 (Mon) 21:59 | EDIT | REPLY |   

PhotoJoy  

ありがとうございます。

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

2018/03/04 (Sun) 07:17 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

To PhotoJoyさん

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

2018/03/04 (Sun) 12:51 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

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

2018/03/05 (Mon) 14:48 | EDIT | REPLY |   
vanillaice (Akira)

Akira  

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

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

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

2018/03/05 (Mon) 17:22 | EDIT | REPLY |   
カスタマイズ Q&A 質問時の注意 テンプレート