はてなブログ→デザイン→カスタマイズ→デザインcssに以下のコードを貼付けてください。 背景色、文字の色、文字の大きさ、ホバーの色をあなたのサイトに合わせて自由に変えてください。 変更方法は See the Pen Bounce element CSS Animation by yochans ブログタイトルは自分の名刺ともいうべき、重要なアイテムです。しかしデフォルトのテーマやインストールしたテーマでは、タイトルが小さくて目を引きづらかったり、タイトルの色が背景写真と同色で見づらかったりする場合があります。今回は、はてなブログに Cocoonのテーマのブログタイトルの文字をカスタマイズしました。もともとヘッダー画像に文字を入れて作っていた場合、文字を変えるときにはその画像ごと変更する必要があります。それを、コードを使って簡単に変更できるようにしました。 "Hello I'm Laith Haleem Form Ghammas Love Developing Websites", Free Logo Maker, Create Custom Logo Designs Online – DesignEvo, 月間PV100万以上の人気Webサイト4つの記事トップデザインを参考にはてなブログをカスタマイズ, FontAwesome以外にもこんなにあった!無料のWebアイコンフォントライブラリー9選. 背景の色がデフォルトで白色なので、お好きな色に変えましょう。 それでは、はてなブログのヘッダーデザイン・アニメーションカスタマイズ9選のご紹介を終わります!, yumedasukeさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?, Powered by Hatena Blog . (adsbygoogle = window.adsbygoogle || []).push({}); 人生50年を過ぎ、新しいことがしたくてブログ挑戦中。どうなることやらわかりませんが、細く、長くをめざします。, 【はてなブログ】ヘッダー画像の作成と設定、スマホ画面に反映もコピペで簡単!初心者にもできた!, 【浮世絵】江戸の土木~橋・水路・ダム・大建築から再開発エリアまで~ 太田記念美術館, 【大津絵】もう一つの江戸絵画 大津絵~東京ステーションギャラリー 『もうひとつの江戸絵画 大津絵』. (adsbygoogle = window.adsbygoogle || []).push({}); カフェめぐりと海外旅行が大好きです。過去の事や現在の事をランダムに記事にしていきます♬, 【静岡】浜名湖グランドホテルさざなみ館 宿泊記【動物園とフラワーパークが徒歩圏内】. 現在当ブログで表示しているヘッダー下のテキストリンクにAmazonマークがついているのですが、これははてなブログのアイコンフォントです。 はてなブログのカスタマイズに夢中になってしまいブログランキングが1位→14位とだらけているinakaです。今回はグローバルナビゲーション(メニュー)の設置とメニューバーのカスタマイズ方法のまとめです。, 僕のはてなブログの最初のテーマが「innocent」。現在はシンプルを求めて「minimalism」と非常にシンプルなデザインを選んでいます。カスタマイズメインで考えるならinnocentがおすすめかと個人的には思っております。, メニューバーもシンプルで2階層まで表示可能です。レスポンシブ対応でスマホでもメニューバーを2階層まで表示が簡単にできるのでおすすめです。, 基本的な設定手順は2つのstepで簡単に設置可能です。上のリンク先で ①フッターにコピペする。②ヘッダータイトル下にコピペしてタイトルとリンクして飛ばしたいURLを入力するだけです。, この2つの手順でレスポンシブ対応でメニューが簡単に設置できました。これにもう少し自分のサイトの個性を見せたいと思うなら文字の色や背景色のカスタマイズをしてくだい。, 「innocent」のメニューはモノトーンでかっこいいと思います。しかし、サイトのイメージに全く合わない場合は色を変更する必要があります。, そのためにカスタマイズ方法をまとめておきます。(フォントの色、背景の色、文字の大きさ、カーソルを合わせたときの色の変更方法、上下に線が有無など), はてなブログ→デザイン→カスタマイズ→デザインCSSに以下のコードを貼付けてください。, 背景色、文字の色、文字の大きさ、ホバーの色をあなたのサイトに合わせて自由に変えてください。, 「#00336D;/* 背景色 */」の#00336Dの値を変えると色が変更します。, 「font-size: 16px ;/* 文字の大きさ */」の数字の値を変更すると大きさが変更できます。, また、上下の線に関してはあなたの好みです。僕のサイトでは採用していますが、いらない場合はその部分を削除すると消えます。, 最近シンプルなメニューバーとして人気のカスタマイズを紹介します。僕もwordpressのサイトで使用しています。, またこんなカスタマイズも書いています。最後まで読んでいただきありがとうございました。, 当サイトのサービスはサイト作成だけでなく修正・カスタム・アクセスアップだけに留まらず、初心者向けに副業・アフィリエイトのノウハウも紹介しております。少しでも購入者が満足できるようなサービス提供を提供中。, 購入して終了ではなく….サービス終了後も定期的なやりとりを通じてお客様の相談・依頼をいただくことが一番重要だと思っております。長い付き合いになると思いますが、当サービスを利用して会社の利益アップ・脱ノウハウコレクターとなりませんか?, 上記のサービスはいずれも好評です。特にアフィエイトをしている人でなかなか成果の出ない人や初心者で何からすれば良いのかわからない人にはおすすめのサービスとなっております。, サービスご依頼ご希望の方はサイト内に設置「お問い合わせ」フォームより依頼・または下記よりご連絡ください。当サービスはプロフィールにもありますよう[ランサーズ・スキルクラウド・ココナラ」などCtoCサービスで1000件以上の販売実績があります。常にお客様の満足できるサービスを意識して運営しています。, ここならでは現在全てのサービスを半額以下で販売中でございます。 See the Pen Text animation by Yoann 背景色を変えるには、background-colorのあとの#ffffffを変更します。, それぞれの記事の本文の文字色を一括で変えるプログラムです。 はてなブログのカスタマイズをいろいろと試してみたいと思います 自分自身,htmlやcssなどが詳しいわけではないので,他の方のサイトからハックしながら試行錯誤してみました 今回はヘッダとヘッダ下です はてなブログを始めた方で,あまり詳しくない方への参考程度になればと思っています 6.図形、イラストを挿入 color:のあとの#ffffffを変更します。, それぞれの記事の見出しの文字色を一括で変えるプログラムです。 はてなブログのスマホ表示のヘッダー部分(グローバルナビ・フォント変更・デフォルト表示削除など)についてのカスタマイズを説明していきます。これからカスタマイズを考えている人はぜひ参考にしてみてください。 (@LaithHaleem) on CodePen. はてなブログは、「css」というプログラムの部分を変更することで、ブログの背景色や文字の色、大きさなどのデザインを自分の好みに合わせて変更することができます。そこで、この記事では、cssを使って文字の色、または背景色を変更する方法を書き留めておきます。 当記事では、はてなブログのデザインのカスタマイズについてこれまで失敗してきた私の経験談をお伝えします。はてなブログのテーマのおすすめやスマホでのデザイン変更、レイアウトなどブログの始め方に迷う初心者の方にもおすすめな記事となります。 | スポンサーリンク Cocoonのテーマのブログタイトルの文字をカスタマイズしました。もともとヘッダー画像に文字を入れて作っていた場合、文字を変えるときにはその画像ごと変更する必要があります。それを、コードを使って簡単に変更できるようにしました。 (@yoannhel) on CodePen. 最後に、文字やイラストの大きさや色、配置バランスなどを調整します。 これでcanvaの作業は完了。 右上のダウンロードボタンからダウンロードします。 はてなブログのヘッダー画像に設定する. See the Pen Simple Typing text animation Javascript by Laith Haleem 'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://coconala.com/js/coconala_widget.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','coconala-wjs'); ⑦背景の色を指定する. それを、「デザイン」→「カスタマイズ(マーク」→「デザインCSS」の部分にコピペします。, 「変更を保存する」ボタンを押すと、「デザインCSS」で変更したデザインが適応され、ブログのデザインが変化します。変更を保存するときは、バックアップを取ることを強くお勧めします。 5.テキストを編集する. コンテンツ副業「再販権・テンプレ付き」販売します 副業続かない・初心者「セールスレター・再販権付きサービス」!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)? とりあえずこんなところでしょう! Copyright 2019 Primeiro:プリメイロ All rights reserved. はてなブログは、「CSS」というプログラムの部分を変更することで、ブログの背景色や文字の色、大きさなどのデザインを自分の好みに合わせて変更することができます。, そこで、この記事では、CSSを使って文字の色、または背景色を変更する方法を書き留めておきます。, これ以下の内容で、タイトルや本文など、様々な部分の文字色、背景色を指定するCSSプログラムを列挙していきます。 SEO的には最悪ですので使用は避けましょう! はてなブログテーマ「Primeiro」のデモページで使用しているデザインでデモページやサンプルページでヘッダーの告知を目立たせたいとき等にどうぞ! スポンサーリンク まだクリックしていないリンク文字列の色を変えるには、a:link{ color: のあとの#ffffffを変更します。 ですが「はてなブログ」の仕様上こうせざるを得ないのでご了承ください。, TwitterやFacebookなどのsnsで使用するサイズに合わせた画像や背景透過の画像なども一気に作ってくれます。, 無料でネットショップをつくることができるサービスのSTORES.jpのロゴジェネレーターで簡単にロゴが作れます。, ・Free Logo Maker, Create Custom Logo Designs Online – DesignEvo, ハイクオリティなアニメーションを使ったらもっとおしゃれになると思いますのでスキルがある方はやってみてください。, はてなブログテーマ「Primeiro」のデモページで使用しているデザインでデモページやサンプルページでヘッダーの告知を目立たせたいとき等にどうぞ!. color:のあとの#ffffffを変更します。, リンクの文字列(デフォルトでは青色。クリックすると特定のページにジャンプする文字列)の文字色を変更するコードです。 左サイドバーのシンプルなはてなブログテーマです。 昨日は1日暇だったので、朝から晩まで丸1日かけてCSSなどをいじり色々とカスタマイズ!, そこで今日は私がカスタマイズした内容を、備忘録も兼ねて初心者の方へ向け解りやすく書いていこうと思います。, スマホでブログを見た時に常に下側に読者登録などの項目を表示させるボトムナビゲーションを設置, 今でもよく解っていませんが、Web上にCSSのコードや設定の仕方を公開してくださっている心優しい方達のブログのおかげで初心者の私でも何とかここまで出来ました!, ブログの顔や玄関とも言えるオリジナルのヘッダーは私も以前から作ってみたいと思っていたのですが、どうやって作ればいいか分からず、なかなか重い腰を上げられないでいました。, そんな時に知ったのが、初心者でも気軽に使えるPixlr Editor(ピクサーエディター)という画像編集ソフトの存在!, ヘッダー作成についてはimaichido.comさんのブログを参考にさせて頂きました。, 私は『背景あり』でヘッダーを作ったのですが、imaichido.comさんは『背景なし』で作られています。, これから私がご説明するのは『背景あり』のヘッダーについてですので『背景なし』で作成したい方はこちらを参考にしてください。, Pixlr Editorを開くと最初にこの画面が出てくるので『+CREATE A NEW IMAGE(新しい画像を作成)』 をクリックします。, はてなブログのヘッダーのサイズは、1000px×200pxを推奨されているそうなのですが、1番近くて1040px×240pxしか選べないので少し大きいですがこのサイズで作成しました。, はてなブログでヘッダーを設定する時にトリミングする事になるので、多少大きくても特に問題はなかったです。, サイズ設定が終わったら、メニューバーのLanguageから日本語を選択し日本語表記にしましょう。, 私は、ニューカレドニアの上空で撮影したターコイズブルーがキレイな海の写真にしました!, 『移動ツール』を選択し画面上で動かすと、画像が移動するので、ちょうどいい場所を持ってきます。, 『保存』をクリックするとこの画面が出てくるので、名前やフォーマット、サイズを選択します。, そうするとこの画面になるので『画像をアップロード』から『ファイルを選択』をし、作成したヘッダ画像を読み込んでください。, はてなブログのデフォルトのヘッダーには既にタイトルが入っているので『画像とテキストを表示』にチェックが入ったままだとNewヘッダーとタイトルがかぶってしまいます。, PC・スマホ共キレイにヘッダーが収まればいいのですが、私は変に余白が多くなってしまいました。, おそらく私が使用しているブログテーマ『Haruni』の関係でそうなってしまったのかもしれません。, レスポンシブデザインなので、PCに余白があるからスマホも余白が出来ているのだと思います。, ヘッダーの余白をキレイに消すCSSはこちらのブログが参考になり、やっと出来ました!!, ヘッダーがデフォルトの時は、はてなブログ側のアイコンがついていたのですが、すっきりさせたくてこちらも消しました。, はてなブログのデフォルト画面に元からあったアイコンなどを消してしまうと、どこからダッシュボードに行けばいいのか、ブログを書いたり編集をする時はどうすればいいか分からなくなると思います。, ですので『ヘッダを非表示』にする前に『ダッシュボード』をPCにブックマークしてください。, もしかしたら他にもやり方があるのかもしれませんが、初心者なためこれしか方法がわかりません。, 余談ですが、ヘッダーの修正を後回しにし、WebアイコンのFont Awesomeを入れたくてをいじっていたのですが部分をいじりすぎた事でPC・スマホ共にブログデザインが崩れてしまいました!, CSSはバックアップを取ってあるのですがのページはバックアップしていなかったんです。, どうしていいか分からず焦ったのですが、この日のWeb履歴を辿りデザインが変になる前のコードが残っているところまで到達。, ヘッダー作成から設定までの手順を初心者向けに書きましたが、いかがでしたでしょうか?, 検索しても『脱 初心者』向けばかりで、本当の初心者に向けた、痒いところに手が届く記事があまり見つからなかったんですよね。, 本当の初心者は、普通の人が当たり前の事でも1から説明してもらわないと分からないんです。, デフォルトのはてなのアイコンなどを非表示にした場合、どこからブログを書けばいいのか、ダッシュボードはどこから出せばいいのか、私は本当に分からなかったんですよね。.