自力でブログカスタマイズしてみました
パソコン版のブログをカスタマイズしてみました(先日の記事で色々と文句を言いながらも、、笑)やったのは1. 看板画像の作成2. 看板画像の差込み3. フォントの変更この3つです!それぞれ詳しく説明します看板画像の作成色々と調べた結果、今回は 幅1126px × 高さ300px で作成しました自分でイラスト画像を作るスキルはないので、フリーの素材をお借りして作りました使用させていただいたのは以下のサイトのイラストですほんわかした雰囲気の素材がとっても素敵 ガーリー素材さま加工に使ったソフトは無料で配布されてるGIMPというものプロでない限りこのソフトで充分!ってくらい贅沢なフリーソフトですいろんな人が使っているソフトのため使い方講座がたくさん存在するのもGIMPのいいところGIMP最新日本語版の ダウンロード・インストール方法はこちらGIMPで素材画像をペタペタ貼っていき、縮小したり回転させたり好きな色味に整えたりして最後にタイトルの文字を入れて看板画像の作成完了です!▲ こんな感じにできました!看板画像の差込み次に、作成した看板画像をヘッダ部分に差し込む作業ですこの作業の前に、今までテンプレートを使用していたのでそれを『CSS編集用』のものに変更する作業が必要でした!『ブログ管理』 から左ナビの下の方にある 『デザインの変更』 をクリックしてデザインの変更画面の下の方から『カスタム可能』 に入ります移動した先にたくさんあるテンプレートから‟CSS編集用デザイン” と書いてあるものを選べばOKこれができたら準備は万端です作成した看板画像をアップロードして挿入する作業をします(ここはとっても簡単です)先ほどと同じデザインの変更の画面から‟CSSの編集” 画面に入りますここに入り以下のような画面から作った看板をアップロードします①を押して画像を選び、②を押してアップロードちょっと待って画面が更新されたら③を押し、青く反転したら(選択されたら)URLをコピーしますCSS編集エリア(書き込みができるところ)の一番下に以下のテキストをコピーして貼り付けます /* ヘッダーの背景色とヘッダー画像 */ .skin-bgHeader { background: no-repeat scroll center; background-color: #fff; background-image: url(XXXXX); } /* ヘッダーの横幅 */ .skin-bgHeader [amb-layout="headerInner"] { width: 1126px; } /* ヘッダーの高さ */ .skin-bgHeader [amb-layout="headerInner"]>a { height: 300px; } /* ブログタイトルと説明文非表示 */ .skin-headerTitle { display: none; } 赤文字のところにさっきアップロードした看板画像のURLを、青文字のところに画像のサイズ(px)を入力すれば完成です!プレビュー画面を見るとちょっぴり感動します笑フォントの変更最後に、初期設定のフォントだとあまりかわいくない、かつ読みづらいと思っていたのでフォントを変更しました!選んだのはメイリオというフォント読みやすくて、とっても人気のフォントです!変更方法はとっても簡単で、以下のテキストをそのままコピーしてさっきと同じCSSの編集エリアに貼り付けるだけ! /* ブログ全体のフォント変更 */ body{ font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', sans-serif !important; } プレビューを押すと、変わっているのが確認できると思いますこれで完了です以上が私が自力でカスタマイズした詳細です慣れると意外とすいすいできるかも、、と思い始めました自分のやりたいことを実現するための頑張りって楽しいですよね!使う機能自体はそんなに多くないので気合いで頑張りましょう!自分の『好き』をつめこんだら、きっと自分のブログがもっと楽しくなると思いますよこれからも少しずつ改良していきたいと思います