vanillaice (Akira)

vanillaice (Akira)

Stoicテンプレート



名称 StoicBlue StoicBrown
カラム数 1 2
プラグイン対応 ○(サイドメニュー集約型) ○ 同左
レスポンシブ対応
サイドバー
記事幅 可変 最大1000px (内寸 940px) 可変 最大980px (内寸 920px)
サイドバー幅 各プラグイン300px (内寸 260px) 同左
新着サムネイル表示 あり
鍵つきブログの方は表示されませんので削除をお願いします

Google Feed API廃止に伴い削除致しました
同左
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
同左
その他 FC2検索バー非表示推奨 同左
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
同左
Windows/ Mac
Chrome Firefox Safari Opera Edge IE11 IE10以下
サポート外
推奨カスタム 色調変更 etc.


valid-html5.png


更新履歴 2017.1.25


・ SNSシェアリンクのUTF-8エンコード

参考記事
SNSシェアリンクのエンコード


--------- 以下本文



更新履歴 2017.1.13


・RSS新着サムネイルを削除しました

関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更


更新履歴 2016.2.26


不要コード削除

IE8以下等のレガシーブラウザご使用中の方へアップグレードを促すの啓蒙コードが記されていました
(私が個人的に使っている自作ものです)
いつも公式へはコードを外して申請しておりますが 消し忘れました ( ̄∀ ̄;)
これのことです ↓

sample

申し訳ございませんemoji

--------- 以下本文



グレートストイックが!!! 。゚(´。∩ω∩`。)゚。
(How to train your dragon) ← わかる方いますか


すといっく ぶるー/ ぶらうん ( ゚Д゚)ノ
此度は超シンプル 初心者の方向け(たぶん)


samplesample



StoicBlue
Sample トップ
Sample 個別
Sample リスト
DOWNLOAD


StoicBrown
Sample トップ
Sample 個別
Sample リスト
DOWNLOAD

FAQ




仕様
・画像不使用
・トップページ以外は記事を探しやすいサムネイル付きリスト表示
・ヘッダーにアーカイブ検索とカテゴリ検索(共にselectボックス)を設けました
・個別記事タイトルはヘッダーに表示されます


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(全文表示から要約表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ (StoicBrownのみ) ↓
テンプレートのカラム位置変更


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




ドミナントカラー(主題色)について


CSS3グラデーションの控えめな装飾です
今回色味が2つしかありませんので 主題色を書いておきます

● StoicBlue

rgb(26,36,47)
グラデーション濃色
rgb(154,177,199)
グラデーション淡色 (リンク色, ボーダー色, ページ移動ボタン など)

● StoicBrown

rgb(151,145,146)
グラデーション濃色
rgb(218,208,198)
グラデーション淡色 (リンク色, ボーダー色, ページ移動ボタン など)


Ctrl+Fキーで探してもらうわけですが
カスタマイズ時の「コツ」
私は色コードを10進数で書いています

rgb(数字,数字,数字) --- 10進数
#6桁数字 --- 16進数

例) 白色

rgb(255,255,255)
#ffffff

馴染み深いのは16進数だと思います
何故16進数を使うかというと CSS3の推奨であることもひとつの理由ですが

rgba

というのがありますよね
rgb ではなく rgba
後ろに a がいっこくっついてる
これ「不透明度」を指定できるプロパティなのですが
こちらは16進数では書けません
嫌でも10進数使う必要があります

みなさんが色を探す時に 例えば「白」と「白+不透明度」を一発で探すには
rgb(255,255,255)
で探すのではなく 255,255,255 で探してください
不透明度指定付きの同色も全部ヒットします
16進数が混じってるとそういうわけにはいかない
故に10進数
作業効率がちょっと良くなります (´・ω・`)

あと webセーフカラー というのがあってですね
どのブラウザでも問題なく表示ができる厳選色みたいなものですが
こちらは名称をダイレクトに書くことができます
白ならば white 黒ならば black
といった具合
これは混じってます すみません(笑)



ヘッダーを画像に変更される方


Ctrl+Fキー検索

#banner

こちらを目印にして頂きますと
background-image
というのがふたつ書いてあります
この2行を消去

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

上記2行と差し替えてください
緑文字の部分は画像の優先位置合わせです
下記リンク先参照のこと

DaisyGreen


サンプル

woeriath_.jpg




先回のテンプレ承認 時間かかりましたね (´・ω・`)
本当はあまりポンポンと申請したくないのですが
曜日を決めてくれ! って思います(笑)
相変わらず気まぐれ審査 (´・ェ・`)
公式ページで自分のテンプレが上下に並んでると気が萎える((((笑)

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


みなさんいつもありがとうございます!
関連記事

Comments 33

There are no comments yet.
ひろし  
正解は

ヒックとドラゴン(笑)
息子坊主と映画行きました^^
コメントできて良かったw

2016/02/11 (Thu) 14:33 | EDIT | REPLY |   
Akira  
To ひろしさん

ピロリン。おはおー (´・ω・`)

ピロリンで合ってますよね? ←
前訪問者さんに勘違いですっごい気安くリコメしちゃったよ。
ピロリンったらっ! みたいな(笑)
大体ひろしって何なのよ誰なのよ(笑)

まさかあんな展開が待っているとは。
想定外すぎて号泣 (/_;)

2016/02/11 (Thu) 17:49 | EDIT | REPLY |   
tak  
イタリック

ご無沙汰しております。

指定範囲のテキストをイタリックにしたいのですが、
普通に<i>~</i>ではイタリックになりません。
どうすればよろしいでしょうか?
ご教授をお願いいたしますm(_ _)m

2016/02/12 (Fri) 17:00 | EDIT | REPLY |   
Akira  
To takさん

えー マジですか
ちょっと確認しますね。お待ち下さい。

2016/02/13 (Sat) 14:47 | EDIT | REPLY |   
Akira  
To takさん

今確認しました。
スタイルシート(CSS)の中に

i {
font-style: italic;
}

が無いと斜体にならないのですが、該当のテンプレートには入ってます。
で、もしかして「日本語」を斜体にしたい、ということでしょうか。
BeHappyテンプレの日本語フォント指定は「meiryo」なのですが、このフォントに斜体はありませんです (´・ω・`)
英字フォントは斜体がデフォルトで存在するものがほとんどですが、日本語フォントはそのフォントの実装状況によります。
(開発元が作成しているかどうかによる)
meiyoフォントの斜体というのは無いんです。

斜体を優先したいということであれば、meiryoフォントを避けて他のフォントに変更する必要があります。
おすすめは「游ゴシック(ゆう ごしっく)」ですが、Windowsだと若干かすれ気味 (´・ω・`)
Macだととっても綺麗で見易いです。
こちらは斜体が用意されています。
変更されるのであればCtrl+Fキー検索

body

の中の

font-family: 省略;

上記を下記に修正。

font-family: '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo';

これまで書かれました文章も全て游ゴシックに置き換わりますので、その点にも留意してお決めくださいね。

* こちらの記事末尾に追記しておきました ↓ *

http://vanillaice000.blog.fc2.com/blog-entry-310.html#object4

2016/02/13 (Sat) 14:58 | EDIT | REPLY |   
tak  
游ゴシック

ありがとうございます。

以下のように書き換えてみました。

body { /* 注)基本フォント関連 */
font-size: 15px;
color: rgb(51,51,51);
line-height: 1.7;
font-family: '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo';
}

これで<i>~</i>で範囲を指定して(日本語)いますが、斜字体になりませんです。

2016/02/13 (Sat) 23:59 | EDIT | REPLY |   
Akira  
To takさん

お手数おかけしております。

斜体にしたい箇所はどこなんでしょうか。
トップページであればどうしようもありません。
何故ならトップページの「要約記事」形式は、個別記事内容から一切のhtmlを省いた形での表示になります。
これはFC2の仕様です。

改行が削除され、htmlは取り除かれ、最大200文字

これが要約表示
<%topentry_description>
の特徴です。
ですから部分的な文字色や大きさなどの変更もできません。
総括的な変更ならば可能です。
つまり「全ての文章を斜体」という形。

この要約表示を仮に通常の表示(書いた記事内容をそのまま踏襲)に変更されますと、
トップページの記事の揃いは崩壊します。
それが故の「要約」です。
要約表示全て斜体で構わない、という場合はCSSソース末尾に以下を追加

.element-description {
font-style: italic;
}

よろしくご理解のほどお願い致します (*_ _)

2016/02/14 (Sun) 01:22 | EDIT | REPLY |   
tak  
お世話になります。

イタリックにしたい部分は
http://sgourmet.blog94.fc2.com/blog-entry-2361.html
の冒頭部分(私の記憶が~初訪問となった。)です。
(トップページの要約部ではないです。)

で、スマホのサファリとスマホのクロームではイタリックに出来ましたが、
PCのクロームではイタリックになっていないのです。

履歴キャッシュクリアもしましたが。。。

これはPCのグーグルクロームに問題があるのでしょうか?
PCはwindouws 7です。

何度もすいません。お手数ですが、よろしくお願いいたします。m(_ _)m

2016/02/14 (Sun) 09:29 | EDIT | REPLY |   
sawa@Akiraジャーマネ  
takさんへ

takさん、初めまして ^^

私のPCのGoogleChromeからは「私の記憶が確かならば、」~「20年越しの今回が初訪問となった。」までの文字列はキチンとイタリック体で表示されておりますよ ^^

Windows10
GoogleChrome バージョン 48.0.2564.109 m

の環境です。

* スクショの追記です

https://gyazo.com/c8a8f6bd64cc5ccaa2e9e8c6b76911bd

2016/02/14 (Sun) 10:23 | EDIT | REPLY |   
Akira  
To takさんTo sawa@Akiraジャーマネさん

ジャーマネありがとうー!
そういう情報とっても助かる!

ごめんなさい。
先にOS確認すれば良かった。
遊ゴシックってWindows8からでした(笑)
7なら入ってないからmeiryoのままだね ( ̄∀ ̄;)

斜体ができるフォントっていうと他に何があるかなー (´・ω・`)
お馴染みのmspゴシックぐらいしか思い浮かばない。
ちょっとアレでソレなフォントですよね。見た目が ( ̄∀ ̄;)

出先でiPhoneなのでまた後ほど参ります!

2016/02/14 (Sun) 12:44 | EDIT | REPLY |   
Akira  
To takさん

もうこんな感じにするしかー (´・ω・`)
スクショ

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/ar29ry_zpsjqy2urwq.jpg

使用フォント
font-family: 'ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', 'MS Pゴシック', serif;

説明
まず「斜体にできる文字」が前提
Macではヒラギノ明朝 Pro W6
WindowsではMS Pゴシック

ヒラギノ〜はWindowsにはインストールされていません。
そしてMS〜はMacにインストールされていません。
ですからそれぞれ異なるフォントですが、指定が必要。
Macの指定が先、Windowsが後、の順序。
Macは英文指定も必要なのでふたつ入ってます。

スクショご覧頂いて、文章の横幅が随分違うと思います。
これはWindowsのMS〜がプロポーショナルフォントだからです。
プロポーショナルフォント = 等幅でないフォント

Windowsの文字がきちゃないのはもう仕方ないです。
Windowsのフォントレンダラ(フォントの描画)にはアンチエイリアスの機能がありません。

実装の仕方
Ctrl+Fキー検索

i {
font-style: italic;
}

ここにフォント指定追加で以下の通り。

i {
font-style: italic;
font-family: 'ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', 'MS Pゴシック', serif;
}

日本語(和文・和字)には根本的に斜体という概念がありません。
ですから斜体が用意されているフォントというとかなり限られてきますね (´・ω・`)
用途・用法についても和文では斜体の定義がありません。
(英文にはitalicとobliqueそれぞれ用途があります)
ということで、判読性だけお考え頂ければ良いのかな と。
一度お試しくださいませ。

----- ここから余談

気になったこと。
おせっかい炸裂(笑)

Windows10の無償アップグレードは期限付きなのですが、アップされなくて良いのかな、と思って(笑)
何らかのお考えがあってWindows7維持を選択されたのであれば余計なお世話ですので捨ておいてください (・ω・)ゞ

2016/02/14 (Sun) 14:14 | EDIT | REPLY |   
tak  
OS10

Akiraさま
いつ時もお世話になり大変恐縮です。
OSが原因だったのですね。考えがいたりませんで大変失礼いたしました。
7に拘っているのは使用しているソフトが10になった場合の動作保証がイマイチ不安な事にあります。
時期を見てアップグレード等も考えます。
ありがとうございました。ご教授を賜り感謝いたします。

2016/02/15 (Mon) 22:14 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/02/16 (Tue) 09:37 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/02/16 (Tue) 12:10 | EDIT | REPLY |   
Akira  
To takさん

OSのせいというか、事前に確認を怠った私のせいというか(笑)
二度・三度のお手間になってしまいました。ごめんなさい (*_ _)

後はどうされるかご検討くださいませ。
お疲れ様でした

* ジャーマネもご協力ありがとうございます。
今後もよろしくお願いします(笑)
いや、ホント助かります。
ご意見や実証サンプルは多いほうがありがたいです

2016/02/16 (Tue) 12:36 | EDIT | REPLY |   
Akira  
To Noir スマホ版への切り替えの件 内緒さん

ご迷惑おかけしております (*_ _)

削除対象は見つかったということですので、その部分は削除して頂いて問題ないです。
誘導バナーは出るけれども、切り替わらないということですよね。
うーん。何故だ (´・ω・`)

バナータップでローディングしている様子はありますでしょうか。
それともタップ自体が無反応な感じでしょうか。
それを教えて頂きたいのと、ご利用のデバイス名を併せてお知らせください。
お手数おかけします。

(私の環境 iPhone5 iOS7/ iPhone6 iOS9 では問題なく遷移しました)

あともう一点ご確認ください。
パソコンからトップページを開いて頂きますと、ブラウザアドレスバーにブログの正規URLが表示されているかと思います。
私の場合ならば
http://vanillaice000.blog.fc2.com/
このアドレス末尾に
?sp
を付け足して以下の通り
http://vanillaice000.blog.fc2.com/?sp
これでローディングしてみてください。
スマホ版が表示されなければ、スマホ版の方に問題があるかもしれません(設定含む)。
(私はスマホ版非表示ですのでサンプルになりません(笑))

2016/02/16 (Tue) 12:40 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/02/16 (Tue) 14:04 | EDIT | REPLY |   
Akira  
To 新規テンプレの件 内緒さん

ありがとうございます
こちらまだ全然調整中です(笑)
まだ大きな調整ひとつ抱えてるけど進んでない。
なかなかまとまった時間が取れず... ( ̄∀ ̄;)
3月ぐらいになりますかね。たぶん (´・ω・`)

2016/02/16 (Tue) 14:09 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/02/16 (Tue) 18:58 | EDIT | REPLY |   
Akira  
To モバイル版バナーの件 内緒さん

そうでしたか。良かったです

> モバイル版誘導バナーの縮小について

これはFC2が用意しているものですので、もしかしたらダメかもしれません。
ちょっとわかんない(笑)
非表示は良くて整形はダメなわけ???
ってのが他にもあるんですよ。意味不明な掟が!(笑)
モバイルボタンなんで付けなかったんですかね?私 (´・ω・`)
いつもつけてるのに ( ̄∀ ̄;)

というわけで追加しました。
お手数ですが再DLして頂くか、カスタマイズされているようでしたら以下の手順でお願いします。
Ctrl+Fキー検索

<li class="header_li"><a class="navButton" href="<%url>archives.html">Title list</a>

上記を含んで同じものが3つ縦に並んでいるはずですので、その3つの並びのどこかに以下を追加

<li class="header_li"><a class="navButton" href="<%url>?sp">Mobile</a>

お好きなところに入れて貰えばOKです。
修正版では RSS へのリンクの「下」に入れてあります。
お手数おかけします。
よろしくお願いします (*_ _)

2016/02/16 (Tue) 23:41 | EDIT | REPLY |   
あゆ  

Akira様

おはようございます。
大変お手数お掛け致しました。
とても綺麗な仕上がりに大満足です。

完璧。

この一言に尽きます。
理想通りのテンプレートでした。

カスタムする必要無し、素晴らしい世界観ですね♡

有難う御座いました( *´艸`)

2016/02/17 (Wed) 08:39 | EDIT | REPLY |   
Akira  
To あゆさん

いえいえ。こちらこそ。
貴重なお時間頂きました。
ありがとうございます

2016/02/18 (Thu) 00:35 | EDIT | REPLY |   
けいこ  
テンプレートお借りしました~

こんにちは、はじめまして。
素敵なテンプレートばかりで目移りしまくりましたが、こちらのstoicをお借りしました。

ブルーの方のシンプルさに引かれたのですが、色はブラウンが良かったので、色を入れ替えてしまいました(^^;

実は最初、パライソを使わせてもらったんですが、カルーセルはずしたりあれこれしてたら、なんだかえらいことになってしまい、初心者は下手に手を出してはいかん、と反省し、シンプルな、そのままの形で使わせてもらえるのにしました!

憧れのレスポンシブwebデザインなのですが、
私のブログは文章中心なので、スマホで読んでくださってる方が多いようですので、スマホ専用テンプレートも残しておくべきなような気がして…

悩みは尽きません、またお知恵をお借りするかもしれません。
そのときはどうぞよろしくお願いいたします。

お邪魔しました!

2016/03/07 (Mon) 00:09 | EDIT | REPLY |   
Akira  
To けいこさん

ありがとうございます

でね カスタマイズして頂きましたのに、大変申し訳ないのですけれど。
こちらの記事をお読みください ↓

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

けいこさんの場合には「個別記事のページ送り」の左右アイコンですね。
ユニコード表記が機能せずに文字列として表示されてしまっています (/_;)
せっかく色の変更をされてますので、FC2の修正が入りましたらバックスラッシュを「追加」する形が望ましいと思います。
ですから現在のソース内容はそのまま保存しておいてください。
でもって、申し訳ありませんがちょこちょことこちらのブログ覗いてください ( ̄∀ ̄;)
お声かけ頂きましたら修正方法をお伝えします。
もー ホント申し訳ない

2016/03/07 (Mon) 08:45 | EDIT | REPLY |   
Akira  
To けいこさん

ごめんなさいね。
自分の要件だけ慌ててお伝えしてしまいました ( ̄∀ ̄;)

レスポンシブデザインは一つのアプローチですので、これが大正解!というものでもありません。
個人の好みの問題もあります(笑)
個人的にはFC2のスマホ版はあまり出来がよろしくないな、と思うところがあり (´・ω・`)
ページ遷移が多すぎる気がします。
コメントするのに専用ページへ。
コメント読むのに専用ページへ。
これとってもナンセンスだと思うんですけど(笑)
同じページで全部できんのかーい! 的な (・ω・)
あまり直感的ではないんですよね。
なのでどうも制作意欲が沸かず、ひとつ作っただけでスマホ版は放置(笑)
広告もちょっと多すぎだろう... ( ̄∀ ̄;)

2016/03/07 (Mon) 08:57 | EDIT | REPLY |   
てんてん  
何度もすみません。

こっちに書いてありました!
すみませんでした!
これからやってみます!あっちのコメントはパスワードを入れ忘れたので消せなくてすみません><
画像を入れたらどうなるのか不安でしたがサンプルを見てかっこいい!と思いました!
すごく考えて造られているんだな〜ってもう、もう、ひたすらの感動ですっ!
ありがとうございました!

2016/03/14 (Mon) 21:34 | EDIT | REPLY |   
Akira  
To てんてんさん

どうぞお気になさらず(笑)
こちらこそありがとうございます

2016/03/16 (Wed) 10:48 | EDIT | REPLY |   
Masami  
No title

Akiraさん、初めまして。

StoicBrown、シンプルかつ上品でとっても素敵です!!

早速気に入って使わせていただいているのですが、
ヘッダーにあるアーカイブ検索とカテゴリ検索をできれば無くしたいのですが、可能でしょうか?

また、記事タイトルの下のカテゴリーとコメント数表記を記事の下に持って行きたいのですが、可能でしょうか?

大変恐縮ですが、修正方法を教えて下さると幸いです。
よろしくお願いします!

2016/03/19 (Sat) 03:27 | EDIT | REPLY |   
Akira  
To Masamiさん

ありがとうございます

① アーカイブ・カテゴリ検索の削除
② 記事タイトル下インフォを記事下へ移動

上記2点手順ご説明します

------- ①
Ctrl+Fキー検索

<div id="select-wrapper">

こちらを目印に</header>のすぐ上の</div>までを削除
スクリーンショットを見ながらどうぞ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/aoirffwa_zpssp9qegyg.jpg

------- ②
Ctrl+Fキー検索

こちらは以下のコメント欄が同じ要件ですのでご参照ください。

http://vanillaice000.blog.fc2.com/blog-entry-323.html#comment1525


よろしくお願いします

2016/03/19 (Sat) 12:05 | EDIT | REPLY |   
Masami  

Akiraさん、お忙しい中、早速の返信をありがとうございました!!

とても分かりやすい説明で、
PCにはかなり疎い私ですが、何とか無事に修正ができました!
ありがとうございました!

もう一つだけ、
トップページのタイトルを左側に置きたいのですが、
修正方法を教えていただけますか?

何度も恐縮ですが、どうぞよろしくお願いします!

2016/03/19 (Sat) 17:05 | EDIT | REPLY |   
Akira  
To Masamiさん

既出のご質問の件修正完了とのことで安心しました

> トップページタイトルを左寄せ

タイトルは「各記事のタイトル」でお間違いないでしょうか。
この該当箇所Ctrl+Fキー検索

.element-title

3箇所出てきますが、一番最初のものが該当です。
その項目の

text-align: center;

という一行を削除すると左寄せになります。
よろしくお願いします ( ゚Д゚)ノ

2016/03/20 (Sun) 18:03 | EDIT | REPLY |   
Masami  

Akiraさん、こちらも修正できました!!

本当に何度もご丁寧にありがとうございました!
Akiraさんのテンプレート、大切に使わせていただきますね(^^)/

2016/03/22 (Tue) 01:08 | EDIT | REPLY |   
Akira  
To Masamiさん

いえいえ。こちらこそありがとうございます。
修正作業お疲れ様でした

2016/03/22 (Tue) 15:48 | EDIT | REPLY |   

Leave a reply

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