テーマをStingerにしたのは
「初心者でも使いやすい」
「カスタム方法をたくさんのブロガーさんが載せてる」って記事をたくさん見たから。
cssの知識は全くありません。
※現在のテーマはAFFINGER4です
現在、公式サイトからのご購入で割引キャンペーン中だそうです
8,5oo円より安くなってたらお得♡ってこと
⇒稼ぐサイトの設計図-AFFINGER4公式ガイド
いや、
私の記事は参考になるか分からないので
ぜひ、参考にさせて頂いた元のサイトえけこのくるる様をご覧頂ければと思います。
可愛いサイトを作ろう
「サイト作る 可愛い STINGER3」
で、出て来たサイトを上から見ていき、一番可愛くて親切そうだったサイトが上記リンク先です。
以下は私の忘備録でしかないので
本当に、参考にされる方は上記リンク先からお願いいたします。
フォントを可愛く(読みやすく)
文字は可愛くて読みやすい方が良いです。
最近、丸っこい字がお気に入りです。
- ダッシュボード→外観→テーマの編集
- スタイルシート62行目くらい「font-family:」の後ろを 「font-family:」 メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif; ←ここまでと入れ替える
スマホ用も
- ダッシュボード→外観→テーマの編集→smart.css(右側の一番下)
- smart.css46行目くらい「font-family:」の後ろをPCと同じ
もっと簡単な方法があるそうで
#topnews img {
width: 150px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
#kanren img {
width: 100px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
これを貼り付けるだけ。
なのですが、
どちらのサイトで教えて頂いたのか分からなくなってしまいました。
この記事を書いた当時はそういう事も出来ていなかったのです…
ごめんなさい。
「これワタシのです」って教えていただけたらな…って思います。
本当にすみません。
ヘッダーを変える
変えなくても良かったのですが何かをどうにかしてしまったらヘッダーが無くなってしまい殺風景になってしまったので慌てて作った画像を貼ってみました。
もっと勉強してしっかり作り直すのは「そのうち」の目標にして、今スマホに入れてあるアプリだけでやってみました。
画像を作る
- LINEカメラアプリの「ペイント」で9:16の好きな下地を選ぶ→回転させてから保存
- PicsArtアプリの「描画」→キャンバス→幅986、高さ150、方向横向き
これでヘッダー画像出来上がり。あとは字や写真でデコるだけ。
- ダッシュボード→外観→ヘッダー→新規画像を追加→圧縮とかしないでそのまま使えるからボケたりしなくて良い感じです。
タイトルを枠で囲む
- ダッシュボード→外観→テーマの編集→/*記事タイトル*/を探してその項目の一番下に
.entry-title {
border: double 4px #ffc0cb;
padding: 5px 10px;
}を貼りつける。
- スマホ用にsmart.cssでも/*記事タイトル*/の一番下に貼る。
あと何やったっけなぁ…
その都度、書き足していこうと思います。
どこか違っていたら教えて下さいね。
もう、「いじる」とか出来ないので諦めました。
追記
スタイルシートというのは皆が同じように見える物だと思っていました。
だから行数をかいたのだけど「くらい」を付け足しました。
最も参考にさせて頂いたえけこのくるるさん。ありがとうございました。
stinger7に変えようか。
このままチョコチョコいじるか考え中だったりします。