めいたくハウス転職で得た経験、三重県の穴場などの情報、「めいたく」と「かちこ」の頭の中を書いています。役立つ知識を発見してみてください。めいたく(@floor0429)です。ブログを始めて6ヶ月が過ぎました。6ヶ月間を毎日更新を実践出来ています。記事を量産するのが成長の早道とは分かってはいるのです。無理をすると続かないので無理をしないように、本業に影響が出ないようにしていました。6ヶ月継続出来たところで、そろそろブログの見た目、デザインを少し考えてみてもいいのではと思い、プチ程度ですがリニューアルしてみました。今までカスタマイズを放置してきた理由アドバイスは多岐に渡っていた見出しのデザインSNSでのシェアボタンSNSでのフォローボタンMilliard関連ページのプラグインの設置スマホ画面でのはてな関係リンクの消去アフィリエイトの申請ブックマークレットの活用まとめ今までカスタマイズを放置してきた理由ブログを始めたときに、カスタマイズはテーマを選んだだけでした。記事を書かないことには始まらないなと、ただただ書き続けていました。そんなときにオンラインサロン「イケダハヤトのブログ塾」(2018年5月現在運営していません。)を見かけて参加してみました。現在は退会しています。数を書かないと始まらないということで、100記事書き上げたところで、ぼくのブログをみてもらってアドバイスをもらったんです。オンラインサロン「イケダハヤトのブログ塾(現イケハヤメディアラボ)」「ヨッセンスクール」に参加してみて、決めたこと感じたことアドバイスは多岐に渡っていたざっくりと言いつつも、事細かにアドバイスをもらいました。まとめると記事をたくさん書いてからの話ってことでした。カスタマイズは後回し、PVも1週間に1度みるくらいでした(笑)ぼくがカスタマイズの際に参考にさせてもらったサイトです。ゆきひーさんありがとうございます。LifePR:はてなブログのテーマ「Naked」を作成しました!デフォルトでもカスタマイズもしやすいテーマです。数も多くごちゃごちゃになってきたので、一旦まとめたいと思います。新しいカスタマイズを行い次第、この記事にどんどん付け加えていこうと思っています。Lifeかなり時間がかかりました。一度失敗してハマったり・・・(泣)css等の知識がないから余計に時間がかかりますよね。センスがあるのかないのか分かりませんが、直感です!ほとんどこの「ゆきひー」さんのサイトの気になるものを上から順番に設定していった感じです。見出しのデザインもともとのテーマに左に縦某が入って色がついているので、知識がないのでそれを利用したデザインにしました。基本は青系が好きなので、気にいった感じにデザインしてみました。コピペで出来るのがいいですね。Life最近、カスタマイズばかりしているゆきひーです。見よう見まねで一通りやっています。デザインとかかなり難しそうだなと思っていたのですが、最初の数個を理解すると意外と応用範囲が広いことに驚いています。僕がブログを始めたときに困ったのが、見出しをカスタマイズしたいのに全くできないというものでした。おしゃれ」とかって検索すると本当に豪華なオシャレなのが出てくるんですよね&。線入れたいだけなのに!みたいな。非常に簡単なものばかりですが、ある意味無機質な見出しコードを10個下に書いていきます。無機質なのでかぶってもOKっす。LifeSNSでのシェアボタン記事下のデザインってデフォルトだと、すっきりしない感じで視認性も悪かったんですよね。見た目が綺麗になると読んでいただいている方にも気分よくシェアしてもらえるかなって。「はてブ」や「Facebook」等のシェアボタンを変更しました。記事の上下に設置しました。熱意を持ってかいた記事は読んでもらいたいですもんね。Lifeコピペコードをうつす前に、必ず以前のコードをメモ帳にバックアップしておくなどの対策をしておくようにしてください。シェアボタンを設置する上で、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします(一応)。2015/11/21追記:11/20より、ツイッターのシェア数の取得ができなくなりました。Blogs)これにより、ツイッターのシェア数の部分を「Twitter」と表示するように変更しました。Lifeこれ3Dボタンになってるんですよ!なんかかっこええ!はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。Lifeコピペコードをうつす前に、必ず以前のコードをメモ帳にバックアップしておくなどの対策をしておくようにしてください。シェアボタンを設置する上で、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします(一応)。2015/11/21追記:11/20より、ツイッターのシェア数の取得ができなくなりました。Blogs)これにより、ツイッターのシェア数の部分を「Twitter」と表示するように変更しました。Lifeこっちはフラットボタン。これもシンプルでいいです。ぼくは3Dボタンを設定しました。SNSでのフォローボタン「はてな購読ボタン」、「Twitterのフォローボタン」「feedly登録ボタン」の3つを設置しました。デザインは丸いのにしました。丸いと目立つかなぁと思いまして(笑)これは記事下とサイドバーに設置。自分自身で出来た!って達成感がありましたコレ。feedlyって使ったことないんですよね。RSSリーダーの存在は知ってましたが、使ってみるとすごく便利。これ利用していないってアホだった・・・。これも調べて今は、iphoneアプリの「Sylfeed」っていう有料アプリを使いだしました。やばすぎるこのアプリ。Life9/7追記:全体的にボタンのサイズが大きかったり、他のテーマでやると、円形のフォローボタンのデザインが悪かったりしたので、調整をしました。サイドバーにも馴染むようなフォローボタンサンプルも追加しました。9/9追記:feedlyのURLが間違っていました!「http://www.yukihy.com/feed」を「自分のブログのURL」に変更ではなく、「http://www.yukihy.com」を「自分のURL」に変更でした。回遊率ってものが大事ってことで、これで写真とタイトルが簡単に見れて興味があるものへスグに飛べるので便利だなと設置しました。これはめちゃくちゃ難しいのかなって思ってましたが、「え?」っていうくらい簡単に設置できて表紙抜けしました。各ブログへの設置方法が丁寧に書いてくれています。下記のページにて、お持ちのURL等を入力してscriptコードを作成します。左上をクリックした後出現するメニューの中の、「デザイン」をクリックします。補足ですが、デザインのアイコンは下記のような画像です。遷移後は、下記のような画面が表示されます。デザイン画面の左ペインのスパナのようなマークをクリックする。すると、下記の様にカスタマイズメニューが出現します。「記事」をクリックすると、ソーシャルパーツのカスタマイズが見えます。この左ペインを「記事下」が現れるまでスクロールします。この画面の「記事下」に一番最初に生成したscriptコードを貼付けます。下記のコードは、hoshi0406.hatenablog.comの例です。張りつけ後、「変更を保存する」をクリックします。変更の保存ボタンは左ペインの最上部にあります。左ペインのスマホマークをクリックします。上記の画像のページの中央部、「PCと同じHTMLを設定する」をチェックします。記事上・記事下にMilliard関連ページ以外で設定されているコードが、PC専用だった場合、表示が崩れる可能性があります。上記の設定をした場合には、スマートフォンで表示がおかしくならないかどうかご確認下さい。Proの場合には、記事下のカスタマイズを利用すれば問題なく設定出来ます。上記の手順でブログ側での設定は完了ですが、すぐには表示されません。お手数ですが、サーバ側で記事の関連付けを行うまでお待ち頂きます。通常、この処理は10分から20分ほどかかりますが、記事数が多い場合には多くの時間がかかることもあります。すると、サムネイルが表示されていない関連ページが出現するようになります。サムネイルが表示されるまでには、さらに3時間-4時間ほどお待ち頂きます。シスウ株式会社こんな感じで詳しく書かれていました。スマホ画面でのはてな関係リンクの消去スマホでみると「はてなブログ開発ブログ」とか「週間はてなブログ」等の不要なリンクがあるのでそれを消去しました。ここのプロフィールは表示したいので、コードは抜いて設定しました。下記を参考に設定した。有料版「はてなブログPro」前提の設定。「管理画面>設定>詳細設定」で下記をチェック。下記を参考に設定した。「忍者AdMax」の設置と「Amazonアソシエイト」、「楽天アフィリエイト」、「iTunesアフィリエイト」の申し込みをして承認されました。怖かったのが、iTunesアフィリエイトからの返信がフィッシングメール扱いで、迷惑メールフォルダに入っていてびびってました。調べてみたら問題なくて安心しましたんですけどね。ブックマークレットの活用これやばいです。最高です!カエレバ、ヨメレバ、ShareHtmlの設置はしたんですが、カエレバ、ヨメレバのボタン化で、どこを間違えたのか分からず、思うように設置出来ません。ここはまた改善の余地ありです。ヨッセンスブログの記事の中で商品なんかを紹介することがあります。そのときに必須のブックマークレットが「カエレバ」です。この「Amazon」や「楽天市場」へのリンクテキストを一括でボタンにするCSSを紹介します!ヨッセンスまとめ終わってから考えてみると、かなり簡単に出来ました。やっているときは分からなくて必死こいてましたよ。CSSの仕組みは分かるようになりました。!もちろんスマホにも同じように対応しました。自分自身でいうのもなんですが、ちょっとカスタマイズすると格段に読みやすくなった気がします。気づいたところは、ちょっとづつ変更を加えていこうと思っています。デザイン崩れているときがあると思いますが、色々と試しているところですので、大目に見てやってください。カスタマイズしていないのなら、このくらいはした方が見やすくなりますよ!ゆるくいこー。最後まで読んでいただき、ありがとうございます。シンプルな「鶏ハム」安上がりで簡単な作り方RECOMMENDこちらの記事も人気です。2016.1.18「note」を利用する前に冷静に考えよう。2015.5.11はてなブログProにした3つの理由プラス1つ。働いているサラリーマンの「めいたく」と「かちこ」です。三重県在住のブロガー。月間40,000PV突破。2019年1月に夫婦となり楽しみながら執筆中〜「やってみないとわからない」が持論。知ってそうで知らなかったちょっと役立ちそうな知識や、興味を持った情報と自身の転職で経験した事を発信します。⇨もう少し詳しい「めいたく」のプロフィール⇨もう少し詳しい「かちこ」のプロフィール探すフォローする※シェアボタンではありません。言われようが自分の目で確かめたくなって「どん兵衛の西と東」を比べてみた2020.02.17マスク以外に自分の体をウイルスから守る方法。】が気になったので飲んでみた。