今日もWEBで生きている

略して「WEB生き」。豆ゴロが思いのまま書き殴ります。

【めちゃめちゃ簡単だった・・・】続きを読むボタンを真ん中揃えにする【ブログカスタマイズ】

f:id:mamegoro:20170912180731p:plain

夏の一番好きな天気なは湿気がなくて、わりと風がふいてて涼しい曇り。
どうも、豆ゴロです。

ちまちま毎日はてなブログのカスタマイズをしているんだけれども、本当に先人の方々がブログに色々と書いてくれているお陰で、ほとんど思考停止してコードをコピペするだけで良いので助かっています。
ただ、続きを読むボタンをセンタリングする方法がどこにも載ってない!って事でちょっと色々やってみました。

そもそも続きを読むボタンなんでつけてるの?

はてなブログproだと記事を一覧表示出来るんだけれど、タイトルだけだとインパクトが弱い場合も多いので、やっぱりチラッと文章見せが良いかな~と個人的な意見でつけてます。
(最近ヒートマップが見られる解析ツールも導入したので、1000/日PV超えたらぼちぼちBAテストとかも出来たらなと思ってます。)

続きを読むボタンをセンターにする方法

aタグのスタイルにdisplay: table;margin: 0 auto;でいけるって知り合いからコメント来ました。
よくよく考えたらそうやん・・・。
恥ずかしすぎる。
こうやって人は大人になっていくのですね。
こんなんでプロとか言ってたら笑えるわ!!!!!

でもこのjqueryはHTML自由効かないブログで何か色々できそう!
TOP画像を今もくもくと作っているのでレスポンシブの可変で設置する時に使ってみよう。と自己擁護してみます。

恐らくブログをカスタマイズしている人なら既にjqueryのコードを入れ込んでいると思うけれど、いれていない人はいれましょう。

設定→詳細設定→検索エンジン最適化→headに要素を追加に下記のコードを追加。

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js\"></script>

そしてー・・・

デザイン→カスタマイズ→ヘッダー(フッターでもいいけど)→タイトル下に以下のコードをはりつけ。

<script type=\"text/javascript\">
    $(function(){
        $(\"a.entry-see-more\").wrap(\"<div style=\'text-align:center;\'></div>\");
    });
</script>

はい!完成!

つまり・・・

続きを読むって普通に挿入するとaタグにクラスが設定されるようになっていて、センタリングさせるためのスタイルがかけられないので、jqueryで「続くを読む」のコードの前後に指定のタグいれようねって話。
めんどいのでスタイルを直書きしましたが、綺麗に書きたい人はCSSに追加して書きましょう。

総括

はてなは地味に痒いところに手が届かないけど、最近はjqueryとかCSSでなんとか出来るね。
続きを読むボタンのカスタマイズについては、色々なブログで紹介されているのでぐぐってください。

ぶっちゃけ記事投稿する時にHTML直書きですれば処理されるんだけど、毎回毎回いちいち書くのははめんどくさい。
あとfloat:right;いれて右揃えにするって記事もみたけど、あんまり美しくないのでやめましょう。
@他何かいい方法あったらぜひ教えてください。



↓お金持ちの方、施しをお願いします。物乞いチャレンジ中↓