@charset "UTF-8"; /*------------------------------------ Template Name: straw_man Author: dettalant Author URL: dettalant.com License: MIT License License URL: https://opensource.org/licenses/MIT Version: 1.0.0 ------------------------------------*/ /*------------------------ # コーディングルール 以下のコーディングルールを守ったり守らなかったりしつつ書きました。 CSSを読み解く参考になればと、ここに残しておくことにします。 ## 基本的なルール * SMACSSの`base, layout, module, state`の分け方を意識しました * SMACSSっぽい考え方を採用しましたが、 SMACSSを厳密に守っているわけではありません。(自分に甘い) * html側に汎用クラスがデロデロ積み重なるのは個人的に美しくないので、 サイト全体で用いる汎用クラスは極力使わない方向にしました。 * まとめられる記述はまとめるけれど、可読性最優先。 個々のmoduleのくくりを越えての記述圧縮は行わない方向にしました。 ## idの扱い方 * idでのスタイル指定は基本的に使ってません。 が、fc2ブログが自動挿入するスタイル定義を上書きするためにやむをえず使っている部分があります。 ## クラス名の命名規則 * 基本はSnake Caseを使用しました。 * ハイフンは個人的に好きじゃないので、使用するのは控えました。 * 各moduleのクラス名は`aside_toc`や`toc_link`など、 どこに所属しているかをできる限りつけるようにしました。 * javascriptからステート変化させるクラス名は`is_foo` * ul要素クラス名は `foo_list` * li要素クラス名は `foo_item` * a要素クラス名は `foo_link`(にしたかったけれど、食い違う表記があります。許して) ------------------------*/ /*------------------------------------ 目次 - Table of Contents 通し番号説明 0.x: 基礎的なHTML要素設定 1.x: 共通表示/スマホ版表示に関する要素 2.x: javascriptで何かしらの変更が加えられる要素 3.x: スマホ版・PC版表示に関するmedia querys要素 4.x: サイトテーマ(カラーリング変更)に関わる部分 5.x: テンプレート使用者が自由に改造するための領域 CSS内目次リスト 0.0 : base - HTML要素全般に適用されるスタイル 1.0 : universal css - スマホ版汎用クラスまとめ 1.1 : page layout - ページレイアウト設定 1.2 : page header - ページヘッダー設定 1.3 : global navigation - グローバルナビゲーション 1.4 : entry - トップエントリ、個別記事両方のエントリ部分 1.5 : entry content style - 記事本文・追記に記述された内容 1.6 : entry thumb - 記事サムネイル画像 1.7 : entry info & entry indicator - 記事の情報表示部分 1.8 : fc2 footer & related entry - fc2が自動挿入する拍手ボタンなどのスタイルと関連記事表示 1.9 : share buttons - 個別記事下シェアボタン 1.10: category & titlelist - カテゴリーページと記事一覧ページ 1.11: search entry - 検索結果ページ 1.12: same category navigation - 同一カテゴリ次記事リンク 1.13: entry comments - 個別記事の投稿コメント表示部分 1.14: comment form - 個別記事のコメント投稿フォーム部分 1.15: entry trackback - 個別記事のトラックバック機能部分 1.16: pager - ページ下部のページネーション部分 1.17: sidebar plugin - サイドバーのプラグイン部分 1.18: footer - ページフッター設定 1.19: fc2 ad - fc2ブログが自動挿入する広告部分 1.20: svg icons - SVGアイコンの全般的な設定 2.0 : lazysizes - 画像遅延読み込みライブラリと関わる設定 2.1 : modal shadow - straw_man_nav.jsで追加されるスマホ版グローバルナビゲーション表示時の影 2.2 : fixed buttons - ページ上部へスクロールするボタンなどのスタイル定義 2.3 : laymic - オーバーレイ型横読み/縦読み漫画ビューワー 2.4 : js states - javascriptでステート変化させた状態のスタイル定義 3.0 : sp view extend - スマホ版のみに指定される特別なスタイル 3.1 : pc view base - PC版でのHTML要素に直接定義するスタイル 3.2 : pc view universal class - PC版汎用クラスまとめ 3.3 : pc view page layout - 3.4 : pc view header - PC版ページヘッダー設定 3.5 : pc view global navigation - PC版グローバルナビゲーション設定 3.6 : pc view js states - PC版ステート変化状態スタイル定義 3.7 : pc mouse hover setting - PC版マウスホバー時設定 4.0 : general shadow - サイト全体の影付与指定 4.1 : light theme - 白系統色背景のライトテーマ 4.2 : dark theme - 黒系統色背景のダークテーマ 4.3 : custom theme - 背景画像を自由指定することを前提としたカスタムテーマ機能 ------------------------------------*/ /*------------------------------------ 0.0: base html要素に対して適応されるスタイル。 事前のress.css読み込みが前提であるコードなことは注意。 ------------------------------------*/ :root { /* js経由で取得する正確なvh数値 javascript無効化状態でも正常表示させるために フォールバック数値を入れておく */ --js-vh: 1vh; } html, body { /* スマホを縦横切り替えすると起きる表示崩れを抑制するハック */ overflow-x: hidden; } body { /* flexboxで子要素を縦一列に並べる */ display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; width: 100vw; /* 行間の余白を少し足しておく */ line-height: 1.4; /* ネットで拾ってきたMac, Win向けデフォルトフォント設定。 だけど、僕が使ってるのはlinuxなのでほぼ未検証です。 */ font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; } /* リンク要素 */ a { /* リンクテキストの下線を消す */ text-decoration: none; } a, button, input, textarea { /* 美しいfocus表示のために透明枠を先んじてつけておく */ border: transparent solid 2px; } /* focus時の見た目設定 このテンプレートでは 「クリック時はfocus表示が出ないけどキーボード操作ではfocus表示が出る」 動きを実現するためにfocus-visible polyfillを追加しています。 ここのコードはそれ前提のコードであることに注意してください。 */ .js-focus-visible :focus { outline: none; } .js-focus-visible a.focus-visible, .js-focus-visible button.focus-visible, .js-focus-visible input.focus-visible, .js-focus-visible textarea.focus-visible { /* focusされた要素のborder色を変更 */ border-color: royalblue; /* focus表示にはborderを用いるので、outlineは基本的に使わない */ outline: royalblue 0 solid; } .js-focus-visible a.focus-visible, .js-focus-visible button.focus-visible, .js-focus-visible input[type="submit"].focus-visible { /* focusを得たリンクとボタン要素テキストに下線を付与 */ text-decoration: underline; } /* firefoxのbutton inner borderを削除 */ button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: 0 } /* 引用要素 */ blockquote { /* 引用テキスト周囲にはゆったりと余白を */ padding: 1rem; } /* 引用元表示要素 */ cite { /* 日本語サイトに斜体はいらないと思います */ font-style: initial; } /* 見出しここから スマホ/タブレットでの見出しフォントサイズを変えるにはここを変える ざっくりとした見出し使用部分説明 * h1: 個別記事/記事一覧ページ/カテゴリ一覧ページなどの「メインカラム上の大見出し」にのみ使用 * h2: コメント機能親要素見出し、サイドバー各種プラグイン見出しなど、サイト上のだいたいの見出しはコレ * h3: コメント投稿フォーム内見出しなど、「すでに親要素でh2が使われている子要素の見出し」がコレ */ h1 { font-size: 1.4em; margin: .1rem 0 .5rem; } h2, .same_category_link_title { font-size: 1.3em; } h3 { font-size: 1.2em; } /* 見出しここまで */ /* 順不同リストのデフォルト黒丸は消しておく */ ul { list-style: none; } /* 画像要素 */ img { /* 親要素の縦横幅に画像サイズを合わせる */ max-width: 100%; max-height: 100%; /* 画像アスペクト比を維持する */ height: auto; /* 画像に影をつける */ box-shadow: 1px 1px 2px rgba(0, 0, 0, .2); } iframe { /* 親要素の横幅にiframeサイズを合わせる */ max-width: 100%; } /* ユーザーのテキスト入力を受け取る要素たち */ input, textarea { /* 内包する文字周囲に余白をつける */ padding: .6rem; } input[type="text"], input[type="url"], input[type="password"], textarea { /* 親要素横幅いっぱいまで広げる */ width: 100%; /* テーマ非適用時でも、テキスト入力要素だけは背景色をつけておく */ background: #fafafa; } textarea { min-height: 8em; height: 12em; } /* テキスト要素 */ p { /* 上下にのみ余白をつける */ margin: 1rem 0; } /*------------------------------------ 1.x: sp view ページ共通設定とスマホ版表示を同時に行うスタイル定義部分。 このテンプレートCSSではスマホ版を基本にして、 画面幅が大きい場合のみPC版表示用設定を適用する書き方をしています。 なのでここの部分を変更すると、 スマホ版表示/PC版表示両方で変更がなされることには注意してください。 PC版のみにスタイル適用したい場合は、 `3.x: media queries`内のpc view部分に記述することを推奨します。。 ------------------------------------*/ /*------------------------------------ 1.0: universal css 汎用クラスをひとまとめ。 sp_view_hiddenとpc_view_hiddenについては `3.x: media queries`部分を参照のこと。 クラス名リスト * .pc_view_hidden: pc版では非表示 * .sp_view_hidden: スマホ版では非表示 * .no_shadow: 画像要素のデフォルト影を消すクラス名 * .free_wrapper: 追加要素を囲うラッパー要素につけたら、お手軽に表示が整えられるやつ * .margin_top: カスタマイズ時に便利な上側余白をつける汎用クラス * .margin_bottom: カスタマイズ時に便利な下側余白をつける汎用クラス ------------------------------------*/ /* 画像要素にこれを付けると影が消える */ .no_shadow { box-shadow: none; } /* テンプレート使用者が手軽なカスタマイズをする助けのため、 背景色と内側余白を手軽につけられる汎用クラス名を用意しておきました。 上方向や下方向の余白は付け足されないので、 後述する`.margin_top`や`.margin_bottom` といった余白だけをつける汎用クラスを同時にお使いください。 */ .free_wrapper { padding: 1rem; } /* 上方向に余白をつける汎用クラス。 */ .margin_top { margin-top: 1rem; } /* 下方向に余白をつける汎用クラス。 */ .margin_bottom { margin-bottom: 1rem; } /*------------------------------------ 1.1: page layout ページ全体のレイアウトを決めるコード body直下要素へのスタイル定義とも言える クラス名リスト * .header: ページヘッダー要素 * .mainContainer: ページ主要部分コンテナ * .primary: 記事表示部分 * .sidebar: サイドバー部分 * .footer: ページフッター要素 ------------------------------------*/ /* カラム横幅設定 ここで設定している数値は、 主にスマホ版での表示横幅最大サイズとなります。 */ .primary, .sidebar { max-width: 722px; } /* 1カラム状態で画面幅を突き抜けないための設定 */ .header, .primary, .footer { /* 画面横幅いっぱいまで広げる */ width: 100vw; } .main_container, .sidebar, .footer { /* 一つ上の要素との間に余白を入れる */ margin-top: 1rem; } .header { display: flex; flex-flow: row nowrap; align-items: center; /* スマホ版ヘッダーの最小縦幅 */ min-height: 64px; } /* 記事本文側要素とサイドバー側要素が格納される要素 */ .main_container { display: flex; flex-flow: column nowrap; align-items: center; /* 1カラム状態では横幅を画面幅に保つ */ max-width: 100vw; } /* メインカラム エントリ本文が表示される側のやつ */ .primary { flex: 1 1 auto; } /* サブカラム サイドバーが表示される側のやつ */ .sidebar { display: flex; flex-flow: row wrap; justify-content: center; } .footer { /* 内側への余白追加 */ padding: 1rem; } /*------------------------------------ 1.2: page header ページ上側、ヘッダー部分のスタイル定義 クラス名リスト * .global_nav_opener: スマホ版グローバルナビゲーション開閉ボタン * .global_nav_opener_title: スマホ版グローバルナビゲーション開閉ボタン内テキスト * .header_branding: サイトロゴ表示部分 * .site_logo: PC版ロゴ画像 * .site_logo_banner: スマホ版ロゴ画像 * .site_logo_title: ロゴ画像を見出しとして包むラッパー * .site_logo_link: ロゴ画像を包むブログトップページへのリンク ------------------------------------*/ /* サイトロゴを内包するブログトップページへのリンク */ .site_logo_link { /* 内包する画像サイズに要素サイズを合わせる */ display: flex; /* iPhoneでの表示を整えるための冗長な定義 */ justify-content: center; align-items: center; } /* PC版サイトロゴ */ .site_logo, /* スマホ版サイトロゴ */ .site_sp_header_logo, /* スマホ版グローバルナビゲーション上部バナー */ .site_logo_banner { /* ロゴ画像については影をつけない */ box-shadow: none; } /* グローバルナビゲーションを開閉するボタン。 スマホ版でのみ表示する */ .global_nav_opener { width: 64px; height: 100%; /* .header_brandingとの余白 */ margin-right: 0.5rem; position: relative; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; flex: 0 0 auto; } /* グローバルナビゲーション開閉ボタン内のテキスト */ .global_nav_opener_title { font-size: 14px; /* バーガーボタンアイコンとテキスト間の余白を詰める */ margin-top: -6px; } /*------------------------------------ 1.3: global navigation サイト案内のためのグローバルナビゲーション PC表示ではページ上側に表示、 スマホ表示ではメニューボタンで開閉するオーソドックスな仕組み クラス名リスト * .global_nav_container: グローバルナビゲーション親要素 * .global_nav: グローバルナビゲーション項目を内包するコンテナ * .global_nav_site_banner: スマホ版グローバルナビゲーションにのみ表示されるサイトロゴ * .global_nav_clip: クリックすると入れ子要素を展開するコンテナ * .global_nav_clip_opener: 入れ子要素開閉クリックイベントを受け取るボタン * .global_nav_clip_wrapper: ページ読み込み時は格納されていて、クリック時のみ出現する要素 * .switch_theme: テーマ変更ボタン * .switch_theme_text: テーマ変更ボタンのラベルテキスト ------------------------------------*/ /* 共通するスタイル定義をまとめる */ .global_nav_container, .global_nav, .global_nav_clip, .global_nav_clip_wrapper { display: flex; flex-flow: column nowrap; } .global_nav_clip_opener, .switch_theme, .switch_theme_icon_wrapper, .switch_custom_theme, .switch_fixed_button_pos, .switch_custom_theme_icon_wrapper, .switch_fixed_button_pos_icon_wrapper { /* 内包する画像に要素幅を合わせる意図も含めた指定 */ display: flex; } .global_nav_clip_opener, .global_nav_clip_wrapper { /* 親要素横幅いっぱいまで広げる */ width: 100%; } /* スマホ表示でのページ読み込み時では隠しておく。 この要素に`.is_opened`のクラス名がついたら展開する その記述については`2.3: js states`を参照 */ .global_nav_container { /* css変数が使えないブラウザでのフォールバック */ height: 100vh; /* 画面縦幅いっぱいまで広げる */ height: calc(var(--js-vh) * 100); width: calc(20vw + 10em); position: fixed; /* いやーろっぱくん明治だよ! 注: 1000以上の数字なら何でも良かった。今は反省している。 */ z-index: 1868; /* widthと同じ値だけ画面外左に追いやる */ left: calc(-20vw + -10em); top: 0; transition: transform .3s, visibility .3s; /* 初期状態では表示しないでおく */ visibility: hidden; /* 念の為フォントサイズを固定しておく */ -webkit-text-size-adjust: 100%; font-size: 16px; } /* PC版では非表示となるサイトロゴバナー要素 */ .global_nav_site_banner { flex: 0 0 auto; /* 内包する画像サイズに要素幅を合わせる */ display: block; /* headerと高さを合わせるために透明border追加 */ border: 2px solid transparent; border-bottom: 2px solid currentColor; text-align: center; } .global_nav_site_banner .site_logo_link { display: inline-block; } /* グローバルナビゲーション項目を格納するコンテナ */ .global_nav { flex: 1 1 auto; /* 画面に収まりきらないほど項目が多い際にはスクロール表示させる */ overflow-y: auto; } .global_nav a, .global_nav button { padding: .8rem; text-align: left; } .global_nav button, .global_nav_clip { /* flexboxによる拡大縮小を禁止する */ flex: 0 0 auto; } /* 入れ子項目コンテナ */ .global_nav_clip { /* 開閉時に伸びるアニメーションをさせるため、 max-heightを用いた高さ計算を行っています。 calcで足している8pxは上下border数値です。 */ max-height: calc(2.8em + 8px); /* はみだした要素を非表示にすることで開閉演出を可能にする */ overflow: hidden; transition: max-height .3s; align-items: center; } /* 入れ子項目開閉ボタン */ .global_nav_clip_opener, /* テーマ変更ボタン */ .switch_theme, .switch_custom_theme, .switch_fixed_button_pos { /* すでにdisplay:flexは指定済み */ align-items: center; flex-flow: row nowrap; justify-content: space-between; } .global_nav_clip_wrapper { /* テキストの揃え方を変えたければここを変える */ text-align: left; } /* 入れ子項目開閉ボタン内部のみでの展開アイコンスタイル定義 */ .global_nav_clip_opener .icon_expand { /* アイコンサイズを固定 */ flex: 0 0 24px; } /* 展開されるまでは表示されない入れ子項目部分 */ .global_nav_clip_wrapper { /* スマホ版初期でも非表示にしておかないとPC表示に変えた際にちょっと表示が気になる */ visibility: hidden; transition: visibility .3s; } /*------------------------------------ 1.4: entry トップエントリ・個別記事両方でのエントリ部分のスタイル指定 クラス名(書かなかった分はここ以降の項目で記載) * .entry: 記事部分の親要素 * .entry_header: 記事部分ヘッダー * .entry_title: 記事部分の見出し * .entry_body: 記事部分の主要部分 * .top_entry_body: トップエントリ(非個別記事)で`.entry_body`と併記されるクラス名 ------------------------------------*/ /* トップエントリ(非個別記事)での.entry_body */ .top_entry_body { /* flexboxを用いてサムネイル画像と記事情報表示を横並びにする */ display: flex; flex-flow: row nowrap; } .entry { /* 内向けに余白を設定 */ padding: 1rem; } /* 同一ページでふたつ目以降の.entryが対象のスタイル定義 */ .entry:not(:nth-of-type(1)), /* 個別記事のエントリヘッダー情報表示部分 */ .entry_header>.entry_indicator, /* エントリ主要部分 */ .entry_body { /* 上へと余白を足す */ margin-top: 1rem; } /*------------------------------------ 1.5: entry content style 記事の本文・追記に記述された内容の表示設定 ------------------------------------*/ .entry_script, .entry_postscript { word-break: break-word; } /* 記事内の表要素 */ .entry_body table, /* 記事内の引用要素 */ .entry_body blockquote { /* 上下に余白を足す */ margin: 1rem 0; } /* 記事内の順不同リスト */ .entry_body ul, /* 記事内の順序付きリスト */ .entry_body ol { /* 内向けに余白を少し取る */ padding: .5rem; /* list-styleで表示される部分がはみ出さないよう左側に余白を取る */ padding-left: 2rem; } .entry_body ul { /* 各アイテム左側に黒丸を表示 */ list-style: disc; } /* 記事内の順不同リスト、順序付きリスト内に並べられるアイテム */ .entry_body li { /* 上下余白を少し取る */ margin: .6rem 0; /* ほんの気持ち程度に左余白を入れる */ padding-left: 2px; } /* 記事内の表要素 */ .entry_body table { /* エントリ横幅いっぱいまで広げる */ width: 100%; /* 表内部のテキストを中央揃え */ text-align: center; /* 表要素の枠線がくっついて一体化する設定 */ border-collapse: collapse; } /* 記事内の表見出し要素 */ .entry_body th, /* 記事内の表アイテム要素 */ .entry_body td { padding: .5rem; /* 文字色と同じ色で細い枠線をつける */ border: 1px solid currentColor; } /* blockquote要素内始めにあることが前提のスタイル定義 */ .entry_body blockquote header { padding: 1rem; /* blockquote要素の上側に乗っかる */ margin: -1rem -1rem 1rem; } /* blockquote要素内終わりにあることが前提のスタイル定義 */ .entry_body blockquote footer { padding: 1rem; /* blockquote要素の下側に乗っかる */ margin: 1rem -1rem -1rem; } /* 引用内部初めのp要素では上への余白を取らない */ .entry_body blockquote p:first-child { margin-top: 0; } /* 引用内部最後のp要素では下への余白を取らない */ .entry_body blockquote p:last-child { margin-bottom: 0; } /*------------------------------------ 1.6: entry thumb トップエントリでのサムネイル画像部分 * .entry_thumb: 記事サムネイル画像を内包するコンテナ * .entry_thumb_img: 記事サムネイル画像 ------------------------------------*/ /* サムネイル表示枠の縦幅設定のみ分離 */ .entry_thumb { /* calc()が使えない古いブラウザ用のフォールバック */ height: 200px; width: 200px; /* ここの数字を変えると縦幅が変わる */ height: calc(10vw + 100px); /* ここの数字を変えると横幅が変わる */ width: calc(10vw + 100px); /* 背景色を透明色に指定 */ background: transparent; position: relative; /* サムネイル縦幅が.entry_info縦幅より小さくなった場合には中央表示 */ align-self: center; /* flexbox有効時でもサムネイル画像は固定幅にさせる */ flex: 0 0 auto; } /* サムネイル画像要素 */ .entry_thumb_img { position: absolute; /* サムネイル画像を枠組みの中に中央表示する */ top: 50%; left: 50%; transform: translate(-50%, -50%); } /*------------------------------------ 1.7: entry info & entry indicator エントリでの情報表示に関わる部分 * .entry_info: コメント数などの各種記事情報を格納するコンテナ * .entry_indicator: * .entry_indicator_row: 要素を横並びにさせるラッパー * .entry_indicator_column: 要素を縦並びにさせるラッパー * .entry_indicator_date: 投稿時間表示コンテナ * .entry_indicator_date_text: 投稿時間テキスト * .entry_indicator_summary: トップエントリでの要約文章表示 * .entry_indicator_comment: コメント数コンテナ * .entry_indicator_trackback: トラックバック数コンテナ * .entry_indicator_link: 記事内コメント部分などへのリンク要素 * .entry_indicator_link_num: コメント数、トラックバック数の数字部分 * .entry_indicator_category: 記事が所属するカテゴリ名コンテナ * .entry_indicator_category_link: 所属カテゴリへのリンク * .entry_indicagor_category_text: 所属カテゴリ名のテキスト * .entry_indicator_community_wrapper: 記事にブログテーマ部分が存在する証のクラス名 * .entry_indicator_community: ブログテーマ部分のコンテナ * .entry_indicator_community_janre_link: ブログテーマジャンルへのリンク * .entry_indicator_community_thread_link: ブログテーマスレッドへのリンク * .entry_indicator_tag_wrapper: 記事にタグ部分が存在する証のクラス名 * .entry_indicator_tag_link: 該当タグへのリンク * .entry_indicator_tag_text: 該当タグ名のテキスト ------------------------------------*/ .entry_info, .entry_indicator_column { display: flex; flex-flow: column nowrap; } .entry_info { justify-content: space-between; flex: 1 1 auto; padding-left: 1rem; } .entry_indicator_row, .entry_indicator_link { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } /* トップエントリでの要約文章表示 初期状態では3行以上になると省略表示する */ .entry_indicator_summary { margin: 1rem 0; /* トリッキーなやり方をしてるのでフォントサイズを16px固定 */ font-size: 16px; /* トリッキーな(中略)行間数値を1.4固定 */ line-height: 1.4; /* ここの数値を変えると省略表示行数が変わる だいたいこれくらいの数値なら違和感なく切り取れそうな数値を設定 */ max-height: 4.1em; overflow: hidden; word-break: break-all; /* ここからchromeのみで効果が出る記述 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; } /* 個別記事ページでのトラックバック数表示 */ .entry_indicator_trackback { margin-left: .5rem; } /* 投稿時間テキスト */ .entry_indicator_date_text, /* コメント数、トラックバック数の数字 */ .entry_indicator_link_num, /* カテゴリー名テキスト */ .entry_indicagor_category_text, /* ブログテーマ等のリンク */ .entry_indicator_community_janre_link, /* 記事タグのテキスト */ .entry_indicator_tag_text { margin-left: 2px; } /* ふたつ目以降の記事タグに左側余白を追加 */ .entry_indicator_tag_link:not(:nth-of-type(1)) { margin-left: .8rem; } /* 続きを読むボタンコンテナ */ .entry_link_container { display: flex; align-self: flex-end; } /* 続きを読むボタン */ .entry_link { padding: .7rem; font-size: 1.1rem; } /* コミュニティ要素かタグ要素のどちらかがあれば、 それらの表示領域上部に余白を足す */ .entry_indicator_community_wrapper, .entry_indicator_tag_wrapper { margin-top: .5rem; } /* シェアボタン下の情報インジケータにのみ適用 */ .entry_footer>.entry_indicator { margin-top: 1rem; } /*------------------------------------ 1.8: fc2 footer & related entry fc2が自動挿入する拍手ボタンなどが含まれる要素と、 fc2公式の関連記事表示 クラス名リスト * .fc2_footer: fc2が自動挿入する拍手ボタンコンテナ * .relate_dd: 関連記事表示領域 * .relate_dl: 関連記事リストの格納コンテナ * .relate_dt: 関連記事見出し * .relate_ul: 関連記事リスト * #fc2relate_entry_thumbnail_are: サムネイル画像表示設定時にfc2が自動付与するid * .relate_li_nolink: 関連記事内の「現在開かれている記事」項目に付与されるクラス名 * .relate_entry_thumbnail: 関連記事サムネイル画像表示 ------------------------------------*/ .fc2_footer, .relate_dd { margin-top: 1rem; } .relate_dl { margin: 1.5rem 0; } .relate_dt { font-size: 1.3rem; font-weight: bold; } /* サムネイル画像非表示設定時の関連記事リスト */ .relate_ul { /* 黒丸を表示させる */ list-style: disc; } /* サムネイル画像表示設定時の関連記事スタイル定義 */ #fc2relate_entry_thumbnail_area { padding: 1rem; /* 下側だけ少し出っ張らせる */ padding-bottom: 1.2rem; } /* サムネイル画像表示時はflexboxで折り返させる */ #fc2relate_entry_thumbnail_area .relate_ul { display: flex; flex-flow: row wrap; } /* fc2公式のスタイル適用方法がアレなので対抗してidセレクタを用い、 css優先度を高める必要がある */ #fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li { display: flex; flex: 1 1 calc(50% - 1rem); margin-top: 1rem; /* 上と左右に余白をつけて、下には余白をつけない */ margin: 1rem .5rem 0; padding: 1rem; align-items: center; } /* .relate_li_nolinkは開かれている記事と同じ記事の項目に付与される */ #fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li_nolink { /* 開かれている記事と同じ記事に当たる部分は表示しない */ display: none; } #fc2relate_entry_thumbnail_area .relate_entry_thumbnail { /* 関連記事サムネイルの表示サイズを90px程度に固定する */ flex: 0 0 90px; /* デフォルトのpaddingを除去 */ padding: 0; } /*------------------------------------ 1.9: share buttons 記事下シェアボタン項目 クラス名リスト * .share_buttons: シェアボタン群を格納するコンテナ * .share_twitter: twitterのツイート画面が開かれるボタン * .share_facebook: facebookの投稿画面が開かれるシェアボタン * .share_hatenabm: はてなブックマークのブックマーク登録画面が開かれるシェアボタン * .share_line: LINEに送るボタン * .share_pinterest: pinterestにpinするボタン ------------------------------------*/ .share_buttons { /* シェアボタンを横一列に並べさせる */ display: flex; flex-flow: row wrap; margin-top: 2rem; } /* シェアボタンになるリンク要素設定 */ .share_buttons a { display: inline-block; /* LINEロゴ形状に合わせた角丸(雑調整) */ border-radius: 20%; /* もしもSVGの表示サイズがおかしくなった時のための設定 */ overflow: hidden; position: relative; box-shadow: 1px 1px 2px rgba(0, 0, 0, .2); /* 以下の数値を変えるとシェアボタンの大きさが変わる 他形状は想定してないので、基本的には正方形となるサイズ設定がオススメ */ width: 36px; height: 36px; /* シェアボタン一つ一つの間に余白をつける */ margin-right: .5rem; } /* シェアボタン内でのロゴアイコン共通設定 */ .share_buttons .svg_icon { /* TwitterのBrand GuideLinesに従い、 ほぼ 1.5:1 の比率になるように数値設定 */ width: 66.66%; height: 66.66%; /* ロゴを縦横中央揃えにする */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 各SNSのブランドカラーを背景色として指定 */ .share_twitter { background: #1DA1F2; } .share_facebook { /* 新しいfacebookブランドカラー */ background: #1877f2; } .share_hatenabm { background: #00a4de; } .share_line { background: #00b900; } .share_pinterest { background: #e60023; } /*------------------------------------ 1.10: category & titlelist カテゴリー表示ページと記事一覧ページ ほぼ同じ見た目なのでスタイル定義を共有 クラス名リスト * .category: カテゴリ一覧表示の親要素 * .category_title: カテゴリ一覧表示ページの大見出し * .category_list: カテゴリ一覧表示するリスト * .category_item: 個々の記事リンクを内包するリストアイテム要素 * .category_item_title: 当該記事の記事タイトル * .category_item_link: 当該記事へのリンク * .category_item_date: 投稿時間アイコンとテキストを一つにまとめる要素 * .category_item_date_text: 投稿時間テキスト * .titlelist: 記事一覧表示の親要素 * .titlelist_title: 記事一覧ページの大見出し * .titlelist_list: 記事一覧表示するリスト * .titlelist_item: 個々の記事リンクを内包するリストアイテム要素 * .titlelist_item_title: 当該記事の記事タイトル * .titlelist_item_num: 全記事での通し番号 * .titlelist_item_link: 当該記事へのリンク * .titlelist_indicator: カテゴリリンクと投稿時間を一つにまとめる要素 * .titlelist_item_category_link: 当該記事が所属するカテゴリへのリンク * .titlelist_item_date: 投稿時間アイコンとテキストを一つにまとめる要素 * .titlelist_item_date_text: 投稿時間テキスト ------------------------------------*/ .category, .titlelist { padding: 1rem; } .category_list, .category_item, .titlelist_list { margin-top: 1rem; } .category_item, .category_item_date, .titlelist_item, .titlelist_indicator, .titlelist_item_date { display: flex; /* 左右両端に分けて配置 */ justify-content: space-between; /* 縦軸を中央揃え */ align-items: center; } .category_item { /* 画面幅が狭い場合は折り返して表示 */ flex-flow: row wrap; } .titlelist_item { /* titlelist_itemはcolumn表示に変更 */ align-items: flex-start; flex-flow: column nowrap; } /* ふたつ目以降に出現した個々の記事リンクへのスタイル定義 */ .titlelist_item:not(:nth-of-type(1)) { /* 記事タイトル表示の上側に余白を気持ち多めにつける */ margin-top: 1.5rem; } .titlelist_indicator { /* 横幅いっぱいに広げる */ width: 100%; /* 若干量の上側余白を足す */ margin-top: .1rem; } .category_item_date, .titlelist_item_date { /* アイコンとテキストが分離しないようにする */ flex-flow: row nowrap; margin-left: auto; } .category_item_date_text, .titlelist_item_date_text { /* 投稿時間アイコンとの間にほんの少しだけ余白を空ける */ margin-left: 2px; } /*------------------------------------ 1.11: search entry 検索結果ページのスタイル定義 クラス名リスト * .search: 検索結果表示領域親要素 * .search_header: 検索結果表示領域ヘッダー * .search_title: 検索結果大見出し * .search_entry: 検索結果として出てくる記事 * .search_entry_link: 検索結果記事へのリンク * .search_entry_date: 検索結果記事の投稿時間 * .search_entry_body: 検索結果記事の主要要素 * .search_entry_thumb: 検索結果記事サムネイル画像表示部位 * .search_entry_img: 検索結果記事のサムネイル画像 * .search_entry_info: 検索結果記事の`.search_entry_indicator`と、 `.search_entry_summary`が内包されるコンテナ * .search_entry_indicator: 検索結果記事のカテゴリ名、コメント数表示部位 * .search_entry_indicator_link_num: 検索結果記事コメント数の数字 * .search_entry_category_link: 検索結果記事所属カテゴリへのリンク * .search_entry_comment_link: 検索結果記事のコメント部分へのリンク * .search_entry_summary: 検索結果記事の要約文章 * .search_not_found: 検索内容が見つからなかった際に表示される要素 * .search_not_found_title: .search_not_foundの見出し * .search_not_found_text: .search_not_foundの説明文 ------------------------------------*/ .search_header { padding: 1rem; } .search_title { /* h1要素のデフォルトスタイルを上書きして、 上下にほんの少し余白をつける */ margin: .1rem 0; } .search_entry, .search_not_found { padding: 1rem; margin-top: 1rem; } .search_entry_body, .search_entry_summary, .search_not_found_text { margin-top: 1rem; } .search_entry_body, .search_entry_comment_link { display: flex; flex-flow: row nowrap; align-items: center; } .search_entry_thumb { /* 画像表示幅を固定する */ flex: 0 0 150px; position: relative; /* どれだけ画像が小さくても最低縦幅を担保 */ min-height: 100px; } /* 検索結果記事サムネイル画像 初期状態では横150 * 縦100に収まるサイズとして表示する */ .search_entry_img { /* サムネイル画像の最高縦幅 */ max-height: 100px; /* サムネイル画像の最高横幅 */ max-width: 150px; /* 画像を中央揃え表示する */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .search_entry_header, .search_entry_indicator { display: flex; justify-content: space-between; flex-flow: row wrap; align-items: center; } .search_entry_info { display: flex; /* 内包要素を縦一列に配置 */ flex-flow: column nowrap; /* 内包要素を上下両端に分けて配置する */ justify-content: space-between; /* 記事サムネイル画像は大きさ固定なので、余ったスペースを埋めるように伸ばす */ flex: 1 1 auto; /* 表示しきれない要約文章は非表示とする */ overflow: hidden; /* 記事サムネイル画像との間に余白を入れる */ margin-left: 1rem; } /* .entry_indicator_summaryと同じ手法で 表示行数制限をかける 初期状態だと二行表示 */ .search_entry_summary { font-size: 16px; line-height: 1.4; max-height: 2.8em; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; } .search_entry_indicator_link_num { /* コメント数アイコンとの間に余白をほんの少し足す */ margin-left: 2px; } /* 検索該当記事が見つからなかった際にのみ表示される要素のための設定 */ .search_entry~.search_not_found { /* .search_entryが直上に存在する = 検索該当記事が存在する場合は表示しない */ display: none; } /*------------------------------------ 1.12: same category navigation 同一カテゴリーリンク機能 クラス名リスト * .same_category_nav: 同一カテゴリ次記事リンクを内包するコンテナ * .same_category_link: 同一カテゴリ次記事へのリンク * .same_category_link_thumb: 次記事サムネイル画像のコンテナ * .same_category_link_img: 次記事サムネイル画像 * .same_category_link_info: 次記事の記事タイトルと所属カテゴリを内包するコンテナ * .same_category_link_text: 現在記事と次記事の所属カテゴリ名 * .same_category_link_title: 次記事タイトル ------------------------------------*/ .same_category_nav, .same_category_link { margin-top: 1rem; padding: 1rem; } .same_category_link { display: flex; flex-flow: row nowrap; align-items: center; max-height: 300px; overflow: hidden; } .same_category_link_thumb { /* サムネイル画像表示横幅は親要素の40%程度にする */ flex: 0 0 40%; } .same_category_link_info { flex: 1 1 auto; text-align: center; padding: 1rem; } .same_category_link_title { margin-top: .5rem; } /*------------------------------------ 1.13: entry comments 個別記事での投稿コメント表示部分 クラス名まとめ * .comment_area: コメント機能部分親要素 * .comments: 投稿コメント表示部分親要素 * .comment_container: 個々の投稿コメント要素 * .comment_avatar: アバター画像表示コンテナ * .comment_avatar_img: アバター画像 * .comment_content: 各コメント内容コンテナ * .comment_header: 各コメントのヘッダー * .comment_author: 各コメント者の名前 * .comment_date: 各コメント投稿日時 * .comment_body: 各コメント本文コンテナ * .comment_title: 各コメント件名 * .comment_footer: 各コメントのフッター * .comment_text: 各コメント本文 * .comment_url_empty_checker: 各コメントにurlが存在するかを判定するための要素 * .comment_url_link: 各コメントに付記されたurl * .comment_edit_link: パスワードが設定されている際に表示されるコメント編集ボタン * .comment_reply: 各コメント簡易返信機能ボタン ------------------------------------*/ /* 上部余白まとめ */ .comment_area, .comments, .comment_container { margin-top: 1rem; } /* 内部余白まとめ */ .comment_area, .comment_container, .comment_body { padding: 1rem; } /* flexbox指定まとめ */ .comment_container, .comment_header, .comment_footer, .comment_content, .comment_url_link, .comment_reply, .comment_edit_link { display: flex; } .comment_container { flex-flow: row nowrap; /* 下方向のpaddingだけちょい減らす */ padding-bottom: .6rem; } .comment_header, .comment_footer { flex-flow: row wrap; } .comment_header { padding: .8rem 1rem; justify-content: space-between; } .comment_footer { justify-content: flex-end; align-items: center; margin-top: .6rem; } .comment_content { flex-flow: column nowrap; flex: 1 1 auto; word-break: break-word; } .comment_avatar { /* 画面横幅が極端に狭い場合は縮小される */ flex: 0 0 22%; max-height: 5em; max-width: 5em; /* ほんの少し左に動かすためposition設定 */ position: relative; left: -0.5rem; /* avatar表示を消した場合に問題が出ないよう、アバター側から余白を付ける */ margin-right: .5rem; } .comment_avatar_img { /* 画像表示領域を丸く整える */ border-radius: 50%; } /* コメント件名が空欄でない場合のみ下部余白追加 */ .comment_title:not(:empty) { margin-bottom: 1rem; } .comment_url_empty_checker { /* この要素は`:empty`判定を兄弟要素に広げることが目的   なのでこれ自体は表示しない */ display: none; } /* url欄が空欄だった場合にはsvgアイコンを内包したa要素も表示しない */ .comment_url_empty_checker:empty~.comment_url_link { display: none; } .comment_edit_link, .comment_reply { /* 押し間違いを防ぐためにボタン間で余白を取る */ margin-left: .5rem; } /*------------------------------------ 1.14: comment form 個別記事、コメント編集ページでのコメント投稿フォーム 個別記事でのクラス名リスト * .comment_form: コメント投稿フォーム親要素 * .comment_form_title: コメント投稿フォーム見出し * .comment_form_input: テキストボックスを格納するコンテナ * .comment_form_input_text: 各種テキストボックス要素 * .comment_form_hidden: ページ上には表示されないけど必要なフォーム要素 * .comment_form_button: コメント投稿フォーム上のボタン(主に送信ボタン) * .comment_form_buttons: コメント送信ボタンとアバター変更ボタンを内包するコンテナ * .comment_form_item_row: 二つ以上の要素を横並びにさせるラッパー * .comment_form_item_column: 二つ以上の要素を縦並びにさせるラッパー * .comment_form_item_single: 単一要素を入れるためのラッパー * .comment_form_textarea: コメント本文入力欄を格納するコンテナ * .comment_form_himitu_label: 非公開コメントチェックボタンと紐付いたラベル要素 * .comment_form_avatar_button: アバター選択ボタン * .comment_form_avatar_button_text: アバター選択ボタンテキスト * .comment_form_avatar_img_wrapper: アバター選択ボタンに表示される現在選択中のアバター * .comment_form_avatar_select_container: アバター選択ボタンをクリックすると展開されるアバター選択ウィンドウ * .comment_form_avatar_select_button: アバター選択ウィンドウ内のアバター決定ボタン コメント編集画面でのクラス名リスト * parent_link_container: 現在編集中コメントが投稿された元記事 * parent_link: コメント元記事へのリンク * comment_form_delete_button 現在編集中コメントの削除ボタン ------------------------------------*/ .comment_form { display: flex; flex-flow: column nowrap; align-items: flex-start; padding: 1rem; } /* margin-topまとめ */ .comment_form, .comment_form>.comment_form_item_row, .comment_form>.comment_form_textarea, .comment_form>.comment_form_input, .comment_form>.comment_form_item_column, .comment_form_item_single, .comment_form_item_column>.comment_form_input:nth-of-type(2) { margin-top: 1rem; } /* ページに表示しない要素 */ .comment_form_hidden { display: none; } .comment_form_item_row, .comment_form_item_single, .comment_form_avatar_button { display: flex; flex-flow: row nowrap; align-items: center; } /* 横一列に複数並べるフォーム要素をこれに入れる */ .comment_form_item_row { justify-content: space-between; } /* 子要素が三つ以上の場合は想定していないので注意 この二つ:nth-child使うとシンプルになるけど、 :nth-childは明らか遅そうなので忌避 */ .comment_form_item_row>.comment_form_input:nth-of-type(1), .comment_form_item_row>.comment_form_button:nth-of-type(1) { margin-right: .5rem; } .comment_form_item_row>.comment_form_input:nth-of-type(2), .comment_form_item_row>.comment_form_button:nth-of-type(2) { margin-left: .5rem; } .comment_form_input, .comment_form_item_row, .comment_form_item_single, .comment_form_textarea, .comment_tool_wrap { width: 100%; } .comment_form_item_column { width: calc(50% - .5rem); } .comment_form_buttons { position: relative; } .comment_form_button { height: 3rem; flex: 1 1 5rem; max-width: 6rem; } .comment_form_avatar_button { max-height: 5em; justify-content: space-around; margin-left: 1rem; position: relative; } .comment_form_avatar_img_wrapper { height: 4em; width: 4em; position: absolute; left: -1rem; } .comment_form_avatar_button_text { margin-left: 3rem; /* border分を減らしておく */ height: calc(3em - 4px); min-width: 6.5rem; display: flex; align-items: center; justify-content: center; } .comment_form_avatar_select_container { /* 初期状態では非表示とする */ display: none; width: 26rem; /* どの画面幅でもはみ出ないようにする */ max-width: calc(100vw - 2rem); max-height: 26rem; position: absolute; bottom: 4rem; left: -2rem; overflow: auto; /* 表示時に効果が発揮されるflexbox設定 */ flex-flow: row wrap; /* space-evenlyが使えないブラウザのフォールバック */ justify-content: space-around; justify-content: space-evenly; } .comment_form_avatar_select_button { padding: .5rem; /* padding込みで5remの大きさを確保するために1rem多く指定しておく */ flex: 0 0 6rem; /* outlineが隠れないようにする */ margin: 2px; } .comment_form_delete_button { max-width: 10rem; margin: 0 auto; } /*------------------------------------ 1.15: entry trackback 個別記事のトラックバック機能 クラス名リスト * .trackback_area: トラックバック機能の親要素 * .trackback_title: トラックバック機能の見出し * .trackback_link_container 表示中記事のトラックバックurlを格納するコンテナ * .trackback_link: 表示中記事にトラックバックして記事を書くためのリンク * .trackback_input 表示中記事にトラックバックするためのurl表示欄 * .trackback_entry: 表示中記事にトラックバックされた記事を表示するコンテナ * .trackback_entry_header: トラックバックされた記事表示部分のヘッダー * .trackback_entry_link: トラックバックされた記事へのリンク * .trackback_entry_title: トラックバックされた記事タイトルと、そのブログ名 * .trackback_entry_date: トラックバックされた記事の投稿時間 * .trackback_entry_reference: トラックバックされた記事から引用される部分 * .trackback_entry_summary: トラックバックされた記事から引用された要約文章 ------------------------------------*/ .trackback_area, .trackback_link_container, .trackback_entry { padding: 1rem; margin-top: 1rem; } .trackback_input, .trackback_entry_reference { margin-top: 1rem; } .trackback_entry { word-break: break-word; } .trackback_entry_header { display: flex; flex-flow: row wrap; justify-content: space-between; } .trackback_entry_body { display: flex; flex-flow: column nowrap; } /*------------------------------------ 1.16: pager ページ下部の戻る進むページネーション要素 クラス名リスト * .pager: ページネーション部分の親要素 * .pager_list: ページネーションリンクのリスト * .pager_item: ページネーションリンクを内包するコンテナ * .pager_prev: 戻るリンクを内包する`.pager_item` * .pager_prev_link: 戻るリンク要素 * .pager_prev_link_text: 戻るリンクテキスト * .pager_home: ブログトップページリンクを内包する`.pager_item` * .pager_home_link: ブログトップページリンク要素 * .pager_home_link_text: ブログトップページリンクテキスト * .pager_next: 進むリンクを内包する`.pager_item` * .pager_next_link: 進むリンク要素 * .pager_next_link_text: 進むリンクテキスト ------------------------------------*/ .pager { margin-top: 1rem; } .pager_list { display: flex; flex-flow: row nowrap; justify-content: space-around; } .pager_item { /* 三項目表示なので、一項目の横幅は33%程度で表示する */ flex: 1 1 33%; } .pager_prev_link, .pager_home_link, .pager_next_link { display: flex; flex-flow: column nowrap; align-items: center; padding: 1rem 0; /* 五文字 + 余白程度を想定した最大横幅 */ max-width: 6em; /* 中央寄せ */ margin: 0 auto; } /*------------------------------------ 1.17: sidebar plugin サイドバーに表示されるプラグイン部分 親要素にあたる.sidebarがflex要素であることには注意 FC2公式のプロフィール・QRコードプラグインなどの中央揃えなどについては、 「プラグイン管理」から表示方法を調整してください。 クラス名リスト * .plugin: 各プラグインの親要素 * .plugin_content 各プラグインの中身を格納するコンテナ * .plugin_header: 各プラグインのヘッダー要素 * .plugin_body: 各プラグインの主要要素 * .plugin-search: fc2公式の検索プラグインクラス名。なので、このcssと命名規則が異なっている ------------------------------------*/ .plugin { /* 320px + 左右padding(20px)くらいを目安にwrapさせる */ flex: 0 1 340px; padding: 1rem 10px; } .plugin_header { text-align: center; } .plugin_body { border-top: 3px solid; margin-top: 0.3rem; padding-top: 1.5rem; /* コメントバルーンプラグインを見る限り これが前提になってるプラグインはわりとありそうだったので、 デフォルトでposition: relativeを付けておく */ position: relative; } /* 公式検索プラグイン用 */ .plugin-search>input:last-child { margin-top: 1rem; } /*------------------------------------ 1.18: footer ページ一番下のfooter要素 クラス名リスト * .footer_info: サイトの著作権情報などを表示する要素 * .copyrights: サイトの著作権情報 * .powered: fc2ブログを用いたサイトだと表示する要素 ------------------------------------*/ .footer_info { text-align: center; } .footer_info>p:not(:nth-of-type(1)) { margin-top: .5rem; } /*------------------------------------ 1.19: fc2 ad fc2ブログが自動挿入するページ内広告部分 クラス名リスト * #fc2_text_ad: 個別記事終わりに自動挿入されるテキスト広告要素 * .fc2_text_ad_title: 個別記事終わりテキスト広告の見出し * .ad_container: fc2ブログ無料版で必須となる広告ユニットを格納するコンテナ ------------------------------------*/ #fc2_text_ad { /* id指定に対抗してスタイルを変える */ padding: 1rem !important; margin: 1rem 0 !important; } #fc2_text_ad a { border: none; /* outlineを表示させるスペースを確保 */ margin: 2px !important; } .js-focus-visible #fc2_text_ad a.focus-visible { /* borderを除去した代わりにoutline追加 */ outline-width: 2px; } .fc2_text_ad_title { margin-bottom: 0.3rem; } .ad_container { text-align: center; margin-top: .6rem; } /*------------------------------------ 1.20: svg icons インラインSVGで導入しているSVGアイコンのスタイル定義 シェアボタン用SVGアイコンサイズはシェアボタン部分で指定してるので注意 クラス名リスト * .svg_icon: SVGアイコン全てを指し示すクラス名 * .icon_time: 投稿時間アイコン * .icon_comment: コメント数アイコン * .icon_trackback: トラックバック数アイコン * .icon_category: 記事カテゴリーアイコン * .icon_community_category: 記事ブログテーマアイコン * .icon_edit: コメント編集アイコン * .icon_reply: コメント返信アイコン * .icon_expand: グローバルナビゲーションの展開可能項目アイコン * .icon_switch_theme: テーマ変更アイコン * .icon_theme_light: `theme_light`適用時のみ表示されるアイコン * .icon_theme_dark: `theme_dark`適用時のみ表示されるアイコン * .icon_link: urlリンクアイコン * .icon_tag: 記事タグアイコン * .icon_menu: スマホ版グローバルナビゲーション展開ボタン(バーガーボタン)アイコン * .icon_arrow_up: ページトップへ戻るボタンアイコン * .icon_arrow_back: ページネーションの戻るリンクアイコン * .icon_arrow_forward: ページネーションの進むリンクアイコン * .icon_home: ページネーションのブログトップリンクアイコン シェアボタンアイコンのクラス名 * .icon_hatenabm: はてなブックマークロゴアイコン * .icon_twitter: Twitterロゴアイコン * .icon_facebook: 旧Facebookロゴの`f`アイコン * .icon_line: LINEロゴアイコン * .icon_pinterest: Pinterestロゴアイコン SVGの色変更に関わるクラス名リスト * .svg_main_color: 全般的なSVGアイコンの色指定クラス名 * .svg_sub_color: シェアボタンにおけるSVGアイコンの色指定クラス名 ------------------------------------*/ .icon_time, .icon_comment, .icon_trackback, .icon_category, .icon_community_category, .icon_edit, .icon_reply, .icon_switch_theme, .icon_enabled_custom_theme, .icon_disabled_custom_theme, .icon_fixed_button_pos_top_left, .icon_fixed_button_pos_top_right, .icon_fixed_button_pos_bottom_left, .icon_fixed_button_pos_bottom_right, .icon_expand { /* どれも正方形のSVGアイコンなので、正方形になるように数値指定 */ /* material.ioの記事を見るに、px指定が美しく表示するコツらしいです。 > https://material.io/design/iconography/system-icons.html > Clarity (Pixel perfection)の項目を参照 */ height: 24px; width: 24px; } .icon_link { /* material.ioアイコンより余白が取られてないアイコン素材なので小さめサイズを指定する */ height: 18px; width: 18px; } .icon_tag { /* material.ioアイコンより余白が取られてないアイコン素材なので小さめサイズを指定する */ width: 20px; height: 20px; } .icon_expand { /* 開閉時のアニメーション時間を指定 */ transition: transform .3s; } .icon_switch_theme, .icon_enabled_custom_theme, .icon_fixed_button_pos_top_left, .icon_fixed_button_pos_top_right, .icon_fixed_button_pos_bottom_left, .icon_fixed_button_pos_bottom_right { /* 初期状態では非表示 */ display: none; } .icon_menu { /* 使用箇所が大きめなので、少し大きめなサイズを指定 */ width: 34px; height: 34px; } .fixed_button .icon_menu, .fixed_button .icon_switch_theme, .icon_arrow_up, .icon_home, .icon_arrow_back, .icon_arrow_forward { /* 基本アイコンサイズの倍の大きさを指定 */ height: 48px; width: 48px; } /* サイト全般に用いるアイコンカラー設定 `.svg_main_color`がメインアイコンカラーなのですが、 これの色定義は各テーマ部分で行っています。 テーマ未適用で表示した場合はブラウザ初期値が使われて、 おそらくは黒色が伺えることでしょう。 */ /* シェアボタンなどに用いるサブアイコンカラー */ .svg_sub_color { /* シェアボタン背景色は色鮮やかなので白色を設定 */ fill: #fff; } /*------------------------------------ 2.x: js related style javascriptによって追加される要素や、 javascriptによって変化が起きる要素のスタイル定義。 ------------------------------------*/ /*------------------------------------ 2.0: lazysizes lazysizesでの遅延読み込み関連スタイル定義 以下のクラス名はlazysizes.jsが自動的に付けたり外したりするもの。 クラス名リスト * .lazyload: 遅延読み込みを行う対象となるクラス名 * .lazyloading: 画像を遅延読み込み中を示すクラス名 * .lazyloaded: 遅延読み込みが完了した画像のクラス名 ------------------------------------*/ .lazyloading { /* 画像読み込み中は透明化 */ opacity: 0; } .lazyloaded { /* 画像を読み込み終えるとふわっと表示させる */ opacity: 1; /* 画像が現れる速度を変えたければここの数値を変える */ transition: opacity .3s; } /*------------------------------------ 2.1: modal shadow スマホ版グローバルナビゲーションを開いた時に ふわっと出てくる黒い影。 straw_man_nav.jsのインスタンス生成時に 要素へと追加される。 追加するクラス名は一つだけなので、クラス名リストは省略。 ------------------------------------*/ .modal_shadow { /* スクロールにかかわらず画面上に固定 */ position: fixed; /* 画面幅全体にみっちり敷き詰める */ width: 100vw; height: 100vh; /* 透明度設定で色を変更するので背景色は#000で */ background: #000; /* ページ読み込み時は透明度100% */ opacity: 0; /* スマホ版グローバルナビゲーションより1つ下のレイヤー位置にする */ z-index: 1867; /* 画面左上を基準に表示する */ top: 0; left: 0; /* ページ読み込み時は非表示状態にしておく */ visibility: hidden; /* 表示状態へと移る際のアニメーション時間 */ transition: opacity .3s, visibility .3s; } /*------------------------------------ 2.2: fixed buttons 基本的には常時表示されるページトップへ戻るボタン要素。 ページ読み込み時に自動読み込みされる scroll_to_top.jsによって要素へと追加される。 追加するクラス名は一つだけなので、クラス名リストは省略。 ------------------------------------*/ .fixed_button_base { display: flex; /* スクロールにかかわらず画面上に固定 */ position: fixed; flex-wrap: nowrap; z-index: 1000; } .fixed_button_base.is_pos_top_left, .fixed_button_base.is_pos_bottom_left { /* ステート名が切り替わった際には左端に寄せる */ left: 3vw; } .fixed_button_base.is_pos_top_right, .fixed_button_base.is_pos_bottom_right { /* 右端に寄せるけど少しだけ余白を取る。 また、画面横幅が狭い時は余白を若干少なく、 画面横幅が広い時は若干大きく取る */ right: 3vw; } .fixed_button_base.is_pos_top_left, .fixed_button_base.is_pos_top_right { /* 画面縦幅にかかわらず固定で余白を取る */ top: 2rem; flex-direction: column; } .fixed_button_base.is_pos_bottom_left, .fixed_button_base.is_pos_bottom_right { bottom: 2rem; flex-direction: column-reverse; } .fixed_button { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; } .fixed_button { opacity: .6; transition: opacity .3s; } .fixed_button_base.is_pos_top_left .fixed_button:not(:nth-of-type(1)), .fixed_button_base.is_pos_top_right .fixed_button:not(:nth-of-type(1)) { margin-top: 1rem; } .fixed_button_base.is_pos_bottom_left .fixed_button:not(:nth-of-type(1)), .fixed_button_base.is_pos_bottom_right .fixed_button:not(:nth-of-type(1)) { margin-bottom: 1rem; } /* グローバルナビゲーション内でのアイコン変化 */ .is_pos_top_left .icon_fixed_button_pos_top_left, .is_pos_top_right .icon_fixed_button_pos_top_right, .is_pos_bottom_left .icon_fixed_button_pos_bottom_left, .is_pos_bottom_right .icon_fixed_button_pos_bottom_right { display: inline-block; } /*------------------------------------ 2.3: laymic 横読み/縦読み表示を可能にする オーバーレイ型漫画ビューワー用css ここで記述しているのは 「laymic表示用に適用済みスタイルを微調整する」程度のもの。 全体的なlaymic表示スタイルについては 別途読み込むlaymic.cssから適用しています。 ------------------------------------*/ .laymic_root { z-index: 3000; } .laymic_root { /* 漫画ビューワーのオーバーレイ背景色を指定 */ background: rgba(0, 0, 0, .9) !important; } .laymic_root img { box-shadow: none; } .laymic_root button:hover { /* mousehover時のアンダーバーを消す */ text-decoration: none; } .laymic_root .laymic_selectItem { padding: .3rem 1rem; } /* laymic内でのフォーカス表示調整 */ .js-focus-visible .laymic_root button.focus-visible { outline-width: 2px; } /*------------------------------------ 2.4: js states javascriptを用いて付け外しすることで、 ページに変化をもたらすクラス定義 modal_shadowについてのステートがあるので、 javascript関連の最後部に持ってきている 各種stateクラス名リスト * is_opened: 何かが開かれている状態のクラス名 * is_visible: 何かが可視化されている状態のクラス名 ------------------------------------*/ /* スマホ版グローバルナビゲーションが表示されている状態 */ .global_nav_container.is_opened { /* .global_nav_containerのwidthと合わせること */ transform: translateX(calc(20vw + 10em)); } .global_nav_container.is_opened, /* 入れ子項目が展開されている状態 */ .global_nav_clip.is_opened .global_nav_clip_wrapper { /* スマホ版初期状態で隠していたナビゲーション要素を表示させる */ visibility: visible; } /* 入れ子項目が展開されている状態の開閉可能アイコン */ .global_nav_clip.is_opened .icon_expand { /* 個別項目展開時にはアイコンを反転させる */ transform: rotateX(-180deg); } /* スマホ版グローバルナビゲーション表示と連動して、黒い影が表示されている状態 */ .modal_shadow.is_visible { /* 影の不透明度 */ opacity: 0.5; /* 表示状態を切り替える */ visibility: visible; } /* コメントアバター選択ボタンがクリックされて、アバターリストが表示された状態 */ .comment_form_avatar_select_container.is_visible { /* 初期状態では非表示としていたアバターリストを表示させる */ display: flex; } /*------------------------------------ 3.x: media queries 使用デバイスの画面幅に応じて、 1カラムから2カラムへと表示を変更する PC版判定のしきい値設定基準ですが、 「(最低限確保したい原稿の横幅) + (原稿周辺の左右余白合計値) + (サイドバーの横幅) + (縦スクロールバーの横幅)」 を目安として考えておけば良いでしょう。 スクロールバー横幅はブラウザによって違うのですが、だいたい15~20pxくらいです。 初期値では、 「(原稿最低横幅: 600px) + (左右余白: 32px) + (サイドバー横幅: 340px) + (縦スクロールバー横幅: 20px)」として、 992pxを指定しています。 各種クラス名の意味合いについては、 `1.x: sp view`における同じ部分の注釈コメント記述を参考にしてください。 ------------------------------------*/ /*------------------------------------ 3.0: sp view extend スマホ版でのみ指定しておきたい特別なスタイル ここに記述すると「スマホ版でのみ適用されるコード」となりますが、 できる限りは`1.x: sp view`部分に記述して、 使用を控えていくことを推奨します。 初期状態では「スマホ版でのみ表示しない」設定のみ組み込んでます。 この記述をスマートに書くためには、この部分を新設するしかなかったんよ……。 ------------------------------------*/ /* スマホ版でのみ適用される部分 */ @media screen and (max-width: 991px) { /* スマホ版では表示しない要素 */ .sp_view_hidden { display: none !important; } } /* PC版の2カラム表示内容 */ @media screen and (min-width: 992px) { /*------------------------------------ 3.1: pc view base PC版表示でのHTML要素に定義するスタイル ------------------------------------*/ /* PC版での見出しフォントサイズ */ h1 { font-size: 1.7em; } h2, .same_category_link_title { font-size: 1.5em; } /*------------------------------------ 3.2: pc view universal class PC版表示での汎用クラスまとめ ------------------------------------*/ /* 2カラム状態 = PC版画面では表示されなくなる要素 */ .pc_view_hidden { display: none !important; } /*------------------------------------ 3.3: pc view page layout PC版表示でのページレイアウト定義 ------------------------------------*/ /* 複数要素の横幅を合わせるために同時定義 */ .header_branding, .main_container, .global_nav_container { /* メインカラム + サイドバーの最大サイズを変えるにはここの数値を変える 初期値は原稿画像の最大横幅が690pxであることを前提に設定してる */ /* NOTE: (原稿:690px) + (メイン余白:16 * 2) + (サイドバー: 340px) + (サイドバー左余白: 4px)*/ max-width: 1066px; /* 内容にかかわらずmax-widthの幅を取る */ width: 100vw; } /* 記事本文側要素とサイドバー側要素が格納される要素 */ .main_container { flex-flow: row nowrap; /* 2カラム時には要素を中央揃えする */ justify-content: center; /* 要素の縦は上部で揃える */ align-items: flex-start; } /* ページヘッダー */ .header { /* PC版ヘッダーの最小縦幅 */ min-height: 100px; justify-content: center; /* 2カラム表示では.global_nav_containerをロゴ下に入れる */ flex-flow: column nowrap; } /* ヘッダーのロゴ画像が入る要素 */ .header_branding { /* 先んじて指定した最大横幅いっぱいまで広げる */ flex: 1 1 auto; } /* 記事本文が表示される要素 */ .primary { /* メインカラムの最大サイズを決める数値 サイドバー最大サイズは(.main_containerのmax-width - この数値)で決まる */ max-width: 722px; } /* 記事本文右側に表示されるサイドバー */ .sidebar { /* カラム時サイドバーは一定幅で固定 初期値はgoogle adsenseのワイドレクタングル大を表示しきれるサイズ ここの``○○px`を変更するとサイドバー横幅が変更される */ flex: 1 0 340px; /* 2カラム時、.primaryと開始ベースラインを合わせる */ padding: 4px 0; /* 左側にほんの少しだけ余白を入れる */ margin: 0 0 0 4px; } /* トップページなどでのサムネイル画像表示枠 */ .entry_thumb { /* ここの数字を変えると縦幅が変わる */ height: 200px; /* ここの数字を変えると表示枠横幅が変わる */ width: 200px; } /*------------------------------------ 3.4: pc view header PC表示でのヘッダーに関するスタイル定義 ------------------------------------*/ /* サイトロゴを格納する見出しタグ */ .site_logo_title { /* 横幅いっぱいに広がるのを抑制する */ display: inline-block; } /*------------------------------------ 3.5: pc view global navigation PC表示でのグローバルナビゲーション ------------------------------------*/ .global_nav_container { /* スマホ版表示で変更していた部分を初期状態に戻す */ height: initial; position: static; left: initial; top: initial; transform: initial; transition: none; visibility: visible; } .global_nav { /* 子項目で横が埋め尽くされたら左に折り返す */ flex-flow: row wrap; align-items: center; min-height: 2rem; /* chromeでスクロールバーが出てしまう問題を解決するためunsetに戻す */ overflow: initial; } /* .global_nav直下の子要素全てに適用するスタイル */ .global_nav>a { padding: .65rem 1rem; } .global_nav_clip { position: relative; /* 親要素以上の縦幅にならないように */ max-height: initial; overflow: initial; } .global_nav_clip_opener, .switch_theme { padding: .5rem 1rem; } .global_nav_clip_opener .icon_expand, .switch_theme_icon_wrapper { /* PC版表示では左側にmarginを表示 */ margin: 0 0 0 .2rem; } .global_nav_clip_wrapper { position: absolute; margin: 0; /* 展開ボタンの少し下あたりに子項目ウィンドウを表示 */ top: 3.5rem; width: 12em; /* 非操作時は非表示状態とする */ visibility: hidden; opacity: 0; /* クリック時のアニメーション時間を変えたいなら、ここの秒数を変えること */ transition: opacity .3s, visibility .3s; /* 要素を右揃え表示するにはここを`right: 0`に変えること */ left: 0; } .switch_fixed_button_pos { margin-left: auto; } .switch_fixed_button_pos_icon_wrapper { margin-left: .4rem; } /*------------------------------------ 3.6: pc view js states PC表示でのみ使われるjavascriptで変更するステート変化スタイル定義 ------------------------------------*/ .fixed_button_base { /* PC版表示ではグローバルナビゲーションより上に位置するようにする */ z-index: 2000; } /* グローバルナビゲーション要素をクリックして子要素を表示させる際に用いるクラス名 */ .is_opened>.global_nav_clip_wrapper { /* 要素を表示して透明度をなくす */ visibility: visible; opacity: 1; } } /* end of @media screen and (min-width: 992px) */ /*------------------------------------ 3.7: pc mouse hover setting スマホでは:hoverの問題が多いので、 PC以外では:hoverを使わないようにする ------------------------------------*/ @media (hover: hover) { a:hover, button:hover, input[type="submit"]:hover { /* マウスが乗っかった際にのみリンクテキスト下線を付ける */ text-decoration: underline; } .same_category_link:hover { /* 何もしなければ:hover時に全てのテキストへ 下線適用されてしまうので、それを避ける */ text-decoration: none; } .same_category_link:hover .same_category_link_title { /* :hover時、記事タイトルのみ下線を適用する */ text-decoration: underline; } .scroll_to_top:hover { /* カーソルを乗せると透明度を下げるが、完全な不透明にはしない */ opacity: .9; } .fixed_button:hover { opacity: .9; } } /*------------------------------------ 4.x: theme サイト全体の色変えをクラス名一つポン付けで行うための箇所。 要素のクラス名に`theme_foo`なりを付け足すと効力発揮するような仕組み。 ------------------------------------*/ /*------------------------------------ 4.0: general shadow デフォルトテーマ二種で用いられる影を一括指定 影の濃さはマテリアルデザインを意識して、 「紙一枚分の厚みを感じるほんの少しの影」にしています。 ------------------------------------*/ input[type="submit"], blockquote, table, .free_wrapper, .header, .entry, .entry_link_container, .entry_body ul, .entry_body ol, .entry_body blockquote header, .entry_body blockquote footer, .same_category_nav, .same_category_link, .comment_area, .comment_container, .comment_header, .comment_body, .comment_form, .comment_form_button, .comment_form_avatar_button, .comment_form_avatar_select_container, .trackback_area, .trackback_link_container, .trackback_entry, .pager, .sidebar, .footer, .scroll_to_top, .fixed_button, .category, .titlelist, .search_header, .search_entry, .search_not_found, #fc2relate_entry_thumbnail_area, #fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li, #fc2_text_ad { box-shadow: 1px 1px 2px rgba(0, 0, 0, .2); } #fc2relate_entry_thumbnail_area .relate_ul { /* 影が邪魔になる要素だけ指定して影を除去 */ box-shadow: none; } input[type="text"], input[type="url"], input[type="password"], textarea, /* スマホ版表示ではへこんだような影をつける */ .global_nav_clip_wrapper { /* へこんで見える影を付ける */ box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2); } @media screen and (min-width: 992px) { /* 2カラム状態のときのみ浮き上がるような影を付ける */ .global_nav_clip_wrapper { box-shadow: 1px 1px 2px rgba(0, 0, 0, .2); } } /*------------------------------------ 4.1: light theme 清潔感のあるライトテーマ。 このテーマの適用中には、body要素のクラス名に `theme_light`と追加されます。 使用色は以下の通り。 * #eee: ベース背景色 * #fafafa: 記事背景色 * #e2e2e2: サブ背景色 * #333: 文字色 * #023db5: リンク色(未閲覧、閲覧済み両方で同じ色) ------------------------------------*/ .theme_light, .theme_light blockquote, .theme_light .global_nav_clip_wrapper, .theme_light .entry_body ul, .theme_light .entry_body ol, .theme_light .comment_container, .theme_light .comment_form, .theme_light .trackback_link_container, .theme_light .trackback_entry, .theme_light .same_category_link, .theme_light .plugin-search input[type="text"], .theme_light #fc2relate_entry_thumbnail_area, .theme_light #fc2_text_ad { /* ベース背景色 */ background: #eee; } .theme_light input[type="text"], .theme_light input[type="url"], .theme_light input[type="password"], .theme_light textarea, .theme_light .free_wrapper, .theme_light .header, .theme_light .global_nav_container, .theme_light .entry, .theme_light .same_category_nav, .theme_light .comment_area, .theme_light .comment_body, .theme_light .comment_form_avatar_button, .theme_light .comment_form_button, .theme_light .trackback_area, .theme_light .trackback_input, .theme_light .pager, .theme_light .sidebar, .theme_light .footer, .theme_light .scroll_to_top, .theme_light .fixed_button, .theme_light .category, .theme_light .titlelist, .theme_light .search_header, .theme_light .search_entry, .theme_light .search_not_found, .theme_light #fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li { /* 記事背景色 */ background: #fafafa; } .theme_light input[type="submit"], .theme_light .entry_body blockquote header, .theme_light .entry_body blockquote footer, .theme_light .switch_theme, .theme_light .switch_custom_theme, .theme_light .switch_fixed_button_pos, .theme_light .entry_link, .theme_light .comment_form_delete_button, .theme_light .comment_header, .theme_light .comment_form_avatar_select_container, .theme_light .trackback_entry_reference { /* サブ背景色 */ background: #e2e2e2; } /* 背景色を適用しない要素まとめ */ .theme_light #fc2relate_entry_thumbnail_area .relate_ul { background: inherit; } .theme_light, .theme_light .global_nav a, .theme_light .entry_title a, .theme_light .search_entry_title a, .theme_light .pager a, .theme_light .entry_link, .theme_light .entry_indicator_link_num, .theme_light .search_entry_indicator_link_num, .theme_light .same_category_link_info { /* 文字色 */ color: #333; } /* リンク色 */ .theme_light a { color: #023db5; } .theme_light .svg_main_color { /* 基本アイコン色には文字色を適用 */ fill: #333; } /* テーマ変更ボタンへの変更 */ .theme_light .icon_theme_light { /* theme light適用時のみ表示する */ display: inline-block; } @media screen and (min-width: 992px) { /* PC版表示ではテーマ変更ボタンの色を戻す */ .theme_light .switch_theme, .theme_light .switch_fixed_button_pos { background: inherit; } } /*------------------------------------ 4.2: dark theme ギーク感たっぷりのダークテーマ。 このテーマの適用中には、body要素のクラス名に `theme_dark`と追加されます。 「目に優しい青みがかった黒」の配色アイデアは [Arc Darkテーマ](https://github.com/horst3180/arc-theme)を激しく参考にしました。 * #262933: ベース背景色 * #373b4a: 記事背景色 * #484d61: サブ背景色 * #e9ecf2: 文字色 * #4579d1: ハイライトカラー * #6ea4ff: ハイライトカラー2 ------------------------------------*/ .theme_dark, .theme_dark .global_nav_clip_wrapper, .theme_dark .entry_body blockquote header, .theme_dark .entry_body blockquote footer, .theme_dark .same_category_link, .theme_dark .comment_container, .theme_dark .comment_form, .theme_dark .trackback_input, .theme_dark .trackback_link_container, .theme_dark .trackback_entry, .theme_dark .plugin-search input[type="text"], .theme_dark #fc2relate_entry_thumbnail_area, .theme_dark #fc2_text_ad { /* ベース背景色 */ background: #262933; } .theme_dark input[type="text"], .theme_dark input[type="url"], .theme_dark input[type="password"], .theme_dark textarea, .theme_dark .free_wrapper, .theme_dark .header, .theme_dark .global_nav_container, .theme_dark .entry, .theme_dark .same_category_nav, .theme_dark .comment_area, .theme_dark .comment_header, .theme_dark .comment_form_avatar_button, .theme_dark .comment_form_button, .theme_dark .trackback_area, .theme_dark .trackback_entry_reference, .theme_dark .pager, .theme_dark .sidebar, .theme_dark .footer, .theme_dark .scroll_to_top, .theme_dark .fixed_button, .theme_dark .category, .theme_dark .titlelist, .theme_dark .search_header, .theme_dark .search_entry, .theme_dark .search_not_found, .theme_dark #fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li { /* 記事背景色 */ background: #373b4a; } .theme_dark blockquote, .theme_dark .entry_body ul, .theme_dark .entry_body ol, .theme_dark .switch_theme, .theme_dark .switch_custom_theme, .theme_dark .switch_fixed_button_pos, .theme_dark .comment_body, .theme_dark .comment_form_avatar_select_container { /* サブ背景色 */ background: #484d61; } /* 背景色を適用しない要素まとめ */ .theme_dark #fc2relate_entry_thumbnail_area .relate_ul { background: inherit; } .theme_dark, .theme_dark a, .theme_dark .same_category_link_text { /* 文字色 */ color: #e9ecf2; } /* ダークテーマ記事本文内でのリンク色指定 */ .theme_dark .entry_script a, .theme_dark .entry_postscript a { /* ハイライトカラー2 */ color: #6ea4ff; } .theme_dark input[type="submit"], .theme_dark .entry_link, .theme_dark .comment_form_avatar_button, .theme_dark .comment_form_button { /* ハイライトカラー */ background: #4579d1; } .js-focus-visible.theme_dark a.focus-visible, .js-focus-visible.theme_dark button.focus-visible, .js-focus-visible.theme_dark input.focus-visible, .js-focus-visible.theme_dark textarea.focus-visible { /* focus時のborder色をハイライトカラーに設定 */ border-color: #4579d1; } .theme_dark .svg_main_color { /* 基本アイコン色に文字色を指定 */ fill: #e9ecf2; } /* テーマ変更ボタンへの変更 */ .theme_dark .icon_theme_dark { /* theme dark時のみ表示 */ display: inline-block; } @media screen and (min-width: 992px) { /* 2カラム状態では色を戻す */ .theme_dark .switch_theme, .theme_dark .switch_fixed_button_pos { background: inherit; } } /* ダークテーマでの:hover設定 */ @media (hover: hover) { /* リンク・ボタン要素にカーソルが当てられた際の文字色 */ .theme_dark .global_nav button:hover, /* トップエントリ続きを読むボタンは文字色変更から除外 */ .theme_dark a:not(.entry_link):hover { /* ハイライトカラー2 */ color: #6ea4ff; } /* リンク・ボタン要素にカーソルが当てられた際の内包アイコンカラー */ .theme_dark a:hover .svg_main_color, .theme_dark button:hover .svg_main_color { /* ハイライトカラー2 */ fill: #6ea4ff; } /* 色が変わってほしくない部分に上書き指定 */ .theme_dark button.global_nav_opener:hover .svg_main_color { fill: #e9ecf2; } } /*------------------------------------ 4.3: custom theme お絵描きする人は自分の絵をサイトに仕込むのが大好き! というわけでお手軽に仕込めるような機能を追加しておきました。 書き換わる場所 * スマホ版グローバルナビゲーション展開時背景 もちろんのことながら、あなたが表示させたい絵に合わせて透過色やらfilter設定を変えてくださいね。 ------------------------------------*/ /* カスタムテーマ無効状態では表示されない要素 */ .is_hidden_not_custom_theme, .is_custom_theme .icon_disabled_custom_theme { display: none; } .is_custom_theme .icon_enabled_custom_theme { display: inline-block; } /* カスタムテーマ機能有効時のグローバルナビゲーションヘッダー内アイコン */ .global_nav_custom_theme_header .icon_home { height: 26px; width: 26px; /* 他アイコンと横ベースラインを揃えるためのマイナスマージン */ margin-right: -1px; } /* スマホ版でのみ適用されるようにする */ @media screen and (max-width: 991px) { /* カスタムテーマ有効状態でのグローバルナビゲーション背景設定 filter()をかけた際に元要素まで影響を及ぼさないよう、 ::before疑似要素に背景指定をする仕組みにしています。 初期状態ではライトテーマ・ダークテーマ両方で同じ背景画像を共用していますが、 CSS記述を工夫すればテーマごとに指定する画像を分けることもできますので、 応用時に使ってみるのもいいかもしれません。 */ .is_custom_theme .global_nav_container::before { /* ::before疑似要素を成立させるのに必須な記述 */ content: ""; /* 要素幅いっぱいまで広げる */ width: 100%; height: 100%; /* 背景画像として表示する画像を指定 */ background-image: url("https://blog-imgs-107.fc2.com/d/e/t/dettalant/ksact2_kitune_transparent.png"); /* 表示画像がタイル状に繰り返し描画されないようにする設定 */ background-repeat: no-repeat; /* 表示画像が要素全体を覆うように拡大される設定 画像のぼやけが気になる場合は、表示画像の解像度を上げてください。 一部iPhoneではここの設定を`cover`にしていないと表示されないかも。 */ background-size: cover; /* 表示画像を中央揃え表示させる */ background-position: center; /* 他要素の配置に影響させないようにする */ position: absolute; /* そのままだと他要素の上に表示されるので下に潜らせる */ z-index: -1; } /* カスタムテーマ機能有効状態では グローバルナビゲーションヘッダー画像を表示しない */ .is_custom_theme .global_nav_site_banner { display: none; } /* カスタムテーマ有効時 + スマホ版表示でのみ描画される要素 */ .is_custom_theme .is_hidden_not_custom_theme { display: block; } .is_custom_theme .global_nav_custom_theme_header { border-bottom: 2px solid currentColor; } /* カスタムテーマ有効時のグローバルナビゲーションヘッダー要素 カスタムテーマ無効時の非表示設定は`.is_hidden_not_custom_theme`を使用 */ .is_custom_theme .global_nav_custom_theme_header { /* 下線をつける */ border-bottom: 2px solid currentColor; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; /* 気持ち大きめのフォントサイズ */ font-size: 1.2em; /* カスタムテーマ無効化時と下線を合わせる */ min-height: 78px; } /*------------------------------------ custom theme on light theme カスタムテーマ適用時のライトテーマ設定 ------------------------------------*/ .theme_light.is_custom_theme .global_nav { /* 文字視認性のため透過70%の白マスクをかける */ background: rgba(255, 255, 255, .3); } /* プルダウン要素の背景色 ライトテーマベース背景色部分に上書き適用 */ .theme_light.is_custom_theme .global_nav_clip_wrapper { background: rgba(238, 238, 238, .8); } /* テーマ変更ボタン等の背景色 ライトテーマサブ背景色部分に上書き適用 */ .theme_light.is_custom_theme .switch_theme, .theme_light.is_custom_theme .switch_custom_theme, .theme_light.is_custom_theme .switch_fixed_button_pos { /* css3の仕様だとHEX表記でのアルファ指定はできないので、 透過設定を用いるにはrgba()関数を使う必要がある */ background: rgba(226, 226, 226, .8); } /*------------------------------------ custom theme on dark theme カスタムテーマ適用時のダークテーマ設定 ------------------------------------*/ /* ダークテーマのカスタムテーマ背景画像 */ .theme_dark.is_custom_theme .global_nav_container::before { /* 初期状態ではグレイスケール80%のマスクをかけている */ filter: grayscale(.8); } /* ダークテーマでのグローバルナビゲーション */ .theme_dark.is_custom_theme .global_nav { /* 文字視認性のため透過50%の黒マスクをかける */ background: rgba(0, 0, 0, .5); } /* プルダウン要素の背景色 ダークテーマベース背景色部分に上書き適用 */ .theme_dark.is_custom_theme .global_nav_clip_wrapper { background: rgba(38, 41, 51, .7); } /* テーマ変更ボタン等の背景色 ダークテーマサブ背景色部分に上書き適用 */ .theme_dark.is_custom_theme .switch_theme, .theme_dark.is_custom_theme .switch_custom_theme, .theme_dark.is_custom_theme .switch_fixed_button_pos { /* css3の仕様だとHEX表記でのアルファ指定はできないので、 透過設定を用いるにはrgba()関数を使う必要がある */ background: rgba(72, 77, 97, .7); } } /*------------------------------------ 5.x: user modification area 自由記述領域 何かしらのCSS追加を行う場合は、この欄以降に記述することをオススメします。 CSSは「同じ要素への重複したスタイル定義があった場合、後のものを優先させる」仕様なので、 この部分に記述すれば既存のコードに煩わされる可能性が少し減ることでしょう。 あと、「初期状態から何を追加したのか」がわかりやすくなる効果もあると思います。 -------------------------------------*/