カスタマイズ

私のブログデザイン。有料テーマ『JIN』を使った『monecre』のデザイン設定を紹介します

ブログ デザイン

こんにちは。
mone(@mone_creator)です。

どうすれば『monecre』のような見え方になるんですか?

という問い合わせをいただいたので、JINで作ったブログ『monecre』の具体的な設定の紹介をします!!

WordPressテーマ
おすすめのWordPressテーマは『JIN』!! 有料だけど初心者にこそ使って欲しい理由こんにちは。 mone(@mone_creator)です。 初めに言っておきます。 これはどういう事かというと、 ...

この記事はこんな人にオススメ

  • 有料テーマ『JIN』を使っている人
  • 見え方が気になる人
  • 『monecre』を好きだと言ってくれる人

私のブログデザイン

まずは『monecre』の全体像です。
かなり画面を占拠しますが見てみてください。

ブログデザイン

1年たってこの形に落ち着いています。

『monecre』の形

  • スライダーがある(JINの機能ではピックアップコンテンツ)
  • 1カラム(トップページにサイドバーがない形)
  • フッターは3カラム
  • フッターに紹介したいバナーをPICK UPでのせる

前提条件に、私はHTMLやCSSの知識がないので、安心してください!!
JINを導入している人であれば、簡単にこの形になります

ブログデザインの細かな設定

ブログデザイン『JIN』の嬉しいところはボタン1つで設定ができるところ。

私が主にイジったのは、ダッシュボードの『外観→カスタマイズ』から設定ができる『サイトデザイン設定』と『トップページ設定』です。

mone
mone
JIN制作者の皆さん。
本当にありがとうございます。

それでは早速私の設定を紹介していきます。

サイトデザイン設定

サイトデザイン設定では、サイト全体の見え方を中心にカスタマイズできます。
私の設定をまとめました。

サイトデザイン設定

  • ヘッダーデザインの選択
  • グローバルメニューのデザイン選択

トップページ設定

トップページ設定では、トップページの見え方を中心にカスタマイズできます。ブログデザイン

トップページ設定

  • ピックアップコンテンツのタイプ選択メニュータイプ
  • トップページの記事一覧に表示させるカテゴリーID

※ピックアップコンテンツは別途メニュー設定が必要です!!
設定方法は、JIN公式の『ピックアップコンテンツの作り方』を読んでみてください。

フッターの設定

フッターの設定は『外観→ウィジェット』で行います。ブログデザインフッター左は、自分でバナーを作り画像それぞれにURLをリンクさせています。
フッター中央は『カテゴリー』と『タグクラウド』を。
フッター右は『Twitterのタイムライン』と『検索』を入れています。

ウィジェットの設定

JINでは『ピックアップ記事』としてデフォルトでスライダーが設定できます。

私がこのピックアップを使わずにスライダーのプラグインを使って追加したかというと、デザインで個性を出したかったからです。

なので、完全なるこだわりなので、デザインよくわからない!!という人は『ピックアップ記事』を利用してください。

ブログデザイン『トップページ上部』の設定はウィジェットで行えます。
私のスライダーは『Smart Slider 3』というプラグインを使っています。

プラグインを用いてスライダーを作り、ショートコードを挿入しています。
そして、その下の丸いアイコンのようなものは、自分で画像を作り3カラムを使用して配置しているだけです。

さいごに

形の設定はこれでできます!!
形に関しては、『HTML』や『CSS』は一切使っていません。

気になっていた方はぜひ試してみてください。

ブログデザイン
ブログデザインの記事まとめ|見た目を変えてブログを自分好みにカスタマイズ!!こんにちは。 mone(@mone_creator)です。 この記事は、ブログを自分好みにしていくために、私自身...

– fin –

ABOUT ME
mone
mone
コンセプトデザイナー|イラストレーター|マーケター|ブロガー 大切な人とのすれ違い生活を解消するためフリーランスに。フリーランス生活2年目になりました。 NikonとFUJIFILM X-T20愛用
LINE@への登録はコチラ

LINE@では
耳寄り情報や友達限定のお得情報も発信していきます

LINE@LINE@で友達追加

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください