【Cocoon イノセンス】サイト型トップページの作り方

ブログ運営

こんにちは、もす(@takamos_couple)です!

最近ブログデザインをいじくったので備忘録としてまとめます。

基本スペック

当ブログのスペック
  • サーバー:ConoHaサーバー
  • ドメイン:同上
  • テーマ:Cocoon
  • スキン:イノセンス

基本的なブログデザインのコンセプトは「シック・シンプル・だけどカワイイ」です。

キャッチフレーズにある通り私たちは理系大学院生×ミニマリスト×カップルというコンセプトでブログ運営しているので必然的にデザインコンセプトも決まりました。

ブログデザイン

サイト全体

背景を真っ白(#fff)から薄いグレー(#f5f5f5)に変更しました。追加CSS使用。

リンク先の文字色も青色から茶色(カラーパレットより適当に)に変更しました。

ヘッダー

ヘッダーの設定・デザイン詳しく
  • センターロゴ(トップメニュー)
  • メニューの横のアイコンはFont-Awesomeから拝借
  • ロゴ画像サイズ:1260×300 (px)
  • ロゴ元画像サイズは2倍
  • たかもす(人物)とかものイラストは自作
  • ロゴ全体はCanvaで無料の素材を使って作成
  • ロゴフォント:せのびゴシックBold

おすすめカード

おすすめカード詳しく
  • 主要カテゴリ「ミニマリズム」「大学生」「カップル」「ブログ運営」のリンク
  • 表示設定は画像のみ・余白あり
  • 画像サイズ:320×80 (px)
  • 元サイズは6倍
  • 画像はCanvaで無料の素材を使って作成
  • フォント:せのびゴシックBold

インデックス

新着記事カラムはイノセンスのスキン制御で2カラムに固定となっていますが、PHPファイルをいじって3カラムにしました。

外観→テーマエディター→skins→skin-innocence→functions.phpの15行目  ‘vertical_card_2‘を ‘vertical_card_3‘, に変更
もす
もす

PHPいじるときはバックアップ(メモ帳に貼り付けでもOK)忘れずに

またカテゴリのタイトル(新着記事とか)を枠ありに変更する追加CSSは以下の通りです。

.list-title-in{
display: inline-block;/*表示形式*/
padding: 0.3em 2em;/*文字の上下左右の余白*/
font-size: 18px;/*文字の大きさ*/
background: #fff;/*ボタン色*/
color: #696969;/*文字色*/
border-bottom: 4px solid;
border-color: #a9a9a9;

}

.list-title-in:before, .list-title-in:after {
display: none;
}

参考にしたサイト

カスタマイズやサイトデザインを考えるにあたりSayu(@uloveenglish)さんのサイトを参考にさせていただきました。

もす
もす

ありがとうございました!!

画像作成

画像編集

ロゴ・アイキャッチはCanva を使って作成しています。

今でも記事の中で使う画像はiphoneで撮影した写真をpowerpointで加工してjpeg保存することが多いです!

タイトルロゴ・アイキャッチのフォントは「せのびゴシック Bold」で、記事の中で使う画像の文字は「やさしさゴシック」を愛用しています。

自作イラスト編集

アイコンやロゴに使用するイラストはもすが描いてます。色塗りなどの編集はアイビスペイント無料版を使っています。

アイコンできるまで
  • 白い紙にボールペンで描く
  • iphoneで撮影
  • アイビスペイントで画像読み込み・線画抽出
  • スタイラスペンを使ってiphoneで色塗り

スタイラスペンは楽天で購入したこちらを愛用中!

まとめ

無料テーマのCocoonとスキンのイノセンスをベースに、サイト型のトップページを作ってみました。個人的には背景を薄いグレーにするだけでこなれ感が出て気に入っています。

また随時更新していきますのでぜひチェックしてみてください。




にほんブログ村 にほんブログ村へ

この記事を書いた人

理系大学院生×ミニマリスト×カップル
同じ大学院の研究室でまいにち実験
一人暮らし/読書/散歩
筋トレ/ランニング
コーヒー/喫茶店

たかもすをフォローする
ブログ運営
スポンサーリンク
たかもすブログ

コメント

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