ちゃんとついてきてる？
最近、飼い主がポチポチとパソコンイヂリをしていると思ったら…
シゴトじゃなくてブログのスキン？なんてものを作ってたんテチって!!
さっきヒトリでニヤニヤしてたのは完成したからだったのテチねっ。
「ハイヂちゃんのブログ始めるからね!!」って言ってたけど、飽きっぽい飼い主のこと、3日坊主にすらならなかったんじゃ…なんて思ってたことはナイショテチよ!!
実はアテクシ、カメラとやらがニガテなのテチ。
突然、カシャ!!とかピピッ!!って音がするんテチよ、ビックリしちゃうテチ(´・ω・｀)
コレは少し前の日にお散歩の途中ZOOMを使って撮った1枚。
5mくらいの伸縮性リードがいっぱいいっぱい伸びている状態で、実際はハイヂとはかなり距離が開いています。
スンスンチェック に夢中になり先を歩いていったハイヂ。
ワタシの気配が消えて、慌てて振り向いたところをパシャリ。「ちゃんとついてきなさーい」とでも言っているようですww
トイカメラ＋ポラロイド風に画像加工をしてみたものの、この雰囲気を生かせていない気がする…orz
見せ方やレイアウトをもうちょっと研究しないとなー(´・ω・｀)
サイドバータイトルの装飾
サイドバータイトルの背景は、デフォルトだと記事のタイトルと同様に色がついているだけだと思います。
ココに背景画像を設定する方法をまとめていきます。
■記事タイトルの設定方法
1．画像フォルダに背景画像をアップロードする。
2．スキンCSSの編集メニューにて下記の様に編集する。
h4.menu_title{
margin:0 6px 10px 6px;
padding:3px 6px;
background:#ffffff url(画像url) no-repeat left bottom;
text-align:center;
height:30px;
3．ピンク色で記載した部分を追記する。
各タグの数値は、画像やデザインに合わせて調整する。
これで、サイドバータイトルの背景の設定ができると思います。
記事タイトルの装飾
記事タイトルの背景は、デフォルトだと色がついているだけだと思います。
ココに背景画像を設定する方法をまとめていきます。
■記事タイトルの設定方法
1．画像フォルダに背景画像をアップロードする。
2．スキンCSSの編集メニューにて下記の様に編集する。
.entry h3.title{
clear:both;
margin:0 0 8px 0;
padding:3px 5px;
padding-top:10px;
background:#ffffff url(背景画像のURL) no-repeat left top;
height:40px;
}
3．ピンク色で記載した部分を追記する。
padding-top:10px; と height:40px; の数値は、画像に合わせて
調整する。
これで、記事タイトルの背景の設定ができると思います。
画像の表示が縮小されていたり、ちょっとオカシイなーという場合は何度か画像のアップロードをしなおしてみるとよいかもしれません。
その際は画像URLの確認のしなおしと、CSSへの書き換えもお忘れなく…。
この点については、ワタシが行った際の成功例ですので、ひょっとするとココまで面倒なことをしなくてもよいかもしれません…。
どうにかこうにか
スキンいじりもナントカ慣れてきたような感じ。
CSSでアレコレ変更するようなので、パッと見ややこしい…。
HTMLの方がラクなんだけどなー(´・ω・｀)
…とボヤいていても仕方ないので、とりあえずタイトル画像と全体の色調を合わせたところで本日は終了。
他のスキンを見ていると、サイドバーの項目ごとに背景を変えられるようなので、ちょっとチャレンジしてみようかなーと思ってたり。
まずは、最初の1歩（個）から。
久しぶりにアタマ使ったーww
アメブロでオリジナルスキンにチャレンジした際に、やりたいであろうことのマトメを2本書いてみました。
（ブログテーマ「Skin」からドウゾ☆）
その他の設定もCSS上で行いましたが、HTMLをカジったコトのある方なら、さほど問題なく変更できるかと思います。
このブログで設定していることで、「ココどうやるのー？」なんていうところがありましたら、お気軽にご質問ください。
対応できる範囲でお答えしたいと思います。
明日もお天気のよさそうな神奈川県。
ハイヂを連れてドッグカフェにでも行こうかしら…
それでは、おやすみなさい。。。
TOP部分をスッキリと
デフォルトで表示されているTOP部分のいらないもの（下図の赤色枠内）を消す。
■ 名前 ルーム | ブログ の部分を消す
スキンCSSの設定項目に以下を追記する。
参考までに、ワタシは「かんたんスキンカスタマイズ」の項目の最後に付け加えました。
↓こんな感じ
/*１０）サイドバーの見出し背景色を変更する*/
：
}
項目１０の後に下記を追記する。
/*追加１）ブログ上部のテキストメニューを非表示にする*/
#userNaviArea {display:none !important;}
追記後は、プレビューで確認し、表示確認をした後、保存する。
■ エントリータイトル上部の「読者になる」の部分を消す
スキンCSSの設定項目に以下を追記する。
※「名前 ルーム | ブログ」を消した時と同様に「かんたんスキンカスタマイズ」の
項へ追記する。
/*追加２）「このブログの読者になる（チェック）」というテキストリンクを非表示にする*/
.readerMainLink {display:none !important;}
追記後は、プレビューで確認し、表示確認をした後、保存する。
ちなみに、/* ～ */の間の「追加１）…」のコメントはあってもなくても大丈夫だと思います。
何の設定かわかるように表記してあるだけなので、ご自身でわかるように記入して頂くのがBESTかと思います。
以上でTOP部分をだいぶスッキリさせることができました(*´艸｀*)