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

Room38テンプレート

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

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

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

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

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

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

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

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

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

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

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

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

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

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

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

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

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

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

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

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>-<%comment_month>-<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}
②について

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

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

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

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

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

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

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

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

#comment_form {
  padding-top: 40px;
}
③について

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

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

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

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

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

④について

#inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

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

#inner-contents {
  margin: 20px 0;
}

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

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

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

更新履歴 2018.12.19
  • Font AwesomeのCSSバージョンを5.6.1にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • 個別記事ブラウザサイドページ送り(カテゴリ間移動用)のスクロール動作を逆に調整(下スクロールで非表示、上スクロールで表示)
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

【重要】テンプレートのアップデートについて, Font Awesomeについて

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

更新履歴 2018.1.25
  • メンテナンスを行いました

主な変更点は以下の通りです。

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

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

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

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

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

サンプル

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

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

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

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

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

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

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

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

Common customization.

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

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

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

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

記事編集リンクについて

The position of edit link.

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

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

Cautions before asking for something.

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

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

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

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

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

にゃじ
2017/12/18 (Mon) 23:01

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

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

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

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

にゃじ
2017/12/19 (Tue) 00:11

度々すみません;

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

vanillaice (Akira)
Akira
2017/12/19 (Tue) 01:27

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) 07:57

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

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

Akira
2017/12/19 (Tue) 15:27

To にゃじさん

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

-
2017/12/24 (Sun) 11:52

管理人のみ閲覧できます

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

Akira
2017/12/24 (Sun) 20:51

To Room38ご利用中の 内緒さん

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

2018/01/02 (Tue) 21:56

御礼

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

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

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

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

Akira
2018/01/03 (Wed) 15:11

To 環さん

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

-
2018/01/03 (Wed) 21:10

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/01/04 (Thu) 13:10

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) 14:26

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/01/04 (Thu) 20:34

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) 21:43

管理人のみ閲覧できます

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

Akira
2018/01/04 (Thu) 21:54

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

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

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

お疲れ様でした :)

-
2018/03/07 (Wed) 02:56

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/07 (Wed) 15:24

To Room38の件 内緒さん

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

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

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

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

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

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

-
2018/03/07 (Wed) 17:32

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/07 (Wed) 18:43

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

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

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

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

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

-
2018/03/31 (Sat) 13:55

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/03/31 (Sat) 16:01

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

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

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

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

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

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

-
2018/03/31 (Sat) 17:06

管理人のみ閲覧できます

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

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

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

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

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

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

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

font: bold 2.2rem/1.4 省略;

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

-
2018/03/31 (Sat) 19:08

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/04/01 (Sun) 00:11

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

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

-
2018/05/19 (Sat) 19:18

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/05/20 (Sun) 20:39

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

こんばんは。

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

-
2018/07/10 (Tue) 23:29

管理人のみ閲覧できます

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

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

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/11 (Wed) 20:58

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/07/11 (Wed) 23:07

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

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

-
2018/08/28 (Tue) 15:14

管理人のみ閲覧できます

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

-
2018/08/28 (Tue) 15:48

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/28 (Tue) 22:12

To Room38レイアウトの件 内緒さん

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

> 記事に画像がない場合「No image」というスペースをなくすことは可能でしょうか?〜

可能ですがグリッドレイアウトの体裁は維持できません。
グリッドレイアウトは隣同士のコンテンツの高さが揃っていないと美しくありません。
内緒さんの場合トップページ最初の1ページ目に特殊記事5件(未来日付)を表示し、他ページと区別されているのだろうと思いますが、未来日付自体が良くないというのは今回は置いておくとしても
「カテゴリ一覧」「アーカイブ(月・日別)」「ユーザータグ」のページ種は同じレイアウトを引き継ぐのですから必ずしもその5件のみが表示されるとは限りません。
今後の運営方針によっては以下のようなページになってしまうことも大いに考えられます。

https://blog-imgs-122.fc2.com/v/a/n/vanillaice000/capbadlayout.jpg

これでも構わないというのであればそれで良いのですが。
アイキャッチ画像設定(ここで行ったサムネイル画像は記事内には表示されません)を行うこともご一考ください。
要約タイプ(リストタイプ)のレイアウトの場合、サムネイル有り・無しのコンテンツが混在しているとサムネイル無しの記事が見逃されやすい(スルーされる傾向にある)こともお伝えしておきます。

------
> タイトルのbox(正しい表現がわからないのですが)を一回り小さく、角を丸くすることは可能でしょうか?〜

サムネイル表示部位とタイトル部位は一つのコンテナにまとめられていますので、タイトル部分だけの角丸はできません。すみません。
レイアウトの件を再考されましてお返事をくださいね。よろしくお願いします。

* 隙間を詰めるようにして並べる「メイソンリー」というレイアウトがありますが、html, CSS, JS全てに大掛かりな変更が必要なのでサポート外(テンプレートの構造を大きく変えてしまうカスタマイズに該当します)という点も事前にお伝えしておきます。

-
2018/08/29 (Wed) 14:47

管理人のみ閲覧できます

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

-
2018/08/29 (Wed) 21:40

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/29 (Wed) 23:19

To Room38レイアウトの件 内緒さん②

お疲れ様です (o'ω')ノ

> 要約記事各コンテンツの角丸

.inner-wrapper.inner-image-parent.inner-image-parent imgにそれぞれ
border-radius: 5px;
を追加。
赤字の数値はご自身で調整してください。
.inner-image-parent と .inner-image-parent img への指定は中の画像にも角丸が必要な場合につけてください。不要なら書かなくてOKです。

-----
> サムネイル画像とタイトルの入ったコンテナ全体を一回り小さく〜

デフォルトではコンテンツが最大で3列並ぶよう設定してありますが、4列に増やすことで各コンテンツを小さくするのか、それとも隣同士の距離を大きくすることで小さくするのかで方法が違います。
あるいは全体幅を小さくすることで連動して中身が小さくなります。
どの状態を希望されているのか不明ですが並び数を変更するのは大変煩雑な作業が必要です(ブレイクポイントの緻密な調整必須)

最も簡単なのは全体幅を小さくすることです。

max-width: 1300px;
で検索するとCSS内に2箇所ありますので1000など同数値に変更してください。
その上でブレイクポイントの操作もやはり必要です。
@media screen and (max-width: 1180px)
@media screen and (max-width: 940px)
@media screen and (max-width: 840px)
上記がそれぞれのポイントで赤字がブラウザ画面あるいはデバイス画面の横幅を指します。
それぞれのポイントを確認しながら希望のレイアウトになるようご自身で調整してください。

例)
@media screen and (max-width: 1180px) を 900 に変更した場合、画面幅901pxまでは3列を維持、900pxになったら2列になります。

-----
> line-heightの変更

body の
font: 1.4rem/1.9 〜省略〜

赤字が行間指定です。単位をつけないよう注意してください。
よろしくお願いします。

-
2018/08/31 (Fri) 10:57

管理人のみ閲覧できます

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

-
2018/08/31 (Fri) 12:26

管理人のみ閲覧できます

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

-
2018/08/31 (Fri) 12:33

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/08/31 (Fri) 15:07

To Room38レイアウトの件 内緒さん③

お疲れ様です ('0')/

> コンテナを小さくすることで背景に色がもう少しだけでればと思っています〜

これを最初にお伝え頂けると良かったですね。一番の目的が不明瞭だと的確な返答ができません。

/* ribbon */
で検索するとCSS内に1箇所ありますのでそのすぐ「上」に以下の内容を追加

@media screen and (max-width: 414px) {
.element-item {
padding: 0 数値px 8px;
}
}

赤字部位が左右の余白です。

------
タブレットなど所有していないデバイスがあったとしてもレスポンシブデザインというのはブラウザや画面の横幅に応じてフィットさせるレイアウトなので、カスタマイズ時にパソコンのブラウザ幅を狭くするだけでわかりますよ。

------
newマークを表示させないためにhead内にあるスクリプトを削除されたと思いますが、このままでは大量のエラーが発生します。

<script>nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')</script>
の3箇所と
<script>nw('<%titlelist_year>','<%titlelist_month>','<%titlelist_day>','<%titlelist_hour>')</script>
の1箇所を削除してください。

内緒さんのような構成の場合、エンターページ付きのテンプレートかあるいはFC2独自変数の<!--index_area-->を利用した固定記事配置をした方が良いんですけどね (´・ω・`)
ちょっと無理があるかなぁ、と感じます。せっかくの新着マークも使えないですし。
これは単なる意見なのでスルーで構いません。

vanillaice (Akira)
Akira
2018/08/31 (Fri) 15:28

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

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

> ブログのタイトルが長い為、左上の画像の中のタイトルが意図しない位置で折り返してしまいます〜

<a href="<%url>"><%blog_name></a>
で検索するとhtml内に1箇所あります。赤字部位を削除し、以下の要領でブログ名をダイレクトに記載してください。

<span style="display: inline-block;">xxxxx</span><span style="display: inline-block;">yyyyy</span>

内緒投稿なのでコピペできませんがxxxxxが最初の文言、yyyyyが折り返し後の文言です。
全文が画面幅に収まる場合には一列で表示されます。

よろしくお願いします。

-
2018/09/02 (Sun) 22:24

管理人のみ閲覧できます

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

shibadogkohaku
2018/09/03 (Mon) 12:11

ブログタイトルについて(続き)

何とか自力で修正箇所を見つけける事ができました。
ありがとうございました。

vanillaice (Akira)
Akira
2018/09/03 (Mon) 23:23

To Room38レイアウトの件 内緒さん④

お疲れ様です ('0')/

いえいえ。こちらも察しが悪かったのでどうぞお気になさらず。

-----
> コンテナ6個の下にページの数字の入った小さな箱(またも表現がわからず申し訳ありません)がなくなってしまいました(´;ω;`)〜

ちなみに「コンテナ」というのはhtmlである程度の入れ子(ネスティング)のまとまりを表現するために表現しただけで、一般的に用いる呼称ではありませんのでお伝えしておきますね。
たぶんQ&Aサイトなどでこの表現を使っても伝わらないと思いますので念の為。

で、ページ送り(ページャー)のことですよね。
というかページ送りだけでなくCSSの大半が壊れています。
原因は追加したCSS内容に記号が一つ足りません。

@media screen and (max-width: 414px) {
.element-item {
padding: 0 数値px 8px;
}
}

これで直ると思いますので一度お試しください。

vanillaice (Akira)
Akira
2018/09/03 (Mon) 23:27

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

こんばんは。
ちょっと文脈がよくわかりませんが、自力で解決したということですか?
いずれにしても修正できたということで大丈夫しょうか。
お疲れ様です。

-
2018/09/06 (Thu) 01:02

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/06 (Thu) 19:22

To Room38個別記事レイアウトの件 内緒さん

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

> 記事本文もタイトルと同じように少し背景の色を左右に見せるように幅を狭く〜

個別記事のことでしょうか。
個別記事をトップページと同じように〜 と解釈しますね。

#main-container で検索するとCSS内に4箇所あります。
4つ目は

@media screen and (max-width: 646px) {
#main-container {
padding: 0 0 100px;
}
}

になっているはずです。
(646pxの指定は内緒さんがご自身で変更した数値です)
上記内容を削除するか(その場合は一つ前のブレイクポイントの左右30pxが適用されます)、赤字部位に数値を設定してください。
ただしこの処理を行うとトップページの再調整が必要になります。
トップページと個別記事のアウトラインが共通だからです。
この場合は追加した

@media screen and (max-width: 414px) {
.element-item {
padding: 0 12px 10px;
}
}

を削除するなどして調整してください。
角丸は .main-body (4つあるうちの最初のもの) に border-radius: 数値px; を追加してください。
よろしくお願いします。

-
2018/09/09 (Sun) 18:28

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/09/10 (Mon) 20:49

To Room38個別記事レイアウトの件 内緒さん(完了のご報告)

こんばんは。
修正完了したとのことでお疲れ様でした :)
コメントの方オープンになっているのが2つありますのでいずれも削除しておきますね。

Suzuka@つくば虎梅荘
2018/11/06 (Tue) 20:06

カテゴリ別の記事表示について

とても素敵なテンプレートを御提供くださり有難うございます。
カテゴリ毎のトップページから5記事しかピックアップされず、それ以前のカテゴリ内記事が辿れません。
全体のトップページのように、ページ下に(< 1 2 3 4 5 6 >)というガイドを表示して5記事以前の過去記事も辿れるようにはできないのでしょうか?
お忙しい中大変恐れ入りますが、よろしくご教授くださいますようお願い申し上げます。

vanillaice (Akira)
Akira
2018/11/07 (Wed) 09:48

To Suzuka@つくば虎梅荘さん

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

カテゴリのページ送りは正常動作だとちゃんと表示されるようになってますよ。
サイドメニューに任意追加されている「メールはこちらから」のhtmlソース内に構文エラーが有ります。

</a><form action=" 〜省略

赤字の</a>は不要ですしこの位置では不正ですので削除してください。
aタグのミスは本来表示されるべきものが表示されなくなったりなどしますので注意してください。

別件でひとつ気になる点がありますが(読み込みが異常に遅い件, 本件の主な要因もこちらにあるかもです)、とりあえずこちらのメールフォーム修正を先に行ってください。それで解消されるかもしれませんし、ページ送りについてもこの別件とのコンボが原因の可能性もあります。
(実際にはカテゴリページで「表示されない」のではなく、ローディングがタイムアウトエラーになってキャッシュが残っていればタイムアウト後にページ送りが表示され、無ければ表示されない、という症状です。カテゴリだけでなくトップページでも起こっていますがキャッシュのせいで気づいていないだけです)

修正後に再確認してお伝えします。
よろしくお願いします。

vanillaice (Akira)
Akira
2018/11/07 (Wed) 10:11

To Suzuka@つくば虎梅荘さん②

追加です。

Suzukaさんはテンプレートのレスポンシブ設定をされていませんので、スマホ読者が見ているのはRoom38ではなくFC2ブログの公式テンプレートです。
そちらのhtml内容にもアクセス解析コードを追加されているはずです。
で、ローディングの件についてはやはりアクセス解析が原因です。何故ならスマホ閲覧だと読み込み完了がものすごく遅いというか、ローディングエラーです。

一度アクセス解析コードを削除し、ローディングの状態を確認してください。
ページが表示された後いつまでもローディングスピナー(くるくる回るマーク)が回っているようでしたら「読み込みができない・終わらない」を意味しています。

パソコンはそのまま確認、スマホ版はブラウザのアドレスバー内のURLの末尾に
?sp
を付けることで確認できますので、そちらもパソコン上で確認できます。もちろんスマホの実機からも確認をお願いします。

アクセス解析の内容についてはお答えできませんので、コードを再取得するなどの対策をご自身で行ってくださいね。
また、スマホ表示については公式テンプレートを継続してご利用になる場合には私からはお答えできる内容はありませんのでご了承ください。
Room38をスマホでもご利用になるのであれば記事内にある通り「スマホ版非表示」の設定を行ってください。
よろしくお願いします。

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

Suzuka@つくば虎梅荘
2018/11/09 (Fri) 10:11

解決しました

ありがとうございました。
プラグインメニューの「メールはこちらから」のhtmlソース内構文エラーを、ご指示通りに修正しましたら、カテゴリのページ送りも正常に作動するようになりました。
レスポンシブ設定についても併せて修正いたしました。
お忙しい中、ご教示くださいまして有難うございました。

vanillaice (Akira)
Akira
2018/11/09 (Fri) 10:18

To Suzuka@つくば虎梅荘さん(完了のご報告)

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

たぶん主な原因はアクセス解析の方ではなかったかと思います。今削除されていますよね。
同じものを追加するとまた似た症状が出ると思いますのでご注意くださいね。
お疲れ様でした :)

-
2018/11/15 (Thu) 16:31

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2018/11/16 (Fri) 10:33

To Room38 リストマーカーの件 内緒さん

こんにちは ('0')/

お手数かとは思いますが、症状の出ているページと出ていないページが混在している場合には、症状が確認できるページに直接飛べるようにURLの提示をお願いします。
でないと私が1ページ目から探さなければならず大変時間を取られてしまいます。
とりあえず最新から12ページ分、あとはランダムに10ページほど開いてみましたが確認ができませんでした。

打ち消しているはずのリストマーカーが表示されてしまう原因のほとんどは記事内で利用したhtmlの構文エラー(大抵はタグの閉じ忘れ)です。
本記事内にあるDEMOページ(TOP PAGE DEMO, ARTICLE DEMO)と見比べて頂き、明らかに違いがあるようであればサイドメニューの内容(FC2ブログプラグイン, フリーエリアを利用して自身で足したものを含む)か記事内のhtmlが原因です。
今回はサイドメニュー内容ではなく記事内htmlのはずです(症状の出る、出ないが混在しているため)
また、テンプレート内容に問題が有る場合にも「このページはOK、このページはダメ」ではなく全てのページで同じ状態になります。
ともかく症状を確認できるページを教えて頂かないことにはなんともできません (´・ω・`)

あき
2018/11/17 (Sat) 01:27

To Akiraさん

こんばんは。早々の返信ありがとうございました。

そして、またも要領を得ない質問の仕方でお手数をおかけして申し訳ありませんでした。

「大抵はタグの閉じ忘れ」とのことで、あちこち確認してみました。まさにその通りでした!

お時間いただいて申し訳ありませんでした。ありがとうございました‼️

vanillaice (Akira)
Akira
2018/11/18 (Sun) 21:53

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

こんばんは (●'0'●)/

解決されたようで安心しました。お疲れ様でした :)

-
2019/01/03 (Thu) 16:34

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/01/04 (Fri) 02:26

To Room38 エンターページの件 内緒さん

こんばんは。

質疑応答での解決はかなり難しいと思います。というのは、エリア(ページ種)を区別するにはFC2の独自変数を使わないとできません。そして独自変数はバックエンド(サーバーサイド)の処理なので、ブラウザで表示された際にはもう第三者がソースコードを目視確認することができません。
(どこにどんな変数が書かれていたのかがわからなくなってしまいます。phpはそういう特性ですからどうにもできません)つまり独自変数の生の状態(raw html)を目で確認できるのは管理者だけなんですね。
そういう意味でかなり困難を極める作業です。
いずれにしろ私が請け負うわけにはいきませんのでヒントだけ。

・ サイドメニューを転写しない
コンテンツのアウトラインは

<section class="side_menu">
省略
</section>

の複製ではできません。side_menuクラスの横幅は300px固定ですから横幅の操作不可です。
新しいクラス名で新しいhtmlを作成してください

例)
<section class="enter-content">
省略
</section>

.enter-content {
margin-bottom: 数値px;
padding: 20px;
border-radius: 数値px;
background: white;
}

margin-bottomは後続要素との距離、paddingはコンテンツの「内側」の余白、border-radiusが角丸、backgroundが背景色です。横幅はsection要素であれば自動的に100%(親要素の #main と同等)になります。
但しsection要素は見出し(h要素)が必要なので、見出しを用意できない、あるいは見出し不要の場合にはdiv要素にされると良いと思います。

------
・エンターページに表示させたくない内容は
<!--not_index_area-->と<!--/not_index_area-->で囲ってください。
(grid-containerクラスを持つ要素だけで良いのではないかと思います。たぶん)

例)
<!--not_index_area-->
<div id="grid-container">
省略
</div>
<!--/not_index_area-->

逆にエンターページのみに表示したい内容は
<!--index_area-->と<!--/index_area-->で囲います。
先の例をそのまま使うと

<!--index_area-->
<section class="enter-content">
内容
</section>
<!--index_area-->

記述場所は not_index_area 指定される要素のすぐ上でOKです。

-----
「スマホでの見え方がわからない」というのはスマホを所有していないという意味でしょうか。
レスポンシブデザインですからブラウザの幅を狭めるだけで確認できますよ。

-
2019/01/05 (Sat) 00:21

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/01/06 (Sun) 14:30

To Room38 エンターページの件 内緒さん(終了のご報告)

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

はい、なかなか大変だとは思いますが頑張ってください :)

-
2019/01/07 (Mon) 16:08

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/01/07 (Mon) 22:46

To Room38 ページURLの件 内緒さん

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

まず、エンターページの作成ができたということでお疲れ様でした。

-----
> ページャーで1ページに戻るとこのページになるのです〜

こちらはFC2ブログの仕様です。
ブログの代表URLは
https://xxxxx.blog.fc2.com/
このアドレスで、これがトップページ最初の1ページ目であり、index_areaのページでもあります。

トップページの2ページ目以降のURLは
https://xxxxx.blog.fc2.com/page-1.html
こうして後ろに page-x.html のクエリが付きます。2ページ目は page-2.html 、3ページ目は page-3.html です。
ページ送りを利用して2ページ目から 前のページへ戻った場合、代表URLにはならずに page-0.html のクエリが付いたページが表示されます。つまり同じページでURL違いのものが2つ存在するわけです。
① https://xxxxx.blog.fc2.com/
② https://xxxxx.blog.fc2.com/page-0.html
この2つは同じ内容のページです。

index_area変数というのは ① のURLの場合のみ表示を行う、という変数です。同じページでもクエリが付いている場合にはindex_area変数内の内容(挟まれている内容)は表示されません。
これは「エンターページを設けたい」というユーザーの希望を叶えるためのシステムだと思いますが、この「トップページ最初の1ページ目のみ異なる2つのアドレスが存在する」という事情が実はGoogleから「コンテンツ重複」の指摘を受けるという問題点でもあります。
(コンテンツ重複に関しては私の方で指摘されないよう処理していますので大丈夫です。head内のcanonicalとページ送り前ページへのnofollow)

-----
> 調べてみると「img」は
設定可能な属性と書いてありましたが、理解はあっていますか?〜

いえ。html5では使えません。要素の如何を問わずalign属性は廃止です。
divでもimgでもtableでも全て廃止。

align属性というのは「位置の操作」を行うためのものです。そして位置の操作は「装飾」にあたりますので、装飾用の要素や属性はhtml5では軒並み廃止されています。
「imgのalign属性は利用可」という情報が出てきたのであればそれはhtml5勧告以前の古い情報だと思いますよ。

html5で廃止されたタグや属性は他にもたくさんあって
【タグ(要素)】
center, font, strike, blink, frame など多数
【属性】
align, valign, background, bgcolor, cellpadding など多数

どれも装飾目的のものです。fontタグ(font要素)については廃止ではありますが実質的には恒久サポートが行われるのではないかと思います。ブラウザのベンダー次第ですが。
それ以外はいつ機能しなくなってもおかしくはないと思いますので、今のうちに正しい書き方(CSSへの移行)をされた方が良いと思います。

floatについては以下の記事をご参照ください。

結局floatはどう解除するのが簡単なのか
https://vanillaice000.blog.fc2.com/blog-entry-529.html

clearfixは魔法の言葉ではありません
https://vanillaice000.blog.fc2.com/blog-entry-456.html

画像のfloatはスマートフォンでの見た目を考えて行いましょう
https://vanillaice000.blog.fc2.com/blog-entry-713.html

あき
2019/01/09 (Wed) 17:21

To Akiraさん

返信遅くなり申し訳ありません。
ありがとうございました。index_area変数の意味、わかりました。それを踏まえて色々考えたいと思います。

「align」の件、確認してみたら最終的には古い記事を読んでしまったようです。
ありがとうございました。今のうちに、きちんと確認してCSSを修正したいと思います!

これからもAkiraさんの記事で学ばせていただきます!いつもお忙しい中、たくさん教えていただいて本当にありがとうございますm(_ _)m

vanillaice (Akira)
Akira
2019/01/13 (Sun) 01:08

To あきさん

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

はい。特徴を踏まえた上でご判断をお願いします。
って、復唱してるだけのお返事ですみません(笑)
お疲れ様です :)

-
2019/04/13 (Sat) 12:21

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/04/13 (Sat) 15:45

To Room38 欧文フォントの件 内緒

こちらこそありがとうございます :)

> 英数字のフォント〜変更できるのであれば変えたい〜

欧文フォントは 「Arsenal」と「Playfair Display」で、このフォントがちょこちょこと使われていますが、一切使用をしない、という前提で説明しますね。

-----
まず

Arsenal%7CPlayfair+Display

で検索するとhtml内に1箇所ありますので、この文字列を含む要素を削除。以下の内容です。他のものを巻き込み削除しないよう注意してください。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arsenal%7CPlayfair+Display">

----
で、「日本語フォントとのバランス」という表現が出てきましたので、欧文の指定を「無し」にされても良いと思います。欧文フォントにかなや漢字は含まれませんが、日本語フォントの場合大抵はアルファベットも込み込みになってますので、バランスという点ではそれが一番良いと思います。

'Arsenal'

で検索するとスタイルシート内に7箇所出てきます。
最初のものが
font: 1.4rem/1.9 'Arsenal', '游ゴシック体', 'YuGothic', 〜 省略
となっているはずなので、削除して以下のように修正

font: 1.4rem/1.9 '游ゴシック体', 'YuGothic',

記号は半角スペースなどに注意してください。1.9の後ろには半角スペースがひとつ必要です。

続いて2, 3, 4つ目はフォント指定を削除

font-family: 'Arsenal', serif;

の一行を削除という意味です。

続いて5, 6つ目はセレクタも含み指定全て削除。

#comment_form input::-webkit-input-placeholder,
#comment_form textarea::-webkit-input-placeholder {
font-family: 'Arsenal', sans-serif;
}



#comment_form input::-moz-placeholder,
#comment_form textarea::-moz-placeholder {
font-family: 'Arsenal', sans-serif;
}

を削除、という意味です(5つ目と6つ目です)

続いて最後の7つ目はフォント指定を削除。

font-family: 'Arsenal', serif;

の一行を削除、という意味です。

----
'Playfair Display'

で検索するとスタイルシート内に9箇所出てきます。こちらは9箇所とも

'Playfair Display',

を削除してください。カンマの後ろに半角スペースが付いていますので、それも含め削除。

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

-
2019/04/13 (Sat) 22:57

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/04/14 (Sun) 17:22

To Room38 欧文フォントの件 内緒(終了のご報告)

はい。一度お試しください。
お疲れ様です :)

ヨリヨリ
2019/04/14 (Sun) 20:53

お礼

管理人様
ありがとうございます。
昨日、ご指示頂いたお蔭で、無事に希望するフォントに修正ができました。
ご丁寧に間違わぬよう、半角スペース等の細かいご注意を頂きまして、誠にありがとうございました。
今後も素晴らしいテンプレートを期待しています!

vanillaice (Akira)
Akira
2019/04/16 (Tue) 16:41

To ヨリヨリさん(完了のご報告)

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

修正できたということで安心しました。
お疲れ様でした :)

-
2019/07/08 (Mon) 11:50

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/08 (Mon) 13:05

To Room38でご質問の 内緒さん

こんにちは。

> このような表示ができるのは〜

スマホでドロワー(スライド)に切り替わるもの、という意味でしょうか。
同じ仕様のものは以下の通りです。
(クリックするとリストが出ます)

https://vanillaice000.blog.fc2.com/blog-entry-242.html?q=%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E3%81%BF%E3%82%B5%E3%82%A4%E3%83%89%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E3%83%89%E3%83%AD%E3%83%AF%E3%83%BC

よろしくお願いします ('0')/

-
2019/07/08 (Mon) 14:50

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/07/08 (Mon) 14:55

To Room38でご質問の 内緒さん②

そうですね。三 のマークのことを一般的に「ハンバーガーボタン」と言い、そこをクリックするとスライドして出てくるものを「ドロワー」と言います。ドロワーというのは「引き出し」の意味です。机とかの引き出しですね。
テンプレート配付ページを開き「ドロワー」で検索すると他製作者さんのものも出てきます。
ただし説明文は製作者が任意で記載していますので、該当していても候補に出てこないことはあります。

私のものについては上に記載したページのそれぞれの記事を開き、各々「DEMO」を用意していますので、スマホで確認をお願いします。

-
2019/07/09 (Tue) 16:28

管理人のみ閲覧できます

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

-
2022/02/20 (Sun) 15:35

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/02/20 (Sun) 16:54

To CSSの記述ミスと思われる箇所について 内緒さん

こんにちは ('0')/

Room38はie対応テンプレートです。この記述はie向けのポリフィル(無い機能、非対応のものを付加するJSの手法)なので、通常のCSS内容からは外れますが必要なものです :)

和田
2023/08/18 (Fri) 23:00

英明

初めまして、お世話になっております。
本日よりRoom38を使用させて頂いております。

2点確認させてください。
確認1)
個別ページのComments欄をざっくり使用できないように(非表示でも構いません)したいのですが
どのようにすれば良いでしょうか?
確認2)
サイトタイトルの部分に画像を挿入したいのですが、どのようにすれば良いでしょうか?

恐れ入りますがご教示頂けると助かります。
宜しくお願い致します。

vanillaice (Akira)
vanillaice (Akira)
2023/08/19 (Sat) 03:37

To 和田さん

こんばんは ('0')/

『ざっくり』の意味がよくわからないのですが。記事編集画面にコメントの受付に関する設定がありますよ。
コメント欄の一切を利用しないのであればテンプレート内に

<!-- コメント関連 -->
とありますので、その上の
<!--comment_area-->
から直近、下の方にある
<!--/comment_area-->
までを削除

<!-- コメント編集 -->
の上の
<!--edit_area-->
から直近、下の方にある
<!--/edit_area-->
までを削除。

-----
> サイトタイトルの部分に画像を挿入したい〜

画像を挿入するというのは『テキストと画像の差し替え』 のことですか?
以下の記事をご覧ください。

参考記事: 「ブログタイトルを画像に変えたいです」というアバウトすぎる質問
https://vanillaice000.blog.fc2.com/blog-entry-1152.html

和田
2023/08/19 (Sat) 08:35

To vanillaice (Akira)さん

ありがとうございます。
無事、コメント欄を削除できました。

ブログタイトルを画像にすり替えるについてはまだできておりませんが
ひとまず御礼申し上げます。

また、不明点があればご教示宜しくお願い致します。<(_ _)>

和田
2023/08/21 (Mon) 19:39

Room38のブログタイトルについて

お世話になっております。
テンプレートRoom38のブログタイトルに画像を挿入しようと試みているのですが
いまいちうまくいきません。
画像の縦横のサイズは800pxで大丈夫でしょうか?
800pxの画像を以下のように挿入するとブログタイトルのボックスが縦長になり
画像が小さく表示されてしまいます。

<a class="blog-title-anchor" href="<%url>"><a href="http://hobbylabon.com/" target="_blank"><img src="https://blog-imgs-169.fc2.com/h/o/b/hobbylabon/20230821192943562.jpg" alt="20230821_ブログタイトル" border="0" width="800" height="800" /></a>

対処方法をご教示頂けると助かります。
宜しくお願い致します。

vanillaice (Akira)
vanillaice (Akira)
2023/08/23 (Wed) 16:10

To 和田さん

こんにちは ('0')/
お返事遅くなりました。

【HTML】
×
<a class="blog-title-anchor" href="<%url>"><a href="http://hobbylabon.com/" target="_blank"><img src="https://blog-imgs-169.fc2.com/h/o/b/hobbylabon/20230821192943562.jpg" alt="20230821_ブログタイトル" border="0" width="800" height="800" /></a>


<a class="blog-title-anchor" href="<%url>"><img src="https://blog-imgs-169.fc2.com/h/o/b/hobbylabon/20230821192943562.jpg" alt="ほびらぼん" width="800" height="800"></a>

まず、a要素が重複しています。そしてa要素内にa要素を入れ子することはできません。
また、画像のalt属性には必ずブログ名を入れてください。border属性と閉じスラッシュは不要です。カスタマイズ時に雛形コードがある場合はソースコードの内容をアレンジしてしまわないよう注意してください。

HTMLを書き換えたらスタイルシート最終に

.blog-title {
padding: 0;
}

を追加。これで概ねOKではないかと思いますが、和田さんの希望がわからないので今アドバイスできるのはここまでです。

和田
2023/08/23 (Wed) 18:42

To vanillaice (Akira)さん

お世話になっております。
ご教示頂いた通り、設定したのですが、やはりタイトルのボックス?が縦長になってしまいます。
現在、設定はそのままにしておりますので
ご確認と対処方法をご教示下さい。
宜しくお願い致します。

vanillaice (Akira)
vanillaice (Akira)
2023/08/23 (Wed) 23:18

To 和田さん

こんばんは ('0')/

先回のコメントでもお伝えしましたが、HTMLソースコードをアレンジしないよう注意してください。

×
<a class="blog-title-anchor" href="http://hobbylabon.com/"><img src="https://blog-imgs-169.fc2.com/h/o/b/hobbylabon/20230821192943562.jpg" alt="ほびらぼん" width="800" height="800"></a>テンプレ工事中


<a class="blog-title-anchor" href="http://hobbylabon.com/"><img src="https://blog-imgs-169.fc2.com/h/o/b/hobbylabon/20230821192943562.jpg" alt="ほびらぼん" width="800" height="800"></a>

テンプレートHTMLの
<h1 class="blog-title">
から
</h1>
までの間に
<a class="blog-title-anchor" href="http://hobbylabon.com/"><img src="https://blog-imgs-169.fc2.com/h/o/b/hobbylabon/20230821192943562.jpg" alt="ほびらぼん" width="800" height="800"></a>
以外の何らかの要素がある場合、それが文字であってもなんであっても必ず縦長になり、ご希望を実現できませんし、この部位はページ中で最も重要な『大見出し』です。今和田さんのブログの大見出しは
『ほびらぼんテンプレ工事中』
となってしまっています。

テンプレートカスタマイズ中であることのお知らせが必要ならば、一時的にフリーエリアプラグインを利用するなどの工夫してください。

そしてこちらも先回お伝えしましたが
スタイルシートの最終に以下の内容を追加してください。

.blog-title {
padding: 0;
}


これをやらない限り終わらないです。




和田
2023/08/24 (Thu) 05:44

To vanillaice (Akira)さん

お世話になっております。
無事、タイトル画像の表示ができました。

原因はスタイルシートの最後ではなく
こちらにpadding: 0;を追記していたからのようです。
.blog-title {
margin: 0 0 20px;
padding: var(--padding-header-sp) 20px;
border: 1px solid var(--header-border);
background: var(--header-bgcolor) var(--header-bgimage) left top;
font-weight: normal;
font: normal var(--blog_title-font_size-sp)/var(--line_height-title) var(--font_family-latin);
animation: var(--animation-header, none);
padding: 0; ← ここ
}

ご対応ありがとうございました。<(_ _)>

vanillaice (Akira)
vanillaice (Akira)
2023/08/24 (Thu) 16:25

To 和田さん(完了のご報告)

こんにちは ('0')/

CSSの記載順序・記載位置には意味がありますので、指南通りの内容を実行することが大事です。『最終に記載』と指南されたものを『最初』や『途中』に自己変換・自己判断しないよう注意してくださいね。

ご希望通りになったようで良かったです。お疲れ様でした :)

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