コピー&ペーストでOK!集客できるブログにするための記事下のリンク用HTMLコード

ブログの記事もスマホから閲覧する人が多いですよね。

 

ブログを読んでくれた人に、案内したいサービスやイベントや商品、メルマガやLINE@の登録などは 記事の末尾に記事ごとにリンクを掲載しておくことが有効です。

 

ブログのカスタマイズでやりたいことの一つですが、 どうやってやればいいのかわからない~ということが多いです。

 

ちゃんと設定するには、ブログに掲載するHTMLコードど、CSS(スタイルシート)と言われるデザインの設定のためのコードと 両方の設定をするのが本来ではあるのですが、

 

アメーバブログでも、はてなブログでも、FC2ブログでも、エキサイトブログでも、

ブログの種類によってもCSSの設定箇所は違うし、

よくわからないコードがいっぱい書かれているCSS(スタイルシート)に、わからないコードをペーストするのは不安なものです。

 

ですので 貼り付けるコードは長くなってしまいますが、 ブログの記事の中に貼り付けるだけで設定できるコードを書いてみました。

 

こんな感じに表示されます。

 

お知らせ

女性起業UPルームでは、起業を志す女性のための起業相談やセミナー、女性起業家たまご塾などの起業塾を開催しています。

 

どんなブログでも下記のコードを画面上でドラッグしてコピーしたあと、ブログの記事の投稿画面で、「HTML」モードに切り替えた後、そのまま貼り付ければ利用できます。

 

---------この下より---------

<div style=”position: relative; border: 1px solid #ccc; margin: 2em auto; padding: 2em; color: #888; border-radius: 8px;”><span style=”position: absolute; padding: 0.2em 0.8em; left: 20px; top: -1.0em; font-weight: bold; background-color: #fff; color: #888; border: 1px solid #ccc; border-radius: 5px;”>お知らせ</span></p> <p>女性起業UPルームでは、起業を志す女性のための起業相談やセミナー、女性起業家たまご塾などの起業塾を開催しています。</p> <ul style=”margin-left: 2em; margin-top: 1em;”> <li><a href=”○○○○”>相談対応メニュー</a></li> <li><a href=”○○○○”>開催予定のセミナー</a></li> <li><a href=”○○○○”>お問い合わせ</a></li> </ul></div>

---------この上まで---------

 

まずは試しに、新規の投稿記事の中に貼り付けて使ってみてくださいね。○○○のところは、リンク先の記事のURLに変更してください。文章のところは、ご自身の内容にそのまま変更すればOKです。

 

 

もう一つ、表示される見た目は同じですが、HTMLコードと CSS(スタイルシート)と2つに分けて指定して表示させる方法はこちらです。

(本来、文章を書くところに張り付けるコードが短くなるのでこちらが本当は望ましいです。)

 

お知らせ

女性起業UPルームでは、起業を志す女性のための起業相談やセミナー、女性起業家たまご塾などの起業塾を開催しています。

 

投稿記事の中にコピー&ペーストするのは下記の内容です。

---------この下より---------

<div class=”blog_kakomi”><span class=”blog_midashi”>お知らせ

女性起業UPルームでは、起業を志す女性のための起業相談やセミナー、女性起業家たまご塾などの起業塾を開催しています。

<ul class=”blog_list”> <li><a href=”○○○○”>相談対応メニュー <li><a href=”○○○○”>開催予定のセミナー <li><a href=”○○○○”>お問い合わせ </ul> </div>

---------この上まで---------

 

CSS(スタイルシート)を設定する箇所にコピー&ペーストするのはこちらです。

一番下に追加してください。

---------この下より---------

/* blog_samplecode */ .blog_kakomi{ position: relative; border: 1px solid #ccc; margin: 2em auto; padding: 2em; color: #888; border-radius: 8px; } .blog_midashi{ position: absolute; padding: 0.2em 0.8em; left: 20px; top: -1.0em; font-weight: bold; background-color: #fff; color: #888; border: 1px solid #ccc; border-radius: 5px; } .blog_list{ margin-left: 2em; margin-top: 1em; }

---------この上まで---------

 

 

スタイルシートの設定を変えた時には、「スーパーリロード(再読み込み)」が必要です。

ブラウザにもよりますが、Google Chrome などでしたら Shift+F5キーを押すと再読み込みされます。

 

うまく表示されたでしょうか?

 

設定内容など、わかりにくい点がありましたら「ホームページ・ブログ相談」の中でもご説明します。

ブログの管理画面にログインするIDとパスワードを控えてご相談をご利用ください。

 

関連記事

起業相談予約
女性起業UPルームメールマガジン登録
女性起業家成功事例一覧

トピックス

  1. 【ZOOM相談OK】【11月/12月】女性起業UPルームの予定および起業相談対応日

  2. あなたの中にきっとある!「ダイヤモンドを探せ!」【起業成功のコツ-第144号】

  3. 必要なのは「集客」と「収益」のピラミッド【起業成功のコツ-第143号】

  4. PTA業務のアウトソーシングの必要性を問いかける『PTA’S(ピータス)』女性起業事例

  5. 【満席・選考中】女性起業家たまご塾後期「集客のためのホームページ設計コース」第15期

女性起業UPルームご紹介動画

女性起業家たまご塾紹介

横浜市男女共同参画推進課

公益財団法人横浜市男女共同参画推進協会

よこはま女シゴト
マイクロソフト