まむせる

思ったこと、感じたことをいろいろ書いていきます

ブログに「続きを読む」を導入、トップページのコメント欄を非表示などいろいろカスタマイズしました

http://www.flickr.com/photos/49978599@N00/243879885

photo by StephenMitchell

ブログのデザインを変更しました。

もともと使ってたテーマはこちら。

Written - テーマ ストア - はてなブログ

 

シンプルで気に入ってたのですが、どうもサイドバーに広告を設置すると広告の大きさが目立っている感じがしたので前々から変えたいと思っていました。

そして今回、こちらに変更しました。

Blank - テーマ ストア - はてなブログ

 

こちらのデザインもシンプルでいいですね。ぼくはPC画面のみこのデザインテーマを使用してますが、スマホ画面もこのデザインにしている方を結構見かけます。

 

テーマを変更するときは変更前のCSSを先にコピーしておきましょう。テーマを変更すると以前のCSSが消えます。

テーマを変更後、コピーしたCSSを張り付けたのですがデザインが崩れてしまいました。

素人ながら原因っぽいところをいじってたらなんとか調整できましたが、不安な方はきちんと調べてからやった方が良さそうです。

 

続きを読むを導入した

PC画面でトップページを表示すると、最新の記事がそのまま全文表示されてしまって全部読み終わらないと次の記事が見れなくてとても不便でした。

これを前々からなんとかしたいなと思ってたのですが、続きを読むを導入すればいいみたいです。 

PC画面で記事の一覧が見れるようになるので以前よりトップページが見やすくなります。読んでもらうひとにもいろんな記事を見てもらえやすくなりますね。

PCで記事を作成する画面のタイトルの下に「続きを読む」ボタンがあるんですよ。「引用」ボタンの隣に。これ知りませんでした。

いままで使ってなかったので、最近になって過去記事を見直して設定しています。

 

こちらのブログを読めばわかるかと。

staff.hatenablog.com

 

トップページに表示される「続きを読む」ボタンをオシャレにする方法があります。

設定しているブログのデザインテーマにっては、勝手におしゃれになっていることもありますね。

「続きを読む」ボタンをオシャレにしたい方はこちらのブログがわかりやすいですよ。

www.ituore.com

 

トップページのコメント欄を非表示にする

「続きを読む」を導入してブログのトップページが見やすくなりました。ただ、記事の続きを読むのバタンの下にその記事のコメントが表示されてしまいます。

コメント欄が表示されると、トップページが見づらいのでコメント欄を非表示にしたい。

調べてこちらのブログを参考にしました。

michiko-70554148.hatenablog.com

 

 サイドバーを固定する

記事を読んでて下のほうにスクロールしていくと、サイドバーのスペースが空いてしまいます。なんかもったいないなと思っていたので、サイドバーが固定できるのか調べてみました。

 

いろいろと調べてみて出てきた記事通り試してみたんですが、なかなかうまくサイドバーが固定されないです。固定はできてもそれまでの過程がエラーっぽくなりうまく表示されない。サイドバーの固定はあきらめました。

サイドバーの1番下にアドセンス貼って固定すれば、ずっと見てもらえるだろうと思ってましたがそれはダメみたいですね。Googleに怒られるそうです。

 

ブログ内のリンクを新しいタブで開けるように

このブログでAmazonの商品リンクなどをよく貼っていますが、クリックされるとAmazonのページに飛んでしまってこのブログの画面は閉じられてしまうんですね。

そうなると、このブログのページに戻るのも戻るボタンをクリックしないといけないし、そのまま戻ってこなくなってしまうのではないかと思いました。

なので、ブログ内のリンクをクリックしたら新しいタブで表示するようにしました。

 

参考にしたのはこちらのブログ。 

maroom.hateblo.jp

 

いろいろカスタマイズしました 

最近変えたのが見出しのデザイン、ソーシャルボタン。

こちらの記事に書いたのでよかったら見てみてください。

blog.mamuseru.com

 

あと、文字の大きさも変えることができます。

blog.mamuseru.com

 

まとめ

ブログを続けていくなかでいろいろカスタマイズすると、ちょっとブログの雰囲気が変わってモチベーションがアップしたり気分転換になりますよ。

 

 

 

 

 

 

blog.mamuseru.com

blog.mamuseru.com

blog.mamuseru.com