はてなブログのデザイン変更で分かったこと

f:id:jr0704japan:20170511101457j:plain

見た目を一新

まずは、デザインテーマを変えました。

スマホのほうが変わってないので、今検証中です*1

shiromatakumi.hatenablog.com

変えましたと、いいますが、前がなんだったかわかりません^^;

見出しを変えたくてシックハックしている時に、上のテーマを見つけたのでこれは、wordpressで使わせて貰っている、Simplcityに似てシンプルでいいし、なによりもグローバルメニューが使えるのがカッコイイ(੭ ˃̣̣̥ ω˂̣̣̥)੭ु⁾⁾

Brooklynのグローバルメニューの設定

ここで、昨晩苦労して出来なかった点は

グローバルメニューにする記述の部分が分からなかったです(*´；ェ；`)みゅ～・・

まずは一般ユーザー向けのコード。

これを書き変えます。

<div id="global-menu">
    <ul class="global-menu-list">
        <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
        <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
        <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
        <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
        <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li>
    </ul>
</div>

これを、ダッシュボードのデザイン → カスタマイズ → ヘッダ → タイトル下にペーストすればOKです。メニューは５項目までにして下さい。

良く良く読めば、アドレスの次に　> を書いて　メニューの名前をコピぺすればいいのだとわかるのに何時間かかったことか

やったんですけどねえ、最初はまあ間違いだらけだったんでしょう。多分。

ヘッダーから下が、まっくろケッケになってしまいました。

自分の場合の設定を書きます

で、本日よくよく見て以下のように自分のサイトでは書き換えて

出来ました

<div id="global-menu">
<ul class="global-menu-list">
<li><a href="http://chan50.hatenadiary.jp/archive/category/%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a></li>
<li><a href="http://chan50.hatenadiary.jp/archive/category/WordPress">WordPress</a></li>
<li><a href="http://chan50.hatenadiary.jp/archive/category/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E8%A8%AD%E5%AE%9A%E7%B7%A8">サーバー設定編</a></li>
<li><a href="http://chan50.hatenadiary.jp/archive/category/%E6%A5%BD%E5%A4%A9%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E4%B9%97%E6%8F%9B%E7%B7%A8%E3%80%80%E7%AF%80%E7%B4%84">楽天モバイル乗換編　節約</a></li>
<li><a href="http://chan50.hatenadiary.jp/archive/category/%E3%82%A2%E3%83%95%E3%82%A7%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%88">アフェリエイト</a></li>
</ul>
</div>

わけわかんないですね～。

wordpressだつたら、プラグインがあって、奇麗に表示させたり、小さく一部分だけを見せたり、皆さんはやられてます。

まあ、私には今のところ出来ないので、わかんないですけど、

多分、少し勉強すると出来るんでしょうね!

「はてな記法モード」でソースコードを色付け

で、ぐぐってみました。

sonickun.hatenablog.com

　コードを貼り付けるには、「はてな記法モード」で編集できるようにする必要があるそうです。

　ダッシュボードの「設定」→「編集モード」で「はてな記法モード」にチェックを入れます。これもしたんですけど、「はてな記法モード」にしちゃうと、編集見たままモードに戻れないんですよ～

しかも、まったく位置がわからなくなるほど、文字の羅列で書きようがないで、これは途中でダウンです。

カテゴリーが元々6項目あったのですが、メニュー表示は5項目にしました。ポイントサイトはいれてません。

でも、一応6項目でやってみたら、メニューが縦方向に長くなってしまいました。

なるほど、だから5項目なのかと納得( ﾟｰﾟ)( ｡_｡)ｳﾝ♪

シェアボタンの設置

これも記事があったのですが

はてなブログの中にも設定する項目があったので

(はてなの機能だったのかな??　　確認してみます)

こちらのサイトでは、やってないです。

まあ、シェアボタンの意味さえ、よくわかってないおっさんが、作成してるんだから、大体使い方も良く分からないです　(੭ु ›ω‹ )੭ु⁾⁾♡

皆さんのを押してみたいのですが、押したらどうなるのかわからないので、やってないです。

カラフルがいいかとおもって、フルカラー表示にしてます。

読者登録ボタンの設置

読者登録ボタンの設置というのもあったので、記事下にコピペして、id とアドレスを書き換えて作成してみました。

黒ではなくて、赤にしました。

<div class="reader-button color">
    <a href="http://blog.hatena.ne.jp/ここにidを入れる/ここにブログのURL/subscribe">読者になる</a>
</div>

これも、どこかにあるんですよね。

読者になるボタン。

見出しの変更

中見出し　　h4

子見出し　　h5

標準　　　　h6

と、気づくのに一体どれだけかかったことか

そして、記事毎に見出しを変える場合、無理矢理はてなの場合には、html編集で書き込まなければ出来ない。これはheadに書き込むのが普通だけれども、はてなの場合のやり方がわからないです。

で、デザインのカスタマイズのcssという所に貼り付けるのですが、どうも上手くいかない。

この記事の中見出しも、緑色だけのはずが、下に黒い線が出るし～

色々な記事の見出しは、これをコピぺでokのを貼り付けても、いい具合にならないし

中々、はてなブログ勉強することが多いです。

*1:+_+

50のてならい

50になってからネットについて色々と検証していくブログです。