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 13

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 |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
2017.8.8 本日より10日ほど留守にしますのでお返事遅れます。すみません