ヒトデブログを参考にブログデザインを弄ってみた。その1

ブログデザイン

どうも、taigaです。

今日はブログのデザインを弄ってみました。

とは言え、完璧に初心者の僕が何も見ずにできるわけもなく。

参考の記事とかを探していたら、ヒトデさんのYouTubeチャンネルがヒットしましたので、めちゃめちゃ参考にさせていただきました。

ヒトデさんのブログは文章が面白くて一時期超読んでたけど、YouTubeもやってるのは知らなかったな…。

ブログの現状。

まず、手直しをする現在のブログデザインを確認してみます。

…いや笑っちゃうくらい何もないな?

昨日の記事を除くと1つもアイキャッチ画像が設定されてないし、無味無臭と言った感じのブログになっていた。

いくらなんでも寂しすぎるので、デザイン弄りをしていきましょう!

今回は、スキンとヘッダーの設定をします。

ちなみに使用しているテーマはcocoonです。

スキンの設定。

まず、スキンの変更から。

いつも通りダッシュボードを開いて、「cocoon設定」→「スキン」のタブを選択。

下の方スクロールするとスキンの一覧があるので、その中から気に入ったスキンを選択。

色合いが可愛かったので、僕は「いつものコーヒー」を選択しました。

そして変更を保存して、改めてサイトを表示したらこんな感じでした。

ちょっと色が変わったけどあんま変化ない…?

まぁスキンのみの変更だから仕方ないのかもしれない。

ヘッダーの設定。

次に、ヘッダーの設定です。

背景画像とキャッチフレーズの設定。

先ほどと同じくダッシュボードの「Cocoon設定」を開き、「ヘッダー」のタブを選択。

少し下にスクロールすると、「ヘッダー背景画像」という項目があるので、そこに好きな画像をアップ。

あと、ついでに赤矢印で示した「キャッチフレーズの配置」を「表示しない」にすると、ブログ名の上部についてる「Just another WordPress site」という文字が消えるので、これを期に「表示しない」を選択しときます。

途中経過。

保存をしてサイトを表示したら、こうなりました。

ヘッダー自体は設定できたものの、

  • 画像の高さが足りず何の画像かよく分からない。
  • ブログのタイトルが背景と同系色で見えにくい。

という2点の問題が出てきました。

なので、その修正をしていきたいと思います。

画像の高さと文字色の修正。

再び、「cocoon設定」の「ヘッダー」を選択。

今度はスクロールせずとも「高さ」と「高さ(モバイル)」という項目があるので、それをとりあえず「350」と「250」に設定。

そのまま下にスクロールすると、「ヘッダー色(ロゴ部)」という項目を発見。

今回は文字の色を変えたいので、「ロゴ文字色」を目立ちそうな「白」にしました。

完成?

サイトを表示したら、こんな感じになりました!

なかなか良いのではなかろうか。

やっぱヘッダーがあるだけでブログっぽく見えるね。

とは言え、まだおすすめカードの表示などが済んでいないので、引き続き明日もブログデザインを弄っていこうと思います!

以上!

コメント

  1. みみなを より:

    初めまして、みみなをと申します。
    taigaさんと同じく、ヒトデさんのブログを参考に1月からブログを始めました。

    私もまったくのブログ初心者でcocoonの設定が全然わからずw
    ネットを検索したところtaigaさんのブログにたどり着きました。ものすごく参考にさせてもらってます!

    まだまだこれからのブログ運営ですが、少しずつ長く続けていきたいですね!
    ではでは(^-^)/

    • taiga taiga より:

      みみなをさん、はじめまして!

      温かいコメントありがとうございます😭
      この記事が少しでも参考になったのなら幸いです〜!

      今後も少しずつブログデザインを弄っていく予定ですので、よろしければまた見にいらしてください!

      新規開始仲間同士、お互いがんばっていきましょう!!

タイトルとURLをコピーしました