Article page

by
  • Comment:0
  • Trackback:0

Room38


名称 Room38
カラム数 2
プラグイン対応 ○ (左サイドメニュー)
レスポンシブ対応
サイドメニュー
記事幅 可変 最大 856px
サイドバー幅 固定 300px (内寸 260px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
テンプレ固有機能 画像にドロップシャドウ
動画縦横比固定
画像ハイパーリンク上マスク
画像拡大
見出しデザイン(手書き風, ドッグイヤー)
使い方詳細ページ
テンプレート固有機能説明
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 色調変更 etc.


valid-html5.png


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



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



TOP PAGE DEMO
ARTICLE DEMO
FAQ



仕様
・トップページはグリッドレイアウト
・要約表示タイプ
・スクロールアンカー
・スマートフォンでのレイアウトをスマートフォンライクに仕上げました
・スマホのみドロワーサイドメニュー


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・カラムの形状変更や位置変更。
・トップページの表示タイプ変更・レイアウト変更(要約表示から全文表示へ変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。


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



スマートフォンでのレイアウトについて
スマホ版ライクになってます。




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



ブログタイトル下説明文について
トップページでは、
環境設定 > ユーザー情報の設定 > ブログの説明 に記載した文章が表示されます。
トップ以外の各種ページでは、
CATEGORY PAGE, EDIT PAGE など、滞在中のページ種名称を表示するようにしています。
現在地がどこなのか、簡易的なパンくずリストの役割を担っています。
SEO的な影響は特にありませんが、ブログ説明文で全て統一したい方は

<p id="site-description">
から
</p>
に挟まれた内容を一旦消去し、
<%introduction>


に置き換えてください。
以下のように変更できていればOKです。

<p id="site-description">
  <%introduction>
</p>



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

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

本テンプレートは構造が少し特殊です。
左側のサイドメニューはヘッダーとプラグインがくっついてます。
サイドメニューの内容をhtmlの最初に書いてしまえば上記のような事象は起こりませんが、検索botは html内容の上にある内容をより重要とみなす という特徴がありますので、サイドメニューをメインよりも先に書いてしまうのは良くないと判断しました。
html構造では

ヘッダー → ナビゲーション → メインコンテンツ → サイドメニュー

の王道を守って製作しました。
スクロール時のサイドメニュー分割が目立つ時はPCクリーニングをして頂くと良いかもしれません。
メモリ容量が落ちてスクロール動作自体がぎこちなくなった際に顕著になります。



スクロールアンカーについて
個別記事(パーマリンク)以外のページでは、メインとサイドいずれか縦サイズの短い方が画面内に留まるようにしてあります。
個別記事だけは受信コメントの「ページ遷移 + コメント位置までのページ内スクロール」が行われた時に位置が大きくずれてしまいますので、メイン側のスクロールアンカーは対象外にしています。
サイドはアンカー動作付きです。



ドミナントカラー

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

例) 51,51,51


rgb(149,104,138) 基本リンク色, ページ送り背景色 など
rgb(243,244,248) 全体背景色, No image画像背景色(変更できます)
white サイドメニュー・メインコンテンツ背景色



管理人コメントと訪問者コメントを分ける方
デフォルトはグレー背景アイコン。
サンプル




今回は吹き出しの左右を入れ替えられます。
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'●)/
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 0

Leave a reply

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