お知らせ:ブログのデザインを大幅に変更しました
2週間前ぐらいからコロコロ弄っていたのですが、ブログのデザインをかなり大きく変更しました。あくまでお知らせなので、具体的な方法に関しては書きません。嘘だろって思われるかもしれませんが、この記事では書きません。後日しっかり書きます。しっかり小分けにして。
というわけで。「こんなことやったよ!」っていうのを報告させていただきます。
記事更新現在、進捗率はせいぜい75%といったところなので、一部のメディアによっては、表示がおかしくなったりするかもしれません。もしあったら教えて下さい。
コメント欄でも、Twitterでもどんなメディアを通しても良いので、教えてくださると非常に助かります。
完成図(まだ変わるかも)
とっぷぺーじ
タイトル部分
記事(見出し含む)
記事下
全体的な変更点
変更点がかなり多いので、いくつか小分けにして紹介したいと思います。というわけで、まずは全体的な変更点。
テーマをZENOーTEALに変更
ご存知、某Word Pressのテーマっぽいで話題のZENO-TEALにテーマを変更致しました。
ちなみに、ZENO-TEALに行った詳しいカスタマイズは、後々記事にしようと思っています。需要?知らん。
トップページカード型が綺麗
僕は、ZENO-TEALに変更する以前からトップページカード型カスタマイズをしていましたが、つばさノートさんのCSSをコピペでほぼそのまま埋め込んでいたので、かなりガバガバな表示になってしまっていました。下記記事参照。
ZENO-TEALは、カード型の表示が最も綺麗で(主観)、導入している方のブログを見ては脱糞していたので、実装できて本当に良かった。
2カラム→1カラムに
ずぅぅっと悩んでいたことですが、1カラムにしました。
1カラムにしたことによる具体的なフィードバックは、未だ数人の友人からしか受け取っていないのですが、「読みやすい」、「記事を最後まで読む気になる」とのありがたい言葉をいただいているので、暫くは1カラムで様子をみようと思います。
あとかっこいいよね。1カラム。
トップページのカスタマイズ
トップページのカスタマイズも凝りました。1カラムにしたらサイドバー部分がぽっかりと空いたので、デフォルトだと2列のカードを3列に変更。
ちなみにこれだけのカスタマイズに、めっちゃくちゃ時間かかってます。CSSマジ複雑。詳しくは後々解説します。
ヘッダーにおすすめ記事を表示
PC版のみですが、ヘッダー部分におすすめ記事を表示しています。毎度思うけどここのHTMLめっちゃ複雑。Innocentで実装してるみたいな簡単な奴もっと増えろ(他力本願寺)
はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました - MoonNote
グローバルメニューとブログタイトルを融合
有名どころだと、NOTITLEさんがやってるような奴(下の画像参照)に憧れていたのですが、どうにも上手くいかなかったので、四苦八苦しながら実装しました。すっげえ疲れたゾ〜
課題
レスポンシブ対応を完璧にしてない(というか出来てない)ので、スマホだと表示がガバガバになります。とは言えないので、タイトルはデフォルトのまま。お前のブログガバガバじゃねえか(嘲笑)
なんとか解決するため、現在進行系で頑張っています。
トップページの抱える課題
サイドバーがなくなったことで、PCのカテゴリーを一覧表示してくれる場所がありません。これは困った。記事下に表示するカスタマイズを現在作成予定です。
記事ページの変更点
正直ここが一番頑張った。ここしか頑張ってないといっても過言ではないぐらいには頑張った。
記事タイトルとヘッダーを融合
的確な表現が見つからなかったので詳しくは画像を参照。
スマホ版はちょろっと弄った程度ですが、PC版はかなり頑張りました。すっごい回りくどいやり方でメディアクエリを設定したので、すっごい時間がかかった。もう二度とやりたくない。
記事下のコンテンツの充実
表示できるコンテンツは全部表示してやるぜ!!!ぐらいの勢いで色々入れました。重ねて疲れた。とはいっても、殆どのコンテンツはコピペで出来るものだったので、そこまで時間はかかっていません。
シェアボタンを新装
ブログデザインが変わって、以前のシェアボタンがイマイチな感じになったので、変更しました。
あと、これなんだ?というか、シェアボタンってことに気づいてもらえないんじゃないかと思ったので、シェアボタンの上にシェアしてね的なメッセージを書きました。シェアしてくれる人が増えるといいなあ(遠い目)
この記事が気に入ったらフォローを実装
こいつの効果が絶大。Twitterのフォロワーが増えるのなんの。
ただ、イマイチオリジナリティみたいなものには欠けているので、そこあたりは後々改善したいところ。
合わせて読みたいを追加
1カラムになったので、サイドバーに表示していた関連記事、人気記事を記事下に入れました。はてなブログデフォルトの関連記事+Millardのプラグインを実装。二ついるのかは分かりませんが、導線が多いに越したことはないだろうという浅はかな理由で二つ入れてます。
この記事を書いた人を実装
Word pressで実装してる人は結構多いのですが、はてなになると極端に少なくなるなと思ったので、簡易的ながら作りました。あくまで素人知識アンド適当アンドめんどくさがりが作っているので、ぶっちゃけかなり適当です。記事上というか、見出しの前か後ぐらいに配置した方がいいのかなあとも思ってます。
課題
ブログが現在全体的に抱えている課題を書きます。後々ブログ見て、「昔の俺こんなんでクセしてたのかよwww」って嘲笑いたいので書きます。もし「こうやればいいぜ!」って親切に教えてくれる人がいれば是非。「ここがおかしくなってるぜ!!」っていうのもあれば是非。
スマホ版のタイトルがガバガバ
PC版の方はまずはこいつを見てほしい。
ひでえ有様なのでなんとかします。できればPC版のグローバルメニューをレスポンシブかさせようと思っています。
1カラムにすることによるリスクを無視
1カラムに関しては結構議論があるので、今も頑張っていますが、後日、さらに、色々対策しようと思っています。
レスポンシブ化出来てない
メディアによって、かなり表示がガバガバになります。特にタイトル部分。なんとかせねば。
目次が邪魔
目次がバカ長くなり、記事によってはかなり鬱陶しいです。あと番号がでたらめになってることがよくあるので、改善せねばと思っています。
折りたたむCSSを書いて、尚且つデザインを変更出来ればいいな(遠い目)
まとめ
ぬわああああああああああああああああん疲れたもおおおおおおおおおおおおおおおおおおおおおおおおおおおおおん
最初に言ってますが、ここを参考にしたとか、具体的にどんなCSSを書いたとかも書いてません。本当に適当なんで(言い逃れ)
リクエストがあれば答えたいのですが、HTMLもCSSもガバガバで、全然整理もしてないので、今のところ積極的に公開するつもりはないですが、メールか、コメント頂ければ答えようとは思っています。
感想等あれば、是非コメントください。
何はともあれ、僕!!満足!!!!