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

投稿 2017年05月02日
31
テンプレート
FC2TemplateHTML5CSS3Responsive
Room38テンプレート
PCアイコン TBアイコン SPアイコン

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

最終更新 2018.1.25

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

  • jQueryのバージョンを3.2.1にアップしました
  • 画像遅延読み込みを導入しました(デフォルトではグリッドページのみ適用)
  • リセットCSSを最小限にし、一部CSS内容を圧縮しました
  • フォントのサイズ指定にremを導入しました
  • 構造化マークアップ・パン屑リストを導入しました
  • 個別記事の記事タイトルをh2からh1に昇格しました

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

名称 Room38
動作確認済みブラウザ
トップページ記事並び 要約表示タイプ
記事幅 メイン --- 最大856px
サイド --- 260px
記事内で利用可能な見出しレベル 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
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
2カラム 1 or 2カラム
(デバイス幅依存)
1カラム
左サイドメニュー
(デフォルト)
下 or 左サイドメニュー
(デバイス幅依存)
右サイドメニュー(ドロワー)

GWは渡米予定だったのですが。何故か日本に居るあきらでございます (´・ω・`)

るーむ さーてぃえいと
5月2日申請致しました

TOP PAGE DEMO
ARTICLE DEMO
FAQ

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

・カラムの形状変更や位置変更。
・トップページの表示タイプ変更・レイアウト変更(要約表示から全文表示へ変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。

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

スマートフォンでのレイアウトについて
Smartphone layout

スマホ版ライクになってます。

とっても簡素(笑)
スマホではプラグイン内容が全てドロワー内に収納されますので、その点もお考え併せの上で使用をご検討ください。

既知の表示不備
About known issue

不備、というほどではないかもしれませんが。

  • ページスクロール開始時に左サイドメニューが一瞬分断されることがあります。
    (上部は ヘッダー、下部は プラグイン ですので一体ではありません)
  • メインコンテンツの縦幅が極端に短い時、ページ遷移直後にサイドメニュー部のプラグインが一瞬メインコンテンツ側に寄せられることがあります。
    (コンマ数秒で直ります)

本テンプレートは構造が少し特殊です。
左側のサイドメニューはヘッダーとプラグインがくっついてます。
サイドメニューの内容をhtmlの最初に書いてしまえば上記のような事象は起こりませんが、検索botは html内容の上にある内容をより重要とみなす という特徴がありますので、サイドメニューをメインよりも先に書いてしまうのは良くないと判断しました。
html構造では
ヘッダー → ナビゲーション → メインコンテンツ → サイドメニュー
の王道を守って製作しました。
スクロール時のサイドメニュー分割が目立つ時はPCクリーニングをして頂くと良いかもしれません。
メモリ容量が落ちてスクロール動作自体がぎこちなくなった際に顕著になります。

ドミナントカラー
Dominant colors

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

rgb(149,104,138) 基本リンク色, ページ送り背景色 など
rgb(243,244,248) 全体背景色, No image画像背景色(変更できます)
white サイドメニュー・メインコンテンツ背景色
管理人コメントと訪問者コメントを分ける方
The way to identify admin comments

デフォルトはグレー背景アイコン。
サンプル

今回は吹き出しの左右を入れ替えられます。
CSSソース末尾に以下を追加(ちょっと煩雑な内容で申し訳ないです)

.name管理人ハンドルネーム {
  padding-right: 80px;
  padding-left: 0;
}

.name管理人ハンドルネーム .arrow-box:before {
  right: -8px;
  left: auto;
}

.name管理人ハンドルネーム .arrow-box:after {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
  right: -80px;
  left: auto;
}

.name管理人ハンドルネーム .visitor-name {
  right: -80px;
  left: auto;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください。

* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。

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

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

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

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

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

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

31 COMMENTS

There are no comments yet.

にゃじ  

テンプレート使わせていただいてます。

とても見やすく素敵なデザインが目に留まりダウンロードさせていただきました。
自分でカスタマイズしているのですが、分からないところが出てきたので、質問です…無知で申し訳ありません。

#main-containerの幅をPCでの表示では80%くらいで、スマホでの表示は100%…ということは可能でしょうか?
また、記事の文字の大きさを変えたい(大きくしたい)のですが、どこを変更すればよいでしょうか?

よろしくお願いしますv-436

2017/12/18 (Mon) 23:01

にゃじ  

度々すみません;

記事の文字の大きさを変えることは出来ました。よく調べもせずにすみませんv-436

2017/12/19 (Tue) 00:11

Akira  

To にゃじさん

こんばんは。

ちょっとよくわからないのですが、デフォルトの幅が「広すぎるから狭くしたい」ということなのか、逆に「狭いから広くしたい」のどちらでしょうか。
全体幅を%指定すると比較的画面サイズの小さい方は閲覧しづらいように思うのですが。
画面サイズが1920、2560と大きい場合にはひとつひとつのグリッドサイズがものすごく大きくなりますし。
(タブレット含む)

> スマホでの表示は100%〜

こちらはデフォルトでそのようになっているはずです。
また、グリッドの形状も変わります。
左右の余白が邪魔(テキストと画面左右辺をぴったりくっつけたい)ということですか?

いずれにしてもPCで常に80%というのは危険な気がしますがいかがでしょうか (´・ω・`)
PCったってサイズはピンキリです。
自己責任で

#main-container
width: 100%; を width: 80%;
max-width: 1300px; と padding: 0 0 60px; を削除。

レスポンシブですからブレイクポイントというのが必要です。
CSS末尾に

@media screen and (max-width: 414px) {
#main-container {
width: 100%;
}
}

を追加。
その他の全体幅ブレイクポイント(タブレットなど)やグリッドの並び替えのブレイクポイントなどはご自身で対処をお願いします。

2017/12/19 (Tue) 01:27

にゃじ  

ありがとうございました!

早速のご回答ありがとうございます。
無事できました。今回、ブレイクポイントというのを初めて知り、勉強になりました。
ありがとうございましたm(_ _"m)

2017/12/19 (Tue) 07:57

Akira  

To にゃじさん

ご希望に沿う形になったのであれば良かったです。
お疲れ様でした

2017/12/19 (Tue) 15:27

-  

管理人のみ閲覧できます

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

2017/12/24 (Sun) 11:52

Akira  

To Room38ご利用中の 内緒さん

ご丁寧にありがとうございます。
とっても励みになります。
内緒さんも来る年がより良いものになりますよう

2017/12/24 (Sun) 20:51

環  

御礼

はじめまして。こちらのテンプレートがとても素敵だったのでお借りして、
新年を機にブログの模様替えをいたしました。
そうしたところ、以前よりもずっと使いやすく、
何より写真が映えて美しく見えるようになった!と大満足です。
Akiraさんのテンプレートが使いたくて、
別テーマで書いていたブログも
FC2にお引越ししてしまいました。
そのアドレスはこちらになります。

http://28squaremeters.blog.fc2.com/

また事後報告で申し訳ないのですが、
こちらのブログをリンクさせていただきました。
不都合がありましたらすぐに外しますので、
そのようにおっしゃっていただければ助かります。

この度は本当にありがとうございました。

2018/01/02 (Tue) 21:56

Akira  

To 環さん

あけましておめでとうございます
リンクはどうぞご自由になさってくださいね。
ご丁寧にありがとうございます。とても励みになります

2018/01/03 (Wed) 15:11

-  

管理人のみ閲覧できます

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

2018/01/03 (Wed) 21:10

Akira  

To Room38カラムカスタマイズの件 内緒さん

ありがとうございます

カラム数の増減や位置変更などのカスタマイズは原則として関与しないことにしております。
ここを受け付けてしまうと次から次へと個人カスタマイズサポートしなくてはいけなくなってしまうもので (´・ω・`)
ですが今回内緒さんはほとんどご自身で作業を済ませていらっしゃいますので、仕上げのアドバイスという形でお願いします。
細かなCSS装飾などはご自身で行ってくださいね。

--------
その前にまず一度用語の整理をされると良いと思います。
参考記事
https://vanillaice000.blog.fc2.com/blog-entry-453.html

「タグが正しいかどうか」と問われた場合、タグというのは
<div>
<section>
<article>
<nav>
これが「タグ」ですので、使用する「定義」が正しいかどうかを尋ねられているのかと思ってしまいます。
htmlタグはそれぞれ「意味」「定義」を持っていますので、そのことかなぁ、と (´・ω・`)
内緒さんのご質問は
「追加htmlの構造が正しいか、記述する位置が正しいか。」
をお尋ねなんですよね。その前提でお答えしますけれども(笑)

---------
で、使用する「タグ」についてはdivで良いと思います。
現状では内容の確認が私ではできませんので(aaaaaa...の羅列が表示されています)、
リンクの集合体を追加するのであればnavが最適でしょうし、何か重要な内容を記すのであればarticleでも良いと思います。
深く考える必要が無い場合はdivで。

----------
作業の前に一旦デフォルトの状態に戻すか、それが難しい場合には再DLをおすすめします。
現状既にレイアウトが壊れてしまっていますので、一旦綺麗な状態に戻してください。
再DLの仕方はお手元のテンプレートの名称を変更(Room38_old など)、その後公式ページでDL。
名称が同じだと再DLできませんので事前に変更を。

----------
【html記述場所】
htmlソース内に
<div id="main-fit-wrapper">
という箇所がありますので、その直下に以下を追加してください。

<div id="main-top">内容</div>

内容は私ではわかりません。内緒さんが記したいものを入れます。
class="cf" は不要です。既存クラス名を流用する際は「どんな装飾が行われるのか」を見極めてから使用してください。
cfクラスはfloat解除用クラスで、今回の追加htmlでfloatは利用しません。

----------
【CSS記述場所】
CSSソース(スタイルシート)末尾に以下の内容を追加。

#main-top {
margin: auto;
padding: 上下px 左右px;
}

@media screen and (max-width: 960px) {
#main-top {
max-width: 700px;
}
}

paddingはご自身で調整してください。
これが無いとブロックの上下左右辺と文字がぴったりくっついてしまいます。
背景色や文字の大きさなども必要があれば最初の#main-topへ追加。
メインコンテンツとの間に距離を取りたい場合には最初の#main-topのmargin: auto;を
margin: 0 auto 距離px;
に変更。

くれぐれもfloatは行わないようにしてください。レイアウトが崩れます。
position: relative;も不要です。

---------
【カテゴリと日付の右寄せ】
CSS末尾に以下を追加。

.element-category,
.element-datetime {
text-align: right;
}

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

2018/01/04 (Thu) 13:10

-  

管理人のみ閲覧できます

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

2018/01/04 (Thu) 14:26

Akira  

To Room38カラムカスタマイズの件 内緒さん②

htmlはテキストの位置揃えを行なったり、色を付けたりといったことを行うために用いるものではありません。
これら装飾(テキストを左寄せ以外に変更するのも「装飾」です)は全てCSSで行います。
ですからhtml内容の追加は不要です。
htmlとCSSは全く別のものですので、「CSSにhtmlタグを追加したら〜」といった表現を取られると質問を受ける側がとても混乱してしまいます。
本件についてもスタイルシートにhtmlを書いてしまったのかと思いました (´・ω・`)
htmlとCSSは明確に区別をしてくださいね。
そして「タグ」という表現もほとんどの方が間違った使い方をしていますので、もしQ&Aで質問したりすることなどがあればいっそ使わない方が良いと思います ^^;
今回の件は「タグの追加」ではありません。「html要素とCSSデザインの追加」です。「タグ」云々は無関係です。

修正後のCSSを拝見したところ

#main-top {
内容
}

@media screen and (max-width: 960px) {
#main-top {
内容
}

.element-category,
.element-datetime {
内容
}

となっていますが正しくは

#main-top {
内容
}

@media screen and (max-width: 960px) {
#main-top {
内容
}
}

.element-category,
.element-datetime {
内容
}

で、赤字の記号が一つ欠けています。
よろしくお願いします。

2018/01/04 (Thu) 20:34

-  

管理人のみ閲覧できます

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

2018/01/04 (Thu) 21:43

Akira  

To Room38カラムカスタマイズの件 内緒さん(完了のご報告)

修正できたということで安心しました。
ちなみに「タグを作る」とも言いませんけれどもね(笑)
タグはユーザー任意で作ることはできませんので。
たぶんソースコードのことを「タグ」と表現しているのだろうと思います。

煩いことを言うようですが用語は正しく用いないと質疑応答が上手く行きません。
かといって知らないと恥ずかしいとか覚えなきゃいけないといったことでもありません。
どちらかと言えば知らなくて当たり前だし日常生活で知っておく必要性も全く無い (´・ω・`)

お疲れ様でした

2018/01/04 (Thu) 21:54

-  

管理人のみ閲覧できます

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

2018/03/07 (Wed) 02:56
vanillaice (Akira)

Akira  

To Room38の件 内緒さん

ありがとうございます

結論から言うと、スマホ版のフローティング広告を外す手段は有料アカウントの登録以外には有りません。
無料ブログの運営は広告が生命線ですから、それを侵害すれば強制退会は免れません。
FC2ブログの有料版は月額300円程度と他サービスと比べてもかなり良心的な金額ですので、今のところ予定は無いとのことですが再考されてはいかがでしょうか。
たぶんそれが精神衛生上で最も良い方法だと思います(笑)

--------
現在の方法ですが一言で言えば逆効果です。
というよりそもそもPC版とスマホ版はシステム自体が異なりますので互換性がありません。
例えばスマホ版はコメント入力時に別種ページを利用しなければいけませんし、プラグインもそのまま表示できませんし、タグページに至っては存在しません。
ですから「スマホ版ソース受付画面にPC版をコピペして送信」で済む話ではないです。

それにスマホ版の方が広告量が多いですよ。
フローティング広告はスマホ版・PC版というテンプレート種別関係なく等しく表示されます。
アクセス端末を見分けて表示させていますので意味がありません。
それに加え他ブロガーの推薦記事一覧やランキング、別種バナー広告ももれなく付いてきます。

またユーザーの起こすアクションが何らかのシステム誤動作を引き起こし広告が表示されない、ということがあれば待っているのは垢バンですね (´・ω・`)
(既に現在それに抵触していますのですぐ戻されることをおすすめします)
フローティング広告は広告種の中で最も高額設定のはずですのでそれを侵害された場合FC2が見逃すことは無いと思います。

スマホ併用時の広告料とレスポンシブ採用時のそれを比較した記事はこちらです ↓
【スマートフォン版の非表示を勧める理由】
https://vanillaice000.blog.fc2.com/blog-entry-579.html

2018/03/07 (Wed) 15:24

-  

管理人のみ閲覧できます

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

2018/03/07 (Wed) 17:32
vanillaice (Akira)

Akira  

To Room38の件 内緒さん(終了のご報告)

わかりますー。私も「ブログにお金をかける必要などない」と思ってるクチなので。
テンプレートや商材を買う行為もワタシ的にはNOですね。
でもフローティング広告のウザさに屈しました((((笑)

よろしければリクエストに一票お願いします(笑)
https://request.fc2.com/ja/request/8209

どこのブログサービスもスマホ画面下の広告は重要視していますが、FC2のは質悪すぎ。

嬉しいお言葉もありがとうございます。励みになります

2018/03/07 (Wed) 18:43

-  

管理人のみ閲覧できます

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

2018/03/31 (Sat) 13:55
vanillaice (Akira)

Akira  

To Room38ブログタイトルの件 内緒さん

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

注)ブログタイトルフォント関連
で検索されますとCSS内にありますので目印にしてください。
この括りの
font: 2.2rem/1.4 省略;
が「大きさ」です。
1rem = 10px ですので例えば小さくするのであれば
2rem あるいは 20px という書き方でも構いません。

------
「色」はその直下にある
#blog-title a {
color: black;
}
が該当箇所です。

「マウスホバー時の色」はさらにその直下の
注)ブログタイトルホバー時文字色
の目印がありますのでそれぞれ希望のものに変更してください。
よろしくお願いします。

* 記事内の説明にも明記していますが、カスタマイズを行いそうな箇所については予めガイダンスをつけてあります。
事前に
注)
で検索して頂くことで全て出てきますのでご確認をお願いします。

2018/03/31 (Sat) 16:01

-  

管理人のみ閲覧できます

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

2018/03/31 (Sat) 17:06
vanillaice (Akira)

Akira  

To Room38ブログタイトルの件 内緒さん②

> レイアウトがん?って感じになってしまいます。〜

その「ん?って感じ」がどんな感じなのか私には全くわかりませんので何とお答えしたものやら (´・ω・`)
崩れるのですか?それとも見た目の体裁が悪いということでしょうか。

------
> 文字の太さは変えられるのでしょうか〜

太くしたいという意味であれば

font: bold 2.2rem/1.4 省略;

赤字を追加、あるいは bolder でも良いと思います。
一つお願いなのですが、ご希望は明確にお伝えください。
「変えたい」だけでは大きくしたいのか小さくしたいのか、細くなのか太くなのかが伝わりません。
双方の時間の節約のために詳細をお知らせ頂くと円滑に進むかと思います。
お手数おかけします。よろしくお願いします。

2018/03/31 (Sat) 17:26

-  

管理人のみ閲覧できます

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

2018/03/31 (Sat) 19:08
vanillaice (Akira)

Akira  

To Room38ブログタイトルの件 内緒さん(完了のご報告)

完了したということで良かったです。
お疲れ様でした

2018/04/01 (Sun) 00:11

-  

管理人のみ閲覧できます

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

2018/05/19 (Sat) 19:18
vanillaice (Akira)

Akira  

To フローティング広告の件 内緒さん

こんばんは。

そのようですね。正直驚きました(笑)
ちょっと確認したい点などありますので運営から回答が得られましたら記事にする予定です。

2018/05/20 (Sun) 20:39

-  

管理人のみ閲覧できます

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

2018/07/10 (Tue) 23:29
vanillaice (Akira)

Akira  

To Room38 newマークの件 内緒さん

こんばんは。

> PC版の記事にはnewが表示されず、SP版はnewが表示されていおりますが、こちらは仕様なのでしょうか?〜

「SP版」というのは私のテンプレートとは全く関係ないですよ。
内緒さんが現在設定されているのはFC2ブログのデフォルトスマホ版です。
Room38はレスポンシブデザインですのでPCとSPのデザインを共通化するには本記事内容にある通りレスポンシブ設定を済ませてください。

その他参考記事
https://vanillaice000.blog.fc2.com/blog-entry-491.html
https://vanillaice000.blog.fc2.com/blog-entry-711.html

newマークは出るようになっていますが表示期間は記事をUPして24時間です。
スマホ版の期間設定は存じません。
期間を延ばしたい場合には
s=24
で検索されますとhtmlソース内上の方に1箇所ありますので、赤字部位24をご希望の数値に変更してくださいね。
24は24時間(1日)、48に変更すれば48時間(2日)になります。
よろしくお願いします。

2018/07/10 (Tue) 23:40

-  

管理人のみ閲覧できます

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

2018/07/11 (Wed) 20:58
vanillaice (Akira)

Akira  

To Room38 newマークの件 内緒さん(完了のご報告)

良かったですー。
こちらこそよろしくお願いします。
お疲れ様でした

2018/07/11 (Wed) 23:07