WordPress+Luxeritasテンプレートを使ったブログの作成

2021年1月2日

Google Mapを表示してみよう

これはGoogle Mapのテスト投稿です。

  • Google Mapで貼り付けたい場所を検索
  • 左メニューの共有 →　地図を埋め込む
  • サイズを選んで、HTMLをコピー
  • WordPressでカスタムHTMLを利用して投稿に張り付け

投稿のテーマ名を装飾

投稿テーマのタイトルを装飾することで見やすくできる。参考にさせていただいたサイトはこちら→Ringo

style.cssに下記コードを追加。（注）Luxeritasの子テーマでないと使えない

.entry-title, #front-page-title{
border-left:12px solid #ef9c99;
padding-left:20px;
margin-bottom:0;
}

Luxeritasのショートコードを登録して吹き出しを挿入

  • ショートコードを作成し画像や背景色などを登録
  • 投稿本文にショートコードブロックを挿入
  • ショートコードブロック　→　カスタムＨＴＭＬに変更
[balloon_left img="http://makn77.kuron.jp/blog/wp-content/uploads/2020/12/makn7-60×60-1.jpg" caption="ま～くん"]ショートコードはLuxeritasの子テーマでないと利用できないよ[/balloon_left] [balloon_right img="http://makn77.kuron.jp/blog/wp-content/uploads/2020/12/IMG_8257.jpg" caption="あっちゃん"]親テーマに変更したら使えなくなったからね[/balloon_right]

グローバルメニューに画像を張り付け

グローバルナビ（グローバルメニュー）が文字だけなら味気ないので画像を張り付けてみた

  • メニューに画像を挿入できるプラグイン（Menu Image）をインストール
  • [外観]→[メニュー]にてポインタを移動させると[Menu Image]が表示
  • 文字の位置と画像の種類を選んで設定

サイトロゴのために画像の一部を透明化

サイトのロゴをリニューアルするために、バックの背景色が変更されても画像を前面に出す必要があった。そのために利用させていただいたサイトはこちら→Peko-Step　※ありがとうございます。

  • 画像をドラッグ＆ドロップでアップロード
  • 透明にしたい色を指定
  • 透明になったことが確認されたら画像を保存

ワードプレス備忘録