Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)



名称 Message
カラム数 2
プラグイン対応 ○(サイドメニュー集約型)
レスポンシブ対応
サイドメニュー 右 --- プラグイン1・2
・下 --- プラグイン3
記事幅 可変 最大970px (内寸 910px)
右サイドメニュー幅 固定 300px (内寸 260px)
新着サムネイル表示 あり
鍵つきブログの方は表示されませんので削除をお願いします

Google Feed API廃止に伴い削除致しました
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
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 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム テーマ色変更


valid-html5.png


更新履歴 2017.1.25


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

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


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



更新履歴 2017.1.13


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

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


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



コーヒーのミルクは混ぜない派のあきらでございます (´・ω・`)



めっせーじ
デコラティブすぎでしょうか 大丈夫でしょうか
10月16日申請


TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・トップページはグリッドレイアウト
・トップページの文字大きさ変更は非推奨です(ごめんなさい)


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


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




プラグインの位置について


プラグインカテゴリ1と2に登録されたものは右のサイドメニューに
3に登録されたものはフッター上にそれぞれ配置されます
今回はスマートフォンでもサイドメニューは折りたたまれません



No image画像変更


記事内の然るべき箇所に画像が存在しない場合に代替として表示するNo image画像
表示箇所はトップページのみ
ソース内該当箇所は

//blog-imgs-93.fc2.com/v/a/n/vanillaice000/messagenoimage.jpg

htmlソース内に1箇所CSSソース内に1箇所あります
最適サイズは横800程度 縦横比不問

デフォルト画像 (縮尺掲載 1000×666 26KB public domain)




画像上の白いオーバーレイとNo imageのテキストは自動で乗ります



ドミナントカラー


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

例) 51,51,51


rgb(127,112,170) 基本リンク色
rgb(51,51,51) 基本文字色
rgb(240,240,240) トップ以外 No image背景色



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


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




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

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

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

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

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


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別しています 同じハンネの方がご訪問されると… ごめんなさい (割りきってお使いくださいね)




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


みなさんいつもありがとうございます ( ゚Д゚)ノ
関連記事

Comments 22

There are no comments yet.
きろろ  
大丈夫です!

>デコラティブすぎでしょうか 大丈夫でしょうか

大丈夫です!
問題ありません!
とても女性らしいデザインでステキだと思います。

ちなみにですね。
Akiraさんのテンプレで要約タイプなんですが、
画像が縦長になると、リサイズ? 自動的に上下が切れますよね?
縦長画像をそのまま表示できるテンプレもあったんですが、
もうやめてしまったんでしょうか?

使うばかりで、制作者の苦労も考えずにすみません(..)
ただ、以前Akiraさんのテンプレでみたことがあったのでw
なんでかなぁ……なんて思ったりしてw

2016/10/17 (Mon) 02:12 | EDIT | REPLY |   
Akira  
To きろろさん

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

> 縦長画像をそのまま表示

要約タイプでサムネイルサイズを全て揃えようと思うと無理です(笑)
元画像の縦横比をそのまま、つまり元画像の縮尺で掲載するのは可能です。
そうなると要約記事のひとつひとつがバラバラのサイズになりますので、メイソンリーレイアウトを採用することになる… かなぁ (´・ω・`)

同じサイズで「縦長」
これは簡単です。
特に苦労することもなにもなく ^^;
ただ、全体レイアウトのバランスが取りにくいのと、一般的なwebの「画像」って「横長」が多いんですよね。
ところが最近はスマホで撮影した写真を掲載される方が多く。
こちらは逆に「縦長」
これは私も思っていたので、縦長画像レイアウト製作予定です。
というかもう半分作った ( ゚Д゚)

2016/10/17 (Mon) 16:29 | EDIT | REPLY |   
sam  
初めまして。

どこにコメントするべきかと思いつつこちらでお許しください。
現在設定中の黒いヘッドの3カラムが素晴らしいですね。
読み込みが早く美しくシンプルで。
スマホからコメントしていますが、スマホサイトでのコメントでありがちなイライラもなくて感動しました。
こちらはシェアのご予定でしょうか?
差し支え無ければ是非お願いします。

2016/10/17 (Mon) 16:40 | EDIT | REPLY |   
きろろ  
あるぇ~

確か、Mochaとか Romantiqueは縦長画像がそのまま表示されていましたよね?

>そうなると要約記事のひとつひとつがバラバラのサイズになりますので、メイソンリーレイアウトを採用することになる… かなぁ (´・ω・`)

Mochaとかそういうことなんですか?

縦長であっても、横長でもあって表示されれば、
要約のサムネイルサイズを揃えるのを気にしなくてもいいのでは?
って、作る側ではないので簡単に言ってますけどね、スミマセン

個人的にはMochaは好きです!
縦長の画像、特に本の感想文を書く時に表紙がどうしても縦長なんです。
上下をカットされると、タイトルもカットされるw
まあ、本記事でわかるからどうでもいいことなんですけどねw

ちなみにですね。
Mochaの要約、サムネイルに表示されるテキストなんですが、もう少し減らしてみたいかな……、とか思ったりしてe-141e-140
記事のテキストが少ないと、ホームの要約で事足りてしまう事情がe-443
3行ほどに調整することは可能でございましょうか?
無理ならいいです! 希望です、あくまでも希望ですのでv-356

2016/10/18 (Tue) 01:38 | EDIT | REPLY |   
Akira  
To きろろさん

Mochaやromantiqueは元サイズそのまま表示のメイソンリーです。
元サイズ表示だとメイソンリーかグリッドにしないと見た目が整わないですね。
人間の一番目につくのは画像のサイズ云々よりも各々のエレメントの隙間なので。
隙間が揃ってない=不恰好
というのが大抵の感覚だったりします。

テキスト文字数の件、今外出先なので少しお待ちくださいませ (o'ω')ノ

------ 追記 19日

他にも同じ要件の方がいらっしゃるかもしれないので、Mochaの専用ページコメント欄でお答えしますね。

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

2016/10/18 (Tue) 16:26 | EDIT | REPLY |   
Akira  
To samさん

リコメが前後しまして申し訳ないです。
はい。次回申請予定でございます。
ありがとうございます (*´・ч・`*)

2016/10/18 (Tue) 16:28 | EDIT | REPLY |   
きろろ  
To Akiraさん

メイソンリーでよいのでは?
隙間が整ってなくてもいいのでは?
個人的にはMochaみたいに、不揃いのほうが好きですw
なんか、手が込んでいるみたいに見えるのですよ。
ちゃんと縦長画像でも横長画像でも、柔軟に対応している感が好き❤

Mochaの修正、ありがとうございました。
ちゃんとできました。
毎度、お手数をおかけしてすみません<(_ _)>

2016/10/20 (Thu) 01:42 | EDIT | REPLY |   
Akira  
To きろろさん

お返事大変遅くなりました (*_ _)

メイソンリーやグリッドは「隙間が整った」レイアウトです(笑)
普通にただ並べただけだと技術的には一番簡単ですが、各ブロック同士の隙間がてんやわんやで美しくなりません。
ただメイソンリーは時系列通りに並ばない、という特徴があるので、
なんでもかんでもメイソンリーってわけにもいかず ^^;

Mochaの修正完了したようで安心しました。
お疲れ様でした

2016/10/22 (Sat) 16:34 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/10/31 (Mon) 15:58 | EDIT | REPLY |   
Akira  
To Messageの件 内緒さん

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

GirlOnWireの方、色情報載せてなかったと思いますので、時間を見て追加しておきますね。
私メンテナンスやらミスの修正やらが多いので、みなさんには毎度ご迷惑おかけします… ( ̄∀ ̄;)

2016/10/31 (Mon) 17:57 | EDIT | REPLY |   
mifune  

こちらこそありがとうございます♡m(_ _)m
わー>//<ご配慮有難うございます
概ね今のところは多分ここと思う場所に<!---->などでメモ付けてるのでなんとか行けると。
が、わたしのことです勘違いや推測で行動している部分もあると思うので^^汗 あったらあったで嬉しいです。m(_ _*)m
御手間空きの際で気が向いたらで大丈夫ですので…
いえいえメンテナンスは長く目を向けて下さっててとっても嬉しいです!まさか 迷惑ではないです><
フリーで使わせて頂いている上にTT 都度都度修正下さって感謝しております*m(_ _)m

2016/11/02 (Wed) 06:14 | EDIT | REPLY |   
Akira  
To mifuneさん

簡単ですがカラー表をつけておきました。
お時間のある時にご覧くださいね。
いつもありがとうございます

2016/11/03 (Thu) 00:28 | EDIT | REPLY |   
沙姫  
To Akiraさん

こんにちは、ご無沙汰しておりました。^^
こちらのテンプを、初めて拝見した時から、すっごい好きで、
1番乗りで、DLしてお借りしております。
デコラディブなところが、いちばん好きなんですw
そして、過去のGirlOnWireと、Mochaのテンプも、修正完了いたしました。
GirlOnWireは、内部構成がちょっとだけ、私にとっては複雑なので、
毎回フゥーフゥーいいながら、行っていますw
これからも、どうぞよろしくお願いいたします♪

2016/11/09 (Wed) 13:59 | EDIT | REPLY |   
Akira  
To 沙姫さん

お返事大変遅くなりました。
いつもありがとうございます
私、修正が多いもので毎回みなさまにはお手数おかけします ( ̄∀ ̄;)

2016/11/11 (Fri) 12:41 | EDIT | REPLY |   
hana  
お気に入りです

いつもありがとうございます。
最近はAkiraさんのテンプレートばかりです。

さて質問なのですが、プラグイン1の先頭に、
プラグインでは私は設定していない「Latest」(最新記事サムネイル付き 公式プラグインとは別のもの)が表示されます。
これの消し方がわからないのですが、
テンプレートのhtmlと関係があるのでしょうか?

もう少し検索して調べてみますが、
お手すきの時で構いません、解りましたらよろしくお願い申し上げます。

2016/12/08 (Thu) 02:41 | EDIT | REPLY |   
hana  
できました!

失礼いたしました。他記事で書かれていたrssはこの事だったのですね。
無事消えました。ありがとうございました!

2016/12/08 (Thu) 02:49 | EDIT | REPLY |   
Akira  
To hanaさん

お返事が遅れている間に自己解決して頂いたようで恐れ入ります。
はい。RSSを利用しているものがテンプレデフォルトの新着サムネイルです。
削除該当箇所を見つけられたようですので、解決済み、ということで大丈夫でしょうか。
お手数おかけしました。
ありがとうございます

2016/12/08 (Thu) 16:37 | EDIT | REPLY |   
Akira  
To Messageテンプレトップ表示形式の件 内緒さん(移動先)

> トップページを全文表示に変更したい件

こちらは記事中でも「お受けできないご質問・ご相談」としてお願いしております、
「トップページの表示タイプ変更(要約表示から全文表示へ変更 など)」に該当します。
特にMessageについては文字数を制限することでトップのデザインを実現していますので、基本コンセプト自体が変わってしまいますのと、html, CSS共に大掛かりな修正が必要です。
ご自身で変更して頂く分には構いませんが、お手伝いはできません。
申し訳ございません (*_ _)
最初から全文表示タイプのものを選ばれるのが一番かと思いますのでご検討くださいね。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-397.html

2017/01/07 (Sat) 19:52 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2017/07/30 (Sun) 23:28 | EDIT | REPLY |   
Akira  
To Message シェアボタンの件 内緒さん

こんばんは。ありがとうございます

> ....こちらのサイト記載のボタンを参考に〜

拝見しました。
数カ所問題になりそうな部分がありますのでお伝えしますが、内緒さんのページでの状態ついては未見ですので(掲載が無いため)参考程度にとどめてください。
2つの参照元が記載されていますが、一方からCSSを、もう一方からhtmlを、という解釈で合ってますでしょうか。

html
● <%topentry_title>ではなく<%topentry_enc_title>に変更してください。

SNSシェアのリンクアドレスには記事のタイトルが含まれます。
日本語タイトルだと大変不都合ですので、エンコード済みの変数をお使いになった方が良いと思います。

● Facebookのリンクからタイトル指定が抜けている
<a href="https://www.facebook.com/sharer/sharer.php?u=<%topentry_link>" target="_blank">

<a href="https://www.facebook.com/sharer.php?u=<%topentry_link>&a★mp;t=<%topentry_enc_title>" target="_blank">

★はこのコメント欄での変換を防ぐために入れてあるので記載時には削除。

● Twitterのシェアコードが違います。
status というのは使い道が違い、投稿時に定型文などを入れる際に用いるもので、エンコードも必須です。
なのでこれだと「シェア」ではなく、「自分の投稿」をすることになってしまいます。
そしてtarget属性の前の半角スペースも抜けています(構文エラー)

X
<a href="http://twitter.com/home?status=<%topentry_title><%topentry_link>"target="_blank">


<a href="https://twitter.com/intent/tweet?url=<%topentry_link>&text=<%topentry_enc_title>" target="_blank">

CSS
● floatの解除が行われていない

floatの解除忘れは後続要素に影響します。

X
#share ul{
height:auto;
}


#share ul{
margin: auto;
list-style: none;
overflow: hidden;
}


上記3プロパティが最低でも必要。
height: auto; は不要です。

---------

> 「記事内容」と「関連記事」の間にSNSボタンを〜

こちらはFC2ブログの仕様上、簡単にはできません。JSを用いる必要があります。
やり方は以下のページをご参照くださいね。

http://vanillaice000.blog.fc2.com/blog-entry-220.html#object18

内緒さんの場合は

<script>
$(function() {
$('ここにhtml内容').insertBefore('.relate_dl');
});
</script>

というコード内容になります。
「ここにhtml内容」の部分はお手元のSNSシェア用ソースコードをソース内改行無しで入れてください。

例)
X
<ul>
<li>Facebook</li>
<li>Twitter</li>
<ul>


<ul><li>Facebook</li><li>Twitter</li><ul>

注意点としては、
「関連記事を見つけ、有った場合にはその「前(上)」にSNS関連htmlを差し込みます。」
という内容のJSコードです。
関連記事が無い場合は表示されなくなってしまいます。
無い場合 = 同カテゴリに他の記事が無い = 1件以下のカテゴリに類する記事の場合
です。
これはFC2の仕様上どうしようもありませんので、位置にこだわるのであれば目をつむって頂くしかありません。
(関連記事の後で良いならばそういった縛りは無くなります)

で、非常に本末転倒な話しなのですが。
内緒さんの添付ページを拝見するに、「FC2ブログ個人設定でのシェアボタンが重たい」というのが理由で差し替えたいのだと思います。
ところが結局JSを用いてhtmlを書き出すことになりますので、「重たい」というよりも「遅い」です。
ページ内容全てを読み込んでからの描画ですので、せっかく差し替えてもあまり印象が変わらない気がします。
このJS内容は関連記事を描画し終わらないことには機能しませんんで致し方ありません (´・ω・`)
いずれ気がつくと思いますので今のうちに伝えしておきます(笑)
解消法としては関連記事の表示設定を「テンプレート変数のみ」にするしか。
そうすれば記載位置はどうにでもなります。
がしかし、関連記事に係るhtml, CSSを全て手入力することになります。
(こちらについてはお手伝い致しかねます)

よろしくお願いします。

2017/07/31 (Mon) 01:22 | EDIT | REPLY |   
Emy  
To Akiraさん

Akiraさん、シェアボタンの件ご丁寧に詳しい回答ありがとうございます!
シェアボタンを軽くしたいのではなく、大きく表示・表示場所を変えて目立たせたいという思いがあったのです…笑

頂いた回答内容を読んだうえで考えたのですが、Akiraさんデザインのままで行くことにしました。

ありがとうございました(^^*)

2017/08/01 (Tue) 13:42 | EDIT | REPLY |   
Akira  
To Emyさん (終了のご報告)

お返事遅くなりました (*_ _)

そういうことでしたか。
そうですね。妥協ができるのであれば無理にJSを使うよりは良いと思います。
お疲れ様です。ありがとうございます

2017/08/01 (Tue) 20:26 | EDIT | REPLY |   

Leave a reply

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