ブログデザインをいろいろとリニューアルしました2017-04-09ブログデザインをいろいろとリニューアルしましたWeb制作スポンサーリンク久しぶりにブログデザインのリニューアルをしてみました!以前書いたブログリニューアル記事www.yukihy.comなんだかんだ後から自分で見返すことが多かったので、自分用メモもかねて書いてみたいと思います。きく変更したのはPCサイズです。はてなブログではほとんど見ることのない、3カラムのデザインです。(PCでも低解像度の場合、2カラムになっているかもしれません)記事の内容に集中しやすい1カラムのブログが増える中、あえて3カラムにしてみました。リニューアルポイントレイアウトはてなブログのもともとのHTMLは、3カラムにつくるようにできていないと思うので、結構強引にレイアウトを組みました。absoluteを多用することになってしまいました。したら、デバイスによってデザインが大きく崩れてしまっているかもしれません。(その場合教えてくださると助かります!)また、3カラムの部分のときのみ、今まで左詰めだったデザインを中央寄せにしました。全体の色を落ち着きと爽やかさのある青-白のグラデーションにし、基本フォントを遊ゴシックにして内容に説得力が感じられるよう意識しました。テキストは黒、目立たせたい部分に補色の黄色を使っています(最近この色の部分を意識するようになりました)。アマゾンのリンクはコーポレートカラーを使っていますが、結果目立つ色合いになりました。逆に通常リンクが目立たなくなっています。左上のアイコンPCではタイトルの下、タブレットやSPでは、タイトルの左側に、アイコンである「PCを叩くワニ」の影を入れました。ワニの部分を透明に切り抜いたものをPhotoshopで作り、はてなフォトライフにアップロード後、タイトルに:beforeでbackground-imageで入れています。僕のブログは今までも検索が使われることが多かったので、サイドバーではなくトップのメニュー部分に検索フォームを入れました。見た目を重視した動きにしてます。アマゾンリンクは強引にボタンをつくりましたはてなブログにはアマゾンリンクを入れる機能があるのですが、もともとこのようなデザインをこんな形に変更しました。HTMLは変更できないので、:afterを使って強引にボタンのようなものを入れています笑。テキストリンクとボタンが同じものです。光文社Amazon背景にアマゾンのアイコンを拡大して斜めにうっすらと加えました。stickyを使って、大見出しが来ると上に固定されるようにしました。stickyの存在を知ったのが割りと最近ですが、本当に便利です(IEを意識しなければ)。タブレット・スマホはスライドメニューに今まではトグルメニューで上下に移動させていましたが、気分を変えて横からのスライドに変更しました。hiddenを使ったときにスクロールがカクカクしてしまう部分がかなりハマってしまいましたが、何とか実現できました。一言いろんなデザイナーさんのサイトを見て、良いところをパクリ参考にさせていただき、一旦落ち着きました。相変わらず記事を書くよりもデザイン変更ばかりしているので、良いコンテンツを書かなければ。あとサイト全体がだいぶ重くなってしまっている気がするので、そこも何とかしたいです。ブロガーであるまなし...2015-07-20Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました関連記事の表記に再びMilliardの関連記事プラグインを使い始め...2015-07-07【お知らせ】当ブログで配布していたSNSボタンに関して重大なミスがありますので修正をお願いします注:この記事は、元記事の補完的役割をしています。元記事:コ...2015-06-28はてなブログシェア数付きSNSボタンでさらにオシャレな吹き出しコードを追加です7/7追記:重大な不具合を修正しました。はてなブログPro都内に住む大学5年生だったのがこの春から社会人一年目になりました。データ分析職として働いております。Googleアナリティクス※メールでのブログカスタマイズのご依頼は現在受けておりません。@ftmaccho詳しいプロフィールはこちらから。広告依頼など重要っぽい連絡はこちらからお願いします。Life引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。