\少額でマンション経営!/

グリーンワークホース
\少額でマンション経営!/

グリーンワークホース
ブログ

ブロックエディターで囲み枠を初心者でも簡単に表示させる方法。リストがおかしい時の対処法も。

囲み枠ブロックアイキャッチ

ブロックエディターで囲み枠を表示させよう

ここ最近増えてきた【ブロックエディター】。

最初は戸惑いまくりでしたが、1記事書けば、もう【クラッシックエディター】には戻れなくなったので、【ブロックエディター】での囲み枠の使い方を初心者でもわかりやすく、解説したいと思います。

この記事を読んだらわかること
  • 囲み枠の作り方。【cocoon】
  • 他サイトの囲み枠をCSSをコピペして使う方法

cocoonで簡単に表示させる方法。

cocoonなら、CSSを全く触らなくても、ショートコードも使わなくても囲み枠が簡単に表示できます。
正直、一番簡単で、安全で、種類もたくさんありますね。

ブロックを追加して、ボックスを選択
画面右上歯車マーク
タブ見出しボックス

ブロック追加→タブ見出しボックス→右上の歯車のマークで、色を選ぶ

見出し

これは、見出しボックス→歯車マークで色を選ぶ

これはタブボックス→ 背景色、文字色は、右上の設定【歯車のマーク】

見出し

これはラベルボックス

色々選択して、試してみましょう。

かわいい囲み枠をマネさせてもらう

他の人のブログを見ていると皆さんとても可愛い枠や、リストを使ってますね。今回は私も是非マネさせていただきたいと思います。

参考にしたいサイト

別サイトのかわいい囲み枠
別サイトのかわいい囲み枠
【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30
HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

天才ですね。すごいです。これまでcss とか HTMLとかは、触らないようにと思っていたけど、どうしても使いたくなったのでカスタムしてみました。
(この方のリストデザインや、見出しなど、どれも素晴らしいデザインばかりです。)

作ってみましょう

POINT

このポイント枠、26番を作ってみましょう。

囲み枠を作る手順

CSSの画像
HTMLの画像
  1. リンク先のさるわかさんのサイトの26番の【+コードを表示】をタップ CSSから下の部分を全てコピーします。
  2. ワードプレスの投稿画面(記事を書いている画面の下にある【カスタムCSS】の中に1.を貼り付けます。
  3. 囲み枠を作りたい場所にブロックを追加して、カスタムHTMLを選択します。
ブロックエディター表示

4.↑この【HTMLを入力】の中にサルワカさんのサイトのHTML をコピーして貼り付けます。

5.プレビューで確認してください。

ここで編集するメリット

プレビューしたときにサイトの構成に影響が出る時があります。その時にすぐに削除出来るので、初心者はここでCSSの追加をしましょう。

管理画面からの設定をする

管理画面から使えるようにするには、以下の順番です。

  1. ワードプレス管理画面から、外観→テーマエディター→バックアップを取ること!
  2. 必ず子テーマ(cocoonなら、childとなっているか)
    style.cssになっているか確認!(下画像参照)
  3. パソコンのメモ帳にコピーをとっておくとわかりやすい。
    追加した日付を/*日付や内容をこの間に書いておく*/
  4. ファイルを更新をタップ
  5. HTMLの部分は、ブロック追加で【カスタムHTML】内に入力。
    オススメパソコンの辞書登録にわかりやすく保存しておく。(ユーザー辞書登録)
    私は【ぽいんと】とにゅうりょくすると【<div class=”box26″…これが出てくる
  6. プレビューで確認する。
cssカスタマイズ画面
cssカスタマイズ方法

出来たでしょうか?これが出来ると嬉しくなって、リストや見出しを変えるようになると思います。
面倒でも覚書はきちんと書いておきましょう。(さるわかさん、呼捨てすみません。)

次はトラブルを紹介します。

表示がおかしくなった

注意 はじめて作成する囲み枠なら大丈夫ですが、見出しなどを触ると、今までの分全ての見出しが変わるので、注意してください。
私はリストを触ったときにスマホ表示が崩れました。

リストがはみ出ている。どうなってるの?

次の画像は、iphoneのスクリーンショットです。
いろいろコピペをしまくって、気づけばスマホ表示がおかしくなっていました。

スマホ表示がおかしい

スマホ表示でリストの・の位置が、おかしくなってしまいました。
どうしたらいいか全くわからず、詳しい人に相談してみると、【paddingが0】になっているだって??

よく見るとCSSのカスタマイズのところにきちんとスマホ閲覧時の余白リセットと書いてくれているじゃないですか。
ヒントが隠れているので、わからなくてもきちんと目を通しましょう。

cssカスタマイズ

コピペを繰り返すうちに、わからなくなり、余白が0にリセット後、何もしてなくて画面ギリギリに表示されていたらしい。(制作者の方は、表示してくれているのにちっとも見ていなかった。)

最後に。

パソコンのイラスト

いかがでしたか?

コピペ専門ですが、少しカスタマイズするだけで、一段階腕が上がったような気になります。
もっと色々出来るようになりたいですね。

常にコピーを取ってスマホ表示などでも確認しましょう。

とりあえずはページ下のカスタムCSSで、変更してみましょう。崩れに気づかずに進めると、後で困ったことになります。

コメント

タイトルとURLをコピーしました