シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳
※当テーマの紹介する際は、テーマ配布ページではなくこの記事のURLを使用してください。 ※追記あり：デザインのアップデートについて+ 元のデザインに戻す方法 当ブログ「ひつじの雑記帳」を開設して間もなく、フラットデザイン風のおしゃれな自作テーマ「Codomisu Flat」を公開しました。 レイアウト的に少し扱いにくいテーマでしたが、思っていたよりたくさんの方に使ってもらえました。 力こそパワー +ログ ゼロから始めるビットコイン さんなど特におしゃれにカスタマイズされているので是非見てみてください。 あれから約2ヵ月経った今、オリジナルのはてなブログテーマ第二弾「Minimalism」を公開しました！ Minimalism（ミニマリズム）の特徴 このテーマは、テーマ名「Minimalism」にある通り、デザインは最小限のみに抑えてあり、「美」をとことん追求しました。 こどみすフラットとは
watchOS4対応！AppleWatchの文字盤全種類のカスタマイズ項目を総まとめ
この記事には広告を含む場合があります。 記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。 Apple Watchで一番よく使う機能と言えば、当たり前ですがやっぱり「時計」機能。 気分やバンドのデザインに合わせて文字盤を自由に変更できるのがApple Watchの大きな魅力なので、文字盤のカスタマイズ方法を理解しておくのは、Apple Watchを使いこなす最初の一歩です！ 一体どんな文字盤があって、どんなカスタマイズが可能なのか。watchOS 4になって各種文字盤の何が変わったのか。 一度しっかりと再確認しておきましょう！ Apple Watchの文字盤をカスタマイズする方法（Apple Watchで設定する場合）文字盤を違う文字盤に切り替える Apple Watchの文字盤は、いつでも気軽に切り替えることができます。 切り替え方法は簡単で、Ap
はてなブログの関連記事を記事下よりも下に移動させるカスタマイズ - NO TITLE
はてなブログの関連記事を表示させたのですが、記事下に設置しているシェアボタンとかアドセンスが関連記事の下になってしまうのがちょっと気になりました。 ということで、今回はCSSだけで記事下（カスタマイズができるエリア）と関連記事の位置を逆にするカスタマイズです。 かなり簡単なのですぐに実装できます。 以下のコードを「デザイン」→「カスタマイズ」→「デザインCSS」に追加するだけでOKです。 /* 関連記事を記事下よりも下に */ .customized-footer { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .entry-footer-modules { -webkit-order:2; order:2; width: 100%; } .entry-footer-ht
Google AdSenseのダブルレクタングルをスマホ表示の時に片方だけ消す方法 - FOXISM
ブログの記事下にアドセンス広告を横に2つ並べて表示している人は多いですよね。いわゆるダブルレクタングルというものです。これ、スマホ表示の時にどうしてますか？ スマホ表示の時も無理やり横に並べることはできますが、それでおかしな横スクロールが発生してはカッコ悪いです。かといってこれを縦に2つ並べると、おそらくポリシー違反となってしまいます。 ならばどうしたらいいのかと言うと、答えは「公式が認める方法を使って、スマホ表示の場合に広告を1つ消す」です。 ダブルレクタングルというのは、上の画像のようにレクタングルサイズ（300×250や336×280）のアドセンス広告を横に2つ並べることです。効果が高かったりバランスがいいということで採用している人も多いと思います。 はてなブログのテーマでレスポンシブデザイン対応のものを使っている時、この広告表示にも注意しておかないと先に書いたように横スクロールが発
レスポンシブ対応！tableタグを使わずアドセンスを横並びにするカスタマイズ - よなかのはなし
2016 - 09 - 03 レスポンシブ対応！tableタグを使わずアドセンスを横並びにするカスタマイズ ブログ はてなブログ Twitter Hatena Pocket ８月の中旬にGoogleアドセンスの規約が変わり「広告３枚制限」が撤廃されたそうです。そこで記事中に２枚、記事下にダブルレクタングルで２枚広告を配置するカスタマイズを行ってみました。 Googleアドセンスの広告が１つの記事に４枚貼れる！ 当ブログにおけるアドセンス広告位置ビフォーアフター AdSense広告を横並びにしてダブルレクタングルを実装する 1、アドセンス広告のコードを作成する ２、HTMLコードを記述する ３、CSSを記述する Googleアドセンスの広告が１つの記事に４枚貼れる！ アドセンス使用における従来の規約では１つの画面に貼れる広告は３枚までと決まっていました。レスポンシブデザインを採用している当ブ
【本当にコピペ一発！】はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ
はてなブログで広告の本文中への自動挿入を実現できるこの記事、いろんな方に言及していただいて、コメント等をいただいて応用例を随時増やしてたりしております。 でもですね、ずっと心配してたんですよ。みなさま、実はこんなことを思ってるんじゃないのかなって。 コピペで簡単って！全然コピペで簡単じゃねえよ！scriptをscripにするというわけわからん手順はあるし、なかなかうまく動かねえし！ 応用例追加するのはいいんだけど、どの部分がどこのコードに対応してるのかよくわかんねえからカスタマイズできねんだよ。だれもがプログラマだと思ってんじゃねえ ってね。いや、みんなくちには出さないけどそう思ってるはずだ、と。そんな被害妄想で夜も眠れない日々を過ごしていたわけです。 そんなわけで！ つくりましたよ！ マジでコピペで簡単なやつを！ あなたがやるのは、アドセンスのコードをはっつけて、作成！ボタンを押すだけで
【はてなブログ】おすすめ記事・関連記事リンクの見出し・アイコンを変更するカスタマイズ - うち天
こんにちは、４歳の女の子、１歳の男の子をもつアラフォーのおじさんです。 はてなブログのカスタマイズをするとき、シロマティさんのブログ NO TITLの記事にお世話になっている人も多いのではないでしょうか。 わたしもたびたび参考にさせてもらっています。 その中でもこちらの記事を参考にしてリンクに枠を付けているブログをたくさん見かけます。 http://shiromatakumi.hatenablog.com/entry/2017/01/16/205403 今回はこちらのカスタマイズを更にカスタマイズして、リンクの見出しやアイコンを、自由に変更しちゃいます。 リンクの見出しをカスタマイズしよう CSS 記事中で見出しとアイコンを指定する 注意点 おわりに リンクの見出しをカスタマイズしよう まずは実際のサンプルをご覧ください。*1 例えばこんな風に、いろいろな見出しを付けられるようにします。
公式関連記事を好きな位置に移動させるスクリプトを書いてみた - cBlog
更新：2018-05-07 #コード追加位置修正しました 出典：staff.hatenablog.com サッカー観るから手短に。 公式の関連記事機能がリリースされましたね。 staff.hatenablog.com 私の場合、勝手にONにされる以外はポジティブな印象を抱いています。その理由は、それよりカスタマイズ方法が先ですよね。 カスタマイズ方法 次のコードは、関連記事を任意の要素の直後に挿入するものです。記事下のHTML欄に追加してください。 <script> var temp = document.getElementById('entry-footer-secondary-modules'); var upper = document.getElementsByClassName('UPPERCLASS')[0]; upper.parentNode.insertBefore(te
関連記事と記事下の順番を変えたり、いろいろカスタマイズ - FOXISM
はてなブログに自動で「関連記事」が表示され始めたので、前回サラッと見てみました。それで、その時は「関連記事が記事本文の直下にあって使いにくい、カスタマイズした記事下と入れ替えたい」みたいに書きましたが、あっさりできたので共有します。 記事下と順番を入れ替える css ちょっと細かい解説 記事下の要素の間に入れる html css ちょっと細かい解説 そのほかのカスタマイズ 2列にする ○○を非表示にする サムネイルを消す 日付を消す 冒頭文を消す リストの5番目を消す 「関連記事」の表示を別の名前にする サムネイルを大きくする まとめ 記事下と順番を入れ替える 通常は「本文」→「関連記事」→「カスタマイズした記事下」の順番になりますが、これを「本文」→「カスタマイズした記事下」→「関連記事」とひっくり返します。cssだけで簡単にできます。 css .customized-footer{ d
はてなブログでGoogleにパンくずリストを認識させるブログパーツ - 太陽がまぶしかったから
photo by keso こちらのカスタマイズは使用しないでください data-vocabulary.org のサポートが終了されるため、こちらのカスタマイズは利用できません。はてなブログ公式の機能を利用したり、リンク先で紹介されている方法への差し替えをお願いします。 Googleにパンくずリストを認識させるプラグイン 最近のGoogle検索ではブログ内のカテゴリを認識して、検索結果がサイト上のどこに位置付けられているかを表示するようになっているのですが、breadcrumbタグを利用したマークアップをしていないとGoogleから認識してもらえません。 このためJavaScriptでパンくずリストを生成してGoogleにカテゴリを認識させるスクリプトを開発しました。現在のGoogleではJavaScriptの実行時に生成されたリンクやマークアップを解釈しています。『Google Sear
5分でできる！固定メニューバーにはてな読者ボタンを設置する方法 - 現代版羊システム
2017 - 03 - 18 5分でできる！固定メニューバーにはてな読者ボタンを設置する方法 カスタマイズ ブログ はてなブログに固定メニューバーを設置している人は多いですよね。 この記事を見ているということはお気づきでしょうが、僕のブログにも設置してあります。 この 固定メニューバーは常に表示され続ける ので、ページ内遷移の上昇が期待でき、ページ/セッション率の上昇、直帰率の低下、につながることだと思います。 ところで読者になるボタンですが、PC画面だとよくサイドバーのプロフィール欄に設置しているのが確認できますが、 スマホ画面だと、『どこにあるのかがわからない…』 といったブログは多いかと思います。 読者が増えてほしいのに見つかりにくい読者になるボタン そんな 読者になるボタンを固定メニューバーに常に表示させて置くことが出来れば魅力的 だとは思いませんか？ 今回はそんな魅力を感じるカ
『ZENO-TEAL』おすすめカスタマイズ方法9選!! - 現代版羊システム
2017 - 03 - 20 『ZENO-TEAL』おすすめカスタマイズ方法9選!! カスタマイズ ブログ 最近追加された新テーマ 『ZENO-TEAL』 を知っていますか？ www.foxism.jp こちらのブロガーが作成した新テーマ。 このブログもZENO-TEALを使用しています。 トップページが2列のカード型 (カテゴリも表示される)など、シンプルかつおしゃれなテーマとなっています。 ワードプレスでは２列表示できるテーマはたくさんあったのですが、はてなブログでは今までなかったかのように思います。 僕のもう一つのブログ 『現代版ゲームシステム』 でも2列表示にしているので、はてなでも2列表示できないかなと思っていた時に見つけたので即導入しました。 ただ、僕にとってはヘッダー、フッターが少しシンプルすぎたのと、何も弄らずそのまま導入しているブログが多く、それらのブログと差別化を図りた
パネル型のホームがイカした「ZENO-TEAL」にテーマを変換。いろいろと行ったカスタマイズについても解説 - HELLO CYBERNETICS
新しいテーマに対応させるべく、ここに記事紹介文を書いていきます。 現在かなりの突貫工事中。 ZENO-TEAL テーマを変える時の注意点 一般的な注意点 ZENO-TEALでの注意点 アイキャッチ画像の位置 見出しの設定 行う突貫工事 ホーム画面を整える 記事数の調整 １ページ目に載る記事の編集 フッターを整理する カラーを変更 新しくちゃんと設定したもの サイドバー固定 記事の下に表示される関連記事 コード生成 適用例 最後に やるなら覚悟決めて ホームをアーカイブに飛ばして誤魔化す ZENO-TEAL はてなブログで提供されているカスタマイズテーマの１つです。以下がサンプルサイトとなります。 zeno-teal.hatenablog.com テーマを変える時の注意点 一般的な注意点 実験用のブログを１つ持っておくと便利です。そこでいろいろテストするようにしましょう。 実際にブログのテー
はてなブログ新テーマ「ZENO-TEAL」で色を変えてカスタマイズする方法 | スキ、はじめました。
ユキガオ（@yukigao_22）です。 陶芸家。長崎出身/神奈川在住。 「好きなことして生きていこう」と決意し、約10年勤めた会社を辞めて陶芸を始める。京都で3年半ほど作陶に打ち込み、フリーランスの陶芸家に。 作品は、ネットショップで販売中。 生い立ちやものづくりへの想いなどは、詳しいプロフィールからどうぞ。
【はてなブログのカスタマイズ】テーマをZENO-TEALに変えたので変更点をまとてみた - SEOカフェ
はてなブログの新テーマを気になっていたZENO-TEALに変えたので、行なったカスタマイズをまとめるわ！ ワードプレスの某有料テーマに似ていることから人気が出て来たけど、カスタマイズの記事が少ないのも事実。 通常のインストールだけでなく、ちょこっとプラスαでカスタマイズしたことも紹介します。 ちなみに以前使っていたテーマはBrooklynでした。これまた有名ですね。 ZENO-TEALをインストールして適応すればそれだけで使えるようになるよ！ ・見た目がワードプレスの有料テーマに似ている ・新テーマにする時は必ずstyle.cssやヘッダ等のバックアップを！ ・有料プランのproじゃないと設定が厳しい ・ユーザビリティの改善にはZENO-TEALが良いと思う テーマのダウンロードは、ココから。 ZENO-TEAL - テーマ ストア ZENO-TEAL実装でカスタマイズしたこと 全体のカラ
はてなブログ向け「404 Not Found」のカスタマイズ方法【404エラー】
こんにちは。 やろうやろうと思って、放置してたんですが、「404 Not Found」のカスタマイズにやっと着手しました。 と言ってもコピペで完了できてしまうので、難しい手順は特にないんですが、せっかく変えたので記事にします！ ※当サイトは「はてなブログ」から「ワードプレス」に移行しています。リンク先に飛んでもイラスト付きの404エラー表示にはなりませんが、はてなブログでは実装可能です。あらかじめご了承ください。 404エラーとは まずは404エラーについて。 サイト運営していればお馴染みの“404エラー”。ある程度ネットに触っていれば404に限らず何かしらのエラーを見たことがあるはずです。 そのなかでも、404エラーは「見たことあるかも？！」という方が多いはず。 404エラーは、記事の削除やURLの変更等で、存在しないページがリクエストされた時に表示されるエラーコードです。 SEO効果は
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢
ブログテーマ「Codomisu Flat(こどみすふらっと)」を導入しました - 力こそパワー
本日は久しぶりにブロガー向け記事となります。 このブログはPCとスマートフォンで表示を変えていますが、今回はPC表示時のブログテーマを変更しました。 本日は導入したテーマと、「どうしてそのテーマを選んだのか」という理由をご紹介させていただきます。 Codomisu Flat テーマ選びの基準 メインカラムの幅が広い 余計な装飾が少ない 今後弄りたい箇所 最後に Codomisu Flat 今回選んだテーマはこどみす(id:codomisu)さんが昨日公開したテーマ「Codomisu Flat」です。 hitsuzi.hatenablog.com こどみすさんのブログはスマートフォン時のデザインが本当に格好良くて、Twitterで「デザイン作成中」との話を聞いてずっと楽しみにしていました。 公開されたテーマも期待通りのものでしたので、その夜のうちに早速導入することに。 テーマ選びの基準 私が
はてなブログテーマ『ZENO-TEAL』を採用して1ヶ月...使い勝手と感想！ - 喫茶ヒトヤスミ
みなさま、ごきげんよう！yusato（ゆーさと）でございます。 2017年2月26日より当ブログ『ヒトヤスミ』を運営しております。 それから約１ヶ月後の3月20日にはてなブログProの契約...そして、はてなブログテーマ『ZENO-TEAL』の利用を始めました。 今回は『ZENO-TEAL』の感想を書きたいと思います。 はてなブログProの方はとりあえず一度試して損はない！ カスタマイズをせずとも綺麗なフラットデザインに テイスト変更も簡単に！！ Gナビもオススメ記事もフッターも...Let'sカスタマイズ！ はてなブログProの方はとりあえず一度試して損はない！ 『ZENO-TEAL』のテーマは下記ページよりインストールが出来ます。 ZENO-TEAL - テーマ ストア テーマ作者さんの説明にも書いてある通り、トップページはカード型となっております。 はてなブログProでないと、ここに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.bombkun.com/entry/2017/05/20/161455
