javascriptで要素を追加する方法をご紹介していきます。
insertAdjacentHTMLを使用する方法と使用しない方法の2種類を記載していきます。
insertAdjacentHTMLは、だいたいのブラウザで対応済みですが、念のためそれ以外の方法も記載している感じになります。
insertAdjacentHTMLの対応ブラウザ
https://caniuse.com/#feat=insertadjacenthtml
併せてjQueryでの書き方も記載しておきます。
ご紹介する要素の追加位置はこちら。
// ここに要素を追加する方法 <div id="sample"> // ここに要素を追加する方法 test // ここに要素を追加する方法 </div> ここに要素を追加する方法//
追加位置の上から順に記載していきます。
Microsoftの新しいEdgeブラウザが配信開始されました。
Web関連の開発やサイトを持っている方は、今後ブラウザチェックに新Edgeを入れる必要が出てきそうです。
公式サイト：https://www.microsoft.com/en-us/edge
新しいChromiumベースのEdgeと旧Edgeでレンダリングエンジンが違います。
| 新Edge | Blinkレンダリングエンジン |
|---|---|
| 旧Edge | EdgeHTMLレンダリングエンジン |
Blinkレンダリングエンジンは、Google Chrome 28以降、Opera 15以降、Android 4.4 の標準ブラウザなどで採用されています。
新しいEdgeもこれらのブラウザとと同じ種類のレンダリングエンジンを使っているので、cssなどの表示が似てくると思います。
開発者を困らせていたIE対応、Edge対応が減るといいのですが。
WordPressは何かとセキュリティの問題がつきまといます。
乗っ取られたり、改ざんされたりしたら自分も困りますが、利用者の方にも迷惑をかけてしまいます。
Webサイトでは「速度」「セキュリティ」「デザイン」が大事だと思います。
その中でもセキュリティは後回しにしがちですし、対応が不十分だったりします。
そこでカゴヤ・ジャパン株式会社が提供している「WordPress脆弱性診断」サービスをご紹介します。
無料ではないので注意を。
WordPress脆弱性診断は サイトURLからWordPressの本体、プラグイン、テーマの脆弱性を診断し、レポートを出してくれます。
| 1回スポット | 4,400円 |
|---|---|
| 月1回定期診断(1年) | 39,600円 |
https://www.kagoya.jp/rentalserver/wordpress-vas/function/
https://www.kagoya.jp/rentalserver/wordpress-vas/flow/
興味がある方はサイトをのぞいてみてください。
無料で簡単にクールでおしゃれなロゴを作成できるロゴメーカーをご紹介します。
使いやすくてWeb用にロゴが欲しい方は重宝すると思います！
ダウンロード、インストール不要ですがアカウント登録は必要です。
ただし、パソコンの性能が良くないと重くて作成できないかもしれないので注意。
使い方やどんな点が優れているか記載していきます。
ロゴメーカーは「Hatchful」というWebサービスです。
無料で本格的なロゴが作成できます。
Web用のロゴだけじゃなく、フライヤーや名刺などにも活用できます。
こんなロゴが作成できます。
どんな点が優れているか特徴をご紹介！
この中で特にいいなと思ったのはSNSや名刺など複数のサイズを一括生成してくれるところです！
集客のためにSNSやフライヤーなど活用するかと思うので、それら使えるサイズのロゴが一括で作成できるなんて便利です。
こちらのリンクからHatchfulにアクセス。
Hatchful
当てはまるビジネス業界を選択してください。
ここで選択したビジネス業界を目安に自動でその業界に合いそうなロゴの候補を表示してくれます。
ビジネス業界を選択したら、「次へ」ボタンをクリック。
どんな雰囲気のロゴがいいかデザインのスタイルを最大3つまで選択できます。
ここで選択したスタイルも自動で表示してくれるロゴ候補に活用されます。
後で、個別に色などの変更もできるのでそんなに迷わなくても大丈夫です。
デザインのスタイルを選択したら、「次へ」ボタンをクリック。
ビジネス名とスローガン(オプション)を入力します。
後で変更も可能です。
スローガン(オプション)は、後で選択するテンプレートによっては表示されたり表示されなかったりします。
ロゴをどこで使用するか選択してください。
ここで選択した使用先に合うサイズのロゴがダウンロードできます。
いくつかロゴ候補が表示されるので、お好きなロゴを選択してください。
ちょっと残念なのは、この画面処理が重めです。
固まったり、ロゴが表示されない部分があったりするかもしれません。
どうしたこんなにPCに負荷かけられるのか不思議。
色やアイコンなど好きなのにカスタマイズしてください。
カスタマイズ完了したら、「次へ」ボタンをクリック。
「ロゴをダウンロード」ボタンをクリック。
こんなポップアップが出てきたら、ロゴのダウンロードにはアカウント登録が必要ですので、登録してない方は登録を。
既に登録済みの方はログインをしてください。
ロゴは登録しているメールアドレスに届きます。
以上です。お疲れさまでした。
wordpressでfaviconを設定する方法をご紹介します。
テーマにもよりますが、プラグインやソースコードの修正なしで設定可能です。
簡単なのでサクッと設定手順を書いていきます。
[peg-image src="https://blog.pleeds.com/wp-content/uploads/2020/02/wordpress-left-menu.jpg" href="https://blog.pleeds.com/wp-content/uploads/2020/02/wordpress-left-menu.jpg" caption="WordPress左メニュー" type="image" alt="WordPress左メニュー" image_size="212x460" ]
wordpressの左メニューから「外観 ＞ カスタマイズ」を選択。
[peg-image src="https://blog.pleeds.com/wp-content/uploads/2020/02/wordpress-customize.jpg" href="https://blog.pleeds.com/wp-content/uploads/2020/02/wordpress-customize.jpg" caption="WordPressカスタマイズ" type="image" alt="WordPressカスタマイズ" image_size="799x852" ]
カスタマイズ画面の左メニューから「サイト基本情報」を選択。
ちなみに上の画像はXeoryBaseのテーマの時の画面です。
LION MEDIAだとこんな感じで同じく「サイト基本情報」があります。
[peg-image src="https://blog.pleeds.com/wp-content/uploads/2020/02/wordpress-lion-customize.jpg" href="https://blog.pleeds.com/wp-content/uploads/2020/02/wordpress-lion-customize.jpg" caption="WordPressカスタマイズメニュー LION MEDIA" type="image" alt="WordPressカスタマイズメニュー LION MEDIA" image_size="665x852" ]
[peg-image src="https://blog.pleeds.com/wp-content/uploads/2020/02/wordpress-customize-base.jpg" href="https://blog.pleeds.com/wp-content/uploads/2020/02/wordpress-customize-base.jpg" caption="WordPressカスタマイズ-サイト基本情報" type="image" alt="WordPressカスタマイズ-サイト基本情報" image_size="623x850" ]
左メニューの「サイトアイコン」の「サイトアイコンを選択」からfaviconを設定し、「公開」ボタンをクリック。
以上です。お疲れ様でした！
