ブログの記事もスマホから閲覧する人が多いですよね。
ブログを読んでくれた人に、案内したいサービスやイベントや商品、メルマガやLINE@の登録などは 記事の末尾に記事ごとにリンクを掲載しておくことが有効です。
ブログのカスタマイズでやりたいことの一つですが、 どうやってやればいいのかわからない～ということが多いです。
ちゃんと設定するには、ブログに掲載するHTMLコードど、CSS（スタイルシート）と言われるデザインの設定のためのコードと 両方の設定をするのが本来ではあるのですが、
アメーバブログでも、はてなブログでも、FC2ブログでも、エキサイトブログでも、
ブログの種類によってもCSSの設定箇所は違うし、
よくわからないコードがいっぱい書かれているCSS（スタイルシート）に、わからないコードをペーストするのは不安なものです。
ですので 貼り付けるコードは長くなってしまいますが、 ブログの記事の中に貼り付けるだけで設定できるコードを書いてみました。
こんな感じに表示されます。
どんなブログでも下記のコードを画面上でドラッグしてコピーしたあと、ブログの記事の投稿画面で、「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（スタイルシート）と２つに分けて指定して表示させる方法はこちらです。
（本来、文章を書くところに張り付けるコードが短くなるのでこちらが本当は望ましいです。）
投稿記事の中にコピー＆ペーストするのは下記の内容です。
－－－－－－－－－この下より－－－－－－－－－
<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とパスワードを控えてご相談をご利用ください。
