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

2019年07月22日
テンプレート
12
HTML5 CSS4 RWD Dark
Mystyleテンプレート

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

最終更新 2019.7.29
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  3. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

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

【重要】テンプレートの変更点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>
②について

<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 { で検索するとスタイルシート内に2箇所あります。1箇所目のルールセットを 削除 し、2箇所目の line-height: var(--main-line-height); の直下に margin: 20px 0;追加

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

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

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

名称 Mystyle
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大830px
サイド --- 最小290px
記事内で使える見出しレベル h2からh6まで
jQuery導入 なし (Vanilla JSのみ)
Font Awesome導入 なし (インラインSVG)
Lazyloading導入 あり
構造化マークアップ 個別記事のみ
BreadcrumbList(パン屑リスト)
BlogPostiong
Page Speed Insigtsスコア
固有機能 ・ 見出し装飾
・ 動画縦横比固定
使い方詳細はARTICLE PAGE DEMOを参照
推奨カスタマイズ 色調変更
ライセンス 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
画像クリックでデモ画面へ
dark
ARTICLE PAGE DEMO
画像クリックでデモ画面へ
dark
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フォールバックは書かないからデザイン崩れてても知らーん」ってことです。大抵は。...

色調変更カスタマイズについて

How to change the tone of colors

今回は ヘッダー画像の変更を想定していません。その代りに暗色背景への切り替えが簡単にできるようにしてあります。色合いはDEMOの「dark」を確認してください。

注)主要カスタマイズ で検索すると

/* light theme */
内容

/* dark theme
内容
 */

スタイルシート内に上記のような内容がありますので以下の通り変更

/* light theme
内容
 */

/* dark theme */
内容

色調だけでなくカスタマイズが想定される部位(全体幅やフォントサイズなど)についてまとめてありますので、色調切り替え以外に不足があればそれぞれ何がどこに対応しているのかをガイダンスで確認しながら作業を行ってください。

--xxx: 1.4rem;

こんな感じになってます。変更して良いのは :(コロン)の右側にある緑色の内容だけです。左側にある -- ハイフン2連の文字列は変更しないよう注意してください。また、末尾の ; (セミコロン)も消してしまわないよう注意。

light/ dark の切替は「閲覧者による任意選択」ではなく「管理者によるデザイン選択」です。JSを利用し、ボタンクリックなどでCSSを切り替える手法もありますが、閲覧者さんってそんなに変更しないと思うんですよね。それに今だとブラウザレベルでダークモードの切り替えがありますし。もっと言えばデザインを取り除いてテキストだけを表示することも最新ブラウザでは簡単にできますし(スマホの話です)

そういった理由から管理者によるデザイン選択という意味の切り替えにしてあります。

ヘッダー画像変更については禁止というわけではありませんので自由にして頂いて構いません。ただし縦幅(高さ)がかなり小さいので画像選びが大変かもしれません。また配置などに結構苦労するかも。いずれにしろご自身でできる範囲でご自由にどうぞ。

ついでですがカスタマイズ便宜を図った流れでなるべく英語表記を避けておきました。あーでも「多言語」で申請しちゃった気がするな。ヤベ。いえ、ひとり事です ←

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

About thumbnails in pager

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

記事編集リンクについて

Location of edit icon

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

スピード強化について

Behavior about navigation

Lazyload, service worker, prefetchなど導入済みです。lazyloading(画像の遅延読み込み)について個別記事にユーザーが任意掲載する画像への自動適用はありません。

「新着記事リスト」と「プロフィール」について

About recent list and profile

それぞれのプラグインを表示している方は内容が重複します。テンプレート内のものは以下の特徴があります。

  • 画像遅延読み込み(スピード対策)
  • 高dpiデバイスでの画像ぼやけ対策(新着記事リスト)

できればプラグイン側を非表示にされた方が良いと思います。表示位置の変更は可能です。
プラグイン設定ページ

削除可能なJSについて

Delete specific JS if you want to

特定条件下でしか利用しないJSが含まれていますが、特定条件に該当しない場合には無駄な内容 です。以下の項目に当てはまる方は削除をおすすめします。

【FC2検索バーを利用しない人は削除】

<!-- 注)FC2検索バー非表示の方ここから削除可 -->

上記を目印にガイダンスに従って削除。

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

Cautions before asking for something.

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

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

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

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

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

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 12

There are no comments yet.

Janedoe1471  

2019/07/22 (Mon) 18:34

ゴールド

ダークの場合のブログタイトルが、金色に見えます。
金色って、難しいんですが、これはすごいとしか。
タイトル文字の色の変化とか、自分で考えてみないと、身につかないので、これから、じっくり悩みたいと思います^^
素晴らしいテンプレートを、色違いで2種類も、お疲れさまでした^^

-  

2019/07/24 (Wed) 14:08

管理人のみ閲覧できます

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

-  

2019/07/24 (Wed) 14:21

管理人のみ閲覧できます

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

Akira  

2019/07/24 (Wed) 14:44
vanillaice (Akira)

To Janedoe1471さん

Janedoe1471さん、こんにちは。お返事遅くなりました (*_ _)

ゴールド系を一色で表現しようと思うと難しいですよね。グラデーションを用いた目の錯覚を狙うとそれなりになります。
CSSで「質感」表現ができるようになるともっと楽しくなるのだけれど。ザラザラとかカサカサとか(笑)

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

Akira  

2019/07/24 (Wed) 14:51
vanillaice (Akira)

To ブログカードの件 内緒さん

解決済ということで大丈夫でしょうか。

blockquoteの装飾は大抵の場合、blockquoteタイプセレクタのbackgroundに直接あてるか(Mystyleの場合はこちら)、blockquoteの::before または ::after疑似要素のcontentの値であてるか、このいずれかです。
なのでブログカード側のblockquoteにクラス名を付けて

.xxx {
background: transparent;
}

.xxx::before,
.xxx::after {
content: "none";
}

を明示しておけばタイプセレクタよりもクラスセレクタの方が優先度が高いので干渉しなくなります。

-  

2019/07/24 (Wed) 15:20

管理人のみ閲覧できます

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

のぎ  

2019/07/25 (Thu) 07:53

グローバルナビゲーションの下に画像RSSを設置したのですが少ししか表示されません。解決策をご教授下さい。お願い致します。

Akira  

2019/07/25 (Thu) 11:52
vanillaice (Akira)

To ブログカードの件 内緒さん(完了のご報告)

こんにちは。

大抵の場合はそれで行けるはずでテンプレート側のblockquoteに手を入れる必要はまず生じないと思いますので、CSS内容の管理だけしっかり行ってくださいね。
お疲れ様でした :)

Akira  

2019/07/25 (Thu) 12:02
vanillaice (Akira)

To Akiraさん

> 少ししか表示されません〜

「少し」というのは数(掲載数)のことですか?それとも高さ(表示領域)が足りないという意味ですか?
後者だと思いますが念の為確認です。後者として説明を進めます。

RSSのコード内に
horizontal
というクラス名があり、これがナビゲーションのクラス名とバッティングしています。
テンプレートのhtml内及びスタイルシート内にある horizontal を全て別のクラス名に変更してください。

例)
<nav class="horizontal" id="navi-horizontal">
↓ 変更
<nav class="temp-horizontal" id="navi-horizontal">

注意
idは関係ありません。
navi-horizontal などhorizontalの前後に文字列が付いているものは関係ありません。
文字列指定による一括変更をされる場合は注意してください。
変更箇所はhtml内に8箇所、スタイルシート内に1箇所です。

のぎ  

2019/07/25 (Thu) 12:19

ご推察通り、高さが足りないという意味でした。すみません。

ご指示通りにしましたら、デザインもおかしくなってしまいました。
お手数ですが宜しくお願い致します。

のぎ  

2019/07/25 (Thu) 14:26

正常に表示されるようになりました。
有難う御座いました。

Akira  

2019/07/25 (Thu) 18:14
vanillaice (Akira)

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

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

コメント投稿

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

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