凛と柔く

日々のアレコレ

【追記あり】ブログテーマを「Minimalism」に変更。実装したカスタマイズいろいろまとめ。

先日のこと。ブログテーマを、こどみすさん(id:codomisu)のMinimalismに変更しました。

 

hitsuzi.hatenablog.com

 

初のレスポンシブテーマでまだまだ慣れません(;^_^A 今までのPCとモバイルを別にしたカスタマイズからいくつか変更しましたので、以前のテーマ時からずっと使用させて頂いているもの等も併せ、記録と共にご紹介。

 

 

ナビゲーションメニュー

まずはナビゲーションメニュー(メニューバー、グローバルメニューとも言う?)を設置。これはこどみすさんがMinimalism用として公開してくださっているものを。
(上記テーマの紹介リンク内に設置方法の説明あり)

 

ただ、メニューの前のアイコンは変更。私の投稿カテゴリに合ったアイコンがないものもあったので、統一することにしました。
そして真っ白で色が淋しかったので、アイコンのみ着色。ちょっとしたフォーカルポイントになるかなという狙いもあり。

 
▽こんな感じになりました。

 

投稿日・最終更新日

投稿日のアイコンも変更。個人的には、カレンダーよりペンの方が「書いた日」という印象があるので。
そして以前と同様に、最終更新日の表示も。コード使わせて頂いたのはコチラ。

 

www.tsubasa-note.blog

 

スマホで見た時だけ文字サイズが違っており、何とかしたい。でもレスポンシブだとどこをいじればいいのかイマイチわからず、今は放置しています(・・;)そのうちどのcssを変えればいいのか確認してみよう。

▽こんな感じになりました。

 

TOPへ戻るボタン

これも以前からずっと設置しています^^

 

azanaerunawano5to4.hatenablog.com


▽こんな感じになりました。

 

引用デザイン

引用デザインも変更。しっかり区別が付くようにしたかったのと、記事内にメリハリを持たせたいので。

 

saruwakakun.com

▽こんな感じになりました。

 

リストデザイン

リストデザインも変更しました。そのままだと、枠がない状態で数字がついたり「・」がつく程度で、区別がつきにくかったので。

 

コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

▽こんな感じになりました。

 

【追記:2017.8.10】

このリストデザインのカスタマイズ方法では、他の箇所に影響が出ることがわかり、現在は使用しておりません。
使用しているブログテーマによって影響の有無が変わると思いますので、ご確認をお忘れなく!

 

目次デザイン

デフォでちゃんと「目次」の文字も入るのですが、前述したリストデザインの変更をしたら、同じ「ol」を使用する中見出しまでリストデザインが適用されてしまうという思いがけない状態になってしまった。
苦肉の策として、中見出しの表示を消すことで、ボックスの中にボックスが表示されるという状態をまぬがれました。

 

www.yukihy.com

 

▽こんな感じになりました。

 

ヨメレバ・カエレバ

こちらも以前からお世話になっています。スッキリしたデザインで重宝しています!

 

www.yukihy.com

▽こんな感じになりました。


シェアボタン

今回、シェアボタンのデザインをいろいろ探していたら、こんなのを発見!

 

www.mutant-tetsu.com

 

一度コードを貼り付けてしまえば、どれだけデザイン変更をしても再貼り付けの必要がないという手軽さ!!そこに惹かれて使用してみることにしました。
先述のMUTANTさんの記事内で詳細な設置方法が記載されていますので、興味ある方はぜひ!

 

カラー設定も、ボタンの形もクリックひとつで変更可能。個人的にはモノクロ(モノトーン)カラーでボタンが作れるのがポイント高いです。

また、シェアされた数などもマイページにログインすれば確認できるのが便利。

 

サイトはこちら▶ AddThis - Get more likes, shares and follows with smart website tools



▽こんな感じになりました。

 

サイドバーのプロフィール

実はサイドバーに設置しているプロフィールは、デフォのモジュールではなく、HTMLのモジュールを使用して作成しました。参考ブログはこちら。

 

panmeeee.hatenablog.com

▽こんな感じになりました。


プライバシーポリシーを設置

多くのブログで拝見していたプライバシーポリシー。ほぼコピペさせていただいただけではありますが、当ブログでも設置しています。
参考サイトはこちら。

 

ririchiko.com

www.nubatamanon.com

 

▽こんな感じになりました。

 

Googleアドセンス

漫画系の広告をブロック

気持ち悪い漫画サイトの広告(漫画サイト自体は気持ち悪くないのに、アドセンスで出てくる広告は気持ち悪い)をブロックしました。以降、自分のブログを見るときに、それらが表示されることはなくなりました。
参考ブログはコチラ。

 

www.yururimaaruku.com

www.islog.jp

 

自動挿入&ダブルレクタングルをPCとスマホで表示数を変更

なんと!2つもの目的を達するすごいコードを公開されている方が!!
今までも自動挿入を使用してきましたが、レスポンシブデザインにしたため、スマホ表示の際にダブルレクタングルのまま表示されると規約違反。その対策として導入。簡単に設定できて素敵すぎます。

 

www.makiyamazaki.jp

 

記事本文直下に設置&ダブルレクタングルをPCとスマホで表示数を変更

次は自動ではなく固定の設置。ただし、普通に記事下に設置すると記事下設置のシェアボタンや投稿者のID表示などの下になってしまうのです。そのため、記事本文の直下に入るように設定しました。
参考ブログはこちら。2つのコードを組み合わせた感じです。

 

chipspd.hatenadiary.jp

www.foxism.jp


ちなみに、シェアボタンもチップさんのコード内に突っ込んでいますので、投稿者のID表示よりも上に表示できています。すごいなぁ。

 

トップページをカード型レイアウトに

【2017.8.10追記】

ワードプレスなどでよく見る、カード型レイアウト。憧れでしたので、この機会を逃すまいと実装です。

 

design.syofuso.com

 

はてなのデフォで一覧形式が開始されたことに伴い、CSSの追記だけで変更できるとのことで、本当に本当に、コピペ一発で変わったので感動です。

 

Font Awesomeのアイコンを検索できる

【2017.8.10追記】

今回のカスタマイズではFont Awesomeのアイコンにお世話になっているわけですが、公式サイトで目当てのアイコンを探すのは大変でした。

そんなとき発見したのがこちら。

 

 ▶Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた

 

日本語で検索できるし、逆に、Unicodeはわかるのに名称がわからないときも、非常に重宝します!

 

はてなブックマークで実装したカスタマイズをまとめた

後々わかるように、実装したカスタマイズ記事と、いつか使えそうなカスタマイズ記事のブクマは、タグを分けています。

 

具体的には、

  • 実装したカスタマイズ記事のタグ ⇒ ★ブログカスタマイズ
  • いつか使えそうなカスタマイズ記事のタグ ⇒ ブログカスタマイズ

といった程度の区別。

 

ちなみに、今回紹介しているのはここにまとめてあります。

★ブログカスタマイズに関するkocchi130のはてなブックマーク

 

 

さいごに

先人たちがこうやって様々なコードや手順を公開してくださるので、こんなど素人でもそれなりな見栄えのブログをデザインすることができます。本当に感謝しかありません。

 

全くの素人ではありますが、こうやって公開されていない部分の微調整をしたい場合もあります。そんな時はテーマのcssを見て、どこをいじればいいのか確認しながらやってます。


CSSは、作る人によって組み立て方が違っていたりして、見てみるとなかなか面白いです^^(内容はちんぷんかんぷんですけどね)