読者です 読者をやめる 読者になる 読者になる

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

はてなブログ、スマホサイトの「注目記事」を見栄えよくカスタマイズ

はてなブログ ブログ運営 ブログ運営-カスタマイズ はてなブログ-カスタマイズ

f:id:kminebg1110:20160214223202j:plain

の記事にて、スマホ記事下の関連記事のデザインをメリハリのあるものにカスタマイズしました。そこで気になってくるのが、「はてなブログ」デフォルトの「注目記事」の表記・デザインです。

ここを修正すると、トップ画面・関連記事・注目記事の配色・サムネイルと統率のとれたものとなるため、「注目記事」のデザインを若干カスタマイズしてみました(はてなブログProの方向けとなります)。

 

▼先の記事にて、記事下のMilliard関連記事プラグインのデザインを修正。

 

スポンサーリンク

 

 

注目記事のカスタマイズ、Before・After

こちらはBeforeの「はてなブログ」デフォルトの表示。わるくはないのですが、「はてなブログ」ユーザーの多くが同一フォーマットのため個性がない。


f:id:kminebg1110:20160214204414j:image

 

カスタマイズ後。修正点は以下の3箇所。プロフィールに背景色を付けたくなかったのですが、「プロフィール」と「注目記事」は同一の「class属性」となっているようで、本日のところは「プロフィール」も含めての修正で我慢。今週末あたりに、デフォルトのプロフィールを削除し、新規作成のうえ最下部の配置に変更したく思います。

  • 背景色を、ヘッダー・見出し・関連記事と同色とした。
  • サムネイルは、やや大きくし黒枠で囲み、トップ画面・関連記事のサムネイルと同じデザインに変更
  • 「検索」の背景色も同色となるため、「検索項目」は削除しました(削除方法は後述)。私は他ブログも含め、ブログで「検索」を利用したことがありません。おそらく、多くの方は利用していないだろうとの判断で削除しました。

f:id:kminebg1110:20160214204424j:image

 

この結果、以下のスクショのとおり、背景色はヘッダー、関連記事・プロフィール・注目記事の各見出し項目と同じとなり、サムネイルも若干サイズは異なるものの、同一のデザインとなりました。

▼トップページ
f:id:kminebg1110:20160214204436j:image

▼記事下の関連記事

f:id:kminebg1110:20160214204455j:image

▼注目記事

f:id:kminebg1110:20160214204424j:image

 

「注目記事」修正のため、追加したCSS 

昨日の記事下のMilliard関連記事プラグインを、見栄えよくカスタマイズとほぼ同じコードです。これをダッシュボード・デザイン・スマホの「タイトル下」にコピペです。

 

<style type=text/css>
.hatena-module-title {
color: #ffffff ;
background: #2980b9;
font-size: 16px ;
padding: 10px 5px 10px 10px !important;
margin-top: 15px;
}
.hatena-module-entries-access-ranking .urllist-image {
width: 80px;
height: 80px;
border-radius: 0em; /*サムネイル画像の角の丸みをなくす*/
border: solid 3px rgb(61, 61, 61); /*画像の枠線をつける*/

}
</style>

 

なお、赤文字については、皆さんの好みに合わせ修正ください。backgroundの赤文字は背景色、後段の80はサムネイルのサイズ(デフォルトは70)、最後の2行はサムネイルに黒枠を付ける場合です。黒枠が不要の場合は最後の2行は削除です。

 

ちなみに、スマホサイトの「検索」を削除する場合、ダッシュボード・設定・詳細設定の「headに要素を追加」欄に、以下をコピペすることにより完了です。

<style>

.search-box{display:none;}

</style>

 

まとめ

これにて、スマホサイトの基本的な部分のカスタマイズは概ね完了となりそうです。今後、カテゴリー検索・プロフィール表示・他の細部を詰めていくことになりますが、最大の難関は、いかに表示スピードを速めるかということです。「はてなブログ」のスマホサイトは、当ブログ・他ブログも含め、表示スピードが遅く、少なからず直帰率に影響していると思われます。

他ブログの記事を拝見しても、なかなか根本的なスピードアップ策がない様子。早々になんとかしたい事項です。