Maximal Life

渋谷で働く営業本部長のブログ

インターネット・ブログ

はてなブログ:コピペだけで実施した Minimalism のカスタマイズまとめ

2018年9月にテーマを「Minimalism」に変更してカスタマイズしてきました。 文系人間の私のカスタマイズはすべてコピペです。 オーソドックスなカスマイズはほぼ完了したので、ここらで一度まとめてみました。 コピペだけでカスタマイズしたい方々の参考にな…

はてなブログ:オシャレなアイキャッチ画像の作成方法

はてなブログではアイキャッチ画像を設定する事ができます。 設定しない場合には、記事内の一番上の画像がアイキャッチ画像として利用されます。 私は記事タイトルが記載されている画像を作って利用しています。 アイキャッチ画像の作成について備忘録を残し…

はてなブログ:大見出しのタグを h3 から h2 に自動で変更する方法

はてなブログをコピペだけでカスタマイズをしています。 次にどんなカスタマイズができるか Google 先生に聞いてみました。 なんかちょっと気になったのがこういう話題。 「はてなブログの大見出しタグは h2 に変更した方が良いのか?」 これは何の事を言っ…

はてなブログ:WordPress 風にフッターをカスタマイズする方法

Wordpress ではフッターに情報を載せるのが当たり前のようです。 はてなブログしかしらない私にはあまり馴染みがなかったのですが...。 フッタが格好良いブログに触発されて、カスタマイズしてみました。 もちろんコピペだけです。 フッターに記載したい内容…

はてなブログ:記事一覧に「前のページ」ボタンを追加する方法

はてなブログPro の記事一覧。 「次のページ」はあるのですが「前のページ」ボタンがありません。 ブラウザの履歴で戻れば事足りますが、ちょっと格好悪いですね。 Google 先生に聞いてみると、簡単な解決策が見つかりました。 という事で実装してみましたの…

はてなブログ:アコーディオンパネル(閉開式コンテンツ)でテキストの表示・非表示を切り替える方法

私は文系人間でこのブログもコピペだけで作ってます。 その過程をログっておこうとすると、どうしても HTML のコードを記事内に貼り付ける事になります。 長いコードを貼ると記事がやたらと長くなってしまい、なんか格好悪いですよね。 今回はこれをアコーデ…

はてなブログ:スマホでヘッダー画像がきちんと表示されない場合の解決方法

今回はトラブルシューティングです。 はてなブログのテーマ”Minimalism”をカスタマイズしてます。 コピペだけで試行錯誤しているのですが、思い切ってテストサイトを本番サイトにコピったりしてました。 そんな時気付いたのですが... 「スマホサイトでヘッダ…

はてなブログ:記事タイトルをおしゃれにカスタマイズする方法

標準のブログ記事のタイトルはすっきりしているが味気ないですね。↓ ちょっとだけオシャレに、記事タイトルを強調してみました。 といっても、私にはコードは書けませんので、コピペのみです。 ダッシュボードから「デザイン」→「カスタマイズ」→「デザインC…

はてなブログ:読者になるボタンのカスタマイズ方法

標準の”読者になる”ボタンって小さくて目立たないですよね。 面白いブログを見つけて、読者になろうとしても、なかなか見つからない事がたまにあります。 これはブログ運営者としては何とかしなければならない事象です。 という事で、”読者になる”ボタンのカ…

はてなブログ:グローバルナビをコピペで追加する方法

グローバルメニューを設置してみたいと思います。 グローバルメニューとは ヘッダーのタイトル下に HTML をコピペ デザインCSS へコードをコピペ グローバルメニューとは グローバルメニューとは、タイトル下によくあるリンクメニューの事です。 「グローバ…

はてなブログ:サイドバーのプロフィールに SNS ボタンなどを設置する方法

サイドバーのプロフィールをもう少しカスタマイズしてみたいと思いました。 現状は標準のプロフィールの画像を大きくしただけ。↓ ”読者になるボタン”、”Twitter フォローボタン”も標準のプロフィールで表示させてます。 これだと、順番の入れ替えすらできま…

はてなブログ:プロフィール画像を大きく目立たせる方法

はてなブログのプロフィール。 私はサイドバーのトップに表示しています。 しかし、標準だと写真も小さくて目立ちません。 これでは、about ページを見てみたいと思ってもらえません。 そこで画像を大きくしてみました。 デフォルトのプロフィール プロフィ…

はてなブログ:ヘッダー部分に画像を挿入し自分好みにカスタマイズする方法

はてなブログのヘッダー、何もいじっていない状態は至ってシンプル。↓ 今回はこれをカスタマイズしていきます。 はてなブログ標準のヘッダーメニューを非表示にする ヘッダーに画像を挿入する 画像をヘッダーに表示させる ヘッダーの余白をなくす タイトルと…

はてなブログ:おしゃれな SNS ボタンを記事上下に貼りつける方法

標準の SNSシェアボタンだと、形がまちまち、ガタガタで格好悪いですよね。 Before: SNS シェアボタンをおしゃれなボタンに変更したいと思って調べてみました。 もちろんコピペだけでできる方法です。 今回も Google 先生に調べてもらうと、見つかりましたの…

はてなブログ:見出しを格好良くカスタマイズ

いろんな方のブログを見ていると、格好良い見出しのブログが沢山あります。 自分のブログもああいう風にしたい...。 またまた、Google 先生にお願いしたら、解決策が見つかりました。 現状は以下のようになっています。 /****************文字サイズの変更**…

はてなブログ:エントリーの文字サイズの変更

はてなブログで記事を書いている訳ですが、歳のせいか最近文字が小さいと感じるようになりました。 調べてみるとデフォルトでは、PC・スマホともに 16.5px のようです。 という事でとりあえず記事部分の文字サイズを大きくしてみました。 もちろん、Google …

はてなブログ:サイドバーに Twitter のタイムラインを表示する方法

最近、はてなブログを頑張ってるんですが、同時に Twitter も頑張ってます。 今までは、Facebook 一辺倒だったのですが、Facebook は単なる身内同士の連絡手段でしかない。 これからは、ためになる情報を不特定多数の方にお届けしたいと思います。 その手段…

はてなブログ:テスト用ブログの作成

時間がある時には、グーグル先生にお世話になりながら、はてなブログのカスタマイズをしています。 「CSS とか HTML って何?」っていう私のカスタマイズは基本コピペのみ。 コピペでどんな感じになるのかは、ある意味ギャンブルなんです。 今までは本番環境…

はてなブログ:パンくずリストの導入

コピペオンリーでブログをカスタマイズしている私は常にネタを探してます。 ネットで先人の方々のカスタマイズを調べていて見つけました。 パンくずリスト 何の事かわからなかったのですが、これの事だったようです。↓ 設定方法はすごーく簡単です。 はてな…

はてなブログ:シェアボタンを画面横・画面下に固定する方法

通常シェアボタンは、記事の上、下に設置されています。 これだと記事を読む前か読んだ後にしかシェアボタンは押されません。 私のブログもそんな感じです。↓ 普通は、記事を読む前にシェアボタンを押す人はいないと思います。 「もし、記事の途中で読むのを…

はてなブログ:フッタにコピーライトを記載する方法

ネットサーフィンしていたら見つけました。 特に必須という事はないかもしれませんが、なんか格好良いのでやってみました。 ページの一番下に記載されているこういうやつですね。↓ Copyright(C) 2017-2018 ○○○ All rights reserved. 意味はあまり理解してい…

はてなブログ:上に戻るボタンを設置する方法

最近はてなブログのカスタマイズ記事を書くことが多くなりました。 基本的にはコピペでのカスタマイズ方法です。 コピペメインなので、長いコードを記事に貼り付ける事が結構あります。 閉開式コンテンツで表示・非表示を切り替えたかったのですが、やり方が…

はてなブログ:サイドバーの一番下のコンテンツを固定する方法

サイドバー固定って何? 私はトップページを一覧表示にして記事をダイジェストにしています。 記事の Max は 15 記事ですが、サイドバーの Bottom と丁度良い記事数にして調整してました。 ただこの方法だと、トップページ以外は調整できないんです。記事は…

はてなブログ:プライバシーポリシーの設置方法

そろそろ Google アドセンス を申請したいと思っています。 申請前にやるべきことは何かなぁ...と調べてみました。 いろいろな方のサイトを参考にすると、以下をやらなくてはいけないらしい。 はてなブログPRO に変更(済) 10以上の記事の作成(済) お問い…

はてなブログ:お問い合わせフォームの作成とグローバルナビゲーションへの設置方法

Google アドセンス の申請をしてみようかなぁと思い、調べ物をしてました。 審査に一発合格している人のサイトで、どんな事をしているのか物色していると...。 多くの人が「問い合わせページの作成」をしてる事に気付きました。 私のブログには「問い合わせ…

はてなブログ:強調表示の太字部分に蛍光ペンのアンダーラインをつける方法

はてなブログでは、ブログ記事内の単語を強調したい場合、ボタンクリックだけで太字にしたり、下線を引いたりする事ができます。 私も太字・下線を利用していますが、デフォルトだとなんか変な色になってしまう?↓ この蛍光ペンのような部分の色を変えたいと…

はてなブログ:Font Awesome 5 でかっこいいアイコンを使う方法

グローバルナビゲーションを設置する時にも検討したのが、Font Awesome のアイコン。 今回、about ページをかっこよく編集するにあたり、オークニさんのブログ、オークニズムからコードをコピペさせて頂きました。 詳しくはこちらの記事をお読み下さい。↓ ww…

はてなブログ:about ページをかっこよく編集する方法

皆さんのブログを見ているとかっこいい About のページを作っている人が沢山いますね。 そのブログの主がどんな人かは確かに気になりますよね? 私もかっこいい About のページを作りたいと思いネットを徘徊していたら、素晴らしいブログを見つけました。 【…

はてなブログ:目次の作り方とカスタマイズ方法

他の方々のブログを読んでいると皆さん目次をつけていますね。 あれは記事の内容がひと目でわかって良いなぁとずーっと思っていました。 自分には難しいと思っていたのですが、ググってみると簡単そうだったのでやってみました。 こちらもログに残しておきま…

はてなブログ:自分の過去ブログをブログ内に貼り付ける方法

ブログを書いていて過去の自分のブログを貼り付けたいと思うことありますよね? 思ったけど、方法がわからなくて調べたので、ログっておきます。 カード形式で貼り付ける方法 ブログへの URLリンクを貼り付ける方法 文字にブログリンクを埋め込む方法 カード…