CSSソース
/*メイン＋サイドの表示領域の設定*/
#container{
width: 1010px;
}
/*メイン部分の設定*/
.archive-entries,
.entry-inner{
width: 670px;
}
/*サイド部分の設定*/
#box2{
width: 300px;
}
/*記事内の設定*/
.entry-content{
line-height: 50px;
font-size: 16px;
}
/*記事内で使うpタグ設定*/
.entry-content p{
margin-bottom: 50px;
}
/*目次などリスト表示設定*/
.list {
background-color: #f5deb3;
width: 660px;
color: #456898;
padding-left: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
}
/*ストーリー掲載部分*/
.story{
background-color: #f5deb3;
padding: 10px;
margin-bottom: 20px;
font-size: 14px;
}
/*記事内h3見出しタグの設定*/
.entry-content h3{
color: #ffffff;
background: #e07000;
padding: 15px 15px;
border-radius: 10px;
}
/* 画像表示編集 */
img.hatena-fotolife{
border: 2px solid #ccc;
border-radius: 5px;
}
【コピペでできちゃう】会社員の僕が仕事しながら記事を書きつつ行ったはてなブログのカスタマイズを紹介
会社員ブロガーの皆様こんばんわ、最近はてなブログproに変更した苦労詐欺です。
11月に密かに目標にしていた記事数21を達成したので、その記念にはてなブログproに変更しました。
早速ブログ内で表示されていた広告の表示を切り、キーワードの自動リンクをオフにして、独自ドメインへの切り替えを行いました。
今回はそんな僕がブログを更新しながら少しずつ行っていったブログのカスタマイズについて紹介していきます。
記事のシェアボタン導入
現在僕のブログでは記事ページにシェアボタンが表示されるようにしてあります。
画像のような感じで記事ヘッダー＆フッター部分に表示させています。
シェアボタンから記事をシェアしてもらえばそこからアクセス数が伸びる可能性が出てくるので設置しておいたほうがいいかと思います。
これのおかげか最近更新したMOZOの記事やIQ246のまとめ記事を何人かの人にはてブしてもらえました。
はてブして頂いた方ありがとうございます。
名古屋のMOZOとかピンポイントな記事ってどうなんだろうか？
とか思っていたのですが、予想外にアクセス数が伸びていてビックリ(ﾟдﾟ)！しています。
で、このシェアボタンですが、下記のブログ記事からコピペで貼りました。
いくつか設定を帰れるので気に入ったデザインに変更してあります。
トップを記事一覧表示に変更
はてなブログだとほとんどのテンプレートのトップが記事全文を表示させるタイプになっているかと思います。
僕も最初はここをいじってはいなかったのですが、記事が増えていく毎に、
一覧表示にしたい…
と思ったので、調べてみたところこちらもコピペでできるようだったので早速やりました。
コピペして必要なところだけ変更しただけで出来ちゃったので暫く( ﾟдﾟ)ﾎﾟｶｰﾝとしてました。
ただし、この方法だと50記事を越えないとページ送りができません。
この設定は変更できないようですが、一記事まるごとトップにきちゃうよりはいいかなと思います。
スクロールでいろんな記事が確認できるしね。
あわせて読みたい記事の表示
あわせて読みたい記事はシェアボタン同様ページ別に表示されるようにしてあります。
と言っても、これもコピペで設置してあるだけの簡単なものです。
いろいろと便利なものを生み出している先人の方たちに感謝です！
ｱﾘｶﾞﾀﾏｷﾝ ( ´∀｀)ﾉ⌒ω)Д`)ﾌﾞﾆｭ
( ´∀｀)Σ⊂(ﾟДﾟ )オイッ！
ちなみにこのあわせて読みたいは記事が登録されているカテゴリーを参照して記事を表示させています。
なので、カテゴリーの設定をしていないと表示されないものだと思われます。
カテゴリーの設置がまだの人はとりあえず設置するだけしましょう。
吹き出し表示の作成
最近ちょいちょい使っている、
こんな感じの
吹き出しもコピペで設定し、pタグにclassをつけて表示させています。
WPならプラグインがあるらしいのですが、はてなブログにプラグインが内代わりにコピペで作れちゃいます。
サクサクッと設置して記事内で利用しましょう。
CSSで行った細部の装飾
僕はこれでも一応Web制作会社で働いており、日夜HTMLやCSSは触っています。
ですが、ブログを凝った装飾にするのには時間がかかるので、自分が気になった箇所を簡単にCSSで変更しました。
大したことはないのですが、一応変更した点とCSSのソースを載せておきます。
変更箇所一覧
- メイン・サイドの表示幅変更
- 文字サイズ、行間変更
- pタグに余白追加
- 目次部分を装飾
- ストーリー部分を装飾
- h3見出しを装飾
- 画像表示部分を装飾
記事やサイド部分の表示幅を変更したり、h3見出しや画像部分を装飾といった本当に細かい部分の設定です。
ちなみにメイン表示部分の表示幅は、一覧部分の幅も変更してあります。
はてなブログ設定内でできる表示の変更
CSSでの設定だけでなくはてなブログの設定だけでできる箇所もあります。
サイド部分の画像表示や、人気記事一覧ガジェットの追加ははてなブログ内の設定で変更が可能です。
また、記事ごとのパンくずリストもブログ内の設定で表示が可能です。
ただ、パンくずリストは関連記事の表示と一緒でカテゴリー設定が必要です。
サイドのカテゴリー一覧もガジェットで追加が可能です。
また、記事ごとのカテゴリーや記事ごとのURL設定も記事の編集画面で設定が可能です。
この他にも意外といろいろ設定できるので、試してみてください、
基本的には先人がいるのでコピペでできちゃう
基本的にはカスタマイズしたい内容を検索すれば大概は説明してくれている記事がでてきます。
しかもコピペでサクッとできちゃうものが多いです。
なので、仕事と記事の更新で忙しい僕でもブログの装飾が簡単にできました。
仕事と記事の更新が忙しすぎてコピペすらできないという人は、はてなブログよりもWPでブログを作ったほうがいいかもしれません。
こちらのほうが既に装飾されているテーマがあるので、カスタマイズしなくても見た目がいい状態で記事の更新ができます。
ある程度自分でカスタマイズしたい人ははてなブログでカスタマイズしていくほうがいいかと思います。
ただ、様々なブロガーさんが口を揃えて言っていますが、ブログのカスタマイズよりもまずは記事の更新です。
僕もそう思っているので、カスタマイズは基本的にコピペです。
カスタマイズしつつ記事更新できるのがベストなんじゃないかなと僕は思います。
