HOME > お役立ち情報 > コピー&ペーストでOK!集客できるブログにするための記事下のリンク用HTMLコード

コピー&ペーストで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とパスワードを控えてご相談をご利用ください。