ブログ勉強会2月11日の内容『Cocoon全体設定』『カラム』等

2月11日のブログ勉強会は、前回の復習から発展させました。

前回の記事はこちらです

Cocoonの文字の全体設定

前回やったCocoonの文字の大きさ・太さの一括変更の方法を復習しました。

WordpressテーマCocoonで文字の太さを変更する方法
無料のWordpressテーマCocoonはとても高機能なテーマですが、文字が細いというご意見を頂きました。Cocoonの字が細いCocoonテーマは使いやすいんだけど、字が細いんだよねぇ・・・。サエコ...

スマートフォンでの文字サイズ

モバイル(スマートフォン)での文字サイズは『モバイルサイトフォント』の部分で変更できます。

スマートフォンでの表示確認(Cocoonテーマのみ)

ブログ本番画面(管理画面ではなく、一般の人が見に来る方の画面)の下のほうに、ログインしている場合はレスポンシブテストというリンクが表示されます。

こちらをクリックすると、スマートフォンやタブレットでの表示イメージを確認できます。

ただし、あくまでもイメージなので、実機とは若干違いが生じる場合もあります。

タブレットでの文字サイズは、PC・モバイルどちらのサイズが適用されるの?

画面の表示幅によって変わりますので、タブレットのサイズや解像度によって異なります。その点はあいまいなのですが、そういうものだと思っていてください。

文字フォントの変更

さらに発展して、文字のフォントを変更する方法も学びました

フォントとは:字体、文字のデザインのことです。

Cocoon設定→全体→サイトフォントの部分にある、フォントという部分のドロップダウンをいろいろ変えて保存してみましょう。

フォントデザインが変わると、がらっと雰囲気が変わると思います。

フォントのサンプルはこちら↓に掲載してみました。

WordpressテーマCocoon設定フォントのサンプル
Wordpressの無料テーマ、Cocoonに付属している文字フォントのサンプルです。画像ですので、実際の画面とは表示が異なります。画像では若干ぼやけたように見えると思います。また、フォントはお使いのパソコン環境などによっ...

WordPress以外のブログ、Cocoon以外のテーマでフォント設定を一括で変えるには?

CSSの編集部分をいじって変更することが可能です。少し高度な内容になりますので、ご希望のかたはお知らせください。(受講者さまのみ)

FC2でのCSS設定画面

見出しと目次の作り方

こちらも改めて練習しました。

Wordpress投稿での目次の作り方(Cocoonを使用して自動で)
記事内の目次をどうやって作っているの?というご質問をいただきましたので、お答えいたします。Wordpressの記事に目次を入れるにはどうしたらいいの?Wordpress記事内の目次とは?↓このようなものの事です...

目次や見出しのデザインが違うのはなぜ?

Cocoonのスキンによって、目次や見出しのデザインが異なります。

すっきりさせたい場合はスキンを『なし』にすると、最初のデザインに戻ります。

デフォルトスキン:シンプルな目次と見出しデザインの例

Bizarre-foodピンクワイン:デザインされたスキンを適用した例

カラム

カラムについてご質問がありましたので少しだけ触れました。

画像や文字を雑誌のレイアウトのように配置する場合『カラム』ブロックを使うと比較的簡単にできます。

カラムの編集画面

カラムは選択にちょっとコツがいるのですが、慣れればできるようになります!

カラムの”列”を選択すると、横幅を自由に変えることもできます。

管理画面右側の『ブロック』編集部分

自由な発想でレイアウトを組み立ててみると楽しいですね!

カラムできちんと配置した場合、スマートフォンで見ると自動的に見やすいレイアウトに変えてくれます。(レスポンシブといいます)

今回のまとめ

Cocoon独自の設定方法と目次・見出しの作り方をおさらいしました。

本来は、CSSを使って複雑なことをしないといけない設定を、Cocoonなら簡単なメニュー操作で実現できることがお分かりいただけたかと思います。

また、カラムについて少し触れましたが、次回以降、復習いたしますね。

次回の予定

さらに、Wordpressブロック、Cocoonブロックについてがメインの予定です。

Wordpressブロックエディタの標準ブロックのサンプル全一覧
Wordpressは標準でもたくさんのブロックが使えるようになっています。ひとつひとつ見ていきましょう。一般ブロック段落通常の文章を入力するブロックです。見出し見出しを入力す...
Cocoonブロックのサンプル全一覧
無料テーマCocoon(コクーン)には、Wordpressのブロックエディタに対応した多彩なブロックが用意されています。どんなブロックがあるか、一覧にしてみました。Cocoonブロック吹き出し山田太郎右側...

今回少しやったカラムについても、おさらいしましょう。

また、ご質問のあったヘッダーの設定・ロゴについてもできればと思います。

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