【えすのおと版】今までに施したブログカスタマイズまとめ！！
【スポンサーリンク】
どうもどうも。
未だHTMLとかCSSを全くもって理解していない “えす” ですｗ
一言で表すなら、意味不明。何なのアレ。笑
ある種の洗脳のような強い圧力さえ感じるあの謎の文字列。
ブログを1年半やってきてその間に何度もその文字列と向き合ってきたけど、
もう全く分からない。分かれる気がしない。
見ているだけで頭痛くなる。
もはや私を頭痛くさせる為だけにあるかのように思えてくる。
あれを1日中延々と眺めながら完璧に操るプログラマーとかはマジですげぇな...と、
頭狂ってんじゃねぇか？と いつも尊敬の念を抱いております。
【スポンサーリンク】
さて そんな感じで、プログラミング... と言うんでしょうかね、
その技術を一切兼ね備えていない自称･脳内スペック猿人レベルの私ですが。
今回の記事はタイトルにあるように、
今までに施したブログカスタマイズまとめ！！
ブログを開設してから今に至るまでのこの1年半、
出来ないなりに何やかんやで頑張ってコツコツと作り上げてきたんですよ。
まぁもちろん本当に大したことないけどね？
大したことないけど苦手な分野と向き合いコツコツと。
猿人なりにコツコツと作り上げてきたんですよ...！笑
何度も失敗しました。
とにかく不器用で 非公開のサブブログを作ってそっちでテストして
成功させてからメインブログへ、みたいなよく聞くアレが出来ないから、
全部ぶっつけ本番でやって、そうやって当たり前のごとく何度も失敗を重ねてきました。
失敗を積み重ね、人間の年齢のように積み重ね、
齢1才半まで成長した当ブログ「えすのおと（旧：柴犬さくらの生活日記）」。
その成果の全てを、ここに一挙公開します・・・ッ！！
PC
まずは PC画面 のカスタマイズから紹介。
完成図
使わせて頂いているテーマ
当ブログで使用させて頂いているテーマは
こどみすさんが作成した「Codomisu Flat（こどみすフラット）」。
こどみすさんの事はヒトデさんが以前行なっていたWindowsおじさん企画で知ったのですが、
なんとこの方、私と同じ高校生です・・・！！天才すぎるやろ・・・！！
Twitterでも交流させて頂き、たまにツイキャスにも来て下さったりと
とてもお世話になっていたのでこのテーマを使わせてもらうに至りました。
最初は木造建築的な温かみのあるテーマを探してたんだけど、
この落ち着いたモノクロの美に完全に陶酔させられましたね。
ヘッダー
ひとまず ヘッダー から紹介。
見栄えを考慮して最上部のメニューを非表示にしているブログを多く見かけますが、
個人的にはお知らせボタンとかをパッとすぐに押せた方が便利じゃね？
と思っているのでそのまま表示させています。
タイトル部分
ヘッダーは「Codomisu Flat」の特徴である
珍しいタイトル横のメニューが良い味を醸し出すデザイン。
メニューの文字の横にある小さなアイコンは下のサイトから。
ちなみにヘッダー画像の素材は「ぱくたそ」から拝借し、
編集は多くのブロガー御用達の「Canva」で行ないました。
スライダー
スライドしながら記事を紹介するパーツは下のサイトから。
海外のサイトなので私には全くもって解読不可能ですが、
上で紹介したこどみすさんの記事に詳しい説明が記してあるので大丈夫。
少し読み込みが遅いのが難点ですかね。
ただこれがあるだけで ちゃんとカスタマイズしてる感 が出るのでオススメです。笑
記事上
お次は 記事上 。
タイトル周りのカスタマイズを紹介します。
タイトルの装飾
記事のタイトルを目立たせるための装飾は下の記事を参考にしました。
色々なデザイン案があるので自身のブログに合うものがきっと見つかります。
シェアボタン
シェアボタンは ゆきひーさんが作ったものを使わせて頂いております。
すごく鮮やかでオシャレで目立つので気に入ってます。
ただよく分からないけどhtpps対応してないっぽいので
もしかしたら今後違うものに変更せねばならなくなるかもです。
パンくずリスト
カテゴリーを分かりやすく階層化できるパンくずリストは
色々と見て回ったところ1番簡単に設定できそうだった下の記事を参考に。
エゴサボタン
害悪としか言いようが無い はてブの仕様変更によりブコメへの返信が面倒になった時、
突如としてはてなブロガーの前に現れた救世主パーツ･エゴサボタン。
らいち氏には本当に感謝です。マジリスペクト。
【スポンサーリンク】
記事内
続いて 記事内 のカスタマイズ。
見出しなどの他にCSSを使っている執筆記法も合わせて紹介します。
※色付き下線やルビふりなどのHTMLのみで行えるものは省略。
見出し
見出しはブログデザインに調和する落ち着いたトーン。
デザインは下の記事から選びました。
この見出しに関しては色んなブログを見て回ったけど、
デザイン案の数でこの記事に勝るものはたぶん無いんじゃないかな。
カエレバ･ヨメレバ
カエレバ･ヨメレバのデザインをオシャレにするコードは
これまた ゆきひーさんの記事を参考にさせて頂きました。
会話形式
誰もが憧れる会話形式は下の記事を参考にしています。
他にも色々な方がこの会話形式のやり方を紹介してたんだけど、
個人的にはこの記事に書いてある方法が1番簡単だったかなーと。
ただ円の中に上手い具合に画像を表示させるのがほんの少し難しいかも。
文字揺らし
たまに使っている文字揺らしは下の記事より。
揺らし具合は3段階も用意されています。
寒い...
寒いよぉ...！！
寒いって言ってんだろクソ野郎！！！
画面酔いを引き起こすのでやりすぎは よくないですが、
文字により強く感情が乗るので地味に重宝しております。
てか今気付いたんだけどTwitterやスプラトゥーンでお世話になっている
ケンヂさんの記事にもっと色んな揺らし方が書いてありますね。
【コピペOK！】めっちゃ秘密にしたかったけどCSSで文字を震えさせる方法を大公開するよ！ - にーとのかがみ。
記事下
次は 記事下 。
シェアボタンとフォローボタンの間にある空白がすごく気になりますが
どうやって直せばいいのかずっと分からないまま放置しています。笑
シェアボタン
シェアボタンは見ての通り 記事上と同じゆきひーさんのもの。
フォローボタン
その下のフォローボタンはこちらの記事を参考にさせて頂きました。
サイドバー
お次は サイドバー 。
直帰率を抑えるために表示する記事数を大きく増やしたりしていますが
現状80％がそのまま帰っていってます・・・。笑
フォローボタン
サイドバーのフォローボタンは
先ほど紹介した記事下のものと同じ記事を参考にしています。
ただすぐ上に読者登録とTwitterのフォローボタンがあるので
わざわざ設置する必要はあるのか？なんて自分で疑問に思ってます。笑
カテゴリー
カテゴリーが縦にズラーっと並んでいるのが気に入らなかったので
下の記事を見てギュッとすっきり纏めました。（なんか効果音がバカっぽい）
自分は使っていませんが記事によると
カテゴリーに色を付けて目立たせることも出来るようです。
Twitterの埋め込みは公式から出ています。
やり方はこちらの記事がすごく分かりやすいです。
Instagramの埋め込みは海外のサイトを利用しています。
手順はこちらの記事を参考にさせて頂きました。
一瞬で出来た！Instagramの写真をはてなブログのサイドバーに表示する方法 - いつも向かい風
てか最近全くインスタ更新してねぇ・・・ｗ
その他
最後はここまでで紹介できていないカスタマイズをまとめて紹介。
TOPに戻る
需要あるかどうか分かんないんだけど
一応 下の記事を参考にしてTOPに戻るボタンを設置しています。
記事には当ブログで使用している指の他にも色々なデザイン案が紹介されています。
【スポンサーリンク】
スマホ
続いて スマホ画面 のカスタマイズを紹介。
スマホ画面の見出しやソーシャルボタンなどは
PCと同じ記事を参考にして設定しているのでここでは省略しています。
完成図
ほぼ全て こどみすさんの記事を参考にしています。
スライドメニュー、トグルメニュー、細いラベル、スライダー。
スマホ画面のほぼ全てのデザインを構成しているのが
先ほども紹介した天才高校生･こどみすさんのこちらの記事。
この記事はね、マジですごい。
これを見てコピーして貼り付けるだけ。
たったそれだけで完璧な形まで持って行ける。神。ただただ神。
頭蓋骨が擦り減るほどの土下座で敬意を表したい。
圧倒的感謝・・・ッ！！m（＿ ＿）m
その他
そんな感じで大体は こどみす氏オンリーなのですが、
ほんの少し他の記事も参考してカスタマイズしているので紹介しておきます。
固定メニューバー
本日3度目の登場、ゆきひーさんの記事を参考にして
画面下部に固定の複合メニューバーを表示させています。
ただHOMEボタンと人気記事とカテゴリーは
こどみすさんのカスタマイズなどで既に補えているので
もしかしたらこれは今後サイト速度を考慮して削除するかもです。
不要な要素の削除
フッターに表示されるはてなブログへの勧誘など、
不要極まりない要素は下の記事にあるコードで削除しました。
これからWebデザインを勉強したい！という方に。
HTMLやCSSなどの基礎知識を身に付けていきたい！という方は
本を読んで勉強していくってのもアリかもですね。
私はそこまで極めるつもりがないので買いませんが、←
下の2冊が非常に分かりやすく、まさに初心者にもってこいの本となっているようです。
ご参考までに。
千貫 りこ 技術評論社 2017-05-26
【スポンサーリンク】
まとめ
以上、類まれなるバカという異名を持つ高校生が送る
当ブログ「えすのおと」のカスタマイズ完全まとめ でした。
まぁ総じて言えるのは、
“知能レベルが猿人並の私でも はてなに君臨する優秀な人材に縋って
適当にコピペしまくってればそれなりのデザインを形づくれる” って事。
あんまこういう猿人をバカにしたような表現は良くないけども。笑
そして何やかんやで楽しいんだよ。ブログカスタマイズって。
消耗の度合いはヤバいけど楽しいんだよね。すごく。うん。
少しでもこの記事を参考にして
ブログをカスタマイズされる方がいたら本当に嬉しい限りです。
☆こんな記事も書いてます♪
最後までご覧頂きありがとうございました。
読んだよ！を伝える☆とブックマーク、あとコメントもお願いします！＾＾
各種SNSでの共有･拡散もバンバンやっちゃって下さい！
読者登録や Twitter･Instagram のフォローも宜しく！
◎あとがき
今回の記事を書く上で、はてなブログのアイキャッチ職人こと
あいまいみー氏（id:imyme_999）のブログをかなり参考にさせて頂きました。
これはもうパｋ... オマージュ作品と言っても過言ではない。笑
勝手にすいません。
本当にありがとうございました。感謝。m（＿ ＿）m
この記事は新たなカスタムを加える度に追記していこうかなーと思ってます。
