何でもない日常だから

幸せだと思う。

忍者Admaxネイテイブ広告の編集

はてなブログのスマホページに忍者Admaxのネイテイブ広告を導入しました。(このブログではないです)

 

導入方法は多くの方が紹介していると思いますので省略。。。

 

初期設定でもそれなりに馴染んでいると思いますが、編集機能があるのでできるだけ違和感が無いように頑張ってカスタマイズしてみました・・・

 

参考にしたページはこちら

 

 

基本的な部分はそのまま使わせて頂いていますが、一部変更しています。

自分も注目記事の下に表示させたかったのでフッタにタグを挿入しています。

 

<a href="${CLICK_URL}" target="_blank" style="box-sizing:border-box;display:table;table-layout:fixed;width:100%;padding:10px 35px;border-top: solid 0.5px #dddddd;">
<div style="display:table-cell;width:70px;height:70px;background-

 

元のタグから修正したヶ所はpaddingで余白の調整。

border-topで上側だけボーダー。

画像サイズを注目記事の画像サイズに合わせています。

 

pxの指定で0.5が有効なのかどうかわかりませんが表示されているので良しとします。

 

自分のスマホで確認した限り(数字の調整は目視!)ではこれで良かったのですが、人によって違うのかは気になる所です。

 

注目記事の仕様が解っているなら悩む必要無いですが、自分にはこれが限界です。

 

本当は注目記事との余白を縮めるとさらに違和感が無くなるのですが、自分にはこれが限界。検索しようにもどう検索したら答えが見つかるのかがわからない始末です。

 

解る方がいらっしゃいましたら教えて欲しいです。

 

複数のはてなブログの管理の仕方?

そんな事当然と思う方も多いかもしれませんが個人的には気がついたときに嬉しかったので書いておきます。。。

 

はてなブログは無料でも3個PROなら10個も1つのアカウントで作成できます。

 

ま~出来るからと言ってもそれ程たくさん管理する事は無いと思いますが、3つや4つくらいなら管理している人もそこそこいるとか思います。

 

そんな複数ブログを書き分けする場合通常手順ならダッシュボードからマイブログで目的のブログを選択すると思いますが、はてなブログにはメインブログという概念があってあまり意識せずに記事を書き始めるとサブブログの記事を書きたかったのにメインブログで記事を書いていたなんて事がまれによくある?事があったりなかったり・・・

 

という事でそんな事態を回避する為にはそれぞれのブログの管理画面をブックマークする事。それだけです。

 

個人的にはブログの概要ページをブックマークする事をお勧めします。

こうするとブックマークをクリックする段階でどのブログに記事を書こうか意識するので間違いがまず起こりません。

 

さらにこのブックマークははてなカウンターやFotolifeにも使えます。

特にFotlifeは画像のアップロードをブログ毎に分けていると思うので間違って別ブログのフォルダにアップロードしてしまってめんどくさいからそのまま使うか、それとも本来のフォルダにアップロードし直すかなんて考える必要もなくなります。

 

複数ブログの管理なんて余裕で書き間違えた事なんて無いという方には必要無いですが、一度でも間違えて残念な思いをした事がある方は一度試してみると良いかと思います。

 

はてなブログのブログカード

前回の記事でも使っていますが、内部、外部問わずリンクを張る際になんだかおしゃれに見えるあれです。

 

リンクをコピーして張り付けるだけと非常に簡単で便利なのですが、使っていると、色々と改善したいと思う事も出てきます。

例えばデフオルトのまま使用すると

 

nandemonai.hatenablog.jp

 

こんな感じです。悪くないです。でも、枠下のリンクは余計。

という事でリンクを削除。HTML編集から<cite>~</cite>の部分を削除

スマホで見ている方は変わらないと思いますがPCで見る場合はブログカードの幅が中途半端なのでmax-widthを100%に変更

簡単でおしゃれなリンクも結局自分が満足する為にはそこそこ手間がかかっています。

それとレイアウトを変更しようと数値を変更しようと(具体的にはもう少し高さを低くしたい)すると間単に表示が崩れます

 

という事で先人の皆様が上手にカスタマイズしていないか検索していたらChromeのプラグインで同等の機能が使える事がわかりました!

実際に参考にしたサイトを失念して()再度見つける事ができなかったのですが、こことほぼ内容は同じだったと思います

mbdb.jp

という事で早速試してみます

内部リンクの際の高さが低くなっている+枠下の余計!なリンクも無い。デフォルトでページ幅いっぱいに表示してくれると希望が全てかなったリンクが出来上がりました!

 

但し本当はもっと高さを低くしたくて少し編集を試したのですがやっぱりレイアウトは崩れてしまいます。

初期値を変更すればうまくいくかもしれないのでレイアウトを崩さず希望の値に変更する事が今の課題です

 

はてなブログの文字数制限と表組みの話(その2)

前回

の記事ではてなブログのプレビューには文字数制限があるが、公開時には全て表示される事が確認できたのですが、だからと言って何も解決には至っていません。

むしろこのままでは問題がある事が確定してしまっただけです。

 

という事で問題点を再度確認

 

1.はてなブログのプレビューには制限がありhtmlベースで文字数65536が限界と思われる。但し公開時はその限りでは無い(編集作業に於いては非常に問題があると思います)

 

2.そもそも文字数がオーバーフローしてしまった原因としてエクセルからのhtml出力はソースが非常に長い

 

という事で解決策を検討・・・

 

1.非常に消極的ですが、ページを分割

 

ページの構成上少し難しかったし、今回それで乗り切ったとしても又同じ問題が起こる可能性がある。

という事で最終手段として他の方法を検討

 

2.エクセルから出力されたソースを修正(スリム化)する

 

これは前回も少し触れましたが、セル1つづつに書式が入っていて多分やれない事もないけど非常に時間がかかる、一度ぶっ壊してしまった時の復旧がやっかい。

さらにこれから毎回そんな事をすると思うととてもじゃないがやってられないという事で、パス。

 

3.あきらめて、はてなの表組み記法を使う

 

慣れればそこそこ手早く組めるみたいですが、結合は出来ない(のですよね?)など複雑な表組みは出来ない。

これでは、表組みを多用するページでは対応しきれない。

 

こんな状態でどれも決め手にかける状態でした。

この間も色々検索した中でなんとかなりそうだったのがwebサービスでテーブルタグを出力してくれるサイトがあるらしい事がわかりました。

 

ただし、いくつか回ってみたのですが、セルの結合はできないとか、表組みの指定がめんどくさい、使ってみたけどレイアウトがどうもうまくいかないと中々しっくりくる所がみつかりませんでした。

 

こんな感じなので正直あきらめて記事を分割しようかとも思ったのですが、とにかくこれにかけてみたいと思ったのでしつこく()検索した中でやっと自分の希望がかなう所が見つかりました。

 このサイトです。WordPressならプラグインで対応するみたいですが、webでも全然問題無いです。複雑な結合もクリック、ドラッグで簡単にできます。

出力されるhtmlもエクセルからの出力と違って非常にシンプル。書式設定もcssできちんと出力されるのでかっちりと決めてデザインcssに入れ込んでしまえば問題無し。

後は状況によって個別記事で設定し直せば良いので基本的には気を使わなくてすみます。

おかげで、テーブルタグが長すぎて文字数制限をオーバーしてしまう問題は解決しました。結果ページの読み込みも少しは早くなるだろうし良い事ばかりです。

ちなみにこのページ上で文字入力もできますが、文字入力ははてな側で入力しています。

 

今は繰り返し使う形の表組みはテンプレート化して下書き保存していますので、使う時にはブラウザを複数起動してタグを表示しながら使っています。

 

さらにテーブルタグの構成が非常にシンプルなので少し変更したい時は自力で変更しています。

そんな訳で今では、このサイトを使わなくてもなんとかなっていたりしますが、ここに出会わなければ今頃どうなってしまっていたのかと考えると少し怖いとも思います。

 

とりあえず書きたいと思う事がまだいくつかありますので気が向いたら更新したいと思います。

 

はてなブログの文字数制限と表組みの話(その1)

その日も別ブログをさくさく更新している自分。

 

ある程度入力も終わって確認の為にプレビューしてみると・・・

 

???何か表示が崩れています。それに一部表示されない所もあるみたいです。

 

最初は何が起こったのか良く解らなかったのですが、とりあえず原因を探ってみる・・・

 

表示されなかった所も編集モードでは見えている。

HTMLの編集画面を見ても大丈夫!ただし、ここで少し違和感。それ程文章は書いていないのですが、ものすごく長い、とにかく長い、長い・・・

 

というのもエクセルから出力した表組みを多用していた為です。

一度でもエクセルからhtml出力で表組みを使った方ならわかると思いますが、再現性は高いのですが、その為か非常にソースが長いです。セル1つづつに書式が入っています。かと言って中途半端にさわると表示が崩れて復旧不可能になってしまうのでやっかいです。まだまだ追加予定のページだったので頭を抱えてしまいました。

 

ただ、この時点では原因は確定した訳では無いので「はてなブログ 文字数」で検索・・・

 

すると検索したページによって1万文字だの2万文字だの書かれていますが、私の記事は編集画面の右下に表示される文字数は1000文字程度。

但し何か制限がある事は確認できたので少し記事(表組み)を減らしてみると正しく表示されます。

うん、間違い無いね文字数制限に引っかかっています。

それも入力した文字数では無くてページのソースも含めた文字数が制限の対象で間違いないです。

 

確認の為に文字数をwebで確認してみると66000文字くらい。

少し減らして65000文字くらいにしたら表示されました。

 

これはあれですね。限界は2の16乗の65536かなと思います。

スロットを打つ方ならつい反応していまう65536。

スロットはフリーズしないけれど自分がフリーズしてしまったというそんな話でした。

 

※文字数制限はプレビューのみで公開時は正しく表示されるみたいです。それにしてもやっかいですね。

 

ここまで書いて大体800文字。オーバーフローするまでにはまだまだ余裕がありますが、いったん区切って次回解決編へ・・・