猫プログラマの日常スマートフォン用の表示で見るのんびり猫プログラマの日常プログラムのことを書くかもしれない?この広告は、90日以上更新していないブログに表示しています。カスタマイズ予め出来上がったソースをカスタマイズするのは、プログラマとしてはよくある作業。効率の良い手法があるのかも知れないけど、はてなブログに関してはこうやって作業した。今回はCSSを大改造するので、ソースをローカルに保存しておいて、それをいじり倒すことにしたのだ。気に入ったテーマを探すテーマストアというのができたらしい。そこから今イメージしているものに似たテーマをとにかく見つける。カラム割り(1~3列)各要素の配置(サイドバーが右か左かなど)各要素の大きさというところに着目して探してみて。背景色とかフォントはどうでもいいのだ。自分のブログにデザインを反映してみよう。のちのちテーマストアでテーマを公開したい場合は、他人のテーマを元にしちゃダメらしいので注意が必要。CSSを手に入れる管理画面の[デザイン]→[カスタマイズ]→[デザインCSS]でCSSが表示されるので、ざざーっとコピー。これもローカルに保存。(sample.css)このCSSを編集するのだが、とにかく長い!全部読み解くのがめんどくさい!最も楽なのは、CSSの最後にカスタマイズ分をどんどん付け足して行く方法。後の方に付け足した設定は、それより前の分を上書きしていくからだ。HTMLソースを手に入れる公開設定を一時的に「自分のみ」にしてから、はてなブログテーマ制作の手引きにあるサンプルエントリーをコピペして、新規記事として投稿。自分だけに公開している別のはてなブログの方がGOOD。みんなに公開すると、なにこれ?になるヨ!ブラウザでサンプルエントリーを開いてみよう。右クリックしてソースを確認したら、全部コピペしてローカルにソースを保存。(sample.html)記事を削除して公開設定を「すべての人に公開」に戻す。ローカルのCSSファイルをリンクするように修正しておく。Developerアドオンを入れておく。いつの間にか日本語で表示されるようになってるので、オススメしておこう。他人の作ったソースは、IDやclassのお名前が全然わからないので、これを見て把握するのだよ。✔すると、Div要素の範囲が赤線で囲われて見えるぞ。✔すると、該当の要素のCSS定義が下に表示されるぞ。それらを見ながらsample.cssを改造していくのだ。最後の方に追加していくのね。オンラインに反映させる管理画面の[デザイン]→[カスタマイズ]→[デザインCSS]で開いたCSSの最後に、sample.cssの付け足し分をコピペ。微調整はオンラインでね。背景画像等のWeb素材は、フォトライフにでもUPしておけば簡単です。画像のURLを取得して、CSSにコピペしてやってください。いじょ、おわりもっと効率の良い方法があったら、ぜひぜひ教えてください。】文字コードに関係なくテキストファイルを正しく読み込むブラウザ上で編集する「Webテキストエディタ」を作るという案件...2015-04-13お一人様開発者と初心者さんへのオススメソフトご立派な開発ツールも世の中にはたくさんあるし、どんどん便利...2015-04-11【はてなブログ】CodePenをはてなに貼る方法CodePenって何だか知ってる人は多いでしょう。»プロフィールid:catprogramユルいプログラマです。猫なので許してやってください。ツイートはてなブログをはじめよう!catprogramさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。