ブログテーマ関係なくタイトルボックスが自分オリジナルで作成できる「みるめもぼっくす」を使ってみたお話です。
https://milmemo.net/milmemo-box/
初心者がWordPressを始めて少しずつ使い方に慣れて自身に余裕が出てくると他人が運営しているブログのカスタマイズに興味を持るようになるのはあるあるだと思います。
タイトルボックスからデザインを変えてみませんか？
私はみるめもぼっくすをずっと使いたかったので今スーパーハッピーです♪
■こちらがみるめもぼっくすの画面です。
このWebページでタイトルボックスを自分で作ることができます。
みるめもぼっくすで作ったタイトルボックスがこちら
全部で6種類
枠・背景・タイトル文字・本文文字が自由に選べる
180個もあって ありなしが選択できる
自分好みのデサインを作って
Copy!してブログへ貼り付けるだけ
ブックマークして いつでも呼び出せる
自分好みの色にカスタマイズするとこんな感じ
1.手順はたったの2つだけ
2.しかもコピペのみ
3.設定は一度だけ
かわいい！
使い方はみるめもぼっくすを作った
みるみさんが設定方法と使い方を画像つきで丁寧にご説明しています。
はよう使いてぃ！
という方はみるみさんのブログへGO!
https://milmemo.net/milmemo-box-usageここから先はタイトル通りみるめもぼっくすを使えるようになるまでのお話です。
- 設定を間違える
- みるみさんにDMして解決
- CocoonのGutenbergエディタ（ブロックエディタ）の使い方
それではいってみよー
[temp id=3]
設定する前にバックアップする
ブログテーマのバックアップをします。
間違えてなにかを消してしまったり、いろいろいじった後に元の状態に戻そうにもその「なにか」がわからない人は必ずバックアップを取りましょう！
■cocoonのバックアップのとる方法
設定
①下記の画像の通りなんですが、Copy!してstyle.cssとeditor-style.cssnに貼り付けます。
②こちらも画像の通りにへCopy!してfunctions.phpに貼り付けます。
設定はこれだけです。
テスト
設定が完了したのでテストしてみると
ん？タイトルの前にアイコンが表示されないぞ？？
設定を見直しても自分では間違いに気づくことができませんでした。
みるみさんの説明している記事内に使い方が分からないときは連絡してくださいと書いてありましたのでみるみさんにDMをしてみました。（しかもお気軽にって書いてある）
みるみさんタイミング良かったんでしょうけど…返信が1分って…早すぎてびっくりしました笑
高速でお返事がきましたので、以下の情報を送りました。
- ブログテーマはCocoonを使っていること
- テスト記事を作ったURLを伝える
- style.css editor-style.cssn functions.phpのスクショ画面を送る
- 状況を説明
後ほど確認していただけるとのことでお願いしました。
[temp id=4]
原因が判明①貼り付ける場所間違えてる
みるみさんからの回答がきました。
style.cssの貼り付ける場所が間違えていることがわかりました。
間違い：私はstyle.cssの貼り付ける場所を一番下に貼り付けてしまったことで適応されていませんでした。
私のように人生初めてstyle.cssに貼り付ける人は次の画像のように16行目の /*必要ならばここにコードを書く*/ の下にコードを貼り付けてください。
貼り付けるとこんな感じになります。
「ファイルを更新」する。
原因が判明②プラグイン
style.cssの画面でもう一つ原因がありました。
みるみさんからの回答の通り、モリサワフォントを入れていることが原因でした。
なんと！モリサワフォントのプラグインを停止せずそのまま継続して利用できるようコードを教えてくださったんです！
優しいです！
■モリサワフォントの利用を継続したいときの追加コード
i.fa, i.far, i.fas {
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}※こちらはみるみさんの記事へ追記されておりました（2021/1/28）
style.cssは16行目の /*必要ならばここにコードを書く*/ の下にコードを貼り付けたすぐ下に貼り付けます。
貼り付けるとこんな感じになります。
「ファイルを更新」ボタンを忘れずに！
各キャッシュを削除した上で再挑戦！
アイコンも表示されて無事解決することが出来ました！
CocoonのGutenbergエディタ（ブロックエディタ）の使い方
みるみさんもおっしゃっているのがこちらです。
「Cocoon＋みるめもぼっくす」ではブロックエディタのみCocoon内蔵の「HTML挿入機能」は使えません。
【ブログ用Webアプリ】好きなデザイン/アイコン/色を選べるタイトルボックス「みるめもぼっくす」
CocoonのGutenbergエディタ（ブロックエディタ）をお使いの方は「カスタムHTML」か「コードエディター」でHTML編集をして使用してください。
【ブログ用Webアプリ】好きなデザイン/アイコン/色を選べるタイトルボックス「みるめもぼっくす」
ブロックエディタを使っている私は「カスタムHTML」を編集して使用しています。
使い方をご説明します。
①タイトルボックスを作り、Copy！します。
②WordPress記事を入力する画面から「カスタムHTML」をクリックします。
③コードを貼り付けします。貼り付けたらタイトルと本文を入力します。
赤くマルを入れたのですがちょっと見にくいですね。次の画像でより詳しくご説明します。
■タイトルを入力する場所
＆nbsp;タイトルを入力</div>
■文字を入力する場所
<p>文字を入力＜ｐ/＞
入力後、「プレビュー」を押します。
タイトルボックスが完成しました。
記事入力画面の右上にある「プレビュー」からも確認してください。
使い方は以上です。
さいごに
ずっと使ってみたかったみるめもぼっくすをついに使うことが出来ました。
最初の設定を間違えていることがきっかけでみるみさんへご連絡しましたがおかげさまで設定も出来てさらにはモリサワフォントのプラグインを継続して使用できるHTMLコードを教えてくださいました！
みるみさんありがとうございます。
HTMLコードも何度も使っていくうちに抵抗はなくなってきました。（理解は別）
かわいいタイトルボックスが使えるようになって嬉しいです！ブログを書く楽しみが増えました。
設定でわからないことがあればみるみさんへご相談ください。
最後までお読みいただきましてありがとうございます。
[temp id=5]
