【コピペOK!】5分でかっこいいブログデザインにする方法!

Blogは資産
しぶやん

公務員になるがもっと自由に生きたい!と感じ退職。その後、金銭的などん底を味わい、お金に関する勉強をし浮上。その後、いくつかの事業・投資による複数の収入の柱を構築。
▶︎お金持ち=(収入ー支出)×運用利回りの公式が理念。
資金が少なくても、豊かになれる道を紹介します。

スポンサーリンク
スポンサーリンク

ブログを運営し始めると、デザインが気になるって方も多いと思います。

デザインが気に入らないと、モチベーションも下がってしまいますから、意外と重要なポイントかなぁと思います。

僕の場合は、そんなにブログデザインには、こだわらないのですが、ほぼ日刊イトイ新聞が好きなので、少しその雰囲気を真似てみたいなぁ…と思ったことがあります。

そこで、今日は、WordPressを使って、こんな雰囲気のページを作成する方法を紹介します。

ほぼ日刊イトイ新聞より

ほぼ日刊イトイ新聞より

このページを読むと5分でこれができる!

  • ページ毎に好きな背景写真をバーンって掲載できる。
  • ワンカラムにしてちょっとLP風にすることができる。
  • ブログ色が濃くなるSNSボタンを非表示にすることができる。

ブログの中でも、ここぞ!っていう所で利用したり、これからサイトを構築したいけれども、ブログ色を消して、独自のブランド的に魅せていきたいという方は、使える方法かなぁと思います。

OLちゃん
OLちゃん

こんなページが自分で作れたらすごくいいじゃない!

写真を上手に使えば、THEブログ!って感じがしないね。

しぶやん
しぶやん

そうするための材料も全部掲載しておくから、コピペして好きに使ってね。

つい先程、お問い合わせのページを作成してみましたが、こんな感じです。

では、早速、パパッとこの様な形式にしてしまいましょう。

なお、WordPressテーマはCocoonを使用しています。
Cocoonでない場合は、操作方法が異なります。

該当ページを1カラムに設定する

画面右側の上部、文書をクリックして、ページ設定ページタイプ1カラム(狭い)を選択します。

これだけでサイドバーはなくなり、この様な状態になります。

背景に使いたい画像をメディアにアップする

ブログを既に運営されている方は、通常の記事に挿入する写真をメディアにアップするのと同じ作業を行います。

ただ、背景にバーンとくる画像ですから、画像サイズは大きくしています。

横幅2400px
高さ1350px

絶対にこのサイズでないとダメということはありません。

およその目安なのですが、画像のアップロードが上手くいかないときは、画像サイズが大きすぎると思って、上の数字に近づけてください。

当然、その分ファイルサイズが大きくなってしまうので、ここは、ガッツリJPEGの圧縮をかけて、ファイルサイズを100kbくらいまで落としています。

サイトのアクセスが伸びないから見て欲しい…という相談もありますが、使用している画像ファイルサイズが大きいものをたくさん使用されている場合があります。
そうなると、ページを読み込むのに時間がかかるために、検索では上位表示されにくくなります。必ず、ガッツリ圧縮してファイルを軽くしましょう。

メディアにアップロードが完了しても挿入などは行いません

もとの編集画面に戻ります。

背景になる画像を設置する

OLちゃん
OLちゃん

えぇーーまたCSSを使うの?

しぶやん
しぶやん

とは言っても、コピペするだけだから頑張ろう!

業者にお願いしたら、2万円程の請求だったって知人が言ってたよ。

2万円得すると思って頑張ってね。

CSSについて、理解していなくてもこの作業はできますが、CSSって何をするの?と思った方はこちらの記事を参照してください。

アニメーションCSSボタンを2分で量産する方法!
アニメーションCSSボタンを作るメリットは、CSSが分からなくても簡単に作成できることと、量産が簡単にできるということです。なぜ、量産が簡単にできるのか?その理由と方法を紹介します。

では、実際の作業に入っていきましょう。

次のCSSを丸ごとコピーする

body {
    background:url(*******************);
    background-repeat: no-repeat;
background-size:100% auto;
background-attachment: fixed;
background-position: right bottom
}
#main {
	background: #ffff;
}


.page .sns-share {
    display: none;
}

*****の部分にはあとでURLを貼り付けます。

今はこのままコピーしておきます。

記事下のカスタムCSSの欄にペーストする

カスタムCSSは、ブログ記事の下にあります。

コピーしたCSSを貼り付けるとこの様な形になります。

背景にしたい画像のURLを調べる

先に、メディアにアップロードした画像のURLを調べます。

メディアライブラリー該当の写真をクリックします。

画像のURLをコピーして、CSSの*****の部分に貼り付けると、次のようになります。

これで、作業は完了いたしました。

忘れずに更新、または、保存ボタンを押して、プレビューで確認してみましょう。

OLちゃん
OLちゃん

と、いうことは、背景にする画像っていろいろ好きな画像にしていいのね。

背景の画像をいくつか変更して遊んでみました

ここまでの作業が完了していると、背景の画像を変更するのは、とても簡単です。

手順は次の通りです。

  1. メディアに背景にしたい画像をアップする。
  2. 背景にしたい画像のURLを調べる。
  3. background:url(*******************); にアドレスを貼り付ける。

と、いうことで少し遊んでみました。

こんな感じです。

まぁ、上手に利用すれば、いい感じのページになると思います。

いいページができた!っていう方は、ぜひ、お知らせください。

スポンサーリンク
スポンサーリンク
Blogは資産
PTR Poor To Rich

コメント