Puple’s books

任天堂作品やRPGメインのゲームのプレイ日記ブログ

ブログ内カスタマイズしました(CSS)

こんにちは、ぷっぷるです。

連日更新をやめたあと、ひたすらCSSをいじっていました。
知識は微妙~にあるものの、独学で慣れないため時間はかかる…

苦戦していましたが、ある程度完成したのでここらで一旦終了!
せっかく頑張ったことだし、どうカスタマイズしたかを載せます。

記事内

ネタバレ注意マークの変更

RPG等の記事冒頭に『ネタバレ注意』と記載していましたが、常々「いけてないデザインだな~」と思ってたので(自分で作っておきながら)改めて作りました。

記事タイトル右上に出るようになりました。
記事の中身を邪魔しなくなって良いかも。

画像の表示位置を変更

ページ幅より画像幅のほうが小さいとき、画像が左に寄っていたので、自動的に真ん中に表示されるように調整しました。

記事リンクの見直し

リンク用に [ 前へ ] [ 次へ ] ボタンを作ったり、はてなブログ公式で用意されているブログカードを使ったりしていましたが、前者はいけてない・後者は重いという事で今後はテキストリンクで貼る事にします。
こんなかんじに… ↓

しかし作ったはいいものの、我に返って「これデザイン(配色)いけてねぇ~」ってまた言うかもしれません。センスの無さに絶望

ブログ全体

トップページの記事数を変更

トップページ軽量化のため、表示する記事数を10→5に減らしました。

ヘッダーの削除

軽量化のために削除しました。

フッターを変更

というか軽量化でフッターは表示しないように設定していたのですが…。

「プライバシーポリシー」「お問い合わせ」のリンクを置くために、公式フッターを基に自分でカスタマイズしたものを設置しました。

やっぱりフッターがあるとページ全体が締まっていいですね。

サイドバー

プロフィールデザインを変更

プロフィールデザインは以下よりお借りしています。素敵なデザインで気に入っています。

www.fuji-blo.com

でもブログ専用の「つぶやき」みたいなものを設置したくなりました。
しかしTwitterの埋め込みは重いし、ブログに関係ない事書いてるし…

というわけでお借りしたデザインをいじって、つぶやき(近況)を表示するようにしました。

フォローボタン別にいいか…と思って消しちゃった。はは

カテゴリ一覧表示の変更(デザイン・階層化)

前々からカテゴリー一覧の階層化表示を行っていましたが…

なんと!『jQueryを使用せずに階層化表示可能』&最初から『階層された内容の開閉状態を指定』できる!という素晴らしいカスタマイズをされている記事を発見しました。

multimineral-tech.com

こちらを使用してカテゴリー一覧が大幅にかわりました。素晴らしい!ありがとうございます!

あとは自分好みにちょちょいとカスタマイズ~

元のデザインも可愛くて好きですが、シンプルで見やすいように作ってみました。結構気に入っています。

注目記事一覧・最新記事一覧の撤去

軽量化のため削除しました。
おかげでブログ全体がコンパクトになりました。

リンク一覧の撤去

『リンクは視覚的に目立った方がいい』とどこかで見たので、わかりやすくアイコン表示していましたが、内容的に「でかでかと載せるようなものじゃない」と判断したので削除しました。

 →そしてフッター復活へ…

あとがき

他にもちまちまカスタマイズはしていますが、細かすぎるので置いておきます。

というわけで、また更新していきます。
以前に「週1~4くらいで適当に更新する」と言いましたが、やっぱりゴミの日のように曜日決めて更新しようかな。
この未更新期間で「決めないと何もしなくなる」事がわかった…