WordPressでもHTML・CSS Googleマップ・CTA・表の縦線

ごった煮なタイトル(笑)。


5月~6月はバラが見頃です。金沢南総合運動公園のバラ園。

WordPressでも ノンプログラマーでもたまには

日々ブログの記事を投稿しています。

ライターでも、カメラマンでもない私が投稿を続けられるのも
WordPress(ワードプレス)を利用できることが大きな要因です。

ウェブでの投稿には、本来HTMLやCSSでの設定が必要です。

WordPressはそうした設定をスルーさせてくれます。

CMS(Contents Management System)という仕組みのおかげです。
(自由と不自由は抱き合わせ)

とはいえ、そんなWordPressでも、たまにHTMLやCSSの設定が
必要なときもあります。

WordPressでも Googleマップの埋め込み

記事のなかで場所を示したいこともあります。

Googleマップを記事で埋め込めると参照にも便利です。

たとえば、「ボローニャを工業団地のアウトレットで! in白山市」の記事では
下記のように地図を記事に埋め込みました。

手順は2段階。
まず、ウェブ上よりGoogleマップで地図のデータを取得します。
Googleマップより対象を検索して、「共有」→「地図を埋め込む」→「HTMLをコピー」

次にWordPressの投稿記事にHTMLでのデータを貼り付けます。
入力画面を「ビジュアル」から「テキスト」に変更して、データを貼り付けます。

データを取得して貼り付けるだけですが、情報として役立ちます。

WordPressでも CTAの改行

サイト内での自社広告に使っているCTA。

ブログ記事の末尾に掲載しています。

(WordPressと自社広告 プラグインかテーマか)

設置は容易ですが、意外な落とし穴がありました。

改行」です。

CTAに広告内容を入力した状態で表示しようとすると、
改行されずに出力(表示)されます。

広告を入力した後で、改行したい場所で<br>」を「テキスト」タブで入力します。

他愛ない設定ですが、見やすさは大切です。

WordPressでも 表の縦線をCSSで設定

記事内で表を示すこともあります。

Excelで作成して、スクリーンショットをとることもありますが、
WordPressのエディタからも入力できます。


(決算の後はキャッシュフローでザックリ振り返る 経営の傾向と方向がわかる)

エディタのアイコンから表の作成は可能です。

表の外枠と横線は「テーブル」→「行のプロパティ」より設定できます。

ところが、なぜか出力すると表の縦線が引かれません

HTML CSS
WordPress 地図・CTA 表の縦線

 

追加の設定が必要です。

「セルのプロパティ」より設定します。
「高度な設定」→「スタイル」に「border-color: #000000; border: 1px solid;」と入力します。

HTML CSS
WordPress 地図・CTA 表の縦線

 

地味な表ですが、意外に面倒な設定の印象です(笑)。

WordPressでも 場当たり対応>思考停止

上記で紹介してきたように、私が扱ったHTMLやCSSの設定は
大仰なものではありません。

トラブルの都度、ウェブを検索して乗り切っています。

事前にトラブルを予見しての行動よりも
場当たり的な対応です(笑)。

なんだかパッとしませんが、それでも思考停止よりはマシです。

多くの人に使われていて、同じ悩みを抱える方がいるWordPressなら、
トラブルの都度なんとかできると信じる方が慌てずにすみます。

 

蛇足
本業の税務会計は、同じテーマの本や資料を買い込んだり、
セミナーや研修を受講しつつも、悩みが堂々巡り・・・
えいやっ!、とはいかないものですね(笑)。

<お知らせ>
セミナー動画販売 副業をされる方も税理士受験者も応援しています!
■オンラインでのやりとりで参考にしてください
「タグ」→「オンライン