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

2019年04月24日
テンプレート
60
HTML5 CSS4 RWD Dark
Museテンプレート

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

最終更新 2019.4.27
  • モーダル検索を廃止
  • プロフィール(lazyloading対象)とサイト内検索を追加
名称 Muse
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大840px
サイド --- 最小264px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾(手書き風)
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 色調変更, ヘッダー背景画像変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 ・ IE非対応
パソコン タブレット スマートフォン
変則2カラム 2カラム or 1カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 下 サイドメニュー --- 下 サイドメニュー --- 下

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

サンプル

Samples

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

カスタマイズのコツ

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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

IE非対応

This theme is incompatible with Internet Explorer.

全バージョンのIE非対応です。対応(フォールバックやポリフィルの導入等)のお手伝いも致しませんので予めご了承ください。

IEユーザーへの注意書きが必要な方は以下のページをご参照ください。

【IE撲滅運動】IE利用者への啓蒙オーバレイ表示

ぼっちんさん に教えて頂きました。「こんなのあるぜ?」って感じで(笑) 最近は「IE非対応サイト」も徐々に増えつつあります。非対応というのは要は「IE向けCSSフォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

ドミナントカラー

Dominant colors

root で検索されますとスタイルシート内に各種カラーなどがまとまって記載されています。
各々カラーコードを変更すると同じ色指定が行われている要素を一括で修正できます。

ページ送りサムネイルについて

About thumbnails in pager

個別記事ページ送りのサムネイル画像を表示するにはブログ個人設定で OGP設定を有効化 してください。
メタタグの設定

記事編集リンクについて

Location of edit icon

個別記事タイトル下の管理人プロフィール画像がリンクになっています。閲覧者が気づきにくいようにカーソル表示を無効化してあります。

新着記事リストについて

About latest post list

テンプレートの方にサムネイル付きの新着リストを入れてあります。公式プラグイン「新着記事(サムネイルつき)」をダウンロードしている方は内容が重複しますので、テンプレートの方を削除するか(html, CSSの修正が必要です)、プラグインを非表示にしてください。

テンプレートの方はプラグインと比較してサムネイル画像の解像度が高いのと、遅延読み込み対象にしていますので速度改善になるのと、CSSの記載方法によるバリデートエラー回避などが行われます。

左右カラム入れ替えの仕方

How to reverse the direction of rows.

#main-container { で検索されますと3箇所ヒットします。
3つ目display: flex; の直下に flex-direction: row-reverse; を追加。
続いてすぐ下にある #primary {margin-right: 60px; 緑部位 right を left に変更。

スピード強化について

Behavior about navigation

リンク先をprefetchするようになっています。公式爆速テンプレートのように一瞬で表示というわけにはいきませんが、それでもページ遷移はかなり素早いと思います。爆速はマウスオーバーでprefetchを行うようなスクリプトになっています。Museではabove the fold(ファーストビュー)内のリンクをprefetchします。爆速で利用されているpjaxについては導入していません(広告表示の阻害, JS及びプラグインが制限されてしまうため)

prefetchは諸刃といいますか、リンク数が過剰だとブラウザがアイドル状態にならない(常に可動している)ので却って害になることもあります。そのため、サイドメニュー内のリンクの多くを対象外にしています。また、prefetchが行われるのはユーザーのブログドメインと同じドメインを持つページのみ。同一ドメインでも別タブで開くリンクは無効にしてあります。

検査では「FC2広告あり(無料アカウントの場合) + トップページ記事表示件数30件 + キャッシュ有効」という条件で概ね200〜700ミリ秒で表示できると思いますが、トップページの件数は12〜20件程度が妥当だと思います。あまり欲張って数を多くすると、prefetchはその性質上メモリや帯域を使いますので適度な数に留めるようにしてください。

また、Museのスペックを最大限に活用するには SSL設定の有効化 をおすすめします。自己責任でご判断をお願いします。
SSL設定(301有効化)

サイドメニュー部「プロフィール」について

About profile in side menu

プラグイン「プロフィール」と重複します。テンプレートの方は lazyloading(遅延読み込み)対象 であること、そしてすぐ下に サイト内検索 をセットにしてあります。遅延させることでスピード対策になりますので、プラグイン側を非表示にされることをおすすめします。

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

Cautions before asking for something.

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

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

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

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

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

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 60

There are no comments yet.

-  

2019/04/25 (Thu) 02:00

管理人のみ閲覧できます

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

-  

2019/04/25 (Thu) 02:03

管理人のみ閲覧できます

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

Akira  

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

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

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

M  

2019/04/25 (Thu) 13:41

W3Cエラーチェックの件

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

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

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

Akira  

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

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の件ありがとうございます(^^)うっかりしました。削除します!!

Akira  

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

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

管理人のみ閲覧できます

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

Akira  

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

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

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

Akira  

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

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

管理人のみ閲覧できます

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

Akira  

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

To そふぃあさん

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

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

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

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

Akira  

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

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

こんにちは。

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

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

そふぃあ  

2019/04/26 (Fri) 17:56

To Akiraさん(完了報告)

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

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

Akira  

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

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

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

-  

2019/04/26 (Fri) 21:50

管理人のみ閲覧できます

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

Akira  

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

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

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

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

-  

2019/04/27 (Sat) 03:18

管理人のみ閲覧できます

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

-  

2019/04/27 (Sat) 09:21

管理人のみ閲覧できます

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

Akira  

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

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

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

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

M  

2019/04/28 (Sun) 08:32

モーダルの件

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

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

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

M  

2019/04/28 (Sun) 13:55

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

Akira様

たびたびすみません。

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

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

Akira  

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

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ユーザーさんが閲覧する際に、カテゴリのところをクリックなどしなければ閲覧に支障がないのでしょうか?もしそうなのであれば、このままにしておこうかと思いまして(;'∀')

Akira  

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

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

Akira  

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

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

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

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

M  

2019/04/30 (Tue) 17:53

To Akiraさん(お返事不要)

Akira様

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

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

ライ  

2019/05/02 (Thu) 19:33

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

Akira  

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

To ライさん

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

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

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

-  

2019/05/02 (Thu) 22:23

管理人のみ閲覧できます

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

ライ  

2019/05/02 (Thu) 22:40

No title

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

Akira  

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

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

こんばんは。

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

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

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

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

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

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

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

&nbsp;
&emsp;
&thinsp;

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

Akira  

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

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

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

-  

2019/05/03 (Fri) 15:32

管理人のみ閲覧できます

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

Akira  

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

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

管理人のみ閲覧できます

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

Akira  

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

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

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

-  

2019/05/04 (Sat) 09:43

管理人のみ閲覧できます

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

Akira  

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

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

管理人のみ閲覧できます

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

Akira  

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

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

こんばんは。

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

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

ではなく

xxx(ハンドルネーム)

令和元年 5月1日

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

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

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

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

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

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

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

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

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

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

----- 追記

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

-  

2019/05/05 (Sun) 04:01

管理人のみ閲覧できます

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

Akira  

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

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

管理人のみ閲覧できます

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

Akira  

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

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

こんばんは。

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

-  

2019/05/18 (Sat) 14:16

管理人のみ閲覧できます

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

-  

2019/05/18 (Sat) 15:36

管理人のみ閲覧できます

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

-  

2019/05/18 (Sat) 15:37

管理人のみ閲覧できます

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

Akira  

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

To 異常音の件 内緒さん

こんにちは。

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

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

-  

2019/05/19 (Sun) 16:32

管理人のみ閲覧できます

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

Akira  

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

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は載せましたがこのテンプレは適用してません。

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

Akira  

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

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に変更にて出したかった緑系が出るようになりました。

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

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

Akira  

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

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

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

コメント投稿

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)