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

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

名称
Muse
みゅーず
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
要約
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Limelight
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 2022.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2022.9.21
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2022.8.25
  • Twitter名称・ロゴ変更に対応
  • カスタムプロパティ加増
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • コメント削除アラート追加
  • その他UI調整

カラム入れ替えや記事最大横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.7.9
  • prefetchの数を調整
更新履歴 2022.1.6
  • iOS14でサムネイルが時折表示されない件修正
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【ページナビJS修正】
<script>document.addEventListener を目印に検索し、このscript要素を以下の内容と差し替え。

<script>document.addEventListener("scroll",function(e){<!--preventry-->const u_p="<%preventry_url>";fetch(u_p).then(res=>res.text()).then(text =>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager-prev-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/preventry--><!--nextentry-->const u_n="<%nextentry_url>";fetch(u_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager-next-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>document.addEventListener("scroll",function(e){<!--prevcategoryentry-->const uc_p="<%prevcategoryentry_url>";fetch(uc_p).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager-prev-cate-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/prevcategoryentry--><!--nextcategoryentry-->const uc_n="<%nextcategoryentry_url>";fetch(uc_n).then(res=>res.text()).then(text=>{const el=new DOMParser().parseFromString(text,"text/html");const el_h=(el.head.children);Array.from(el_h).map(v=>{const p=v.getAttribute("property");if(!p) return;const og_i=v.getAttribute("content");const og=document.getElementsByClassName("pager-next-cate-image");for(var i=0;i<og.length;i++){og[i].style.backgroundImage="url("+og_i+")"}})});<!--/nextcategoryentry-->e.target.removeEventListener(e.type,arguments.callee)});</script>
<script>function changeTextValue(e){document.getElementById("subject").value=e};</script>

script要素を1つから3つ分割に変更しています。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

更新履歴 2020.5.28
  • ページ送りのJSを修正
更新履歴 2020.3.30
  • コメント返信のJS変更
履歴履歴 2020.3.23
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.11.24
  • コメント主のリンク表示用JS及びデザインの変更
  • NEWマークJS変更
更新履歴 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

<li class="comment-btn-list"> で検索するとhtml内に4箇所あります。2つ目の

<li class="comment-btn-list"><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a></li>

を以下の通り 変更

<li class="comment-btn-list"><!--comment_author--><!-- <!--/comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a class="btn-a" href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん"><svg class="svg-inline svg-inline-stroke" viewBox="0 0 64 64" role="img"><use xlink:href="#inline-reply"></use></svg></a><!--/comment_author--></li>
②について

#community" で検索するとhtml内に3箇所あります。3箇所とも #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">Leave a reply</h3> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下を 追加

#comment_form {
  padding-top: var(--navi-height);
}
③について

<p class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

#inner-contents { で検索するとスタイルシート内に1箇所ありますので padding: 20px 0;margin: 20px 0;変更

続いて #inner-contents>p:first-of-type で検索するとスタイルシート内に1箇所ありますのでこのルールセットを 削除

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

最終更新 2019.4.27
  • モーダル検索を廃止
  • プロフィール(lazyloading対象)とサイト内検索を追加

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

みゅーず
レコード版風。承認されました。ありがとうございます。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

メタタグの設定 > OGP設定「有効にする」

メタタグの設定 > OGP設定「有効にする」

個別記事ページ送りに前後ページのサムネイル画像を表示できます。この設定を怠ると表示できません。

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事ヘッダーの管理人アイコン をクリックすると別タブで開きます。

ご質問・ご相談時のお願い

Cautions before asking for something.

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

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

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

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

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

-
2019/04/25 (Thu) 02:00

管理人のみ閲覧できます

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

-
2019/04/25 (Thu) 02:03

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/04/25 (Thu) 02:35

To 記載ミス訂正の件 内緒さん

いつもありがとうございますー。また間違えちゃった ( ̄∀ ̄;)
表示タイプは「要約」です。名称の方は修正しました ('0')/

M
2019/04/25 (Thu) 13:41

W3Cエラーチェックの件

いつもお世話になっております(^^)

すみません。一つ教えて頂きたいのですが、headのほうにfontのCSSを記述しましたら、
W3Cエラーチェックで「CSS: font: / is not a font value.」と表示されますが、
これって放置しても大丈夫なものでしょうか?

ネットで調べたのですがなかなか見つからないもんですから(;^ω^)

vanillaice (Akira)
Akira
2019/04/25 (Thu) 16:33

To Mさん

こんにちは ('0')/

CSSの全内容をhead内に移したということでしょうか。
この方法(インラインCSS, インターナルCSS)を取る場合はリセットCSSの後に root の内容を最優先で書くようにしてください。rootは後続の指定内容の参照元ですから参照元は早い段階で読ませる必要があります。

例) ×

body {
background: var(--body-bg-color);
}

:root {
--body-bg-color: rgb(46,36,36);
}

例 ✔

:root {
--body-bg-color: rgb(46,36,36);
}

body {
background: var(--body-bg-color);
}

つまり圧縮時はCSSのカスケーディングの状態を保持したままで行うようにすればOKです。
(記述順序が入れ替わらないようにする、という意味です)
CSSの記述「順序」には意味があります。

-----
別件です。instantPageのスクリプトを追加されていると思いますが、こちらのテンプレートには既にprefetch関連のスクリプトが含まれています。デフォルトスクリプトの方でservece workerも適用されますので重複させないよう削除してくださいね。
よろしくお願いします。

M
2019/04/25 (Thu) 19:02

To Akiraさん

Akira様

ご返信いただきありがとうございます。

実は、Critical Path CSS Generator(https://www.sitelocity.com/critical-path-css-generator)を使って、ファーストビューのところだけ抽出したCSSをインライン化しようと思ったのですが(;^ω^)

記事要約タイプのテンプレですと、トップページと個別記事でCSSが異なってくるので、それぞれ抽出したうえで重複する部分を
Online JavaScript/CSS/HTML Compressor(http://refresh-sf.com/)で圧縮させたんです。そうしたら順番がごちゃごちゃになってしまいまして(;'∀')

ファーストビューの部分だけインライン化するのって難しいものですね。ちょっと手作業でやってみることにします。

instantPageの件ありがとうございます(^^)うっかりしました。削除します!!

vanillaice (Akira)
Akira
2019/04/25 (Thu) 23:06

To Mさん(完了のご報告)

こんばんは。

ツールでcritical pathだけを選択するのは難しいと思います。結局は目視確認をしながら自力で行う方が精度が高くなります。
critical pathをheadに記載した場合はJSを利用して残りのCSSを遅延させる(head内で読み込まない)ようにしてくださいね。でないと意味がありません。
お疲れ様です :)

M
2019/04/25 (Thu) 23:53

To Akiraさん(お返事不要)

Akira様

何とかがんばります(;^ω^)

いつもありがとうございます!!

-
2019/04/26 (Fri) 00:39

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/04/26 (Fri) 00:57

To 要約と全文の定義について 内緒さん

こんばんは ('0')/

> 変数のどちらを使うかなのでしょうか?〜

そうですね。そういう言い方もできると思います。〜description の方はユーザーが記事内で用いたhtml内容を取り除き、テキストだけを抽出します。〜body の方はユーザーが書いた記事内容そのままで表示されます(ただし「本文」のみ)

-----
> トップページに記事本文が表示されないのは全て要約タイプ〜

そうとは限りませんが、用途を考えれば必然的にそうなりますね。記事内容が表示されないということは 〜description も 〜body も記載しない、ということになり、ユーザーの書いた内容がそのままの形で反映されない(「無い」「表示させない」もそれに含められるかと思います)、という意味で「要約」にカテゴライズして良いと思います。

Pianissimoは全文です。仮に個別記事内「本文」に「表」が載っていれば、トップページでもその表がそのままの形で表示されます。Museは要約です。トップページでは本文内の表は中のテキストだけが取り出され、表の体は為しません。

また、〜body はトップでの文字数制限がありませんので「本文」がどんなに冗長であろうと全て表示しますが、〜description は「本文内」最大200文字までという制限があります。

そふぃあ
2019/04/26 (Fri) 14:55

Museでのブログカードについて

Akira様こんにちは。いつもお世話になっております。
新作[Muse] 目に優しく、軽く、使いやすい!
大変気に入り、早速使わせていただいております。

Akira様のブログカードも愛用しておりますが、以前使っていた[La_Vita]からこちらに変更しましたら、ブログカードのタイトル部の上下に空白ができてしまったように思います。

■参考ページ■
https://dawn-clover.com/blog-entry-6423.html

何か手直し策などあるようでしたら、ご伝授願います。
よろしくお願いします。

vanillaice (Akira)
Akira
2019/04/26 (Fri) 16:47

To そふぃあさん

そふぃあさん、こんにちは ('0')/

> ブログカードのタイトル部の上下に空白が〜

#inner-contents p {
で検索するとスタイルシート内に1箇所あります。
#inner-contents p


#inner-contents p:not(.blogcard-title):not(.blogcard-description)

に変更してください。お手数おかけします。よろしくお願いします。

そふぃあ
2019/04/26 (Fri) 17:17

To Akiraさん

早速のお返事ありがとうございます。

言われたとおりにやってみたつもりですが、変化がみられませんでした。
何か間違っているのか?私(汗)

-
2019/04/26 (Fri) 17:22

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/04/26 (Fri) 17:28

To そふぃあさん

度々お手数おかけします。

#inner-contents p:not(.relate-title) {
で検索すると1箇所ありますので、

#inner-contents p:not(.relate-title) {
margin: 1.9em 0;
}

上記内容を削除してください。これ私が消し忘れた内容で意味が無いのに強制力だけは持ってるんです。ごめんなさい ( ̄∀ ̄;)

vanillaice (Akira)
Akira
2019/04/26 (Fri) 17:33

To 要約と全文の定義について 内緒さん②

こんにちは。

そうですね。場合によっては同じような見え方になることもあります。
〜description の方は改行も無くなりますので、そのあたりの文章構成が似ていれば。

ただ全文タイプの場合は性質上「サムネイル整形」ができませんので、ユーザーの記事の書き方によっては要約に近い状態にはできますが、リストタイプにしたり画像に装飾をつけたり、といったことはテンプレート側ではできません。あくまでも個人が書いた内容そのままです。
(個人カスタマイズでトップページのみサムネイル対象画像の整形をすることは可能ですが、個人環境に大きく左右されるため共有デザインとしてはほぼ不可です)

そふぃあ
2019/04/26 (Fri) 17:56

To Akiraさん(完了報告)

お忙しいのに何度もお返事ありがとうございました。

今度は出来ました!
見た目が今まで通りになって、スッキリおさまりました。
この度もお世話になりました。

vanillaice (Akira)
Akira
2019/04/26 (Fri) 19:30

To そふぃあさん(完了のご報告)

安心しましたー。
お疲れ様でした :)

-
2019/04/26 (Fri) 21:50

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/04/26 (Fri) 23:40

To ドッグイヤーの件 内緒さん

こんばんは (o'ω')ノ

固有機能説明ページはまとめページなので全テンプレートに全内容が含まれるわけではありません。
どの内容が入っているかはあくまでも各テンプレートの仕様表でご確認くださいね。
よろしくお願いします。

-
2019/04/27 (Sat) 03:18

管理人のみ閲覧できます

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

-
2019/04/27 (Sat) 09:21

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/04/27 (Sat) 17:25

To ダークモードの件 内緒さん

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

もともとがダークなのでモードのことは全く考えていません(笑)
偶発的なことなので謳って手柄にはしないようにしたいと思います(笑)
いつもありがとうございます :)

M
2019/04/28 (Sun) 08:32

モーダルの件

Akira様。お世話になっております。

モーダル検索の記事を読んだのですが、実は、カテゴリモーダルを追加してしまいました。

こちらの方も削除しないと不具合が生じますでしょうか?

M
2019/04/28 (Sun) 13:55

プラグインのスマホ表示について

Akira様

たびたびすみません。

公式プラグインの「検索フォーム」と「メールフォーム」について、PC表示では問題ないのですが、
スマホのサファリで閲覧しますと、どうしても「白背景」&「白テキスト」で表示されてしまいます。

何か良い対処法はございますでしょうか?

vanillaice (Akira)
Akira
2019/04/28 (Sun) 17:25

To Mさん

こんにちは。

> カテゴリモーダル〜削除しないと不具合が生じますでしょうか?〜

そうですね。同じ仕組みですからSafariでは害があると思います。PC Safariユーザー自体そう多くはないでしょうが、居ないわけではないもので。

-----
> 「検索フォーム」と「メールフォーム」〜スマホのサファリで閲覧しますと、どうしても「白背景」&「白テキスト」〜

こちらは私の環境では起こらないのですが、iPhoneですよね(というかAndroid版Safariは無いと思うので)
iPhoneとiOSのバージョンを教えて頂けますでしょうか。よろしくお願いします。

私の環境(iPhone XS, iOS12.2)での見え方
https://file.blog.fc2.com/vanillaice000/capture3/capsearch----800.png
https://file.blog.fc2.com/vanillaice000/capture3/capmail----800.png

M
2019/04/28 (Sun) 17:37

To Akiraさん

Akira様

ご返信ありがとうございます。

はい。iPhoneです。機種は6S plusで、iOSのバージョンは12.1.4です。

ちなみに、iPad proも使ってますが、こちらも白背景&白テキストになってました。こちらのバージョンは11.0です。

カテゴリモーダルの件ですが、PC Safariユーザーさんが閲覧する際に、カテゴリのところをクリックなどしなければ閲覧に支障がないのでしょうか?もしそうなのであれば、このままにしておこうかと思いまして(;'∀')

vanillaice (Akira)
Akira
2019/04/28 (Sun) 17:41

To Mさん

うーん。まぁそうですね。モーダルについてはMさんにお任せします。

iOSのバージョンUPは問題がありますでしょうか。iPhoneやPC Safariは毎回input要素まわりにバグというか独特な挙動があり、アップデートの都度それが潰されていくという感じです。

M
2019/04/28 (Sun) 18:14

To Akiraさん

Akira様

iOSのバージョンUPは怠ってました(;^ω^)

これからバージョンUPしてみて、またご報告しますね。

M
2019/04/28 (Sun) 19:35

To Akiraさん(不具合解消のご報告)

Akira様

先ほどのご報告です。iPhone、iPadともに最新バージョン(12.2)にアップデートしたところ、
両方とも不具合が解消されました!!

アップデートをしなかったことが表示に不具合を起こすなんて考えもしませんでした(;^ω^)

おかげでスッキリしました。ありがとうございます(o*。_。)o

vanillaice (Akira)
Akira
2019/04/30 (Tue) 16:57

To Mさん(完了のご報告)

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

iOSはこういうことが多いです。アップデートはセキュリティやバグ潰しが入りますのでマメに行ってくださいね。
お疲れ様でした :)

M
2019/04/30 (Tue) 17:53

To Akiraさん(お返事不要)

Akira様

今回のアップデートではじめてその恩恵を実感しました。

ありがとうございます(o*。_。)o

ライ
2019/05/02 (Thu) 19:33

初めまして、こんばんは!
右カラムについての質問です。
今の状態から【プロフィール】【最新記】【カテゴリー】の順番に並べたいのですが可能でしょうか?

vanillaice (Akira)
Akira
2019/05/02 (Thu) 20:22

To ライさん

こんばんは (o'ω')ノ

カテゴリについては個人設定になりますので「カテゴリ1」の一番上に設定してください。
最新記事は
注)最新記事不要の方ここから削除
で検索し、
<!-- 注)最新記事不要の方ここから削除 -->
から
<!-- 注)最新記事不要の方ここまで削除 -->
の内容を一旦カットし、
<!--plugin_first-->
のすぐ上にペーストしてください。
よろしくお願いします。

-----
ところでスクショは「SIMS」というやつですかね。欧米の方が「woohoo」で爆笑するんですがこれのことでしょうかしら (´・ω・`)
子作りがどうとかこうとか。疎いものですみません。余談でした ^^;

-
2019/05/02 (Thu) 22:23

管理人のみ閲覧できます

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

ライ
2019/05/02 (Thu) 22:40

No title

Akiraさんのお陰で並び替えが出来ました。
GWの多忙な中でお答えいただき、ありがとうございます。
-----
そうです!シムズシリーズでは暈してウフフと表現してます
MODを入れて設定すれば、あちこちでウフフが・・・(笑)

vanillaice (Akira)
Akira
2019/05/03 (Fri) 02:39

To Museカスタマイズの件 内緒さん

こんばんは。

> プロフィール画面の画像が〜ブログタイトルの次にプロフィール、もしくはプロフィール画像を表示させたい〜現在は、記事に入れた画像がトップに表示されています。〜

ちょっとイメージが見えてこないのですが、ブログタイトルの「下」にプロフィールを表示させるのですか?プロフィール「もしくは」ということなんですが内緒さんがおっしゃる「プロフィール」というのはプロフィール文のことでしょうか。つまりデフォルトの「ブログ説明文」を「プロフィール文」に変更?それともブログ説明文のさらに下にプロフィール文?

「現在は記事に入れた画像がトップに〜」という表現もちょっとわからないというか、各記事は各記事に掲載した画像が出る仕組みです。それを変えたいということなんでしょうか。
その前にFC2ブログには「プロフィール画面」というのはありませんので(プロフィールページのこと?いずれにしろ有りませんが)やっぱり何をご希望なのかよくわからないです。ごめんなさい (´・ェ・`)

-----
> クリックすると、このテンプレートで表示される時とF2の何もないテンプレートで表示される時があります。〜

これは「スマートフォン版表示」設定を「非表示」(スマホ版無効)に変更していないことが原因です。当該記事内容にある通り自主的に設定を行ってください。
FC2ブログはダイナミックサービングというシステムですから原則スマホデバイスから閲覧した際にはスマホ版が表示されます(デバイスを見分けている、という意味です)
スマホ版非表示設定はスマホ版とPC版の区別を行わない(共通化する)という設定です。つまりレスポンシブ設定で、これを行わない限り閲覧者が目にするのはスマホ専用版です。

-----
> 冒頭にスペース入れることは可能ですか?〜

文頭のスペースは文字参照表記(エンティティ)しなければ表示できません。欧文ではgrammar的に文頭にスペースを置くことが正当ではないからです。

&nbsp;
&emsp;
&thinsp;

このいずれかを & の部分を半角に修正して記してください(ここでは実体変換を避けるために全角にしています)
nb〜は通常の半角スペース、emは半角スペース2つ分、thinは半角スペースの半分です。
参照文字を利用する場合は「旧投稿画面」か「新投稿画面のHTML表示」を利用してください。
よろしくお願いします。

vanillaice (Akira)
Akira
2019/05/03 (Fri) 02:41

To ライさん(完了のご報告)

上手くいったようで良かったです。
SIMSの方もうすうす感づいてはいましたが、これではっきりすっきり。ありがとうございます(笑)
お疲れ様でした :)

-
2019/05/03 (Fri) 15:32

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/03 (Fri) 19:01

To Museカスタマイズの件 内緒さん②

こんにちは。

えっと。ちょっとわかりづらい ^^;
私が理解できたかどうかご確認をお願いします。

> 記事を挙げると、記事がプロフィールより下に表示されるのかと思ったら、1番最初に表示されているので、すぐにプロフィールが見えない状態になりました。〜

これは内緒さんが「スマホでしか確認をしていない」のでそう思われたんですね(たぶん)
このプロフィールはパソコンではメインコンテンツの「右側」に表示されているものです。スマホでは2カラム構成から1カラムに再編成されますので、右カラム(サイドカラム)はメインカラム下に移動します。
記事が無い状態は即ち「メインカラム内にコンテンツが無い」わけですから、下にある「プラグイン関連(プロフィール含む)」がブログタイトルのすぐ下に表示されていた、ということです。
当然メインカラムに内容が入ればサイドカラムは下に下がっていきます。副情報は主情報よりも「後」というのがwebページ構成の鉄則です。

パソコンでの様子(スクリーンショット)
https://file.blog.fc2.com/vanillaice000/capture3/capmusetop----1000.jpg

これをメインカラムよりも「上」に移動させるにはまずデザインを決める必要があります。メインコンテンツ(各記事)と同じようにレコード版を踏襲するのか、それとも別のデザインを充てるのか。ただ単にhtml内容を移動させるだけでOKというわけにはいきません。

メインカラムとデザインを揃えてしまうと閲覧者は「リンクになっており、記事がある」と思ってしまいますので、別のデザインにする方が賢明かと思います。ただ原則私の方では「カラム数変更」のカスタマイズ支援は行っておりません。

いずれにしろスマホだけを考えるわけにいきませんので、パソコンの方を考え合わせるとあまり良いレイアウトにはならないと思います。いやー。でも無茶じゃないかと思いますよ。プロフィール文章構成を考えても縦に間延びするのが目に見えてますし。スマホでは良くともパソコンの方はおかしなデザインになるのでは。かといってメインコンテンツと同じデザインでは読む人が混乱します。
ちょっとこの件は今一度熟考願えませんでしょうか。あるいは公式テンプレートの
https://admin.blog.fc2.com/control.php?mode=design&process=download&no=44537
これなどは最初から「プロフ画+ブログ説明文」がブログタイトル下に表示されますので乗り換えもご検討ください。
(ブログ説明文の部分をプロフィール文に変更するだけです)

-----
> ケータイ用は初期化され、非表示になっていますがスマホ用は未設定でした。ただ、未設定を変更するボタンがないため〜

個人設定で「スマートフォン版の表示設定」を「無効にする」に切り替えるだけです。初期化してくださいとは書いていません。設定を変更してください。
https://admin.blog.fc2.com/control.php?mode=setting&process=2#sp_sup

-----
> 行冒頭の空白についてですが〜肝心な本文が羅列されてしまい〜

トップページのことですか?それとも個別記事のことですか?
そして文頭のスペース(つまり「インデント」)のことですか?それとも段落間の余白のことですか?

> HTML標記はネットで調べた際に出てきたのでこちらで質問する前にやってみた〜

後半の文章を読むにこれのことかなぁ、と思います。
「文章(段落間)の余白」が「トップページ」の「記事概要文」に反映されない、という解釈で合ってますか (´・ω・`)
仮にそうであれば、これはFC2の仕様なのでどうにもなりません。
(改行など全て取り払われてテキストだけが抽出されます)
内緒さんの希望(文章間の余白をトップページにも反映させたい)を叶えるならば要約表示タイプではなく全文表示タイプを利用してください。こちらのテンプレートは要約表示タイプです。

参考記事: テンプレート一覧(表示タイプ別)
https://vanillaice000.blog.fc2.com/blog-entry-283.html

全文タイプは個別記事で「本文」に書いた内容が見た目もそのままトップにも表示されます。ですからこのMuseのようなリスト系レイアウトは実現できません。念の為。

-
2019/05/03 (Fri) 22:07

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/04 (Sat) 00:33

To Museカスタマイズの件 内緒さん(一旦終了のご報告)

はい。どうぞご自分のペースでやってくださいね。
お疲れ様です :)

-
2019/05/04 (Sat) 09:43

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/04 (Sat) 17:36

To Museカスタマイズの件 内緒さん(再開)

> PCからだとカラムという段落が2つあって 右横にプロフィールが表示されているということですね。〜

いえ。「カラム」というのは主情報や副情報を掲載する「ボックス」のことです。Museの場合はPCで2カラム編成、スマホでは1カラム編成、という意味です。

「段落」というのは文章に用いる日本語でいうところの「段落」そのものです。英語で言えばparagraph(パラグラフ)のことです。
「長い文章を幾つかのまとまった部分に分けたその一くぎり」のことです。

英語の文法では段落と段落の間には1行分の空白行を設けるルールです(htmlは英語圏の文法(grammar)を踏まえて作られています)
最初に内緒さんが表現した
『冒頭にスペース入れることは可能ですか?』
という意味が不明瞭だったので、「段落間余白のことですか?それとも文頭のスペース(インデントによる空白)ですか?」と尋ねました。

結局のところこれもまだ未解決です。「冒頭のスペース」と言えば通常は「インデント」のことだと思うんですが、どうも内緒さんの文章から推測するに「改行」のことのような気もします(htmlの<br>に関する記載があったため)。結局なんのことだかわかりません。
用語は正しく用いて頂かないと伝わりませんので、その点に留意して頂けると助かります。

-----
> 可能であれば、どのようにすれば良いか教えていただくことは可能でしょうか?〜

先日お伝えしたように、カラムの追加のついての支援は行いません。一度やってしまうと次々に希望者が出てしまいますのでご理解をお願いします。
今回の場合は「PCで多少崩れても良い」と明言されていますので、公式プラグインの「プロフィール」のhtml編集を開き、そこに記されている内容全てをコピーして、テンプレートhtmlの

<main id="primary">

の直下に以下の要領でペーストしてください。

<div class="add-prof">
ここにペースト
</div>

赤字部分はプロフィールのhtmlに含まれませんので追加してください。
この作業による結果については自己責任でお願いします。

-----
> 他のF2ブログの方を見てるとやはり、プロフィールと同じ画像がタイトルの下にある〜

この方はたまたま最新記事のアイキャッチ画像にプロフィールと同じ画像を指定した、というだけです。違う画像をアイキャッチ指定あるいは記事内掲載していればその画像が表示されます。

-----
> スマホ非表示についてですが〜

まずこのページとは別のタブを開き、そこからご自身の管理画面にアクセスしてください。
管理画面の下の方に「PC表示」というのがありますのでそれをクリック。
このページに戻り、私の1つ前のコメント内にあるリンクをクリックすると設定画面が出てきますので「無効にする」を選択して「更新」をクリック。

管理画面に戻り、一番下にある「スマートフォン版を表示」をクリックして従来の形に戻してください。
この作業は「UAの偽装」です。元に戻さないと管理画面が常にPC表示になりますので必ず戻すようにしてください。

テンプレートの再DLなどは全く関係ありませんので何もする必要はありません。

-----
> 冒頭空白についてはたまに私がお知らせやお願いなどの記事に署名する時に名前を記事の最後に空白を入れてます〜

ごめんなさい。この文章の意味が理解できないです。すみません。
いずれにしろこの件はもう良いってことですよね。たぶん。

-----
> 書籍化する時には〜

書籍化とテンプレートは無関係です。内緒さんが記事として書いた「テキスト(掲載画像なども含む)」が抽出されるだけです。

書籍化表紙デザイン一覧
http://print.cssj.jp/info/styles/cover.php

-
2019/05/05 (Sun) 02:02

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/05 (Sun) 02:54

To Museカスタマイズの件 内緒さん②

こんばんは。

わかった… ような気がします。
結局「段落間余白」のことですね。こういうこと ↓

xxx(ハンドルネーム)
令和元年 5月1日

ではなく

xxx(ハンドルネーム)

令和元年 5月1日

こうしてハンドル名と日付の間に「行空白」を入れたい、と。そういうことですか?で、これは当然「個別記事」でのお話ですよね?
あれ?でもこれも違う気が。最終に至るまでの文章には空白行を入れてらっしゃいますよね。

えと。「冒頭」というのは「記事の書き出し」のことです。内緒さんの内容で言うと「令和の時代が」が「冒頭」です。
「文頭」というのは

○令和の時代が〜
○未来の〜
○このブログ〜

丸印の部分、これらが「文頭」です。文章の「頭」のことです。
で、結局どのことなのかしら。

-----
> HTMLにすると、全文が羅列されてしまう〜

「全文が羅列」とはどういう状態を指すのでしょうか。
「改行がなく文章が横にひと繋がりになる」という意味ですか?で、結局これはトップページの話ですか?それとも個別記事の話ですか?それがわからないと何も手がつけられないのですが。
トップに署名は出ませんので(文字数を超過しているため)、個別記事のことだとは思っているのですが。

というかその前にこの件は終了ですかね。うーんますます混乱してまいりました。
結局こういうことですかね ↓
「トップページの概要文に改行やスペースなどが反映されると思っていた。そのために方法を聞いた」
そういうことかしら。これだと「トップページのことをお尋ねになっていた」という結論です。

ただ「署名」というのは… 個別記事でしかありえないですよね。だってトップページでは文字数制限により概要文中にハンドルネームや日付は出ないのですから。

とりあえずこの件は内緒さんが「終了」とお考えであればこれ以上の説明は無用ですから、「終了です」とだけお伝えくださいね。

-----
設定の件ですが、一部の方でそういう事象が起こるようです。私自身はなったことがないので未経験です。
デバイスがiPhoneなのかAndroidなのかわかりませんし、Andoroidの場合は私が実機を所有していないもので検証できなくてごめんなさいね。
最終手段としてはもう「パソコンから操作する」ことになるかもしれませんね (´・ω・`)

----- 追記

今スマホから確認したところ、設定できていますよ。
設定状態がわからなくなった時は、アドレスバーのURL末尾に
?sp
を追加してリロードしてください。スマホ専用版(FC2がデザインしたもの)で表示されたら設定できていません。
Museテンプレートのデザインで表示されたら設定が完了しています。

-
2019/05/05 (Sun) 04:01

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/05 (Sun) 12:32

To Museカスタマイズの件 内緒さん③

こんにちは。

スマホ版無効化の件はこれで完了ということでお疲れ様でした。

-----
① 行空白のHTML標記 --- こちらが「段落間余白」にあたります
② 署名文頭の空白の入れ方

この2つで、「個別記事」ということですね。ようやく理解しました(笑)
私も察しが悪く申し訳ない ^^;

----- ①について

まず「どのデバイスでの作業なのか」でやり方が違います。
またややこしいことにFC2はパソコン用のエディターが2種類あります(旧投稿画面と新投稿画面)
そしてスマホ用も「ブラウザで書く」「アプリで書く」この2種類です。

パソコン用エディター「旧投稿画面」の場合
・改行の扱い「自動」にすると、改行したい文章末尾でEnterキーを押すことで下の行に折り返す
・改行の扱い「htmlタグのみ」にすると、改行したい文章末尾に <br> と書かなければ下の行に折り返さない

パソコン用エディター「新投稿画面」の場合
・通常モード(通常の表示)は旧投稿画面の「改行の扱い 自動」と同じです
・「HTML表示」に切り替えると旧投投稿画面の「改行の扱い htmlタグのみ」と同じです

これだけでもややこしいですね。さらにややこしいのは、パソコンから旧投稿画面の「改行の扱い 自動」で記事を書いた場合、その記事をの編集画面をスマホブラウザで開くと、内緒さんが言うような「横ひと繋がりになる」んですね。
これはFC2だけでなく大抵のブログがそうです(アプリを除く)

ただ、htmlソースコードが横になっているからといって、公開した記事自体の文章も同じかと言えば違います。
例えば

あいうえお<br>かきくけこ<br>さしすせそ

編集画面で上記の形になっていた場合、描画の状態は

あいうえお
かきくけこ
さしすせそ

と、<br>の書かれた位置でちゃんと改行されて表示が行われます。
「あいうえお」と「かきくけこ」の間に空白行を設けるには、スマホアプリやスマホであればEnterキーを押すだけなんですが、先に記したように「パソコンで書いた記事」を編集する場合でhtmlタグが表示されている場合には

あいうえお<br><br>かきくけこ<br>さしすせそ

と、<br>を連続させてください。
(これは本来の文法ではありません。正しいのはpタグを用いますが今回文法については度外視です)

<br>というhtmlタグが表示されているということは、
・パソコンで書いた記事(旧投稿画面の改行自動)をスマホで編集しようとした --- ソースが横一列
・パソコン旧投稿画面で改行の扱いを「htmlタグのみ」に指定している
・パソコン新投稿画面で「通常表示」で書いたものを「html表示」に切り替えた --- ソースが横一列

このいずれかで、可能性が高いのは最初と最後です。これは内緒さんご自身がわかっているはずなので状況を照らし合わせてください。
で、基本的に一定条件下を除き、htmlタグが目視できている状態であれば横一列で書く必要はありません。<br>程度は問題ないでしょう。

例えば

あいうえお<br>かきくけこ<br>さしすせそ

と既に記されている後に「たちつてと」「なにぬねの」を追加したい場合

あいうえお<br>かきくけこ<br>さしすせそ<br>
<br>
たちつてと<br>
なにぬねの

と書けば

あいうえお
かきくけこ
さしすせそ

たちつてと
なにぬねの

という描画になります。

----- ②について
文頭のスペースあるいはインデントですが、こちらもいくつかの方法があります。
1.エンティティ表記を使う(スペースを連続させて空白を作成する方法)
2.インラインCSSで直接CSSを充てる方法 --- html入力必須
3.スタイルシートでCSSを充てる方法 --- html入力必須

で、スマホから扱う場合は 1 の方法が簡単だと思います。簡単ですがたくさん打ち込まないと思い通りにはならないと思います。
記載するのは最初のコメントでお伝えした3つのエンティティいずれかです。


&emsp;&emsp;&emsp;&emsp;&nbsp;ハンドルネーム

こんな感じです。美しくはないですが簡単です。エンティティは辞書登録しておけばすぐに呼び出せますので、それを連続入力するだけです(&は半角に直します)

2と3の場合は記事編集画面にhtmlタグを表記する必要がありますのでスマホからは大変かもしれません。が、この2つが最も確実な方法です。辞書登録の文字数制限(バイト数制限)が許せばこちらも辞書登録で呼び出せます。

2の場合
<span style="display: inline-block; text-indent: 数値em;">文章</span>

「数値」の部分は空けたい文字数(半角計算です)を入れます。この方法では記事を書く際のhtmlだけです。

3の場合
<span class="sign">文章</span>

この方法の場合は記事を書く際に上記内容を記載する必要があるのと、テンプレートのスタイルシートに以下の内容を追加します(この作業は一度だけです)

.sign {
display: inline-block;
text-indent: 数値em;
}

おすすめは3の方法です。2の方法はスタイルシート編集が不要ですし、テンプレートを変更しても内容が活きます。3の方法はテンプレートを変更したら同じCSS内容を移植しなければスタイルが失われます。
2の方法は「もう少し調整したい」と思った時に一括修正ができません。修正したいページの編集画面を開いて手打ちで変更する必要があります。3の方法はスタイルシート内容を一度書き換えれば一括で修正できます。

-----
デバイス別のパターンなどがありますので、どの方法を選ぶかは内緒さんご自身でお決めくださいね。

-----
「サムネイルの代替」について

こちらは記事内にサムネイル対象となる画像が掲載されていない場合、及び「アイキャッチ画像」の指定もない場合にNo imageとして表示される画像の指定です。もし内緒さんが記事に画像を掲載しないのであればここにプロフィール画像を指定するのが手っ取り早いですね。ただしトップページはリスト型表示なわけですから「常に画像なし」だと同じ画像がズラリと並ぶことになります。

-
2019/05/06 (Mon) 00:36

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/06 (Mon) 21:20

To Museカスタマイズの件 内緒さん(終了のご報告)

こんばんは。

スマホデバイスだとhtml入力が多少厄介ですが一度お試しくださいね。
お疲れ様です :)

-
2019/05/18 (Sat) 14:16

管理人のみ閲覧できます

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

-
2019/05/18 (Sat) 15:36

管理人のみ閲覧できます

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

-
2019/05/18 (Sat) 15:37

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/19 (Sun) 15:30

To 異常音の件 内緒さん

こんにちは。

ご自身が結論づけている内容で合っていると思います。
異常音(大きな音が出る)はファンにホコリが溜まっている場合がほとんどなのでご確認ください。

あと、お察しの通りです。Muse好きなので(笑)

-
2019/05/19 (Sun) 16:32

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/19 (Sun) 19:09

To 異常音の件 内緒さん②

熱を伴っているならばもうほぼファン周りのホコリで確定だと思います。
ホコリが溜まる

ファンが上手く回らない

音が内部で反響する

熱がこもる

-----
気づいてくれる方が居て私も嬉しいです(笑)

深緑の女魔術師
2019/05/30 (Thu) 21:41

質問

いつも素敵なテンプレートな作成ありがとうございます。
カスタマイズ系の記事も未熟なブロガー故にためになります。
ってことでお借りします。

といいつつ、
質問があります。

1.トップページの画像にバーコードが埋め込まれますがこれは深い意味があるのでしょうか?
(業界的に初歩的なことでしたらごめんなさい)

2.せっかくなので泡(バブル)を使っちゃおう!と思って以下を記述しました。

元々読み込んでいるJSのasyncを消して、
以下Scriptを組み込んだ感じです。

// bubbly({
// colorStart: "#111", // グラデーション左
// colorStop: "#004C2B", // グラデーション右
// compose: "source-over", // 暗色背景の場合はこの1行削除
// bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
// });

カスタマイズ用のscriptにてstart~stopで背景色?の指定してるっぽいですが、
泡(水玉)の色ってどこで指定してるのでしょうか?
泡の背景色に元の茶色っぽい色から白?になってる感じがしたので指定しているのかな?と思いまして・・・
(そもそもscriptまたはCSSのカスタマイズがおしいかもですが・・・)

#URLは載せましたがこのテンプレは適用してません。

以上、よろしくお願いいたします。

vanillaice (Akira)
Akira
2019/05/31 (Fri) 01:32

To 深緑の女魔術師さん

こんばんは。

デザインがレコード盤風なのでバーコードでそれっぽくしているだけです。不要ならば削除して頂いて構いません。

水玉については色・サイズ共に自動生成なのではっきりと指定することはできません。
背景色など希望の色が私ではわかりませんので大雑把に方法をお伝えします。

水玉を生成しているのは
hsla(0, 100%, 50%, ${Math.random() * 0.25})
の部分です。背景色を明度の高いものにする(白に近い色にする)ならばこの部位を

hsla(${Math.random() * 50}, 100%, 50%, 0.25)

に変更し、赤字の部位を360までの間で変更して様子を見てください。数字が大きいほど色数が増えます。
また、このカスタマイズを行う場合はasyncを削除しますのでページの表示スピードは落ちます。
よろしくお願いします。

深緑の女魔術師
2019/06/01 (Sat) 11:02

To Akiraさん

早速なレスありがとうございます。

>>バーコードの件
デザインってことで分かりました。

>>泡の色の件
>>hsla(0, 100%, 50%, ${Math.random() * 0.25})
HSLをあまり使わないのでスルーしちゃいましたが、めっちゃ赤系で指定してたんですね。
0→100に変更にて出したかった緑系が出るようになりました。

ナビに検索だしたいやらトップの画像サイズ変えたいやらも
質問しようかと思いましたが、それらは自力で頑張ってみます。

解決ってことでありがとうございました。

vanillaice (Akira)
Akira
2019/06/02 (Sun) 00:21

To 深緑の女魔術師さん(終了のご報告)

ご希望の形に整ったようで安心しました。
お疲れ様でした :)

北九州映画サークル
2019/07/02 (Tue) 08:20

ありがとうございます。

この度、こちらのテンプレートを使用させていただきました。
とても素敵で、サークル内でもとても評判がいいです。
ありがとうございました。

vanillaice (Akira)
Akira
2019/07/02 (Tue) 17:16

To 北九州映画サークルさん

こんにちは。
ご丁寧にありがとうございます。励みになります :)

深緑の女魔術師
2019/10/30 (Wed) 15:12

ページナビの質問

いつもお世話になっております。
深緑の女魔術師と申します。

汎用ページナビ?(一覧の下に出るページ)の質問なのです。

説明があれなのでURL見ていただけると助かるのですが、
1、2、3、4(現在居るページ)、…、ラスト
となってることに先日気づきました。
(次の5ページ目が出ない)

ブログの設定or私がテンプレ壊したのかもですが、
5ページ目以降の表示方法を教えてくださいませ。

#追記
節穴ですいませんでJSでやってるのですね。
6になってるっぽいので10とかにすれば幸せになりそうです。
(自己解決しそうです)

以上です。

vanillaice (Akira)
Akira
2019/10/30 (Wed) 21:50

To 深緑の女魔術師さん

こんばんは。

解決済、ということで大丈夫でしょうか。お疲れ様です :)

深緑の女魔術師
2019/10/30 (Wed) 23:17

To Akiraさん

深緑の女魔術師です。

お手数おかけしました。

7個に変更後に余白などのCSSも見直して、
私的にそれっぽく出来たので解決で大丈夫です。

以上です。

vanillaice (Akira)
Akira
2019/10/30 (Wed) 23:53

To 深緑の女魔術師さん(終了のご報告)

解決済みということで安心しました。
スマホの見た目を少し調整された方が良いかもしれませんね。
お疲れ様でした :)

深緑の女魔術師
2019/10/31 (Thu) 12:40

To Akiraさん

深緑の女魔術師です。

別件??

>>スマホの見た目を少し調整された方が良いかもしれませんね。
って書かれてしまうと非常に気になるのですが…

これはページナビのデザインですか?
(コメ前後に修正作業はしてました)

それともブログのデザインでしょうか?
CSS詳しくないヒトなので専門家のご意見は聞いてみたいです。
(ダメ出しばっかかもですが…)

以上です。

vanillaice (Akira)
Akira
2019/10/31 (Thu) 14:27

To 深緑の女魔術師さん

こんにちは。

スマホ用のメディアクエリを削除されているので画像と文章の横並びが維持されていますよね。なので記事タイトルが長いときなど、320pxのスマホ(iPhone5Sなど)ではテキスト部位の高さと画像の高さの差が顕著になりバランスが悪くなることがあります。
そういう意味です (o'ω')ノ

深緑の女魔術師
2019/11/01 (Fri) 10:06

To Akiraさん

深緑の女魔術師です。

あーやっぱり(笑)
想定してた部位ですがダメダメですよね。。。

テンプレ作っていただいて恐縮だし、私的な好き嫌いなだけですが、画像・件名の縦表示がなんかしっくりこないと思ったのであーなりました。

私がいつも無駄に長い件名をつけてるせいですが、おっしゃる通りで件名が長いとひどいですよね。

メイン画像のアスペクト比もあれだったりで、横サイズのちゃんとある端末でも表示があれだったりで、ほとんど技量不足で諦めたのが本音です。

>>320pxのスマホ(iPhone5Sなど)・・・
実機は未確認で火狐のエミュでしか見たことないですが、この子本当に厄介ですが意識しないとダメってことですね。

メディアクエリは実質消したに等しいサイズにしちゃっったので、いったん元の数字に戻して再デザインしたいと思います。

ご指摘ありがとうございました。

以上です。

vanillaice (Akira)
Akira
2019/11/01 (Fri) 16:29

To 深緑の女魔術師さん

こんにちは ('0')/

そうですね。横並びを維持する場合は思い切って概要文を無くすなどしないとちょっとバランスが悪いかもしれない (´・ω・`)
iPhone 5sは最新iOS13のサポート対象から外れましたので(つまりサポート終了)、もしかすると320pxデバイスはもう気にしなくて良いかも、と思いましたが、来年iPhone SE2ってのが出るらしい(笑)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)