椋 寛之 2017年10月15日、ものくろキャンプ WordPressブログ デザインパワーアップ ワークショップを受講しました。
このワークショップを受けようと思った理由は、
グローバルメニューのデザインを変更したい、本文見出しの枠や背景を変更したい、GoogleAdSenseを適切な位置に貼りたい、そもそもCSSとは何かを知りたい、などです。
とにかく、ブログのデザインに関するもやもやを何とかしたくて参加しました。
結果としては、下記のことが1日で実現できました。
1.ブログデザインの変更のやり方がわかった
2.テーマの変更ができた
3.CSSが理解できた
4.CSSがいじれるようになれた
5.効果的なリンクの作成の方法、Markdown記法、アイキャッチを文字だけにする方法など、様々な技を習得できた
元々用意されていた内容に加えて、参加者の個別の課題を解決していただけて、満足度の高いワークショップでした。
そしてもっとたくさん記事を書きたいというモチベーションが沸きました。
今回習得できた内容と、これから取り組んでいきたいことを3つずつ書いてみたいと思います。
｢ものくろキャンプ WordPressブログ デザインパワーアップ ワークショップ｣ 習得できた内容
CSSとは何か、なぜHTMLと別に存在しているのか
CSSとはコンピュータ言語の一つです。
HTMLと組み合わせてWebのデザインを指定します。
僕は、今までHTMLでも文字の大きさや位置を決めていると思っていましたが、最新のHTMLではデザインに関するすべての要素はCSSで指定するようになっているそうです。
デザインの指定がHTMLから分かれた理由は、CSSを書き換えれば、すべての記事のデザインが一発で切り替わるメリットがあるからです。
HTMLでデザインを指定してしまうと、毎記事ごとのHTMLを書き換えなければなりません。
CSSのいじり方
ブラウザのGoogle Chromeを使用します。
CSSを確認したいページ上で右クリックして｢検証｣というメニューをクリックします。
そうすると該当のHTMLとCSSを同時に確認することができます。
自分のブログデザインを変更したいときは、同様に自分のブログのページ上で検証メニューでHTMLとCSSを表示させます。
該当のCSSの文字の大きさや、マージンの幅などを変更すると、その場でデザインが変わったことを確認できます。
chrome上での編集は、閉じてしまえばCSS書き換わることはないので安心していじれます。
もし、ブログデザインを書き換えたいときは、chrome上でいじった後のCSSをコピーして、WordPress管理画面のCSS記載欄に貼り付けます。
WordPress管理画面のCSS記載欄には、新たなCSSをどんどん下に追加していくことができます。
あとでわかるように、どの部分を指定しているのかという目印CSSの書き始めと書き終わりに記載しておくことが重要です。
テーマの変更
以前しようしていたテーマでいくつか変えたいところがありましたが、CSSだけでは直せないこともわかり、この機会にテーマを変えることにしました。
テーマ変更は始めての経験で不安があったのですが、簡単にできました。
テーマはものくろさんがおススメする｢SNOW MONKEY｣です。
Snow Monkey – 100%GPL のメディア/ブログ向け WordPress 有料テーマ
ものくろさんのブログのようなシンプルなデザインにしたいと思っていた矢先だったので、グッドタイミングでした。
ブログの外観（テーマ）を「Snow Monkey」に変更し、記事ページをシングルカラムレイアウトにしました – ものくろぼっくす
｢ものくろキャンプ WordPressブログ デザインパワーアップ ワークショップ｣ 今後取り組んでいきたいこと
新しいテーマ SNOW MONKEYのマニュアルと管理画面を把握する
テーマを変更したばかりなので、SNOW MONKEYで何ができるかを、管理画面上で確認していきたいと思います。
少しずつではありますが、外観もカスタマイズをしています。
文字のアイキャッチ画像で投稿してみる
本記事は文字だけのアイキャッチです。
Keynoteで作りました。iPhoneのメモ帳でも簡単に作れることをものくろさんから教わりました。
写真がないという理由だけで投稿しないのは大変もったいない、とものくろさんが言われて、その通りだと思いました。
これで記事投稿のハードルが一つなくなりました。
いいと思ったデザインやレイアウトは自分でもすぐに試してみる
今回のワークショップでCSSの確認の仕方や、文字のカラーの確認の仕方も学びました。
せっかく学んだ知識を忘れないように、いいと思ったデザインは、すぐに取り入れるようにしていきたいと思います。
ものくろキャンプ WordPressブログ デザインパワーアップ ワークショップ まとめ
ブログデザインが自分の好みのものになったことで、記事を書くモチベーションすごく高まりました。
また、ブログデザインはそのときの気分や、はやりすたりによって、常に変更をしたくなるものだと思います。
CSSを学んだおかげで、いつでも変更できるという気持ちの余裕を持つことができました。
今後も取り入れたいと思ったデザインが見つかったら、すぐにCSSをいじって自分のブログに取り入れるようにしていきたいと思います。
CSSだけでなく、ブログに関わる様々な技を学んだり、ランチタイムでは時間管理の方法をものくろさんから聞いたりと、とても密度の濃い、有意義な1日でした。