動画静画生放送チャンネルブロマガアツマールアプリ
その他
ログイン
  • ニコニコ会員登録

ユーザーブロマガは2021年10月7日（予定）をもちましてサービスを終了します

ブロマガで使えるデザインエッセンス♪
閉じる
閉じる

ブロマガで使えるデザインエッセンス♪

2013-01-31 12:51
  • 9

【更新】2015/10/17

ブロマガで利用できそうなデザインを試した記事です。
記事の中でちょっとしたアクセントとして利用できます。

利用方法
  1. 「ソース」に書かれているものをコピーします。
  2. 必要に応じて、文字や色を変更して下さい。
    （赤字が内容の文字、青字が文字色、緑字が背景色か枠線の色。）
  3. 「記事管理」-「HTML編集」のタブに切り替えて貼り付ける。
ワンポイント
  • 文字位置の変更
    • 中央寄せになっている文字を変更する場合は以下の通りです。
    • [ text-align:center ]の center を left か right に書き換えます。
    • [ left ]で文字が左寄せに、[ right ]で文字が右寄せになります。
  • 色の変更
注意点
  • メール向けに作成していませんので、配信されるメールで閲覧すると表示が崩れる可能性があります。
  • もしメール配信を停止する場合は、「記事管理」-右にある「メールで配信する」のチェックを外して保存する。
  • または、「ブロマガ設定」-「基本設定」-「メール配信を利用する」のチェックを外した設定で保存する。

（´-`）.｡oO ぼやいてます
ソース
<div style="width:250px;height:40px;border:1px solid #696969;border-bottom:8px solid #696969;padding:15px 5px 0;text-align:center;font-weight:bold;color:#696969;">（´-`）.｡oO ぼやいてます</div>
(´っω･*) 悲しいです
ソース
<div style="width:250px;height:40px;border:1px solid #4169e1;border-bottom:8px solid #4169e1;padding:15px 5px 0;text-align:center;font-weight:bold;color:#4169e1;">(´っω･*) 悲しいです</div>
(❀╹◡╹)ﾉﾞ こんにちは
ソース
<div style="width:250px;height:40px;border:1px solid #ff69b4;border-bottom:8px solid #ff69b4;padding:15px 5px 0;text-align:center;font-weight:bold;color:#ff69b4;">(❀╹◡╹)ﾉﾞ こんにちは</div>
m(_ _)m　謝罪します
ソース
<div style="width:250px;height:40px;border:1px solid #000000;border-bottom:8px solid #000000;padding:15px 5px 0;text-align:center;font-weight:bold;color:#000000;">m(_ _)m　謝罪します</div>
(*ﾉ∀`*)　ネタバレしています
ソース
<div style="width:250px;height:40px;border:1px solid #ff0000;border-bottom:8px solid #ff0000;padding:15px 5px 0;text-align:center;font-weight:bold;color:#ff0000;">(*ﾉ∀`*)　ネタバレしています</div>

見出し

ソース
<div style="border-left:15px solid #000000;padding-left:10px;color:#000000;"><h2>見出し</h2></div>

見出し

ソース
<div style="border-left:15px solid #ff0000;padding-left:10px;color:#000000;"><h2>見出し</h2></div>

見出し

ソース
<div style="border-left:15px solid #0000ff;padding-left:10px;color:#000000;"><h2>見出し</h2></div>

見出し

ソース
<div style="border-left:15px solid #008000;padding-left:10px;color:#000000;"><h2>見出し</h2></div>

見出し

ソース
<div style="border-left:15px solid #800080;padding-left:10px;color:#000000;"><h2>見出し</h2></div>

タイトル

ソース
<div style="border-left:15px solid #0760bb;padding:5px;padding-left:10px;height:20px;margin:10px 10px 10px 0;color:#000000;"><h2 style="font-size:16px;font-weight:bold;display:inline;">タイトル</h2></div>

ここに文章を書きます。
ソース
<div style="color:#ffffff;background-color:#000000;text-align:center;padding:5px;">ここに文章を書きます。</div>
ここに文章を書きます。
ソース
<div style="color:#ffffff;background-color:#ff0000;text-align:center;padding:5px;">ここに文章を書きます。</div>
ここに文章を書きます。
ソース
<div style="color:#ffffff;background-color:#0000ff;text-align:center;padding:5px;">ここに文章を書きます。</div>
ここに文章を書きます。
ソース
<div style="color:#ffffff;background-color:#008000;text-align:center;padding:5px;">ここに文章を書きます。</div>
ここに文章を書きます。
ソース
<div style="color:#ffffff;background-color:#800080;text-align:center;padding:5px;">ここに文章を書きます。</div>

ここに文章を書きます
ソース
<div style="border-left:15px solid #000000;border-right:15px solid #000000;border-top:2px solid #000000;border-bottom:2px solid #000000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border-left:15px solid #ff0000;border-right:15px solid #ff0000;border-top:2px solid #ff0000;border-bottom:2px solid #ff0000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border-left:15px solid #0000ff;border-right:15px solid #0000ff;border-top:2px solid #0000ff;border-bottom:2px solid #0000ff;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border-left:15px solid #008000;border-right:15px solid #008000;border-top:2px solid #008000;border-bottom:2px solid #008000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border-left:15px solid #800080;border-right:15px solid #800080;border-top:2px solid #800080;border-bottom:2px solid #800080;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>

ここに文章を書きます
ソース
<div style="border:5px double #000000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:5px double #ff0000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:5px double #0000ff;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:5px double #008000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:5px double #800080;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>

ここに文章を書きます
ソース
<div style="border:1px dashed #000000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:1px dashed #ff0000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:1px dashed #0000ff;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:1px dashed #008000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:1px dashed #800080;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>

ここに文章を書きます
ソース
<div style="border:1px dotted #000000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:1px dotted #ff0000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:1px dotted #0000ff;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:1px dotted #008000;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>
ここに文章を書きます
ソース
<div style="border:1px dotted #800080;text-align:center;padding:5px;color:#000000;">ここに文章を書きます</div>

手順方法
  1. ここに文章を書きます。
  2. ここに文章を書きます。
  3. ここに文章を書きます。
ソース
<div style="width:120px;height:20px;font-size:13px;background-color:#003366;border:1px solid #006699;margin:30px 10px 0px;padding:1px;text-align:center;color:#ffffff;">手順方法</div><div style="background-color:#f0f8ff;padding:15px;margin:0 10px 30px;border:1px dotted #333333;color:#333333;"><ol><li>ここに文章を書きます。</li><li>ここに文章を書きます。</li><li>ここに文章を書きます。</li></ol></div>
記事のポイント
  • ここに文章を書きます。
  • ここに文章を書きます。
  • ここに文章を書きます。
ソース
<div style="width:120px;height:20px;font-size:13px;background-color:#003366;border:1px solid #006699;margin:30px 10px 0px;padding:1px;text-align:center;color:#ffffff;">記事のポイント</div><div style="background-color:#f0f8ff;padding:15px;margin:0 10px 30px;border:1px dotted #333333;color:#333333;"><ul><li>ここに文章を書きます。</li><li>ここに文章を書きます。</li><li>ここに文章を書きます。</li></ul></div>
記事のポイント
  • ここに文章を書きます。
  • ここに文章を書きます。
  • ここに文章を書きます。
ソース
<div style="width:120px;height:20px;font-size:13px;background-color:#003366;border:1px solid #006699;margin:30px 10px 0px;padding:1px;text-align:center;color:#ffffff;">記事のポイント</div><div style="background-color:#f0f8ff;padding:15px;margin:0 10px 30px;border:1px dotted #333333;color:#333333;"><ul style="list-style-type:square;"><li>ここに文章を書きます。</li><li>ここに文章を書きます。</li><li>ここに文章を書きます。</li></ul></div>
選択肢
  • ここに文章を書きます。
  • ここに文章を書きます。
  • ここに文章を書きます。
ソース
<div style="width:120px;height:20px;font-size:13px;background-color:#003366;border:1px solid #006699;margin:30px 10px 0px;padding:1px;text-align:center;color:#ffffff;">記事のポイント</div><div style="background-color:#f0f8ff;padding:15px;margin:0 10px 30px;border:1px dotted #333333;color:#333333;"><ul style="list-style-type:upper-alpha;"><li>ここに文章を書きます。</li><li>ここに文章を書きます。</li><li>ここに文章を書きます。</li></ul></div>

参照記事

作業メモ
  • 実質、インラインレベルのCSSが利用できる。
  • CSS3の[box-shadow]や[border-radius]等を試すと保存時にソースから削除される。
  • CSSプロパティは全て利用出来るわけではない。
  • 削除されるものでも「見たまま編集」では反映される場合がある。そして保存時に削除される。
  • 記事保存時にHTMLの書き方が整形される。
  • <!-- -->のコメントは書いても保存時削除される。
  • ニコ生のコミュで利用しているプロフィールをそのまま利用できる。
当記事のソースを記述するテンプレ
<div style="background-color:#ffc0cb;width:55px;height:15px;font-size:11px;border:1px solid #dda0dd;margin-top:10px;padding:1px;text-align:center;">ソース</div><div style="background-color:#e5e5e5;font-size:12px;border:1px dotted #333;margin:0 0 40px 0;padding:5px;">ここにソースを書きます。</div>
! 違反報告
広告
コメントコメントを書く
userPhoto
にく
×
ブロマガに際してのまとめは非情に重宝しました。
この手の記事を次もまた期待しています
No.1
105ヶ月前
返信する
userPhoto
×
>>1　にくさん

コメントありがとうございます('-'*)
そのうち同様の記事をまた書くと思います。
少しでも参考になれれば嬉しいです。
No.2
105ヶ月前
返信する
userPhoto
7 8
×
使わせていただきました。
ＨＴＭＬは初めてだったんでソース付で分かりやすい記事はとてもありがたかったです。
No.3
93ヶ月前
返信する
userPhoto
×
>>3　７8さん

コメントありがとうございます。
使う程の活用度はあんまりないかと
思っていたので、使って下さって嬉しいですm(__)m
No.4
93ヶ月前
返信する
userPhoto
雪夏
×
今日こちらの活動を知って、早速参考にさせていただきました。
一線を退かれるようですが、大変貴重なブロマガだと思っております。
またお目にかかった時には改めてお礼を言わせていただきたいと思います。
それでは！
No.5
77ヶ月前
返信する
userPhoto
×
>>5 雪夏さん

コメントありがとうございます。
数カ月後に返信するのも失礼ですがｗ

参考になったようで嬉しいです。
中々、活動を継続できないので雲隠れしていますが、
機会があればきちんとした活動をまた行いたいと考えています。
その際にはよろしくお願い致します。
No.6
72ヶ月前
返信する
userPhoto
ナナミ
×
初めまして。
サンプルがとても分かりやすく、参考にさせて頂いております。
一つお尋ねしたい事があるのですが、「ソース」を記載されているあの「枠」はどう記述されているのでしょうか？
今回私のブロマガでExcelVBA関係の自作ソースを公開しようと考えています。
他のサンプルと異なり、文字も小さく余白もかなり少ない為、このフォーマットを使用したいのですが、御教授頂けると幸いです。
No.9
72ヶ月前
返信する
userPhoto
×
>>9 ナナミさん

初めまして、コメントありがとうございます。
参考にして下さって嬉しいです。記事内で用いているソース枠ですが、
当記事の一番下に「当記事のソースを記述するテンプレ」を追加しましたので、
中身をそのままコピペして使ってみて下さい。

ご存知かと思われますが、
実際にソースを記述する際にHTMLに変換されてしまう記述は、
文字実体参照で記述していただければと思います。
よろしくお願い致します。
No.10
72ヶ月前
返信する
userPhoto
ナナミ
×
>>ほびろんさん
御対応下さりどうもありがとうございます。
編集時に試してみた所上手くいきました(まだアップはできていませんが)。
今後も参考にさせて頂きますので宜しくお願い致します。
ありがとうございました。
No.11
72ヶ月前
返信する
コメントを書く
コメントをするには、
ログインして下さい。