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

投稿 2017年05月02日
50
テンプレート
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)

50 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

-  

管理人のみ閲覧できます

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

2018/08/28 (Tue) 15:14

-  

管理人のみ閲覧できます

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

2018/08/28 (Tue) 15:48
vanillaice (Akira)

Akira  

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/28 (Tue) 22:12

-  

管理人のみ閲覧できます

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

2018/08/29 (Wed) 14:47

-  

管理人のみ閲覧できます

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

2018/08/29 (Wed) 21:40
vanillaice (Akira)

Akira  

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/29 (Wed) 23:19

-  

管理人のみ閲覧できます

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

2018/08/31 (Fri) 10:57

-  

管理人のみ閲覧できます

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

2018/08/31 (Fri) 12:26

-  

管理人のみ閲覧できます

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

2018/08/31 (Fri) 12:33
vanillaice (Akira)

Akira  

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-->を利用した固定記事配置をした方が良いんですけどね (´・ω・`)
ちょっと無理があるかなぁ、と感じます。せっかくの新着マークも使えないですし。
これは単なる意見なのでスルーで構いません。

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

Akira  

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

ありがとうございます

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

<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/08/31 (Fri) 15:28

-  

管理人のみ閲覧できます

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

2018/09/02 (Sun) 22:24

shibadogkohaku  

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

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

2018/09/03 (Mon) 12:11
vanillaice (Akira)

Akira  

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

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

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

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

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

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

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

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

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

Akira  

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

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

2018/09/03 (Mon) 23:27

-  

管理人のみ閲覧できます

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

2018/09/06 (Thu) 01:02
vanillaice (Akira)

Akira  

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/06 (Thu) 19:22

-  

管理人のみ閲覧できます

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

2018/09/09 (Sun) 18:28
vanillaice (Akira)

Akira  

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

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

2018/09/10 (Mon) 20:49