ブログの任意の場所にレスポンシブデザインのお知らせ欄をつけるための HTML タグ

以下のタグをブログ等の任意の場所に貼り付けると

<div style="background-color: #fff; border: 5px solid #ccc; border-radius: 5px; width: 90%; margin: 0 15px 25px 0; float: left;">
<h2 style="background-color: #ccc; text-align: center; font-size: 14px; color: #fff; border: none; margin: -1px!important; padding: 10px 0 14px!important;">お知らせ</h2>
<div style="padding: 15px;">てすてす</div>
</div>

以下のようなお知らせ欄を表示させることができます。

お知らせ

てすてす

HTML の貼れるところなら、WordPress.com に限らず、いろんなところで使えます。例えば、はてなブログに貼り付けるとこんな感じになります。

デザイン設定 - はてなブログ

なお、テーマの CSS と干渉する場合には手直しが必要になります。

参考
  • 記事の中に欄を作るためのCSS | comemo|2012-06-06
  • テーマ「Twenty Eleven」にお知らせをつけるための CSS | comemo|2013-03-22

投稿者: comemo

WordPress.com での記事の作成方法など

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。