はてなブログはオススメ/書式サンプル(2/2)

はてなブログを使い始めてから3ヶ月経ちましたが(2015年2月現在)、安定しているし、ウェブデザインもシンプルで落ち着いているし、はてなの公式ブログは一般企業の礼儀正しさと落ち着きがあります。はてなブログを選んでよかったと思っています。

過去記事の再編集もしやすいし、ブラウザが強制終了された時もバックアップをとってくれるので文章を綴るのには使い勝手がよいです。ただ、普段は「編集 見たまま」モードで記事を書いているためか、1分前に強制終了された場合もバックアップとってくれてたんだけど。長文で「HTML編集」をしていた時に、ごくたまに強制終了されやすくなってバックアップもとれていなかったことがありました。(短文の時は「HTML編集」をしていても強制終了されなかった。)長文でHTML編集をする時はこまめに保存しておいた方がいいのかも。(無料版を利用しているのですが、2017年現在はブログの自動バックアップ機能は無くなったようです。有料版の方は利用していないので不明です。)

それから、 [デザイン]―[カスタマイズ]で「画像をアップロード」した時の「表示設定」でも設定できたらいいのになあと思いました。でも、デザインCSSを編集してみたら画面全体の背景に1枚の画像を表示することができました(^_^)

◆書式サンプル

大見出し 

中見出し

小見出し

水平線


 

[外部リンク] 標準 太字 斜体イタリックem 打消 アンダーライン 文字の大きさ標準小 *1 *2

  • 箇条書き
  • 箇条書き
  1. 番号付きリスト
  2. 番号付きリスト

引用 blockquote(class="normal"設定) [外部リンク(class="link normal"設定)]

スタイルシート

背景画像を初期設定から変更。テーマはReport→Aero。

デザインCSSに以下を設定。

body{ background-image: url('フォトライフアップロードした画像.jpg'); background-repeat: no-repeat; background-color:transparent; background-attachment: fixed; background-position: center top; background-size: cover;} /* 画面全体に1枚の画像を表示 */

em, blockquote { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', 'Helvetica Neue', 'Helvetica', 'Arial', ;}

blockquote { font-style: oblique; font-size: 95%;background-color: lightyellow;}

p { text-indent: 1em; }

hr { border:none;border-top:dashed 1px #CCC; margin: 1em 0; }

a.keyword { text-decoration: none; border-bottom: medium dotted #DEDEDE; }

img.profile-icon { height: 30px; width: 30px; }

.entry-content { font-size: 100%;}

.center { display: block; margin-left: auto; margin-right: auto; } 

 

書体にメイリオ(Meiryo)があると斜体(em)設定しても斜体にならない。公式テーマでデフォルトで斜体があるのは、pray、Darkroom、ヨミカキ、Pink Pharmacy。

公式テーマで文字のサイズを変更できるのは、Handwriting、Venetia、Popcorn、Pink Pharmacy、Skull wings、Patchwork、Airmail、レトロポップ、寿司ゆき、Terminal、ヨミカキ、Reach、Pray。 

◆参考リンク 

.appIconBig{ display: block; margin-left: auto; margin-right: auto; }
body { background: url(background-photo.jpg) center center/ cover no-repeat fixed; }

◆関連記事 

*1:脚注その1

*2:脚注その2