104blogスマートフォン用の表示で見る104blog投資が趣味なITエンジニアの雑記ブログです。このブログでは、IT系記事の他に投資系の記事も掲載しています。はてなブログのデザインを簡単にカスタマイズする方法2018-05-22はてなブログのデザインを簡単にカスタマイズする方法ブログ運営はてなブログのデザインを変えるのって難しいと思ってませんか?案外、簡単にカスタマイズ出来るんですよ!やり方をお伝えしますね。デザイン編集画面で変更しましょうブログのトップ画面から、「デザイン」ボタンを押して、デザインの編集画面に移動しましょう。次に、スパナのマーク(カスタマイズ)から、デザインCSSをクリックして下さい。デザインCSSに、カスタマイズコードを入力しましょうデザインCSSのボックスには、最初から、いろんな文言が入っていると思います。これは特に触らずに、その下にコードを追記していきましょう。サンプルコードをこの後、紹介しますね。ブログ全体の文字を大きくする以下のコードを追記してみて下さい。コードを解説すると、bodyタグ(=ホームページ全体を表すタグ)に、フォントサイズをラージにしなさい、という意味です。}こんな感じで追記して下さい。これオススメなんです。実際やってみてもらえると分かるんですが、少し全体的に字が大きくなるので、見やすく・分かりやすくなります。背景が灰色のBoxを設置する灰色背景のBOXを設置しましょう。こんな感じで設置するとわかりやすくなりますね。#ddd;}デザインCSSに、こんな感じで貼って下さい。ここでのポイントは、「.gray_box」の最初の「.」(ドット)です。class(クラス)を表します。後に出てくるので、覚えておいて下さい。今回は、ブログ記事側でも編集が必要です。記事編集画面を「HTML」モードで開いて、以下のコードを貼って下さい。class="gray_box">てすとてすとてすとてすと</div>ありますね、class(クラス)。さきほどの「gray_box」という名前がイコールになっています。呼び出してあげるのがポイントです。ブログ記事編集画面では、こんな感じですね。プレビューしてみると、以下のようになったと思います。他の色にBOXを変更したい、という方は、「CSS」でググってもらえば、沢山カスタマイズ方法が出てきますよ。まとめ:コードコピペでカスタマイズできるよどうだったでしょうか?簡単にデザインが変更できるのがわかったと思います。この記事のコピペからはじめて、どんどんマスターしていけばいいでしょう。それでは、みなさんの快適なブログライフを陰ながら応援しております。23:56はてなブログのデザインを簡単にカスタマイズする方法Tweet関連記事2019-04-07JavaのMapの基本(連想配列への値の追加・取り出し)Javaの連想配列であるMapの基本的な使い方を説明します。2019-03-11はてなブログで特定のカテゴリの記事下に自動でコードを埋め込む方法このブログには2大テーマ「投資」と「プログラミング」がありま...2019-03-01分散投資にGPIFのポートフォリオって参考になる?インデックス投信の積立等で分散投資をしようと思っている方も...2019-01-12はてなブログでプロフィールのIDを非表示にする方法はてなブログのプロフィール欄に表示されるはてなID。はてなブログProプログラミングと資産運用で、自分でやってみた結果をブログにしてます。みんなの役に立つブログが目標です。お問い合わせはこちらまで。投資記事について当ブログでは、投資や金融商品に関する紹介記事も掲載しています。元本割れのリスクがありますので、投資は自己責任でお願いします。IISを使う月別アーカイブスポンサーリンクはてなブログをはじめよう!toyo--104さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。