1more!

+1 Lifestyle Blog. Apple、ガジェット、旅 etc. 趣味を多方面に愉しむブログ。

【Ï】ブログ改造記10「細かい調整、そして完成間近。」

スポンサーリンク

business chart showing success

photo credit: SalFalko via photopin cc

どうも!Hayabusa(@hayabusa_823z)です。
不定期で改造を続けてきたブログ改造記も今回で第10回目になります。 前回からの間隔がかなり短いですが、今回は以前から直したかった部分を中心に、やり残していた残りの調整を行いました。

今回の改造項目

全体幅の再調整・サイドバーの幅調整
  • 以前までは全体960px、記事710pxだったものを全体1000px、720px程度に更に広くしました。
    iPadでも表示崩れすることなく、正常に表示されることを確認しています。
  • 全体幅とのバランス調整のため、サイドバーのサイズも広くしてみました。
    作業に至っては、以下のサイトを参考にさせて頂きました。

はてなブログのidとかclassとか - kyabana's blog

おすすめ記事欄・最新記事の表示量調整
  • おすすめ記事の項目で表示される項目を上記の幅調整により6→7項目に増やしました
  • はてなブログの機能追加により、最新記事にサムネイルが表示可能となったため、加えて表示量を5→10に増やしました
エントリー日付欄・タイムスタンプ・カテゴリーのスタイル変更
  • エントリーの日付の下にあるボーダーを、少し太めの淡い青色の点線のスタイルに変更しました。
    日付下のスタイルは、.dateの属性で、あとはボーダーを引くスタイルシートを記述するだけで変更できます。

  • 記事タイトル上のカテゴリー名・記事下部のタイムスタンプの文字サイズを少々大きくし斜体のスタイルに変更しました。

スマートフォン版・記事下表示の微調整
  • スマートフォン版ブログヘッダー色を、PC版と同様の色調のものに統一しました。
  • 記事下部分にFeedly購読ボタンを設置し、一部表記ゆれを修正しました。

今回の調整である程度カスタマイズは完成してきました。第9回弾の記事同様、アナリティクス周りの裏側を今後微調整を続ける予定です。 これでしばらく「書く」ことに集中できそうですね。