きっかけはコチラの記事。 sore.konoblog.com もともと、<amp-ad>を使った方法があったのですが、はてなブログでそれをやるとタグが消えてしまっていたのです。 上記記事はアドセンスが貼れていたので、コードを覗いてみると、<amp-ad>タグと</amp-ad> の間に何か記述をするとアドセンスが表示されることが判明。 追記： 何も挟まないでもできるという報告があり確認してみると、Markdownとはてな記法ならコメントアウト挟まなくても大丈夫なようです。 ということで、AMP対応しているケーさんにお願いして試してみました。 www.weblog-life.net そしたら見事表示されました。 コードの説明などは上記記事をご覧ください。 <amp-ad>タグと</amp-ad> の間にコードを記述するのはGoogle的には大丈夫なのかは不明なので自己責任でお願いします。 追

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

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

どうも、よしまです。 昨日ブログのスマホ表示を少しいじってみました。 スマホからのアクセスが多いので媚売ってやろうという魂胆です（こら ネット上には自作のHTMLコードやCSSコードを作られている方がたくさんいらっしゃいますよね。 本当に尊敬します。 画像貼り付けタグしか知らない私でも本読んだらできるようになるんだろうか。 それよりまともな文章を書けるようになるのが先だな。 今回はその凄い方々のコードをお借りしてカスタマイズしてみました。 見出し スマホ版の見出しは字の大きさと太さが変わるだけだったので、線を引いてみました。 コピペさせていただいたのはこちらのブログ。 www.yukihy.com ここからh2は「四角」、h3は「よくあるやつ」、h4は「点線」を使わせていただいてます。 （PC版も「上下線」「よくあるやつ」「下線」を使ってます） コード内の「border-bottom:～」

記事タイトルにはてブボタンを設置 記事タイトルにシェアボタンを設置しているブログも多いのですが、表示処理が目線に追いついてなかったり、記事を読むまえからズラズラっとボタンや広告が表示されると萎えてしまうことがあります。個人の感想ですが。 そうはいっても、「あとで読む」ためにブクマをしておきたいとか、タイトルだけで大喜利をしたくなるという用途もわかるので、タイトル部分にアイコンフォントではてなブックマークへのリンクを設置する方法を考えました。 ネイティブアドのようにさりげなく 以前につくった、バイラルメデイア風シェアボタンと基本的には同じ構造なのですが、記事タイトル自体にまぎれさせるようにしています。 タイトルの一部のように見えるので、「あとで読む」と思ったときにしか気にならないし、それでいて明示的なアイコンなので誤クリックもないと思われます。 「B!」ボタンの設置方法 デザイン画面の「記事

注：この記事は、元記事の補完的役割をしています。 元記事：コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズ - Yukihy Life 不具合の発生と、それによりコードを編集していたのでお知らせです。 具体的な不具合 最初に皆さんに提供していたボタンで可能性のある現象として、以下のものが見られます。 Twitterから入りシェアをしようとすると、URLが貼られない 日本語URLの記事をシェアしようとすると、エンコードされていないURLが貼られてしまう 特定のPC×IEブラウザで、Twitter画面が開けずにエラーになってしまう それぞれ簡単に説明を加えます。 1.Twitterから入りシェアしようとすると、URLが貼られない 普通にはてなブログやブラウザから入ってTwitterからシェアしようとすると問題なくできるのですが、スマホのTwitterアプリか

7/7追記：重大な不具合を修正しました。詳しくはこちらをどうぞ。 【お知らせ】当ブログで配布していたSNSボタンに関して重大なミスがありますので修正をお願いします - Yukihy Life 注：この記事は元記事の補完的役割をしています。 元記事：コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズ - Yukihy Life はてなブログのシェアボタンコードを作っていて、以下のような記事で言及をいただきました。 lacucaracha.hatenablog.com おお！吹き出し、良いですね！他のブログとかでは良くみますし、どんなものかやってみたくなりました。 ブコメでも「ちゃんとした人に作ってもらいたい」とあったので、ちゃんとした人ではないですが一応の元記事作者として作ってみましたのでコピペコードにしたいと思います（これを使えとの強制は全くありませんので

はてなブログProにすればデザインcssを変更できる。 私がはてなブログProにしてから今月で2ヶ月目です。Proにアップグレードすることによるメリットはいくつかありますが、ブログのデザインを変更できるというのがその最も大きなものではないかと思います。 デザインを変更することの意味とは もちろん見た目が美しくなります。せっかく自分でブログやるならかっこいいデザインにしたいですよね。記事を書こうというモチベーションにも影響してくると思いますし。 さらに、ブログを見に来てくれる方にとっても親切ですよね。デザインについて考えるということは、同時に使いやすさについても考えることにつながります。 私がやったカスタマイズ 今回はすべてPCサイト版のカスタマイズです。スマホ版については後日アップしようと思います。 1．グローバルメニューの設置 こういうやつですね。 こういったメニューを設置することで、サ

最近はてなブログのカスタマイズ記事ばかり投稿しているゆきひーです。 ４月ぐらいまでは「HTMLって何？」ってレベルだったのですが、この数ヶ月でいろいろと学んできて、素人ではあるもののレスポンシブデザインぐらいまでなら作れるようになりました。 実際に集中して学んだのは１ヶ月ぐらいですが、趣味程度には十分だと思うので、どのようにして学んだのかをまとめてみたいと思います！ Webデザインをある程度できるようになるためのステップ Step1 「Progate」で作りながら学ぶ Step2　「ドットインストール」で総復習&補完 Step3　書籍を数冊読んでできることを確認する Step4　実際に自分のブログに応用してみる その他Webデザインを効率よく学ぶコツ Webデザイン系ブログをFeedlyで定期購読する クロームの拡張ツール クロームのディベロッパーツール Color Pick Eyedro

注：コピペコードを写す前に、元々のhtmlやcssをメモ張にコピペするなど、必ずバックアップを取っておいてください！！ はてなブログで最近テーマストアを覗いたりしていると、本当に面白くオシャレなテーマが増えてきましたよね。 また多くのテーマがレスポンシブ対応をしてますが、現実にレスポンシブにしている方はあまり多くないと思います。 せっかく優秀なレスポンシブテーマがあるのに採用しない理由として、グローバルナビを後付けで行っているため、それがレスポンシブになっていないというのがあるかなあと。 もちろん、はてなデフォルトのスマホ表示が十分オシャレというのもありますが。 そこで今回は、よくあるWordPressのブログのように、グローバルナビをレスポンシブ対応させ、ブラウザ幅が縮んだらトグルメニューになるようなカスタマイズを紹介します。 ちょっと難易度が高いかもしれません。また、注意点として若干遅

2015-06-14 はてなブログProにしてからブログデザインをカスタマイズしました ブログ告知 Tweet photo by dan taylor 一昨日にProにアップグレードしました。 ブログを本日付でProにアップグレードしたよ - ちゃりろぐkazunoricc.hatenablog.com ブログのカスタマイズに力を入れました Proアップグレード前に1カラムにしましたが、再び2カラムに変更しました。 元々カスタマイズしていた見出しやフォントなどのCSSなどは、そのままの状態を移行しました。スッキリして見やすくなったと思います。（自画自賛！） Googleアドセンス広告をPC・スマホに設定 PCとスマホで別々にGoogleアドセンスの広告を設定しました。 PCではリード文下と記事下、そしてサイドバーの3箇所です。スマホはリード文下と記事下の2箇所。ヘッダーに入れようかどうかは

はてなブログカスタマイズ 今朝、読者登録しているブロガーさん達の記事を読んでいたら、鈴木こあら (id:suzukidesu23)さんが「はてなブログ」のヘッダーとフッターを非表示にされていました。 はてなスターも通知が多過ぎて困り、非表示にされるとか。 この辺の調整はブロガーさんに任されている部分なので全然良いと思います。 ただ気になったのは、スマホで見たら ヘッダーは出ているし フッターも見えていたので パソコン表示のヘッダーとフッターも消すなら、どうせなら「スマホのヘッダーとフッターも消したら良いのでは？」とブクマで書きました。 はてなブログの標準ヘッダ＆フッタを消して、はてなスターを非表示にしました。 - 鈴木です。 スマホ表示のヘッダーとフッターが残ってますよ(^_^)vどうせ消す時はこちらも消した方が良いのでは(^_−)−☆2015/06/11 05:04 そしたらば「 id:

2015-06-06 ブログを書く作業を効率アップする工夫２つ。関連記事の自動挿入と、記事下の変更。 ブログ運営 1　関連記事を自動で挿入してくれるツール ブログの過去記事を、自動で挿入してくれる便利なツールを見つけました。 Milliard関連ページプラグインについて | シスウ株式会社 こちらのページを下にスクロールし、「利用方法」のところから自分が使っているブログサービスを選択すると簡単にコピペで過去記事を挿入できます！ 私の場合は、記事下の部分に入れて、スマホはスクロール非対応にしています。スクロールすると沢山の記事が表示できる反面、操作しずらくなると思ったためです。 実際に挿入した画面はこちら。「こんな記事も書いてます」という下に、過去記事が自動でサムネイル画像付きで表示されます。視覚的に訴えるので、もうひと記事読んでみようかな？という気になりますね！ 今まで、記事を書くたびに自

この記事は9/30より不具合が発生しますので、 www.yukihy.com こちらから設定をお願いします。 以下の説明部分を表示する 5/28追記１：シェア数が表示されない不具合が発生しております。現在検証中です…すみません（汗）と言いつつ僕のは表示されるという 5/28追記２：シェア数が表示されない不具合を解消しました。具体的にはコピペコード１を修正しています。お手数ですがもう一度設定をお願いします。 6/7追記３：元々記事にも書いていましたが、2015/8/30より新しいYahoo Pipesをつくることができなくなるそう（参考：Yahoo Pipes Blog - Pipes End-of-life Announcement）それに伴い、「Google+」と「Pocket」のシェア数が表示されなくなります。 6/29追記４：HTML（４と６）でエラーが発生していたので修正しました。

まよ犬さんの記事に触発されて僕もGWになんかせないかんと思いたち、メニューを付けてみました。 mayoi-inu.hatenablog.jp 追加したソースは以下の通りです。 HTML（ヘッダのタイトル下に追加） CSS（デザインCSSに追加） ※これをそのまま追加しても、すべてのはてなブログできれいに表示はされるわけではないのでご注意を！ これで少しはサイトらしくなったでしょうか。TOPページもカスタマイズできたらなぁなんて・・・。そういう人はWordPress使ったほうがいいですよね。さて、もうそろそろはてなブログもProの有効期限が切れるので考えださないと。 移行するんだったらものすごくめんどくさそうだなぁ。 必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア"の極意 作者: コグレマサト,するぷ 出版社/メーカー: インプレスジャパン 発売日: 2012/

僕がこの連休中にやったこと。 それは、はてなブログのカスタマイズでした。 連休って、どこに行っても混んでますし、かといって何もせずにテレビ見たり、ネットしたり、本読んだり、ではつまらない。 そんな時にブログのカスタマイズってちょうどいいんですよ。 やり出すと結構時間がかかりますからね。 ということで、僕がやったカスタマイズを書いておきます。 今回のカスタマイズのスタンス とにかくモバイル用ページの調整です。 これにつきます。 今やPCからよりもモバイルでのアクセスのほうが多い時代です。 ここをしっかりやっておいて損はないのです。 ちなみに、これから書くカスタマイズをやるためには、ほとんどの場合、有料版である「はてなブログPro」の契約が必要です。 Proは広告をはずせる等のメリットもありますが、僕は「モバイル用ページをカスタマイズできる」点が一番のメリットだと思ってます。 これを機会にPr

昨日の続きです。 昨日は、CSSを使った吹き出しを理解することころまででした。 今日はそれを応用して、モバイル版の吹き出しの形を少しだけ変えていきます。 ちなみに、この方法は「はてなブログPro」を利用している方のみ可能だとういう事を先に書いておきます。 では、早速。 ★ちなみに前回の記事はこちらです はてなブログで吹き出しを使おう！ CSSでの実装方法を勉強したので解説します。 - いつもマイナーチェンジ！ 目指すイメージ まず、PC版はこんな感じ。 モバイル版はこう。 画像が真ん中に配置されたのに加えて、吹き出しの三角も上辺の真ん中に移動しています。 こんな感じで、PCから見るか、モバイル端末から見るかによって、自動で見え方を変えたいわけです。 スマホの画面って横幅が狭いので、PC版のレイアウトだと文章が読みにくいですからね。 では、やっていきます。 モバイル版のCSS 使っているCS