iiie@diy

by syttg

ブログデザインとカスタマイズについて

 

こんにちは

今回は ”このブログ” のデザインとカスタマイズについて書いていきます。

僕の備忘録兼、カスタマイズに悩んでいる方の手助けになれば幸いです。

 

f:id:gorislog:20181019092401p:image

 

 

テーマ

 当ブログで使用しているテーマは”ゆきひー氏(ftmaccho)”が公開しているテーマ『Naked』をカスタマイズしています。

f:id:gorislog:20181017221442j:plain

Naked - テーマ ストア

 

『Naked』はCC(クリエイティブコモンズ)でBY(原作者クレジット表示)のみの条件で使用できる上、CSSのコードが分かりやすく羅列されており、初心者がカスタマイズをするのに適したテーマです。以前より、ブログのカスタマイズの元に使用させていただいています。

 

クリエイティブ・コモンズ・ライセンスとは

 

作者であるゆきひー氏もカスタマイズ記事を投稿しており、『Naked』に特化したカスタマイズコードも掲載していて、初心者の方でもカスタマイズがしやすいようになっています。

 

theme-naked.hatenablog.jp

www.yukihy.com

また、他のテーマについて言及した記事のコードを利用してもそのまま使えることが多く、汎用性の高いテーマです。CSSのカスタマイズをする際、"コメント"が記載されているので、カスタマイズしたい箇所を探すのに便利です。

 

 

 

 

カスタマイズ構成

 

f:id:gorislog:20181017215117p:plain

左:当ブログ / 右:Naked(オリジナル)

 

当ブログは”はてなブログpro"を前提としたカスタマイズを行っています。

 ”ブログヘッダ・フッターの非表示化”、”キーワードリンク非表示”、”一覧形式”を設定した上でカスタマイズをしています。

 

Nakedは2カラムですが、1カラムに改変しました。PickUpから下の部分は”サイドバー”に該当します(サイドではないですが)。上から [ヘッダー]→[記事一覧]→[サイドバー]→[フッター]の構成になってます。

 

当ブログのカスタマイズ内容

全体

2カラムを1カラム化

Nakedは2カラムデザインですが、当ブログは1カラムデザインに変更しています。

Nakedは、レスポンシブデザインに対応しており、PCサイズ(769px以上)、タブレットサイズ(798px以下)、スマホサイズ(680px以下)の3サイズに対応しており、記事の大きさや文字サイズ、レイアウトが変更されます。

Nakedのオリジナルテーマでは、PCデザインのみ2カラムとなっていて、タブレットサイズ・スマホサイズは1カラムで表示されます。

僕が変更したのは、2カラムデザインを廃して、タブレットサイズ以上の表示方法を統一する方法です。

Nakedのタブレットサイズの表示CSSは以下の通りとなっていました。

@media screen and (max-width: 768px) {
#wrapper {
float: none;
margin-right: 0;
padding-right: 0;
}
#box2 {
float: none;
width: 90%;
margin: 20px auto 0 auto;
}
}

”@media screen~”が表示端末の特性を指定し、それにあったCSSを表示するためのコードです。

 

この中の"#box2"の表記(オレンジ色の部分)を"@media screeen~”で指定されている部分以外の"box2"の部分(メイン)に記載します。

 

メディアクエリに対して言及されている記事はコチラ

sole-color-blog.com

 

ページ表示時にふわっと表示する

"body"の中に以下のコードを入れます。

animation: fadeIn 1s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;

 

animation fadeinに関して言及している記事

q-az.net

 要素を”スーッ”っとスライドさせて表示する方法

ブログタイトル・記事一覧・サイドバーモジュールタイトルにアニメーションを追加しています。CSSで簡単に実装でき、海外でも人気のあるカスタマイズ方法です。

 

方法を言及している記事

www.uenoyou.net

 

 

 

 

ヘッダー

ブログタイトルのフォント変更

f:id:gorislog:20181017224847p:plain

 当ブログのブログタイトルはGoogleFontsの"Poiret One"を利用しています。

GoogleFontsは無料で使用できるWebフォントサービスです。サーバーからフォントデータを読み込み、表示するので、端末に保存されているフォント以外の様々なフォントを使用できます。ページ表示速度が低下するといったデメリットもありますが、ブログのデザインを良くするのに便利なサービスです。

 

方法を言及している記事

fastcoding.jp

 ブログタイトルの表示位置

ブログタイトルの表示位置は、”#blog-title-content”を変更します。

#blog-title-content {
text-align: center;
padding: 100px 0 40px 0;
}

上記が当ブログのCSS内容。”text-align”で表示位置を”center”に調整しています。

”padding”はタイトルと説明が記載されたエリアの上100px、下40pxに余白をつけています。

 

記事

 記事一覧化

『設定』→『詳細設定』→『トップページの表示形式(PC版)』から選択可。

デフォルトは”全文形式”が選択されており、Proの方のみ”記事一覧化”を選択できます。スマホデザインは異なりますが、”レスポンシブデザイン”を選択すれば、記事一覧形式にできますが、CSSをレスポンシブデザインにする必用があります。

カードデザイン化

WordPress等で人気なカード型デザインを当ブログでも採用しています。

 

方法を言及している記事

blog.minimal-green.com

上記のサイト様に記載されているコードを自分用に書き換えて使用しています。

変更内容は以下の通り。

① orderの順番・レイアウト

② 文字レイアウトの変更

③ カテゴリータグデザインの変更

④ 日付アイコンの追加

⑤ 画像マウスオーバー時の”変化”の追加

 

⑤ 画像マウスオーバー時の"変化"の追加コードは以下の通り

.page-index .entry-thumb {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.page-index .entry-thumb:hover {
opacity: 0.6;
filter: alpha(opacity=40);
}

 うまく動作しない場合は、どこかで重複している可能性があります。

 

サイドバー(コンテンツ)

 PickUpで使用している”bxslider”

jQueryを使用したbxSliderは画像リンクを動きのあるものにしてくれる非常にデザイン性の優れたアイテムです。しかし、はてなブログで使用するためにはスクリプトを外部のライブラリから読み込む必要があるので、読み込み速度が遅くなる可能性があります。現に、”PageSpeed Insights”で測定すると、設置前後で比較するとスコアが低下しました。使用する画像サイズの圧縮などが必須となり、作業項目の多いアイテムですが、デザイン性は高いと思うので、バランスを考えながら導入するといいと思います。

 

はてなブログでの方法を言及している記事

www.tairakenji.com

bxSliderの使い方を細かく説明している記事

on-ze.com

bxSliderをそのまま使用すると、外枠と影のデザインとなっており、僕はフラットなデザインを好んでいるのでCSSを変更。外枠と影を消しました。

.bx-wrapper {
margin: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none !important;
background: none !important;
}

 

”カテゴリータグ”のデザイン変更

 

カテゴリーデザインはタグ風に変更。

 

方法を言及している記事

blog.mshimfujin.net

マウスオーバー時のモーションに関しては以下のコードを追加

.hatena-module-category a {
display: block;
padding: 8px 14px;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.hatena-module-category a:hover {
padding: 5px 5px 5px 15px !important;
}

 

メニューの作成

一番下のメニューはサイドバーの『html』を使用して作成。

モーションはcssで実装し、アイコンは、はてなブログで実装されているアイコン集から適したアイコンを使用しました。

 

ボタンの使用方法を言及している記事

www.nxworld.net

 

アイコンの使用方法を言及している記事

www.foxism.jp

 

LastUpdata. 2018/10/29.

Updata. 2018/10/18.