皆さま、こんにちは。
さて、今回はブログ記事やお知らせ投稿を書かれる皆様に役立つ、ちょっとした装飾や機能を7個ご紹介します。
この記事の前編にとなる記事が過去記事：コンテンツ制作者必見！ブログ記事に欠かせないHTMLタグとその使い方になりますので、もう少し基礎から読みたい、知識を増やしたいという方はこの記事も合わせて読んでいただければと思います。
■ブログやお知らせは文字が並ぶだけで味気ない…
ブログ記事やお知らせ投稿は外注せず自社内で行っているという企業・組織も多いと思うのですが、Wordファイルのように文字がズラっと並ぶだけなのでデザイナーさんがつくってくれたページと比べて読みづらいと思われている方も多いのではないでしょうか。
ちょっとだけ機能を足したり、デザイン要素を入れたりすると、見栄えがよいだけでなくページに動きが出せるので、読んでいる人への情報の伝わりやすさにもつながります。
HTMLに関する専門知識がなくとも、何を表示させるのにどのタグを使うかがわかればコピー&ペーストで記述できます。訪問者様にとってよりわかりやすい記事になるメリットもありますので、使ってみたいと思うものがあれば記事内に記述する挑戦をしてみてください。
1.リンク先のファイルをダウンロードする
リンクをクリックするだけで、PDFファイルなどを訪問者様のパソコン内にダウンロードできる機能です。
例えば、新商品のチラシができたとき、店舗を移転して地図や連絡先を載せたペーパーをつくったとき、配布したい書類があるときなどに活用できます。
手順
①ダウンロードしてもらいたいファイル（PDFやjpg等）を準備する
②ファイルをサーバーへアップロードする
③サーバーにアップロードされたファイルのURLを取得し、下記タグの中の”ダウンロードさせたいファイル名”を書き換える形でコピペする
④下記↓タグ全体をコピペし、ブログ記事作成管理画面内にコピペする
<a href="ダウンロードさせたいファイル名" download> 商品チラシダウンロード </a>
WEBサイトがWordPressで構築されているなら、［記事編集画面＞メディアを追加＞ファイルアップロード］からファイルをアップロードでき、URLもその画面内から取得できます。
そのほかのCMSや、オリジナルでWEBサイトを組んでいる場合はサーバーに直接FTPでアップロードする必要があります。
もしサーバーへのファイルのアップロードの仕方がわからない、サーバーへの接続のパス等が不明という場合は、WEBサイトを制作してくれた会社やデザイナーさんに問い合わせるとすぐ教えてもらえると思います。
２.印刷ボタンを付ける
重要なお知らせをしたときなど、記事を印刷し、忘れないようにしてもらいたいですよね。
そんなときは記事内にプリントするボタンを付けて、訪問者に印刷を促しましょう。
ボタンをクリックするとプリンタのドライバが開いて、印刷にスムーズに移行できます。
<form>
<input type="button" value="このページを印刷する" onclick="window.print();">
</form>
ボタンにデザインを入れることもできます。
デザインの入れ方は過去記事にCSSの設計とコードの書き方について記述した記事がありますので、より深く知りたい方は読んでいただけますと幸いです。
３.表を入れる
記事内に表を書き込みたい、そんなときはtableタグを使います。
エクセルファイルをそのまま貼れたらよいのですがコピペできないため、表のHTMLタグを記事内に書く必要があります。
<table border="1"> <tr> <th>開催日</th> <th>開催場所</th> </tr> <tr> <td>2022/9/11</td> <td>渋谷レンタル会議室</td> </tr> <tr> <td>2022/10/9</td> <td>有楽町コワーキングスペース</td> </tr> <tr> <td>2022/11/13</td> <td>千葉イベントホール</td> </tr> <tr> <td>2022/12/08</td> <td>大阪淀屋橋会議室</td> </tr> </table>
セルの数など自由に設定したいときは、tableタグ作成ツールを使うとすぐにタグが作れます。例えば行が4、列が5など設定すると、その数に合わせたtableタグが生成できるツールがあります。
4.文字に打ち消し線を引く
価格が変わったり情報に変更があったりしたときに、文字を消して書き直すのではなく、修正したことがわかるよう打消し線を付けたいときがあります。
価格改定 1kg <s>550円</s> → 770円
sで囲まれた部分に打消し線が入ります。
使用用途としては、情報が変更されたとき、正しい情報ではないときに使います。
ひと目みて変更がわかるので訪問者さまには便利です。
5.動画を埋め込む
動画をWEBページで活用することも増えてきました。
ご自身で撮影した動画ファイルがあれば、そのファイルをサーバーにアップしたあと、HTMLタグを記事に記述することでブログ等での公開が可能になります。
YouTubeで公開し、そこから埋め込みリンクを取ってきて記事内に貼り付けることも多いですが、YouTubeで公開できないときなど、記事内に直接埋め込む公開方法を知っていると助かります。
手順
①視聴してもらいたい動画ファイルを準備する
②ファイルをサーバーへアップロードする
③サーバーにアップロードされたファイルのURLを取得し、下記タグの中の”動画データファイル名”を書き換える形でコピペする
④下記タグ全体をコピペし、ブログ記事作成管理画面内にコピペする
<video src="動画データファイル名" width="1280" height="720"></video>
widthは横幅、heightは高さです。もし動画が縦長であれば数値を入れ替えてください。
そのほか、動画のアスペクト比やブログ記事のデザインに合わせて数値を書き換えれば動画の幅や高さを調整できます。
6.メールアドレスをクリック（タップ）でメールソフトが開く／電話番号タップで電話を掛ける
HTMLタグでリンクを付けておくと、お客様に電話番号やメールアドレスからすぐアクションに移っていただけるのでコンバージョンが上がるといわれています。
↓電話番号を掛けていただきたい番号に変更してください
<a href="tel:00011119999">000-1111-9999</a>
↓メールアドレスをご自身のものへ、「お問い合わせは〜」の文言は適宜変更してください
<a href="mailto:info@abcabc.com">お問い合わせはメールにてお願いいたします</a>
電話番号や問い合わせメールアドレスをコピーするというのは、特にスマホからだと面倒な作業です。タップですぐ行動に移すことができれば、オーダーや予約、問い合わせなどが増えるのは間違いないでしょう。
7.長い文章をアコーディオンで隠す
規約や参加条件など、どうしても文章が長くなってしまうときは、開閉できるようにタグを設定。
長い文章を隠してスッキリ見せる方法が効果的です。
長い文章が目に入るとそれだけでページから離脱されることもありますし、「面倒そう」とマイナスの印象を持たれてしまいます。
アコーディオンを設置し、第一印象をスッキリさせましょう！
<details> <summary>見える部分（こちらをクリックしてご確認ください）</summary> <p>隠れている部分です。ここは隠れている部分です。ここは隠れている部分です。ここは隠れている部分です。</p> </details>
この昨日はInternet explorer（IE）では非対応だったため、IEを利用する訪問者様に配慮し、長らく利用をすすめておりませんでした。2022年6月にIEのサポートが終了し新しいブラウザに移行したため、今は記事に活用するのは問題ないと考えております。
まとめ
少し知っているとブログ記事やお知らせ投稿に動きや工夫が施せるHTMLタグの小技をご紹介しました。
このような小技はWordPressでWEBサイトを構築していれば、ブロックエディタ（バージョン5.0以上で利用可能）で記事編集をするよう環境を整え、さらにブロックエディタを拡張するプラグインを入れると、かなり細かなことがエディタに備わっている機能でできるようになります。
それぞれのご都合によって利用されているCMSがWordPress以外の場合ももちろんあると思いますが、記事を更新するにはやはりWordPressは便利なCMSなので、リニューアルや新しいWEBサイト構築時には、ご検討されてみてはいかがでしょうか。
最後にお知らせです。
先日、日本最大級の情報量を誇るホームページ制作会社検索サイト「優良WEB」様の八代市のホームページ制作会社5選！優良な制作会社を特徴別にご紹介！記事にて、当社をご紹介いただきました。これからも皆さまの日々の業務に役立つTipsを発信していきます。どうぞよろしくお願いします。