転職を控えた31歳の子持ち、超初心者ブロガーがHTMLを勉強せずにコピペ24hで、どこまでできるかやってみた
スポンサーリンク
（過去に投稿した記事をわかりやすくしました、内容的なところはいじってません）
ブログ歴2週間のめんおうです。
ブログ歴2週間で、しかも、Web、プログラミング、通信機器に関する知識はほぼゼロでしたが、ひとつ夢見る少年（おっさん）のごとく思っていることがありました。
おらも、有名ブロガーみたいにかっこえーページを作ってみてーんだぁ（孫悟空風）
ということでした。
でも、大変そうだ、難しいんだろうな・・・
と思いましたが、そこで思いついたことがありました。
（おれは、天才ブロガーかもしれない、とよぎった瞬間でした）
転職を控えた31歳の子持ち、超初心者ブロガーが、HTMLを1週間勉強してカスタマイズをどこまでできるかやってみた
ってのを記事にしたら、おもしろいんじゃないか？
そして、これからブログを始めていこうという、自分のような人たちの参考にもなるんじゃないか？
と。
そんな天才（だと思っていた）わたしは、さっそく、HTMLを勉強するのにいい本をネットで検索しました。
すると、出てきたのは
１か月でマスターできる本、とか、HTML必要なしコピペ一瞬でカスタマイズできる記事
などでした。
その検索結果を目にして一瞬で、
おれには無理だ
と悟りました。
やりたいことは、ページをかっこよく、見る人が使いやすくすること、でしたので自分でHTMLなどを一から勉強する必要はあまりないわけです（かなりひどい言い訳）。
なので、早々にテーマを変更し、本記事の表題のように
転職を控えた31歳の子持ち、超初心者ブロガーがHTMLを勉強せずにコピペ24hで、どこまでできるかやってみた
というものにしました。
もしよければ、ぜひ参考にしてみてください。
では、いきましょう。
ルール
ルールは超簡単です。
HTMLの勉強をしないことと本当に制限時間は24hでやることです。
カスタマイズはやっていると楽しくて時間を忘れてしまうこともしばしばですが、時間を計って（3日間くらいにわけて）やりました。
仕事や引っ越し、子供の相手などありましたが、なんとか時間を作って（超夜更かし）やってみました。
自分が24hでやったこと
24hあれば、結構なことができたと自画自賛しています（うざい？）。できたことは以下の通りです。
①読者になるボタンの増加配置
②かっこいいシェアボタンの配置
③かっこいい記事タイトルの設定
④わかりやすい目次の設定
⑤グローバルメニューの配置
⑥かっこいい見出しの設定
⑦ラインマーカー設定
⑧パンくずリストの設置
⑨かっこいいプロフィールの設定
⑩トップに戻るボタンの設置
⑪ブログテーマをよく考えて決定
⑫携帯の便利なメニュー画面の設定
以上です。
参考記事の指示どおりコピペしても一回でうまくいかないことも多々ありました（ただ自分が無知なだけ。人のせいにするなんて最低だよ君は）が、24hでこれだけのことができました。（Proへの登録は必須ですが・・・）
before ＆ after
①～⑫までのbefore ＆ afterについてそれぞれ紹介したいと思います。
もし、この記事を参考にされるなら、その中で使えそうなやつを、下に紹介した記事の中のコードをコピペしてやってください。
この記事は、24hでできたことの紹介と参考記事の紹介までで終わります（力不足でごめんなさい）
①読者になるボタンの増加配置
すみません。これにかんしては、beforeをプリントスクリーンし忘れたので、afterだけです。
写真は記事の上の方のみ映っておりますが、記事の下の方にも同じボタンが設置できております。
②かっこいいシェアボタンの配置
before
これは、はてなで標準装備であり、チェックを入れるだけで使えるんですが、あんまりかっこよくなかったので、下のようにしました。
after
そろっててかこいいですよね。スマホ画面でも同様にできます。スマホの場合はラインを入れることもできます。
③かっこいい記事タイトルの設定
すみません、調子に乗ってちょっとサバ読みました。
実は、③のタイトルについては、いじってみたんですが、ページ全体のバランスを見たときにかっこわるくなったので、無料でインストールできる公開テーマを使わせていただきました。
かっこよくするために必要な基盤的な構成がすべてやってくれてあるものなのでこれをインストールするだけで、ある程度様になると思います。
ちなみに自分は、「Blank」というテーマを使っています。
シンプルで改造しやすいし、かっこいいと思ったからです。自分の好みに合うものを選ぶといいと思います。
④わかりやすい目次の設定
before
after
初期設定では、「目次」というのも入っていなかったと思います。
「目次」という単語を入れたのと、目次に背景色をつけてぱっと見でもわかるようにしました。また、各区分に番号をふるような設定にしました（初期設定は〇や●で表示されるはず）。
⑤グローバルメニューの配置
before
after
これは、超初心者の自分にはちょっと面食らうところもありましたが、失敗せずに一回でできました。
ただ、スマホ画面にこれをやると、できないこともないんですが、存在感がありすぎてあまりかっこよくならなかったので、やめました。
スマホにはあとで紹介する⑫があれば十分だし見栄えもいいと思います。
⑥かっこいい見出しの設定
これも③と同じで公開テーマをインストールすればそれにセットで設定されているはずです。
すべてのバランスを見て、気に入ったテーマをインストールすればいいと思います。
⑦ラインマーカー設定
初期設定ではラインマーカー引けないんですよね。
そこで下の参考記事の指示通りやったらこんなことができるようになりました。
コードの貼り付け等が終わった後の作業の仕方は、打ちこんんだ文字をドラッグしたもの（ラインを引きたい部分を指定）に対して太字に指定するための「B」をクリックするだけです。
ただ、編集画面では太字になったようにしか見えませんが、公開された記事には太字とその下に蛍光ペンで線を引いたような表示が出るようになっています（コードをいじれば、色も選べますよ）。
こんな感じです。
ブログやってますって感じが出ますよね。
⑧パンくずリストの設置
これもbeforeがありません。チェックを入れるだけで簡単につけることができます。こんな感じになり、ページのどの階層にいるのかがすぐわかるようになります。
⑨かっこいいプロフィールの設定
before
after
どうですか。
手書きのへたくそな絵からセンスある写真へ（そう思ってんのはお前だけだよ）。そして、おもしろいのは、プロフィール写真の上にカーソルを合わせると文字が出てくる仕掛けが（しかもクリックするとプロフィール画面にとびます）。（自分の中で満点です。）
ただ、この設定、指示通りやったんですが、うまくいかない箇所があり、3時間くらいの試行錯誤をしたような気がします。。。
でも満足いく形にはなりました。よかったぁ。。。
⑩トップに戻るボタンの設置
下にスクロールすると右下に出てくるように設定しました。このボタンの位置や色などはコードをいじることで調整できます。
なくてもいいですが、あると超便利です。
⑪ブログテーマをよく考えて決定
before
after
ここまでくると自己満の世界？と思いきや、読み手に取って結構大事だということにいろんなブロガーさんの記事を読んでいて思いました。
ここには、なんとなくそのブロガーさんの人柄が出てくるものですし、しっかり考えたものにすることで、自分のブログに対する愛着も湧いてきます。
これからも経験と思いと挑戦。時々本などを紹介していきたいと思いますので、よろしくお願いします（宣伝活動）。
⑫携帯の便利なメニュー画面の設定
これ、見た目も機能も完璧ですよ。マジで（でじま）。
人気記事やカテゴリを指でクリックすると、うにょっと下から新しいウィンドがでてきます。
これひとつで合わせ一本、という感じですね。
これ設定したとき、結構感動しました。
失敗と今後の課題
24hで、上にまとめたように、かなりのことができたんじゃないかな、と思います。
ただ、やってみてわかった失敗などがあるので、これからやるみなさんのために「これだけは」と思うもののみ言っておかせてください。
それは、参考記事の指示通りにやって思ったようにならないとき、物足りないときにコードをなんとなく修正したり、いじったりすると思いますが、コードは保存しておいた方がいいです。絶対に。
ヤレ、絶対
です。
いじって失敗したときに元に戻せます。また、やっぱりテーマ変更（インストール）しようというときにいじっていたコードはすべて初期化されてしまいます。
相当な時間をかけて作ったものが「インストールしてテーマとし設定する」ボタン一つのクリックで上書きされてしまった時に出た鼻水の量はワンピースのエネル並みだったかもしれません。
なので、これからわたしは、更新するごとにすべての項目ごとにコードをメモ帳などにコピーしておくつもりです。
あと、今後の課題は、
HTMLやCSSをしっかり勉強すること
です。
コードいじりとかやってみるとわかるんですが、自分で作ったり、変なところをいじるのにすごく時間かかるのが悔しいというか、じれったいというか・・・そして、おれも知りたい、と思うようになるんです。
なかなか時間はありませんが、すこしずつでも！
参考にさせていただいた記事等
以下の記事は本当に参考になりました。ありがとうございました。これからもよろしくお願いします（図々しいやつ）。
これ見れば全部OKです。
上の記事には書いてなかったと思いますが、下の記事にはかっこいいカスタマイズが紹介されています。
参考になる記事が多すぎて困る、のが実情だと思います。できる限りその選択肢を限定してみました。上の二つは本当に参考になります。
まとめ
いやはや、本当に楽しい作業でした。
ブログを育てる、というのはこういうことを言うのかな、と先輩ブロガーさんたちに一歩近づけたような気がして純粋にうれしかったし、もっとこの世界にどっぷりつかりたい、と思いました。
これからもブログとともに。
ではまた！
