スポンサーリンク

ワードプレス制作

bouquetduchocolat
北海道札幌市にて記念日やお子様のアニバーサリーをカタチにするお手伝いをしています。小さなおててやあんよ初めてカットしたふわっふわの髪の毛今しかないこの時をカタチに残しておきませんか?結婚祝い、出産祝いなど予算別ギフトのご提案もしております。
ジョンジーのカラーセラピーのお時間ですよ |

参考サイト

星澤幸子オフィシャルサイト
我がホームページは「食」を通じて皆さんとの輪を広げ健康で幸せな心持ちで過ごせたらとの思いで作らせていただきました。
レシピ | フードディレクター料理研究家 Shima | 福岡県
福岡在住 フードティレクター・料理研究家 SHIMA (藤本志麻) レシピ開発、レシピ監修、簡単時短レシピ、アレンジレシピ、アウトドア料理、アウトドアレシピ、キャンプ飯、キャンプご飯、フードコーディネーター、フードスタイリスト、料理家、メディア出演、レシピ掲載多数、メニュー監修、料理撮影、コンテンツ写真撮影、料理動画、...
料理研究家 フードスタイリスト フードコーディネーター 宮沢史絵オフィシャルサイト 
料理家/フードコーディネーター/フードスタイリスト 宮沢史絵のオフィシャルサイトです。『おしゃれに楽しむ時間・お料理・暮らし』をコンセプトに、女性がわくわくするような見た目にも美味しいお料理とテーブルコーディネートをご提案しています。記念日ごはん・おうちごはん・おもてなし料理を、簡単レシピ&amp

SWELLで設定するときはこちら

ConohaWing契約&ワードプレスインストールした状態。

一番最初のページはこちら。

①テーマをインストール

②プラグインをいれる

フロントページの作成

ヘッダー

プラグイン

cocoon child

サイトの土台作り

cocoonテーマインストール

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

ここからダウンロード。cocoonとcocoon child。

 

テーマをcocoonにした最初の画面はこちら。

SSL化

ConohaWingは最初からSSL化されている。

※レンタルサーバーによって違う。mixhostは自分でやらないといけなかった。

プラグイン

EWWW Image Optimizer

Advanced Editor Tools (旧名 TinyMCE Advanced)

Contact Form 7

LIQUID SPEECH BALLOON

Site Kit by Google

WordPress Popular Posts

BackWPup

Aurora Heatmap

使い方は

BackWPUpで確実にWordPressのバックアップを取る方法

バックアップの設定はした方が良い!

見た目を整える①

スキン設定

ヘッダー画像設定

cocoon設定→ヘッダー

ヘッダーを画像ではなく背景として使う場合はこちら

ヘッダー画像とロゴ/キャッチフレーズを設定する
テーマとしてCocoonを使用している場合、トップページのヘッダー部分に背景画像を表示させることができます。また画像の上に表示されるロゴの文字色を変更したり、キャッチフレーズを表示するように設定することもできます。ここではWordPressのテーマとしてCocoonを使用している場合にトップページへヘッダー画像を表示す...

スキン・ヘッダーを設定した画像がこちら。

ホームイメージを設定(OGP)

サイトのホームイメージを変更する方法(Twitter・Facebook共有時のデフォルト画像設定)
SNSでサイトのトップページが共有されたときにシェア画像として利用されるホームイメージの設定方法です。

cocoonでは、フロントに設定した固定ページのアイキャッチ。

SWELLの場合

【SWELL】TWitterカードで画像付きツイート!OGP設定 | tomotomo-life
TWitterでブログの記事を投稿した時はアイキャッチ画像が表示されるんだけど、サイトアドレスを貼り付けた時はトップページのイメージ画像が表示されないんだけどなぜ? 私なんかTWitterでブログ記事を投稿してもアイキャッチ画像さえも出てく

サイトアイコン

サイト一般設定

ブログタイトル/キャッチフレーズ

サイトアイコンの設定

[Cocoon] ファビコンとプロフィール設定を画像つきで
プロフィールとファビコンの設定方法です。ぐっと自分らしさがでます♪。

 

Google検索結果一覧画面

フッター作成/必要最低限の固定ページ

お問合わせフォーム

プライバシーポリシー

プロフィール

contact form 7使い方

【完全版】Contact Form 7の基本と使い方まとめ|WordPressに問い合わせフォームを設置しよう | formLab
初心者でも簡単に問い合わせフォームを追加できるWordPressのプラグイン「Contact Form 7(コンタクトフォーム7)」について解説。使い方だけでなく、問い合わせの増加につながるカスタマイズ方法なども紹介しているので、ぜひ参考にしてください。

上記3つの固定ページをフッターに設定する。

【Cocoon】フッターメニュー/各種ボタン設定とカスタマイズ
WordPress/Cocoonを使ったブログでの各種細かい装飾をカスタマイズしていきます。コピペでOKなので「初心者だけどブログをおしゃれにしたい!」という方にもおすすめです。モバイル表示にも対応しています。

サイトの信頼性と関係し、SEO対策にもなると言われている。

グローバルメニュー作成

カテゴリー設定

すでにアメブロやはてなブログなどで記事をお持ちの方は、先にカテゴリー分けを作っておくと全体像が見えやすくなる。

ヘッダーメニューにカテゴリーを設定

 

ヘッダー・フッター・メニューをつけた状態がこちら。

フッターモバイルボタン

フッターモバイルボタンの設定方法
スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。

ヘッダーモバイルボタン

ヘッダーモバイルボタンの設定方法
スマホ画面でヘッダーに操作ボタンを表示させる設定方法です。

サイドバーの設定

メタ情報

を削除する

メタ情報削除

WordPress・Cocoon メタ情報を非表示にする理由と設定
WordPressのCocoonなどでメタ情報を非表示にする理由を知りたいですか?本記事ではメタ情報が表示されている問題点、メタ情報を非表示にする設定を詳しく案内しています。デザインやセキュリティに悩む方はこの記事が参考になります。

ウィジェットを設定

[Cocoon] サイドバーの内容を決める・設定方法
サイドバーに「新着記事」などを表示させる方法、「メタ情報」などを非表示にする方法をまとめました。メタ情報の意味も説明しています。

ウィジェットには必要な情報だけを出す。

プロフィール/サイドバー・本文下

パーマリンクの設定

CocoonのおすすめのWordPressパーマリンク設定
サイト運営をする上で後々手間のかからないし、おすすめのパーマリンク設定です。

 

ここまで設定すると、今こんな感じ。

ヘッダーをもともとアメブロで使っていた画像を使い、記事ももうちょっと追加。

記事が溜まってきたら、フロントページを作ります。

フロントページ

【Cocoon】簡単!サイト型トップページの作り方(図解付き)
今回は、ワードプレステーマ「Cocoon」でサイト型トップページを作るやり方について解説していきます。サイト型トップページは、好きな記事やお知らせを表示させたカスタマイズ型トップページのことです。トップページはサイトのイメージを決める大事な顔の部分。見せたい記事がある場合には、今回ご紹介する方法でサイト型トップページを...

固定ページのタイトルを削除する。

入れたい文章をいれる。

カテゴリー分けされた記事を出す。

ショートコードをいれてカテゴリーごとの表示に。

cssで記事表示を2つにする。

など、フロントページの作成はいろいろ。

タイトルを削除するカスタムcss

.entry-title {
display: none;
}
.article-header > .eye-catch-wrap {
display: none !important;
}

.article-header h1,
header.article-header.entry-header,
.eye-catch,
header .article-header,
.date-tags {
position: static;
}

cocoonの吹き出し設定

フロントページを整える

これが、cocoonで制作したページ。

 

SWELLへ移行

CocoonからSWELLへの移行手順を解説【テーマ切り替えの注意事項有り】 | SWELLマニア
CocoonからSWELLにテーマを切り替える方法を知りたい簡単な移行方法ってあるの?SWELLへの移行経験者に話をききたいな。 そんな悩みを解決します。 私は複数ブログを運営しています。Cocoon、アフィンガー5、ストーク、ハミングバー

※最初からSWELLをいれておくべき。

 問い合わせフォーム/Googleフォーム

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