こんばんは。べる（＠belltea910）です。
ブログデザインを変更しました！
変更前→公式テーマの「Handwriting」
変更後→人気テーマ1位の「Minimalism」
変更した理由としては、
・見飽きた。
・Handwritingがスマホデザインに対応しておらず、不便だった。
・そもそもあまり好きではなかった。
ざっとこの辺りがきっかけです。
あとは
・公式テーマ以外は全て有料だったりPROにしないといけないと勘違いしていた。
・デザインCSSをいじり始めたところで偶然変更できることを知った。
というあたりも。
ブログを開設して1年、なんだかんだアクセス数も初期に比べてすごく伸びました。
ぶっちゃけとてもうれしいです。
アクセス数が土曜日だけ伸びるとかではなく平日もじわじわと伸びていて、感無量です。
「すごく伸びた」なんて言うと月数万PVとか儲かってるとか思われそうですが、
月3000PV行かないくらいで収益は0です……………
文章校正や言葉遣いなど記事そのものを読みやすくするだけではなく、
そもそもブログページ自体を見やすいものにしたいと思っていました。
そこからデザインCSSの編集について調べ、少しずつ進めていました。
最初はリンクボタン設置。
こちらのサイトを参考にしました。
ちなみに作ったボタンはこちら。
※クリックしてもリンク飛びません。何も起こりません。
これ、一度作るとどんな文字でも入れられるところが驚きました。
例えばこんな風に。
※こっちはリンク飛びます。
ちょっとプログラミングしてる感じが味わえて楽しいです。実際はコピペですが。
この辺りで、リンク先を新しいタブで開くか同じタブで開くかっていうHTML編集も覚えました。
リンクをコピペで記事に貼り、はてなブログのHTML編集タブを押すと、
<a href="https://www.yuu-diaryblog.com/2017/04/22/css-button-2/" style="outline: 0px;" >CSS・HTMLで作るweb用ボタンデザイン110選</a></p>
と表示されます。
最初の<>内部に「target="_brank"」って入れると、新しいタブで開く設定になります。
こんな感じ。
<a href="https://www.yuu-diaryblog.com/2017/04/22/css-button-2/" style="outline: 0px;" target="_brank">CSS・HTMLで作るweb用ボタンデザイン110選</a></p>
これでクリックしたときの挙動を貼ったURLごとに変えられるので便利ですね。
プログラミングって全く分からないと魔法みたいですが、わかってしまうと全然なんて事のない命令文なのですね。
魔法の詠唱を魔力への命令文だとすると、同じようなものですが。
というわけで、ブログデザインの変更しました！っていう紹介でした。
デザイン変更でなくても、ちょっとしたデザイン変更とかボタン作成とか簡単にできるので試してみてください！
最後に参考にしたサイトを紹介して終わろうと思います。
参考にしたサイト
これがボタン作ったときに参考にした（というかソースコードコピペした）ページ。
ボタン使うとこんな感じになります。
僕の場合はリンク先に書いてあるコードコピペして、ボタンの大きさとか文字の大きさとかちょっと微調整してあります。
こっちはブログデザインの変更の時に参考にしたページ。
はてなブログにデザインテーマのBrooklynを適用＆カスタマイズ！ - モーリーのメモ
実は見出しのデザインも変更しました。
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ - NO TITLE
あとはシェアボタンもカスタマイズ。
コピペで簡単！はてなブログのシェアボタンをカスタマイズ - NO TITLE
ここまで、なんだかんだ結構時間かかりました。
4時間くらい。
本当はTwitterで記事がどれだけツイートされたかっていうカウントもボタンに追加したかったのですが断念。
その時参考にした記事はこちら。
サイトの高速化に！Twitter、Facebook、Google＋、はてブのシェア数をJavaScriptで非同期に取得する方法まとめ
関数の第1引数にURLを、第2引数にCSSセレクターを指定します。
この1文が理解できず諦めました。
時間があるときにまた頑張ります。
後日、ここを参考にカテゴリー一覧を見れるようにしました。
記事中ではスマホ用になっていますが、そのままPC用の方のヘッダ部分に記述したら普通に動いたので採用。
コピペ一発！はてなブログのスマホページでカテゴリ一覧を自動生成するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた？〜
で、こちらに浮気。
【はてなブログ】グローバルナビゲーション（ヘッダーメニュー）でカテゴリーを設置して回遊率アップ！ - クリアメモリ
この部分色を少しいじりたいのですが、合う色があんまりイメージできずまだやっていません。
個人的には空色と赤、緑が好きなのでその辺で調整したいところ。
以上、ブログカスタムしたよっていう記事でした。
ブログ始めたての方、こんな風にいろいろカスタマイズすると見やすいかっこいいブログに近づくかもしれません。
何か聞きたいことや、デザインを変えたことで見にくくなった！とかあればご気軽にTwitterのリプとかDMで飛ばしてもらえればうれしいです！
