2013年5月30日木曜日

ブログの見出しの修正

Blogger ではデフォルトのテンプレートを使っていると、hタグで囲っても記事中の見出しとしてあまり目立たないというか、ただ文字の大きさが変わるだけなので、もう少し見やすく修正するためのメモ。
見出しを変更するにはまずhタグがどう使われているかを調べ、その後、hタグの CSS を修正する。

hタグがどう使われているかを調べる

テンプレートによってhタグの使われ方が違うようなので、まずはそれを調べる。
下記に調べ方がまとめられている(CSS の修正についても書かれている)。
また、下記に今自分が使っている Blogger のテンプレートのhタグについてまとめられていた。
h1タグ ブログタイトル
h2タグ 日付、ガジェットタイトル
h3タグ 投稿タイトル
h4タグ コメント関係
h1~h3までは使わないほうが良さげ。
h4タグはコメントに使われているけど、これとh5を修正してみることにする。

CSS を修正する

hタグの CSS の記述内容については、同じく上記1つ目のリンクが参考になった。
Blogger でどうやって CSS を修正するかについても書かれている。
Blogger のデフォルトのテンプレートを使っている場合は、テンプレートデザイナーの「上級者向け」→「 CSS を追加 」から変更できるので簡単に試せる。(場所の表記は環境によるかもしれない。)
上記を参考に見出しの設定を行ったところ、やっぱりコメント欄にも見出しの設定が反映されてしまったけど、見づらくはないのでこれでいいことにする。
また、CSS の記述内容については下記も参考になった。
上記を見ると、記事中のhタグのみに CSS の設定を反映できるようだけど、テンプレートによるみたいなのでまた今度試すことにする。

追記:
記事タイトルの文字が少し小さくて目立たないので、h3タグも少し修正することにした。
h3タグの場合、「h3.post-title」としないとフォントの大きさが反映されなかった(それでもフォントの色は反映されなかった)。
本当は枠線の色で塗りつぶして、文字を白っぽくしたかったけど、現状でも見やすくなった気がするのでひとまずこれでいいことにする。

見出しのテスト

テストh1

テストh2

テストh3

テストh4

テストh5
テストh6

 

タイトル

日付

投稿タイトル

記事内見出し

記事内の見出し。

記事内サブ見出し

記事内のサブ見出し。

未設定

h6は未設定。

ブログの調整

前からブログが見にくいとは思ってたけど、いい加減何とかしないといけないと思い、ついでにテンプレートとかも変更しようと思い、色々とメモ。

ブログのイメージ

見た目がシンプルで見やすい感じにしたい。

背景は真っ白だと眩しい気がするので、少しグレーっぽいのがいい(でも雰囲気が暗くならないようにもしたい)。

というわけで、Blogger の「シンプル」のテンプレートをグレーっぽくして調整中。 殺風景になりすぎたので、やっぱり元々使ってた「画像ウインドウ」のテンプレートに戻した(背景の画像で雰囲気とか色々と誤魔化すことにしよう…)。

背景を若干グレーっぽくして、タイトルを白から限りなく黒っぽくした(タイトルの説明文が背景の雲と被って若干見にくかったため)。

ガジェットが変更された

テンプレートを Blogger のデフォルト以外のを色々試しているうちに、ガジェットが追加されたり場所が変わったり、名前が変わったりしてしまった。

テンプレートをバックアップから戻してもガジェットは元に戻ってはくれない?(ブログ自体をバックアップから戻したらいいんだろうか?でもそのまま復元したら記事が2重になりそうな気がする。試してないからわからないけど…。)

戻すのめんどくさい…。

結局自分のブログのキャッシュを見ながら元に戻して、ちょっと調整。

ブログの検索は左上の方からできるみたいなので、サイドバーにはいらない?

テンプレートのカスタマイズ

テンプレートは決まった(結局元に戻したけど)ので、カスタマイズする。

Google Adsence のコードを貼り付けたのは覚えてるけど、あとは忘れてしまった。

一応、今まで使ってたテンプレートのソースと、デフォルトの改変してないテンプレートのソースを比較してみたところ、アドセンス部分以外にも異なる部分があったけど機能的には自分で何か追加したわけでは無さそう。

(そもそもなんで違う部分が存在するのか?知らないうちに自分で変えたか、どこかいじった時に自動的に変わったか、デフォルトのソースが変わったかのどれか?)

記事が二重に表示されるようになった

あと何か投稿の内容が二重に表示されてしまうようになってしまった。

と思ったらテンプレートの編集をミスってただけだった。

リアクション機能の表示

記事の末尾に、記事の内容が役に立ったかを簡単に投票できるようなボタンを付けたいと思って調べてみたところ、そういうのは投票ボタンというよりは拍手というらしく、Blogger の場合はリアクション機能というらしい。

使い方は下記とか。

リアクションがうまく表示されない。

4つほどボタンを設置してみたところ、ボタンが2行に渡ると、2行目の下半分がうまく表示されなかった。

ボタンの名前を短くして、1行にしてみたところ、うまく表示された。

引用を見やすくする

これはもっと早くにやっておくべきだった(けどよくわからなかったんだよね…。)
今回やってみたら簡単にできた。
画像を使ったりすることもできるみたいだけど、主に背景の色が変わるだけで十分だと思ったので、下記を参考にした。

あとはソースコードを貼りつけた時に見やすくなるようにもしたい。

見出しの設定

これももっと早くに設定しておくべきだった(というかてっきりデフォルトで使えるものかと思ってた。FC2だと最初から見やすくなってたはず)。
下記ページにメモった。

パソコンとかに関するメモ(テスト中): ブログの見出しの修正

2013年5月29日水曜日

ScribeFire Next から投稿テスト

ScribeFire Classic が Firefox 20 あたりから使えなくなったみたいなので、ScribeFire Next から投稿テスト。

カテゴリー(Blogger で言うところのラベル)を複数選択するときは、「Ctrl」を押しながら選択するとできる。

Classic にあったプレビュー機能は無い。

 

前の記事に書いたけど、

あと、ScribeFire Next だと画面分割で編集すると矢印キーで編集画面を移動できなかった。Ubuntu の Firefox だからかもしれない。

これはまだこのままだった。ちなみに Windows 8 。

 

自分だけかと思ったら同様の記事があった。

今のところ自分の環境では画面分割を使わなければ大丈夫そう?様子見中。

でも画面分割は便利なんだけどな…。

 

Next の方もしばらくアップデートされてないみたいで、乗り換え先を探したほうがいいのだろうか。

できれば Windows でも Linux でも使えるものがいいな。

 

Blogger 以外では試してないけど、Seesaaブログでも使えるみたい?

日本語の記事が少ないから、あんまり使ってる人いないんだろうか?

 

Chrome 版もあるようだ。プレビュー機能は無いみたいだけど。

ScribeFire chrome 版を使ってみる。 | digitalnomad::net

 

 

追記:ScribeFIre上でカテゴリが一部しか表示されない。仕様?

ちなみに POST も一部しか表示されないけど、すぐ下の欄で絞り込みができる。

ポケモンキーボードの Windows とのペアリング

ポケモンキーボードを Windows 8 とペアリングして使ってると、キーが押しっぱなしになったり、接続が途切れて一度削除してから再度ペアリングしないと接続できなかったりして、使いものにならないなーと思ってたら下記がヒット。

Windows 7 の場合、東芝のドライバを使うとキーが押しっぱなしになるときがあるらしい。
そこで Windows 8 付属のドライバを使ってみると、上記が解消されてとても快適。

ただ、この辺りは環境にもよるかもしれないけど、手持ちの USB Bluetooth アダプタの場合、Windows 付属のドライバだと機器毎に接続を切断したりができないので、そこは不便。

ちなみに下記はポケモンキーボードを FT701W という Android 端末でペアリングして使用する場合の記事。