りんごが好きなのでぃす

Apple製品の情報や豆知識などをお届けする初心者&中級者向けブログ

【お知らせ】ブログデザインをKENRANに変更しました

f:id:kjx130:20160704105442j:plain

元来飽きっぽい性格なのになぜか長年続いているこのブログですが、飽きっぽい性格が治った訳ではないので定期的に「デザインを変えたい‥…」という衝動に駆られます。

で。

前回デザイン変更をしたのが2019年の7月。

ringosuki.hateblo.jp

ちょこちょこと手入れをしながら過ごしましたが半年ちょっとで飽きちゃった、笑

採用したテーマ

今回使用させていただいたのはktrw3200さんによる "絢爛(KENRAN)"。

blog.hatena.ne.jp

テーマタイトルは絢爛ですが、基本構造はシンプルで落ち着きがあるので使い易そうと思ったのも採用の理由のひとつ。

トップページがカード形式になっているテーマは今回が初採用ですが、果たして使い勝手としてはどうなのか……支障があったらTwitterなどから教えて下さい(^-^; 

カスタマイズ

テーマカラー

テーマの説明欄に記されていた方法に従って:

#blog-title, #footer, .archive-heading::before, .categories::before, .entry-content h3::before, .entry-content h4::before, .entry-content h5::before, .entry-footer .hatena-module-title::after, .hatena-module .hatena-module-title, .hatena-module-search-box .search-module-button, .leave-comment-title, .page-about .entry-content dt::before, .page-index .entry-see-more, .pager a, .search-result-form .search-result-button {
background: #FF6F61;
}

の #FF6F61 をApple公式サイトのメニューバーカラーに合わせて #333333 に変更。

カードデザイン

本文折り込み表示の装飾に使われているグラデーションの色が気に入らなかったので……

f:id:kjx130:20200223103557j:plain

このグラデーションはちょっと不自然すぎる気が……

デザインCSSに以下の記述を入れてスタイルを上書きしました。

.page-archive .archive-entry::before {
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%) !important; }

変更後がこちら。

f:id:kjx130:20200223104043j:plain

この方が自然にフェードアウトしてて良くない?

その他のカスタマイズ

今回の絢爛(KENRAN)に対して施したカスタマイズは上記二点のみ。ここまでカスタマイズ箇所が少ないのは初めてかも(^-^)

シェアボタンのデザインはこれまで使っていたものを踏襲してそのまま。

[業務連絡]ブログ内のシェアボタンなど一部変更を行いました - りんごが好きなのでぃす  

補足として、今回のブログデザイン変更よりも少し前からFont Awesome  による記号などの文中使用を少しだけ始めました。

今のところは:

  •  (ダウンロード)<em class="fas fa-download">&nbsp;</em>
  •  (Firefox)<em class="fab fa-firefox">&nbsp;</em>
  •  (検索)<em class="fas fa-search">&nbsp;</em>
  •  (リンク)<em class="fas fa-external-link-alt">&nbsp;</em>
  •  (翻訳リンク)<em class="fas fa-language">&nbsp;</em>
  •  (サポートリンク)<em class="fas fa-graduation-cap">&nbsp;</em>

を使用しています、参考まで。

ちなみにシェアボタンのRSSやTwitterなどのアイコンもFont Awesomeからです。

ヘルプミー!

ただ、非常に細かいところを見て行くとデザインが破綻しちゃう事例がいくつかあってほとんどはレアケースなので放置しても良いかなと思っているのですが、以下の状態だけはなんとか解消したく試行錯誤中。

f:id:kjx130:20200223160051j:plain

タグのアイコンが枠の外に(TT)

f:id:kjx130:20200223160131j:plain

テキストが隣の庭に侵食……

タグが長すぎるんじゃとか、タグ付け過ぎとかそういう問題もあるかと思いますがそこはなんとかお目こぼしを頂きたく🙇‍♂️

この表示モードで表示されるタグは1つだけになるようにするとか、何文字以上ある場合は三点リーダーで後半を省略表示されるようにするとか、そういう形での解決を図りたいんですけどどうしたら良いんでしょう?