Message - FC2ブログテンプレート

投稿 2016年10月16日
40
テンプレート
HTML5CSS3RWD
Messageテンプレート

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

最終更新 2018.4.23

コメント欄を非表示にするとレイアウトが崩れる件を修正

Messageテンプレート修正のお知らせ - テンプレ不具合・修正など

Messageテンプレートを修正しました。 症状 コメントを受け付けない設定(コメント非表示)にするとレイアウトが崩れる(カラム落ち) 原因 FC2独自変数の位置が不正 私の製作時のミスです。申し訳ございません。...

名称 Message
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大810px
サイド --- 270px
記事内で利用可能な見出しレベル h2からh6
構造化マークアップ(個別記事のみ) BreadCrumbs(パン屑リスト)
BlogPosting
GTmetrixスピードスコア
固有機能 画像ドロップシャドウ
動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更
ライセンス 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 --- 下
更新履歴 2018.2.13

大規模なメンテナンスを行いました。
主な変更点は以下の通りです。

  • 画像遅延読み込みを導入しました(グリッドページ及び個別記事の一部分)
  • jQueryのバージョンを3.3.1にUPしました
  • Font Awesomeのバージョンを5にUPしました(CSSリンク+アイコンフォントからJS+SVGに変更になります)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • floatレイアウトをflexレイアウトに変更しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました
  • コメント欄で管理人プロフィールアイコンをデフォルト表示できるようになりました(FC2独自変数の追加)

不具合修正ではありませんので旧バージョンの方はそのままご利用頂けます。

更新履歴 2017.1.25

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

更新履歴 2017.1.13

・RSS新着サムネイルを削除
関連記事
Google Feed API 廃止に伴うテンプレートの一部レイアウト変更

本ページの内容は2018年2月13日メンテナンス以降のバージョンが対象です。

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

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

TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更

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

左右カラム入れ替えの仕方
How to reverse the direction of rows

#float-container で検索するとCSS内に4箇所出てきます。最初のものが対象です。
この括りの中の padding: 40px 60px 80px; の直下に flex-direction: row-reverse; を追加。

続いて #primary で検索するとCSS内に2箇所あります。こちらも最初のものが対象です。
この括りの中の margin-right: 40px;
緑の right を left に変更。以上2手順です。

プラグインの位置について
I recommend that you use tertiary column

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

No image画像変更
How to change alternative 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のテキストは自動で乗ります

ドミナントカラー
Dominant colors

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

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

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

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

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

40 COMMENTS

There are no comments yet.

きろろ  

大丈夫です!

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

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

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

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

2016/10/17 (Mon) 02:12

Akira  

To きろろさん

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

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

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

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

2016/10/17 (Mon) 16:29

sam  

初めまして。

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

2016/10/17 (Mon) 16:40

きろろ  

あるぇ~

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

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

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

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

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

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

2016/10/18 (Tue) 01:38

Akira  

To きろろさん

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

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

------ 追記 19日

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

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

2016/10/18 (Tue) 16:26

Akira  

To samさん

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

2016/10/18 (Tue) 16:28

きろろ  

To Akiraさん

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

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

2016/10/20 (Thu) 01:42

Akira  

To きろろさん

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

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

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

2016/10/22 (Sat) 16:34

-  

管理人のみ閲覧できます

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

2016/10/31 (Mon) 15:58

Akira  

To Messageの件 内緒さん

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

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

2016/10/31 (Mon) 17:57

mifune  

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

2016/11/02 (Wed) 06:14

Akira  

To mifuneさん

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

2016/11/03 (Thu) 00:28

沙姫  

To Akiraさん

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

2016/11/09 (Wed) 13:59

Akira  

To 沙姫さん

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

2016/11/11 (Fri) 12:41

hana  

お気に入りです

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

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

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

2016/12/08 (Thu) 02:41

hana  

できました!

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

2016/12/08 (Thu) 02:49

Akira  

To hanaさん

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

2016/12/08 (Thu) 16:37

Akira  

To Messageテンプレトップ表示形式の件 内緒さん(移動先)

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

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

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

2017/01/07 (Sat) 19:52

-  

管理人のみ閲覧できます

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

2017/07/30 (Sun) 23:28

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

Emy  

To Akiraさん

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

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

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

2017/08/01 (Tue) 13:42

Akira  

To Emyさん (終了のご報告)

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

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

2017/08/01 (Tue) 20:26

-  

管理人のみ閲覧できます

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

2018/04/23 (Mon) 13:12
vanillaice (Akira)

Akira  

To Messageコメント非表示の件 内緒さん

こんにちは ('0')/

これ私のミスです。申し訳ないです (*_ _)
今記事を出しましたので、そちらの内容をご参照ください。
お手数おかけします。よろしくお願いします。

Messageテンプレート修正のお知らせ
https://vanillaice000.blog.fc2.com/blog-entry-716.html

------ ここから関係ない話し

スマホ入手されたんですね。
Yahooで装飾している方のページをいろいろ見てみると良いですよ。
文字が完全に不読状態になっている様子がわかります。

2018/04/23 (Mon) 15:31

-  

管理人のみ閲覧できます

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

2018/04/24 (Tue) 01:44
vanillaice (Akira)

Akira  

To Messageコメント非表示の件 内緒さん(完了のご報告)

まず、再DLの件お手数おかけしました。
ありがとうございます

------
yahooの件、恐らく内緒さんは「文字が読めない」ページにまだ行き当たってないのだと思います(笑)
そのうち目にすると思いますので、その時に「あぁ、言ってたのはこれか。」と思って頂ければ。

yahooのスマホ版は実はどこのサービスよりも使いやすいのではないかと思っています。
ただ、ひたすらに野暮ったい((((笑)
野暮ったくはあるが使い勝手としては割りと優れてますよ。
FC2のスマホ版とyahooのスマホ版であれば私はyahooに軍配を上げます。

リニューアルはどうなりますかね。
さきほどちょっとリニューアル版の方を覗いてみましたが、いやもうマジで酷かった(笑)
読み込み遅いわ無限スクロールだわ、ひどすぎ。
あの状態で強制移行はやはり無理だろうと思います(笑)

2018/04/24 (Tue) 11:39

makiron  

タイトルの字体

はじめまして。
ブログ初心者で、こちらで質問すべきことなのかわかりませんが、
質問させてください。
タイトルの字体を変更することは可能ですか?
また、可能な場合、どのようにすれば良いのか教えていただけますでしょうか。
(変更可能な字体の制限はあるのか?等も合わせて
教えていただけたら幸いです)
文字の大きさは変更できたのですが・・・
お手数ですが、ご回答お待ちしております。

2018/09/30 (Sun) 19:46
vanillaice (Akira)

Akira  

To makironさん

こんばんは ('0')/

書体の指定については以下の記事をご参照ください。
参考記事: 意外と知らないフォント設定の仕方
https://vanillaice000.blog.fc2.com/blog-entry-484.html

CSS(テンプレート編集画面下段「スタイルシート」)の末尾に以下を追加

#blog-name {
font-family: 指定フォント;
}

makironさんのブログ名には欧文が含まれませんので「日本語フォント + 総称ファミリー」という指定で構わないと思います。
macとwindowsの別だけ気をつけるようにしてください。

私にはmakironさんの希望のフォントがわかりませんので、もし希望の書体がはっきりしているのであればお伝えください。
macにあるか、winにあるか、など私の方からお知らせできるかと思います。
よろしくお願いします。

2018/09/30 (Sun) 19:56

makiron  

To Akiraさん

早速ありがとうございます!
また時間がある時に試してみますので、
わからないことがありましたらまたご質問します。
その際はよろしくおねがいします!!

2018/09/30 (Sun) 20:07
vanillaice (Akira)

Akira  

To makironさん(終了のご報告)

はい。頑張ってください (o'ω')ノ

2018/10/01 (Mon) 16:37

まきさん  

FC2投票について

こんにちは。はじめまして!
ブログを始めようと思い色々探していたのですが、このテンプレートが凄く気に入ってしまったので使わせて頂こうと思うのですが、何せド素人からの出発なので難しいことがわかりません。
とりあえず必要最低限から始めようと考えています。

さて質問なのですが、どうしても公式プラグインのFC2投票を入れたいのです。
しかしなぜか上手くボタンが表示出来なくて困っています。
同じFC2プログで設置している他の方のページでは正常に表示されているのですが、何故か自分が設置すると投票ボタンが丸では無くて横長長方形になってしまいチェックが入りません。
お力をお貸しいただければと思い投稿しました。
尚、テンプレートはHTMLとスタイルシートは何も書き換えていません。
(というより何が書いてあるかの理解もできません(苦笑))

こんなド素人ですが、何卒よろしくお願いいたします。

2018/11/30 (Fri) 16:17
vanillaice (Akira)

Akira  

To まきさんさん

ありがとうございます。そしてご不便おかけしております。

.sidebar-style input:not([type="submit"]),
で検索(Ctrl + Fキー)するとCSS内(テンプレート編集画面下段「スタイルシート」)に1箇所あります。これを

.sidebar-style input:not([type="submit"]):not([type="button"]),

に変更してみてください。
よろしくお願いします。

2018/11/30 (Fri) 23:54

まきさん  

早急な回答ありがとうございます。
自分のやり方が間違っているのか、教えて頂いた一行を書き換えてみましたが変わりませんでした。
コピペしたので書き写し間違えは無いと思うのですが・・・
何がいけないのでしょうか?
すみません、何度も質問してしまって。

2018/12/02 (Sun) 00:36
vanillaice (Akira)

Akira  

To まきさんさん②

こんにちは。

「投票のボタン」というのは「投票結果」の横にある「投票」と書いてあるボタンではなく上の選択肢が元々はラジオボタンだった、ということなんですね。であれば
.sidebar-style input:not([type="submit"]):not([type="button"]),


.sidebar-style input:not([type="submit"]):not([type="button"]):not([type="radio"]),

にしてみてください。流し読み程度でお返事してしまい無為にお時間取らせてしまいました。ごめんなさいね。
よろしくお願いします。

2018/12/02 (Sun) 15:10

まきさん  

本当に本当に何度もすみません、今度はラジオボタン自体も消えてしまいました。
ちょっと参考になるサイトが見つからないのですが、
https://vote.fc2.com/
ここの「FC2投票ならこんなことができます!」のすぐ右側のプラグインが正常なプラグインみたいです。
前回は丸いはずのラジオボタンが長方形になり、今回はラジオボタン自体が無くなってしまいました。

自分で作ろうとしてるサイトは下記です。
http://makisan0423.blog.fc2.com/
ちなみに、公式プラグインを設置しようとしてるプラグインのHTML(?)のページは下記です。
https://vote1.fc2.com/poll?mode=browse&uid=15219473&no=1

本当に何度もすみません。
お時間が空いた時にでも調べて頂けると幸いです。

2018/12/02 (Sun) 19:40
vanillaice (Akira)

Akira  

To まきさんさん③

いえ。私の方こそ何度もホントにごめんなさい。もう1箇所あったんでした。
input:not([type=submit])
で検索するとCSSの上の方に1箇所出てきます。こちらも

input:not([type=submit]):not([type=radio])

に修正してください。今度こそ大丈夫だと思います。すみません (*_ _)
別件ですが投票を大事にされているということで、現状だとスマートフォンではスマホ専用テンプレートが表示されてしまい、スマホユーザーが投票に参加することができません。
レスポンシブ設定をすることでスマホでもMessageテンプレートで表示されるようになります。
(強制ではありません)

参考記事: FC2ブログでレスポンシブテンプレートを正しく使う方法
https://vanillaice000.blog.fc2.com/blog-entry-711.html

2018/12/02 (Sun) 23:03

まきさん  

度々ありがとうございます。
スマートフォンの設定の件もわかりやすく説明していただきお礼申し上げます。
ところが今度は、
投票の選択肢の最後に投稿者側が選択枝を増やせるラジオボタンとテキスト入力ボックス(?)があるのですが、ラジオボタンとテキスト入力ボックスが2段に分かれてしまいます。他の方のサイトFC2ブログの投票プラグインだと1列に並んでいます。
もう本当に何度も申し訳ないので、時間がある時にでも宜しくお願いいたします。

2018/12/03 (Mon) 11:18
vanillaice (Akira)

Akira  

To まきさんさん

こんにちは。

投票の構造を見てみまして、該当箇所のinput(任意追加のテキスト入力部位)のID名を利用して今回も同じようにnot擬似クラスでもできるんですが、もしかしたら投票内容の違うものを掲載したときにこのID名がまた別のものになってしまう仕様かもしれません。
例えば
「閲覧環境」に関する投票
<input id="xxxxx">
「web閲覧頻度」に関する投票
<input id="yyyyy">

こうなるとまた今後CSSの追加が出てきてしまいます。とはいえ投票の全体ソースでクラス名またはID名があるのはこの部位だけなんですよね。
FC2はいつも外部サービスウィジェットへのクラス名・ID名の付加を怠るので悩みの種なんです (∵`)

現在まきさんさんのページでは2つ同じ投票が掲載されています。そのうち一つは「フリーエリア」への掲載ですよね。こちらならばフリーエリアを特定するクラス名がありますのでできるんですが、どちらを使うかに左右されてもいけませんし、他の用途でフリーエリアを追加した際に困った事態になることも。

まきさんさんがサイドメニューにinput関連を載せないのであれば
(サイト内検索, メールフォームなど)これまでのnotでの追加ではなく、デフォルトで書いてあるCSSを削除するという方法をおすすめします。
削除すると使えなくなるという意味ではなく、あまり美しいスタイリングではなくなるというだけでちゃんと使えます。
(デザインではなくブラウザ任せの表示になります)

今の所他のinputが見当たりませんので、その方が良いかなぁ (´・ω・`)

.sidebar-style input:not([type="submit"]):not([type="button"]):not([type="radio"]), .sidebar-style textarea, .sidebar-style select {

で検索すると以下のようになってます ↓

.sidebar-style input:not([type="submit"]):not([type="button"]):not([type="radio"]), .sidebar-style textarea, .sidebar-style select {
省略
}

この内容を削除。その代り繰り返しになりますが、他のinput関連プラグインを入れたときに見た目が「えー… (´-ε-`;)」って感じになるかもしれない ^^;

2018/12/03 (Mon) 12:25

まきさん  

Akiraさん、早い対応で本当に感謝しています。有難うございました。
私には魔法の文章で、戸惑いながらも何度も読み返して少しは理解できたかなと思っておりますw

FC2投票自体は一度作ってしまえば追加も変更もする予定はないのですが、
とりあえずお勧めしていただいたデフォルトのCSSを削除した後、試しにメールフォームを追加してみました。
色々なブラウザで表示させてみましたが、PCのFirefoxとChromeでは崩れていませんでした。スマホではandroid(au)標準ブラウザも崩れは無く、iPhoneのSafariだと「えー… (´-ε-`;)」になりましたw
ただ肝心なFC2投票だけは正常に表示されているので当面はデフォルトCSS削除で作っていこうと思います。

この度は貴重なお時間を取らせてしまい、本当に申し訳ございませんでした。
そして有難うございました。心より感謝致します。

2018/12/03 (Mon) 14:26
vanillaice (Akira)

Akira  

To まきさんさん(完了のご報告)

安心しましたー。
いえいえ。私の方が投票サービスのことを考えずにデザインしていましたのでお手数かけてしまいました。
今後の制作に活かそうと思います。ありがとうございます。

お疲れ様でした :)

2018/12/03 (Mon) 17:01

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)