以前書いた「はてなブログの見出しカスタマイズ」に関する記事ですが、最近ちょくちょく読まれております。
この記事を書いてからこのブログもいろいろとカスタマイズを追加しました。CSSの記入欄がごちゃごちゃしてきたので、こちらに備忘録として整理しておきたいと思います。
ちなみにこのブログはPC版とスマホ版で少しデザインが違っているのですが、この記事ではまずPC編について僕が編集した項目を載せておきます。
僕が使用しているテーマ
まずブログにはテーマがあり、人によってテーマが違います。僕の施した編集は、僕と同じテーマであれば同じように機能しますが、別のテーマの場合は同じように行かないところもあるかと思います。
ちなみに使っているテーマは「Innocent」というテーマを使っています。シンプルでアレンジもしやすく、最近使っている人もよく見掛けます。
見出しデザインのカスタマイズ
こちらは以前書いた記事を参考にしていただければ僕のブログと同じ見出しのデザインになります。
ちなみに、このブログのサイドバーにも見出しデザインを施しました。横のバーの黒いところです。これは下記のコードをCSSの記入欄に追記していただければOKです。
.hatena-module-title{
position: relative;
color: #fff;
background:#424242;
font-size: 110%;
line-height: 1;
margin: 1em 0;
padding: 10px 0 10px 0;
border-radius: 4px;
text-align: center;
width:100%;
}
ヘッダー下の人気記事一覧
このブログのヘッダーに下に出てくる５つの記事の設置についてです。この編集もコピペだけで実装可能です。詳細は開発者のこちらの記事から。※スマホでは表示されない仕様になっています。
僕はこの中から横幅いっぱいというカスタマイズを行っています。
グローバルメニューの設置
グローバルメニューとはヘッダーに横一列で表示させるメニューバーのことです。あるとブログが引き締まりますよね。そしてこれまたこのテーマを使っている人は難しいことを考えないで、パパッといけてしまいます。
詳細はこちらの記事から。
なお、こちらのブログではTOPの横に「家」のアイコンがついております。はてなブログにアイコンを挿入する方法はこちらが参考になります。
記事下の関連記事表示
この記事の一番下まで行っていただけると関連記事が表示されていることがわかるのですが、その関連記事の表示方法です。
TOPページもっと読むに関する編集
これについてはこちらの記事を見れば編集できます。それに加えて、僕のブログの場合は横幅いっぱいにするため「width」を指定しています。
/* もっと読むに関するCSS */
.entry-see-more{
width:100%;
}.entry-content .entry-see-more {
background-color: transparent;
border: 2px solid #222;
color: #222;
line-height: 40px;
}
アマゾンの商品紹介
はてなブログに初期設定で搭載されているアマゾンリンクの紹介デザインを以下のような見え方に編集しています。
この編集に関しては以下のコードをCSS編集欄に追記してもらえればOKです。
/*Amazon紹介の見た目*/
.hatena-asin-detail::before {
color: #ddd;
content: “\f034”;
cursor: default;
display: inline-block;
font: 36px/1 blogicon;
vertical-align: middle;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
TOPページのコメント欄非表示
僕はブログを通じてコメントで交流するのが好きですが、TOPページの記事一覧にコメントが出てくるとごちゃごちゃして嫌なので、非表示にしています。
設定は以下のコードをCSS欄にコピペでOKです。
/*TOPページのコメント欄非表示*/
.page-index .comment-box, .page-category-category_name .comment-box, .page-entries-year-month-day .comment-box{
display:none;
}
フッターについて
初期設定のフッターは非表示にして、自分用のフッターを差し込んでいます。方法はデザインのフッター欄に以下を。
<div id=”footer-top”>
<p><a href=”http://www.miyalog.net/“>ミヤログTOPページへ</a></p>
</div>
CSS欄に以下をコピペでOKです。※HTMLのリンク先は自分のサイトを設定してください。
/* footer-css */
#footer-top{
position: relative;
color: #fff;
background:#000;
font-size: 90%;
text-align: center;
padding:25px 0 5px 0;
width:100%;
}
SNSシェアボタン
TwitterやはてぶなどのSNSシェアボタン、拡散性・デザイン性ともに重要なこちらのボタンですが、初期設定のシェアボタンってちょっとダサいですよね…。
ということでこのブログでは忍者おまとめボタンというサービスを使っています。
設置方法はこちらのブログが参考になると思います。
サイドバーでのTwitterタイムライン表示
サイドバーのモジュール「html」を使用してTwitterの投稿を表示させます。これについてはこちらの記事が参考になります。
アドセンス広告の記事下ダブルレクタングル
PCで見たときに記事下に二つアドセンス広告が表示されますが、これについてはこちらの記事の通りにやればコピペで簡単に実装可能です。
※スマホ表示の際はダブルレクタングルのままだと「画面上に二つ広告が表示されてしまうため」忠告がくるかもしれません。僕はメディアクエリというCSSの編集方法を使ってスマホ時は非表示にしています。
その他
他にもちょこちょこいじっているのですが、大きくはこのあたりです。またこれから編集したらこちらに残していきたいと思います。
今後ともどうぞよろしくお願いいたします。
コメント