アリッシアのパーソナルエリア

【Reスタート】1まで戻るブログデザイン -part1-

サムネイル画像と読者ボタン

f:id:alicia8038:20200104014709j:plain

読者になる

alicia8038.hatenablog.com

挨拶

ありーす。アリッシア( @pjots8038kt)です。

 

私の記事を普段から読んでくださっている方はもうお気づきかと思いますが、ブログのデザインを変えました。変えたといってもユーザーがデザインしたものを拝借しただけですが…

 

私は以前まで大人気のテーマ「Brooklyn」を使っていましたが、グローバルメニューのすき間レスポンシブデザインをした時のサイドバーがどうしても気になっていました。

f:id:alicia8038:20200107003536p:plain

 

レスポンシブデザインをした時のサイドバーが切れる…

f:id:alicia8038:20200107003749p:plain

 

特にこの2つが気になっていました。

 

いろいろと調べてみても解決できず、いざ自分自身でCSSやHTMLのコードを書こうと思っても莫大な時間がかかってしまう。このような狭間にいたので思い切ってbrooklynを手放して新しいテーマを使おうと考えました。

そこで新しく導入したのが、Innocect です。

moonnote.hateblo.jp

 

導入後

Innocentを導入した時に実験でもう一つのブログで試してみました。

 

このテーマは自分で最初から組み立てる必要があるので記事を書いた後に目次を設置しても更新後、目次は現れませんでした。また、見出しもただ太字になっただけでした。

 

ここからスタートなのでブログの設定のやりがいがありました。

 

スマホの場合

悩んでいたグローバルメニューのすき間がなくなった!!

 

めちゃくちゃ感動しました。そして、少し気になるのはタイトル画像の余白…

 

f:id:alicia8038:20200107004957p:plain

 

あと、サイドバーもおかげさまで修正できましたが、>Twitterのツイートがはみ出てしまう…</span

 

f:id:alicia8038:20200107005141p:plain

 

次なる課題はこの二つ(おそらくTwitterは修正しようがない気がします)

PC&タブレットの場合

スマートフォン同様に悩みは解決できましたが、見て分かるように<目次の表示と隠すボタンが目次のサイドにある/span>ので修正していきます。

 

f:id:alicia8038:20200107005818p:plain

締めくくり

・タイトル画像の余白を埋める

・埋め込みTwitterのサイズを変える

・目次の位置を適正にする

 

これらを達成できるようにこれから勉強していきたいと思います。

 

最後まで閲覧していただきありがとうございました。

20191123222243

20191123223829

読者になる

/*目次表示*/