トーチログ

3COINSのワイヤレスイヤホンがコスパ良すぎて驚いた【低価格&高音質】

TOMO — Sun, 31 Oct 2021 23:22:13 +0000

安くて性能が良いワイヤレスイヤホンがほしい！

そんなわがままな願いを叶えてくれるワイヤレスイヤホンが3COINS（スリーコインズ）から発売されました。

なんで3COINS？って思うかもしれませんが、最新小型家電に力入れているんですよね。

お値段は税抜1,500円、ワイヤレスイヤホンとしては格安です。（さすがに300円では買えない！）

ワイヤレスの相場（大体3,000～20,000円）と比べて安かったので「この値段なら試してみるか」くらいの気持ちでしたが・・・大満足です。

想像以上に音質が良い！フィット感が良い！充電が楽！と三拍子揃った使用感。無理して高いの買わなくてもいいじゃないか！と素直に思いました。

良い点・惜しい点など実際に使ってみた感想をまとめてみたので、ご覧ください。

3COINSのワイヤレスイヤホンがすごい！ | 見た目・性能

3COINS ワイヤレスイヤホンの基本性能

商品名	True wireless Earphones
価格	1,500円（税抜）
規格	Bluetooth5.0
連続再生時間	約5時間
給電方法	USB接続（ケース自体が充電される）

カラーはブラックとホワイトから選べます。詳しくは3COINSのサイトをご覧ください。

3COINSオンラインショップ

ケース本体

イヤホンは専用の半透明ケースに収納されており、シックな見た目。

このケース自体がUSB充電できる仕組みになっているので、外出中もイヤホンをケースに収納するだけで充電できて便利。

ケースを開いた状態

開くとこんな感じでイヤホンが収納されています。
個人的に給電部がマグネット式になっていて、ピタッとはまるのが気持ちいい。

イヤホン本体

重さはチロルチョコ1個分くらいですかね。私が購入したのはカナル型ですが、インナーイヤー型（AirPodsっぽい形）もあります。

値段はどちらも1,500円なのでお好みでどうぞ。

True wireless Earphonesの良いところ

値段がとにかく安い（大事）
音質が良い
使い勝手が良い
デザインがスタイリッシュ

1,500円なので音質はあまり期待してなかったのですが、Youtubeで音楽聞いてると重低音も拾ってくれて心地よし。遅延や音割れもほとんどないので快適です。

ケース充電は最大7回までいけるので、満タンにしておけば外出中ずーっと持ちます。

ケースのランプで充電可能量がわかる

ハードケースなので、ポケットに入れておいても早々壊れません。

私はもっぱら家で使ってますが、事前にパソコンやスマホとペアリングしておけば装着時に自動的に接続されるので、有線イヤホンと使用感変わりませんね。

True wireless Earphonesの残念に感じたところ

イヤーピースが少し硬い
長時間つけてると重く感じる
フィット感良すぎて周りの音が聞こえない

イヤーピースは人によっては合わないかも？

個人的には、イヤーピースの硬さはちょっと付けてて気持ち悪かったですね。速攻で今まで使っていた有線イヤホンのイヤーピースと取り替えました。

あとカナル型タイプは耳へのフォット感は抜群なんですが、やはり重さがありますね。
最初は2時間くらい装着していると耳が疲れましたが、1週間くらい使うと慣れてきます。不思議。

少しでも軽い方が良いという人はインナーイヤー型が向いてるかもしれません。

まとめ | コスパ最強！安くて性能の良いイヤホン欲しいならおすすめ

ワイヤレスイヤホンって微妙に高くて買うの我慢してましたが、この値段と性能なら文句なし！良い買い物しました。

全国の3COINSやオンラインショップでも購入できますので、是非お試しあれ。

うっとうしいコードがないって幸せ

The post 3COINSのワイヤレスイヤホンがコスパ良すぎて驚いた【低価格&高音質】 first appeared on トーチログ.

【伸びきったポトスを救済】ポトスタワーを作ってみた

CHI — Tue, 14 Sep 2021 02:10:39 +0000

お部屋にグリーンがある暮らしって素敵ですよね。その中でもポトスは初心者にも育てやすい観葉植物ではないでしょうか。

今回はポトスの飾り方「ポトスタワー」を作ってみたのでご紹介します！

ポトスを植え替えよう！

ポトスタワーを作ろうかと思ったきっかけは、1年半くらい大事に育てていた我が家のポトス君が、ぐんぐん成長して床まで伸びてしまったからなんです・・・。

伸び放題のポトス

このままだと床をはってツタ屋敷になってしまいます！困った！！

もちろん吊り下げても可愛いのですが、何か他にいい方法はないかと検索したところ「ポトスタワー」というやり方を発見。これはいい！ということで早速つくってみました。

ポトスタワー作りに必要な材料・道具

私はホームセンターで揃えました

観葉植物用の土
深めの植木鉢と受け皿
軽石
支柱
結束バンドorワイヤー
割り箸

支柱には、ヘゴというシダの幹の部分から作られる素材を使うそうですが、今回はホームセンターで簡単に手に入る、プラスチック製のものを使用。

リサイクルプラヘゴザイ｜55X60｜マツモト｜ガーデニング用品、家庭菜園、園芸用品

つるを巻き付けて止める際に使用するワイヤーは100均で手に入ります。

https://jp.daisonet.com/products/4979909896419

植え替えの手順

まずはポトスを鉢から取り出して、小分けにしていきます。

随分と放置していたので、根っこがすごい・・・。

根っこが伸びまくったポトス

次に植木鉢に支柱を立てる。割り箸を十字に差し込んでおくと安定しますよ。

鉢底には軽石を下が見えなくなるまで敷き詰めていきます。

支柱を立てていく

支柱が埋まるように7分目くらいまで観葉植物用の土を入れたら、先ほど小分けにしたポトスをひとつずつ差し込んでいきましょう。

小分けにした苗を差し込んでいく

ツルを所々ワイヤーで固定しながら、支柱に巻き付けていきます。きつく結びすぎないように注意してくださいね。

巻き付け方はお好みでOKですが、私は偏らないように左回り・右回りと交互に巻き付けてみました。

ツルを巻き付けていく

すべての苗を巻き付け、土をかぶせます。

最後に根がなじむように、たっぷりお水を与えてあげましょう。

全て巻き付け終わりました

上から見たポトス

なんだか上のほうが空いて寂しいですが・・・成長が早いので、きっとすぐ立派なポトスタワーになってくれるでしょう！

まとめ | ポトスタワーでかわいくアレンジしよう！

今回は吊り下げてある程度伸び切っていたポトスを植え替えたので、正直巻き付けるのがとても大変でした。

苗が小さなうちに植えることをおすすめします(笑)

とはいえ、ポトスは初心者にも育てやすい観葉植物なので、気軽に始めて見てはいかがでしょうか。

The post 【伸びきったポトスを救済】ポトスタワーを作ってみた first appeared on トーチログ.

【jQuery】文字列に自動的にspanタグを設定する方法

TOMO — Fri, 23 Jul 2021 09:02:07 +0000

JavaScript（jQuery）を使ったテクニックをご紹介します。

Webサイトで以下のようなテキストを順番に浮き上がらせるようなエフェクトって見かけますよね。

上記のようなエフェクトは、文字ひとつひとつをspanタグを囲うことで簡単に実装できます。

でも、手作業で毎回設定するのって正直面倒…

というわけで、JavaScript（jQuery）を使ってまとめて設定できるようにしてみました。

文字列に自動的にspanタグを設定する方法を解説

まずはサンプルHTMLをご覧ください。




  
  // jQuery CDN読み込み
  
  文字列にspanを自動設定するサンプル


  
    
      About
      Services
      Contact Us
      日本語もいけます

サンプルHTML内の『class=”text-span”』が設定されている文字列（dtタグ）を分解してspanを設定していきます。

例えばAboutという文字列は、以下のようにしたいということですね。


  A
  b
  o
  u
  t

一文字ずつ手作業で書き換えても良いのですが、新しく要素が追加になった時や文字列の変更、別ページでも同じような記述が発生するとかなり手間に感じます。

そんな時はJavaScript（jQuery）を使って自動設定してしまいましょう！

JavaScriptのサンプルコードはこちら

$(document).ready(function () {

  // 文字列へのspan設定
  $(".text-span").each(function() {
    var content = $(this).html();
    var trimText = $.trim(content);
    var newText = "";

    trimText.split("").forEach(function(e) {
      if(e == ' '){
        // 空白対策
        newText += ' ';
      } else {
        newText += '' + e + '';
      }
    });
    $(this).html(newText);
  });

});

簡単に説明しますと【text-spanクラスが設定されている要素を一文字ずつ取り出して前後にspanタグを付ける】を繰り返す処理です。

これだけ作っておけば、ページ読み込み時に自動実行されるようになって非常に便利です。

別プロジェクトにも流用しやすい！

テキストが左から一文字ずつ浮き上がるアニメーションを付けてみる

span設定ができるとテキストに少し変わったエフェクトを付けられます。今回は冒頭で説明したテキストを順番に浮き上がらせるテキストモーションを実装してみましょう。

まずはCSSを使って、text-spanクラスの要素にshowが設定されたら、文字が浮かび上がるように設定します。

.text-span {
  color: #1565C0;
  font-size: 2.0rem;
  letter-spacing: 1.6px;
  margin-bottom: 10px;
  margin-left: 20px;
  overflow: hidden;
  opacity: 0;
}

.text-span.show {
  opacity: 1;  
}

.text-span span {
  display: inline-block;
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.text-span.show span {
  transform: translate(0, 0);
}

.text-span.show span:nth-child(2) {
  transition-delay: 0.06s;
}
.text-span.show span:nth-child(3) {
  transition-delay: 0.12s;
}
.text-span.show span:nth-child(4) {
  transition-delay: 0.18s;
}
.text-span.show span:nth-child(5) {
  transition-delay: 0.24s;
}
.text-span.show span:nth-child(6) {
  transition-delay: 0.30s;
}
.text-span.show span:nth-child(7) {
  transition-delay: 0.36s;
}
.text-span.show span:nth-child(8) {
  transition-delay: 0.42s;
}
.text-span.show span:nth-child(9) {
  transition-delay: 0.48s;
}
.text-span.show span:nth-child(10) {
  transition-delay: 0.54s;
}

「.text-span.show span:nth-child(x)」といった記述が複数ありますが、1文字ずつ0.06秒ずつ遅れて動くようにするための工夫となります。今回は10文字まで対応させていますが、使いたい文字数に合わせて調整してみてください。

最後にJavaScript側でshowクラスを設定する処理を追加して完成です！

  setInterval(() => {
    $(".text-span").addClass('show');
  }, 400);

■完成版

See the Pen code01_text-span01 by f-tomoya7 (@f-tomoya7) on CodePen.

当然ですが、同じアニメーションを別要素でも使いたい時はtext-spanクラスを設定するだけで実装可能です。

文字列spanを活用したサンプルコード集

いくつかspanタグを適用した文字列でエフェクトを作ってみました。

See the Pen code01_text-span02 by f-tomoya7 (@f-tomoya7) on CodePen.

文字に強弱を付けることで、キャッチコピーや見出しでインパクトを与えることができます。

See the Pen code01_text-span03 by f-tomoya7 (@f-tomoya7) on CodePen.

文字単位で動きを付けることができますので、流れるようなモーションを作る時に重宝します。

まとめ

文字列にエフェクトを付ける際に一文字ずつspanタグを設定するのは正直非効率ですし、手作業だとどうしてもミスが生まれたりします。

今回ご紹介したスクリプトは、様々な場面で活用できるかと思いますので、参考にしてみてください。

The post 【jQuery】文字列に自動的にspanタグを設定する方法 first appeared on トーチログ.

Photoshop2021新機能【空を置き換え】ワンクリックで曇り空を青空に！

CHI — Wed, 28 Oct 2020 03:10:34 +0000

Photoshop CC 2021がアップデートされ、様々な便利な新機能が追加されました。

その中でも私がおすすめする「空を置き換え」ツールをさっそく試してみたので、手順を解説しながらご紹介したいと思います！

【Photoshop2021】空を置き換え機能：実践

この機能を使えば、イマイチな写真もあっという間にグレードアップ出来ちゃいます！

こちらは先日奄美大島に行った際に撮った海の写真です。

青い空に青い海！という写真が撮りたかったのですが、あいにくのお天気・・・
なんだか暗くてどんよりした写真になってしまいました。

今回はこの写真を例に空の写真を変えていきたいと思います。

手順1：Photoshopで画像開き、空を置き換え

画像を開いたら、上部メニューバーの「編集」より「空を置き換え」を選択。
するとAIが自動で空を認識して、置き換えてくれます！

きれいな青空

夕焼け空も素敵です

手順2：空と合うように色味を調節する

お気に入りの空の写真をはめ込めたら、赤枠部分のスライダーを調節して全面の画像の色味を調節します。

海の色を青くしたかったので、スライダーを青寄りに調節しました。

いい感じに調節出来たら、下のOKを押して適用させます。

すると赤枠で囲ったレイヤーパネルに新しく「空を置き換えモードのグループ」という調整レイヤーが作成されました。
自動でマスクがかけられているので、この後ちょっと微調整したいなと思ったらすぐに作業が出来るので、とっても便利ですね！

手順3：違和感の無いように色味を整えて完成

手前のヤシの木と海がまだ暗かったので全体的に明るくし、色味を調節し完成です。

暗かった写真が一気に晴天のビーチに早変わりしました(笑)

左右にスライドします

これこそ求めていた写真！

まとめ

この機能を使えば、例えばクライアントから「昼間に撮影した写真なんだけど、夕方の風景に変えたい」という要望があったとします。

再撮影もコストがかかって大変ですし、地道に合成するにしてもかなりの時間がかかり手間ですよね。

そこで今回のこの新機能を使えば、多少の色補正程度で済みますし、作業効率が格段に速くなると思います。

手順もシンプルですよね。これは活用するしかない！

Photoshop2021の新機能については、Adobe公式ブログでも紹介されていますので、ぜひお試しください。

The post Photoshop2021新機能【空を置き換え】ワンクリックで曇り空を青空に！ first appeared on トーチログ.

【奄美大島】体験型施設：ケンムン村をのんびり観光【旅ログ】

TOMO — Tue, 27 Oct 2020 08:06:13 +0000

本土とは違う独自の文化が根付く奄美大島。

そんな奄美の郷土文化を体験できる施設が「ケンムン村」をご紹介します。

釜炊き製法の「塩作り体験」や黒糖を使った伝統的な「お菓子作り体験」など奄美らしい体験メニューが揃っています。

奄美空港からも車で10分ほどで着きますので、観光目的で訪れるのにぴったりですよ。

そんな体験型施設「ケンムン村」に実際行ってきました。

ケンムン村 | 奄美の郷土文化を学ぼう！

ケンムン村は、リゾート施設「ばしゃ山村」に隣接する郷土体験や歴史を学べる施設です。

ケンムン村で出来る体験メニューはこちら！

ケンムン村では、以下のような奄美の郷土体験を手軽に楽しむことができます。

釜炊きの塩作り体験
黒糖のお菓子作り体験
陶芸体験
島唄体験
島人になる体験（2つの体験がセット）

奄美の美しい海水で作る塩は、マイルドな塩気でミネラルが豊富。

思い出とお土産が同時に手に入るなんてお得ですよね。

いずれも前日までに予約が必要なので、体験メインの人は必ず済ませておきましょう。

なお、施設内を見学するだけなら予約不要です。

施設名	ケンムン村
住所	鹿児島県奄美市笠利町大字用安1246
電話番号	0997-63-1178
公式サイト	http://basyayama-mura.com/activity

そもそもケンムンって何？

ケンムンは奄美地方に伝わる精霊（妖怪）で、ガジュマルの木に住んでいると伝えられています。

わかりやすく言えば河童（かっぱ）に近い存在みたい。

ケンムン村では、奄美にゆかりのあるケンムンをマスコットキャラクターにしています。

水木しげるを感じる

この子たちは、かなり可愛くデフォルメされてます。実際のケンムンはもう少し河童に近い見た目をしていますよ。

興味がある方はWikipediaをご覧ください。

ケンムン村へのアクセス方法

旅行で訪れる方は、奄美空港からバスかタクシー、レンタカーで向かいましょう。

県道沿いにあるので、迷うことは無いと思います。

空港 ⇒ バス	ばしゃ山バス停で下車
空港 ⇒ タクシー・レンタカー	県道82号を奄美市内方面に進む

バスは30分に1本程度。
交通手段が少ないので、空港前でレンタカーを借りると楽です。

ばしゃ山のバス停で降りたら、道路を挟んで右手に「ケンムン村」と書かれた入り口が見えてきます。

ケンムン村の主な施設

体験施設がメインのケンムン村ですが、昔の建築物の展示もあるので意外と見るだけでも楽しめます。

見どころ１ | 旧安田邸

130年前に建てられた江戸時代末期の伝統的なヒキモン造りの家屋がそのまま移築されています。

平成19年度には、国の有形文化財に指定されました。

建物の中も靴を脱いであがることができます。おじゃましま～す！

祖母が奥からひょっこり顔を出しそうな、古き良き日本を感じる古民家ですね。

中に入ってひときわ目を引くのが、中央にあるモンスター級の伊勢海老の抜け殻。存在感がすごい…。

昭和レトロな家具や伝統楽器サンシン、天皇皇后陛下が宿泊したお部屋の花器などが脇に飾られています。

見どころ2 | クール岩の納屋

クール岩とは、砂を固めて作った岩壁のこと。

奄美大島では、現在ここでしか見ることが出来ない貴重な建造物なんです。

遠目に見ると、かやぶき屋根の家屋といった感じですが、

おぉ、壁が砂の塊で出来ています！なんとなーく、わかりますか？

砂なのに崩れないのが不思議ですよね。

見どころ3 | ケンムン神社

島の精霊ケンムンにお祈りが出来るケンムン神社。

願掛けをする神社と違い「人と自然・人と人を結ぶ」という思いを込めて作られたそうです。

写真を取り忘れましたが、お社の下には内側はキレイに輝く夜光貝（やこうがい）の貝殻が敷き詰められています。

食用にもなる夜光貝はコリコリした食感で美味しいんですが、光り輝く貝殻もアクセサリーに加工できるので人気があります。

ケンムン村は何分くらいあれば見れる？

施設内の家屋は3～4件程度なので、体験メニューを利用しない場合は大体30分あれば回りきれる広さです。

上り坂や階段が多いので、足腰が弱い方はしんどいかもしれません。

敷地内では、予約制のキャンプ場やカフェ（2020年10月現在はコロナで営業自粛中）も併設しているので、そちらを利用してのんびり過ごすのも良いでしょう。

まとめ | ケンムン村で奄美の郷土文化に触れてみて

伝統的な文化が残る奄美大島ですが、市街地は近代化されており都会とあまり変わりません。奄美伝統の文化に触れてみたいという人は、ケンムン村で体験や建物見学をしてみると理解が深まると思いますよ。

地元のおば（ばあちゃん）がステキな笑顔で挨拶してくれて、なんだかほっこり。

どこか田舎に帰ってきたようなノスタルジーさがあります。

さすがにケンムン村観光だけだと物足りない感じはありますが、目の前のばしゃ山村（用安海岸）でマリンスポーツを楽しんだ後やのんびり観光したい時に、訪れてみてはいかがでしょうか。

【奄美大島】気分は南国リゾート！ばしゃ山村で海を眺めてのんびり過ごす【旅ログ】

The post 【奄美大島】体験型施設：ケンムン村をのんびり観光【旅ログ】 first appeared on トーチログ.

【奄美大島】気分は南国リゾート！ばしゃ山村で海を眺めてのんびり過ごす【旅ログ】

TOMO — Sun, 25 Oct 2020 13:56:37 +0000

Gotoキャンペーンを利用して奄美大島にいってきました。

季節は10月後半というのに9月くらいの暖かさです。さすが南国！

成田空港はパーカー着て少し肌寒いくらいでしたが、ここなら半袖でいけますね。

奄美大島に来るのは二度目なんですが、今回は目の前が海岸！というリゾート感抜群の「ばしゃ山リゾートホテル」に宿泊することにしました。

高級リゾートが多い奄美大島では、リーズナブルなホテルでした。

窓から聞こえる波の音に癒やされまくり♪

ばしゃ山村リゾートホテルの雰囲気や近くにある施設をご紹介していきます。

奄美大島への旅行を計画しているあなたの参考になれば幸いです。

【奄美大島】ばしゃ山村って？

ばしゃ山村は、ホテル・レストラン・お土産店が併設したリゾート施設。場所は奄美市笠利町というところです。

奄美空港から市街地方面に車で10分ほどで着きますし、バスも空港から30分間隔で出ておりアクセスしやすいです。

名称	奄美リゾートばしゃ山村
住所	鹿児島県奄美市笠利町用安1246番地の1
アクセス	奄美空港から車かバスで10分
公式サイト	http://basyayama-mura.com/

おぉー、本当に海が目の前だ！リゾート感すごい。

ばしゃ山村にある施設

ばしゃ山村には、以下のような施設があります。

ばしゃ山村リゾートホテル
レストラン AMAネシア
ショップ島おこし市場
体験施設ケンムン村

ホテルの敷地内から出ずに食事やお土産購入できるのはいいですね。

ばしゃ山村リゾートホテル【海岸が目の前！】

ばしゃ山村リゾートホテルは、バリのホテルを思わせるような南国感あふれる外観となってます。

フロントでチェックインすると、大きなプールがある本館に着きます。

プールを囲むように建つ本館

なんだかリゾート感抜群でいいですよね～。

でもでも、10月はオフシーズンで泳ぐことができませんでした。残念。

なお、新しく出来た東館が隣ありますが、どちらに泊まれるかは部屋の空き状況次第のようです。（予約時にリクエストするのがベター）

東館の外観

部屋の様子

私が宿泊したのは、本館の「スーぺリアトリプル」という3人用の角部屋。

2人で泊まったのにベッドが3つあって戸惑いましたが、シーズンオフで空いてたおかげで広めの部屋にしてくれたみたい。

のびのび過ごせてよかったです。

なお、リゾート感を出すためか部屋の照明は少し暗い感じ。（部屋にもよるのかな？）

夜は手元が見えづらかったので、もう少し明るくても良い気がしました。

部屋のトイレ

洋式の新しめのトイレ。ウォッシュレット付きで清潔感があります。

部屋のお風呂

お風呂は、1人暮らしの賃貸マンションによくあるサイズ。

手洗いの横に歯ブラシ・ひげそりといった定番のアメニティはしっかり完備されています。

なお、ホテルには大浴場があったので、一度も利用しませんでした。

館内の施設

その他の施設として、コインランドリーや大浴場があります。

大浴場には海水を使った「海水風呂」がありました。

海水には、塩分が汗の蒸発を防いでくれる保温効果があるので風呂上がりもポカポカでした。

目の前に広がる圧倒的な青い海！

部屋の窓を開けると真横が海岸でした。

海の青さがすごい！なんでこんなにキレイなの？

見慣れた神奈川や東京の海とは別物だね。

奄美大島に来ると海の透明度に驚かされるますね！

晴れているともっとキレイなんですが、やや曇りだったのが本当に残念。

海岸には流れ着いた珊瑚がいっぱい。美しい海の象徴です。

夏のビーチは、海水浴やマリンスポーツで賑わっていますが、10月ともなると人もまばらで寂しい感じ。

とはいえ、のんびり座って水平線を眺めるには良い季節です。

ゆったりとした時間を満喫

観光客も少なめだし、がやがやしたのが苦手な私にはぴったりでした。

レストランアマネシアでお食事

ホテルに隣接するレストラン「アマネシア」で夕食をいただきます。

店名	奄美食材レストラン AMAネシア（アマネシア）
営業時間	11：00～21：00（ラストオーダー）・22：00（閉店）
定休日	無休

天井が高くて開放感のある店内は、南国を思わせる木の風合いをいかした装飾がいっぱい。

リゾート気分が高まりますね。

店内の様子

伊勢海老やお刺身、豚、郷土料理の鶏飯（けいはん）といった豊富なメニューが揃っています。

食事メニュー

一品料理もあるので、お酒と楽しむのも◎

付け合わせの、もずく酢・パパイヤ漬け・イェン味噌（魚と粒味噌を和えた郷土料理）の3種。

これだけでお酒がすすみます！

奄美の郷土料理が色々楽しめる「奄美御膳」

豚骨（骨付き豚を煮込んだ料理）やシビ（キハダマグロ）・もずくの天ぷらなど地のものがいただけます。

奄美御膳 1,800円

続いて紹介するのは「島豚スタミナ丼」。奄美産の豚肉と豚ホルモンを豪快に炒めてどんぶりにしています。食欲をそそる香りがたまりません！

島豚スタミナ丼 1,500円

ばしゃ山村に泊まる料金は？

ばしゃ山村は夏場のOnシーズンと冬場のOffシーズンで料金が結構違います。

	Onシーズン	Offシーズン
大人	10,000円～	8,000円～
子供	7,000円～	5,600円～

公式サイトより抜粋

Onシーズン: 4/25～5/5、7/1～9/10、12/25～1/5
Offシーズン: 5/6～6/30、9/11～12/24、1/6～4/24

「海で泳ぎたい」「リゾート気分を満喫したい」なら少し高くても夏来るのがいいかもしれません。

逆にゆったり観光を楽しむなら、Offシーズンも十分アリ。9月～10月はまだ暖かいので、余裕で楽しめますよ。

私はGotoトラベルが使える楽天トラベルで予約しました。

ばしゃ山村に関するあれこれ

近くにコンビニはある？

歩いて2分くらいのところに、島人mart（しまんちゅまーと）というコンビニがあります。

ご飯にランチョンミートと卵焼きをはさんだ「ランチョンおにぎり」が美味しかったです。

島人マートの営業時間は22時までなので、お酒を買い足すなら早めに向かいましょう。

奄美大島まで行く飛行機は？

奄美行くの飛行機は、JAL、PEACH（ピーチ）、スカイマークの3社です。

私は格安航空のPEACHの利用。JALと比べると機内は少し狭いですが、1万円以上チケット代が安くなるのは大きいですね。

成田空港からだと大体2時間半で奄美まで到着します。思ったより早いですよね。

JAL	言わずと知れた大手航空会社。快適な空の旅を楽しめる
PEACH（ピーチ・アビエーション）	成田空港・関西国際空港から発着する格安便（おすすめ）
スカイマーク	鹿児島発着の格安航空

格安航空はたま～に3,000円とか激安セールでチケットが買えますよ♪

ばしゃ山村は奄美観光の拠点にぴったり

ばしゃ山村ホテルの様子や雰囲気は参考になりましたか？

奄美で海沿いを観光するなら、海岸沿いでリゾート感抜群のばしゃ山村を拠点に行動すると効率よく見て回れると思います。

奄美がはじめてという人は、青い海に絶対感動しますよ！

海沿いは交通手段が少ないので、空港前でレンタカーを借りておくことをおすすめします。

晴れた日は朝日や星空がとってもキレイ。癒やされますよ。

【奄美大島】気分は南国リゾート！ばしゃ山村で海を眺めてのんびり過ごす【旅ログ】

The post 【奄美大島】気分は南国リゾート！ばしゃ山村で海を眺めてのんびり過ごす【旅ログ】 first appeared on トーチログ.

Photoshopでたった1分！「コンテンツに応じた塗りつぶし」で作業効率UP！

CHI — Mon, 12 Oct 2020 03:10:48 +0000

こんにちわ。グラフィックデザイナーのCHIです。

デザイン制作に欠かせないPhotoshop。10年以上使い続けていますが、毎年色々な便利機能が追加されて驚かされてばかり。

最近はAI機能も備わって、ますますレタッチが簡単にできるようになったものの、つい昔からあるツールが体に染みついて新機能を使いこなせていない・・・なんてことありませんか？

そこで今回お勧めしたいのがコンテンツに応じた塗りつぶし。

以前からあった機能ですが、2019年よりAI機能が進化して超グレードアップしています！

例えば…

画像の不要物の削除が1分で完了！
画像の空白部分を違和感なく塗り足せる

私もなんとなく知ってはいたのですが、つい昔からあるコピースタンプツールでちまちまと作業してしまい、あまり使いこなせていなかったんですよね。

コピースタンプツールは細かい所のレタッチにはとても良いんですが、面積が大きいと大変。

そこでコンテンツに応じた塗りつぶしを改めて試してみたら、すごく簡単にできちゃいました。

試してみてあらビックリ。なにこれ魔法？驚きの速さで作業終了してしまいました。もっと早く使えばよかった・・・

実例と手順解説付きで使い方をお伝えしていきますので、今まで敬遠していた人も初めて知った人も、ぜひ活用してみてください！

レタッチが爆速になる！コンテンツに応じた塗りつぶしの活用方法

実際のPhotoshopでの作業工程を例題を交えてご説明します。

例１：画像の足りない部分を引き伸ばしたい時

①画像を開きカンパスサイズを変更

今回はWebでよく使われるサイズ1920px×1080pxのカンバスサイズに変更します

すると左右に空白が出来るので、今回はこのサイズに画像を加工していきます。

②長方形選択ツールで空白部分を選択状態にする

まずはツールバーの長方形選択ツールを選びましょう。

続いてshiftキーを押しながら、両端の空白部分を選択します。

③コンテンツに応じた塗りつぶしを選択

上部メニューバーの【編集】より【コンテンツに応じた塗りつぶし】を選択します。

④サンプリングブラシでコピー元を選ぶ

サンプリングブラシでコピーしたい部分をブラシで塗りましょう。

今回は写真を横に引き伸ばしたいので、写真の両端をブラシで塗りつぶしましょう。

塗った所が緑色になりますので、プレビュー画面を見ながら違和感がないように調整してOKボタンで反映させます。

⑤空白部分まで写真が引き伸ばされた！

加工後

上記のように選択した空白部分まで写真が違和感なく伸びていれば成功です。

新規レイヤーに塗り足された部分が追加されていますよね。OKなら選択を解除(ctrl+V)して完了です。

例２：画像の不要物を削除したい時

画像の中にゴミや余計な小物が写り込んでしまった時にも「コンテンツに応じた塗りつぶし」が役に立ちます。

①Photoshopで画像を開き、消したい不要物を選択

まずは消したい部分を選択ツールで選びます。

今回は「投げ縄ツール」で消したい箇所を選択しました。

②コンテンツに応じた塗りつぶしを選択

上部メニューバーの「編集」より「コンテンツに応じた塗りつぶし」を選択。

③サンプリングブラシでコピー元を選ぶ

サンプリングブラシでコピーしたい部分をブラシで塗っていきます。

今回は、背景の白っぽい部分を適当に選べば大丈夫ですが、あまり複雑な背景だと塗りつぶした時に変な仕上がりになるので注意。

ブラシで塗った所が緑色になったら、プレビュー画面を見て違和感がないように調整して「OK」ボタンで反映です

④不要物が違和感なく取り除かれた！

加工前後（左右にスライドします）

素晴らしい！きれいに不要物を削除することができましたね。

OKなら選択を解除(ctrl+V)して完了です。

まとめ

いかがでしたか？

手順も思ったよりシンプルなので、実践しやすいですよね！

いままで切り貼りしたり、コピースタンプツールで地道にレタッチしていた作業がこんな早く出来るなんて・・・

いや～AIってすごい(笑)

コンテンツに応じた塗りつぶしを使えば、面倒な画像のゴミや不要物の削除もあっという間に完了です。

使い方を覚えて作業効率をUPに繋げてみてくださいね。

The post Photoshopでたった1分！「コンテンツに応じた塗りつぶし」で作業効率UP！ first appeared on トーチログ.

CSSを書く時の悩みが無くなる！？CSS設計完全ガイド：レビュー

TOMO — Thu, 25 Jun 2020 01:54:24 +0000

CSSの書き方で悩んでしまうことが多い
思い通りのデザインができず困っている
CSSの書き方をキチンと学びたい

という方に最適な書籍「CSS設計完全ガイド」をご紹介します。

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

created by Rinker

以前にコリスの記事で見かけて気になっていた本。やっと読むことができたのですが、思った以上に良書でした。

読んだらCSSを書く時の迷いが格段に減ります！

CSSってクラスやIDをうまく使って書いているつもりでも、コードが1,000行越えたりしてくると「あれ？このクラスって何に使うんだっけ？」ってなったり、デザイン修正した時に予期せぬ部分に影響が出たりしますよね。

そんな問題を改善したいって人にはおすすめです。

当記事では、CSS設計完全ガイドで学べることやよかった点を自分なりの意見で書いていきます。この本に興味がある方の参考になれば幸いです。

CSS設計完全ガイドとは？

CSSを「使いやすく・保守しやすく」するには、どうしたらよいか？を設計手法からまとめている本です。

著者の「半田惇志さん」はPRECSS（プレックス）というCSS設計手法を考案したすごい人。いくつかCSS設計手法を紹介してくれていますが、特に開発現場で利用頻度の高いBEM（ベム）とPRECSSに関する解説がメインです。

重厚感のあるB5変形判となっており、ページ数は驚異の511ページ！
読むの大変そうですが、半分はCSSの実例サンプル。アクティブラーニングするといい感じに読み終わりますよ。（ただ読むだけだと頭に入りません）

なお、CSSの基礎的な説明はほぼ皆無なので、初心者にはおすすめしません。中～上級者向けの本です。

GOOD POINT（よかった点）

戦略的なCSSを書くための手法を身につけることができます。

戦略的ってどういうこと？

噛みくだいていうと「部品化」を意識して関係のない要素に影響を出さないようにするってことです。

1.CSS設計手法を学べる！

設計手法とは、あるルールに沿ってCSSを書きましょうというガイドみたいなもの。

CSS設計完全ガイドで大きく取り上げるのは、利用頻度の高いBEM（ベム）とPRECSS（プレックス）のふたつ。ここを基礎からしっかり学ぶことができました。

なお、BEMとPRECSSの使い方だけ知りたい人は、以下の記事が参考になります。

一番詳しいCSS設計規則BEMのマニュアル（Qiita）
PRECSS（公式サイト）

上記の記事を読むだけでも設計手法を学ぶことはできますが、実例とセットで学ぶことができる本書の方が理解しやすいです。

2.解説がていねい親切

「なぜ、この書き方なんだろう？」という疑問に対して的確な回答をしてくれます。

例えば、font-sizeやpaddingのサイズ指定に「px」「em」「rem」を使うかと思いますが、皆さん意図して使い分けていますでしょうか。

例えば、見出しのfont-sizeに「px」を指定した場合、ブラウザの設定で文字サイズを大きくされてしまうと、はみ出ることがあります。そういった問題を避けるために本書では「rem」を使うことを推奨しています。

上記のようにCSSの使い分けを配慮して「意味のあるCSS設計」をされているのが魅力ですね。

初心者向けの本だと、わかりやすさを重視しているので、こういったロジカルな部分は学ぶことができません。とても勉強になりました。

3.デザインサンプルが豊富！すぐに使いたくなる

CSS設計完全ガイドの後半は、Webサイトでよく利用されるモジュール（部品）に対してBEMとPRECSSで実例を載せてくれています。

モジュール部分はサンプルコードがしっかりと掲載されていますので、実際にパソコンで書きながら読み進めることをおすすめします。

理由は２つあって、実際に書いてみると理解が深まるのと、書き終わったモジュールがちょっと直せば仕事で使える「モジュールライブラリ」になるからですね。

CSSって毎回最初から書くの面倒だったりしますよね。
本書で扱う部品はそのままコピーしてもデザインが崩れない考慮がされているものが多く、覚えておけばサッと取り出せるので大助かりです。

なお、一部のコードに誤植があったりしますが、自分で見つけて直すのもスキルアップに繋がるので良いです（笑）

読み終えての感想

非常に分厚い本だったので読み切れるか心配だったのですが、モジュールを書きながら読んでいたおかげで案外さらっと読み終えることができました。（それでも３日かかりました）

CSSって案件ごとに微妙に内容が変わってくるので、共通化するのは難しいなと日々もんもんとしていましたが、本書の設計思想を取り入れることで、ルールを統一して書けそうな気がしています。

私のようにCSSを書く時につい悩んでしまう人、コードが煩雑になりがちな人、保守性の高いCSSを書きたいという人には最適な一冊だと思います。

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

created by Rinker

The post CSSを書く時の悩みが無くなる！？CSS設計完全ガイド：レビュー first appeared on トーチログ.

【Font Awesome 5】アイコンのサイズや色を変更するカスタマイズ方法

TOMO — Wed, 03 Jun 2020 05:43:19 +0000

ブログやサイトに手軽に導入できるWEBアイコンの代表格といえばFont Awesome 5です。

Font Awesome 5

Font Awesomeは、表示させるタグIDを指定するだけで簡単にアイコンを設定が可能なサービス。

わざわざ自分でアイコンファイルを用意する必要がなくて非常に便利ですが、デフォルトだとアイコンサイズがすこし小さくて微妙なんですよね。

なんだか文字とサイズ感が合わないし、色が黒くて見づらい！

だよね。
そういう時はCSSを変えて色とサイズを変更してみよう。

当記事では、Font Awesome5で設定したアイコンの大きさや色を変えたり、動きをつける方法をいくつかご紹介します。

Font Awesome 5：カスタマイズ

解説はFontAwesome5が使える状態になっている前提で勧めます。基本がまだお済みでない方は、以下の記事を参考に設定してみてくださいね。

【WordPress入門】GutenbergでWebアイコンを使う【導入から解説】

アイコンの色を変えたい

以下の要領でHTML上で色を指定すれば反映されます。

アイコンのサイズを変えたい

Font Awesome5には、サイズ変更用のクラスが用意されています。

クラス名	大きさ	表示結果
fa-xs	.75em
fa-sm	.875
fa-lg	fa-2x
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

アイコンを回転させたい

クラス名	傾き	表示結果
fa-rotate-90	アイコンを90°回転
fa-rotate-180	アイコンを180°回転
fa-rotate-270	アイコンを270°回転
fa-flip-horizontal	水平方向に回転
fa-flip-vertical	垂直方向に回転
fa-flip-both	水平および垂直方向に反転

fa-flip-bothはVer5.7以上でないと使えないので注意

アイコンの横幅を整えたい

Font Awesome5のWEBアイコンはアイコンのデザイン毎に微妙に幅が違います。なので、並べて使うと微妙に揃わなかったりするんですよね。

Skating

Skiing

Nordic Skiing

Snowboarding

Snowplow

そんな時は【fa-fw】クラスを追加することで解消されます。

Skating

Skiing

Nordic Skiing

Snowboarding

Snowplow

横幅が揃いましたね。
paddingで調整することも可能ですが、この方がよっぽど楽です。

アイコンに動きをつけたい

標準で使えるのは「fa-spin」「fa-pulse」のふたつ。

いずれもアイコンを回転させるアクションなので、「fa-spinner」アイコンと組み合わせてローディング用として使うと良いでしょう。

アイコンを回転（fa-spin）

アイコンを8ステップ回転（fa-pulse）

アイコンを重ねて使いたい

2つのアイコンを重ねて使うことも可能。
まず、重ねたい要素を囲む親要素（divやspan）を用意しておき、その中にアイコンのタグコードを記載します。

その後、親要素には【fa-stack】クラス、アイコンには【fa-stack-2x】【fa-stack-1x】を追加します。

インラインで折り返す

文章に装飾として折返し表示させたい場合は【fa-pull-left】【fa-pull-right】を使います。


Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

アイコンのボーダーをつける

アイコンの回りを囲うようにボーダー（罫線）をつけることもできます。
ボタンっぽいデザインにしたい時に便利。

まとめ

Font Awesome 5は導入も簡単ですし、HTMLにclassを追加するだけで簡単にカスタマイズできて便利です。

うまく使いこなしてブログやサイトデザインに取り入れてみましょう。

The post 【Font Awesome 5】アイコンのサイズや色を変更するカスタマイズ方法 first appeared on トーチログ.

【WordPress入門】GutenbergでWebアイコンを使う【導入から解説】

TOMO — Wed, 27 May 2020 06:28:15 +0000

WordPressで記事を書いていると、文字横にアイコンや装飾をつけたい時ありますよね。
そんな時に便利なのが無料で使える「WEBアイコン」です。

アイコンの一例

メモ

Twitterアイコン

注意

アイコンがあるだけで文章が強調されて良い感じですよね。

WordPress上でWEBアイコンを使うには、HTMLやCSSといったプログラミング知識が求められるわけですが、今回はプログラミングができない人でも導入できる手順を解説します。

今回はGutenberg（ブロックエディター）で表示させるまでの手順を解説するよ！
コピペで使えるから試してみてね。

そうなんだ？簡単そうね！

プログラム知識不要！WordPressでWEBアイコンを使う方法

WEBアイコンとは、WEBサイト上に表示されるアイコンです。正式には「WEBアイコンフォント」といい、文字と同じように扱われます。

WEBアイコンを自分のサイト上で表示する方法は色々ありますが、今回はプログラミングをなしで、設定とコピペ（コピー＆ペースト）だけで、WordPressに実装する手順を解説します。

流れは以下の通り。

Font Awesomeプラグインを導入
使いたいWEBアイコンの選ぶ
記事ページ内に選んだWEBアイコンを表示させる

今回はWEBアイコンフォントは、導入が手軽なFont Awesome(フォントアーサム)を使います。Font Awesomeは、WEB上でアイコンフォントを提供しているサービスですね。

Font Awesome

有料版だと使えるアイコンが増えますが、無料版でも1,500種類も使えるので十分です。

Font Awesomeプラグインを導入

まずはFont Awesomeを使う準備をしましょう。といっても、専用のプラグインをインストールするだけです。

WordPress管理画面より「プラグイン」>「新規追加」を選んでください。

①検索欄に「Font Awesome」と入力
②Font Awesomeプラグインが表示されたら「今すぐインストール」をクリック

インストールが完了したら、プラグインを「有効化」しましょう。

Font Awesome設定画面

有効化すると管理画面の左側サイドバーに「Font Awesome」が表示されます。ここから設定画面を開くことができます。

以下が設定画面ですが、普通に使う分には特に項目をイジる必要はありません。

なお、設定項目は以下のようになっています。

Icons：Free（無料版）かPro（有料版）を使うか選択
Technology：表示形式（SVG、Web Font）を選択
Version：Font Awesomeの使用バージョン
Version 4 Compatibility：旧バージョン（V4）フォント有効可否

使いたいWEBアイコンを選ぶ

アイコンはFont Awesomeの公式ページから選ぶことができます。

ページを開いたら、画面いっぱいにアイコンが表示されるかと思います。

Font AwesomeのWEBアイコン一覧

ここから使いたいアイコンを探す必要がありますが、なんせ数が多い・・・。

なので、検索バーを使ってアイコンを絞り込むようにしましょう。（検索ワードは英語のみ対応）

今回は参考例として【チェックマーク】を記事内に表示してみます。

←これです！

まずは検索バーに「check」と入力して、WEBアイコンを絞り込みます。

いくつかチェックマークっぽいアイコンが出てきましたね。

ちなみに無料版では色が濃く表示されているアイコンしか使用できません。すべて使いたい場合は有料版にする必要があります。

今回は無料で使えるアイコンの中から「check-circle」を選ぶことにします。

クリックすると詳細画面が表示されます。

英語なのでよくわからないかもですが、手順の通り進めてみて下さい。

WEBアイコンを使用するために、アイコンのコードを取得しましょう。
画面左側の大きなアイコンの上にという文字列が表示されます。
これをクリックするとコードをコピーできます。

Gutenberg（ブロックエディター）にWEBアイコンを表示させる

コピーできたら、WordPressの管理画面に戻って投稿ページを開きます。

ブロックを追加から「段落」を選び、項目内に「チェックリスト」と入力します。

この文字列の先頭にアイコンを表示させたいのですが、このままだとペーストできないんです。

段落は文章を入力するためのエリア。
誤ってコードが貼れないようにされてるよ。

じゃあ、どうすればいいの？

WEBアイコンのコードを貼り付けるためには、「HTML編集モード」に切り替える必要があります。

手順は簡単。まずは文字列を入力したブロックの上にメニューバーのあるので、右端の【︙】を押して詳細メニューを開き、次に「HTMLとして編集」をクリックします。

すると以下のような画面に切り替わるかと思います。

これでWEBアイコンのコードが貼り付けられるようになりました。
文字列の「

の右横」を選択して、コードをペーストしてみます。

今度は貼り付けることができるはずです。実際に表示されるかプレビューしてみましょう。（右上のプレビューボタンを押す）

期待通りWEBアイコンが「チェックリスト」の左横に出ました！

以上がGutenberg（ブロックエディター）でWEBアイコンを使う手順となります。

なお、HTML編集モードだと、ちょっと不安という人は詳細メニューから「ビジュアル編集」を選ぶことで元の見た目に戻せます。

もちろん、アイコンも残ったままです。
続けて文字を入力するなら、この画面の方が都合が良いですね。

まとめ

今回はブロックエディターで手軽にWEBアイコンを表示させる手順をご紹介しました。

文字を並べただけの文章だと少し読みづらかったりします。見出しやリストの先頭にアイコンを付けてみるだけでも、ぐっと見やすい文章になりますので、是非お試しください。

アイコンが使えるってイイね！
手順も簡単だったわ。

便利でしょ？
少しコードを直せば色やサイズを変更したり、動きを付けることもできるんだよ。

色やサイズ変更には簡単なHTML/CSSの知識が必要となりますので、今回は詳しく解説しません。（別記事で紹介したいと思います）

The post 【WordPress入門】GutenbergでWebアイコンを使う【導入から解説】 first appeared on トーチログ.

トーチログ

3COINSのワイヤレスイヤホンがコスパ良すぎて驚いた【低価格&高音質】

3COINSのワイヤレスイヤホンがすごい！ | 見た目・性能

True wireless Earphonesの良いところ

True wireless Earphonesの残念に感じたところ

まとめ | コスパ最強！安くて性能の良いイヤホン欲しいならおすすめ

【伸びきったポトスを救済】ポトスタワーを作ってみた

ポトスを植え替えよう！

ポトスタワー作りに必要な材料・道具

植え替えの手順

まとめ | ポトスタワーでかわいくアレンジしよう！

【jQuery】文字列に自動的にspanタグを設定する方法

文字列に自動的にspanタグを設定する方法を解説

テキストが左から一文字ずつ浮き上がるアニメーションを付けてみる

文字列spanを活用したサンプルコード集

まとめ

Photoshop2021新機能【空を置き換え】ワンクリックで曇り空を青空に！

【Photoshop2021】空を置き換え機能：実践

手順1：Photoshopで画像開き、空を置き換え

手順2：空と合うように色味を調節する

手順3：違和感の無いように色味を整えて完成

まとめ

【奄美大島】体験型施設：ケンムン村をのんびり観光【旅ログ】

ケンムン村 | 奄美の郷土文化を学ぼう！

ケンムン村で出来る体験メニューはこちら！

ケンムン村へのアクセス方法

ケンムン村の主な施設

見どころ１ | 旧安田邸

見どころ2 | クール岩の納屋

見どころ3 | ケンムン神社

ケンムン村は何分くらいあれば見れる？

まとめ | ケンムン村で奄美の郷土文化に触れてみて

【奄美大島】気分は南国リゾート！ばしゃ山村で海を眺めてのんびり過ごす【旅ログ】

【奄美大島】ばしゃ山村って？

ばしゃ山村にある施設

ばしゃ山村 リゾートホテル【海岸が目の前！】

部屋の様子

部屋のトイレ

部屋のお風呂

館内の施設

目の前に広がる圧倒的な青い海！

レストラン アマネシアでお食事

ばしゃ山村に泊まる料金は？

ばしゃ山村に関するあれこれ

近くにコンビニはある？

奄美大島まで行く飛行機は？

ばしゃ山村は奄美観光の拠点にぴったり

Photoshopでたった1分！「コンテンツに応じた塗りつぶし」で作業効率UP！

レタッチが爆速になる！コンテンツに応じた塗りつぶしの活用方法

例１：画像の足りない部分を引き伸ばしたい時

例２：画像の不要物を削除したい時

まとめ

CSSを書く時の悩みが無くなる！？CSS設計完全ガイド：レビュー

CSS設計完全ガイドとは？

GOOD POINT（よかった点）

1.CSS設計手法を学べる！

2.解説がていねい親切

3.デザインサンプルが豊富！すぐに使いたくなる

おすすめ読者層

読み終えての感想

【Font Awesome 5】アイコンのサイズや色を変更するカスタマイズ方法

Font Awesome 5：カスタマイズ

アイコンの色を変えたい

アイコンのサイズを変えたい

アイコンを回転させたい

アイコンの横幅を整えたい

アイコンに動きをつけたい

アイコンを重ねて使いたい

インラインで折り返す

アイコンのボーダーをつける

まとめ

【WordPress入門】GutenbergでWebアイコンを使う【導入から解説】

プログラム知識不要！WordPressでWEBアイコンを使う方法

Font Awesomeプラグインを導入

使いたいWEBアイコンを選ぶ

Gutenberg（ブロックエディター）にWEBアイコンを表示させる

まとめ

ばしゃ山村リゾートホテル【海岸が目の前！】

レストランアマネシアでお食事