このページで行いたいこと
「Cocoon（コクーン）」の「grayish（グレイッシュ）」を使用していて
フロントページをもっとカッコよくしたいと思うようになりました
いろいろ試行錯誤したのですが
「grayish（グレイッシュ）」を作ってくださった方
ななふさんが
いろいろなセクションのサンプルを作ってくださり
自己責任で使ってみてくださいね
と提供してくださったのがこちらのページ
そもそも「CSS」がなんとなくくらいしか
わからない私には結構ハードで・・・。
自分の備忘録も兼ねて初心者向けに
ここに書き留めておこうと思いました
なお、ななふさんも書かれていますが
CSSなどは間違えるとデザインが崩れて
ホームページが見られないような状態に
なってしまうことも多いので
バックアップを取得してから
作業した方が良いと思います
また動作保証やサポートもないとのことですので
自己責任で行いましょう
作業内容
「CSSプラグイン」をダウンロードして、有効化する
先ほどのななふさんのページの
かなり下の方に
「CSSプラグインのご紹介」という部分があります
CSSを初心者がむやみに触ると
大変なことになるため
プラグイン化して
それをインストールすればCSSを書いたのと
同じようにしてくださったようです
上記部分にそのプラグインのダウンロード先や
有効化する手順が記載してあります
下のリンクの「grayish-cstmpat-css-main.zip」を
ダウンロードし有効化するようです
パターンデータのダウンロード
先ほどのリンクのさらに下に
「パターンデータのダウンロード」
という部分があります
リンク先の上の方に紹介されている
いろいろなパターンをフロントページで使用するには
そのパターンをダウンロードし、解凍し、
インポートして使用しなくてはならないようです
ダウンロードデータもリンク先に記載されています
自分の使用したいパターンを選択します
パターンデータのインポート
CSSプラグインは「プラグインのインストール」のように入れましたが
パターンデータは自分のPCにダウンロード後は以下の通りです
・「外観」→「パターン」を選択
・右上の「新規パターンを追加」をクリック
・「JSONからパターンをインポート」をクリック
・ポップアップからインポートしたいファイルを選択し「開く」
１ファイルごと読み込みます
・読み込むと以下のようにパターンが表示されます
参考までに
私が読み込んだのは
- grayish-cstm-kadomaru-cover.json
- grayish-cstm-pat-1-news.json
- grayish-cstm-simple-cover.json
- grayish-cstm-pat-2-newpost.json
- grayish-cstm-pat-7-pickup-lgh-col4-v104.json
- grayish-cstm-pat-3-about-basic-type.json
１つだけ「grayish-cstm-pat-6-contact.json」がエラーが出て
取り込めませんでしたので
今回は見送りました
フロントページに「ブロック」を使用する
・フロントページにしている固定ページを編集し、「ブロック挿入ツールを切り替え」ボタンをクリック
・「パターン」を選択し、「マイパターン」を押すと、インポートしたパターンがずらりと出てきます
・挿入したい部分の「+」をクリック
・挿入したいパターンをクリックすると、右側に反映されます
上記のように変更されました
以上で終了です
お疲れさまでした
「ホームページ制作初心者の私が、自分のサイトを見本にして簡単に作り方を教えるサイト」
ホームページ「おとなの愛用品・定番品」作成手順一覧はこちら↓
コメント