Magento2 独自スタイルシートの読み込み
の編集
https://yassu.jp/pukiwiki/?Magento2+%C6%C8%BC%AB%A5%B9%A5%BF%A5%A4%A5%EB%A5%B7%A1%BC%A5%C8%A4%CE%C6%C9%A4%DF%B9%FE%A4%DF
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
[[Magentoめも]] Magento2ではスタイルシートは[[LESS:http://less-ja.studiomohawk.com/]]で記述する前提のようです。 LESSが分かれば断然その記述で書くことが効率的なのはわかりますが、今のところ学習コストの方がかかりそうなので、CSSファイルを読み込むことにします。 まずは[[Magento2 themeの作成]]でテーマを作成しておきます。 *CSSファイル設定 [#x4111248] 以下のパスに default_head_blocks.xml を設置します。~ app/design/frontend/Yassujp/blank/Magento_Theme/layout/ default_head_blocks.xml <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/custom.css"/> </head> </page> *CSSの記述 [#l4432f8b] 以下のパスに custom.css を設置します。~ app/design/frontend/Yassujp/blank/web/css/ custom.css body { color: pink; } *静的ファイルのデプロイ [#zb87c5f9] 以下のコマンドで静的ファイルをデプロイします。 php bin/magento setup:static-content:deploy デプロイ先は以下になります。~ pub/static/frontend/Yassujp/blank/en_US/css/custom.css 更新されない場合は削除してしまって再度コマンドを叩きました。 # rm -fr pub/static/frontend/Yassujp/ *キャッシュファイルのクリア [#jb87b952] SYSTEM - Cache Management からキャッシュをクリアします。 これで公開画面の文字がピンク色になっていればOKです。
タイムスタンプを変更しない
[[Magentoめも]] Magento2ではスタイルシートは[[LESS:http://less-ja.studiomohawk.com/]]で記述する前提のようです。 LESSが分かれば断然その記述で書くことが効率的なのはわかりますが、今のところ学習コストの方がかかりそうなので、CSSファイルを読み込むことにします。 まずは[[Magento2 themeの作成]]でテーマを作成しておきます。 *CSSファイル設定 [#x4111248] 以下のパスに default_head_blocks.xml を設置します。~ app/design/frontend/Yassujp/blank/Magento_Theme/layout/ default_head_blocks.xml <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/custom.css"/> </head> </page> *CSSの記述 [#l4432f8b] 以下のパスに custom.css を設置します。~ app/design/frontend/Yassujp/blank/web/css/ custom.css body { color: pink; } *静的ファイルのデプロイ [#zb87c5f9] 以下のコマンドで静的ファイルをデプロイします。 php bin/magento setup:static-content:deploy デプロイ先は以下になります。~ pub/static/frontend/Yassujp/blank/en_US/css/custom.css 更新されない場合は削除してしまって再度コマンドを叩きました。 # rm -fr pub/static/frontend/Yassujp/ *キャッシュファイルのクリア [#jb87b952] SYSTEM - Cache Management からキャッシュをクリアします。 これで公開画面の文字がピンク色になっていればOKです。
テキスト整形のルールを表示する