TOP >  ブログについて >  ブログカスタマイズの沼が深すぎる

ブログカスタマイズの沼が深すぎる

最終更新日:2020-02-18

もう連日この話題で申し訳ないです・・・
明日のアップデートが来たら多分ほんとのほんとに平常運転に戻ると思います。
魔界大戦楽しみですね!!!
推し職については、ルーン・タリスマン何にする予定かとか、慣れてきたらギミックメモとかも記事に出来たらなと思っています。

魔界大戦のギミックに関しては、Twitterで資料を配布してくれている方がいらっしゃるので紹介します。

毎回本当にありがたいですね・・・・
明日メンテ明けるの待ちながら頑張って予習したいと思います・・・!!



そう言えばビーストパッケ、魔槍士のケモ耳が気になりすぎて2パッケ購入しました^p^
キツネ・・・?って感じの耳ですけどね・・・・フェネックかなんかかな。。。。。

ということで、早速(いろいろな性癖が詰まった)コーデを組んでみたよ( ˘ω˘ )
2020_02_18_01

ケモ耳!!へそ出し!!!褐色肌!!!!甲冑!!!!!
んんんんん†もう思い残すことはない・・・・・†
今週はこの格好でお出かけしようね・・・・・・・

ドラゴニアンのほうに青い耳付けたら、名前が似てるのも相まって双子みたいな感じに(*´▽`*)
2020_02_18_02

対照的な感じでグッときますね。。。


今魔槍士のアバターは全部で4キャラに持たせてるんですが、今回ビーストパッケ買おうとしたら全員インベほぼ埋まってて焦りました(@_@;)
5キャラ目突入・・・・は良いんですけど5キャラ目の魔槍士がいないんだよなあ・・・
倉庫キャラ作らないとか~



ここからが本題です。
自分の備忘録用に今回ブログのどこを主にカスタマイズしたのかを記録に残しとこうと思います。
誰も興味ないと思うけど!!!!

hタグのCSS設定
なんで今までやらなかったのか疑問すぎるけどきっとめんどくさかったんだろうな。
h1~h4までは、テンプレートのレイアウトに使われちゃってたのでh5~h8で設定したんだけど、h7とh8は見出しタグとして本当は使えない要素らしい。
なんか使えてるから気にしないで使っちゃってるけど不具合出ないか心配。。。。

見出しのデザインは検索して出てきたサルワカさんのものをコピペしてカスタマイズした感じ。
ここのブログとの出会いが、今回のカスタマイズの元凶な気がする。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。


Font Awesomeの導入
Font Awesomeってのはざっくりいうと、webで使えるアイコンフォントのこと。

Font Awesome Icons

All of the Free and Pro icons available in Font Awesome 5

Font Awesomeのサイトに行くと、文字と同じように扱えるアイコンイラストがどっさりある。しかも結構な種類が登録なし無料で使える。
実は前から導入するだけしてたんだけど、扱い方わからず放置してた。

上でサルワカさんの見出し導入するついでに、関連記事読んで使い方改めて知りました。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

導入簡単でめっちゃ使いやすいから、それはもうブログのいろんなところにアイコンとしてふんだんに使ってしまった。
使いすぎてちょっとうるさいくらいかもしれない・・・・少しずつ調整したいと思います。

Font Awesomeを使ったSNSボタンもプロフィールに設置しました。めっちゃ可愛くてお気に入り・・・
これまたサルワカさんの記事から。

CSSで作る!押したくなるボタンデザイン100(Web用)

HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。


もくじとボックスの設定
文字を枠で囲みたいな~から始まり、これもくじもかっこよくできるんじゃね??からの、ページ内リンクもトップに戻る時みたいに滑らかにスクロールさせてーなあでいろいろ頑張った。

枠のデザインはまたまたまたまたサルワカさんの記事から。
ほんとサルワカさんのデザインかわいいしコードわかりやすいから好き・・・

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

ページ内リンクのスムーズスクロールがなかなかうまくいかなかったんだけど、idつけたタグがdivじゃないからでした。


下線を蛍光マーカーぽく変更
今風ブログの代表格な手法。
今まではFC2ブログのエディタの機能で文字を太くして色を変えることで強調部分を表現してたんだけど、これをやめて最近よく見る下線をマーカーっぽくする表現方法に変えました。

蛍光マーカー風の下線をCSSの文字装飾で作る方法

ブログ記事でよく使っている文字の装飾について、先日こんな質問をいただきました。 カラフルな下線というのは、このピンクのラインのこと。 強調したい箇所は赤文字にしたり太字にしたり、み […]

こちらのブログを参考にCSSを設定、本文内にタグをコピペして使えば下線が付くようにしました。

ちょこさんがログインしました。
ちょこさんがログインしました。

好みは分かれると思うけど、マーカーラインの方がすっきりしててあか抜けた印象があるきがする!!


Rankletの人気ページランキングの導入
いままでFC2ブログの機能でページの後ろに関連記事載せてたんだけど、リストにCSS付けたことによって、レイアウトが崩れちゃうようになっちゃいました。
調べたんだけど、こればっかりはどうすることもできないみたいなので、機能停止して外部サービスで似たようなのないかなって探して見付けたのがRankletというサービス。

Ranklet [ランクレット]

Google アナリティクスに蓄積された情報から、あなたのサイトに人気ランキングを表示できる無料Webサービスです。

グーグルアナリティクスを利用して、PV多い記事のランキングを作ってくれます。
導入しててよかったグーグルアナリティクス。

めっちゃありがたいサービスなんだけど、HTMLとCSSをちゃんと理解してないと自力カスタマイズはほぼ無理な感じなのがとても惜しい・・・
Rankletのカスタマイズやってる記事も全然見つからなくて、四苦八苦しながらなんとかそれっぽくして設置することができました(ヽ''ω`)


WebFontの導入
見てると、見出しとかにオシャレなフォントを使ってるブログさんが多くてどうやってるんだろうと思ったら、WebFontってのを使うらしい。
フリーで使えるものないかな~って調べたところ、Googleが提供している、GoogleFontsってサービスが良さげという事で導入してみました。

Google Fonts

Making the web more beautiful, fast, and open through great typography

日本語フォントの「M PLUS 1p」と「M PLUS Rounded 1c」を入れて色々なところに使って試してみたんだけど、とりあえずブログタイトルとh5とh6にM PLUS 1pを使うだけに落ち着いた_(:3 」∠)_
使い方もめっちゃ簡単でした。

実は他サービスでもっとブログタイトル合うオシャレなフォントもあったんだけど、トップページ以外に反映されないし、よく読んだら月1万PV以上は追加料金かかるらしいからあきらめた・・・
こんな辺境のオンゲブログでも月15000PV以上はあるんすよ・・・

ここまで設定したところで、スマホでブログ見たときに見出しのサイズがデカすぎることが気になりだして調整してみることに。
font-sizeにvminやvmaxという単位を使うとレスポンシブでフォントのサイズが変わる事を知ったんだけど、今度はスマホで見るとサイズが小さすぎる;;;

どうしたもんかとテンプレートのCSSを眺めてたら、1カラムになるときに適用される項目があったので、そこに該当する要素のフォントサイズ設定してつっこんであげたら、スマホのときにちょうどいいサイズになりましたε-(´∀`*)ホッ


閲覧者が多い記事を今回の設定にし直したんだけど、この作業がやってもやっても終わらない・・・
大分直しはしたけど、細かい部分は気が向いたらまた改善したいです。

元になったテンプレートがこんな感じなので、トップページも大分改造しまくってますw
2020_02_18_03


記事の感じもだいぶ今風おシャンティな感じのブログっぽくなってきてワクワクしますね( ^)o(^ )
オンゲのブログにそこを求められてるかは考えてはいけない()
ここは攻略サイトじゃなくて1プレイヤーの個人ブログなので好きなようにやるぞい!

またやりたいことドンドン出てきそうだけど、とりあえず今回はここまでで落ち着こう・・・
記事のURLをコピーする

応援待ってます

ちょこにOFUSEする

\Share!!/

Comment






管理者にだけ表示を許可する