あなたはBloggerを運営している時に、「ＳＮＳボタンが、もうちょっとカッコよかったらな、、」と思う時はありませんか？ Bloggerは、Google先生が運営しているサービスだけあって、無料ブログの中でも最高のカスタマイズ性を誇っていますが、なぜか初期設定のSNSボタンのデザインが、悲惨なまでにダサいことでも有名です。 そこで今回はコピペだけで、BloggerのSNSボタンを超かっこよくするカスタマイズ法を紹介していきます。 ぜひ、参考にしてください。 今回のカスタマイズで作れるＳＮＳボタンのデザイン 今回のカスタマイズで作ったオリジナルＳＮＳボタンは、１枚の画像がＰＣ版での表示で、２枚目がスマホ版での表示です。 ＰＣの時には横いっぱいに３列にボタンが広がり、スマホ時には２列に並ぶように設定しています。また、ボタンにカーソルを合わせた時に、ゆっくりと文字色と背景色が変化するようにしまし

なぜ余白が必要なのか ブログ記事は小説と違い、読者が一字一句逃さないよう読むことはほとんどありません。 よほど文才があってぐいぐい引き込まれる記事、または惚れこんでいるブログなら別ですが、たいていはざーっと流し読みしていきます。 そのうえで、自分に必要な情報があると判断したらもう一度読み直したり、あとで読み返すためにブックマークやシェアといった行動に移ってくれます。 流し読みするときは目と脳が自然とキーワードを拾っていきますが、たとえば以下のように始めから終わりまで文章が連なっていたらどうでしょう。 私は今日初めてこの学習院というものの中に這入りました。もっとも以前から学習院は多分この見当だろうぐらいに考えていたには相違ありませんが、はっきりとは存じませんでした。中へ這入ったのは無論今日が初めてでございます。さきほど岡田さんが紹介かたがたちょっとお話になった通りこの春何か講演をというご注文

2017.5月更新 こんにちは！いつの間にか14回目のカスタム記事！今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました！ぜひご覧あれ！ 知らなきゃ損！いつでもAmazonで90%オフの商品を探す方法！ はじめに 完成系 まずはCSSをコピペしよう！ ブログでの使い方 簡単解説（飛ばして良し！） まとめ 【追記】この記事のCSSをもとにさらに手を加えてくれた素敵な記事があるので紹介します！ありがたい。 こんな記事も書いてるよん。 はじめに 参考記事としてこちらの記事を参考にいたしました。 akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。 上記の記事内に「どなたか改良版をお願いします。」と書かれている

フォントサイズと行間を綺麗に整えることで、グッと文字が読みやすくなります。サイト訪問者が「読みやすいサイト」にするために、CSS初心者の方になるべく簡単に解説していきます。 文字の読みやすさって本当に大事です。面白そうな記事を読みだしても、なんだかゴチャゴチャしているから最後まで読むのを止めちゃうことって経験があると思います。 色々と難しいカスタムしていても、文字の調整を忘れちゃってる方も多いはず。 ということで僕自信も今一度『文字』について見なおしてみました。カスタム方法は最後にまとめて書くので、目を通して見て下さいー！ 段落の余白について テキストを入力していくときは基本＜p＞タグを多用していると思います。＜p＞タグは段落を作るタグなので、ここで言う『余白』とは段落の文字と文字の間の余白のことを言います。 悪い例① メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した

見出しジェネレーター 外観や色を選んでCSSを生成するジェネレータータイプ。 CSS見出しジェネレーター CSS見出し-ジェネレーター | WEB道 吹き出しやリボン、背景色、ボーダー色、文字色、影、ぼかしなどを選択して見出し用のCSSを生成するジェネレータ。 見出しメーカー 好きな色でCSS見出しが作れます | スタイルシート見出しメーカー 好きな色を選んでボタンを押すだけでシンプルな見出しが作れる見出しメーカー。 見出しサンプル集 見出しデザインと、HTML・CSSがセットになったデモサンプル集。 CSS見出しデザインのアイデア9個 H1一つでここまで出来るCSS見出しデザインのアイデア9個 切り取り線、テープ、リボン、吹き出し、アメリカンな吹き出し、付箋、メタルプレート、モザイク、旗、のような見出しをCSSのみで実現しています。ポイント解説などもあってわかりやすいです。 CSSのみで

レスポンシブ対応、SEO対策済みのblogger日本語テンプレートが完成したので、無料公開します。 その名は、「Vaster2」です。 Vaster2の５つの特徴とは？ Vaster2では、bloggerをより使いやすいように、以下の５つの特徴があります。 シンプルなデザイン 日本語対応のテンプレートデザイナー 6種類のオリジナルSNSボタン 関連記事を表示できる アドセンスを記事中＆下に設置できる 以下は、詳しく説明していきます。 １、シンプルなデザイン Vaster2では、どのユーザーでも親しみやすいように、シンプルなデザインにしてあります。 詳しくはこちらのリンクから：サンプルブログ 例えば、フォントは可読性の良い「Helvetica,”游ゴシック”」を使用し、h2やh3などの見出しも、可読性を重視してシンプルなデザインにしてあります。 また、サイドバーの「人気記事」のデザインも「読

ページ中の見出し(<h>タグ）を読み取って、自動で目次を作ってくれるプラグインを導入してみた 目次があると、その記事の内容がパッと見で分かり易いし、目的の内容がある位置まで移動出来たりするので便利。 そんな便利な目次を “jQueryで自動生成” してくれるプラグインが結構色々あったので、いくつか試してみた結果、自分の思い通りの表示になって、導入やカスタマイズも簡単な下記のプラグインを導入♪ 今回導入したプラグイン。（プラグインの概要や詳しい導入方法は下記のページをご確認下さい。） 「jQueryで目次を自動生成する「tocプラグイン」 / 小粋空間 」 【「tocプラグイン」をFC2ブログで利用する方法】 1.ファイル名を変更する 2.目次の表示場所について 3.CSSをテンプレートにコピペする 1.ファイル名を変更する 上記のページで、プラグインをダウンロードすると「jquery.to

FC2ブログの記事内の見出し構成を読み取って自動で目次(Table of Contents)を挿入させる方法について覚書。 無料で配布されているJavaScript(JS)ファイルとFC2ブログのテンプレート、CSSをちょっと変更するだけで誰でも超簡単に記事の目次が自動で挿入できるようになります。 テンプレートとCSSの変更は、基本的にはこの記事に記載のコードをコピペすれば大丈夫です。 ブログの記事に目次を設置するメリット/デメリット ブログに目次を設置するメリットとデメリットについてです。 メリット ユーザビリティの向上 記事の冒頭に目次を設置することで、ブログの訪問者がその記事の概要を一目で把握することができるようになります。 また、訪問者が記事をスクロールしなくても必要な見出し(章)にすぐたどり着けるようになるためユーザビリティが向上します。 SEO対策 ユーザビリティはGoogle

2016 - 05 - 23 注目のはてなカスタムテーマ「Naked」を全面的に採用してしまった話。ーフッターのカスタマイズ方法も解説 ブログ ブログ-ブログカスタマイズ あとで読む おすすめ記事 ブロガー、読書好きにはおすすめのKindle Paperwhite(2015)購入マニュアル！－2015年ベストバイ！ Feedly→Pocket→Evernoteを活用して効率的に情報をストックするおすすめの方法 GWどころか人生を持て余している人に捧ぐ超絶面白いサイト...！－『哲学的ななにか、あと科学とか』 スポンサードリンク 当ブログのデザインの大部分を頼らせてもらっているゆきひーさん（ id:ftmaccho ）がついにはてなブログテーマ『Naked』をリリースしたということで早速飛びついてしまいました！ デザインを変えるのは手間がかかるので最初は様子見と思ったんですけど、フッターカス

長かった！ここまで長かった…！ まとめてみたら1万字の大ボリュームになってしまった！ それなりに満足する出来になってきたので当ブログで行ったカスタマイズをまとめて大公開するぞっ！！（といっても初心者向け） カスタマイズする際は前のコードを取っておきましょう！カスタマイズ用のサブブログもあると便利！紹介だけなので各自で頑張ってみてね。僕も素人だったのでやればいろいろできますぞ。 導入テーマ タイトル周辺 タイトル画像 グローバルメニュー 記事本文 記事本文のCSS 記事内の一部を背景色と蛍光ペンみたいな下線で装飾する方法 リンクの色 変な行間の消し方 見出しのカスタマイズ 枠線 目次 記事タイトル等 日付 記事タイトルの見出し 記事上のタグと記事間のスペース調整 続きを読むボタン 挿入する画像に枠を付ける サイドバー プロフィール フォロー、シェアボタン サイドバーのモジュール まとめ 導入

ブログのSEOを強化しよう 2016年10月に記事を加筆・修正しました。 せっかくブログを運営するなら、アクセスが多い方がやりがいがあります。 TwitterやFacebook、はてなブックマークなどの一時的なアクセスがあっても、それは長続きしません。安定的にアクセスを増やすにはSEO対策を必ず行ない、Googleなどの検索エンジンからの流入を増やしましょう。 今回は、ブログを運営する上で必ず行ってほしいSEO対策について書いていこうと思います。項目はかなり多くなりますが、実践すれば必ず検索流入は増えるはずです。 当ブログでもSEO対策を行い検索流入も増えてきたため、安定的に数万のアクセスを稼ぐようになりました。記事の更新は少な目ですが、毎日たくさんの検索流入があります。 追記：2016年3月現在、約20万ほどのPVがあります。ブログを書いている時間はそこまで長くありませんが、SEO対策を

Site will be available soon. Thank you for your patience!

ituore.com 2024 著作権. 不許複製 プライバシーポリシー

執筆の息抜きにと思いテーマを作成していたのですが、コツコツと作り進めやっと完成をしました。本当は執筆後にと思っていたのですが、ブログを書かずにテーマの作成を進めてしまいました。実際に今このブログにもテーマを適用しています。見え方としては今見ているページのようになります。ちなみに現在はPCのみに対応しているので、スマホ等から見ている方ははてなページのままだと思います。 ２０１６年５月２９日にレスポンシブデザインに対応しました。 ※スマホ用のCSSは後の記事で一覧をまとめて書きます。 今回作ったテーマのコンセプトは、「主役はコンテンツ」と言うことで、よりコンテンツ作りに集中してもらえるようなテーマを作ろうという所から出発し、見てくれるユーザーからも見やすくするために全体的に余白や文字の間隔等にも余裕をもたせいます。そして楽しまれるような実用的なテーマを目指して来ました。その想いが現れるように、

はてなブログの新しいテーマを作りました！ついに完成です！ テーマの概要 全体のデザイン PC（768pxより大きいサイズ） タブレット（768px以下のサイズ） スマホ（680px以下のサイズ） 作成コンセプト デザイン詳細 背景色・背景画像 例 コードが必要なカスタム ヘッダーのメニュー フッターをつくりこむ コピーライトを表示 まとめ テーマの概要 全体のデザイン レスポンシブ対応のテーマ「Naked」を作成しました。 全体のデザインはこのようになっています。 デモブログはこちら theme-naked.hatenablog.jp こちらでは、ブログ全体のデザインが見れるだけでなく、今後のカスタマイズ情報も更新していきます。興味のある方は、ぜひこちらも購読をお願いします。 インストールは、テーマストアからどうぞ（注：インストールをすると、デザインCSSの内容が破棄されます。必ずバックア

Site will be available soon. Thank you for your patience!