こんにちは！高山大知（＠daichihandflute）です。
自分のブログをカスタマイズするのってとても楽しいですよね。
いろんな方のブログを見てると、どなたもすごく統一感があって、世界観があって、凄いな…っていつも思うんですよね。
僕も少しずつ変えてはいるんですが、なかなか極まっていかないんですよね。笑
その理由の一つに「こうしたいな」と思う部分のやり方を調べても出てこないというものがあります。
僕は全然デザインやPHP・CSSなどの事が分かりません。
試してみて違ったら戻す、良さそうなのがあったらとりあえずコピペしてみる…という感じでやってはいるんですが、それでも壁に行き詰まっているものもあります。
そこで今日は、自分のブログで今カスタマイズしたいけれど上手く出来ない部分を書き出してみようと思います。
「実はこんな風にしたいんです」ということが伝われば嬉しいです。笑
変えたいけど上手く変えられないブログのデザイン
ヘッダーロゴを大きくしたい
ブログの一番上にある「monopost」と書かれたカフェラテの写真。
これがヘッダーロゴです。
常に一番上にあるのでブログの顔的な存在なんですが、僕はこれを大きくしたいんですよね。
パソコンとスマホで表示が少し違うんですが、今は画像の周りに「余白」がある状態になっています。
これを上下左右に余白がないようにして、パソコンで見た時もスマホで見た時もしっかり大きく表示されるようにしたいんですよね…
これがなかなか出来ない。
ヘッダーロゴは、画像の適切なサイズがあるみたいなんですが、何度その大きさで作って貼っても、余白が出来てしまうんですよね…
僕のブログがワンカラムだから？
「サイト幅を揃える」にチェックが入っているとヘッダーロゴが小さくなるというのも見かけたんですが、僕のブログではチェックを外した設定になっています。
「とりあえず貼った感」が出てしまっているので、ここは早く整えたいんですが上手く出来ません…
画面の下に追従するボタンを置きたい
トップページに行くボタンやカテゴリーのページにいくボタンを、画面の下などに常駐させたいですね。
スクロール追従というのかな。
記事の途中で移動したくなったときに、そういうボタンがあるととても便利なんですよね。
今記事の途中でトップページに行くには、一度一番上までスクロールしないといけないんですが、それって割と手間がありますよね。
スマホ表示では「フッターモバイルボタン」といって、常駐するボタンが置かれているんですが、それをパソコン表示では出来ないんですよね。
前はフッターモバイルボタンをパソコン表示でも出せるようにするテーマを使っていたこともあったんですが、見出しが独特だったこととカスタマイズが難しかったので戻しました。
画面下にボタンを常駐させているブログもあるのでおそらく出来るんだろうと思います
カスタマイズの方法も書かれていたりするのを見つけたこともあるんですが、自分でやろうとするとすごく難しそうです…
⇨【コピペで簡単】CSSだけでメニューバーや画像を固定させる方法
この方のをやってみたいんですが、メニューバーを指定して呼び出す方法がよく分かってません。ブログカスタマイズ、難しい…
SNSフォローボタンのデザインを、シェアボタンと分けて、文字も目立たせたい
今僕のブログのSNSシェアボタンはカスタマイズしています。
タイトルの下にも置くようにして、シェア数も分かるようになっています。
こちらの記事を参考にしています。
⇨CocoonのSNSシェアボタンを、よりシンプルにカスタマイズする方法
このシェアボタンのカスタマイズはすごくシンプルな見た目で気に入っています。
これはシェアのボタンなのでフォローボタンも別に置くようにしたいんですが、このSNSシェアボタンのカスタマイズは、フォローボタンと共通のものになっているんですよね。
シェアボタンとはデザインを分けて、記事の下などに置きたいですね。
それから一緒に表示させる「Follow！」などの文字のフォントを変えたり、大きくしたりしたいんですが、この指定の仕方も分かってません。
記事一覧の一番新しい記事を分かりやすくしたい
僕のブログで記事一覧が表示されるのは、トップページとカテゴリーごとのページ。
トップページでは新着記事一覧が、カテゴリーのページではカテゴリーごとの記事一覧が。
トップページの方ではショートコードを使っていて、カテゴリーごとのページではカテゴリーのリンクから出来たページをそのまま使っています。
この記事一覧で、一番新しいものを目立たせて表示したいんですよね。
トップページでは２列にして表示しているんですが、これだとどちらが新しい記事か分からないですよね。
「NEW」などのラベルをつけるか、一番新しいものだけ少し大きく表示するか…というふうにしたいんですが、そのカスタマイズ方法の調べ方が分からないんですよね〜…
カテゴリーごとのページでは１列で並んでいるので、一番上の記事が一番新しいということが分かると思うんですが、ただ表示させているだけなのでちょっと味気ないですよね〜…
他にも細かくカスタマイズしていきたい部分はあるんですが、やっぱり調べ方が分からないというのが一番痛いですね。
自分なりにいろんなワードで調べても、なかなかその方法を書いてくれている記事がないことも多いです。
そもそも教えてもらおうというのが驕りだと思うんですが、調べたときに方法を書いてくれている記事が出てきた時は本当にありがたく思います。
ここに書いているものでまたやり方が分かったら、ちょっとずつ実装していきたいです。
