業務目標 会社として立ち上げるオウンドメディアの準備もいよいよ佳境に入った。環境としては、WordPress4.7.13 + Sango 1.8.2テーマが採用されたが、 index.php <body class="home blog"> <div id="container"> <header id="header">"メニューバーを含むヘッダー"</div> <div id="header-image">"カバー写真"</div> <div id="content">"記事一覧"</div> </div> </body> となっているのを、どうしても、 index.php <body class="home blog"> <div id="container"> <div id="header-image">"カバー写真"</div> <header id="header">"メニューバーを含むヘッダー"</div> <div id="content">"記事一覧"</div> </div> </body> に入れ替えたい。 つまり、カバーを上のほうに持ってきてインパクトを狙いたいのだ。 課題 なんだ、単にテーマファイルをいじればいいじゃないか？ そう思うだろうか。しかし社会は甘くないのである。 テーマ改修リバート問題 どんなテーマにもいえることだが、子テーマの改変でカバーできるCSSとは異なり、ＨＴＭＬ構文本体の改修はテーマのアップデートによってリバートされてしまう。 子テーマにindex.phpを入れて親テーマをバイパスすればリバート問題こそ解決するが、親テーマのアップデートにおけるindex.phpへの変更が反映されず、他のファイルのみがアップデートされる事態となり、遅かれ早かれ矛盾して500 internal errorと相成りそうである。 そのため、子テーマCSSの改修のみで、目標を達成する必要がある。 試行 @saksak氏 【レスポンシブ】PCとスマホでdivの順番を入れ替える こんなのを発見したので、とりあえずトライ。 特長 レスポンシブ対応である。 つづく
会社として立ち上げるオウンドメディアの準備もいよいよ佳境に入った。環境としては、WordPress4.7.13 + Sango 1.8.2テーマが採用されたが、
<body class="home blog"> <div id="container"> <header id="header">"メニューバーを含むヘッダー"</div> <div id="header-image">"カバー写真"</div> <div id="content">"記事一覧"</div> </div> </body>
となっているのを、どうしても、
<body class="home blog"> <div id="container"> <div id="header-image">"カバー写真"</div> <header id="header">"メニューバーを含むヘッダー"</div> <div id="content">"記事一覧"</div> </div> </body>
に入れ替えたい。 つまり、カバーを上のほうに持ってきてインパクトを狙いたいのだ。
なんだ、単にテーマファイルをいじればいいじゃないか？ そう思うだろうか。しかし社会は甘くないのである。
どんなテーマにもいえることだが、子テーマの改変でカバーできるCSSとは異なり、ＨＴＭＬ構文本体の改修はテーマのアップデートによってリバートされてしまう。 子テーマにindex.phpを入れて親テーマをバイパスすればリバート問題こそ解決するが、親テーマのアップデートにおけるindex.phpへの変更が反映されず、他のファイルのみがアップデートされる事態となり、遅かれ早かれ矛盾して500 internal errorと相成りそうである。 そのため、子テーマCSSの改修のみで、目標を達成する必要がある。
こんなのを発見したので、とりあえずトライ。
業務目標 会社として立ち上げるオウンドメディアの準備もいよいよ佳境に入った。環境としては、WordPress4.7.13 + Sango 1.8.2テーマが採用されたが、 index.php <body class="home blog"> <div id="container"> <header id="header">"メニューバーを含むヘッダー"</div> <div id="header-image">"カバー写真"</div> <div id="content">"記事一覧"</div> </div> </body> となっているのを、どうしても、 index.php <body class="home blog"> <div id="container"> <div id="header-image">"カバー写真"</div> <header id="header">"メニューバーを含むヘッダー"</div> <div id="content">"記事一覧"</div> </div> </body> に入れ替えたい。 つまり、カバーを上のほうに持ってきてインパクトを狙いたいのだ。 課題 なんだ、単にテーマファイルをいじればいいじゃないか？ そう思うだろうか。しかし社会は甘くないのである。 テーマ改修リバート問題 どんなテーマにもいえることだが、子テーマの改変でカバーできるCSSとは異なり、HTML/PHP構文本体の改修は、テーマのアップデートによってリバートされてしまう。 子テーマにindex.phpを入れて親テーマをバイパスすればリバート問題こそ解決するが、親テーマのアップデートにおけるindex.phpへの変更が反映されず、他のファイルのみがアップデートされる事態となり、遅かれ早かれ矛盾して500 internal errorと相成りそうである。 そのため、子テーマCSSの改修のみで、目標を達成する必要があるのだ。 試行 (CSS改修だけで実現できることは前提） @saksak氏 【レスポンシブ】PCとスマホでdivの順番を入れ替える こんなのを発見したので、とりあえずトライ。CSS flexboxという最新仕様を使うそうな。 特長 レスポンシブ対応である。 flexboxの対象にするためには、CSS上でセレクタを指定して、「display:flex」を付与するだけでよいそうな。いけそうじゃん！ (display:flexは)親要素に加える必要がある唯一のプロパティです。その子要素は自動的にflexアイテムになります。 通常の上⇒下の表示は .flex-container { flex-direction: column; } になるそう。 これを今回のケースにあてはめると、div id="container"にdisplay:flexとflex-direction: columnを設定すれば、子要素のdivはみなflexになるはずだ。 （ただし、引用したQiitaでは、「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。を利用してるので若干定義のしかたが違う。 Orderを定義 さて、いよいよ、子要素のdivにorderを設定。 「order」のデフォルト値: 0なので、 style.css #container{ display: flex; flex-direction: column; } #header-image{ order: -1; } できたっ！！ 試行1回目でうまくいくって普通ないことです。記念にヘンリー・フォードの名言を。 There is no man living who isn’t capable of doing more than he thinks he can do. どんな人間も、自分が思っている以上のことができる。
どんなテーマにもいえることだが、子テーマの改変でカバーできるCSSとは異なり、HTML/PHP構文本体の改修は、テーマのアップデートによってリバートされてしまう。 子テーマにindex.phpを入れて親テーマをバイパスすればリバート問題こそ解決するが、親テーマのアップデートにおけるindex.phpへの変更が反映されず、他のファイルのみがアップデートされる事態となり、遅かれ早かれ矛盾して500 internal errorと相成りそうである。
そのため、子テーマCSSの改修のみで、目標を達成する必要があるのだ。
(CSS改修だけで実現できることは前提）
こんなのを発見したので、とりあえずトライ。CSS flexboxという最新仕様を使うそうな。
flexboxの対象にするためには、CSS上でセレクタを指定して、「display:flex」を付与するだけでよいそうな。いけそうじゃん！ (display:flexは)親要素に加える必要がある唯一のプロパティです。その子要素は自動的にflexアイテムになります。
(display:flexは)親要素に加える必要がある唯一のプロパティです。その子要素は自動的にflexアイテムになります。
通常の上⇒下の表示は
.flex-container { flex-direction: column; }
になるそう。 これを今回のケースにあてはめると、div id="container"にdisplay:flexとflex-direction: columnを設定すれば、子要素のdivはみなflexになるはずだ。 （ただし、引用したQiitaでは、「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。を利用してるので若干定義のしかたが違う。
div id="container"
display:flex
flex-direction: column
「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。
さて、いよいよ、子要素のdivにorderを設定。 「order」のデフォルト値: 0なので、
「order」のデフォルト値: 0
#container{ display: flex; flex-direction: column; } #header-image{ order: -1; }
試行1回目でうまくいくって普通ないことです。記念にヘンリー・フォードの名言を。
There is no man living who isn’t capable of doing more than he thinks he can do. どんな人間も、自分が思っている以上のことができる。
はじめまして！ 初投稿のwelfare_seと申します！ 皆さまフォローよろしくお願いいたします！ 今回はfirebaseを使ったホームページの公開･更新方法をお伝えいたします。 こちらのやり方では静的コンテンツしか公開できませんが、超簡単にホームページを公開できるので備忘録として公開します。 1．firebaseの設定 ・firebaseへログイン ・Firebase のコンソールに移動 公開するサイトを管理するためのプロジェクトを作成 プロジェクトは公開するサイト1つにつき、1つ必要 国は「日本」を選ぶ ロケーションは「asia-northeast1」 2．PC内の設定 ・プロジェクト用フォルダを作る ・公開したいサイトのフォルダを移動 移動したフォルダ名は必ず「public」とする！ 3.Node.jsをインストールしていなかったらインストール https://nodejs.org/ja/ ・推奨版をインストール ・コマンドで「node -v」と打ち、インストールされているか確認 コマンドで「npm -v」と打ち、npmがインストールされているか確認 Windows PowerShellなら「clear」で画面をクリアにできる 4.Firebaseのコマンドラインツールの導入 ・macOSの場合 「sudo npm install -g firebase-tools」 ・Windowsの場合 「npm install -g firebase-tools」と打つ ・PCで設定したfirebaseログイン用のパスワードを入力 ・「firebase -V」でバージョンを確認 ・必要に応じて「npm i -g firebase-tools」でアップデート 5.firebaseへログイン ・firebase login 6.プロジェクト用のフォルダをfirebase用に初期化 ・フォルダのあるディレクトリまでコマンドで移動 ・「firebase list」と打つ ・Project ID を選択してコピーして必ずメモしておく ・「firebase init --project= プロジェクトID」と打つ ・矢印キーとスペースキーを使ってhostingを色丸にする ・Enterを押す ・公開用のフォルダをどれにするか質問される(publicならそのままEnter) ・あとの設定はデフォルトで 7.サイトの公開 ・プロジェクトフォルダに移動する ・コマンドで「firabase deploy」と打つ ・Hosting URLを必ずコピペしてメモする ・URLをchromeのはりつけてページがアップされていれば公開されている 8.サイトの更新 ・更新したいファイルを編集 ・ターミナル/WindowsPowerShellを起動 ・プロジェクトフォルダまでコマンドで移動 ・コマンドで「firebase deploy」を打つ ・デプロイの履歴からならロールバックもできる
はじめまして！ 初投稿のwelfare_seと申します！ 皆さまフォローよろしくお願いいたします！
今回はfirebaseを使ったホームページの公開･更新方法をお伝えいたします。
こちらのやり方では静的コンテンツしか公開できませんが、超簡単にホームページを公開できるので備忘録として公開します。
1．firebaseの設定 ・firebaseへログイン ・Firebase のコンソールに移動 公開するサイトを管理するためのプロジェクトを作成 プロジェクトは公開するサイト1つにつき、1つ必要 国は「日本」を選ぶ ロケーションは「asia-northeast1」
2．PC内の設定 ・プロジェクト用フォルダを作る ・公開したいサイトのフォルダを移動 移動したフォルダ名は必ず「public」とする！
3.Node.jsをインストールしていなかったらインストール https://nodejs.org/ja/ ・推奨版をインストール ・コマンドで「node -v」と打ち、インストールされているか確認 コマンドで「npm -v」と打ち、npmがインストールされているか確認 Windows PowerShellなら「clear」で画面をクリアにできる
4.Firebaseのコマンドラインツールの導入 ・macOSの場合 「sudo npm install -g firebase-tools」 ・Windowsの場合 「npm install -g firebase-tools」と打つ ・PCで設定したfirebaseログイン用のパスワードを入力 ・「firebase -V」でバージョンを確認 ・必要に応じて「npm i -g firebase-tools」でアップデート
5.firebaseへログイン ・firebase login
6.プロジェクト用のフォルダをfirebase用に初期化 ・フォルダのあるディレクトリまでコマンドで移動 ・「firebase list」と打つ ・Project ID を選択してコピーして必ずメモしておく ・「firebase init --project= プロジェクトID」と打つ ・矢印キーとスペースキーを使ってhostingを色丸にする ・Enterを押す ・公開用のフォルダをどれにするか質問される(publicならそのままEnter) ・あとの設定はデフォルトで
7.サイトの公開 ・プロジェクトフォルダに移動する ・コマンドで「firabase deploy」と打つ ・Hosting URLを必ずコピペしてメモする ・URLをchromeのはりつけてページがアップされていれば公開されている
8.サイトの更新 ・更新したいファイルを編集 ・ターミナル/WindowsPowerShellを起動 ・プロジェクトフォルダまでコマンドで移動 ・コマンドで「firebase deploy」を打つ ・デプロイの履歴からならロールバックもできる
http://kachibito.net/css/hr-css-styling-collection より See the Pen bPLrqX by kachibito (@kachibito) on CodePen. CSSの記述を思い出すのと画像で作るのとどっちが早いか悩ましい。
http://kachibito.net/css/hr-css-styling-collection より
See the Pen bPLrqX by kachibito (@kachibito) on CodePen.
CSSの記述を思い出すのと画像で作るのとどっちが早いか悩ましい。
