実際にはProでなくともできることばかりですね.
色々なサイト様から参考にさせて頂きました.
- サイドバーに画像付き最新記事
- サイトバーに画像付き人気記事
- シェアボタン・フォローボタン
- グローバルメニュー(レスポンシブ)
- クリックして開閉する目次
- 関連記事にMilliardを使う
- Push7
- 〆
サイドバーに画像付き最新記事
デフォルトでも最新記事を表示するモジュールはありますが, 折角なら画像付きで良い感じに表示してアピールしたいですよね.
貼ってまもなくは何故か14日までからしか表示されなくて焦りましたが, 少し待ってからちゃんと表示されるようになりました.
通常の「編集オプション」から設定する「アイキャッチ画像」でないのが惜しまれます.
ダッシュボードの[デザイン]>[カスタマイズ]>[サイドバー]からモジュールを追加するだけです.
ちょっと読み込みに時間がかかります.
サイトバーに画像付き人気記事
こちらははてブの多い順に表示してくれます.
シェアボタン・フォローボタン
これまでは標準のものをそのまま使っていましたが, これを機にデザインを変えてみました.
URLスキームのサイトの方もこんな風にしてみようかな…
グローバルメニュー(レスポンシブ)
まだコンテンツは変更するかもしれませんが, ヘッダー下にグローバルメニューを設置しました.
特にブログ内検索を先頭に欲しかったんです, あると便利ですよね…
トップに移動するにはタイトル画像をクリック(タップ)すればいいんですが分からない人がいる可能性を考慮して入れてあります.
横幅が狭くなってスマホ並になるとグローバルメニューはトグルメニューになります.
本当はページ先頭にしたかったんですが移動させると背景が横一杯になってしまって不格好だったのでここにしました.
トグルメニューになった場合はMENUをクリックすると2分割でコンテンツを表示します.
但しブログ内検索については, 僕の場合そのまま単純に追加しただけでは上のように位置が下にズレてしまいました.
なのではじめのdivタグの中に
style="margin-top: -20px;"
と追記することで調整しています.
2つ以上上の画像は調整済みの状態ですね.
(スマホ)ヘッダー画像を消してトグルメニューにブログ名をつける
このままだとMENUの左がさみしいので折角なのでブログタイトルを書こうと.
でもそうするとヘッダー画面も邪魔に思えてきました.
というわけでまず[デザイン]>[カスタマイズ]>[カスタムcss]に以下を追加します.
次に参考にさせてもらったYukihy Lifeさんのサイトにあるコード1の1行目を次のように変更します.
ブログURLやブログ名, アイコン画像は任意です, 特にアイコン画像は不要なら削ってください.
結果このようになりました.
まだ上に余白がまぁ取り敢えずこれで行きます.
クリックして開閉する目次
前々から自覚していたんですが, 目次機能は便利な反面, 見出しが増えすぎるとどんどん長くなって本文が沈んでしまいます.
人によってはそもそも目次自体要らないでしょうから, はじめは閉じておいて必要な人だけ開いて使えるようにしたいな…と思ってました.
関連記事にMilliardを使う
以前から気になってたのでこれを機に入れました.
特定の場所だけに貼りたい場合, 「表示位置」の「フッターの下」のチェックは外した方が良いかもしれません.
特に関連記事を本文, 記事下シェアボタンの下に置くとPC表示の際Milliardの関連記事＋Milliardの関連記事…なんてことになります.
Push7
まだマイナーなのかもしれませんが, メルマガやSNS, RSSでもない新しい購読の仕方…ということで採用してます.
まだ記事執筆時点で3日目なので効果云々はこれからです.
〆
やろうと思えば色々出来たんですね, 今までやってこなかったのが悔やまれます.
まだもうちょっと弄るかもしれません, それより記事を書かねば.
