Enjoy!America

アメリカ留学帯同駐在妻生活と旅行とカメラのこと。

MENU view raw

【スポンサーリンク】

はてなブログのスマホデザインを初心者がカスタマイズしてみた。

こんにちは、なつです。

なんだかんだ手付かずだったブログのカスタマイズを再開しました!

初心者が調べながらコピペでお世話になったサイトを紹介します。

 

 

 

ヘッダー(一番上の部分を画像のみにしました)

今まで、小さなアイコンと写真だけでしたが、ちょっとブログっぽくしました。Phontoと言うアプリを使ってタイトル込みの画像を作成し、それを貼り付けました。スマホデザインのヘッダーのチェックボックスを画像だけにするのみです!

参考にしたブログはこちら〜

www.yuzuhack.me

加えてこちらのブログで書かれている、記事一覧に表示させるものを、アイキャッチ画像、日付、タイトルだけにする。も行いました!

 

 

目次を設定する

hitsuzi.hatenablog.com

 

めちゃ有名なひつじの雑記帳からコードをいただきました。

コードを挿入するのはデザイン→スマートホン→記事→記事上(下)にコピペしました。もう丸々コピペさせていただきました。ありがとうございます。 

 

<追記>メニューが動かなくなってしまいました(;;)

ゆきひーさんのコードに書き換えました!!

www.yukihy.com

 

 

 

見出しを変更

今まで使ってた見出しが自分的にいまいちで。。。参考にしたのはこちらのブログ!コピペで問題なく反映されて助かりましたぁ。

www.decoboco-life.com

 

 

はてなキーワードを消したい

Proだと詳細設定のキーワードリンクのキーワードリンクを付与しないをチェック入れると、消えるそうですが。なんかスマホ側が消えてる気がしない。検討中

www.katsuolog.com

 

 

グローバルメニューをつけたい

最初できないよ!って思いましたが超有名ゆきひーさんのブログに助けてもらいました。このまま貼り付けたらできました。

www.yukihy.com

カテゴリとURLの設定の仕方は以下です。

www.natsutravel.com

 

 

記事内の細かい設定

こちらを参考にしました。

english-apple-diy.hatenablog.com

 

 

スマホ記事がなんか動くのを直したい

スマホで記事を見ると左右に揺れる。イラつく。治すにはこちらのブログを参考に。

最初やった方法でダメで、以下の方法でしたら治りました!ありがたや

www.interest-blog.com

 

 

シェアボタンをおしゃれにする

こちらのブログすごくわかりやすく、無事設置

www.ituore.com

 

囲み枠をつける

saruwakakun.com

要領はPCと一緒だけど、どこにCSSを入れるかわからなかったが。。。

記事下です!!

記事下に以下で反映されました。ふぅ


<style type=text/css>
.box6 {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 2px #5b8bd0;/*点線*/
}
.box6 p {
margin: 0;
padding: 0;
}
</style>

 

ふぅ今日はこの辺でやめておこうかな。。!

ちょっとはおしゃれに見えるだろうか?

あとはPC版もいじってみようっと。