vanillaice (Akira)

vanillaice (Akira)

Messageテンプレート
PCアイコン TBアイコン SPアイコン

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

更新履歴 2017.1.25

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

名称 Message
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大910px
サイド --- 260px
固有機能 画像ドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
3カラム 1カラム 1カラム
プラグイン1・2 --- 右
ブラグイン3 --- 下
プラグイン1・2 --- 右 or 下(デバイス幅依存)
プラグイン3 --- 下
プラグイン1・2・3 --- 下
過去の更新一覧
更新履歴 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点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
みなさんいつもありがとうございます (●'0'●)/

関連記事

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テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ