MAPO堂

最終決定は存在しない。

はてなブログPro入りして、Blogの見た目を変えた

Proになった理由

写真はFlickr使っているし、キーワードはあっても良いし、アクセス解析Google Analyticsで十分だし、ブログ10個も作ったら大変過ぎる気がするので、ほとんどメリット無いのだけどProになってみました。お盆休みの開放感による気の迷いがプロになった理由だと思います。

  • ブログ機能はこれまで使っていたものよりも使いやすくて、良いと思います。
  • はてなスターはコメント書くのは気がひけるけど読んだことを伝えられる機能として気楽に使えて、良いと思います。 自分で残すか決められる足あとみたいな感じだろうか。
  • このブログを私の「脳内のふるさと」にしたいと思います。今週のお題「ふるさと・夏」。

はてなブックマークとかサービスがいろいろあって未だによくわからないです。それがはてなたる所以かな、違うよね。

はてなブログの前もはてなのアンテナ機能とか使っていてとても重宝していました。RSSリーダの普及とともに使わなくなって、アカウントなどももう忘れました。今はRSSリーダーもグチャグチャであまり使っていなくて、GoogleReaderのサービス終了でFeedlyに移行だけして、ニュースアプリを使うようになってきました。SmartNewsとかGunosyも最初は楽でよかったけど、スマホばっかり見ちゃってどうでもいい記事が多い割にサポーターに怒られるのであまり使わなくなってきました。「いいねボタン」みたいに「釣りかもボタン」とかつけたらどうかと思うけど、ボタンだらけになりそうだな。

というわけでは、今ははてなブログの「お知らせ」をたまにチェックしています。

ブログの見た目を変えたのは2つ

Proにならなくてもできます。

  • アイコンフォントを使ってみた
  • アイコンフォントで見出しを飾ってみた

アイコンフォントを使ってみた

こんなアイコンがフォントとして出せます。画像ではないので拡大してもきれい。

ブランドアイコンいろいろ:

スターもあるよ。フォントなので文字色も指定できる:

指もある:

この記事を参考にやってみた

Webフォントと要領は同じ、超簡単。

アイコンフォントを使ってはてなブログにいい感じのメニューバーをつける - ウラガミアイコンフォントを使ってはてなブログにいい感じのメニューバーをつける - ウラガミ

今回のデザイン変更で久しぶりにメニューバー(ナビゲーションバー)を復活させました。▼これですこいつをどうやって作ったかメモしておきます。アイコンフォントそれぞれ...

右側のOther Activityの項目に、アイコンフォントを付けてみた。

f:id:matty0102:20140815223209j:plain

最低限の記載、CSSも要らない、とても簡単。

下のPlayボタンを押すとHTMLコードの表示例が見れます。

タグを見てわかるように、テキスト要素がないので、コピペが出来ないのが面倒くさいといえば面倒くさい。

アイコンの一覧は本家のこのページにあります。
Font Awesome Icons

アイコンフォントで見出しを飾ってみた

画像使うのはありきたりなのでアイコンフォントで見出しを飾れるか考えてみた。Before擬似要素を使えば何とかなりそうだけど、contentに何を指定して良いのかよくわからなかったので、Google先生に聞いたら出てきました。以下の記事を真似してやってみた。

見出しのデザインを css の疑似要素と Web アイコンフォントで装飾して見出しを見出しらしく。 | ホホ冢次男見出しのデザインを css の疑似要素と Web アイコンフォントで装飾して見出しを見出しらしく。 | ホホ冢次男

見出し、h1~h6 な html タグ。文章章題に使うやつです。見出しのデザインをちゃんとしてあげることでぱっと見、わかりやすくなるはず。こだわってるサイトも多...

できた。

こんな感じです。

f:id:matty0102:20140815230518j:plain

以下、2014/08/16 修正

できたんだけど文字(アイコン)の指定方法がよくわからず、以下のWebフォントの中身を検索して使った。contentにHTMLタグは書けないのかな?やり方間違っている気がする。なんかプロっぽくないけど、まあいいや。 http://weloveiconfonts.com/api/?family=fontawesome

WeLoveIconFontsのサイトのCSSのバージョンが古いみたいなので、本家のCSSを読むようにすればアイコンが少なかったり、名前が違う問題は解消した。Get Start読めという話でした。 アイコン探すのに検索は必要ですが、 Font Awesome Cheatsheet が用意されていましたので、少しは楽かも。

CSSはこちら
http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css
(FontAwesomeの Get Started with Font Awesome ページから見つけられます)

/** CSSの記載例 */
/* スタイルシートのインポート */
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

/* アイコンフォントの指定 */
.entry-content h3:before,
.entry-content h4:before,
.entry-content h5:before {
    color: #69821B; /* 苔色 */
    content: "\f0d7"; /* a-caret-down を指定。直したい */
    font-family: "FontAwesome",sans-serif;
    margin-right: 5px; /* アイコン右マージン */
}

リンク

Font Awesome, the iconic font and CSS toolkitFont Awesome, the iconic font and CSS toolkit
はてなブログPro - はてなブログはてなブログPro - はてなブログ