最近「サルワカの更新や運営にどんなツールを使っているのか」と聞かれることが増えてきたのでまとめておきます。今まで試してきた無数のツールの中の生き残った心からおすすめできるツールたちです。参考になれば幸いです。 おすすめのブログ運営ツール 1. 記事執筆スピードが劇的に上げる Mars Edit 最強の記事執筆用のMacアプリです。このアプリを使いはじめてから執筆スピードが2倍くらい上がりました。 このアプリのスゴイところは、編集画面に打ち込んだ内容がリアルタイムでプレビュー画面に表示・反映される点です。つまり、実際の表示を見ながら編集することができるのです。また、画像のアップロードのラクさや、操作の軽さ、落ちてしまったときのバックアップ保存機能なども充実しており、本当に快適に執筆を進めることができます。ちなみにWordPressだけでなく、はてなブログ等にも対応しています。 2017年末に

リンクを目立たせよう クリックして欲しいリンクがある時、ただ単にリンクを貼るのではなく枠で囲って目立たせてみましょう。 できる限りコードはシンプルに、コピペだけでできるようにしました。 枠がない場合はこんな感じですね。 必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG これを枠で囲って強調するようにカスタマイズします。 CSS まずはCSSにコードを追加していきます。以下の中から好きなコードを選んで、ダッシュボードの「デザイン」→「カスタマイズ」→「デザインCSS」に追加して下さい。 スマホで使う場合は、<style>　～ </style>　で囲んでヘッダーのタイトル下にでもぶっこんでください。 シンプルなタイプ 必見！はてなブログのカスタマイズを一気に紹介する – SHIROMAG .entry-content .emphasize-link { position:

久しぶりに、ブログのカスタマイズをしてみました。 デザインによっては多少いじる必要ありますが、おそらくコピペでいけると思うので、コードも書いておきますね。 あとで読む コード CSS まとめ あとで読む はてなブックマークをお誘いするといいますか、リンク踏んでみて読もうと思ったけど、時間ないし、でも共有メニュー出すのめんどうだし。 あとでブラウザの履歴から見ればいいっか、みたいな感じで結局忘れてみない、なんて機会損失を防ぐべく（おおげさ）、記事タイトルの下に「あとで読む」のボタンとリンクを設置して、はてなブックマークしてもらう。 その積み重ねで、ホットエントリーを目指すという、浅く、そして遠い野望を抱きながら、ボタンを設置してみました。 ちなみに、レスポンシブデザインですと、同じコードのまま、ちゃんとでます。 スポンサーリンク コード デザインの「カスタマイズ」にある「記事」の中の「記事上

※追記(2018/01/15) 新しいバージョンを作ったので今後はこちらを参考にしてください。 ※追記(2016/12/29) サイドバーに現在位置を表示して追尾する目次を設置する【目次記法対応版】 - Twilyze blog ※追記(2016/12/22) この記事から色々変更してるので終わったら新しく記事を書きます。（作業中） 前に記事上に目次を設置したけど はてなブログを便利にするカスタマイズ - Twilyze blog サイドバーにも欲しい。ついでに追尾してほしい。 やること やり方 HTMLとjavascript css 少しだけ解説 参考 やること サイドバーに目次を設置 現在位置の背景色変更 スクロールすると位置が固定（追従）される やり方 HTMLとjavascript デザイン設定の[カスタマイズ]-[サイドバー]-[モジュールを追加]-[HTML]に貼り付ける。 （

こんにちは、つばさ（@tsubasa123）です。 先日公開したこちらの記事。 basanote.hatenablog.com はてなブックマークの「webデザイン」カテゴリに（短い間でしたが）掲載されまして、そこそこいろんな方に読んでいただけたようです。ブックマークしてくださった皆さま、ありがとうございます。 はてなブックマークに掲載されるというのは目標の1つだったので予想よりも早く達成できてご満悦です。 需要はありそう 実装と設定 CSSの追記 JavaScriptの追記 ちょっとした追加の設定 さいごに 関連記事 需要はありそう 先のカスタマイズについて、ブログアドバイザーのポジ熊さんからこのようなお言葉をいただきました。 @_tsubasa123_ 全力で導入したい|дﾟ)— ポジ熊@ブログアドバイザー (@poji_higuma) December 5, 2016 嬉しいですね、

今回は僕が現在も使っているはてなブログのカスタマイズについて紹介していきたと思います。ブログのカスタマイズは楽しいので思わずのめり込んでしまいます。 つい色々なカスタマイズを導入してしまいますが、後々よく考えると必要のないカスタマイズだったり、ページが重くなってしまうものも多くあります。この記事では僕が現在でも使わせていただいているカスタマイズを紹介していきます。 「はてなブログ pro」の契約が必須 はじめに前提としてですが、はてなブログを自由にカスタマイズするためには「はてなブログ pro」の契約が必須となります。 「はてなブログ pro」について詳しくはこちらの記事を御覧ください。 www.tontonpig.com シェアボタン、フォローボタンの設置 スマホ版、PC版ともにみやすいシェアボタンとフォローボタンを設置しました。はてな純正のものに比べるとかなりデザイン的によくなりました

2016 - 05 - 15 コピペでできる！画面下固定でも邪魔くさくないSNSシェアボタン（はてなブログのカスタマイズ） ブログ ブログ-Tips SPONSORED LINK シェアする Twitter Google Pocket LINE こんにちは、NAEです。 先日ブログのデザインを変更しました。今回はその詳細編として、 画面下に固定されるけど邪魔くさくならないSNSシェアボタン をはてなブログへ設置する方法をご紹介します。 参考記事： nice-and-easy.hatenablog.com コピペコード はてなブログのカスタマイズにおいていじる要素は主に3つです。 必要な外部ファイルの読み込み（Webフォントなど） 表示するものの定義（HTML） その装飾や動きの指定（CSS、Javascript） それぞれのいじり方を順番にご紹介します。 外部ファイルの読み込み 今回は、ボ

それで、「そんなにいいのかな？」と半信半疑でインストールして、使ってみた瞬間、惚れました。 プログラミングをする人にとって、Sublime Textは、「恋に落ちるエディター」とよく言われていますけど、WEB開発者にとってBliskは「恋に落ちるブラウザ」といっても過言はないのではないかと思います。 以下では、そう思うに至った理由について述べたいと思います。 この記事は、2016年7月9日に書いたものです。2016年11月1日にversion 1.0.125.166が出たことにより、機能の一部が有償プランに加入しないと利用できなくなりました。ですので、無料で利用する場合は、30分で機能制限がかかったりするようになったのでご了承ください。 Blisk（ブリスク）とは Bliskは、WEB制作者がサイトの動作確認をする上で、便利な機能がデフォルトで備わっているWEBブラウザです。 現在は、Wi

2016 - 10 - 19 はてなブログスマホカスタマイズで実践していること【2016】 blog blog-hatenablog Twitter Google Pocket 話題の記事 ダッシュボード→スマートフォン→ヘッダ→タイトル下 【保存版】2ヵ月必死にはてなブログのデザインをカスタマイズしてきたのでまとめて紹介するぞぉぉぉ！！！【初心者向け】 - TureTiru Times 見出し付きの枠線はこちらで公開されているHTMLを参考に。 解説 現在売り出し中の記事を、 全てのサイト訪問者にアピールすることが可能です。 流入先に関わらずすべてのユーザーにリンクを示すことができるので、とっておきの記事へのリンクを設置すると良いでしょう。  記事の装飾等 コピぺでOK！CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】 - North-Geek 記事

こんにちは。Facebookページを作ったものの、なかなか「いいね」が集まらないケーです（苦笑） Facebookページを業務で運営する場合だと、ターゲットに沿ったユーザー向けに広告を出したりしますが、プライベートでやるには敷居がちょっと高いですよね。 バイラルメディアでよく見かけますがFacebookページのいいね(購読)を増やす方法の一つである「この記事が気に入ったらいいね」をつけましたので、その方法を説明します。 ↓こんなのです。 ※この記事は、はてなブログユーザー向けです。 設置方法 こちらの記事を参考にさせていただきました。この記事では動的にアイキャッチを変更する方法とモバイルページの設置方法が無かったので対応してみました。 ichitaso.com PC まず記事内にはてなブログでの設置方法という部分がありますので、そちらを参考に【デザイン】ー【カスタマイズ】ー【記事】の記事下

先日作ったカテゴリごとにおすすめ記事を切り替える方法がめちゃめちゃ好評だったので、もっと簡単に導入できるようにコードを改良しました。 カテゴリごとにおすすめしたい記事を選んで、それを表示させる方法です。 【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 | SHIROMAG jQueryを使っているので上記記事より少し重くなりますが、それでも導入しておく価値はあると思います。 例えば、以下の記事に飛ぶとサイドバーでおすすめされている記事が変わります。（スマホだと記事上） ダウンロードしておきたい最新おすすめ洋楽【2016年版】 貧困女子高生のヤラセと貧困は別問題 このように、記事のカテゴリによってオススメの記事を切り替えることができます。 ニーズに合わせて前回とちょっとデザインを変えてみました。 ちなみにこんな感じに表示されます。 「カスタマイズ」というカテゴリには、カ

2016 - 08 - 31 スマホサイトカスタマイズで実践しているテクニック【動線を整備しよう】 ブログ ブログ-テクニック Twitter Google Pocket フォローする はてな Twitter Feedly

はてなブログに関連記事や人気エントリーを表示させるブログパーツです。 一般的に「あわせて読みたい」というフレーズと一緒に表示されています。 特徴 利用方法 とりあえずペタリと貼って試したい 表示用コードをはてなブログに貼り付ける 各種の設定 表示するエントリー数の設定 リストの種類 リストのテキスト表示 テキスト型リストの「はてなブックマーク数」の表示 タイトル 「もっと読む」ボタン 「feedlyで購読」ボタン カスタムCSSの利用 追加パラメータ(実験中) 描画用コードをはてなブログに貼り付ける スクリーンショット あれ？表示されない？(困ったときは) 諸注意など 特徴 はてなブログ(無料版)、Proのどちらでも利用可能です。 PC／スマートフォン版のどちらでも動作します。 記事上、記事下、サイドバーといったHTMLを挿入できる場所であれば、何処に置いても表示する事ができます。 リスト

僕はTwitterにこのブログの過去記事をtwittbotを使ってbot化して流しています。 twitter.com 自分のブログのＵＲＬとタイトル、語句を登録しておいてランダムでツイートするようにしてるんですよ。自ブログで過去記事紹介したりはするんだけど、やっぱり他の人の目に触れないと意味ないからねー。 こんな感じ。で、この「タイトル+ＵＲＬ」を拾うのにとある方のお力を拝借してたんですが、自力でなんとかやりたいなと（諸事情） 昨日そんな事を考えてたらタイムリーなことにらくちゃんことらくからちゃさんが そろそろ、記事数もフォロアーも増えてきたので、過去記事紹介とか流してみようかなあ。 — らくからちゃ (@lacucaracha) 2015, 9月 27 とかツイートしたはったので相談したものの、Ｂ29に竹槍で挑んだように自滅。（Googleにジェイソンが、までわかった）ありがとね。 それ

テーマNakedでは、目次が既にデザインされています。 しかしいろんな方から、リストは番号表示でなく、一般的なリスト表示にしたい！との声をいただきました。正直、この部分はカスタマイズしておくべきではなかったかなと反省しています^^;。 なのでリスト表示に戻す方法を記事にしたいと思います！ 続きを読む 注：この記事は、はてなブログテーマNaked用です。 Nakedはもともと、ナビゲーションをつくるCSSが組まれていたのですが、子カテゴリまで表示することはできませんでした。 追加機能として、子カテゴリまで表示するようにCSSを変更したので、作り方を記事にしたいと思います。 注：子カテゴリ無しバージョンは theme-naked.hatenablog.jp をご覧ください。 続きを読む テーマNaked以外でも使えます。 フォントの変更の仕方です。 続きを読む テーマNaked用の記事になりま

■始めに ブログのデザインをあれこれと変更するのは楽しいですね。しかし、正規のメニューとして提供されているカスタマイズ機能の範囲は意外と限定されているので、自由自在というわけにはいきません。 しかしはてなブログでは、適用するスタイルシートを編集することができるので、スタイルシートの知識があれば、相当にマニアックなデザインカスタマイズが可能になります。 ■コピペで大丈夫！ そう言われてもスタイルシート？何それ？という方も、安心してください。最初はコピペでも、いろいろ試している間に、どこをどう変えればデザインがどうなるのかは、だんだんと分かってきますので。 ということで、今回は記事にメリハリを付けたり読みやすくするために必須の「見出し」のデザインをカスタマイズする方法をまとめてみます。 なお、本記事の記載内容はPC向け画面での方法です。レスポンシブデザインを適用することでスマホ向けにも同じよう

長かった！ここまで長かった…！ まとめてみたら1万字の大ボリュームになってしまった！ それなりに満足する出来になってきたので当ブログで行ったカスタマイズをまとめて大公開するぞっ！！（といっても初心者向け） カスタマイズする際は前のコードを取っておきましょう！カスタマイズ用のサブブログもあると便利！紹介だけなので各自で頑張ってみてね。僕も素人だったのでやればいろいろできますぞ。 導入テーマ タイトル周辺 タイトル画像 グローバルメニュー 記事本文 記事本文のCSS 記事内の一部を背景色と蛍光ペンみたいな下線で装飾する方法 リンクの色 変な行間の消し方 見出しのカスタマイズ 枠線 目次 記事タイトル等 日付 記事タイトルの見出し 記事上のタグと記事間のスペース調整 続きを読むボタン 挿入する画像に枠を付ける サイドバー プロフィール フォロー、シェアボタン サイドバーのモジュール まとめ 導入

続きを読むボタンのデザインを変更したいとのコメントを頂いたので、いくつかのサンプルを掲載したいと思います。掲載しているサンプルは全て Innocent 用になりますが、コードを一部修正すれば Blank やその他のはてなブログテーマでも使用可能です。 基本CSS サンプル 1. 背景色変更 2. 背景色・文字色変更 3. 背景色変更（グラデーション） 4. マウスオーバーで中抜き 5. マウスオーバーで中埋め 6. 影をつける 7. 影をつける（内側） 8. アイコンを表示 9. アイコンを表示・マウスオーバー時にアイコンをずらす 10. 文字列を変更 まとめ 基本CSS .entry-content .entry-see-more { background-color: #222; border-radius: 2px; box-sizing: border-box; color: rg

まず始めに言っておきますが、はてなブログは読み込みがちょっと遅いです。 何も考えずにカスタマイズしまくっている読み込み速度の低下を招き、場合によっては閲覧者のストレスが溜まる原因になりかねません。 私のブログでもそこそこカスタマイズをやっているので、一時期はかなり読み込み速度が遅くなっていました。 ということで今回は、ページの読み込み速度を速くするためにこのブログで行ってきたことをまとめようと思います。 速度上げるために色々やる前は、 PageSpeed Insights これで採点するとスマホで50点くらい、PCで50点後半くらいでした。めっちゃ低い…。 ページにもよりますが、今はスマホで60～65点くらいでPCなら70～75点くらいです。（ただ、コードを載せてる記事はGistを利用しているので点数がかなり低い） はてなブログにしては高いほうだと思います。 ちなみにわざわざPageSpe