[[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です。


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS