Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

Out-of-styleテンプレート


名称 Out-of-style
カラム数 2
プラグイン対応 ○ (右サイドメニュー)
レスポンシブ対応
サイドメニュー デフォルト 右
記事幅 可変 最大810px
サイドバー幅 固定 320px
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大(Intense Images)
見出しデザイン
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 全体幅調整, カラム入れ替え etc.


valid-html5.png


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


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



TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・トップページは全文表示タイプ
個別記事の構造化マークアップ(schema.org)にパンくずリストを追加しましたNEW
個別記事のカテゴリ移動ページ送り(ブラウザ左右)の仕様を変更しました
・サイドメニュースクロールアンカー
・個別記事ページ送りサムネイル


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・トップページの表示タイプ変更・レイアウト変更(要約表示から全文表示へ変更, カラム数変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。


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



構造化マークアップにパンくずリスト追加

VeryMerryテンプレート から構造化マークアップを導入しています。
本作では パンくずリスト も追加しました。
トップページは除外していますが、その他ページでブログタイトル下に出るのがソレです。
その他の部位については VeryMerry のページをご参照ください。



全体幅調整の仕方

デフォルトは全体像の最大横幅を 1300px に設定しています。
1300
で検索して頂きますと、CSSソース内に 3箇所 ありますので、3箇所全てを希望の数値(同数値)に変更してください。
(メインコンテンツ横幅が600pxを下回った際にシングルレイアウトに切り替わるよう調整してあります)



ナビゲーション

● ナビゲーション内リンクについて

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

navi breakpoint

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

(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が苦手というかアホ解釈 (´・ω・`)
それも踏まえて…。とりま今回まではこのままで。すみません。



左右カラム入れ替えの仕方

#main-container

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

flex-direction: row-reverse;

続きまして検索。

#primary

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

margin-right: 50px;

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



個別記事 カテゴリ移動ページ送り

これまでは下へ少しスクロールしたらフェイドイン、という動作にしていましたが、本作からは逆向き(上方向)にスクロールした時に表示されるように変更しました。
スマホで常に表示しておくと邪魔かなぁ、というのと、若干ですがページtop/ middle/ bottomのボタンと被っていましたので、ミスタップが発生することもありました。
IEはscroll functionに誤動作がありますので、IE専用ハックだとか専用フォールバックだとか、そういうのもういい加減やめようと思って (´・ω・`)
キリが無いんですよねぇ。IEに構ってると (´・ω・`)
ってゆーかタヒねばいいのに ←
というわけでIE11ではチラチラ出たり消えたりで嫌な感じですが、このまま行きます(すみません)



ドミナントカラー


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

例) 51,51,51


rgb(21,21,21) ナビゲーション背景色, SNSアイコン背景色 など
rgb(101,69,31) 基本リンク色 など
rgb(211,196,166) style/ Admin のテキスト最初の一文字の色



管理人コメントと訪問者コメントを分ける方

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




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

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

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

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

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


サンプル



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



ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。





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

Comments 34

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 |   

Leave a reply

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