「のんくら本の実践記とCSSカスタマイズ(素人向け)

のんくら本を手に取ったのが、12月1日。
ブログ歴8か月位、ちょうど100記事を書き終えた頃でした。

いくつかブログに関連する書籍は読んだものの、実践的な教科書のような書籍には出会っておらず、情報収集は主にツイッターで行っていました。

のんくら本を読んで、印象的だったのは、実践的な内容が書かれていることです。どうやってサイトを作るか、アドセンスで結果を出すか、SEOに取り組むかなど、「HOW」が書かれていました。

また、主題となるテーマを表現する手段は、ブログ以外にもいろいろあるということ。フロー・ストック情報など、情報の整理の仕方なども、具体的に書かれています。

せっかく本を読んだのに、実践しないと意味がないと思い、約3か月ほどで、2つのサイトを作成(一つは作成途中)しました。

のんくら本に出会ってから、実際にサイトを作った感想、見やすいレイアウトにするためのカスタマイズの方法(素人向け)などについて、以下で説明しています。

尚、html,cssに関して、体系だった知識がないため、不足な点はあるかと思いますが、ご容赦いただければ幸いです。

また、ブログについては、ミニサイトを作ってみて、改めてブログの良さに気づいたので、ミニサイトの中でブログ型も取り入れています。

のんくら本を購入したきっかけ

のんくら本の存在を知ったきっかけは、フォローしていたアフィリエイターの方が、のんくら本についてツイートをしていたのがきっかけです。

それから本を購入し、手に取ったのが2018年12月1日。ちょうど、観光に特化したブログを100記事書き終えた時でした。

それまでブログなどに関連する書籍などはいくつか読んだものの、教科書になるような体系的な書籍に出会っておらず、情報収集はもっぱらツイッターで行っていました。

当時「初心者は、とりあえず100記事書く」ということを、一部の有名なアフィリエイターやブロガーの方が発信していました。
私もそういう情報を元に、まずは100記事書こうと思い、毎日3,000字位の記事を書いていました。

この先、どうするのか、毎日ずっと書き続けるのか、などについて明確な考えはなく、方向性についても特に定まっていませんでした。

そんな中、出会ったのがのんくら本です。

のんくら本を読んで気づいたこと

のんくら本は、3回読みました。
本を読んで、まず思ったのは、今さらですが、ブログだけでなく、色々な形式があるのだなということです。
具体的には、下記のようなことです。

  • サイトの構造:ハイブリッド型・階層型・WEB型・直線型
  • 情報の表現の仕方:ブログ型・完結型・ツール型など
  • 情報の性質:フロー情報(時間の経過とともに価値が上下する)・ストック情報(時間の経過に左右されない)
  • 情報の分類:1次情報(取材情報など)や2次情報(書籍の情報など)

表現の仕方が、ブログ以外にも色々あるということ。テーマや自分が書きたい内容によって、うまくチョイスすればいいんだなと思いました。

元来、飽きっぽい性格の自分には、ずっと毎日ブログを書き続けるのは厳しいのではないかと思っていました。
でも、完結型のサイトであれば、30記事、50記事でもいい。終わりがあるサイトも作れるということに、ちょっと安心しました。

経験が浅い自分には、のんくら本だけでは、理解できない部分があって、ミニサイト本(※1)、オーソリティ本(※2)をそれぞれ2回ほど読みました。

さらに、書籍に掲載されていたのんくらさん、a-kiさん、和田さんの公開サイトを見たり、また、のんくらさん、a-kiさん、和田さんのツイートで、情報収集をしました。

※1「ミニサイトをつくって儲ける法」、和田 亜希子(著)、日本実業出版社 (2016/9/29)
※2:「情報サイトでオーソリティーを目指そう!: 10年先も生き残る安定志向のサイト構築論 Kindle版」、a-ki(著)

のんくら本を読んで実践したこと

本を読んでも実践しないと意味がないと思ったので、いくつか小規模なミニサイトを作ろうと思いました。
作ろうと思った理由は、下記3点です。

  • 構造化したサイトを作ったら、ビッグキーワードが上位に上がるのか試したい(ブログでは、ロングテールキーワードは10位以内に入るが、ビッグワードは順位すら付かない)
  • ブログに書いている内容を、ミニサイトに転用できる。
  • なんだかんだ言っても、飽きっぽいので、1回1回終わりがあるサイトを作りたいと思った。

実際に作ったサイト(一つは途中)は下記2つです。

  • 「はじめての兼六園」
    作成期間:45日 記事数:123記事
    https://kenrokuen.org
  • 「ひがし茶屋街」
    作成期間:35日(完成予定:3月7日) 記事数:約40記事
    https://higashichaya.org

実践してみた感想

一番大変だったのは、目次を作ることです。

自分は、これまでワードプレスのテンプレートのテーマをそのまま利用して、ブログなどを書いてきました。

しかし、ワードプレスの30個くらいのテーマを試した結果、テンプレートをそのまま利用して、分かりやすい目次を作ることは無理という結論に達しました。

どうしても、CSSカスタマイズが必要になるのです。html,cssなどの知識がない自分は、かなり苦戦しました。現在も苦戦しています。

のんくら本が役に立っていると感じる点はたくさんありますが、代表的なものは下記についてです。

企画段階

  • テーマの選び方
  • 良質なコンテンツ(情報の信憑性、信用性、専門性を高める)
  • コンセプトや構造で勝負する
  • ブログ型、完結型、ツール型

作成段階

  • 目次の役割
  • サイトデザイン
  • キーワード整理のルール
  • 1次情報と2次情報
  • フロー情報とストック情報

公開後(考え方など)

  • 一喜一憂する自分への対応
  • 躓きそうになった時の対処法

のんくら本やミニサイト本に書いてある公開サイトは、目次を作るとき・サイトを作っているとき、いつも参考にしています。

あと、フロー情報・ストック情報、1次情報・2次情報という考えかたは、情報を整理するときに、ものすごく役に立ちます。

アクセスについて気になる方がいると思うので、念のため書くと、正直、まだよく分かりません。

アクセスが伸びてくるのは、6か月以上先だと思いますし、まだ2つしか作ってないですから。
それに、正直自分はあまりセンスがないと思っているので、10サイト作ったら、うまく行くのは、1つか2つかなと考えています。

CSSのカスタマイズについて(初心者向け)

自分のようにhtml,cssなどの知識がない人が、ミニサイトなどの、ブログ以外のサイトを、ワードプレスで作るときに、躓くのがCSSのカスタマイズです。

自分はサイトを作り始めて、3か月の初心者ですが、約1ヵ月(作業の1/3)は、カスタマイズに時間がかかっています。

具体的には、目次ページやサイト全体のレイアウトです。

自分は、30種類くらいのテーマを試してみて、一番しっくりきたテーマが、lightning(無料テーマ)です。

以下、lightningを前提に、目次の設定、CSSカスタマイズについて説明したいと思います。

前提・注意事項などについて

前提として、html,cssの全く知識がない自分が、本やネットなどで調べながら、トライアンドエラーで行った経験をもとに書いているので、情報が不足していることがあります。

  • テーマは、lightningを使用しています。
  • サーバーは、Xserverを使用しています(ヘッダー機能を追加するときに、phpを触るのですが、ファイル操作の画面がXserverになっています)。

目次ページの作成と公開

目次ページの作成と公開

まず、目次にしたい固定ページを作成し、公開します。
※下書きのままだと、目次ページをホームページに設定するときに、一覧に表示されません。

目次ページをホームページに設定

固定ページの設定

左のバーの設定-表示設定を選択し、ホームページの表示で固定ページにチェックを入れます。
目次ページにしたい固定ページを選択し、変更を保存します。

CSSカスタマイズについて

カスタマイズ前(Before)

現状の目次ページ

Before
目次となるページを作っただけでは、上記のようにレイアウトが悪すぎて、目次の体裁をなしていません。
目次としての体裁を保つためには、CSSのカスタマイズが必要になります。

カスタマイズ後(After)

cssカスタマイズ後の目次ページ

After
CSSのカスタマイズを行った後の目次ページが下記です。
すごく見やすいという訳ではないですが、一応は目次の体裁を保っています。

子テーマについて

CSSのカスタマイズは、子テーマで行います。
理由は簡単で、親テーマ上でカスタマイズを行うと、バージョンアップなどがあった際に、追加したCSSカスタマイズが全部消えてしまうからです。
子テーマの仕組みについては、下記別ページに記載しています。
子テーマの仕組み

子テーマのインストール

子テーマのインストールは、外観-テーマから、子テーマを新規で追加し、アップロードを行います。
子テーマのインストール方法については、下記別ページに記載しています。
子テーマのインストール方法

ヘッダーの挿入

lightningの基本機能では、ヘッダー画像を挿入する機能がありません。
ヘッダー画像を入れる場合は、ヘッダー画像を挿入する設定が必要です。
ヘッダーを挿入する方法については、下記別ページに記載しています。
ヘッダーの追加方法

グーグルの検証モード(デベロッパーツール)

あとは、空白を消したり、文字の色を変えたり、線の色を変えたりするのですが、素人は、グーグルの検証モード(デベロッパーツール)を使用すれば、簡単に変更できます。

検証モードを使用しながら、ヘッダー(h1)部分「ひがし茶屋街」の文字の色・文字のサイズを変えてみます。詳細は、下記別ページに記載しています。
グーグルの検証モード

lightningのCSSカスタマイズ一覧

ここでは、これまで自分がカスタマイズした項目を、一覧で記載します。

h1の文字の装飾
.navbar-brand a {
color: #FF0099; /*h1の文字の色*/
font-size:38px; /*h1の文字の大きさ*/
font-weight:700; /*h1の文字の幅*/
}

h2の装飾

.mainSection-title, h2 {
padding: 14px 15px 10px; /*h2の周りの幅*/
border-top: 2px solid #FF0099; /*h2の上線の大きさと色*/
}

ヘッダー写真周りのサイズ設定
.siteContent {
padding: 0.5em 0 0.5em; /*h2の周りの幅*/
margin-top: 0 !important /*h2の周りの幅*/
}

目次で写真を左詰め横にならべる
.inner{
float:left;
}

フッターの線の色を変える
footer {
border-top: 3px solid #FF0099;
}

フッターの下にあるcopyrightを消す
footer .copySection p:nth-child(2)
display:none !important;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です